@iyulab/components 1.47.0 → 1.47.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [1.47.1] - 2026-09-28
+
+### Fixed
+
+- **`u-dialog` / `u-drawer` initial focus now reaches the control you asked for.** Three cases
+  sent it to the first tabbable element instead (often the close button):
+  - **`<u-input autofocus>`** (and any control component) — the component host was handed to the
+    focus trap, which does not count a host as focusable and fell back. The overlay now focuses the
+    target itself, so the component forwards focus to its inner field.
+  - **A form component slotted into the overlay** — `[autofocus]` and the first input control were
+    looked up with `querySelector`, which stops at shadow roots. The search now goes through them.
+  - **A `u-select` before the target** — once the search goes through shadow roots it must not stop
+    at the closed popover every `u-select` keeps inside (it carries an `autofocus` attribute of its
+    own). Only elements that can actually take focus are candidates.
+
+### Added
+
+- **`querySelectorDeep(roots, selectors, accept?)` and `isFocusCandidate(el)`** in
+  `utilities/elements` — the shadow-piercing lookup and the focusability test the overlays use,
+  for other layers that place initial focus the same way.
+
 ## [1.47.0] - 2026-09-28
 
 ### Added

package/dist/components/UOverlayElement.js

@@ -1,4 +1,5 @@
 import { UElement } from "./UElement.js";
+import { isFocusCandidate, querySelectorDeep } from "../utilities/elements.js";
 import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { OverlayManager } from "../utilities/OverlayManager.js";
