@iyulab/components 1.39.0 → 1.40.1

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/Toast.d.ts

@@ -68,4 +68,38 @@ export declare class Toast {
      * 않는다**. 낡은 항목은 버리고 새로 만든다.
      */
     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

@@ -93,6 +93,7 @@ var Toast = class {
 		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";
@@ -122,9 +123,65 @@ var Toast = class {
 		}
 		container.style.transform = transformParts.length ? transformParts.join(" ") : "";
 		target.appendChild(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/dist/utilities/devWarning.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 개발 모드 «사용 안내» 경고 — 오류 경로가 아닌, ***조용히 틀리는*** 상태를 한 번 알린다.
+ *
+ * 이 패키지에는 같은 모양의 경고가 이미 있다(`UElement.warnIfTokensMissing` — 토큰 시트 부재).
+ * 공통 규약: `[@iyulab/components]` 네임스페이스 · 개발 모드에서만(`import.meta.env.DEV`) ·
+ * 같은 키로는 **한 번만** · 무엇이 틀렸는지가 아니라 **무엇을 하면 되는지**를 적는다.
+ *
+ * 이 파일이 생긴 계기: 소비앱의 메뉴 30개가 해석되지 않는 아이콘 이름으로 **한꺼번에 같은
+ * 큐브 폴백**을 그렸는데 신호가 0 이었다(docket #265 R3). 폴백은 의도된 것이라(접힌 사이드바에서
+ * 아이콘이 없으면 메뉴가 «높이만 있는 빈 줄» 이 된다) 제거가 답이 아니다 — **없는 것은 경고다.**
+ * 같은 부류가 셋 더 있었다: 높이 제약이 없어 18px 로 붕괴하는 `u-split-panel`, 가상화가 꺼지는
+ * `flex-table`, 133px 로 앉는 `modern-app` 셸 — 모두 «에러 없이 틀린 화면» 이다(HD-61 ⒝).
+ */
+/** `key` 당 한 번만, 개발 모드에서만 `console.warn` 한다. 프로덕션 빌드에서는 호출 자체가 no-op 이다. */
+export declare function devWarnOnce(key: string, message: string): void;
+/** 테스트용 — 가드를 비운다. */
+export declare function resetDevWarnings(): void;

package/dist/utilities/devWarning.js

@@ -0,0 +1,5 @@
+//#region src/utilities/devWarning.ts
+/** `key` 당 한 번만, 개발 모드에서만 `console.warn` 한다. 프로덕션 빌드에서는 호출 자체가 no-op 이다. */
+function devWarnOnce(key, message) {}
+//#endregion
+export { devWarnOnce };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.39.0",
+  "version": "1.40.1",
   "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 |

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

@@ -15,7 +15,7 @@ Resizable two-panel layout. Drag the splitter to adjust panel sizes.
 </u-split-panel>
 
 <!-- Vertical split -->
-<u-split-panel orientation="vertical" default-ratio="[30,70]">
+<u-split-panel orientation="vertical" default-ratio="30,70" style="height: 400px;">
   <div>Top panel</div>
   <div>Bottom panel</div>
 </u-split-panel>
@@ -30,6 +30,27 @@ Resizable two-panel layout. Drag the splitter to adjust panel sizes.
 
 ---
 
+## Sizing
+
+**Give the host a height.** This is a shell: `:host` is `height: 100%` with `overflow: hidden`,
+so the panels divide whatever height the host has — and an unconstrained host has none to divide.
+
+```html
+<u-split-panel style="height: 400px">…</u-split-panel>
+```
+
+⚠ Leave the height off — or nest the component in a container that has no height of its own — and
+it collapses to a thin strip (measured: 18px, with 900px-tall panel content), the content is
+clipped by `overflow: hidden`, and there is no scrollbar to reach it. No error, nothing in the
+console. Every example below assumes a height on the host for this reason.
+
+A height-bearing ancestor works the same way (measured):
+
+```css
+.page             { height: 100%; display: flex; flex-direction: column; }
+.page u-split-panel { flex: 1 1 auto; min-height: 0; }
+```
+
 ## Slots
 
 | Name | Description |
@@ -42,7 +63,7 @@ Resizable two-panel layout. Drag the splitter to adjust panel sizes.
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | ✓ | Split direction |
-| `defaultRatio` | `number[]` | `[]` | ✓ | Initial size ratios (e.g. `[30, 70]`) |
+| `defaultRatio` | `number[]` | `[]` | ✓ | Initial size ratios. Attribute form is comma-separated, without brackets: `default-ratio="30,70"`. Ratios are shares of the space between the handles |
 | `ratio` | `number[]` | `[]` | ✓ | Current size ratios |
 | `disabled` | `boolean` | `false` | ✓ | Prevent resizing |
 | `lazy` | `boolean` | `false` | ✓ | Show preview while dragging, commit on release |
@@ -55,11 +76,28 @@ Resizable two-panel layout. Drag the splitter to adjust panel sizes.
 | `shift` | Dragging in progress |
 | `shift-end` | Drag ends |
 
+## Keyboard & Accessibility
+
+Each handle is a focusable `role="separator"` following the WAI-ARIA APG *Window Splitter*
+pattern. Its value is the share of the panel **before** it (`aria-valuenow`, `0` to the combined
+share of the two panels it sits between — `100` with two panels), and it is named by the
+`resizePanels` locale message.
+
+| Key | Effect |
+|-----|--------|
+| `←` / `→` (horizontal) · `↑` / `↓` (vertical) | Shrink / grow the panel before the handle by 5% |
+| `Home` / `End` | Give the panel before the handle its smallest / largest size |
+| `Enter` | Collapse the panel before the handle; press again to restore its previous size |
+
+In a right-to-left layout `←` still moves the handle left. A keyboard change fires `shift-start`,
+`shift` and `shift-end` in turn, so listening to `shift-end` alone covers both pointer and keyboard.
+
 ## CSS Custom Properties
 
 | Property | Description |
 |----------|-------------|
-| `--splitter-size` | Splitter handle thickness |
+| `--splitter-size` | Thickness of the visible line (default `4px`) |
+| `--splitter-hit-size` | Thickness of the area that takes the pointer (default `24px`, WCAG 2.5.8). It occupies layout space between the panels, so it never covers a panel's scrollbar. The handle is the larger of the two; set it to `var(--splitter-size)` for a flush handle |
 | `--splitter-color` | Splitter default color |
 | `--splitter-color-hover` | Splitter color on hover |
 | `--splitter-color-active` | Splitter color while dragging |

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

@@ -32,6 +32,24 @@ Tab-based content switcher. Pair each `u-tab` with a `u-panel` of the same `valu
 
 ## u-tab-panel
 
+### Sizing
+
+`u-tab-panel` is a flex shell with no height of its own, so it behaves two ways — both intended:
+
+- **No height** — it grows with the active panel's content; nothing is clipped and no scrollbar
+  appears (measured: a 900px panel under a `top` tab bar gives a 935px-tall component — the 34px bar
+  plus the content).
+- **A height, or a height-bearing parent** — the **content area** becomes the scroll region and the
+  tab bar keeps its place (measured: 300px tall → a 265px content area with 635px to scroll).
+
+```html
+<u-tab-panel style="height: 300px">…</u-tab-panel>
+```
+
+The tab bar scrolls on its own axis when the tabs overflow it — horizontally for `placement="top"`
+and `"bottom"`, vertically for `"left"` and `"right"` — so a long tab list never pushes the content
+out of the component.
+
 ### Slots
 
 | Name | Description |