@iyulab/components 1.47.0 → 1.48.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [1.48.0] - 2026-09-28
+
+### Changed
+
+- **`glob` is now an optional peer dependency instead of a dependency.** Only the build plugin
+  `@iyulab/components/plugins/vite-plugin-react-wrapper` uses it, yet every app installing the
+  components also installed `glob` and its five transitive packages. Browser apps install none of
+  them now. If your build imports that plugin, add `glob` to your `devDependencies`.
+
+## [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.d.ts

@@ -28,8 +28,8 @@ export declare abstract class UOverlayElement extends UElement {
     contained: boolean;
     /**
      * 오버레이 모드
-     * - `modal` — focus trap, scroll lock, 백드롭 차단 (기본값)
-     * - `non-modal` — 주변 UI와 자유 상호작용, 배경 투명, scroll lock 없음
+     * - `modal` — focus trap, 초기 포커스 배치, scroll lock, 백드롭 차단 (기본값)
+     * - `non-modal` — 주변 UI와 자유 상호작용, 배경 투명, scroll lock 없음, 열려도 포커스를 옮기지 않음
      *
      * @default 'modal'
      */

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.48.0",
   "keywords": [
     "iyulab",
     "components",
@@ -66,13 +66,13 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "focus-trap": "^8.2.2",
-    "glob": "^13.0.6",
     "lit": "^3.3.3",
     "tabbable": "^6.5.0"
   },
   "peerDependencies": {
     "@lit/react": ">=1.0.8",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "glob": ">=13.0.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {
@@ -80,6 +80,9 @@
     },
     "react": {
       "optional": true
+    },
+    "glob": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -89,6 +92,7 @@
     "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
+    "glob": "^13.0.6",
     "globals": "^17.7.0",
     "happy-dom": "^20.10.6",
     "react": "^19.2.7",

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

@@ -60,7 +60,7 @@ panel of that size. A short dialog stays short.
 | `closable` | `boolean` | `false` | ✓ | Show close button |
 | `placement` | `'top-start'\|'top'\|'top-end'\|'start'\|'center'\|'end'\|'bottom-start'\|'bottom'\|'bottom-end'` | `'center'` | ✓ | Position on screen |
 | `offset` | `number` | `0` | ✓ | Distance from screen edge in px |
-| `mode` | `'modal'\|'non-modal'` | `'modal'` | ✓ | `modal` enables focus-trap |
+| `mode` | `'modal'\|'non-modal'` | `'modal'` | ✓ | `modal` traps focus and places initial focus (`[autofocus]` → first input control → first tabbable, through shadow roots); `non-modal` does neither |
 | `contained` | `boolean` | `false` | ✓ | Position relative to parent element |
 | `closeOn` | `string[]` | `['escape','backdrop','button']` | ✓ | Close triggers |
 

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

@@ -35,7 +35,7 @@ Side panel that slides in from any screen edge. Extends `UOverlayElement` (focus
 | `open` | `boolean` | `false` | ✓ | Show/hide state |
 | `closable` | `boolean` | `false` | ✓ | Show close button |
 | `placement` | `'left'\|'right'\|'top'\|'bottom'` | `'left'` | ✓ | Slide-in direction |
-| `mode` | `'modal'\|'non-modal'` | `'modal'` | ✓ | Focus-trap mode |
+| `mode` | `'modal'\|'non-modal'` | `'modal'` | ✓ | `modal` traps focus and places initial focus; `non-modal` does neither |
 | `contained` | `boolean` | `false` | ✓ | Contained to parent element |
 | `closeOn` | `string[]` | `['escape','backdrop','button']` | ✓ | Close triggers |
 
@@ -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 | `mode="modal"` (default): `[autofocus]` → first input control → first tabbable, searched through shadow roots (a form component slotted in works the same); focus is returned by the trap. `mode="non-modal"` moves no focus on open — the page stays interactive, so where focus goes is yours to decide (`element.focus()` after `show`) |
 | 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']` |