@iyulab/components 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [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

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` 등)로 사용할 수 있습니다.

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  /* 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  --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-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}";
 //#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  /* 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  --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-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}";
 //#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/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.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/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/badge/UBadge.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 "./UBadge.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/breadcrumb/UBreadcrumb.js

@@ -1,5 +1,5 @@
 import { UElement } from "../UElement.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { styles } from "./UBreadcrumb.styles.js";
 import { html } from "lit";

package/dist/components/breadcrumb-item/UBreadcrumbItem.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 "./UBreadcrumbItem.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/button/UButton.d.ts

@@ -18,6 +18,22 @@ export type ButtonSize = "sm" | "md" | "lg";
  * @csspart mask - 로딩 마스크 영역
  *
  * @cssprop --u-primary-color - color="neutral"일 때 버튼 기준색. 지정 시 hover/active/surface 톤이 color-mix()로 자동 파생.
+ * @cssprop --btn-padding-block - 내부 버튼의 상하 여백 (기본: 0.5em)
+ * @cssprop --btn-padding-inline - 내부 버튼의 좌우 여백 (기본: 0.5em, variant="link"는 0)
+ * @cssprop --btn-border-color - 내부 버튼의 테두리 색. variant/hover/active 규칙이 이 값을 정한다
+ *   (기본: transparent)
+ * @cssprop --btn-color - 버튼의 기준색. 아래 파생 토큰이 전부 이 값에서 color-mix()로 계산된다 —
+ *   보통 이것 하나만 덮으면 된다.
+ * @cssprop --btn-color-hover - solid 배경 hover (기본: --btn-color 85% + black)
+ * @cssprop --btn-color-active - solid 배경 active (기본: --btn-color 70% + black)
+ * @cssprop --btn-color-surface - surface 배경 (기본: --btn-color 12% + 배경색)
+ * @cssprop --btn-color-surface-hover - surface 배경 hover (기본: 22%)
+ * @cssprop --btn-color-surface-active - surface 배경 active (기본: 32%)
+ * @cssprop --btn-color-border - 테두리 (기본: --btn-color 45% + 배경색)
+ * @cssprop --btn-color-border-hover - 테두리 hover (기본: 60%)
+ * @cssprop --btn-color-border-active - 테두리 active (기본: 75%)
+ * @cssprop --btn-color-outline-hover - outline 배경 hover (기본: 6%)
+ * @cssprop --btn-color-outline-active - outline 배경 active (기본: 12%)
  */
 export declare class UButton extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/button/UButton.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 "../spinner/USpinner.js";
 import { styles } from "./UButton.styles.js";
 import { html } from "lit";

package/dist/components/button/UButton.styles.js

@@ -23,8 +23,6 @@ var styles = css`
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
-    padding: 0.5em;
-    border: 1px solid transparent;
     border-radius: 6px;
     background-color: transparent;
 
@@ -83,37 +81,37 @@ var styles = css`
   :host([variant="solid"]) {
     color: #fff;
     background-color: var(--btn-color);
-    border-color: var(--btn-color);
+    --btn-border-color: var(--btn-color);
   }
   :host([variant="solid"]:hover) {
     background-color: var(--btn-color-hover);
-    border-color: var(--btn-color-hover);
+    --btn-border-color: var(--btn-color-hover);
   }
   :host([variant="solid"]:active) {
     background-color: var(--btn-color-active);
-    border-color: var(--btn-color-active);
+    --btn-border-color: var(--btn-color-active);
   }
 
   /* surface: 채우기 + 경계 */
   :host([variant="surface"]) {
     color: var(--u-txt-color);
     background-color: var(--btn-color-surface);
-    border-color: var(--btn-color-border);
+    --btn-border-color: var(--btn-color-border);
   }
   :host([variant="surface"]:hover) {
     background-color: var(--btn-color-surface-hover);
-    border-color: var(--btn-color-border-hover);
+    --btn-border-color: var(--btn-color-border-hover);
   }
   :host([variant="surface"]:active) {
     background-color: var(--btn-color-surface-active);
-    border-color: var(--btn-color-border-active);
+    --btn-border-color: var(--btn-color-border-active);
   }
 
   /* filled: 채우기만 */
   :host([variant="filled"]) {
     color: var(--u-txt-color);
     background-color: var(--btn-color-surface);
-    border-color: transparent;
+    --btn-border-color: transparent;
   }
   :host([variant="filled"]:hover) {
     background-color: var(--btn-color-surface-hover);
@@ -125,22 +123,22 @@ var styles = css`
   /* outlined: 경계만 */
   :host([variant="outlined"]) {
     color: var(--u-txt-color);
-    border-color: var(--btn-color-border);
+    --btn-border-color: var(--btn-color-border);
     background-color: transparent;
   }
   :host([variant="outlined"]:hover) {
-    border-color: var(--btn-color-border-hover);
+    --btn-border-color: var(--btn-color-border-hover);
     background-color: var(--btn-color-outline-hover);
   }
   :host([variant="outlined"]:active) {
-    border-color: var(--btn-color-border-active);
+    --btn-border-color: var(--btn-color-border-active);
     background-color: var(--btn-color-outline-active);
   }
 
   /* ghost: transparent */
   :host([variant="ghost"]) {
     color: var(--u-txt-color);
-    border-color: transparent;
+    --btn-border-color: transparent;
     background-color: transparent;
   }
   :host([variant="ghost"]:hover) {
@@ -153,10 +151,9 @@ var styles = css`
   /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
   :host([variant="link"]) {
     color: var(--u-blue-500, #3b82f6);
-    border-color: transparent;
+    --btn-border-color: transparent;
     background-color: transparent;
-    padding-left: 0;
-    padding-right: 0;
+    --btn-padding-inline: 0;
   }
   :host([variant="link"]:hover) {
     color: var(--u-blue-600, #2563eb);
@@ -176,14 +173,28 @@ var styles = css`
     color: var(--btn-color-active);
   }
 
-  /* === Inner === */
+  /* === Inner ===
+   *
+   * 여백·테두리는 내부 요소가 그린다. :host 에 두면 소비 앱의 CSS 리셋
+   * (* { padding:0; border:0 } — Tailwind preflight 등 사실상 표준 관행)에 지워진다.
+   * 호스트 요소에 대해서는 문서 작성자 스타일이 섀도의 :host 규칙을 이기기 때문이며,
+   * 그 결과 버튼이 글자 높이만 남는다(에러는 없다). 내부 요소는 문서 리셋의 사정권 밖이다.
+   *
+   * 테두리 색은 여전히 :host([variant=...]) 가 정한다 — --btn-border-color 로 내려보내므로
+   * variant/hover/active 규칙은 호스트에 그대로 남는다.
+   */
   button, a {
     all: unset;
+    box-sizing: border-box;   /* all:unset 이 content-box 로 되돌리므로 다시 지정 */
     width: 100%;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+
+    padding: var(--btn-padding-block, 0.5em) var(--btn-padding-inline, 0.5em);
+    border: 1px solid var(--btn-border-color, transparent);
+    border-radius: inherit;
   }
   a {
     text-decoration: none;

package/dist/components/button-group/UButtonGroup.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 { UButton } from "../button/UButton.js";
 import { UIconButton } from "../icon-button/UIconButton.js";
 import { styles } from "./UButtonGroup.styles.js";

package/dist/components/card/UCard.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 "./UCard.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/carousel/UCarousel.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 "./UCarousel.styles.js";

package/dist/components/checkbox/UCheckbox.d.ts

@@ -19,6 +19,8 @@ export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan
  * @cssprop --checkbox-background-color - 체크박스 배경색 (filled variant)
  *
  * @event change - 체크 상태 변경 시 발생
+ *
+ * @cssprop --checkbox-fill-color - 체크된 상태의 채움색 (기본: --u-primary-color, 미지정 시 blue-600)
  */
 export declare class UCheckbox extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/checkbox/UCheckbox.js

@@ -1,5 +1,5 @@
-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 { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
 import { Locale } from "../../utilities/Locale.js";

package/dist/components/chip/UChip.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 "../tooltip/UTooltip.js";

package/dist/components/copy-button/UCopyButton.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 "../icon-button/UIconButton.js";

package/dist/components/dialog/UDialog.js

@@ -1,5 +1,5 @@
-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 { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";

package/dist/components/divider/UDivider.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 "./UDivider.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/drawer/UDrawer.d.ts

@@ -13,7 +13,7 @@ export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
  * @csspart body - 본문 영역
  * @csspart close-btn - 닫기 버튼
  *
- * @cssproperty [--drawer-size=28rem] - 드로어 패널의 슬라이드 축 방향 크기.
+ * @cssprop --drawer-size - 드로어 패널의 슬라이드 축 방향 크기 (기본값: 좌우 28rem / 상하 16rem).
  *   좌우(left/right) placement는 너비, 상하(top/bottom) placement는 높이로 적용된다(상하 기본 16rem).
  *   화면이 좁으면 max-width/max-height:100%로 자동 축소된다.
  */

package/dist/components/drawer/UDrawer.js

@@ -1,5 +1,5 @@
-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 { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";

package/dist/components/field/UField.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 "./UField.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/form/UForm.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 { UFormControlElement } from "../UFormControlElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UForm.styles.js";

package/dist/components/icon/UIcon.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 { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
 import { styles } from "./UIcon.styles.js";
 import { nothing } from "lit";

package/dist/components/icon-button/UIconButton.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 "../tooltip/UTooltip.js";

package/dist/components/input/UInput.d.ts

@@ -23,6 +23,10 @@ export type InputVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  *    docs/theming.md 참고)
  * @csspart popover - 드롭다운 팝오버 요소
  *
+ * @cssprop --u-input-display - 호스트의 display (기본값: inline-block). 폼/그리드 셀에서
+ *   컨테이너 폭을 채우려면 `block`으로 지정한다.
+ * @cssprop --u-input-width - 호스트의 width (기본값: auto). flex 컨테이너처럼 block만으로는
+ *   늘어나지 않는 맥락에서 `100%`로 지정한다.
  * @cssprop --input-popover-width - 드롭다운 팝오버의 너비 (기본값: 앵커(트리거) 너비)
  * @cssprop --input-popover-min-height - 드롭다운 팝오버의 최소 높이 (기본값: 0px)
  * @cssprop --input-popover-max-height - 드롭다운 팝오버의 최대 높이 (기본값: 50vh)