@iyulab/components 1.31.0 → 1.32.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [1.32.0] - 2026-08-21
+
+### Added
+
+- **`u-select`, `u-date-picker`, `u-textarea`, `u-checkbox`, `u-switch`, and `u-slider` now
+  support `.focus()`/`.blur()` on the host element**, matching `u-input`'s existing contract.
+  Previously only `u-input` delegated `.focus()` to its actual interactive element; calling
+  `.focus()` on any of the others was a silent no-op, since the host element itself carries no
+  `tabindex` — only an internal element does (the container, the native `<input>`/`<textarea>`,
+  or, for `u-slider`, the first thumb). Any consumer building a generic "scroll to and focus
+  the first invalid field" flow now gets consistent behavior across every form control this
+  library ships, instead of having to special-case each one.
+- **`u-field` now exposes `.focus()` publicly**, delegating to the first focusable slotted
+  child — the same lookup its label-click handler already used internally, now available to
+  consumers slotting an arbitrary form control (not one of this library's own) directly into
+  `<u-field>`.
+
 ## [1.31.0] - 2026-08-20
 
 ### Added

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

@@ -42,6 +42,8 @@ export declare class UCheckbox extends UFormControlElement<string> {
     render(): import('lit-html').TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private handleInputChange;
 }
 declare global {

package/dist/components/checkbox/UCheckbox.js

@@ -74,6 +74,12 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 		this.indeterminate = false;
 		this.invalid = false;
 	}
+	focus(options) {
+		this.inputEl?.focus(options);
+	}
+	blur() {
+		this.inputEl?.blur();
+	}
 };
 __decorate([property({
 	type: String,

package/dist/components/date-picker/UDatePicker.d.ts

@@ -66,6 +66,11 @@ export declare class UDatePicker extends UFormControlElement<string> {
     private emitChange;
     protected setValidity(): void;
     reset(): void;
+    /** `.container`는 div라 네이티브 `disabled`가 없다 — disabled일 때 `tabindex="-1"`로만
+     *  Tab 순서에서 빠지고 프로그램적 `.focus()`는 여전히 통과하므로, `UInput.focus()`가
+     *  네이티브 `disabled` `<input>`에서 얻는 것과 같은 no-op을 여기서 직접 재현한다. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/date-picker/UDatePicker.js

@@ -297,6 +297,16 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
 		this.value = void 0;
 		this.invalid = false;
 	}
+	/** `.container`는 div라 네이티브 `disabled`가 없다 — disabled일 때 `tabindex="-1"`로만
+	*  Tab 순서에서 빠지고 프로그램적 `.focus()`는 여전히 통과하므로, `UInput.focus()`가
+	*  네이티브 `disabled` `<input>`에서 얻는 것과 같은 no-op을 여기서 직접 재현한다. */
+	focus(options) {
+		if (this.disabled) return;
+		this.containerEl?.focus(options);
+	}
+	blur() {
+		this.containerEl?.blur();
+	}
 };
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UDatePicker.prototype, "min", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UDatePicker.prototype, "max", void 0);

package/dist/components/field/UField.d.ts

@@ -29,6 +29,10 @@ export declare class UField extends UElement {
     validationMessage?: string;
     render(): import('lit-html').TemplateResult<1>;
     private renderFooter;
+    /** 슬롯에 꽂힌 첫 포커스 가능 자식으로 위임한다 — 라벨 클릭과 같은 대상 탐색 로직을
+     *  공개 API로도 노출해, 소비자가 임의의 폼 컨트롤(자체 웹 컴포넌트가 아닌 것 포함)을
+     *  슬롯에 꽂아도 host의 `.focus()`가 `UInput.focus()`와 같은 계약으로 동작하게 한다. */
+    focus(options?: FocusOptions): void;
     private handleLabelClick;
 }
 declare global {

package/dist/components/field/UField.js

@@ -13,11 +13,7 @@ var UField = class UField extends UElement {
 		this.required = false;
 		this.invalid = false;
 		this.handleLabelClick = () => {
-			const nodes = (this.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements({ flatten: true }) || [];
-			for (const node of nodes) if (isFocusable(node)) {
-				node.focus();
-				return;
-			}
+			this.focus();
 		};
 	}
 	static {
@@ -43,6 +39,16 @@ var UField = class UField extends UElement {
 		if (!message) return nothing;
 		return html`<div class="footer">${message}</div>`;
 	}
+	/** 슬롯에 꽂힌 첫 포커스 가능 자식으로 위임한다 — 라벨 클릭과 같은 대상 탐색 로직을
+	*  공개 API로도 노출해, 소비자가 임의의 폼 컨트롤(자체 웹 컴포넌트가 아닌 것 포함)을
+	*  슬롯에 꽂아도 host의 `.focus()`가 `UInput.focus()`와 같은 계약으로 동작하게 한다. */
+	focus(options) {
+		const nodes = (this.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements({ flatten: true }) || [];
+		for (const node of nodes) if (isFocusable(node)) {
+			node.focus(options);
+			return;
+		}
+	}
 };
 __decorate([property({
 	type: Boolean,

package/dist/components/select/USelect.d.ts

@@ -62,6 +62,11 @@ export declare class USelect extends UFormControlElement<string | string[]> {
     private renderContent;
     protected setValidity(): void;
     reset(): void;
+    /** `.container`는 div라 네이티브 `disabled`가 없다 — disabled일 때 `tabindex="-1"`로만
+     *  Tab 순서에서 빠지고 프로그램적 `.focus()`는 여전히 통과하므로, `UInput.focus()`가
+     *  네이티브 `disabled` `<input>`에서 얻는 것과 같은 no-op을 여기서 직접 재현한다. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private setup;
     private cleanup;
     private onChangeValue;

package/dist/components/select/USelect.js

@@ -265,6 +265,16 @@ var USelect = class USelect extends UFormControlElement {
 		this.value = this.multiple ? [] : "";
 		this.invalid = false;
 	}
+	/** `.container`는 div라 네이티브 `disabled`가 없다 — disabled일 때 `tabindex="-1"`로만
+	*  Tab 순서에서 빠지고 프로그램적 `.focus()`는 여전히 통과하므로, `UInput.focus()`가
+	*  네이티브 `disabled` `<input>`에서 얻는 것과 같은 no-op을 여기서 직접 재현한다. */
+	focus(options) {
+		if (this.disabled) return;
+		this.containerEl?.focus(options);
+	}
+	blur() {
+		this.containerEl?.blur();
+	}
 	setup(options) {
 		for (const option of options) {
 			option.removeEventListener("click", this.handleOptionClick);

package/dist/components/slider/USlider.d.ts

@@ -60,6 +60,9 @@ export declare class USlider extends UFormControlElement<number | number[]> {
     private dragging;
     private trackEl;
     private containerEl?;
+    /** `.container`는 포인터 이벤트 좌표 계산용 래퍼일 뿐 tabindex가 없다 — 실제
+     *  포커스 가능한 대상은 min thumb(단일 모드의 유일한 thumb, range 모드의 시작값)다. */
+    private minThumbEl?;
     protected shouldValidate(changed: PropertyValues): boolean;
     get valueAsNumber(): number;
     get valueAsArray(): number[];
@@ -74,6 +77,11 @@ export declare class USlider extends UFormControlElement<number | number[]> {
     render(): TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;
+    /** thumb는 div라 네이티브 `disabled`가 없다 — disabled일 때 `tabindex="-1"`로만 Tab
+     *  순서에서 빠지고 프로그램적 `.focus()`는 여전히 통과하므로, `UInput.focus()`가
+     *  네이티브 `disabled` `<input>`에서 얻는 것과 같은 no-op을 여기서 직접 재현한다. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private onChangeValue;
     /** 사용자 상호작용으로 값이 확정된 경로에서만 호출한다 — 프로그램적 value 세팅은
      *  네이티브 폼 컨트롤과 동일하게 change를 발화하지 않는다. */

package/dist/components/slider/USlider.js

@@ -200,6 +200,16 @@ var USlider = class USlider extends UFormControlElement {
 		else this.value = this.offset ?? this.min;
 		this.invalid = false;
 	}
+	/** thumb는 div라 네이티브 `disabled`가 없다 — disabled일 때 `tabindex="-1"`로만 Tab
+	*  순서에서 빠지고 프로그램적 `.focus()`는 여전히 통과하므로, `UInput.focus()`가
+	*  네이티브 `disabled` `<input>`에서 얻는 것과 같은 no-op을 여기서 직접 재현한다. */
+	focus(options) {
+		if (this.disabled) return;
+		this.minThumbEl?.focus(options);
+	}
+	blur() {
+		this.minThumbEl?.blur();
+	}
 	onChangeValue() {
 		if (Array.isArray(this.value)) this.value = [this.snap(this.value[0]), this.snap(this.value[1])];
 		else if (typeof this.value === "number") this.value = this.snap(this.value);
@@ -300,6 +310,7 @@ __decorate([property({ converter: { fromAttribute: (value) => {
 __decorate([state(), __decorateMetadata("design:type", Object)], USlider.prototype, "dragging", void 0);
 __decorate([query(".track"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], USlider.prototype, "trackEl", void 0);
 __decorate([query(".container"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], USlider.prototype, "containerEl", void 0);
+__decorate([query(".thumb[data-thumb=\"min\"]"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], USlider.prototype, "minThumbEl", void 0);
 USlider = __decorate([customElement("u-slider")], USlider);
 //#endregion
 export { USlider };

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

@@ -41,6 +41,8 @@ export declare class USwitch extends UFormControlElement<string> {
     render(): import('lit-html').TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private handleInputChange;
 }
 declare global {

package/dist/components/switch/USwitch.js

@@ -78,6 +78,12 @@ var USwitch = class USwitch extends UFormControlElement {
 		this.checked = false;
 		this.invalid = false;
 	}
+	focus(options) {
+		this.inputEl?.focus(options);
+	}
+	blur() {
+		this.inputEl?.blur();
+	}
 };
 __decorate([property({
 	type: Boolean,

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

@@ -53,6 +53,8 @@ export declare class UTextarea extends UFormControlElement<string> {
     render(): import('lit-html').TemplateResult<1>;
     protected setValidity(): void;
     reset(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private resizeTextarea;
     private handleTextareaInput;
     private handleTextareaChange;

package/dist/components/textarea/UTextarea.js

@@ -106,6 +106,12 @@ var UTextarea = class UTextarea extends UFormControlElement {
 		this.value = void 0;
 		this.invalid = false;
 	}
+	focus(options) {
+		this.textareaEl?.focus(options);
+	}
+	blur() {
+		this.textareaEl?.blur();
+	}
 	resizeTextarea() {
 		const textarea = this.textareaEl;
 		if (!textarea) return;

package/package.json

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

package/skills/iyulab-components/references/components/checkbox.md

@@ -50,6 +50,8 @@ Checkbox with `indeterminate` state support. Form-associated (`formAssociated =
 |--------|---------|-------------|
 | `validate()` | `boolean` | Run validation; sets `invalid` |
 | `reset()` | `void` | Clear value and validation state |
+| `focus(options?)` | `void` | Focus the checkbox input |
+| `blur()` | `void` | Blur the checkbox input |
 
 ## CSS Parts
 

package/skills/iyulab-components/references/components/date-picker.md

@@ -49,6 +49,8 @@ Single-date selection with a popover calendar. The value follows the same conven
 |--------|--------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset value |
+| `focus(options?)` | Focus the trigger |
+| `blur()` | Blur the trigger |
 
 ## CSS Parts
 

package/skills/iyulab-components/references/components/field.md

@@ -40,3 +40,9 @@ Layout wrapper for form controls. Renders label, required marker, description te
 | `required` | `boolean` | `false` | ✓ | Show required marker |
 | `invalid` | `boolean` | `false` | ✓ | Show validation error state |
 | `disabled` | `boolean` | `false` | ✓ | Disable state forwarding |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `focus(options?)` | Focus the first focusable slotted child |

package/skills/iyulab-components/references/components/select.md

@@ -66,6 +66,8 @@ Dropdown select with single or multiple selection, search, and clear support. Fo
 |--------|-------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset value |
+| `focus(options?)` | Focus the trigger |
+| `blur()` | Blur the trigger |
 
 ## CSS Parts
 

package/skills/iyulab-components/references/components/slider.md

@@ -60,6 +60,8 @@ Range slider. Single-thumb or dual-thumb (range) mode. Supports marks, value dis
 |--------|-------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset value |
+| `focus(options?)` | Focus the first (min) thumb |
+| `blur()` | Blur the first (min) thumb |
 
 ## CSS Parts
 

package/skills/iyulab-components/references/components/switch.md

@@ -55,6 +55,8 @@ Toggle switch (on/off). Supports custom track and thumb content via slots. Form-
 |--------|-------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset state |
+| `focus(options?)` | Focus the switch input |
+| `blur()` | Blur the switch input |
 
 ## CSS Parts
 

package/skills/iyulab-components/references/components/textarea.md

@@ -61,6 +61,8 @@ Multi-line text input with auto-resize and optional character counter. Form-asso
 |--------|-------------|
 | `validate()` | Validate; sets `invalid` |
 | `reset()` | Reset value |
+| `focus(options?)` | Focus the textarea |
+| `blur()` | Blur the textarea |
 
 ## CSS Parts