@@ -129,10 +130,13 @@ var UOverlayElement = class extends UElement {
 	* (`tests/browser/overlay-initial-focus.browser.test.ts` 가 둘 다 감시한다.)
 	*/
 	resolveInitialFocus() {
-		const explicit = this.querySelector("[autofocus]");
-		if (explicit) return explicit;
-		const control = this.querySelector("input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider");
-		if (control) return control;
+		const content = Array.from(this.children);
+		const target = querySelectorDeep(content, "[autofocus]", isFocusCandidate) ?? querySelectorDeep(content, "input, select, textarea, u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider", isFocusCandidate);
+		if (!target) return void 0;
+		target.focus();
+		let active = document.activeElement;
+		while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+		for (let n = active; n; n = n.parentNode ?? n.host ?? null) if (n === target) return false;
 	}
 	/** 오버레이가 닫힐 때 설정을 해제합니다. */
 	cleanup() {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { UElement } from "./components/UElement.js";
-import { getParentElement, isCoarsePointer, querySelectorAllWithin, querySelectorWithin } from "./utilities/elements.js";
+import { getParentElement, isCoarsePointer, isFocusCandidate, querySelectorAllWithin, querySelectorDeep, querySelectorWithin } from "./utilities/elements.js";
 import { UFloatingElement } from "./components/UFloatingElement.js";
 import { UFormControlElement } from "./components/UFormControlElement.js";
 import { OverlayManager } from "./utilities/OverlayManager.js";
@@ -59,4 +59,4 @@ import { BrowserStorage } from "./utilities/BrowserStorage.js";
 import { Dialog } from "./utilities/Dialog.js";
 import { Theme } from "./utilities/Theme.js";
 import { Toast } from "./utilities/Toast.js";
-export { ALERT_STATUSES, BrowserStorage, Dialog, IconCache, IconRegistry, Locale, OverlayManager, Theme, Toast, UAlert, UAvatar, UBadge, UBreadcrumb, UBreadcrumbItem, UButton, UButtonGroup, UCard, UCarousel, UCheckbox, UChip, UCopyButton, UDatePicker, UDialog, UDivider, UDrawer, UElement, UExpander, UField, UFileInput, UFloatingElement, UForm, UFormControlElement, UIcon, UIconButton, UInput, UMenu, UMenuItem, UOption, UOverlayElement, UPanel, UPopover, UProgressBar, UProgressRing, URadio, URating, USelect, USkeleton, USlider, USpinner, USplitPanel, USwitch, UTab, UTabPanel, UTag, UText, UTextarea, UTooltip, UTree, UTreeItem, arrayAttrConverter, booleanAttrConverter, createDevWarner, dateAttrConverter, devWarnOnce, formatCurrency, formatDate, formatNumber, getDefaultBaseUrl, getParentElement, isCoarsePointer, jsonAttrConverter, querySelectorAllWithin, querySelectorWithin, resetDevWarnings, setDefaultBaseUrl, urlAttrConverter };
+export { ALERT_STATUSES, BrowserStorage, Dialog, IconCache, IconRegistry, Locale, OverlayManager, Theme, Toast, UAlert, UAvatar, UBadge, UBreadcrumb, UBreadcrumbItem, UButton, UButtonGroup, UCard, UCarousel, UCheckbox, UChip, UCopyButton, UDatePicker, UDialog, UDivider, UDrawer, UElement, UExpander, UField, UFileInput, UFloatingElement, UForm, UFormControlElement, UIcon, UIconButton, UInput, UMenu, UMenuItem, UOption, UOverlayElement, UPanel, UPopover, UProgressBar, UProgressRing, URadio, URating, USelect, USkeleton, USlider, USpinner, USplitPanel, USwitch, UTab, UTabPanel, UTag, UText, UTextarea, UTooltip, UTree, UTreeItem, arrayAttrConverter, booleanAttrConverter, createDevWarner, dateAttrConverter, devWarnOnce, formatCurrency, formatDate, formatNumber, getDefaultBaseUrl, getParentElement, isCoarsePointer, isFocusCandidate, jsonAttrConverter, querySelectorAllWithin, querySelectorDeep, querySelectorWithin, resetDevWarnings, setDefaultBaseUrl, urlAttrConverter };

package/dist/utilities/elements.d.ts

@@ -21,3 +21,17 @@ export declare function querySelectorAllWithin(element: Element, selectors: stri
  *   컴포넌트가 이를 구분하지 않으면 열리자마자 닫히는 결함으로 이어집니다(모바일 실측).
  */
 export declare function isCoarsePointer(event: PointerEvent): boolean;
+/**
+ * 포커스를 «받을 수 있는» 요소인가 — 초기 포커스 후보를 고를 때 쓴다.
+ * 네이티브 포커스 요소 · `focus()` 를 재정의한(안쪽으로 넘겨 주는) 컴포넌트 · `tabindex` 를 가진 요소이고,
+ * 비활성·`inert`·안 보임이 아니어야 한다. 걸러진 호스트는 그 안쪽(섀도 루트)에서 계속 찾는다.
+ * `u-select` 의 섀도에는 속성 `autofocus` 를 가진 닫힌 `u-popover` 가 늘 있다 — 이것을 집으면
+ * 포커스가 아무 데도 가지 않는다.
+ */
+export declare function isFocusCandidate(el: Element): el is HTMLElement;
+/**
+ * `roots` 와 그 자손에서(열린 섀도 루트 안쪽까지) `selectors` 에 맞는 첫 요소를 문서 순서로 찾는다.
+ * 섀도 루트 안은 호스트 자리에서 이어서 본다 — `querySelector` 는 섀도 경계에서 멈추므로,
+ * 슬롯 자식이 컴포넌트면 그 템플릿 안의 요소를 못 찾는다. `accept` 가 거른 요소도 그 안쪽은 계속 본다.
+ */
+export declare function querySelectorDeep(roots: Iterable<Element>, selectors: string, accept?: (el: Element) => boolean): HTMLElement | null;

package/dist/utilities/elements.js

@@ -42,5 +42,43 @@ function querySelectorAllWithin(element, selectors) {
 function isCoarsePointer(event) {
 	return event.pointerType === "touch" || event.pointerType === "pen";
 }
+/**
+* 포커스를 «받을 수 있는» 요소인가 — 초기 포커스 후보를 고를 때 쓴다.
+* 네이티브 포커스 요소 · `focus()` 를 재정의한(안쪽으로 넘겨 주는) 컴포넌트 · `tabindex` 를 가진 요소이고,
+* 비활성·`inert`·안 보임이 아니어야 한다. 걸러진 호스트는 그 안쪽(섀도 루트)에서 계속 찾는다.
+* `u-select` 의 섀도에는 속성 `autofocus` 를 가진 닫힌 `u-popover` 가 늘 있다 — 이것을 집으면
+* 포커스가 아무 데도 가지 않는다.
+*/
+function isFocusCandidate(el) {
+	if (!(el instanceof HTMLElement)) return false;
+	const native = el.matches("input:not([type=\"hidden\"]), select, textarea, button, a[href], [contenteditable=\"\"], [contenteditable=\"true\"]");
+	const forwards = el.focus !== HTMLElement.prototype.focus;
+	if (!native && !forwards && !el.hasAttribute("tabindex")) return false;
+	if (el.matches(":disabled") || el.hasAttribute("disabled") || el.closest("[inert]")) return false;
+	return typeof el.checkVisibility === "function" ? el.checkVisibility() : true;
+}
+/**
+* `roots` 와 그 자손에서(열린 섀도 루트 안쪽까지) `selectors` 에 맞는 첫 요소를 문서 순서로 찾는다.
+* 섀도 루트 안은 호스트 자리에서 이어서 본다 — `querySelector` 는 섀도 경계에서 멈추므로,
+* 슬롯 자식이 컴포넌트면 그 템플릿 안의 요소를 못 찾는다. `accept` 가 거른 요소도 그 안쪽은 계속 본다.
+*/
+function querySelectorDeep(roots, selectors, accept = () => true) {
+	const visit = (start) => {
+		const walker = document.createTreeWalker(start, NodeFilter.SHOW_ELEMENT);
+		for (let el = walker.currentNode; el; el = walker.nextNode()) {
+			if (el.matches(selectors) && accept(el)) return el;
+			if (el.shadowRoot) for (const child of Array.from(el.shadowRoot.children)) {
+				const found = visit(child);
+				if (found) return found;
+			}
+		}
+		return null;
+	};
+	for (const root of roots) {
+		const found = visit(root);
+		if (found) return found;
+	}
+	return null;
+}
 //#endregion
-export { getParentElement, isCoarsePointer, querySelectorAllWithin, querySelectorWithin };
+export { getParentElement, isCoarsePointer, isFocusCandidate, querySelectorAllWithin, querySelectorDeep, querySelectorWithin };

package/package.json

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

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

@@ -92,7 +92,7 @@ whole contract. Measured in a real browser
 
 | Requirement | How it is met |
 |---|---|
-| Focus the first input on open, restore the trigger on close | `[autofocus]` → first input control → first tabbable; focus is returned by the trap |
+| Focus the first input on open, restore the trigger on close | `[autofocus]` → first input control → first tabbable, searched through shadow roots (a form component slotted in works the same); focus is returned by the trap |
 | Body scrolls, footer stays visible | `part="body"` is `flex: 1; overflow: auto`; the `footer` slot is `flex-shrink: 0` |
 | Focus cannot leave the panel | `mode="modal"` (default) activates the focus trap |
 | `Esc` closes, background scroll is locked | `closeOn` defaults to `['escape','backdrop','button']` |