@iyulab/components 1.9.0 → 1.12.0

package/CHANGELOG.md

@@ -1,9 +1,107 @@
 # Changelog
 
+## [1.12.0] - 2026-08-01
+
+### ⚠ 업그레이드 전 확인 (호스트 직접 오버라이드)
+
+`u-tag` · `u-badge` · `u-tab` · `u-option` · `u-menu` · `u-tooltip` · `u-alert` · `u-card` 의 **여백·테두리가 섀도 내부 요소로 이전**됐다. 1.10.0 의 `u-button` 과 같은 변경이며 이유도 같다 — `:host` 에 둔 여백은 소비 앱의 CSS 리셋(`* { padding:0; border:0 }`, Tailwind preflight 포함)에 **에러 없이 지워진다**.
+
+호스트에 **직접** 여백/테두리를 주고 있었다면 조용히 무효가 된다:
+
+```css
+/* 이전 — 더 이상 적용되지 않는다 */
+u-tag { padding: 4px 10px; }
+
+/* 이후 — 전용 훅을 쓴다 */
+u-tag { --tag-padding-block: 4px; --tag-padding-inline: 10px; }
+```
+
+`::part()` 오버라이드는 **종전대로 동작한다.** 기존 part 는 변경되지 않았고, 레이아웃 래퍼가 필요한 컴포넌트에는 `part="base"` 가 추가됐다(`u-alert` 는 기존 `::part(container)` 가 그 역할을 맡는다).
+
+### Added
+- 여백/테두리 훅 19개 — `--tag-padding-block`·`-inline`·`--tag-gap` · `--badge-padding-block`·`-inline` · `--tab-padding-block`·`-inline` · `--option-padding-block`·`-inline` · `--menu-padding`·`--menu-border-width`·`--menu-border-color` · `--tooltip-padding-block`·`-inline` · `--alert-padding-block`·`-inline`·`--alert-border-width` · `--card-border-width`·`--card-border-color`
+- `part="base"` — 레이아웃 래퍼 (`u-tag`·`u-badge`·`u-tab`·`u-option`·`u-menu`·`u-tooltip`·`u-card`). `u-alert` 는 기존 `::part(container)` 가 그 역할을 맡으므로 새 part 를 만들지 않았다.
+
+### Fixed
+- **소비 앱 CSS 리셋에 컴포넌트 여백·테두리가 지워지던 문제** (8개 컴포넌트) — 호스트 요소에 대해서는 문서 작성자 스타일이 섀도의 `:host` 규칙을 이긴다. 컴포넌트는 정상 동작하고 작아지기만 하므로 소비자는 *"업스트림이 못생겼다"* 로 읽고 각자 다시 칠했다.
+
+### Changed (내부 구조 — 시각 변화 없음)
+- **`u-tag` 의 `variant × color` 매트릭스를 접었다** — 하드코딩 선택자 **36개 → 9개**. 각 색이 hue 슬롯 5개를 채우고 variant 규칙이 그것을 소비하며, 슬롯이 비면(`color="neutral"`) 종전대로 `--tag-fill-color`(브랜드) 경로를 탄다.
+  - 36조합의 렌더 색을 팔레트 단과 대조하는 브라우저 테스트를 **리팩터 전에** 만들어 통과시킨 뒤 접었다 — 같은 테스트가 접은 후에도 통과한다.
+  - `yellow` 가 `solid`(600)·`outlined` 텍스트(700)에서 한 단 진한 예외는 그대로 보존했다. 종전에는 4개 규칙에 흩어져 있어 보이지 않던 것이 이제 한 곳에 데이터로 드러난다.
+  - `color` 속성과 `--tag-color`/`--tag-bg-color`/`--tag-border-color` 는 **공개 API 그대로**다. 새 `--tag-hue-*` 슬롯은 내부 구현이라 공개하지 않는다.
+- **`u-checkbox` 의 `variant × color × state` 매트릭스를 접었다** — 16개 → 8개. `u-tag` 와 **같은 방식**이다: `color=` 는 hue 슬롯만 채우고 variant 규칙이 폴백과 함께 읽는다. 슬롯이 채워지면 `color=` 가 최종 권한을 갖고, 비면(기본 `blue`) 채움색 훅을 탄다.
+  - 기본값 `blue` 는 규칙을 갖지 않는다 = 슬롯이 비어 브랜드 훅을 탄다. 종전에도 `[color="blue"]` 규칙은 훅을 재진술만 하고 있었다.
+  - 두 컴포넌트의 오버라이드 우선순위가 같은지 회귀 테스트로 결박했다 — 소비자가 채움색 훅을 덮어도 `color=` 지정이 이긴다.
+  - 여기도 32조합(2 variant × 8색 × 2상태)의 렌더 색을 대조하는 브라우저 테스트를 리팩터 전에 만들어 통과시킨 뒤 접었다.
+
+### Added — 스케일 토큰 (반경)
+- `--u-radius-none`/`-sm`/`-md`/`-lg`/`-xl`/`-pill`/`-circle`. 컴포넌트의 반경 리터럴 **40건**을 이 축으로 배선했다.
+  ★리터럴을 흩뿌리면 값이 갈린다 — 실제로 pill 이 `999px`(2곳)와 `9999px`(3곳) 두 표기로 나뉘어 있었다(시각 차이는 없으나 의도가 하나임을 코드가 말하지 못했다).
+  - em 기반·다중값·`calc()` 반경은 **의도적으로 제외**했다. 폰트 크기를 따라야 하거나 기하 계산이라 스케일 축이 아니다.
+  - 반경은 테마와 무관하므로 두 시트가 같은 값을 갖는다(테스트로 강제).
+  - 여백(space)·타이포 축은 `em` 기반이라 별도 분석이 필요하다 — 이번 범위 밖.
+
+### 미해소 (1개)
+- `u-divider` — `:host` 의 `margin` 은 **형제 간 간격**이라 내부 요소로 옮기면 의미가 달라진다(내부 margin 은 호스트 박스 안에서 상쇄되어 형제를 밀어내지 못한다). 별도 설계가 필요하다.
+
+## 1.12.0 에 포함된 가산 층 — 역할 토큰 (별도 게시본 없음)
+
+> ⚠**`1.11.0` 이라는 게시본은 존재하지 않는다.** 이 층은 원래 1.11.0 으로 따로 낼 계획이었으나
+> 1.12.0 에 함께 출하됐다. 버전 헤딩으로 남기면 체인지로그 파서와 릴리스 링크가 없는 버전을
+> 가리키게 되므로, 헤딩은 버전 형태를 쓰지 않는다.
+> 아래 변경은 전부 **순수 가산**이며 1.12.0 에 그대로 들어 있다. 1.12.0 의 파괴적 변경과
+> 층을 구분해 두기 위해 항목을 나눠 남긴다.
+
+### Added
+- **역할 토큰 층 (5역할 × 5단 = 25개)** — `--u-{primary,info,success,warning,danger}-color{-weakest,-weaker,-weak,,-strong}`.
+  ★**이것이 중요한 이유**: 종전에는 컴포넌트가 팔레트 프리미티브(`--u-blue-600`, `--u-red-700` …)를 **직접** 참조했다. 그래서 브랜드 색을 바꾸려면 소비자가 팔레트 자체를 하이잭하거나(모든 파랑이 함께 바뀐다) 컴포넌트마다 CSS 를 덮어써야 했다. 이제 **`--u-primary-color` 한 줄**이면 버튼·체크박스·라디오·스위치·슬라이더·트리·메뉴·탭·진행바 등이 함께 따라온다.
+  - 단은 **강도 축**이다(weakest → strong). 용도(배경/테두리/텍스트)는 소비처가 정한다 — 단을 속성에 묶으면 *"primary 버튼의 배경은 어느 단인가"* 같은 모순이 생긴다.
+  - `primary` 와 `info` 는 기본 색상이 같지만 **다른 역할**이다. 리브랜딩은 `primary` 만 바꾸고 정보성 파랑은 그대로 둔다.
+  - 실사용이 없는 조합도 **전 그리드를 정의**한다 — 브랜딩 도중 특정 단만 없는 것을 발견하는 비용이 더 크다.
+- **시맨틱 토큰이 역할 층을 경유** — `--u-txt-color-hover`·`-active`, `--u-icon-color-hover`·`-active`, `--u-link-txt-color`, `--u-input-border-color-focus` → `--u-primary-color` 계열. `--u-input-border-color-invalid` → `--u-danger-color`. 값은 동일하며 참조 경로만 바뀌었다 — 역할 하나를 덮으면 시맨틱 층까지 따라온다.
+- **`docs/theming.md` 역할 토큰 절** — 그리드·파급 범위·파생 예제. 어느 시트를 넣을지에 대한 선택 기준도 추가했다(아래 Fixed 참조).
+- **전역 토큰 레퍼런스 `docs/design-tokens.md`** — 역할 25 · 시맨틱 45 · 팔레트 111. `light.css` 에서 생성(`npm run docs:tokens`)하며 테스트가 drift 를 막는다.
+  ★기존 `css-custom-properties.md` 는 **컴포넌트 JSDoc 만** 훑으므로 시트 레벨 토큰이 한 건도 실리지 않았다 — `--u-primary-color` 같은 브랜드 훅이 생성 레퍼런스에서 통째로 빠져 있었고, 소비자는 생성 문서를 먼저 연다. 세 문서가 서로를 가리키는지도 테스트로 확인한다.
+
+### Fixed
+- **문서가 브랜드 오버라이드의 파급 범위를 잘못 적고 있던 문제** — `u-badge`·`u-tag` 가 `--u-primary-color` 를 따른다고 안내했으나, `u-badge` 는 실제로 `color` 속성(장식 축)만 사용해 브랜드 색에 반응하지 않는다. 목록을 나열하는 대신 **규칙**(역할 축은 팔레트를 직접 참조하지 않는다)으로 서술하고 테스트로 강제한다.
+- **낡은 폴백 안내 7건** — `@cssprop` 설명의 *"미지정 시 blue-600"* 은 `--u-primary-color` 가 정의되지 않던 시절의 서술이다.
+
+### Changed
+- 컴포넌트 스타일의 역할 축 팔레트 직참조 **64건 → 0건**. 시각 결과는 **라이트·다크 모두 변경 없다** — 역할 토큰이 종전과 동일한 팔레트 단을 가리키고, 팔레트 값 자체가 이미 시트별로 다르기 때문이다.
+- `var(--u-primary-color, var(--u-blue-600))` 형태의 폴백 체인 **13건 정리** — `--u-primary-color` 가 실제로 정의되면서 폴백 arm 이 죽은 코드가 됐다(두 토큰 모두 같은 시트에서만 정의되므로 손실 없음).
+
+### Unchanged (의도적)
+- **`color` 속성(장식 축)은 그대로다** — `u-tag`·`u-badge`·`u-button`·`u-checkbox`·`u-spinner` 의 `color="purple"` 류는 역할 의미가 없는 **소비자의 색 선택**이므로 팔레트를 직접 읽으며, 브랜드 오버라이드에 **의도적으로 면역**이다. `<u-tag color="green">` 은 리브랜딩 후에도 녹색이다.
+
+## [1.10.0] - 2026-08-01
+
+### Added
+- **디자인 토큰의 정적 CSS 진입점** — `import '@iyulab/components/styles/tokens.css'` 한 줄로 런타임 호출 없이 토큰을 보장한다(light + dark 한 장, 다크는 `:root[theme="dark"]` 스코프라 안전하게 공존한다). 개별 시트(`styles/light.css`·`styles/dark.css`)도 그대로 쓸 수 있다.
+  ★**이것이 중요한 이유**: 토큰이 없으면 컴포넌트 시트의 `var(--u-…)` 가 전부 무효가 되어 **테두리·배경이 에러 없이 사라진다**. 종전에는 토큰 주입 경로가 `Theme.init()` 런타임 호출 하나뿐이었고, `@iyulab/modern-app` 셸이 그것을 대신 호출하는 구조였다 — 그래서 셸 **밖**에서 렌더되는 화면(로그인·온보딩·오류 페이지·임베드 위젯)은 같은 컴포넌트를 쓰면서도 조용히 무스타일로 렌더됐다.
+- **토큰 부재 진단 경고** — 개발 빌드에서 토큰 시트가 없으면 첫 컴포넌트 연결 시 1회 콘솔 경고. 종전에는 CSS 가 아무 신호도 내지 않아 소비자가 자기 CSS 를 며칠 의심했다.
+- **CSS 커스텀 프로퍼티 레퍼런스** — `docs/css-custom-properties.md`(23컴포넌트·98프로퍼티). 컴포넌트 JSDoc 에서 생성(`npm run docs:cssprops`)하며 테스트가 drift 를 막는다.
+- **React 이벤트 레퍼런스** — `docs/react-events.md`(24컴포넌트·37이벤트). 종전에는 소비자가 `dist/react/*.js` 를 열어봐야 알 수 있었다. ★`onClick` 같은 **네이티브 이벤트는 매핑 없이도 동작한다**는 점을 문서 상단에 명시(수동 `addEventListener` 배선이 불필요하다).
+- `--u-input-display` / `--u-input-width` 정식 선언 — 폼/그리드 셀에서 입력이 컨테이너 폭을 채우게 하려면 `--u-input-display: block`. 종전에도 전자는 동작했으나 문서화되지 않아 소비자가 `u-input { display:block; width:100% }` 를 각자 작성했다.
+- `--u-border-color-hover` 토큰 신설 — `--u-bg-color-hover`·`--u-input-border-color-hover` 는 있는데 일반 border 계열에만 hover 가 없던 결손을 채운다.
+- `@cssprop` 선언 25건 추가(`u-button` 파생 색 11 · `u-tree` 들여쓰기 5 · 그 외).
+
+### Fixed
+- **React 래퍼가 상속받은 이벤트를 노출하지 않던 결함** — 래퍼 생성기가 leaf 파일만 파싱해, `show`/`hide` 를 베이스(`UOverlayElement`)가 발화하는 `u-dialog`·`u-drawer` 가 `events: {}` 로 생성됐다. React 소비자가 `onShow`/`onHide` 를 붙여도 **에러도 경고도 없이 아무 일이 일어나지 않았다**. 이제 상속 체인을 따라 수집하며, `u-popover`·`u-tooltip` 의 이벤트 detail 타입도 함께 정밀해진다. 누락 시 **빌드가 실패**한다.
+- **`u-menu-item` 하위 메뉴 팝오버가 오버플로 조상에 클리핑되던 문제** — `u-select`·`u-input` 과 달리 `strategy="fixed"` 가 지정돼 있지 않았다.
+- **`u-option` 의 hover 테두리가 무효였던 문제** — 정의된 적 없는 `--u-border-color-hover` 를 폴백 없이 참조해 선언 전체가 무효였다.
+
+### Changed
+- ⚠**`u-button` 의 여백·테두리를 내부 요소(`::part(button)`/`::part(link)`)로 옮겼다.** 기본 렌더는 동일하다.
+  ★**이유**: `:host` 에 둔 여백·테두리는 소비 앱의 CSS 리셋(`* { padding:0; border:0 }` — Tailwind preflight 등 사실상 표준 관행)에 **지워진다**. 호스트 요소에 대해서는 문서 작성자 스타일이 섀도의 `:host` 규칙을 이기기 때문이며, 그 결과 버튼이 글자 높이만 남았다(에러 없음).
+  ⚠**호환성**: `u-button { padding: … }` 처럼 **호스트에 직접** 여백을 주던 소비자는 이제 효과가 없다. `--btn-padding-block`/`--btn-padding-inline` 토큰이나 `::part(button)` 을 쓴다. `::part(button)` 오버라이드는 종전대로 동작한다.
+- 빌드 스크립트 정리 — 플러그인은 이제 타입 검사만 하고 산출물을 내보내지 않는다(`typecheck:plugins`). 종전에는 컴파일된 `plugins/*.js` 가 `.ts` 소스를 가려 **플러그인 수정이 한 빌드 늦게 반영**되고, 산출물이 없는 신규 클론/CI 와 로컬의 동작이 달랐다.
+
 ## [1.9.0] - 2026-07-28
 
 ### Fixed
