@iyulab/components 1.38.0 → 1.40.0

package/dist/components/tree-item/UTreeItem.styles.js

@@ -58,49 +58,86 @@ var styles = css`
     white-space: nowrap;
   }
 
-  /* ── toggler ── */
+  /* ── toggler ──
+     The box that takes the pointer is 24x24 (WCAG 2.2 SC 2.5.8); the square you see is still
+     18x18, drawn by the pseudo-element. The negative margins give the extra 3px on each side
+     back, so the glyph, the label and the row height sit exactly where they did — the extra
+     area lands on the header's own padding and the gap before the label, never on another
+     target. */
   .prefix-toggler {
+    position: relative;
+    box-sizing: border-box;
     flex-shrink: 0;
-    margin-right: 4px;
+    margin: -3px 1px -3px -3px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 18px;
-    height: 18px;
+    width: 24px;
+    height: 24px;
+  }
+  .prefix-toggler::before {
+    content: "";
+    position: absolute;
+    inset: 3px;
     border-radius: var(--u-radius-sm, 3px);
+    transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+  .prefix-toggler > * {
+    position: relative;
   }
   .prefix-toggler u-icon {
     font-size: 12px;
     pointer-events: none;
   }
-  :host(:not([disabled])[trigger="icon"]) .prefix-toggler:hover,
-  :host(:not([disabled])[trigger="icon"]:focus-visible) .prefix-toggler {
+  :host(:not([disabled])[trigger="icon"]) .prefix-toggler:hover::before,
+  :host(:not([disabled])[trigger="icon"]:focus-visible) .prefix-toggler::before {
     background-color: var(--u-bg-color-hover, #F5F5F5);
   }
+  /* A checkable row puts the checkbox 4px after the toggle. Centred 24px areas for both would
+     overlap by 3px, so here the toggle takes its extra width entirely on the left (header
+     padding), and the padding keeps the glyph centred on its visible square. */
+  :host([checkable]) .prefix-toggler {
+    margin: -3px 4px -3px -6px;
+    padding-left: 6px;
+  }
+  :host([checkable]) .prefix-toggler::before {
+    inset: 3px 0 3px 6px;
+  }
 
-  /* ── checkbox ── */
+  /* ── checkbox ──
+     Same split as the toggle: a 24x24 box takes the pointer, the 16x16 box you see is the
+     pseudo-element, and the negative margins keep every visible edge where it was. */
   .prefix-checkbox {
+    position: relative;
+    box-sizing: border-box;
     flex-shrink: 0;
-    margin-right: 4px;
+    margin: -4px 0 -4px -4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 16px;
-    height: 16px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+  }
+  .prefix-checkbox::before {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    box-sizing: border-box;
     border-radius: var(--u-radius-sm, 3px);
     border: 1.5px solid var(--u-input-border-color, #E0E0E0);
     background-color: transparent;
     transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), border-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
-    cursor: pointer;
   }
   .prefix-checkbox u-icon {
+    position: relative;
     visibility: hidden;
     font-size: 12px;
     color: #fff;
     pointer-events: none;
   }
-  .prefix-checkbox[checked],
-  .prefix-checkbox[indeterminate] {
+  .prefix-checkbox[checked]::before,
+  .prefix-checkbox[indeterminate]::before {
     border-color: var(--tree-item-color);
     background-color: var(--tree-item-color);
   }

package/dist/styles/dark.css

@@ -242,7 +242,10 @@
   --u-txt-color-hover:       var(--u-primary-color-strong);
   --u-txt-color-active:      var(--u-primary-color-strong);
   --u-txt-color-disabled:    var(--u-neutral-500);
-  --u-txt-color-weak:        var(--u-neutral-700);
+  /* 라이트와 같은 기준 — 놓이는 모든 면에서 AA. neutral-700(#8A8A8A)은 바탕 5.43 ·
+     올림면(neutral-300) 4.16 · active 면(neutral-400) 3.15 로 미달이었다.
+     neutral-800(#B0B0B0) = 8.64 · 6.62 · 5.01. 본문(neutral-900)과의 대비비 1.46. */
+  --u-txt-color-weak:        var(--u-neutral-800);
   --u-txt-color-strong:      var(--u-neutral-1000);
 
   --u-link-txt-color:        var(--u-primary-color-strong);

package/dist/styles/light.css

@@ -252,10 +252,13 @@
   --u-txt-color-hover:       var(--u-primary-color-strong);
   --u-txt-color-active:      var(--u-primary-color-strong);
   --u-txt-color-disabled:    var(--u-neutral-400);
-  /* neutral-500(#9E9E9E)은 흰 배경 대비 2.68 로 WCAG AA(4.5) 미달이었다.
-     neutral-600(#757575) = 4.61 로 통과한다. 다크 매핑(neutral-700 = 5.43)은
-     원래 정상이라 손대지 않는다 — 라이트 한쪽만의 결함이었다. */
-  --u-txt-color-weak:        var(--u-neutral-600);
+  /* 보조 텍스트는 «놓이는 모든 면»에서 AA(4.5)를 받쳐야 한다 — 바탕만이 아니다.
+     neutral-600(#757575)은 바탕 4.61 에서만 통과하고 올림면(neutral-50) 4.41 ·
+     active 면(neutral-200) 3.97 로 미달이었다(표 머리·카드 위 보조 텍스트).
+     neutral-700(#616161) = 바탕 6.19 · 올림면 5.93 · active 5.34.
+     본문(neutral-900)과의 대비비는 2.60 으로, 보조 텍스트를 모든 표면 위에서
+     읽히게 보장하는 흔한 디자인 시스템 기준(본문 대비 약 1.3~1.8)보다 위계가 넓다. */
+  --u-txt-color-weak:        var(--u-neutral-700);
   --u-txt-color-strong:      var(--u-neutral-1000);
 
   --u-link-txt-color:        var(--u-primary-color-strong);

package/dist/utilities/Locale.d.ts

@@ -12,7 +12,7 @@ export type SupportedLocale = 'en' | 'ko' | 'ja' | 'zh-CN' | 'zh-TW' | 'es' | 'f
 /** 내장 로케일은 자동완성되지만, 임의의 BCP47 태그도 그대로 받는다. */
 export type LocaleTag = SupportedLocale | (string & {});
 /** 라이브러리가 제공하는 chrome 문자열 키. 지금은 검증 메시지뿐이지만 이후 다른 UI 문구도 추가될 수 있다. */
-export type LocaleMessageKey = 'valueMissing' | 'badInput' | 'typeMismatch' | 'patternMismatch' | 'rangeUnderflow' | 'rangeOverflow' | 'stepMismatch' | 'tooShort' | 'tooLong' | 'increment' | 'decrement' | 'clear' | 'today' | 'time' | 'showPassword' | 'hidePassword' | 'previousSlide' | 'nextSlide' | 'goToSlide' | 'chooseDate' | 'previousMonth' | 'nextMonth' | 'close' | 'copy' | 'copied' | 'chooseFile' | 'noFileChosen' | 'filesSelected';
+export type LocaleMessageKey = 'valueMissing' | 'badInput' | 'typeMismatch' | 'patternMismatch' | 'rangeUnderflow' | 'rangeOverflow' | 'stepMismatch' | 'tooShort' | 'tooLong' | 'increment' | 'decrement' | 'clear' | 'today' | 'time' | 'showPassword' | 'hidePassword' | 'previousSlide' | 'nextSlide' | 'goToSlide' | 'chooseDate' | 'previousMonth' | 'nextMonth' | 'close' | 'copy' | 'copied' | 'chooseFile' | 'noFileChosen' | 'filesSelected' | 'resizePanels' | 'search';
 type LocaleTable = Record<LocaleMessageKey, string>;
 /**
  * 한 패키지(또는 앱 영역)의 문자열 묶음.

package/dist/utilities/OverlayManager.d.ts

@@ -1,17 +1,49 @@
 import { FocusTrap } from 'focus-trap';
 /**
- * OverlayManager는 열린 오버레이의 스택을 관리합니다.
+ * OverlayManager는 **겹치는 표면 전체의 층(layer)을 소유**합니다.
  *
- * - 오버레이 스택 순서 관리 (z-index 자동 증가)
+ * - 오버레이 스택 순서 관리 (z-index 자동 할당)
+ * - **알림 층 z-index 제공** — 알림은 오버레이의 형제가 아니라 그 «위» 채널이다
  * - body scroll lock 참조 카운팅
  * - topmost 판별 (ESC 키 처리용)
  * - focus-trap trapStack 공유
+ *
+ * ## 층 스케일 — 왜 두 개의 «띠»인가
+ *
+ * 겹침을 컴포넌트마다 따로 정하면 어긋난다. 실측(2026-09-08)으로 `Toast` 가 자기 컨테이너에
+ * `z-index: 9999` 를 박고 있었고 이 매니저가 오버레이에 **9999 «초과»** 를 주고 있어,
+ * ***모달 안에서 띄운 오류 토스트가 구조적으로 항상 가려졌다.*** 알림이 도달하지 않는 것은
+ * 조용한 실패라 아무도 보지 못했다.
+ *
+ * ⇒ 층을 **이름 있는 띠**로 고정한다(디자인 시스템의 표준 관용구다 — 겹침은 협상이 아니라
+ * 계약이다):
+ *
+ * | 띠 | 범위 | 소유 |
+ * |---|---|---|
+ * | 오버레이 | `9999` ~ `9999 + OVERLAY_BAND` | `u-dialog`·`u-drawer` 등 `UOverlayElement` 계열 |
+ * | **알림** | `notificationZIndex` | `Toast` — **오버레이 띠보다 항상 위** |
+ *
+ * ⚠**띠에 상한이 있는 것이 이 계약의 핵심이다.** 종전 `zCounter` 는 «지금까지 열린 총합»이라
+ * 단조 증가해 **상한이 없었고**, 상한이 없으면 «알림이 항상 위»를 어떤 상수로도 보장할 수
+ * 없다. 이제 **동시에 열린 깊이**(`stack.length`)로 할당하므로 띠 안에 갇힌다.
+ * 동시 오버레이가 `OVERLAY_BAND` 를 넘으면 그 이상은 같은 값을 공유한다(서로 간 겹침 순서만
+ * 포기하고, **알림이 위**라는 불변식은 유지된다) — 실제 앱이 도달하는 상태가 아니지만,
+ * 도달하더라도 무엇이 깨지는지 정해져 있는 편이 낫다.
  */
 export declare class OverlayManager {
     /** 열린 오버레이 스택 */
     private static readonly stack;
-    /** z-index 카운터 */
-    private static zCounter;
+    /** 오버레이 띠의 시작 값 */
+    private static readonly OVERLAY_BASE;
+    /** 오버레이 띠의 폭 — 이 수를 넘는 «동시» 오버레이는 최상단 값을 공유한다 */
+    private static readonly OVERLAY_BAND;
+    /**
+     * 알림 층의 z-index. **오버레이 띠 전체보다 항상 위**임이 보장된다.
+     *
+     * 토스트·스낵바처럼 «오버레이 위에서도 반드시 보여야 하는» 표면이 쓴다. 직접 상수를
+     * 박지 말고 이 값을 읽을 것 — 그래야 띠가 조정돼도 따라온다.
+     */
+    static get notificationZIndex(): number;
     /** body scroll lock 참조 카운트 */
     private static lockCount;
     /** scroll lock 이전 body overflow 값 */

package/dist/utilities/OverlayManager.js

@@ -1,18 +1,53 @@
 //#region src/utilities/OverlayManager.ts
 /**
-* OverlayManager는 열린 오버레이의 스택을 관리합니다.
+* OverlayManager는 **겹치는 표면 전체의 층(layer)을 소유**합니다.
 *
-* - 오버레이 스택 순서 관리 (z-index 자동 증가)
+* - 오버레이 스택 순서 관리 (z-index 자동 할당)
+* - **알림 층 z-index 제공** — 알림은 오버레이의 형제가 아니라 그 «위» 채널이다
 * - body scroll lock 참조 카운팅
 * - topmost 판별 (ESC 키 처리용)
 * - focus-trap trapStack 공유
+*
+* ## 층 스케일 — 왜 두 개의 «띠»인가
+*
+* 겹침을 컴포넌트마다 따로 정하면 어긋난다. 실측(2026-09-08)으로 `Toast` 가 자기 컨테이너에
+* `z-index: 9999` 를 박고 있었고 이 매니저가 오버레이에 **9999 «초과»** 를 주고 있어,
+* ***모달 안에서 띄운 오류 토스트가 구조적으로 항상 가려졌다.*** 알림이 도달하지 않는 것은
+* 조용한 실패라 아무도 보지 못했다.
+*
+* ⇒ 층을 **이름 있는 띠**로 고정한다(디자인 시스템의 표준 관용구다 — 겹침은 협상이 아니라
+* 계약이다):
+*
+* | 띠 | 범위 | 소유 |
+* |---|---|---|
+* | 오버레이 | `9999` ~ `9999 + OVERLAY_BAND` | `u-dialog`·`u-drawer` 등 `UOverlayElement` 계열 |
+* | **알림** | `notificationZIndex` | `Toast` — **오버레이 띠보다 항상 위** |
+*
+* ⚠**띠에 상한이 있는 것이 이 계약의 핵심이다.** 종전 `zCounter` 는 «지금까지 열린 총합»이라
+* 단조 증가해 **상한이 없었고**, 상한이 없으면 «알림이 항상 위»를 어떤 상수로도 보장할 수
+* 없다. 이제 **동시에 열린 깊이**(`stack.length`)로 할당하므로 띠 안에 갇힌다.
+* 동시 오버레이가 `OVERLAY_BAND` 를 넘으면 그 이상은 같은 값을 공유한다(서로 간 겹침 순서만
+* 포기하고, **알림이 위**라는 불변식은 유지된다) — 실제 앱이 도달하는 상태가 아니지만,
+* 도달하더라도 무엇이 깨지는지 정해져 있는 편이 낫다.
 */
 var OverlayManager = class {
 	static {
 		this.stack = [];
 	}
 	static {
-		this.zCounter = 0;
+		this.OVERLAY_BASE = 9999;
+	}
+	static {
+		this.OVERLAY_BAND = 1e3;
+	}
+	/**
+	* 알림 층의 z-index. **오버레이 띠 전체보다 항상 위**임이 보장된다.
+	*
+	* 토스트·스낵바처럼 «오버레이 위에서도 반드시 보여야 하는» 표면이 쓴다. 직접 상수를
+	* 박지 말고 이 값을 읽을 것 — 그래야 띠가 조정돼도 따라온다.
+	*/
+	static get notificationZIndex() {
+		return this.OVERLAY_BASE + this.OVERLAY_BAND + 1;
 	}
 	static {
 		this.lockCount = 0;
@@ -38,7 +73,7 @@ var OverlayManager = class {
 	*/
 	static add(overlay, lockBody = true) {
 		this.stack.push(overlay);
-		overlay.style.zIndex = String(9999 + ++this.zCounter);
+		overlay.style.zIndex = String(this.OVERLAY_BASE + Math.min(this.stack.length, this.OVERLAY_BAND));
 		if (lockBody) {
 			if (this.lockCount === 0) {
 				this.savedOverflow = document.body.style.overflow;

package/dist/utilities/Toast.d.ts

@@ -20,8 +20,20 @@ export interface ToastOptions {
  * 토스트 알림 유틸리티 클래스입니다.
  */
 export declare class Toast {
+    /**
+     * 위치별 컨테이너를 **타깃 엘리먼트 자신에 키잉**한다.
+     *
+     * 종전에는 `"<position>@<id>"` 문자열이 키였고, 그 파생이 세 가지를 동시에 깨뜨렸다:
+     * ⑴같은 `id`를 가진 «다른» 엘리먼트가 같은 키로 충돌한다(SPA 라우트 교체가 화면
+     * 엘리먼트를 같은 `id`로 다시 만드는 것은 평범한 패턴이다) ⑵`id`가 없으면 폴백이
+     * `el-${Date.now()}` 라 호출마다 키가 달라져 캐시가 성립하지 않고 컨테이너가 쌓인다
+     * ⑶그 불안정한 키를 `hide` 정리 경로가 **다시 계산**하므로 `containers.delete()` 가
+     * 빗나가 항목이 영구히 남는다.
+     *
+     * `WeakMap` 은 셋을 전부 구조적으로 없앤다 — 엘리먼트 동일성이 곧 키라 충돌이 불가능하고,
+     * `id` 유무에 의존하지 않으며, 타깃이 버려지면 그 항목도 함께 수거된다.
+     */
     private static containers;
-    private static elements;
     /**
      * 모든 Toast 호출에 적용될 전역 기본 옵션입니다. 개별 호출의 `options`가 우선합니다.
      *
@@ -47,8 +59,47 @@ export declare class Toast {
     static error(content: string, options?: ToastOptions): Promise<void>;
     /** 토스트 알림을 생성합니다. */
     static show(status?: AlertStatus, content?: string, options?: ToastOptions): Promise<void>;
-    /** 컨테이너 키를 생성합니다. */
-    private static getContainerKey;
-    /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+    /**
+     * 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다.
+     *
+     * ⚠**캐시 적중은 그 컨테이너가 «여전히 쓸 수 있는가»를 확인한 뒤에만 유효하다.** 호스트가
+     * 갈아끼워지면(`body.innerHTML = ''`, 셸 재구축) 캐시된 컨테이너는 문서에서 떨어진 채
+     * 남는데, 거기에 append 된 엘리먼트는 **연결되지 않아 `updateComplete` 가 영원히 해소되지
+     * 않는다**. 낡은 항목은 버리고 새로 만든다.
+     */
     private static getOrCreateContainer;
+    /**
+     * 알림 컨테이너를 **네이티브 top layer** 로 올린다(`popover="manual"`).
+     *
+     * ## 왜 — z-index 로는 원리적으로 닿지 않는 자리가 있다
+     *
+     * `OverlayManager` 의 «이름 있는 띠» 계약은 **우리 오버레이보다 위**를 보장한다(실측:
+     * 컨테이너 `z-index: 11000`). 그러나 ***top layer 는 z-index 축 밖에 있다*** — 소비앱이
+     * 네이티브 `<dialog>.showModal()` 을 열면 그 다이얼로그는 **어떤 z-index 보다도 위**에
+     * 서고, 우리 토스트는 가려진다. 실측(cycle-477, 크로미움 `elementFromPoint`):
+     *
+     * ```
+     * containerZIndex 11000 · notificationZIndex 11000 · hitTag "DIALOG" · toastReachable false
+     * ```
+     *
+     * 알림 채널의 제1원칙이 ***«지각되지 않는 경보는 경보가 아니다»*** 이므로, 그 채널은 겹침을
+     * **다투지 않고** 전용 층을 가져야 한다. `popover="manual"` 은 dismiss 계약도 포커스 트랩도
+     * 걸지 않고 **top layer 승격만** 하므로 이 표면에 정확히 맞는다.
+     *
+     * ## ⚠ 범위 — `document.body` 컨테이너만이다
+     *
+     * `target` 이 주어진 컨테이너는 `position: absolute` 로 **그 엘리먼트 기준**으로 놓인다.
+     * top layer 원소는 조상의 배치 문맥에서 떨어져 나오므로 그 좌표계가 통째로 깨진다 ⇒
+     * 타깃 기준 컨테이너는 **종전 z-index 경로를 그대로 쓴다.** 이것이 시범 범위이고,
+     * 오버레이 전면 전환(`u-dialog`·`u-drawer` 등)은 별개 결정이다(`ROADMAP.md` §C-B).
+     *
+     * ## ⚠ z-index 를 지우지 않는다
+     *
+     * `showPopover` 가 없는 브라우저(또는 호출이 거부되는 상태)에서는 **아무 일도 일어나지
+     * 않고 종전 동작이 그대로 남아야** 한다 — 그래서 승격은 순수 «추가»이고, 실패는 조용히
+     * 삼킨다(알림을 띄우려다 예외를 던지는 것은 이 표면에서 최악의 실패다).
+     */
+    private static preparePopover;
+    /** 연결된 뒤에만 부를 수 있다 — 실패하면 종전 동작(z-index 띠)으로 조용히 돌아간다. */
+    private static showTopLayer;
 }

package/dist/utilities/Toast.js

@@ -1,3 +1,4 @@
+import { OverlayManager } from "./OverlayManager.js";
 import { UAlert } from "../components/alert/UAlert.js";
 //#region src/utilities/Toast.ts
 /**
@@ -5,10 +6,7 @@ import { UAlert } from "../components/alert/UAlert.js";
 */
 var Toast = class {
 	static {
-		this.containers = /* @__PURE__ */ new Map();
-	}
-	static {
-		this.elements = /* @__PURE__ */ new Set();
+		this.containers = /* @__PURE__ */ new WeakMap();
 	}
 	static {
 		this.DefaultOptions = {};
@@ -52,39 +50,50 @@ var Toast = class {
 		el.title = merged.title || "";
 		el.closable = merged.closable ?? true;
 		el.duration = merged.duration ?? 4e3;
-		this.elements.add(el);
 		const position = merged.position || "top-right";
 		const target = merged.target || document.body;
 		const container = this.getOrCreateContainer(position, target);
 		container.appendChild(el);
+		if (!el.isConnected) {
+			container.removeChild(el);
+			console.warn("[@iyulab/components] Toast was not shown: the target element is not in the document.\n  A toast can only render inside a connected element — pass a target that is attached,\n  or omit `target` to use document.body.");
+			return;
+		}
 		await el.updateComplete;
 		el.show();
 		el.addEventListener("hide", async (e) => {
 			if (e.target !== el) return;
 			await new Promise((resolve) => setTimeout(resolve, 200));
 			el.remove();
-			this.elements.delete(el);
 			if (!container.hasChildNodes()) {
-				const containerKey = this.getContainerKey(position, target);
 				container.remove();
-				this.containers.delete(containerKey);
+				this.containers.get(target)?.delete(position);
 			}
 		});
 	}
-	/** 컨테이너 키를 생성합니다. */
-	static getContainerKey(position, target) {
-		return `${position}@${target === document.body ? "body" : target.id || `el-${Date.now()}`}`;
-	}
-	/** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+	/**
+	* 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다.
+	*
+	* ⚠**캐시 적중은 그 컨테이너가 «여전히 쓸 수 있는가»를 확인한 뒤에만 유효하다.** 호스트가
+	* 갈아끼워지면(`body.innerHTML = ''`, 셸 재구축) 캐시된 컨테이너는 문서에서 떨어진 채
+	* 남는데, 거기에 append 된 엘리먼트는 **연결되지 않아 `updateComplete` 가 영원히 해소되지
+	* 않는다**. 낡은 항목은 버리고 새로 만든다.
+	*/
 	static getOrCreateContainer(position, target) {
-		const key = this.getContainerKey(position, target);
-		let container = this.containers.get(key);
-		if (container) return container;
-		container = document.createElement("div");
-		container.style.zIndex = "9999";
+		let byPosition = this.containers.get(target);
+		if (!byPosition) {
+			byPosition = /* @__PURE__ */ new Map();
+			this.containers.set(target, byPosition);
+		}
+		const cached = byPosition.get(position);
+		if (cached && cached.isConnected && cached.parentNode === target) return cached;
+		if (cached) byPosition.delete(position);
+		const container = document.createElement("div");
+		container.style.zIndex = String(OverlayManager.notificationZIndex);
 		container.style.display = "flex";
 		container.style.gap = "10px";
 		const isTargeted = target !== document.body;
+		const popoverReady = isTargeted ? false : this.preparePopover(container);
 		if (isTargeted) {
 			container.style.position = "absolute";
 			if (getComputedStyle(target).position === "static") target.style.position = "relative";
@@ -114,9 +123,65 @@ var Toast = class {
 		}
 		container.style.transform = transformParts.length ? transformParts.join(" ") : "";
 		target.appendChild(container);
-		this.containers.set(key, container);
+		if (popoverReady) this.showTopLayer(container);
+		byPosition.set(position, container);
 		return container;
 	}
+	/**
+	* 알림 컨테이너를 **네이티브 top layer** 로 올린다(`popover="manual"`).
+	*
+	* ## 왜 — z-index 로는 원리적으로 닿지 않는 자리가 있다
+	*
+	* `OverlayManager` 의 «이름 있는 띠» 계약은 **우리 오버레이보다 위**를 보장한다(실측:
+	* 컨테이너 `z-index: 11000`). 그러나 ***top layer 는 z-index 축 밖에 있다*** — 소비앱이
+	* 네이티브 `<dialog>.showModal()` 을 열면 그 다이얼로그는 **어떤 z-index 보다도 위**에
+	* 서고, 우리 토스트는 가려진다. 실측(cycle-477, 크로미움 `elementFromPoint`):
+	*
+	* ```
+	* containerZIndex 11000 · notificationZIndex 11000 · hitTag "DIALOG" · toastReachable false
+	* ```
+	*
+	* 알림 채널의 제1원칙이 ***«지각되지 않는 경보는 경보가 아니다»*** 이므로, 그 채널은 겹침을
+	* **다투지 않고** 전용 층을 가져야 한다. `popover="manual"` 은 dismiss 계약도 포커스 트랩도
+	* 걸지 않고 **top layer 승격만** 하므로 이 표면에 정확히 맞는다.
+	*
+	* ## ⚠ 범위 — `document.body` 컨테이너만이다
+	*
+	* `target` 이 주어진 컨테이너는 `position: absolute` 로 **그 엘리먼트 기준**으로 놓인다.
+	* top layer 원소는 조상의 배치 문맥에서 떨어져 나오므로 그 좌표계가 통째로 깨진다 ⇒
+	* 타깃 기준 컨테이너는 **종전 z-index 경로를 그대로 쓴다.** 이것이 시범 범위이고,
+	* 오버레이 전면 전환(`u-dialog`·`u-drawer` 등)은 별개 결정이다(`ROADMAP.md` §C-B).
+	*
+	* ## ⚠ z-index 를 지우지 않는다
+	*
+	* `showPopover` 가 없는 브라우저(또는 호출이 거부되는 상태)에서는 **아무 일도 일어나지
+	* 않고 종전 동작이 그대로 남아야** 한다 — 그래서 승격은 순수 «추가»이고, 실패는 조용히
+	* 삼킨다(알림을 띄우려다 예외를 던지는 것은 이 표면에서 최악의 실패다).
+	*/
+	static preparePopover(container) {
+		if (typeof container.showPopover !== "function") return false;
+		container.setAttribute("popover", "manual");
+		container.style.inset = "auto";
+		container.style.margin = "0";
+		container.style.border = "none";
+		container.style.padding = "0";
+		container.style.background = "transparent";
+		container.style.color = "inherit";
+		container.style.overflow = "visible";
+		container.style.width = "auto";
+		container.style.height = "auto";
+		container.style.maxWidth = "none";
+		container.style.maxHeight = "none";
+		return true;
+	}
+	/** 연결된 뒤에만 부를 수 있다 — 실패하면 종전 동작(z-index 띠)으로 조용히 돌아간다. */
+	static showTopLayer(container) {
+		try {
+			container.showPopover();
+		} catch {
+			container.removeAttribute("popover");
+		}
+	}
 };
 //#endregion
 export { Toast };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.38.0",
+  "version": "1.40.0",
   "keywords": [
     "iyulab",
     "components",
@@ -83,16 +83,16 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",
     "@vitest/browser-playwright": "^4.1.10",
-    "eslint": "^9.39.4",
+    "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
     "globals": "^17.7.0",
     "happy-dom": "^20.10.6",
     "react": "^19.2.7",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "typescript-eslint": "^8.64.0",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",

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

@@ -25,6 +25,25 @@ For programmatic usage (`Dialog.alert`, `Dialog.confirm`, `Dialog.prompt`), see
 
 ---
 
+## Sizing
+
+The panel is **content-sized, capped at 90%** of the dialog's own box — 90% of the height and of
+the width. Measured in an 896px-tall viewport: a short dialog renders a 235px panel, and the same
+dialog carrying 3,000px of body content stops at 806px.
+
+Past that cap the **body is the only scroll region**. The `header` and `footer` slots are
+`flex-shrink: 0`, so the title and the actions stay visible however long the content grows.
+
+There is no size property. To make the dialog smaller than 90% of the viewport, give the **host** a
+height — that is what the 90% is measured against:
+
+```css
+u-dialog { height: 400px; }   /* the panel then caps at 360px */
+```
+
+⚠ That lever only shrinks: a height on the host lowers the panel's maximum, it does not reserve a
+panel of that size. A short dialog stays short.
+
 ## Slots
 
 | Name | Description |

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

@@ -81,6 +81,23 @@ for a KRW amount) is the consumer's call — the library does not infer one from
 | `input` | Fires on every keystroke |
 | `change` | Fires when value is committed |
 
+## Form submission
+
+Pressing Enter in the field submits its `<form>`, as in a native text field (HTML implicit
+submission): the form's first submit button is activated — `<button type="submit">` or
+`<u-button type="submit">`; a disabled one does nothing — and with no submit button the form is
+submitted only when it has no other single-line field. Enter that confirms an IME composition,
+Enter with a modifier key, and Enter on a highlighted suggestion (`u-option`) do not submit.
+Call `preventDefault()` on the `keydown` to cancel it. Do not also submit on Enter yourself.
+
+```html
+<form @submit=${onSubmit}>
+  <u-input name="user" required></u-input>
+  <u-input name="password" type="password" required></u-input>
+  <u-button type="submit">Sign in</u-button>
+</form>
+```
+
 ## Methods
 
 | Method | Description |

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

@@ -26,6 +26,18 @@ General-purpose content panel. Matches a tab or tree node when using `value`.
 
 ---
 
+## Sizing
+
+`u-panel` has `overflow: auto` and no height of its own, so it behaves two ways — both intended:
+
+- **No height** — it grows with its content. Nothing is clipped and no scrollbar appears.
+- **A height (or a height-bearing parent)** — it becomes the scroll container for its content.
+
+```html
+<u-panel style="height: 240px">…</u-panel>   <!-- scrolls its content -->
+<u-panel>…</u-panel>                          <!-- grows with its content -->
+```
+
 ## Slots
 
 | Name | Description |

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

@@ -70,6 +70,15 @@ Dropdown select with single or multiple selection, search, and clear support. Fo
 | `focus(options?)` | Focus the trigger |
 | `blur()` | Blur the trigger |
 
+## Keyboard & accessibility
+
+The trigger is a `role="combobox"`. Without `searchable` the dropdown holds a `role="listbox"`
+and opening it focuses the first option. With `searchable` the dropdown is a `role="dialog"`
+(named by `label`, or "Search") that holds the search field and the listbox; opening it focuses
+the search field, so typing filters at once. From the search field `ArrowDown`/`ArrowUp` move to
+the first/last visible option; on an option, arrows, `Home`/`End`, `Enter`/`Space` (select) and
+`Escape` (close) work as usual.
+
 ## CSS Parts
 
 | Part | Description |

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

@@ -84,7 +84,7 @@ Range slider. Single-thumb or dual-thumb (range) mode. Supports marks, value dis
 | `--slider-fill-color` | Track fill color |
 | `--slider-track-height` | Track height |
 | `--slider-track-color` | Track background color |
-| `--slider-thumb-size` | Thumb diameter |
+| `--slider-thumb-size` | Thumb diameter (**visible circle only** — the pointer target keeps a 24x24 floor per WCAG 2.2 SC 2.5.8, so lowering this does not shrink it) |
 | `--slider-thumb-color` | Thumb fill color |
 | `--slider-thumb-border-color` | Thumb border color |
 | `--slider-mark-size` | Mark dot size |