-- **열린 팝오버가 페이지 스크롤 한 번에 닫히던 결함 수정** (u-select listbox·u-input combobox 실사용 및 E2E 구동 불능 — U-Platform 실측, ISSUE-node-packages-20260724-uselect-playwright-driveability). `UPopover.dismiss` 기본값의 `scroll` 이 document 캡처 단계로 등록되는 한편 `UFloatingElement.show()` 는 **모든** 플로팅 엘리먼트에 floating-ui `autoUpdate`(스크롤 시 앵커 추종 재배치)를 설치한다 — 같은 스크롤 이벤트에 재배치와 닫기가 동시에 걸리고 닫기가 이기는 자기모순이었다. 이제 `scroll` 은 **앵커가 스크롤로 의미를 잃을 때만** 닫는다: 실제 엘리먼트에 앵커된 팝오버(드롭다운·제안 목록·서브메뉴·툴팁)는 재배치되어 열린 채 유지되고, `trigger="contextmenu"` 의 좌표 기반 가상 앵커는 종전대로 닫힌다. Playwright 의 "scroll into view" 가 목록을 닫아 `getByRole('option').click()` 이 완주하지 못하던 문제도 함께 해소된다. 회귀 테스트 3건 추가.
+- **열린 팝오버가 페이지 스크롤 한 번에 닫히던 결함 수정** (u-select listbox·u-input combobox 실사용 및 E2E 구동 불능). `UPopover.dismiss` 기본값의 `scroll` 이 document 캡처 단계로 등록되는 한편 `UFloatingElement.show()` 는 **모든** 플로팅 엘리먼트에 floating-ui `autoUpdate`(스크롤 시 앵커 추종 재배치)를 설치한다 — 같은 스크롤 이벤트에 재배치와 닫기가 동시에 걸리고 닫기가 이기는 자기모순이었다. 이제 `scroll` 은 **앵커가 스크롤로 의미를 잃을 때만** 닫는다: 실제 엘리먼트에 앵커된 팝오버(드롭다운·제안 목록·서브메뉴·툴팁)는 재배치되어 열린 채 유지되고, `trigger="contextmenu"` 의 좌표 기반 가상 앵커는 종전대로 닫힌다. Playwright 의 "scroll into view" 가 목록을 닫아 `getByRole('option').click()` 이 완주하지 못하던 문제도 함께 해소된다. 회귀 테스트 3건 추가.
 - **`dismiss: 'resize'` 도 같은 원칙으로 정합** — `autoUpdate` 는 `ancestorResize` 로 window 리사이즈도 구독해 재배치하므로 scroll 과 동일한 자기모순이었다. 이제 리사이즈도 좌표 기반 가상 앵커에서만 닫는다. 이로써 모바일에서 `u-select searchable` 의 검색 입력을 탭할 때 가상 키보드가 레이아웃 뷰포트를 줄이며 발생시키는 리사이즈로 드롭다운이 닫히던 문제가 해소된다. 회귀 테스트 2건 추가.
 
 - **React 래퍼가 `ref` 를 타입 수준에서 거부하던 문제 수정** — 생성된 `.d.ts` 가 `React.ForwardRefExoticComponent<P>` 를 쓰면서 P 에 `React.RefAttributes` 를 넣지 않았다. `ForwardRefExoticComponent<P>` 는 ref 를 자동으로 더해 주지 않으므로, `@lit/react` 가 런타임에 ref 를 정상 전달하는데도(`ReactWebComponent` 자신은 `PropsWithoutRef<…> & React.RefAttributes<I>` 로 선언돼 있다) `<UButton ref={…} />` 가 TS2322 로 거부됐다. 이제 42개 래퍼 전부가 ref 를 받으며, ref 타입은 `HTMLElement` 가 아니라 **해당 엘리먼트 클래스**로 좁혀진다. 신설 React 타입 스모크가 첫 실행에서 잡아낸 결함이다.
@@ -15,13 +113,13 @@
 ## [1.8.1] - 2026-07-24
 
 ### Fixed
-- **u-field 합성 폼 컨트롤이 접근성 트리에서 이름 없이 노출되던 문제 수정** (WCAG 1.3.1·4.1.2 — U-Platform T8-1 Playwright E2E 실측, ISSUE-20260723-uinput-label-a11y). 라벨은 `u-field` 의 별도 섀도 스코프에 렌더되어 `label[for]` 로 컨트롤과 연결될 수 없었고, 섀도 경계 탓에 cross-root `aria-labelledby` 도 현 브라우저에서 신뢰성 있게 배송되지 않는다. 이제 각 컴포넌트가 자신의 접근 이름 호스트에 라벨을 `aria-label`(설명은 `aria-description`)로 미러링한다 — `u-input`/`u-textarea`(네이티브 컨트롤), `u-rating`/`u-radio`(`role=radiogroup`), `u-select`(`role=combobox` + `aria-expanded`/`aria-haspopup`/`aria-controls`), `u-slider`(`role=slider` + `aria-valuenow`/`valuemin`/`valuemax`/`valuetext`). 아울러 `u-option` 이 사용 맥락에 맞는 자식 역할·상태를 노출한다 — radiogroup(`marker='radio'`) 안에서는 `role=radio` + `aria-checked`, listbox(`u-select`/`u-input` combobox) 에서는 `role=option` + `aria-selected`(+ `aria-disabled`) — 이름만 있고 비어 보이던 radiogroup/combobox 위젯이 자식까지 정합하게 읽힌다. `u-rating` 심볼(`role=radio`)도 커밋 값 기준 `aria-checked` 를 노출한다. `getByLabel`/`getByRole({name})` 로케이터와 스크린리더가 컨트롤을 이름으로 인식한다.
-- **React 래퍼 `.d.ts` 타이핑 2건 수정** (React 19 + TS strict 컴파일 차단 — U-CMMS 실측, ISSUE-20260722-react-wrapper-typing). (1) `React.HTMLAttributes` 의 이벤트 핸들러(`onChange` 등)와 래퍼의 CustomEvent 시그니처가 교집합되어 어떤 핸들러도 대입 불가였던 것을, HTMLAttributes 쪽 동명 이벤트 키를 `Omit` 해 CustomEvent 시그니처만 남기도록 교정. (2) `Partial<Element>` 의 DOM `children: HTMLCollection` 이 JSX children 을 가려 `<UButton>text</UButton>` 이 TS2747 로 실패하던 것을, `Omit<Partial<Element>, keyof HTMLAttributes>` 로 DOM 전용 키를 제거하고 React 친화 타입(`children: ReactNode`)이 HTMLAttributes 에서 공급되도록 교정. 소비자의 `as unknown as ComponentType` 우회 제거 가능.
+- **u-field 합성 폼 컨트롤이 접근성 트리에서 이름 없이 노출되던 문제 수정** (WCAG 1.3.1·4.1.2 — Playwright E2E 실측). 라벨은 `u-field` 의 별도 섀도 스코프에 렌더되어 `label[for]` 로 컨트롤과 연결될 수 없었고, 섀도 경계 탓에 cross-root `aria-labelledby` 도 현 브라우저에서 신뢰성 있게 배송되지 않는다. 이제 각 컴포넌트가 자신의 접근 이름 호스트에 라벨을 `aria-label`(설명은 `aria-description`)로 미러링한다 — `u-input`/`u-textarea`(네이티브 컨트롤), `u-rating`/`u-radio`(`role=radiogroup`), `u-select`(`role=combobox` + `aria-expanded`/`aria-haspopup`/`aria-controls`), `u-slider`(`role=slider` + `aria-valuenow`/`valuemin`/`valuemax`/`valuetext`). 아울러 `u-option` 이 사용 맥락에 맞는 자식 역할·상태를 노출한다 — radiogroup(`marker='radio'`) 안에서는 `role=radio` + `aria-checked`, listbox(`u-select`/`u-input` combobox) 에서는 `role=option` + `aria-selected`(+ `aria-disabled`) — 이름만 있고 비어 보이던 radiogroup/combobox 위젯이 자식까지 정합하게 읽힌다. `u-rating` 심볼(`role=radio`)도 커밋 값 기준 `aria-checked` 를 노출한다. `getByLabel`/`getByRole({name})` 로케이터와 스크린리더가 컨트롤을 이름으로 인식한다.
+- **React 래퍼 `.d.ts` 타이핑 2건 수정** (React 19 + TS strict 컴파일 차단 — U-CMMS 실측). (1) `React.HTMLAttributes` 의 이벤트 핸들러(`onChange` 등)와 래퍼의 CustomEvent 시그니처가 교집합되어 어떤 핸들러도 대입 불가였던 것을, HTMLAttributes 쪽 동명 이벤트 키를 `Omit` 해 CustomEvent 시그니처만 남기도록 교정. (2) `Partial<Element>` 의 DOM `children: HTMLCollection` 이 JSX children 을 가려 `<UButton>text</UButton>` 이 TS2747 로 실패하던 것을, `Omit<Partial<Element>, keyof HTMLAttributes>` 로 DOM 전용 키를 제거하고 React 친화 타입(`children: ReactNode`)이 HTMLAttributes 에서 공급되도록 교정. 소비자의 `as unknown as ComponentType` 우회 제거 가능.
 
 ## [1.8.0] - 2026-07-22
 
 ### Fixed
-- **`u-icon` 아이콘 리졸브가 재렌더·재마운트마다 다시 fetch되던 스톰 수정** — `IconRegistry.resolve()`가 리졸버 결과를 캐시하지 않아, SSE 스트리밍처럼 같은 아이콘이 반복 재마운트되는 UI에서 단일 아이콘에 수백 회 fetch가 발생했다(미존재 아이콘은 404 스톰으로 콘솔 오염 + dev 서버 부하 — SMI.AIMS 실측, ISSUE-components-20260722-iconregistry-resolver-no-cache). 이제 레지스트리가 (lib, name) 단위 캐싱과 동시 요청 in-flight dedupe를 소유해, 커스텀 리졸버를 포함한 모든 라이브러리에서 아이콘당 세션 1회만 리졸브된다. `u-icon`의 `src` 경로·무-lib 기본(baseUrl) 경로도 신설 `IconRegistry.resolveUrl(url)`을 경유해 동일하게 캐시된다.
+- **`u-icon` 아이콘 리졸브가 재렌더·재마운트마다 다시 fetch되던 스톰 수정** — `IconRegistry.resolve()`가 리졸버 결과를 캐시하지 않아, SSE 스트리밍처럼 같은 아이콘이 반복 재마운트되는 UI에서 단일 아이콘에 수백 회 fetch가 발생했다(미존재 아이콘은 404 스톰으로 콘솔 오염 + dev 서버 부하 — 실사용에서 관측). 이제 레지스트리가 (lib, name) 단위 캐싱과 동시 요청 in-flight dedupe를 소유해, 커스텀 리졸버를 포함한 모든 라이브러리에서 아이콘당 세션 1회만 리졸브된다. `u-icon`의 `src` 경로·무-lib 기본(baseUrl) 경로도 신설 `IconRegistry.resolveUrl(url)`을 경유해 동일하게 캐시된다.
 - 내장 CDN 리졸버(tabler/heroicons/lucide/bootstrap)가 네트워크 오류를 `undefined`로 삼키던 것을 throw 전파로 교정 — 일시 장애가 세션 내 not-found로 오인·고착되지 않고 다음 조회에서 재시도된다.
 
 ### Changed
@@ -60,7 +158,7 @@
 ## [1.7.0] - 2026-07-17
 
 ### Fixed
-- **폼 컨트롤 `change` 이벤트 의미론을 네이티브 규약으로 교정** — `USelect`/`URadio`/`URating`/`USlider`가 `updated()` 경로에서 무조건 `change`를 발화해, (1) 옵션 slot 등록 시 `value===undefined` 상태의 change가 발화되어 React 등 controlled 래퍼의 state를 오염시키고(옵션 등록 전 세팅한 초기값이 유실·서버 enum 기본값으로 저장되는 무증상 데이터 결함 — yesung 실측), (2) 프로그램적 `value` 세팅이 사용자 이벤트로 위장되어 에코 루프를 만들던 문제 수정. 이제 `change`는 **사용자 상호작용**(옵션 클릭·키보드·칩 제거·지우기·드래그 확정)에서만 발화한다(ISSUE-components-20260717-uselect-value-before-options). `UInput`(blur 발화)·`UMenu`/`UTree`(핸들러 발화)는 원래 규약대로였으며 변경 없음.
+- **폼 컨트롤 `change` 이벤트 의미론을 네이티브 규약으로 교정** — `USelect`/`URadio`/`URating`/`USlider`가 `updated()` 경로에서 무조건 `change`를 발화해, (1) 옵션 slot 등록 시 `value===undefined` 상태의 change가 발화되어 React 등 controlled 래퍼의 state를 오염시키고(옵션 등록 전 세팅한 초기값이 유실·서버 enum 기본값으로 저장되는 무증상 데이터 결함 — 실사용에서 관측), (2) 프로그램적 `value` 세팅이 사용자 이벤트로 위장되어 에코 루프를 만들던 문제 수정. 이제 `change`는 **사용자 상호작용**(옵션 클릭·키보드·칩 제거·지우기·드래그 확정)에서만 발화한다. `UInput`(blur 발화)·`UMenu`/`UTree`(핸들러 발화)는 원래 규약대로였으며 변경 없음.
 - `USlider`: 문서("드래그 완료 후 발생")와 달리 **드래그 중 매 pointermove마다 change가 연사**되던 결함 수정 — 이제 `pointerup` 시 값이 실제로 바뀐 경우 1회 발화. 단일 select에서 동일 옵션 재선택, 선택된 라디오 재클릭도 네이티브와 동일하게 미발화.
 - `USelect`/`URadio`/`URating`의 `onChangeValue()`가 `updated()` 내부에서 `validate()`→`requestUpdate()`를 호출해 v1.5.1 검증 아키텍처를 위반하고 "scheduled an update after an update completed" Lit 경고를 재유발하던 잔재 제거 — 검증 UI 갱신(`validate()`)은 사용자 상호작용 경로에서만 수행하고, 프로그램적 세팅은 base의 silent `setValidity()`로 internals만 갱신한다.
 - **마크업 `value` attribute 선언이 일반 문자열에서 silently null이 되던 갭 수정** — base가 `type: Object`(JSON.parse)여서 `<u-input value="hello">`·`<u-select value="b">`가 null로 해석됐다. 기본 해석을 raw 문자열로 바꾸고, `u-rating`/`u-slider`는 숫자, `u-select`(multiple)/`u-slider`(range)는 JSON 배열(`value='["a","b"]'`)을 지원한다.
@@ -72,10 +170,10 @@
 ## [1.6.0] - 2026-07-16
 
 ### Added
-- `UCopyButton`(`u-copy-button`): **인라인 텍스트 라벨** 지원 — `label` prop을 지정하면 아이콘 옆에 보이는 텍스트 라벨을 렌더한다(예: `label="결과 복사"`). 지금까지 u-copy-button은 아이콘 전용(기본 슬롯은 툴팁으로 소비)이라 "📋 결과 복사"처럼 라벨이 붙은 복사 버튼을 표현할 수 없어, 소비자가 검증된 클립보드 로직(취소 가능 `copy` ClipboardEvent + copied 상태 + 아이콘 토글)을 재사용하지 못하고 자체 재구현하던 역량 갭을 해소(ISSUE-20260715-ucopybutton-no-inline-label). 비파괴 — `label` 미지정 시 기존 아이콘 전용 형태(및 기본 슬롯=툴팁 의미)를 그대로 유지한다. 라벨 지정 시 내부적으로 `u-button`(아이콘 prefix + 텍스트)으로 렌더하고, 클립보드 로직은 두 형태에서 동일하다. online-tools(NT-U4) dogfooding에서 발견.
+- `UCopyButton`(`u-copy-button`): **인라인 텍스트 라벨** 지원 — `label` prop을 지정하면 아이콘 옆에 보이는 텍스트 라벨을 렌더한다(예: `label="결과 복사"`). 지금까지 u-copy-button은 아이콘 전용(기본 슬롯은 툴팁으로 소비)이라 "📋 결과 복사"처럼 라벨이 붙은 복사 버튼을 표현할 수 없어, 소비자가 검증된 클립보드 로직(취소 가능 `copy` ClipboardEvent + copied 상태 + 아이콘 토글)을 재사용하지 못하고 자체 재구현하던 역량 갭을 해소. 비파괴 — `label` 미지정 시 기존 아이콘 전용 형태(및 기본 슬롯=툴팁 의미)를 그대로 유지한다. 라벨 지정 시 내부적으로 `u-button`(아이콘 prefix + 텍스트)으로 렌더하고, 클립보드 로직은 두 형태에서 동일하다. online-tools(NT-U4)
 
 ### Fixed
-- `u-drawer`/`u-dialog`: **테마 토큰 미정의 시 패널이 투명하게 렌더**되어 모달이 "안 뜬 것처럼" 보이던 결함 수정(ISSUE-20260715-uoverlay-panel-token-no-fallback). backdrop(`--u-overlay-bg-color`)에는 폴백이 있는데 패널 배경/테두리(`--u-panel-bg-color`/`--u-border-color`)에는 폴백이 없어, `Theme.init()`로 토큰을 주입하지 않은 소비자에게 backdrop만 흐려지고 패널은 투명하게 떠 슬롯 콘텐츠가 뒤 페이지와 겹쳐 읽히던 footgun. backdrop과 동일 정책으로 패널 배경에 `Canvas`, 테두리에 `color-mix(in srgb, CanvasText 20%, Canvas)` CSS 시스템 컬러 폴백을 부여 — 토큰 미정의 소비자도 라이트·다크 자동 적응되는 가시 패널을 얻고, 토큰 정의 소비자는 기존과 동일(폴백 미사용). 실 브라우저 렌더 회귀 가드 추가. online-tools(NT-U2) dogfooding에서 발견.
+- `u-drawer`/`u-dialog`: **테마 토큰 미정의 시 패널이 투명하게 렌더**되어 모달이 "안 뜬 것처럼" 보이던 결함 수정. backdrop(`--u-overlay-bg-color`)에는 폴백이 있는데 패널 배경/테두리(`--u-panel-bg-color`/`--u-border-color`)에는 폴백이 없어, `Theme.init()`로 토큰을 주입하지 않은 소비자에게 backdrop만 흐려지고 패널은 투명하게 떠 슬롯 콘텐츠가 뒤 페이지와 겹쳐 읽히던 footgun. backdrop과 동일 정책으로 패널 배경에 `Canvas`, 테두리에 `color-mix(in srgb, CanvasText 20%, Canvas)` CSS 시스템 컬러 폴백을 부여 — 토큰 미정의 소비자도 라이트·다크 자동 적응되는 가시 패널을 얻고, 토큰 정의 소비자는 기존과 동일(폴백 미사용). 실 브라우저 렌더 회귀 가드 추가. online-tools(NT-U2)
 
 ## [1.5.1] - 2026-07-07
 
@@ -120,7 +218,7 @@
 ## [1.3.3] - 2026-07-03
 
 ### Fixed
-- `UCheckbox`: 클래스 JSDoc에 `@event change` 태그 누락으로 공식 React 래퍼(`@iyulab/components/react`)의 `UCheckbox` props가 빈 `{}`로 생성되어 `onChange`가 노출되지 않던 결함 수정. 런타임은 `this.relay(e)`로 `change`를 정상 발생시키지만, 래퍼 생성기가 `@event` 태그(또는 `this.fire<T>('name')` 리터럴)로만 이벤트 맵을 도출하므로 태그가 없으면 이벤트가 누락된다. (`USwitch`/`UInput`/`UTextarea`는 태그 보유 — `relay()`를 쓰는 폼 컨트롤 중 `UCheckbox`만 누락되어 있었음.) yesung-oms dogfooding에서 발견.
+- `UCheckbox`: 클래스 JSDoc에 `@event change` 태그 누락으로 공식 React 래퍼(`@iyulab/components/react`)의 `UCheckbox` props가 빈 `{}`로 생성되어 `onChange`가 노출되지 않던 결함 수정. 런타임은 `this.relay(e)`로 `change`를 정상 발생시키지만, 래퍼 생성기가 `@event` 태그(또는 `this.fire<T>('name')` 리터럴)로만 이벤트 맵을 도출하므로 태그가 없으면 이벤트가 누락된다. (`USwitch`/`UInput`/`UTextarea`는 태그 보유 — `relay()`를 쓰는 폼 컨트롤 중 `UCheckbox`만 누락되어 있었음.)
 
 ### Changed
 - `plugins/vite-plugin-react-wrapper.ts`: `@customElement` 컴포넌트가 `this.relay(...)`/`this.dispatchEvent(...)`로 이벤트를 발생시키지만 수집된 이벤트가 0건이면 빌드 시 경고를 출력하도록 개선 — 위 `UCheckbox`류의 "태그 누락으로 이벤트가 조용히 사라지는" 결함 재발 방지. (`this.fire<T>('name')`은 이름이 정적으로 잡히므로 경고 대상이 아님.)
@@ -146,7 +244,7 @@
 ## [1.2.1] - 2026-07-02
 
 ### Fixed
-- `plugins/vite-plugin-react-wrapper.ts`: 생성된 `dist/react/*.js` 래퍼가 `import { X } from '...'`와 `export const X = ...`를 동일 스코프에 선언해 **모든** React 래퍼(및 barrel `@iyulab/components/react`)가 `SyntaxError: Identifier 'X' has already been declared`로 로드 자체가 실패하던 결함 수정. `.d.ts` 템플릿은 이미 `as ${className}Element` 별칭을 썼으나 `.js` 템플릿만 누락되어 있었음 — `.js` 생성기에 동일한 별칭을 적용해 근본 수정. 이 서브패스를 문서화·검증하는 과정에서 발견(README 예시를 실제로 import해보다가 SyntaxError 재현).
+- `plugins/vite-plugin-react-wrapper.ts`: 생성된 `dist/react/*.js` 래퍼가 `import { X } from '...'`와 `export const X =...`를 동일 스코프에 선언해 **모든** React 래퍼(및 barrel `@iyulab/components/react`)가 `SyntaxError: Identifier 'X' has already been declared`로 로드 자체가 실패하던 결함 수정. `.d.ts` 템플릿은 이미 `as ${className}Element` 별칭을 썼으나 `.js` 템플릿만 누락되어 있었음 — `.js` 생성기에 동일한 별칭을 적용해 근본 수정. 이 서브패스를 문서화·검증하는 과정에서 발견(README 예시를 실제로 import해보다가 SyntaxError 재현).
 
 ## [1.2.0] - 2026-07-02
 

package/README.md

@@ -13,6 +13,9 @@ npm install @iyulab/components
 ## Usage
 
 ```ts
+// 디자인 토큰 (필수 — 없으면 테두리·배경이 조용히 사라진다)
+import '@iyulab/components/styles/tokens.css';
+
 // 전체 import
 import '@iyulab/components';
 
@@ -21,6 +24,11 @@ import '@iyulab/components/u-button';
 import '@iyulab/components/u-input';
 ```
 
+> **토큰 시트는 선택이 아니다.** 컴포넌트의 모든 색·테두리·배경은 `var(--u-…)` 로 해석되며,
+> 미정의 커스텀 프로퍼티는 선언 전체를 무효로 만든다 — 에러도 경고도 없이 컨트롤이
+> 무스타일로 렌더된다. 정적 CSS 대신 런타임 `Theme.init()` 을 써도 되지만, **둘 중 하나는
+> 반드시 필요하다.** 자세한 내용은 [docs/theming.md](docs/theming.md) 참조.
+
 ## React
 
 React 프로젝트에서는 `@iyulab/components/react` 서브패스가 모든 컴포넌트를 `forwardRef` 래퍼로 제공합니다. Web Component를 직접 다루지 않고도 JSX props(`color`, `size`, 이벤트 `onXxx` 등)로 사용할 수 있습니다.
@@ -103,7 +111,9 @@ Theme.set('system');
 | [docs/architecture.md](./docs/architecture.md) | 패키지 구조 및 클래스 계층 |
 | [docs/guidelines.md](./docs/guidelines.md) | 컴포넌트 개발 가이드라인 |
 | [docs/events.md](./docs/events.md) | 이벤트 시스템 카탈로그 |
-| [docs/theming.md](./docs/theming.md) | 테마 및 CSS 변수 |
+| [docs/theming.md](./docs/theming.md) | 테마 · 역할 토큰 · 브랜딩 |
+| [docs/design-tokens.md](./docs/design-tokens.md) | 전역 토큰 전체 목록 (생성) |
+| [docs/css-custom-properties.md](./docs/css-custom-properties.md) | 컴포넌트별 CSS 훅 (생성) |
 | [docs/form-controls.md](./docs/form-controls.md) | 폼 연동 및 검증 API |
 | [docs/icons.md](./docs/icons.md) | 아이콘 등록 및 사용 |
 | [docs/native-event.md](./docs/native-event.md) | 컴포넌트가 다루는 네이티브 DOM 이벤트 목록 |

package/dist/_virtual/{_@oxc-project_runtime@0.139.0 → _@oxc-project_runtime@0.142.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/_virtual/{_@oxc-project_runtime@0.139.0 → _@oxc-project_runtime@0.142.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }

package/dist/_virtual/_glob-assets_raw/dark.css.e8ac080d.js

@@ -1,4 +1,4 @@
 //#region \0glob-assets_raw/dark.css.e8ac080d
-var dark_css_default = ":root[theme=\"dark\"] {\n  color-scheme: dark;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #000000;\n  --u-neutral-50:    #0A0A0A;\n  --u-neutral-100:   #121212;\n  --u-neutral-200:   #1E1E1E;\n  --u-neutral-300:   #2A2A2A;\n  --u-neutral-400:   #3D3D3D;\n  --u-neutral-500:   #525252;\n  --u-neutral-600:   #6E6E6E;\n  --u-neutral-700:   #8A8A8A;\n  --u-neutral-800:   #B0B0B0;\n  --u-neutral-900:   #D4D4D4;\n  --u-neutral-1000:  #FFFFFF;\n\n  /* Blue Colors */\n  --u-blue-0:        #030D1A;\n  --u-blue-100:      #061629;\n  --u-blue-200:      #0A223B;\n  --u-blue-300:      #103150;\n  --u-blue-400:      #174167;\n  --u-blue-500:      #205281;\n  --u-blue-600:      #2A659D;\n  --u-blue-700:      #3678B8;\n  --u-blue-800:      #478DCE;\n  --u-blue-900:      #5DA2DF;\n  --u-blue-1000:     #79BBEA;\n\n  /* Green Colors */\n  --u-green-0:       #06140C;\n  --u-green-100:     #0A2114;\n  --u-green-200:     #10301D;\n  --u-green-300:     #164228;\n  --u-green-400:     #1F5535;\n  --u-green-500:     #2A6942;\n  --u-green-600:     #367E50;\n  --u-green-700:     #4A9563;\n  --u-green-800:     #63AB7A;\n  --u-green-900:     #80BE97;\n  --u-green-1000:    #9BCFB1;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #1C1300;\n  --u-yellow-100:    #2D1E00;\n  --u-yellow-200:    #402B00;\n  --u-yellow-300:    #553900;\n  --u-yellow-400:    #6B4900;\n  --u-yellow-500:    #825A00;\n  --u-yellow-600:    #9A6C00;\n  --u-yellow-700:    #B08012;\n  --u-yellow-800:    #C69635;\n  --u-yellow-900:    #D9AD5A;\n  --u-yellow-1000:   #E8C57F;\n\n  /* Red Colors */\n  --u-red-0:         #1C0707;\n  --u-red-100:       #2C0B0B;\n  --u-red-200:       #3E1111;\n  --u-red-300:       #541818;\n  --u-red-400:       #6C2020;\n  --u-red-500:       #852A2A;\n  --u-red-600:       #A13535;\n  --u-red-700:       #B94949;\n  --u-red-800:       #CB6262;\n  --u-red-900:       #D98383;\n  --u-red-1000:      #E7A2A2;\n\n  /* Orange Colors */\n  --u-orange-0:      #1D0E00;\n  --u-orange-100:    #2F1700;\n  --u-orange-200:    #421F00;\n  --u-orange-300:    #582A00;\n  --u-orange-400:    #703600;\n  --u-orange-500:    #8A4500;\n  --u-orange-600:    #A55600;\n  --u-orange-700:    #BD6A18;\n  --u-orange-800:    #D1823C;\n  --u-orange-900:    #E19D67;\n  --u-orange-1000:   #EDB992;\n\n  /* Teal Colors */\n  --u-teal-0:        #041411;\n  --u-teal-100:      #07201B;\n  --u-teal-200:      #0B2E28;\n  --u-teal-300:      #10403A;\n  --u-teal-400:      #16544D;\n  --u-teal-500:      #1E6860;\n  --u-teal-600:      #297D74;\n  --u-teal-700:      #3A9389;\n  --u-teal-800:      #54A89F;\n  --u-teal-900:      #73BBB3;\n  --u-teal-1000:     #93CBC5;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #041318;\n  --u-cyan-100:      #071F29;\n  --u-cyan-200:      #0B2D3A;\n  --u-cyan-300:      #104050;\n  --u-cyan-400:      #165469;\n  --u-cyan-500:      #1E6A82;\n  --u-cyan-600:      #287F9C;\n  --u-cyan-700:      #3995B5;\n  --u-cyan-800:      #53AACC;\n  --u-cyan-900:      #73BEDD;\n  --u-cyan-1000:     #95CFE8;\n\n  /* Purple Colors */\n  --u-purple-0:      #150A22;\n  --u-purple-100:    #220F36;\n  --u-purple-200:    #31164B;\n  --u-purple-300:    #432064;\n  --u-purple-400:    #572B80;\n  --u-purple-500:    #6C379C;\n  --u-purple-600:    #8245B7;\n  --u-purple-700:    #975BCB;\n  --u-purple-800:    #AB79D9;\n  --u-purple-900:    #BD99E2;\n  --u-purple-1000:   #CEB8EA;\n\n  /* Pink Colors */\n  --u-pink-0:        #1F0A14;\n  --u-pink-100:      #310F20;\n  --u-pink-200:      #451532;\n  --u-pink-300:      #5C1D45;\n  --u-pink-400:      #74285A;\n  --u-pink-500:      #8F336F;\n  --u-pink-600:      #AB4187;\n  --u-pink-700:      #C0569D;\n  --u-pink-800:      #D174B3;\n  --u-pink-900:      #E095C7;\n  --u-pink-1000:     #EBB5D9;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n  --u-txt-color-hover:       var(--u-blue-600);\n  --u-txt-color-active:      var(--u-blue-600);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-blue-700);\n  --u-tooltip-txt-color:     var(--u-neutral-100);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-800);\n  --u-icon-color-inverse:    var(--u-neutral-100);\n  --u-icon-color-hover:      var(--u-blue-600);\n  --u-icon-color-active:     var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-300);\n  --u-border-color-strong:   var(--u-neutral-500);\n\n  --u-input-border-color:         var(--u-neutral-400);\n  --u-input-border-color-hover:   var(--u-neutral-500);\n  --u-input-border-color-focus:   var(--u-blue-600);\n  --u-input-border-color-invalid: var(--u-red-600);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-100);\n  --u-bg-color-inverse:      var(--u-neutral-0);\n  --u-bg-color-hover:        var(--u-neutral-300);\n  --u-bg-color-active:       var(--u-neutral-400);\n  --u-bg-color-disabled:     var(--u-neutral-100);\n  \n  --u-input-bg-color:        var(--u-neutral-200);\n  --u-panel-bg-color:        var(--u-neutral-200);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-500);\n  --u-scrollbar-color-hover: var(--u-neutral-600);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
+var dark_css_default = ":root[theme=\"dark\"] {\n  color-scheme: dark;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #000000;\n  --u-neutral-50:    #0A0A0A;\n  --u-neutral-100:   #121212;\n  --u-neutral-200:   #1E1E1E;\n  --u-neutral-300:   #2A2A2A;\n  --u-neutral-400:   #3D3D3D;\n  --u-neutral-500:   #525252;\n  --u-neutral-600:   #6E6E6E;\n  --u-neutral-700:   #8A8A8A;\n  --u-neutral-800:   #B0B0B0;\n  --u-neutral-900:   #D4D4D4;\n  --u-neutral-1000:  #FFFFFF;\n\n  /* Blue Colors */\n  --u-blue-0:        #030D1A;\n  --u-blue-100:      #061629;\n  --u-blue-200:      #0A223B;\n  --u-blue-300:      #103150;\n  --u-blue-400:      #174167;\n  --u-blue-500:      #205281;\n  --u-blue-600:      #2A659D;\n  --u-blue-700:      #3678B8;\n  --u-blue-800:      #478DCE;\n  --u-blue-900:      #5DA2DF;\n  --u-blue-1000:     #79BBEA;\n\n  /* Green Colors */\n  --u-green-0:       #06140C;\n  --u-green-100:     #0A2114;\n  --u-green-200:     #10301D;\n  --u-green-300:     #164228;\n  --u-green-400:     #1F5535;\n  --u-green-500:     #2A6942;\n  --u-green-600:     #367E50;\n  --u-green-700:     #4A9563;\n  --u-green-800:     #63AB7A;\n  --u-green-900:     #80BE97;\n  --u-green-1000:    #9BCFB1;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #1C1300;\n  --u-yellow-100:    #2D1E00;\n  --u-yellow-200:    #402B00;\n  --u-yellow-300:    #553900;\n  --u-yellow-400:    #6B4900;\n  --u-yellow-500:    #825A00;\n  --u-yellow-600:    #9A6C00;\n  --u-yellow-700:    #B08012;\n  --u-yellow-800:    #C69635;\n  --u-yellow-900:    #D9AD5A;\n  --u-yellow-1000:   #E8C57F;\n\n  /* Red Colors */\n  --u-red-0:         #1C0707;\n  --u-red-100:       #2C0B0B;\n  --u-red-200:       #3E1111;\n  --u-red-300:       #541818;\n  --u-red-400:       #6C2020;\n  --u-red-500:       #852A2A;\n  --u-red-600:       #A13535;\n  --u-red-700:       #B94949;\n  --u-red-800:       #CB6262;\n  --u-red-900:       #D98383;\n  --u-red-1000:      #E7A2A2;\n\n  /* Orange Colors */\n  --u-orange-0:      #1D0E00;\n  --u-orange-100:    #2F1700;\n  --u-orange-200:    #421F00;\n  --u-orange-300:    #582A00;\n  --u-orange-400:    #703600;\n  --u-orange-500:    #8A4500;\n  --u-orange-600:    #A55600;\n  --u-orange-700:    #BD6A18;\n  --u-orange-800:    #D1823C;\n  --u-orange-900:    #E19D67;\n  --u-orange-1000:   #EDB992;\n\n  /* Teal Colors */\n  --u-teal-0:        #041411;\n  --u-teal-100:      #07201B;\n  --u-teal-200:      #0B2E28;\n  --u-teal-300:      #10403A;\n  --u-teal-400:      #16544D;\n  --u-teal-500:      #1E6860;\n  --u-teal-600:      #297D74;\n  --u-teal-700:      #3A9389;\n  --u-teal-800:      #54A89F;\n  --u-teal-900:      #73BBB3;\n  --u-teal-1000:     #93CBC5;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #041318;\n  --u-cyan-100:      #071F29;\n  --u-cyan-200:      #0B2D3A;\n  --u-cyan-300:      #104050;\n  --u-cyan-400:      #165469;\n  --u-cyan-500:      #1E6A82;\n  --u-cyan-600:      #287F9C;\n  --u-cyan-700:      #3995B5;\n  --u-cyan-800:      #53AACC;\n  --u-cyan-900:      #73BEDD;\n  --u-cyan-1000:     #95CFE8;\n\n  /* Purple Colors */\n  --u-purple-0:      #150A22;\n  --u-purple-100:    #220F36;\n  --u-purple-200:    #31164B;\n  --u-purple-300:    #432064;\n  --u-purple-400:    #572B80;\n  --u-purple-500:    #6C379C;\n  --u-purple-600:    #8245B7;\n  --u-purple-700:    #975BCB;\n  --u-purple-800:    #AB79D9;\n  --u-purple-900:    #BD99E2;\n  --u-purple-1000:   #CEB8EA;\n\n  /* Pink Colors */\n  --u-pink-0:        #1F0A14;\n  --u-pink-100:      #310F20;\n  --u-pink-200:      #451532;\n  --u-pink-300:      #5C1D45;\n  --u-pink-400:      #74285A;\n  --u-pink-500:      #8F336F;\n  --u-pink-600:      #AB4187;\n  --u-pink-700:      #C0569D;\n  --u-pink-800:      #D174B3;\n  --u-pink-900:      #E095C7;\n  --u-pink-1000:     #EBB5D9;\n\n  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n     ========================================================================== */\n\n  /* primary — 브랜드 · 강조 · 포커스 · 링크 */\n  --u-primary-color-weakest:     var(--u-blue-200);\n  --u-primary-color-weaker:      var(--u-blue-300);\n  --u-primary-color-weak:        var(--u-blue-500);\n  --u-primary-color:             var(--u-blue-600);\n  --u-primary-color-strong:      var(--u-blue-700);\n\n  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */\n  --u-info-color-weakest:        var(--u-blue-200);\n  --u-info-color-weaker:         var(--u-blue-300);\n  --u-info-color-weak:           var(--u-blue-500);\n  --u-info-color:                var(--u-blue-600);\n  --u-info-color-strong:         var(--u-blue-700);\n\n  /* success — 성공 · 완료 */\n  --u-success-color-weakest:     var(--u-green-200);\n  --u-success-color-weaker:      var(--u-green-300);\n  --u-success-color-weak:        var(--u-green-500);\n  --u-success-color:             var(--u-green-600);\n  --u-success-color-strong:      var(--u-green-700);\n\n  /* warning — 주의 */\n  --u-warning-color-weakest:     var(--u-yellow-200);\n  --u-warning-color-weaker:      var(--u-yellow-300);\n  --u-warning-color-weak:        var(--u-yellow-500);\n  --u-warning-color:             var(--u-yellow-600);\n  --u-warning-color-strong:      var(--u-yellow-700);\n\n  /* danger — 오류 · 위험 · 유효성 실패 */\n  --u-danger-color-weakest:      var(--u-red-200);\n  --u-danger-color-weaker:       var(--u-red-300);\n  --u-danger-color-weak:         var(--u-red-500);\n  --u-danger-color:              var(--u-red-600);\n  --u-danger-color-strong:       var(--u-red-700);\n  /* ==========================================================================\n     Radius Scale — 모서리 반경\n     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).\n     ========================================================================== */\n  --u-radius-none:   0;\n  --u-radius-sm:     3px;\n  --u-radius-md:     4px;\n  --u-radius-lg:     6px;\n  --u-radius-xl:     8px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n  --u-txt-color-hover:       var(--u-primary-color);\n  --u-txt-color-active:      var(--u-primary-color);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-primary-color-strong);\n  --u-tooltip-txt-color:     var(--u-neutral-100);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-800);\n  --u-icon-color-inverse:    var(--u-neutral-100);\n  --u-icon-color-hover:      var(--u-primary-color);\n  --u-icon-color-active:     var(--u-primary-color);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-300);\n  --u-border-color-strong:   var(--u-neutral-500);\n  --u-border-color-hover:    var(--u-neutral-500);\n\n  --u-input-border-color:         var(--u-neutral-400);\n  --u-input-border-color-hover:   var(--u-neutral-500);\n  --u-input-border-color-focus:   var(--u-primary-color);\n  --u-input-border-color-invalid: var(--u-danger-color);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-100);\n  --u-bg-color-inverse:      var(--u-neutral-0);\n  --u-bg-color-hover:        var(--u-neutral-300);\n  --u-bg-color-active:       var(--u-neutral-400);\n  --u-bg-color-disabled:     var(--u-neutral-100);\n  \n  --u-input-bg-color:        var(--u-neutral-200);\n  --u-panel-bg-color:        var(--u-neutral-200);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-500);\n  --u-scrollbar-color-hover: var(--u-neutral-600);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
 //#endregion
 export { dark_css_default as default };

package/dist/_virtual/_glob-assets_raw/light.css.637cb2f8.js

@@ -1,4 +1,4 @@
 //#region \0glob-assets_raw/light.css.637cb2f8
-var light_css_default = ":root {\n  color-scheme: light;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #FFFFFF;\n  --u-neutral-50:    #FAFAFA;\n  --u-neutral-100:   #F5F5F5;\n  --u-neutral-200:   #EEEEEE;\n  --u-neutral-300:   #E0E0E0;\n  --u-neutral-400:   #BDBDBD;\n  --u-neutral-500:   #9E9E9E;\n  --u-neutral-600:   #757575;\n  --u-neutral-700:   #616161;\n  --u-neutral-800:   #424242;\n  --u-neutral-900:   #212121;\n  --u-neutral-1000:  #000000;\n\n  /* Blue Colors */\n  --u-blue-0:        #E3F2FD;\n  --u-blue-100:      #BBDEFB;\n  --u-blue-200:      #90CAF9;\n  --u-blue-300:      #64B5F6;\n  --u-blue-400:      #42A5F5;\n  --u-blue-500:      #2196F3;\n  --u-blue-600:      #1E88E5;\n  --u-blue-700:      #1976D2;\n  --u-blue-800:      #1565C0;\n  --u-blue-900:      #0D47A1;\n  --u-blue-1000:     #062A5E;\n\n  /* Green Colors */\n  --u-green-0:       #E8F5E9;\n  --u-green-100:     #C8E6C9;\n  --u-green-200:     #A5D6A7;\n  --u-green-300:     #81C784;\n  --u-green-400:     #66BB6A;\n  --u-green-500:     #4CAF50;\n  --u-green-600:     #43A047;\n  --u-green-700:     #388E3C;\n  --u-green-800:     #2E7D32;\n  --u-green-900:     #1B5E20;\n  --u-green-1000:    #0F3A12;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #FFFDE7;\n  --u-yellow-100:    #FFF9C4;\n  --u-yellow-200:    #FFF59D;\n  --u-yellow-300:    #FFF176;\n  --u-yellow-400:    #FFEE58;\n  --u-yellow-500:    #FFEB3B;\n  --u-yellow-600:    #FDD835;\n  --u-yellow-700:    #FBC02D;\n  --u-yellow-800:    #F9A825;\n  --u-yellow-900:    #F57F17;\n  --u-yellow-1000:   #8A4A00;\n\n  /* Red Colors */\n  --u-red-0:         #FFEBEE;\n  --u-red-100:       #FFCDD2;\n  --u-red-200:       #EF9A9A;\n  --u-red-300:       #E57373;\n  --u-red-400:       #EF5350;\n  --u-red-500:       #F44336;\n  --u-red-600:       #E53935;\n  --u-red-700:       #D32F2F;\n  --u-red-800:       #C62828;\n  --u-red-900:       #B71C1C;\n  --u-red-1000:      #6B0F0F;\n\n  /* Orange Colors */\n  --u-orange-0:      #FFF3E0;\n  --u-orange-100:    #FFE0B2;\n  --u-orange-200:    #FFCC80;\n  --u-orange-300:    #FFB74D;\n  --u-orange-400:    #FFA726;\n  --u-orange-500:    #FF9800;\n  --u-orange-600:    #FB8C00;\n  --u-orange-700:    #F57C00;\n  --u-orange-800:    #EF6C00;\n  --u-orange-900:    #E65100;\n  --u-orange-1000:   #8C3100;\n\n  /* Teal Colors */\n  --u-teal-0:        #E0F2F1;\n  --u-teal-100:      #B2DFDB;\n  --u-teal-200:      #80CBC4;\n  --u-teal-300:      #4DB6AC;\n  --u-teal-400:      #26A69A;\n  --u-teal-500:      #009688;\n  --u-teal-600:      #00897B;\n  --u-teal-700:      #00796B;\n  --u-teal-800:      #00695C;\n  --u-teal-900:      #004D40;\n  --u-teal-1000:     #002E26;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #E0F7FA;\n  --u-cyan-100:      #B2EBF2;\n  --u-cyan-200:      #80DEEA;\n  --u-cyan-300:      #4DD0E1;\n  --u-cyan-400:      #26C6DA;\n  --u-cyan-500:      #00BCD4;\n  --u-cyan-600:      #00ACC1;\n  --u-cyan-700:      #0097A7;\n  --u-cyan-800:      #00838F;\n  --u-cyan-900:      #006064;\n  --u-cyan-1000:     #003A3D;\n\n  /* Purple Colors */\n  --u-purple-0:      #F3E5F5;\n  --u-purple-100:    #E1BEE7;\n  --u-purple-200:    #CE93D8;\n  --u-purple-300:    #BA68C8;\n  --u-purple-400:    #AB47BC;\n  --u-purple-500:    #9C27B0;\n  --u-purple-600:    #8E24AA;\n  --u-purple-700:    #7B1FA2;\n  --u-purple-800:    #6A1B9A;\n  --u-purple-900:    #4A148C;\n  --u-purple-1000:   #2C0B54;\n\n  /* Pink Colors */\n  --u-pink-0:        #FCE4EC;\n  --u-pink-100:      #F8BBD0;\n  --u-pink-200:      #F48FB1;\n  --u-pink-300:      #F06292;\n  --u-pink-400:      #EC407A;\n  --u-pink-500:      #E91E63;\n  --u-pink-600:      #D81B60;\n  --u-pink-700:      #C2185B;\n  --u-pink-800:      #AD1457;\n  --u-pink-900:      #880E4F;\n  --u-pink-1000:     #520830;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\n  --u-txt-color-hover:       var(--u-blue-600);\n  --u-txt-color-active:      var(--u-blue-600);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  --u-txt-color-weak:        var(--u-neutral-500);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-blue-700);\n  --u-tooltip-txt-color:     var(--u-neutral-0);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-700);\n  --u-icon-color-inverse:    var(--u-neutral-0);\n  --u-icon-color-hover:      var(--u-blue-600);\n  --u-icon-color-active:     var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-400);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-300);\n  --u-border-color-weak:     var(--u-neutral-200);\n  --u-border-color-strong:   var(--u-neutral-400);\n\n  --u-input-border-color:         var(--u-neutral-300);\n  --u-input-border-color-hover:   var(--u-neutral-400);\n  --u-input-border-color-focus:   var(--u-blue-600);\n  --u-input-border-color-invalid: var(--u-red-600);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-0);\n  --u-bg-color-inverse:      var(--u-neutral-900);\n  --u-bg-color-hover:        var(--u-neutral-100);\n  --u-bg-color-active:       var(--u-neutral-200);\n  --u-bg-color-disabled:     var(--u-neutral-50);\n \n  --u-input-bg-color:        var(--u-neutral-0);\n  --u-panel-bg-color:        var(--u-neutral-0);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-400);\n  --u-scrollbar-color-hover: var(--u-neutral-500);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
+var light_css_default = ":root {\n  color-scheme: light;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #FFFFFF;\n  --u-neutral-50:    #FAFAFA;\n  --u-neutral-100:   #F5F5F5;\n  --u-neutral-200:   #EEEEEE;\n  --u-neutral-300:   #E0E0E0;\n  --u-neutral-400:   #BDBDBD;\n  --u-neutral-500:   #9E9E9E;\n  --u-neutral-600:   #757575;\n  --u-neutral-700:   #616161;\n  --u-neutral-800:   #424242;\n  --u-neutral-900:   #212121;\n  --u-neutral-1000:  #000000;\n\n  /* Blue Colors */\n  --u-blue-0:        #E3F2FD;\n  --u-blue-100:      #BBDEFB;\n  --u-blue-200:      #90CAF9;\n  --u-blue-300:      #64B5F6;\n  --u-blue-400:      #42A5F5;\n  --u-blue-500:      #2196F3;\n  --u-blue-600:      #1E88E5;\n  --u-blue-700:      #1976D2;\n  --u-blue-800:      #1565C0;\n  --u-blue-900:      #0D47A1;\n  --u-blue-1000:     #062A5E;\n\n  /* Green Colors */\n  --u-green-0:       #E8F5E9;\n  --u-green-100:     #C8E6C9;\n  --u-green-200:     #A5D6A7;\n  --u-green-300:     #81C784;\n  --u-green-400:     #66BB6A;\n  --u-green-500:     #4CAF50;\n  --u-green-600:     #43A047;\n  --u-green-700:     #388E3C;\n  --u-green-800:     #2E7D32;\n  --u-green-900:     #1B5E20;\n  --u-green-1000:    #0F3A12;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #FFFDE7;\n  --u-yellow-100:    #FFF9C4;\n  --u-yellow-200:    #FFF59D;\n  --u-yellow-300:    #FFF176;\n  --u-yellow-400:    #FFEE58;\n  --u-yellow-500:    #FFEB3B;\n  --u-yellow-600:    #FDD835;\n  --u-yellow-700:    #FBC02D;\n  --u-yellow-800:    #F9A825;\n  --u-yellow-900:    #F57F17;\n  --u-yellow-1000:   #8A4A00;\n\n  /* Red Colors */\n  --u-red-0:         #FFEBEE;\n  --u-red-100:       #FFCDD2;\n  --u-red-200:       #EF9A9A;\n  --u-red-300:       #E57373;\n  --u-red-400:       #EF5350;\n  --u-red-500:       #F44336;\n  --u-red-600:       #E53935;\n  --u-red-700:       #D32F2F;\n  --u-red-800:       #C62828;\n  --u-red-900:       #B71C1C;\n  --u-red-1000:      #6B0F0F;\n\n  /* Orange Colors */\n  --u-orange-0:      #FFF3E0;\n  --u-orange-100:    #FFE0B2;\n  --u-orange-200:    #FFCC80;\n  --u-orange-300:    #FFB74D;\n  --u-orange-400:    #FFA726;\n  --u-orange-500:    #FF9800;\n  --u-orange-600:    #FB8C00;\n  --u-orange-700:    #F57C00;\n  --u-orange-800:    #EF6C00;\n  --u-orange-900:    #E65100;\n  --u-orange-1000:   #8C3100;\n\n  /* Teal Colors */\n  --u-teal-0:        #E0F2F1;\n  --u-teal-100:      #B2DFDB;\n  --u-teal-200:      #80CBC4;\n  --u-teal-300:      #4DB6AC;\n  --u-teal-400:      #26A69A;\n  --u-teal-500:      #009688;\n  --u-teal-600:      #00897B;\n  --u-teal-700:      #00796B;\n  --u-teal-800:      #00695C;\n  --u-teal-900:      #004D40;\n  --u-teal-1000:     #002E26;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #E0F7FA;\n  --u-cyan-100:      #B2EBF2;\n  --u-cyan-200:      #80DEEA;\n  --u-cyan-300:      #4DD0E1;\n  --u-cyan-400:      #26C6DA;\n  --u-cyan-500:      #00BCD4;\n  --u-cyan-600:      #00ACC1;\n  --u-cyan-700:      #0097A7;\n  --u-cyan-800:      #00838F;\n  --u-cyan-900:      #006064;\n  --u-cyan-1000:     #003A3D;\n\n  /* Purple Colors */\n  --u-purple-0:      #F3E5F5;\n  --u-purple-100:    #E1BEE7;\n  --u-purple-200:    #CE93D8;\n  --u-purple-300:    #BA68C8;\n  --u-purple-400:    #AB47BC;\n  --u-purple-500:    #9C27B0;\n  --u-purple-600:    #8E24AA;\n  --u-purple-700:    #7B1FA2;\n  --u-purple-800:    #6A1B9A;\n  --u-purple-900:    #4A148C;\n  --u-purple-1000:   #2C0B54;\n\n  /* Pink Colors */\n  --u-pink-0:        #FCE4EC;\n  --u-pink-100:      #F8BBD0;\n  --u-pink-200:      #F48FB1;\n  --u-pink-300:      #F06292;\n  --u-pink-400:      #EC407A;\n  --u-pink-500:      #E91E63;\n  --u-pink-600:      #D81B60;\n  --u-pink-700:      #C2185B;\n  --u-pink-800:      #AD1457;\n  --u-pink-900:      #880E4F;\n  --u-pink-1000:     #520830;\n\n  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n     ========================================================================== */\n\n  /* primary — 브랜드 · 강조 · 포커스 · 링크 */\n  --u-primary-color-weakest:     var(--u-blue-200);\n  --u-primary-color-weaker:      var(--u-blue-300);\n  --u-primary-color-weak:        var(--u-blue-500);\n  --u-primary-color:             var(--u-blue-600);\n  --u-primary-color-strong:      var(--u-blue-700);\n\n  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */\n  --u-info-color-weakest:        var(--u-blue-200);\n  --u-info-color-weaker:         var(--u-blue-300);\n  --u-info-color-weak:           var(--u-blue-500);\n  --u-info-color:                var(--u-blue-600);\n  --u-info-color-strong:         var(--u-blue-700);\n\n  /* success — 성공 · 완료 */\n  --u-success-color-weakest:     var(--u-green-200);\n  --u-success-color-weaker:      var(--u-green-300);\n  --u-success-color-weak:        var(--u-green-500);\n  --u-success-color:             var(--u-green-600);\n  --u-success-color-strong:      var(--u-green-700);\n\n  /* warning — 주의 */\n  --u-warning-color-weakest:     var(--u-yellow-200);\n  --u-warning-color-weaker:      var(--u-yellow-300);\n  --u-warning-color-weak:        var(--u-yellow-500);\n  --u-warning-color:             var(--u-yellow-600);\n  --u-warning-color-strong:      var(--u-yellow-700);\n\n  /* danger — 오류 · 위험 · 유효성 실패 */\n  --u-danger-color-weakest:      var(--u-red-200);\n  --u-danger-color-weaker:       var(--u-red-300);\n  --u-danger-color-weak:         var(--u-red-500);\n  --u-danger-color:              var(--u-red-600);\n  --u-danger-color-strong:       var(--u-red-700);\n  /* ==========================================================================\n     Radius Scale — 모서리 반경\n     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).\n     ========================================================================== */\n  --u-radius-none:   0;\n  --u-radius-sm:     3px;\n  --u-radius-md:     4px;\n  --u-radius-lg:     6px;\n  --u-radius-xl:     8px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\n  --u-txt-color-hover:       var(--u-primary-color);\n  --u-txt-color-active:      var(--u-primary-color);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  --u-txt-color-weak:        var(--u-neutral-500);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-primary-color-strong);\n  --u-tooltip-txt-color:     var(--u-neutral-0);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-700);\n  --u-icon-color-inverse:    var(--u-neutral-0);\n  --u-icon-color-hover:      var(--u-primary-color);\n  --u-icon-color-active:     var(--u-primary-color);\n  --u-icon-color-disabled:   var(--u-neutral-400);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-300);\n  --u-border-color-weak:     var(--u-neutral-200);\n  --u-border-color-strong:   var(--u-neutral-400);\n  --u-border-color-hover:    var(--u-neutral-400);\n\n  --u-input-border-color:         var(--u-neutral-300);\n  --u-input-border-color-hover:   var(--u-neutral-400);\n  --u-input-border-color-focus:   var(--u-primary-color);\n  --u-input-border-color-invalid: var(--u-danger-color);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-0);\n  --u-bg-color-inverse:      var(--u-neutral-900);\n  --u-bg-color-hover:        var(--u-neutral-100);\n  --u-bg-color-active:       var(--u-neutral-200);\n  --u-bg-color-disabled:     var(--u-neutral-50);\n \n  --u-input-bg-color:        var(--u-neutral-0);\n  --u-panel-bg-color:        var(--u-neutral-0);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-400);\n  --u-scrollbar-color-hover: var(--u-neutral-500);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
 //#endregion
 export { light_css_default as default };

package/dist/components/UElement.d.ts

@@ -1,10 +1,7 @@
 import { LitElement, CSSResultGroup, RenderOptions } from 'lit';
-/**
- * 모든 UI 컴포넌트의 기반 클래스.
- * LitElement를 확장하여 이벤트 발행 및 렌더 교체 헬퍼를 제공합니다.
- */
 export declare class UElement extends LitElement {
     static styles: CSSResultGroup;
+    connectedCallback(): void;
     /**
      * 커스텀 이벤트를 생성하여 발행합니다.
      * 기본적으로 bubbles, composed, cancelable이 활성화됩니다.

package/dist/components/UElement.js

@@ -1,14 +1,13 @@
 import { styles } from "./UElement.styles.js";
 import { LitElement, render } from "lit";
 //#region src/components/UElement.ts
-/**
-* 모든 UI 컴포넌트의 기반 클래스.
-* LitElement를 확장하여 이벤트 발행 및 렌더 교체 헬퍼를 제공합니다.
-*/
 var UElement = class extends LitElement {
 	static {
 		this.styles = styles;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
 	/**
 	* 커스텀 이벤트를 생성하여 발행합니다.
 	* 기본적으로 bubbles, composed, cancelable이 활성화됩니다.

package/dist/components/UElement.styles.js

@@ -17,11 +17,11 @@ var styles = css`
 
   /* Focus Styles */
   :host(:focus-visible) {
-    outline: 2px solid var(--u-blue-500);
+    outline: 2px solid var(--u-primary-color-weak);
     outline-offset: 2px;
   }
   :focus-visible {
-    outline: 2px solid var(--u-blue-500);
+    outline: 2px solid var(--u-primary-color-weak);
     outline-offset: 2px;
   }
 

package/dist/components/UFloatingElement.js

@@ -1,8 +1,8 @@
 import { UElement } from "./UElement.js";
 import { getParentElement, querySelectorAllWithin } from "../utilities/elements.js";
 import { styles } from "./UFloatingElement.styles.js";
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { property, state } from "lit/decorators.js";
 import { arrow, autoPlacement, autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
 //#region src/components/UFloatingElement.ts

package/dist/components/UFormControlElement.js

@@ -1,6 +1,6 @@
 import { UElement } from "./UElement.js";
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UFormControlElement.styles.js";
 import { property } from "lit/decorators.js";
 //#region src/components/UFormControlElement.ts

package/dist/components/UOverlayElement.d.ts

@@ -6,6 +6,9 @@ export type CloseOnPolicy = 'escape' | 'backdrop' | 'button';
 export type OverlayMode = 'modal' | 'non-modal';
 /**
  * UOverlayElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트의 기본 클래스입니다.
+ *
+ * @event show - 오버레이가 표시되기 직전 발생합니다. 핸들러에서 취소하면 표시되지 않습니다.
+ * @event hide - 오버레이가 숨겨지기 직전 발생합니다. 핸들러에서 취소하면 닫히지 않습니다.
  */
 export declare abstract class UOverlayElement extends UElement {
     static styles: CSSResultGroup;

package/dist/components/UOverlayElement.js

@@ -1,6 +1,6 @@
 import { UElement } from "./UElement.js";
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { OverlayManager } from "../utilities/OverlayManager.js";
 import { arrayAttrConverter } from "../utilities/converters.js";
 import { styles } from "./UOverlayElement.styles.js";
@@ -9,6 +9,9 @@ import { createFocusTrap } from "focus-trap";
 //#region src/components/UOverlayElement.ts
 /**
 * UOverlayElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트의 기본 클래스입니다.
+*
+* @event show - 오버레이가 표시되기 직전 발생합니다. 핸들러에서 취소하면 표시되지 않습니다.
+* @event hide - 오버레이가 숨겨지기 직전 발생합니다. 핸들러에서 취소하면 닫히지 않습니다.
 */
 var UOverlayElement = class extends UElement {
 	constructor(..._args) {

package/dist/components/alert/UAlert.d.ts

@@ -21,6 +21,9 @@ export type AlertVariant = "solid" | "filled" | "outlined" | "glass";
  * @cssprop --alert-background-color - 배경색 (status에 따라 자동 설정, variant="outlined"는 transparent)
  * @cssprop --alert-border-color - 테두리 색상 (status에 따라 자동 설정, variant="filled"는 transparent)
  * @cssprop --alert-icon-color - 아이콘 색상 (status에 따라 자동 설정)
+ * @cssprop --alert-padding-block - 세로 여백
+ * @cssprop --alert-padding-inline - 가로 여백
+ * @cssprop --alert-border-width - 테두리 두께 (variant 이 정한다)
  *
  * @event show - Alert가 표시되기 직전 발생 (취소 가능)
  * @event hide - Alert가 닫히기 직전 발생 (취소 가능)

package/dist/components/alert/UAlert.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import { styles } from "./UAlert.styles.js";

package/dist/components/alert/UAlert.styles.js

@@ -8,24 +8,24 @@ var styles = css`
     --alert-background-color: var(--u-neutral-200);
   }
   :host([status="error"]) {
-    --alert-icon-color: var(--u-red-700);
-    --alert-border-color: var(--u-red-300);
-    --alert-background-color: var(--u-red-200);
+    --alert-icon-color: var(--u-danger-color-strong);
+    --alert-border-color: var(--u-danger-color-weaker);
+    --alert-background-color: var(--u-danger-color-weakest);
   }
   :host([status="warning"]) {
-    --alert-icon-color: var(--u-yellow-700);
-    --alert-border-color: var(--u-yellow-300);
-    --alert-background-color: var(--u-yellow-200);
+    --alert-icon-color: var(--u-warning-color-strong);
+    --alert-border-color: var(--u-warning-color-weaker);
+    --alert-background-color: var(--u-warning-color-weakest);
   }
   :host([status="info"]) {
-    --alert-icon-color: var(--u-blue-700);
-    --alert-border-color: var(--u-blue-300);
-    --alert-background-color: var(--u-blue-200);
+    --alert-icon-color: var(--u-info-color-strong);
+    --alert-border-color: var(--u-info-color-weaker);
+    --alert-background-color: var(--u-info-color-weakest);
   }
   :host([status="success"]) {
-    --alert-icon-color: var(--u-green-700);
-    --alert-border-color: var(--u-green-300);
-    --alert-background-color: var(--u-green-200);
+    --alert-icon-color: var(--u-success-color-strong);
+    --alert-border-color: var(--u-success-color-weaker);
+    --alert-background-color: var(--u-success-color-weakest);
   }
   :host([status="notice"]) {
     --alert-icon-color: var(--u-neutral-700);
@@ -39,7 +39,7 @@ var styles = css`
     min-width: 200px;
     max-width: 100%;
     max-height: 50vh;
-    border-radius: 8px;
+    border-radius: var(--u-radius-xl);
     box-shadow: 0 4px 12px var(--u-shadow-color-normal);
     
     opacity: 0;
@@ -61,32 +61,42 @@ var styles = css`
 
   /* === Variant Styles === */
   :host([variant="solid"]) {
-    border: 1px solid var(--alert-border-color);
+    --alert-border-width: 1px;
     background-color: var(--alert-background-color);
   }
   :host([variant="filled"]) {
-    border: 1px solid transparent;
+    --alert-border-width: 1px;
     background-color: var(--alert-background-color);
   }
+  /* filled 의 테두리는 레이아웃 정합용이라 항상 투명하다 — 색 훅이 도달하면 안 된다. */
+  :host([variant="filled"]) .container {
+    border-color: transparent;
+  }
   :host([variant="outlined"]) {
-    border: 1px solid var(--alert-border-color);
+    --alert-border-width: 1px;
     background-color: transparent;
   }
   /* From https://css.glass */
   :host([variant="glass"]) {
+    --alert-border-width: 1px;
+    --alert-border-color: rgba(255, 255, 255, 0.3);
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
   }
 
+  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
   .container {
+    box-sizing: border-box;
+    width: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    padding: 12px 16px;
+    padding: var(--alert-padding-block, 12px) var(--alert-padding-inline, 16px);
+    border: var(--alert-border-width, 0) solid var(--alert-border-color);
+    border-radius: inherit;
   }
 
   .header {
@@ -112,7 +122,7 @@ var styles = css`
     flex-shrink: 0;
     padding: 4px;
     font-size: inherit;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
 
   .content {

package/dist/components/avatar/UAvatar.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UAvatar.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/avatar/UAvatar.styles.js

@@ -17,10 +17,10 @@ var styles = css`
   }
 
   :host([shape="circle"]) {
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
   }
   :host([shape="square"]) {
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
   }
   :host([shape="rounded"]) {
     border-radius: 0.375em;

package/dist/components/badge/UBadge.d.ts

@@ -10,6 +10,8 @@ export type BadgeAnchor = "top-right" | "top-left" | "bottom-right" | "bottom-le
  * @slot prefix - 배지 앞에 배치할 컨텐츠
  * @slot - 배지의 주요 컨텐츠 (텍스트, 아이콘)
  * @slot suffix - 배지 뒤에 배치할 컨텐츠
+ * @cssprop --badge-padding-block - 세로 여백 (`variant="dot"` 은 콘텐츠를 렌더하지 않아 적용되지 않는다)
+ * @cssprop --badge-padding-inline - 가로 여백 (`variant="dot"` 은 콘텐츠를 렌더하지 않아 적용되지 않는다)
  */
 export declare class UBadge extends UElement {
     static styles: import('lit').CSSResultGroup[];