@iyulab/components 1.43.0 → 1.44.1

package/CHANGELOG.md

@@ -1,5 +1,99 @@
 # Changelog
 
+## [1.44.1] - 2026-09-23
+
+### Fixed
+
+- 🔴 **A closed popover no longer consumes `Escape`.** A popover with `escape` in its `dismiss`
+  list listens on the document from the moment it connects, and it called `preventDefault()`
+  whether or not it was open. Every form control carries a popover, so on any real screen a
+  document-level `Escape` always arrived already `defaultPrevented` — and `defaultPrevented` is
+  exactly the signal you need to tell whether an inner layer handled the key. Now only an open
+  popover consumes it. A popover waiting on `showDelay` still has its pending show cancelled, but
+  the key is not consumed because nothing was visible yet. A closed popover also ignores document
+  clicks instead of running `hide()` on every click.
+- **`u-input` no longer consumes `Escape` while its suggestion list is closed.**
+- **`u-select` returns focus to the combobox when its list closes with focus inside it.** Closing
+  the list with `Escape` or choosing an option with the keyboard left focus inside the hidden
+  list, where keyboard users lost their place and the next `Escape` was swallowed again. Closing
+  by clicking elsewhere does not move focus.
+- **Dialogs and drawers ignore an `Escape` that something inside them already consumed.** With an
+  open list inside a dialog, one press used to close both. Now the first press closes the list and
+  the second closes the dialog — one press, one layer.
+- 🔴 **`disabled` is now exposed to assistive technology on controls whose role sits on a
+  non-native node.** These controls blocked interaction but never said so: screen readers
+  announced nothing, and test tools that check actionability treated the control as enabled,
+  clicked it, and had the click silently swallowed. `aria-disabled="true"` is now set on the
+  `combobox` of `u-select` and `u-date-picker`, the `radiogroup` of `u-radio` and `u-rating`,
+  the host of `u-menu-item`, `u-tab` and `u-tree-item`, and the link of `u-breadcrumb-item`.
+
+- 🔴 **In dark mode, a `:root` override of the scale tokens now wins, as it does in light.**
+  `dark.css` redeclared radius, spacing, the type scale, motion and fonts — with the same values as
+  `light.css` — under `:root[theme="dark"]`, which outranks `:root`. So every layer that sets those
+  tokens on `:root` (the `@iyulab/enterprise` preset, a brand sheet) lost in dark mode regardless
+  of load order. Colors still switched, so dark mode *looked* fine while the type scale and radius
+  quietly fell back to neutral. Those tokens now sit in a `:root:where([theme="dark"])` block, at
+  the same specificity as `:root`. `dark.css` still defines every token, so a fixed-dark screen
+  that loads only that sheet is unaffected. **No visual change** for anyone not overriding them.
+- 🔴 **`prefers-reduced-motion` is honoured in dark mode.** The durations were among the tokens
+  redeclared at the higher specificity, so `light.css`'s reduced-motion rule lost to them and
+  animations kept running for users who asked for less motion. `dark.css` now carries the same
+  rule for itself.
+
+- **`Dialog.confirm` and `Dialog.prompt` label their buttons in the active locale.** The defaults
+  were the English literals `Cancel` and `Confirm`, so an app that had switched `Locale` got
+  English buttons under a translated message, while every other built-in label in this package
+  already followed the locale. `confirm` and `cancel` are now in all fourteen built-in tables;
+  labels you pass explicitly still win, and English is unchanged.
+
+⚠ **If you close your own panel on `Escape`**, you can now guard it with `event.defaultPrevented`
+the way the platform intends; you no longer need to inspect which popovers are open. **If a test
+locates a control by tag and expects a click on a disabled one to be attempted**, it will now
+wait instead — locate by role.
+
+### Documentation
+
+- The popover and overlay references state the `Escape` contract, with the guard a consumer
+  panel should use. The skill index states where `disabled` is exposed for each control.
+- `docs/theming.md` says which tokens a `:root` override reaches in dark mode, and how to
+  override a color there too.
+
+## [1.44.0] - 2026-09-22
+
+### Fixed
+
+- 🔴 **`Theme.init()` no longer overrides styles the document already has.** The built-in token
+  sheets were appended to the end of `<head>`. A consumer stylesheet declaring the same `--u-*`
+  tokens on `:root` is placed by the bundler while the document parses, so the runtime append
+  always came *after* it — and at equal specificity the later rule wins. The result was that the
+  built-in defaults silently overrode whatever the consumer had set, with no error and no
+  warning. Where the two sheets agreed on some values and differed on others, it read as
+  *partially applied* rather than as ignored, which is harder to notice than an outright failure.
+- **The sheets are a defaults layer, so they now go in front of the document's other styles.**
+  They are inserted ahead of the first `<style>`/`<link rel=stylesheet>` — not pushed past
+  `<meta>` and friends — and their order relative to each other is preserved rather than
+  reversed. If a document has no stylesheets at all, they are appended as before; anything added
+  later still comes after them, which is the point.
+
+⚠ **If you relied on the old behavior** — that is, on the built-in values winning over a sheet
+you loaded yourself — you no longer need to; load order now works the way `:root` at equal
+specificity implies. Nothing changes for consumers who never override these tokens.
+
+### Documentation
+
+- **`docs/theming.md` no longer tells you to sequence your override after `Theme.init()`.** That
+  instruction existed because of the behavior above, and it outlived it by exactly one release
+  otherwise. The Custom Themes section now says a plain static `import` is enough, states what
+  changed for anyone still on an older version, and keeps the one rule that *does* still decide
+  the outcome: specificity. `How Theme Switching Works` says where the sheets are inserted, not
+  just that they are.
+- The same note is in the skill reference for `Theme`, which is where an assistant reads it.
+
+### Notes
+
+- The regression measures computed values in a real browser. Asserting where a node was inserted
+  would describe placement, not the cascade, and the contract here is the cascade.
+
 ## [1.43.0] - 2026-09-22
 
 ### Added

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  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n\n     ★**다만 두 단은 용도가 확정돼 있다** — 대비 요구가 서로 다르기 때문이다.\n        `-color`  = **면**. `--u-*-txt-color` 가 그 위에 얹히므로 on-color 기준 4.5.\n        `-strong` = **글자·아이콘**. `--u-bg-color` 위에 놓이므로 바탕 기준 4.5.\n     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 한 조건으로 합쳐지지만,\n     **다크에서는 정반대 방향**이다(바탕 #121212 · on-color #FFFFFF). 바탕에서 읽히는\n     밝은 단은 흰 글자를 못 받고, 흰 글자를 받는 어두운 단은 바탕에서 안 읽힌다.\n     ⇒ 다크에서 `-color` 와 `-strong` 이 두 단 벌어지는 것이 그 결과다.\n     `tests/build/token-contrast.test.ts` 가 값을 지킨다.\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);  /* 면: 흰 글자 6.09 ✓ */\n  --u-primary-color-strong:      var(--u-blue-800);  /* 글자: 바탕 5.32 ✓ (700 은 4.05 ✗) */\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-800);\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);  /* 면: 흰 글자 6.83 ✓ */\n  --u-danger-color-strong:       var(--u-red-800);  /* 글자: 바탕 4.87 ✓ (700 은 3.67 ✗) */\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  /* ★상단 2단은 **면(surface)용**이다 — 카드·패널·대화상자처럼 큰 사각형은 컨트롤과\n     같은 반경을 쓰면 각져 보인다. 기존 5단은 **컨트롤용**이고 값을 바꾸지 않는다\n     (바꾸면 모든 소비자의 버튼·입력이 동시에 움직인다). */\n  --u-radius-2xl:   12px;\n  --u-radius-3xl:   16px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* ==========================================================================\n     Space Scale — 컨테이너·오버레이의 절대 여백\n     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만\n     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로\n     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.\n     축 구분과 근거는 docs/design-tokens.md 참조.\n     ========================================================================== */\n  --u-space-3xs:  2px;\n  --u-space-2xs:  4px;\n  --u-space-xs:   6px;\n  --u-space-sm:   8px;\n  --u-space-md:  12px;\n  --u-space-lg:  16px;\n  /* ★상단 4단은 **화면 리듬**이다 — 카드 안쪽 여백(20~24)·섹션 간격(24~32)·페이지 여백\n     (32~40). 종전에는 이 구간이 통째로 비어 있어 소비자가 전부 리터럴로 적었고,\n     그래서 앱마다 화면 밀도가 달라졌다. `lg`(16px) 이하는 **요소 사이**, `xl` 이상은\n     **영역 사이**로 나눠 쓴다.\n     ⚠`xs: 6px` 는 4px 격자에서 벗어나 있으나 **바꾸지 않는다** — 이미 배선된 컨트롤\n     여백이 전부 움직인다. 신규 단은 전부 4의 배수로 둔다. */\n  --u-space-xl:  20px;\n  --u-space-2xl: 24px;\n  --u-space-3xl: 32px;\n  --u-space-4xl: 40px;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n\n  /* 유채색 배경 위의 글자 — warning 만 다르다(light.css 참조). */\n  --u-primary-txt-color:     #FFFFFF;\n  --u-info-txt-color:        #FFFFFF;\n  --u-success-txt-color:     #FFFFFF;\n  --u-danger-txt-color:      #FFFFFF;\n  /* ★라이트 시트와 같은 이유로 중립 최상단을 쓴다 — 다크에서는 그 값이 #FFFFFF 라\n     결과가 종전과 같다(4.65 ✓). 리터럴 대신 토큰을 쓰는 이유는 라이트에서 뒤집히기\n     때문이다(#000000). 두 시트가 같은 선언이 되어 어긋날 자리가 없어진다. */\n  --u-warning-txt-color:     var(--u-neutral-1000);\n  --u-txt-color-hover:       var(--u-primary-color-strong);\n  --u-txt-color-active:      var(--u-primary-color-strong);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  /* 라이트와 같은 기준 — 놓이는 모든 면에서 AA. neutral-700(#8A8A8A)은 바탕 5.43 ·\n     올림면(neutral-300) 4.16 · active 면(neutral-400) 3.15 로 미달이었다.\n     neutral-800(#B0B0B0) = 8.64 · 6.62 · 5.01. 본문(neutral-900)과의 대비비 1.46. */\n  --u-txt-color-weak:        var(--u-neutral-800);\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-strong);\n  --u-icon-color-active:     var(--u-primary-color-strong);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Border Colors\n     ★`-weak` 는 `neutral-300` 일 수 없다 — `--u-bg-color-raised` 가 같은 단이라, 올림면(사이드바·\n       표 머리/행·마스터-디테일 구분선) 위에 그리는 약한 선이 **면과 같은 색**(대비 1.00)이 되어\n       화면에서 사라진다. 라이트는 200 단이 올림면(50)과 떨어져 있어 보인다. 램프에서 올림면(300)\n       위로 올릴 수 있는 다음 단이 400 뿐이라 `-weak` 는 이 테마에서 `--u-border-color` 와 같은\n       단이다 — 다크에서는 «약함/보통» 두 단이 하나로 합쳐지지만, 종전 `-weak` 는 그것이 쓰이는\n       면 위에서 애초에 구별되지 않았다. */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-400);\n  --u-border-color-strong:   var(--u-neutral-500);\n  --u-border-color-hover:    var(--u-neutral-500);\n\n  /* ★상태 테두리는 `-strong` 단이다 — light.css 의 같은 자리 주석 참조.\n     이 테마가 실제로 미달이었다: focus 2.74 · invalid 2.44 → 4.74 / 4.34. */\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-strong);\n  --u-input-border-color-invalid: var(--u-danger-color-strong);\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  /* 면 높이 — 상세는 light.css 참조. 다크는 **바탕보다 밝은 쪽**이 위다.\n     neutral-300(#2A2A2A)은 바탕(#121212) 대비 1.42 로, 소비 측이 오버라이드로 쓰던\n     neutral-200(1.15)보다 실제로 더 잘 구분된다 — 그 오버라이드가 해결하려던 증상이\n     *\"툴바·헤더가 배경에 묻힌다\"* 였다. */\n  --u-bg-color-raised:       var(--u-neutral-300);\n\n  /* ★올림면 위의 hover — `--u-bg-color-hover`(전역, 바탕면 전용)와 값이 같아서\n     («둘 다 neutral-300») 카드·표 머리 위에 마우스를 올려도 아무 일도 안 일어났다\n     (소비자 실측). 전역 토큰 하나로는 \"지금 위에 있는 면\"을\n     알 방법이 없어(참조 지점마다 계산 기준이 다를 수 없다) **전용 토큰**을 신설한다.\n\n     ⚠**A안**(`raised`를 neutral-200으로) — 과거에 거부된 값(위 주석). **B안**(전역\n     `hover`를 neutral-400으로) — `--u-bg-color-active` 와 충돌해 결함이 다른 쌍으로\n     옮겨간다. ⇒ hover 는 본래 \"현재 면보다 한 단 위\"이지 절대 단이 아니므로\n     `color-mix()` 로 raised 자신을 기준 삼아 상대 계산한다.\n\n     N=6% 는 raised(L≈0.023)와 active(L≈0.047, neutral-400) 사이 대비 계산으로 골랐다 —\n     결과 L≈0.038, raised 대비 ≈1.21(라이트의 기존 \"약한\" 1.04보다 뚜렷하고, `bg→raised`\n     의 기존 1.31 과 비슷한 체감), active 와는 값이 달라 겹치지 않는다(≈#373737 vs\n     active #3D3D3D). N 을 더 올리면(≈10%+) active 를 넘어서 순서가 뒤집힌다 — 확인함. */\n  --u-bg-color-raised-hover: color-mix(in srgb, var(--u-bg-color-raised), white 6%);\n\n  /* 유채색 표면 — 라이트와 **같은 단이 아니라 같은 세기**로 짝지었다(light.css 참조).\n     팔레트 유채색 틴트가 다크에서 짓눌리므로 한 단 위를 쓴다. green 은 대칭이라 그대로. */\n  --u-primary-bg-color:      var(--u-blue-100);\n  --u-info-bg-color:         var(--u-blue-100);\n  --u-success-bg-color:      var(--u-green-0);\n  --u-danger-bg-color:       var(--u-red-100);\n  /* warning 합류 — 라이트는 yellow-200 이다(단 이름이 다른 이유는 light.css 참조). */\n  --u-warning-bg-color:      var(--u-yellow-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  /* Elevation Scale — 근거는 light.css 의 같은 자리 주석 참조.\n     ★다크는 알파가 3배 가까이 진하다 — 리터럴로 흩어져 있던 종전에는 이 차이가\n     적용되지 않아 다크에서 그림자가 사실상 보이지 않았다. */\n  --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.14);    /* = shadow-color-weak */\n  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.18);    /* = shadow-color-normal */\n  --u-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.22);   /* = shadow-color-strong */\n  --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);   /* = shadow-color-stronger */\n\n\n  /* ==========================================================================\n     Type Scale — 글자 크기·굵기·행간·자간의 **한 벌**\n     ★**크기만 주면 스케일이 되지 않는다.** 소비자가 크기만 받고 굵기·행간을 각자 정하면\n     결국 화면마다 다른 위계가 생긴다 — 그래서 네 값을 **단 단위로 묶어** 낸다.\n\n     단 이름은 크기가 아니라 **역할**이다(`lg`/`xl` 이 아니라 `title`/`label`). 역할로 두면\n     소비자가 *\"어느 크기를 쓸까\"* 가 아니라 *\"이 글자는 무엇인가\"* 를 묻게 된다.\n\n     ★**한글 기준으로 값을 골랐다**:\n       ⑴ 행간은 **1.4 이상**. 라틴 관례(1.2)는 한글에서 답답하다 — 받침 때문에 글자 상자가\n          세로로 꽉 차 있어 라틴과 같은 행간이면 줄이 붙어 보인다.\n       ⑵ 자간은 **0 이 기본**이고 큰 제목만 **음수**. 한글에 양수 자간(letter-spacing)을 주면\n          가독성이 떨어진다 — 라틴 소문자 조판 관례를 그대로 옮기면 안 되는 자리다.\n       ⑶ `overline` 에만 양수 자간을 둔다. 그 단은 **영문·숫자 라벨**을 전제한 자리이고,\n          한글을 넣을 소비자는 자간을 0 으로 덮어야 한다(문서에 명시).\n\n     ⚠**`text-transform` 은 토큰으로 내지 않는다.** 한글에는 대문자가 없어 `uppercase` 가\n       아무 효과가 없고, 영문이 섞이면 그것만 커져 오히려 어수선해진다.\n     ========================================================================== */\n  --u-text-display-size:     26px;\n  --u-text-display-weight:   700;\n  --u-text-display-leading:  1.4;\n  --u-text-display-tracking: -0.02em;\n\n  --u-text-title-size:       20px;\n  --u-text-title-weight:     700;\n  --u-text-title-leading:    1.45;\n  --u-text-title-tracking:   -0.01em;\n\n  --u-text-subtitle-size:    16px;\n  --u-text-subtitle-weight:  600;\n  --u-text-subtitle-leading: 1.5;\n  --u-text-subtitle-tracking: 0;\n\n  --u-text-body-size:        14px;\n  --u-text-body-weight:      400;\n  --u-text-body-leading:     1.6;\n  --u-text-body-tracking:    0;\n\n  --u-text-label-size:       13px;\n  --u-text-label-weight:     600;\n  --u-text-label-leading:    1.5;\n  --u-text-label-tracking:   0;\n\n  --u-text-caption-size:     12px;\n  --u-text-caption-weight:   400;\n  --u-text-caption-leading:  1.5;\n  --u-text-caption-tracking: 0;\n\n  --u-text-overline-size:    11px;\n  --u-text-overline-weight:  700;\n  --u-text-overline-leading: 1.45;\n  --u-text-overline-tracking: 0.06em;\n\n  /* ==========================================================================\n     Motion — 지속시간·이징\n     ★값이 없으면 앱마다 다른 속도가 생기고, `prefers-reduced-motion` 은 **반드시**\n     빠뜨리는 앱이 나온다. 축을 여기 두고 존중 규칙은 아래 미디어 쿼리가 진다.\n     ========================================================================== */\n  --u-duration-instant: 80ms;\n  --u-duration-fast:   140ms;\n  --u-duration-normal: 220ms;\n  --u-duration-slow:   320ms;\n  --u-ease-standard:   cubic-bezier(0.2, 0, 0, 1);\n  --u-ease-decelerate: cubic-bezier(0, 0, 0, 1);\n  --u-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);\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  /* ==========================================================================\n     Font Styles\n     ★**CJK 폴백을 스택에 포함한다 — 국제화이지 취향이 아니다.**\n     종전 스택(`-apple-system, Segoe UI, Noto Sans, Helvetica, Arial`)에는 **한중일 글립을\n     가진 폰트가 하나도 없었다.** Windows 에서 한글은 `Segoe UI` 에 없으므로 UA 가 임의로\n     맑은 고딕을 고르고, macOS 는 `-apple-system` 이 Apple SD Gothic Neo 를 준다 ⇒ **같은 앱이\n     OS 마다 다른 글꼴로 렌더**됐다. 폴백을 명시하면 그 선택이 결정적이 된다.\n     ⚠**웹폰트를 로드하지 않는다.** 라이브러리가 네트워크 요청을 만들면 소비자의 CSP·\n     오프라인 환경을 깬다. 스택 맨 앞의 `Pretendard` 는 **소비자가 로드했을 때만** 잡히는\n     선택적 이름이다(없으면 조용히 다음으로 넘어간다).\n     ========================================================================== */\n  --u-font-base:    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Hiragino Sans', 'Yu Gothic UI', 'Microsoft YaHei', 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        `-color`  = **면**. `--u-*-txt-color` 가 그 위에 얹히므로 on-color 기준 4.5.\n        `-strong` = **글자·아이콘**. `--u-bg-color` 위에 놓이므로 바탕 기준 4.5.\n     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 한 조건으로 합쳐지지만,\n     **다크에서는 정반대 방향**이다(바탕 #121212 · on-color #FFFFFF). 바탕에서 읽히는\n     밝은 단은 흰 글자를 못 받고, 흰 글자를 받는 어두운 단은 바탕에서 안 읽힌다.\n     ⇒ 다크에서 `-color` 와 `-strong` 이 두 단 벌어지는 것이 그 결과다.\n     `tests/build/token-contrast.test.ts` 가 값을 지킨다.\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);  /* 면: 흰 글자 6.09 ✓ */\n  --u-primary-color-strong:      var(--u-blue-800);  /* 글자: 바탕 5.32 ✓ (700 은 4.05 ✗) */\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-800);\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);  /* 면: 흰 글자 6.83 ✓ */\n  --u-danger-color-strong:       var(--u-red-800);  /* 글자: 바탕 4.87 ✓ (700 은 3.67 ✗) */\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n\n  /* 유채색 배경 위의 글자 — warning 만 다르다(light.css 참조). */\n  --u-primary-txt-color:     #FFFFFF;\n  --u-info-txt-color:        #FFFFFF;\n  --u-success-txt-color:     #FFFFFF;\n  --u-danger-txt-color:      #FFFFFF;\n  /* ★라이트 시트와 같은 이유로 중립 최상단을 쓴다 — 다크에서는 그 값이 #FFFFFF 라\n     결과가 종전과 같다(4.65 ✓). 리터럴 대신 토큰을 쓰는 이유는 라이트에서 뒤집히기\n     때문이다(#000000). 두 시트가 같은 선언이 되어 어긋날 자리가 없어진다. */\n  --u-warning-txt-color:     var(--u-neutral-1000);\n  --u-txt-color-hover:       var(--u-primary-color-strong);\n  --u-txt-color-active:      var(--u-primary-color-strong);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  /* 라이트와 같은 기준 — 놓이는 모든 면에서 AA. neutral-700(#8A8A8A)은 바탕 5.43 ·\n     올림면(neutral-300) 4.16 · active 면(neutral-400) 3.15 로 미달이었다.\n     neutral-800(#B0B0B0) = 8.64 · 6.62 · 5.01. 본문(neutral-900)과의 대비비 1.46. */\n  --u-txt-color-weak:        var(--u-neutral-800);\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-strong);\n  --u-icon-color-active:     var(--u-primary-color-strong);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Border Colors\n     ★`-weak` 는 `neutral-300` 일 수 없다 — `--u-bg-color-raised` 가 같은 단이라, 올림면(사이드바·\n       표 머리/행·마스터-디테일 구분선) 위에 그리는 약한 선이 **면과 같은 색**(대비 1.00)이 되어\n       화면에서 사라진다. 라이트는 200 단이 올림면(50)과 떨어져 있어 보인다. 램프에서 올림면(300)\n       위로 올릴 수 있는 다음 단이 400 뿐이라 `-weak` 는 이 테마에서 `--u-border-color` 와 같은\n       단이다 — 다크에서는 «약함/보통» 두 단이 하나로 합쳐지지만, 종전 `-weak` 는 그것이 쓰이는\n       면 위에서 애초에 구별되지 않았다. */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-400);\n  --u-border-color-strong:   var(--u-neutral-500);\n  --u-border-color-hover:    var(--u-neutral-500);\n\n  /* ★상태 테두리는 `-strong` 단이다 — light.css 의 같은 자리 주석 참조.\n     이 테마가 실제로 미달이었다: focus 2.74 · invalid 2.44 → 4.74 / 4.34. */\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-strong);\n  --u-input-border-color-invalid: var(--u-danger-color-strong);\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  /* 면 높이 — 상세는 light.css 참조. 다크는 **바탕보다 밝은 쪽**이 위다.\n     neutral-300(#2A2A2A)은 바탕(#121212) 대비 1.42 로, 소비 측이 오버라이드로 쓰던\n     neutral-200(1.15)보다 실제로 더 잘 구분된다 — 그 오버라이드가 해결하려던 증상이\n     *\"툴바·헤더가 배경에 묻힌다\"* 였다. */\n  --u-bg-color-raised:       var(--u-neutral-300);\n\n  /* ★올림면 위의 hover — `--u-bg-color-hover`(전역, 바탕면 전용)와 값이 같아서\n     («둘 다 neutral-300») 카드·표 머리 위에 마우스를 올려도 아무 일도 안 일어났다\n     (소비자 실측). 전역 토큰 하나로는 \"지금 위에 있는 면\"을\n     알 방법이 없어(참조 지점마다 계산 기준이 다를 수 없다) **전용 토큰**을 신설한다.\n\n     ⚠**A안**(`raised`를 neutral-200으로) — 과거에 거부된 값(위 주석). **B안**(전역\n     `hover`를 neutral-400으로) — `--u-bg-color-active` 와 충돌해 결함이 다른 쌍으로\n     옮겨간다. ⇒ hover 는 본래 \"현재 면보다 한 단 위\"이지 절대 단이 아니므로\n     `color-mix()` 로 raised 자신을 기준 삼아 상대 계산한다.\n\n     N=6% 는 raised(L≈0.023)와 active(L≈0.047, neutral-400) 사이 대비 계산으로 골랐다 —\n     결과 L≈0.038, raised 대비 ≈1.21(라이트의 기존 \"약한\" 1.04보다 뚜렷하고, `bg→raised`\n     의 기존 1.31 과 비슷한 체감), active 와는 값이 달라 겹치지 않는다(≈#373737 vs\n     active #3D3D3D). N 을 더 올리면(≈10%+) active 를 넘어서 순서가 뒤집힌다 — 확인함. */\n  --u-bg-color-raised-hover: color-mix(in srgb, var(--u-bg-color-raised), white 6%);\n\n  /* 유채색 표면 — 라이트와 **같은 단이 아니라 같은 세기**로 짝지었다(light.css 참조).\n     팔레트 유채색 틴트가 다크에서 짓눌리므로 한 단 위를 쓴다. green 은 대칭이라 그대로. */\n  --u-primary-bg-color:      var(--u-blue-100);\n  --u-info-bg-color:         var(--u-blue-100);\n  --u-success-bg-color:      var(--u-green-0);\n  --u-danger-bg-color:       var(--u-red-100);\n  /* warning 합류 — 라이트는 yellow-200 이다(단 이름이 다른 이유는 light.css 참조). */\n  --u-warning-bg-color:      var(--u-yellow-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  /* Elevation Scale — 근거는 light.css 의 같은 자리 주석 참조.\n     ★다크는 알파가 3배 가까이 진하다 — 리터럴로 흩어져 있던 종전에는 이 차이가\n     적용되지 않아 다크에서 그림자가 사실상 보이지 않았다. */\n  --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.14);    /* = shadow-color-weak */\n  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.18);    /* = shadow-color-normal */\n  --u-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.22);   /* = shadow-color-strong */\n  --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);   /* = shadow-color-stronger */\n\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\n/* ==========================================================================\n   ★모드와 무관한 스케일 — 반경·여백·글자 스케일·모션·글꼴.\n   값이 light.css 와 **같다.** 그런데 위 블록(`:root[theme=\"dark\"]`, 특이도 0,1,1)에 두면\n   `:root`(0,1,0)로 이 토큰을 덮는 **모든 층**(하우스 프리셋·소비자 브랜드 시트)이 다크\n   모드에서만 **로드 순서와 무관하게** 진다 — 에러도 경고도 없이, 색은 정상으로 바뀌므로\n   «다크가 잘 된다» 로 보인다. `:where()` 로 특이도를 `:root` 와 같게 두면 층 모델이 라이트와\n   똑같이 로드 순서로 선다.\n   ⚠이 블록을 지우지 말 것 — 이 시트만 쓰는 «고정 다크 디자인» 소비자(docs/theming.md)는\n   이 토큰들을 여기서 받는다. 두 시트를 함께 쓸 때는 값이 같으므로 어느 쪽이 이겨도 같다.\n   ========================================================================== */\n:root:where([theme=\"dark\"]) {\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  /* ★상단 2단은 **면(surface)용**이다 — 카드·패널·대화상자처럼 큰 사각형은 컨트롤과\n     같은 반경을 쓰면 각져 보인다. 기존 5단은 **컨트롤용**이고 값을 바꾸지 않는다\n     (바꾸면 모든 소비자의 버튼·입력이 동시에 움직인다). */\n  --u-radius-2xl:   12px;\n  --u-radius-3xl:   16px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* ==========================================================================\n     Space Scale — 컨테이너·오버레이의 절대 여백\n     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만\n     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로\n     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.\n     축 구분과 근거는 docs/design-tokens.md 참조.\n     ========================================================================== */\n  --u-space-3xs:  2px;\n  --u-space-2xs:  4px;\n  --u-space-xs:   6px;\n  --u-space-sm:   8px;\n  --u-space-md:  12px;\n  --u-space-lg:  16px;\n  /* ★상단 4단은 **화면 리듬**이다 — 카드 안쪽 여백(20~24)·섹션 간격(24~32)·페이지 여백\n     (32~40). 종전에는 이 구간이 통째로 비어 있어 소비자가 전부 리터럴로 적었고,\n     그래서 앱마다 화면 밀도가 달라졌다. `lg`(16px) 이하는 **요소 사이**, `xl` 이상은\n     **영역 사이**로 나눠 쓴다.\n     ⚠`xs: 6px` 는 4px 격자에서 벗어나 있으나 **바꾸지 않는다** — 이미 배선된 컨트롤\n     여백이 전부 움직인다. 신규 단은 전부 4의 배수로 둔다. */\n  --u-space-xl:  20px;\n  --u-space-2xl: 24px;\n  --u-space-3xl: 32px;\n  --u-space-4xl: 40px;\n\n  /* ==========================================================================\n     Type Scale — 글자 크기·굵기·행간·자간의 **한 벌**\n     ★**크기만 주면 스케일이 되지 않는다.** 소비자가 크기만 받고 굵기·행간을 각자 정하면\n     결국 화면마다 다른 위계가 생긴다 — 그래서 네 값을 **단 단위로 묶어** 낸다.\n\n     단 이름은 크기가 아니라 **역할**이다(`lg`/`xl` 이 아니라 `title`/`label`). 역할로 두면\n     소비자가 *\"어느 크기를 쓸까\"* 가 아니라 *\"이 글자는 무엇인가\"* 를 묻게 된다.\n\n     ★**한글 기준으로 값을 골랐다**:\n       ⑴ 행간은 **1.4 이상**. 라틴 관례(1.2)는 한글에서 답답하다 — 받침 때문에 글자 상자가\n          세로로 꽉 차 있어 라틴과 같은 행간이면 줄이 붙어 보인다.\n       ⑵ 자간은 **0 이 기본**이고 큰 제목만 **음수**. 한글에 양수 자간(letter-spacing)을 주면\n          가독성이 떨어진다 — 라틴 소문자 조판 관례를 그대로 옮기면 안 되는 자리다.\n       ⑶ `overline` 에만 양수 자간을 둔다. 그 단은 **영문·숫자 라벨**을 전제한 자리이고,\n          한글을 넣을 소비자는 자간을 0 으로 덮어야 한다(문서에 명시).\n\n     ⚠**`text-transform` 은 토큰으로 내지 않는다.** 한글에는 대문자가 없어 `uppercase` 가\n       아무 효과가 없고, 영문이 섞이면 그것만 커져 오히려 어수선해진다.\n     ========================================================================== */\n  --u-text-display-size:     26px;\n  --u-text-display-weight:   700;\n  --u-text-display-leading:  1.4;\n  --u-text-display-tracking: -0.02em;\n\n  --u-text-title-size:       20px;\n  --u-text-title-weight:     700;\n  --u-text-title-leading:    1.45;\n  --u-text-title-tracking:   -0.01em;\n\n  --u-text-subtitle-size:    16px;\n  --u-text-subtitle-weight:  600;\n  --u-text-subtitle-leading: 1.5;\n  --u-text-subtitle-tracking: 0;\n\n  --u-text-body-size:        14px;\n  --u-text-body-weight:      400;\n  --u-text-body-leading:     1.6;\n  --u-text-body-tracking:    0;\n\n  --u-text-label-size:       13px;\n  --u-text-label-weight:     600;\n  --u-text-label-leading:    1.5;\n  --u-text-label-tracking:   0;\n\n  --u-text-caption-size:     12px;\n  --u-text-caption-weight:   400;\n  --u-text-caption-leading:  1.5;\n  --u-text-caption-tracking: 0;\n\n  --u-text-overline-size:    11px;\n  --u-text-overline-weight:  700;\n  --u-text-overline-leading: 1.45;\n  --u-text-overline-tracking: 0.06em;\n\n  /* ==========================================================================\n     Motion — 지속시간·이징\n     ★값이 없으면 앱마다 다른 속도가 생기고, `prefers-reduced-motion` 은 **반드시**\n     빠뜨리는 앱이 나온다. 축을 여기 두고 존중 규칙은 아래 미디어 쿼리가 진다.\n     ========================================================================== */\n  --u-duration-instant: 80ms;\n  --u-duration-fast:   140ms;\n  --u-duration-normal: 220ms;\n  --u-duration-slow:   320ms;\n  --u-ease-standard:   cubic-bezier(0.2, 0, 0, 1);\n  --u-ease-decelerate: cubic-bezier(0, 0, 0, 1);\n  --u-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);\n\n  /* ==========================================================================\n     Font Styles\n     ★**CJK 폴백을 스택에 포함한다 — 국제화이지 취향이 아니다.**\n     종전 스택(`-apple-system, Segoe UI, Noto Sans, Helvetica, Arial`)에는 **한중일 글립을\n     가진 폰트가 하나도 없었다.** Windows 에서 한글은 `Segoe UI` 에 없으므로 UA 가 임의로\n     맑은 고딕을 고르고, macOS 는 `-apple-system` 이 Apple SD Gothic Neo 를 준다 ⇒ **같은 앱이\n     OS 마다 다른 글꼴로 렌더**됐다. 폴백을 명시하면 그 선택이 결정적이 된다.\n     ⚠**웹폰트를 로드하지 않는다.** 라이브러리가 네트워크 요청을 만들면 소비자의 CSP·\n     오프라인 환경을 깬다. 스택 맨 앞의 `Pretendard` 는 **소비자가 로드했을 때만** 잡히는\n     선택적 이름이다(없으면 조용히 다음으로 넘어간다).\n     ========================================================================== */\n  --u-font-base:    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Hiragino Sans', 'Yu Gothic UI', 'Microsoft YaHei', 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}\n\n/* ★`prefers-reduced-motion` — light.css 와 같은 규칙을 이 시트도 진다. 이 시트만 쓰는\n   소비자가 있고, 두 시트를 함께 쓸 때는 어느 시트가 뒤에 오든 **마지막 선언이 이 0ms**\n   가 되도록 각 시트가 자기 블록 뒤에 둔다. 종전에는 지속시간이 위 (0,1,1) 블록에 있어\n   다크 모드에서 «동작 줄이기» 설정이 **무시됐다.** */\n@media (prefers-reduced-motion: reduce) {\n  :root:where([theme=\"dark\"]) {\n    --u-duration-instant: 0ms;\n    --u-duration-fast:    0ms;\n    --u-duration-normal:  0ms;\n    --u-duration-slow:    0ms;\n  }\n}\n";
 //#endregion
 export { dark_css_default as default };

package/dist/assets/locales/ar.json.js

@@ -38,6 +38,8 @@ var alertMessage = "رسالة";
 var remove = "إزالة";
 var closeTab = "إغلاق علامة التبويب";
 var breadcrumb = "مسار التنقل";
+var confirm = "تأكيد";
+var cancel = "إلغاء";
 var ar_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var ar_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, ar_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, ar_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/de.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Nachricht";
 var remove = "Entfernen";
 var closeTab = "Tab schließen";
 var breadcrumb = "Navigationspfad";
+var confirm = "Bestätigen";
+var cancel = "Abbrechen";
 var de_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var de_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, de_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, de_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/en.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Message";
 var remove = "Remove";
 var closeTab = "Close tab";
 var breadcrumb = "Breadcrumb";
+var confirm = "Confirm";
+var cancel = "Cancel";
 var en_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var en_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, en_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, en_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/es.json.js

@@ -37,6 +37,8 @@ var alertMessage = "Mensaje";
 var remove = "Quitar";
 var closeTab = "Cerrar pestaña";
 var breadcrumb = "Ruta de navegación";
+var confirm = "Confirmar";
+var cancel = "Cancelar";
 var es_default = {
 	valueMissing,
 	badInput,
@@ -76,7 +78,9 @@ var es_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, es_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, es_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/fr.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Message";
 var remove = "Supprimer";
 var closeTab = "Fermer l'onglet";
 var breadcrumb = "Fil d'Ariane";
+var confirm = "Confirmer";
+var cancel = "Annuler";
 var fr_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var fr_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, fr_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, fr_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/id.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Pesan";
 var remove = "Hapus";
 var closeTab = "Tutup tab";
 var breadcrumb = "Navigasi remah roti";
+var confirm = "Konfirmasi";
+var cancel = "Batal";
 var id_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var id_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, id_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, id_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/ja.json.js

@@ -38,6 +38,7 @@ var alertMessage = "メッセージ";
 var remove = "削除";
 var closeTab = "タブを閉じる";
 var breadcrumb = "パンくずリスト";
+var cancel = "キャンセル";
 var ja_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +78,9 @@ var ja_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm: "OK",
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, ja_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, ja_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/ko.json.js

@@ -38,6 +38,8 @@ var alertMessage = "메시지";
 var remove = "제거";
 var closeTab = "탭 닫기";
 var breadcrumb = "탐색 경로";
+var confirm = "확인";
+var cancel = "취소";
 var ko_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var ko_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, ko_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, ko_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/pt-BR.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Mensagem";
 var remove = "Remover";
 var closeTab = "Fechar aba";
 var breadcrumb = "Trilha de navegação";
+var confirm = "Confirmar";
+var cancel = "Cancelar";
 var pt_BR_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var pt_BR_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, pt_BR_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, pt_BR_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/ru.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Сообщение";
 var remove = "Удалить";
 var closeTab = "Закрыть вкладку";
 var breadcrumb = "Навигационная цепочка";
+var confirm = "Подтвердить";
+var cancel = "Отмена";
 var ru_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var ru_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, ru_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, ru_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/th.json.js

@@ -38,6 +38,8 @@ var alertMessage = "ข้อความ";
 var remove = "ลบ";
 var closeTab = "ปิดแท็บ";
 var breadcrumb = "เส้นทางการนำทาง";
+var confirm = "ยืนยัน";
+var cancel = "ยกเลิก";
 var th_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var th_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, th_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, th_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/vi.json.js

@@ -38,6 +38,8 @@ var alertMessage = "Thông báo";
 var remove = "Xóa";
 var closeTab = "Đóng tab";
 var breadcrumb = "Đường dẫn điều hướng";
+var confirm = "Xác nhận";
+var cancel = "Hủy";
 var vi_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var vi_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, vi_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, vi_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/zh-CN.json.js

@@ -38,6 +38,8 @@ var alertMessage = "消息";
 var remove = "移除";
 var closeTab = "关闭标签页";
 var breadcrumb = "面包屑导航";
+var confirm = "确定";
+var cancel = "取消";
 var zh_CN_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var zh_CN_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, zh_CN_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, zh_CN_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/assets/locales/zh-TW.json.js

@@ -38,6 +38,8 @@ var alertMessage = "訊息";
 var remove = "移除";
 var closeTab = "關閉分頁";
 var breadcrumb = "麵包屑導覽";
+var confirm = "確定";
+var cancel = "取消";
 var zh_TW_default = {
 	valueMissing,
 	badInput,
@@ -77,7 +79,9 @@ var zh_TW_default = {
 	alertMessage,
 	remove,
 	closeTab,
-	breadcrumb
+	breadcrumb,
+	confirm,
+	cancel
 };
 //#endregion
-export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, chooseDate, chooseFile, clear, close, closeTab, copied, copy, decrement, zh_TW_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };
+export { alertError, alertInfo, alertMessage, alertNotice, alertSuccess, alertWarning, badInput, breadcrumb, cancel, chooseDate, chooseFile, clear, close, closeTab, confirm, copied, copy, decrement, zh_TW_default as default, filesSelected, goToSlide, hidePassword, increment, nextMonth, nextSlide, noFileChosen, patternMismatch, previousMonth, previousSlide, rangeOverflow, rangeUnderflow, remove, resizePanels, search, showPassword, stepMismatch, time, today, tooLong, tooShort, typeMismatch, valueMissing };

package/dist/components/UOverlayElement.d.ts

@@ -87,6 +87,12 @@ export declare abstract class UOverlayElement extends UElement {
     private cleanup;
     /** host 자체를 클릭한 경우(백드롭)만 닫기 요청 */
     private handlePointerdown;
-    /** ESC 키 입력 시 닫기 요청 (최상위 오버레이에 대해서만) */
+    /**
+     * ESC 키 입력 시 닫기 요청 (최상위 오버레이에 대해서만).
+     *
+     * 이미 소비된 Escape(`defaultPrevented`)는 받지 않는다 — 오버레이 안에서 열린 목록·팝오버가
+     * 자기 층을 닫으며 먹은 키다. 한 번의 Escape 는 한 층만 닫는다. 이 리스너는 window 버블에
+     * 있으므로 안쪽 컨트롤과 document 리스너가 모두 돈 «뒤» 에 판단한다.
+     */
     private handleWindowKeydown;
 }

package/dist/components/UOverlayElement.js

@@ -28,7 +28,7 @@ var UOverlayElement = class extends UElement {
 			if (e.composedPath()[0] === this) this.requestClose("backdrop");
 		};
 		this.handleWindowKeydown = (e) => {
-			if (!this.open || e.key !== "Escape") return;
+			if (!this.open || e.key !== "Escape" || e.defaultPrevented) return;
 			if (!OverlayManager.isTopmost(this)) return;
 			e.preventDefault();
 			this.requestClose("escape");

package/dist/components/breadcrumb-item/UBreadcrumbItem.js

@@ -25,6 +25,7 @@ var UBreadcrumbItem = class UBreadcrumbItem extends UElement {
 		if (this.href) return html`
         <a part="link"
           href=${this.href}
+          aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
           target=${ifDefined(this.target)}
           rel=${ifDefined(this.rel)}
           @click=${this.handleAnchorClick}

package/dist/components/date-picker/UDatePicker.js

@@ -201,6 +201,7 @@ var UDatePicker = class UDatePicker extends UFormControlElement {
         <div class="container" part="container"
           tabindex=${this.disabled ? "-1" : "0"}
           role="combobox"
+          aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
           aria-haspopup="dialog"
           aria-expanded=${this.open}
           aria-label=${ifDefined(this.resolvedAriaLabel)}

package/dist/components/input/UInput.js

@@ -72,8 +72,9 @@ var UInput = class UInput extends UFormControlElement {
 					this.options.find((o) => !o.hidden && !o.disabled)?.focus();
 					break;
 				case "Escape":
+					if (!this.popoverEl?.open) break;
 					e.preventDefault();
-					this.popoverEl?.hide();
+					this.popoverEl.hide();
 			}
 		};
 		this.handleSuffixIconKeydown = (action) => (e) => {

package/dist/components/menu-item/UMenuItem.js

@@ -74,7 +74,11 @@ var UMenuItem = class UMenuItem extends UElement {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has("disabled")) this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (changedProperties.has("disabled")) {
+			this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+			if (this.disabled) this.setAttribute("aria-disabled", "true");
+			else this.removeAttribute("aria-disabled");
+		}
 		if (changedProperties.has("expanded") && !this.expanded) this._childItems.forEach((c) => c.expanded = false);
 		if (changedProperties.has("depth") || changedProperties.has("inline")) this.style.setProperty("--menu-item-depth", String(this.inline ? this.depth : 0));
 	}

package/dist/components/popover/UPopover.d.ts

@@ -59,6 +59,16 @@ export declare class UPopover extends UFloatingElement {
     private startSafeTimer;
     private cancelSafeTimer;
     private handleDocumentClick;
+    /**
+     * 이 리스너는 `dismiss` 에 `escape` 가 있으면 **연결 시점에** document 에 붙으므로, 닫힌
+     * 인스턴스도 모든 Escape 를 받는다. 닫힌 팝오버는 Escape 로 할 일이 없다 — 여기서
+     * `preventDefault()` 하면 화면에 팝오버가 «존재하기만» 해도 document 버블 시점의 Escape 가
+     * 항상 소비된 것으로 보여, 소비자(그리고 우리 오버레이)가 `defaultPrevented` 로 «위에서 누가
+     * 먹었나» 를 가릴 수 없게 된다.
+     *
+     * 표시 대기 중(`showDelay`)이면 `targetEl` 이 이미 서 있으므로 그 대기는 취소한다 — 다만
+     * 아직 보이지 않았으니 소비하지는 않는다.
+     */
     private handleDocumentKeydown;
     /**
      * 현재 표시 중이며 앵커가 **좌표 기반 가상 엘리먼트**인지 여부.

package/dist/components/popover/UPopover.js

@@ -99,6 +99,7 @@ var UPopover = class UPopover extends UFloatingElement {
 			this.startSafeTimer();
 		};
 		this.handleDocumentClick = (e) => {
+			if (!this.open && !this.targetEl) return;
 			if (this.trigger === "contextmenu") {
 				this.hide();
 				return;
@@ -110,7 +111,8 @@ var UPopover = class UPopover extends UFloatingElement {
 		};
 		this.handleDocumentKeydown = (e) => {
 			if (e.key !== "Escape") return;
-			e.preventDefault();
+			if (!this.open && !this.targetEl) return;
+			if (this.open) e.preventDefault();
 			this.hide();
 		};
 		this.handleDocumentScroll = () => {

package/dist/components/radio/URadio.js

@@ -93,6 +93,7 @@ var URadio = class URadio extends UFormControlElement {
       >
         <div class="container" part="container"
           role="radiogroup"
+          aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
           aria-label=${ifDefined(this.resolvedAriaLabel)}
           aria-description=${ifDefined(this.resolvedAriaDescription)}>
           <slot @slotchange=${this.handleSlotChange}></slot>

package/dist/components/rating/URating.js

@@ -112,6 +112,7 @@ var URating = class URating extends UFormControlElement {
         .validationMessage=${this.validationMessage}
       >
         <div class="symbols" part="container" role="radiogroup"
+          aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
           aria-label=${ifDefined(this.resolvedAriaLabel)}
           aria-description=${ifDefined(this.resolvedAriaDescription)}>
           ${Array.from({ length: this.max }, (_, i) => {

package/dist/components/select/USelect.d.ts

@@ -89,6 +89,14 @@ export declare class USelect extends UFormControlElement<string | string[]> {
      *  updated() 경로는 base의 silent setValidity()만 수행해 Lit 중복 업데이트를 피한다). */
     private emitChange;
     private handleSlotChange;
+    /**
+     * 목록이 닫힐 때 포커스가 그 «안»(옵션·검색 입력)에 있었으면 콤보박스로 되돌린다.
+     *
+     * 되돌리지 않으면 포커스가 숨은 목록 안에 남는다 — 키보드 사용자는 자기 위치를 잃고,
+     * 그 옵션은 다음 Escape 까지 받아 소비해 바깥 층(오버레이·소비자 패널)이 닫히지 않는다.
+     * 바깥 클릭으로 닫힐 때는 포커스가 이미 다른 곳에 있으므로 건드리지 않는다.
+     */
+    private handlePopoverHide;
     private handleOptionClick;
     private handleOptionKeydown;
     private handleSearchInput;

package/dist/components/select/USelect.js

@@ -31,6 +31,10 @@ var USelect = class USelect extends UFormControlElement {
 			this.options = slot.assignedElements({ flatten: true }).filter((el) => el instanceof UOption);
 			this.setup(this.options);
 		};
+		this.handlePopoverHide = () => {
+			this.open = false;
+			if (this.popoverEl?.matches(":focus-within")) this.containerEl?.focus();
+		};
 		this.handleOptionClick = (e) => {
 			const option = e.currentTarget;
 			if (option.disabled) return;
@@ -173,6 +177,7 @@ var USelect = class USelect extends UFormControlElement {
 
         <div class="container" part="container" tabindex=${this.disabled ? "-1" : "0"}
           role="combobox"
+          aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
           aria-label=${ifDefined(this.resolvedAriaLabel)}
           aria-description=${ifDefined(this.resolvedAriaDescription)}
           aria-haspopup=${this.searchable ? "dialog" : "listbox"}
@@ -215,7 +220,7 @@ var USelect = class USelect extends UFormControlElement {
         for=".container"
         trigger="click"
         @show=${() => this.open = true}
-        @hide=${() => this.open = false}
+        @hide=${this.handlePopoverHide}
         strategy="fixed"
         placement="bottom-start"
         offset="1"

package/dist/components/tab/UTab.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { UElement } from '../UElement.js';
 /**
  * 탭 패널에서 사용하는 탭 아이템(탭 버튼) 컴포넌트입니다.
@@ -24,6 +25,7 @@ export declare class UTab extends UElement {
     /** 탭 드래그 여부 */
     draggable: boolean;
     connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     private handleRemoveClick;
 }

package/dist/components/tab/UTab.js

@@ -33,6 +33,13 @@ var UTab = class UTab extends UElement {
 		this.setAttribute("tabindex", "0");
 		if (!this.hasAttribute("slot")) this.setAttribute("slot", "tab");
 	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("disabled")) {
+			if (this.disabled) this.setAttribute("aria-disabled", "true");
+			else this.removeAttribute("aria-disabled");
+		}
+	}
 	render() {
 		return html`
       <div class="base" part="base">

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

@@ -83,7 +83,11 @@ var UTreeItem = class UTreeItem extends UElement {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has("disabled")) this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (changedProperties.has("disabled")) {
+			this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+			if (this.disabled) this.setAttribute("aria-disabled", "true");
+			else this.removeAttribute("aria-disabled");
+		}
 		if (changedProperties.has("depth")) this.style.setProperty("--tree-item-depth", String(this.depth));
 	}
 	render() {

package/dist/styles/dark.css

@@ -185,47 +185,6 @@
   --u-danger-color-weak:         var(--u-red-500);
   --u-danger-color:              var(--u-red-600);  /* 면: 흰 글자 6.83 ✓ */
   --u-danger-color-strong:       var(--u-red-800);  /* 글자: 바탕 4.87 ✓ (700 은 3.67 ✗) */
-  /* ==========================================================================
-     Radius Scale — 모서리 반경
-     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
-     ========================================================================== */
-  --u-radius-none:   0;
-  --u-radius-sm:     3px;
-  --u-radius-md:     4px;
-  --u-radius-lg:     6px;
-  --u-radius-xl:     8px;
-  /* ★상단 2단은 **면(surface)용**이다 — 카드·패널·대화상자처럼 큰 사각형은 컨트롤과
-     같은 반경을 쓰면 각져 보인다. 기존 5단은 **컨트롤용**이고 값을 바꾸지 않는다
-     (바꾸면 모든 소비자의 버튼·입력이 동시에 움직인다). */
-  --u-radius-2xl:   12px;
-  --u-radius-3xl:   16px;
-  --u-radius-pill:   9999px;
-  --u-radius-circle: 50%;
-
-  /* ==========================================================================
-     Space Scale — 컨테이너·오버레이의 절대 여백
-     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만
-     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로
-     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.
-     축 구분과 근거는 docs/design-tokens.md 참조.
-     ========================================================================== */
-  --u-space-3xs:  2px;
-  --u-space-2xs:  4px;
-  --u-space-xs:   6px;
-  --u-space-sm:   8px;
-  --u-space-md:  12px;
-  --u-space-lg:  16px;
-  /* ★상단 4단은 **화면 리듬**이다 — 카드 안쪽 여백(20~24)·섹션 간격(24~32)·페이지 여백
-     (32~40). 종전에는 이 구간이 통째로 비어 있어 소비자가 전부 리터럴로 적었고,
-     그래서 앱마다 화면 밀도가 달라졌다. `lg`(16px) 이하는 **요소 사이**, `xl` 이상은
-     **영역 사이**로 나눠 쓴다.
-     ⚠`xs: 6px` 는 4px 격자에서 벗어나 있으나 **바꾸지 않는다** — 이미 배선된 컨트롤
-     여백이 전부 움직인다. 신규 단은 전부 4의 배수로 둔다. */
-  --u-space-xl:  20px;
-  --u-space-2xl: 24px;
-  --u-space-3xl: 32px;
-  --u-space-4xl: 40px;
-
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
@@ -336,6 +295,64 @@
   --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);   /* = shadow-color-stronger */
 
 
+  /* Scrollbar Colors */
+  --u-scrollbar-color:       var(--u-neutral-500);
+  --u-scrollbar-color-hover: var(--u-neutral-600);
+  --u-scrollbar-track-color: transparent;
+}
+
+/* ==========================================================================
+   ★모드와 무관한 스케일 — 반경·여백·글자 스케일·모션·글꼴.
+   값이 light.css 와 **같다.** 그런데 위 블록(`:root[theme="dark"]`, 특이도 0,1,1)에 두면
+   `:root`(0,1,0)로 이 토큰을 덮는 **모든 층**(하우스 프리셋·소비자 브랜드 시트)이 다크
+   모드에서만 **로드 순서와 무관하게** 진다 — 에러도 경고도 없이, 색은 정상으로 바뀌므로
+   «다크가 잘 된다» 로 보인다. `:where()` 로 특이도를 `:root` 와 같게 두면 층 모델이 라이트와
+   똑같이 로드 순서로 선다.
+   ⚠이 블록을 지우지 말 것 — 이 시트만 쓰는 «고정 다크 디자인» 소비자(docs/theming.md)는
+   이 토큰들을 여기서 받는다. 두 시트를 함께 쓸 때는 값이 같으므로 어느 쪽이 이겨도 같다.
+   ========================================================================== */
+:root:where([theme="dark"]) {
+  /* ==========================================================================
+     Radius Scale — 모서리 반경
+     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
+     ========================================================================== */
+  --u-radius-none:   0;
+  --u-radius-sm:     3px;
+  --u-radius-md:     4px;
+  --u-radius-lg:     6px;
+  --u-radius-xl:     8px;
+  /* ★상단 2단은 **면(surface)용**이다 — 카드·패널·대화상자처럼 큰 사각형은 컨트롤과
+     같은 반경을 쓰면 각져 보인다. 기존 5단은 **컨트롤용**이고 값을 바꾸지 않는다
+     (바꾸면 모든 소비자의 버튼·입력이 동시에 움직인다). */
+  --u-radius-2xl:   12px;
+  --u-radius-3xl:   16px;
+  --u-radius-pill:   9999px;
+  --u-radius-circle: 50%;
+
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만
+     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로
+     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+  /* ★상단 4단은 **화면 리듬**이다 — 카드 안쪽 여백(20~24)·섹션 간격(24~32)·페이지 여백
+     (32~40). 종전에는 이 구간이 통째로 비어 있어 소비자가 전부 리터럴로 적었고,
+     그래서 앱마다 화면 밀도가 달라졌다. `lg`(16px) 이하는 **요소 사이**, `xl` 이상은
+     **영역 사이**로 나눠 쓴다.
+     ⚠`xs: 6px` 는 4px 격자에서 벗어나 있으나 **바꾸지 않는다** — 이미 배선된 컨트롤
+     여백이 전부 움직인다. 신규 단은 전부 4의 배수로 둔다. */
+  --u-space-xl:  20px;
+  --u-space-2xl: 24px;
+  --u-space-3xl: 32px;
+  --u-space-4xl: 40px;
+
   /* ==========================================================================
      Type Scale — 글자 크기·굵기·행간·자간의 **한 벌**
      ★**크기만 주면 스케일이 되지 않는다.** 소비자가 크기만 받고 굵기·행간을 각자 정하면
@@ -403,11 +420,6 @@
   --u-ease-decelerate: cubic-bezier(0, 0, 0, 1);
   --u-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
 
-  /* Scrollbar Colors */
-  --u-scrollbar-color:       var(--u-neutral-500);
-  --u-scrollbar-color-hover: var(--u-neutral-600);
-  --u-scrollbar-track-color: transparent;
-
   /* ==========================================================================
      Font Styles
      ★**CJK 폴백을 스택에 포함한다 — 국제화이지 취향이 아니다.**
@@ -425,4 +437,17 @@
   --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
   --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
+}
+
+/* ★`prefers-reduced-motion` — light.css 와 같은 규칙을 이 시트도 진다. 이 시트만 쓰는
+   소비자가 있고, 두 시트를 함께 쓸 때는 어느 시트가 뒤에 오든 **마지막 선언이 이 0ms**
+   가 되도록 각 시트가 자기 블록 뒤에 둔다. 종전에는 지속시간이 위 (0,1,1) 블록에 있어
+   다크 모드에서 «동작 줄이기» 설정이 **무시됐다.** */
+@media (prefers-reduced-motion: reduce) {
+  :root:where([theme="dark"]) {
+    --u-duration-instant: 0ms;
+    --u-duration-fast:    0ms;
+    --u-duration-normal:  0ms;
+    --u-duration-slow:    0ms;
+  }
+}

package/dist/utilities/Dialog.d.ts

@@ -22,9 +22,9 @@ export interface DialogOptions {
 }
 /** Confirm Dialog 옵션 */
 export interface ConfirmDialogOptions extends DialogOptions {
-    /** 확인 버튼 텍스트 (기본: 'Confirm') */
+    /** 확인 버튼 텍스트 (기본: 현재 로케일의 `confirm` — 영어는 'Confirm') */
     confirmLabel?: string;
-    /** 취소 버튼 텍스트 (기본: 'Cancel') */
+    /** 취소 버튼 텍스트 (기본: 현재 로케일의 `cancel` — 영어는 'Cancel') */
     cancelLabel?: string;
 }
 /** Prompt Dialog 옵션 */

package/dist/utilities/Dialog.js

@@ -1,4 +1,5 @@
 import "../components/button/UButton.js";
+import { Locale } from "./Locale.js";
 import { UDialog } from "../components/dialog/UDialog.js";
 import "../components/input/UInput.js";
 import { html, nothing, render } from "lit";
@@ -29,11 +30,11 @@ var Dialog = class {
 			...options,
 			content: message,
 			actions: [{
-				label: options?.cancelLabel || "Cancel",
+				label: options?.cancelLabel || Locale.getValue("cancel"),
 				value: "cancel",
 				variant: "outlined"
 			}, {
-				label: options?.confirmLabel || "Confirm",
+				label: options?.confirmLabel || Locale.getValue("confirm"),
 				value: "confirm"
 			}]
 		}) === "confirm";
@@ -68,11 +69,11 @@ var Dialog = class {
         </div>
       `,
 			actions: [{
-				label: options?.cancelLabel || "Cancel",
+				label: options?.cancelLabel || Locale.getValue("cancel"),
 				value: "cancel",
 				variant: "outlined"
 			}, {
-				label: options?.confirmLabel || "Confirm",
+				label: options?.confirmLabel || Locale.getValue("confirm"),
 				value: "confirm"
 			}]
 		}) === "confirm" ? inputValue : null;

package/dist/utilities/Locale.d.ts

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

package/dist/utilities/Theme.d.ts

@@ -102,6 +102,24 @@ export declare class Theme {
     static accent(seed: string | null): void;
     /** 현재 시드를 현재 테마의 바탕에 맞춰 다시 계산해 적용한다. */
     private static applyAccent;
+    /**
+     * 내장 시트를 넣을 자리 — **다른 모든 스타일 «앞», 우리가 이미 넣은 것 «뒤»**.
+     *
+     * 🔴**왜 맨 앞인가.** 이 시트들은 이름 그대로 «기본값» 층이다. 소비자(또는 하우스 프리셋)가
+     * 같은 `--u-*` 토큰을 `:root` 로 덮으면 **특이도가 대등**하므로 승부는 문서 순서가 가른다 —
+     * 그런데 이 시트는 **런타임에** 붙고 소비자 시트는 번들러가 **파싱 시점에** 올리므로,
+     * 종전(`appendChild`)에는 ***언제나 기본값이 이겼다.*** 소비자 입장에서는 덮어쓰기가
+     * **오류도 경고도 없이 무효**가 되고, 값이 일부만 다르면 「적용된 것처럼」 보이기까지 한다.
+     *
+     * ⚠**`<meta charset>` 류를 넘어 맨 앞으로 밀지 않는다** — 첫 «스타일» 앞에만 선다.
+     * 스타일이 하나도 없으면 붙일 곳이 없으므로 그대로 끝에 넣는다(뒤에 오는 것이 이긴다는
+     * 성질은 그대로다).
+     *
+     * ⚠**우리 시트끼리의 순서는 유지한다** — 매번 `firstChild` 앞에 넣으면 번들 순서가 뒤집힌다.
+     * 실제로는 `light`/`dark` 의 상대 순서가 결과를 바꾸지 않지만(`dark.css` 는
+     * `:root[theme="dark"]` 로 **특이도가 이긴다**), 순서가 뒤집히는 자료구조를 남기지 않는다.
+     */
+    private static builtInAnchor;
     /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
     private static log;
 }

package/dist/utilities/Theme.js

@@ -73,8 +73,8 @@ var Theme = class {
 					this.log("style already present, skipping", name);
 					continue;
 				}
-				document.head.appendChild(style);
-				this.log("appended style to head", name);
+				document.head.insertBefore(style, this.builtInAnchor());
+				this.log("inserted style at the base layer", name);
 			}
 		} else {
 			document.head.querySelectorAll("style[data-name]").forEach((el) => el.remove());
@@ -218,6 +218,29 @@ var Theme = class {
 		for (const [name, value] of Object.entries(accentCustomProperties(ramp))) root.style.setProperty(name, value);
 		this.log("accent applied", this.accentSeed, "→", ramp);
 	}
+	/**
+	* 내장 시트를 넣을 자리 — **다른 모든 스타일 «앞», 우리가 이미 넣은 것 «뒤»**.
+	*
+	* 🔴**왜 맨 앞인가.** 이 시트들은 이름 그대로 «기본값» 층이다. 소비자(또는 하우스 프리셋)가
+	* 같은 `--u-*` 토큰을 `:root` 로 덮으면 **특이도가 대등**하므로 승부는 문서 순서가 가른다 —
+	* 그런데 이 시트는 **런타임에** 붙고 소비자 시트는 번들러가 **파싱 시점에** 올리므로,
+	* 종전(`appendChild`)에는 ***언제나 기본값이 이겼다.*** 소비자 입장에서는 덮어쓰기가
+	* **오류도 경고도 없이 무효**가 되고, 값이 일부만 다르면 「적용된 것처럼」 보이기까지 한다.
+	*
+	* ⚠**`<meta charset>` 류를 넘어 맨 앞으로 밀지 않는다** — 첫 «스타일» 앞에만 선다.
+	* 스타일이 하나도 없으면 붙일 곳이 없으므로 그대로 끝에 넣는다(뒤에 오는 것이 이긴다는
+	* 성질은 그대로다).
+	*
+	* ⚠**우리 시트끼리의 순서는 유지한다** — 매번 `firstChild` 앞에 넣으면 번들 순서가 뒤집힌다.
+	* 실제로는 `light`/`dark` 의 상대 순서가 결과를 바꾸지 않지만(`dark.css` 는
+	* `:root[theme="dark"]` 로 **특이도가 이긴다**), 순서가 뒤집히는 자료구조를 남기지 않는다.
+	*/
+	static builtInAnchor() {
+		const ours = document.head.querySelectorAll("style[data-name]");
+		const last = ours[ours.length - 1];
+		if (last) return last.nextSibling;
+		return document.head.querySelectorAll("style, link[rel~=\"stylesheet\"]")[0] ?? null;
+	}
 	/** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
 	static log(...args) {
 		if (this._isDebugMode) console.log("[theme]", ...args);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.43.0",
+  "version": "1.44.1",
   "keywords": [
     "iyulab",
     "components",

package/skills/iyulab-components/SKILL.md

@@ -78,6 +78,13 @@ import { UButton, UInput } from '@iyulab/components/react';
 - [`u-form`](./references/components/form.md) — Form group with two-way model binding and validation
 - [`u-option`](./references/components/option.md) — Selectable option item for `u-select`, `u-radio`, `u-input`
 
+**`disabled` is exposed where assistive technology and test tools look for it** — on the node that
+carries the control's role, not on the host element. Native nodes use native `disabled`
+(`u-input`, `u-textarea`, `u-checkbox`, `u-switch`, `u-file-input`); role nodes get
+`aria-disabled="true"` (the `combobox` of `u-select`/`u-date-picker`, the `radiogroup` of
+`u-radio`/`u-rating`, the `slider` thumbs). In end-to-end tests, locate controls by role
+(`getByRole('combobox')`) rather than by tag, so actionability checks see the disabled state.
+
 ### Overlay & Floating
 
 - [`u-dialog`](./references/components/dialog.md) — Modal/non-modal dialog with configurable placement

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

@@ -62,6 +62,18 @@ Inherits all `UFloatingElement` properties (see [floating.md](../extensions/floa
 
 `click` and `escape` express user intent and always close the popover.
 
+**Only an open popover consumes `Escape`.** When it closes on `Escape` it calls `preventDefault()`;
+a closed popover leaves the event alone. So `event.defaultPrevented` at the document or window
+level reliably means *something above already handled this key* — use it to decide whether your
+own panel should close:
+
+```ts
+document.addEventListener('keydown', (e) => {
+  if (e.key !== 'Escape' || e.defaultPrevented) return; // an open list or popover took it
+  closeMyPanel();
+});
+```
+
 `scroll` and `resize` are viewport-geometry changes and **only close the popover when it is
 anchored to a coordinate** — i.e. the virtual anchor created by `trigger="contextmenu"`, whose
 `clientX`/`clientY` stop matching whatever they pointed at once the page reflows.

package/skills/iyulab-components/references/extensions/overlay.md

@@ -8,7 +8,9 @@ Abstract base class for full-screen or contained overlays (dialogs, drawers, sid
 
 - **Focus-trap** via `focus-trap` library
 - **Body scroll lock** while open
-- **ESC key** and **backdrop click** close
+- **ESC key** and **backdrop click** close — an `Escape` that something inside the overlay
+  already consumed (`defaultPrevented`, e.g. an open select list closing itself) does not close
+  the overlay, so one press closes one layer
 - **OverlayManager** z-index stacking
 
 ## When to extend

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

@@ -55,8 +55,8 @@ interface DialogOptions {
 }
 
 interface ConfirmDialogOptions extends DialogOptions {
-  confirmLabel?: string;     // default: 'Confirm'
-  cancelLabel?: string;      // default: 'Cancel'
+  confirmLabel?: string;     // default: the active locale's `confirm` (en: 'Confirm')
+  cancelLabel?: string;      // default: the active locale's `cancel` (en: 'Cancel')
 }
 
 interface PromptDialogOptions extends ConfirmDialogOptions {

package/skills/iyulab-components/references/utilities/theme.md

@@ -51,6 +51,12 @@ changes**, because those targets are relative to the page background.
 > from `--u-primary-color-strong`, so they stay on the default ramp and the brand looks
 > half-applied. (The sheet derives no step from `--u-primary-color` — measured: 0 references.)
 
+> **Load that block however you like — a plain static `import` is enough.** Since 1.44.0 the
+> built-in sheets are inserted *ahead of* the document's other styles, so your override wins at
+> equal specificity whenever it arrives. Before 1.44.0 they were appended last and a static
+> import silently did nothing; on those versions, load your sheet after `await Theme.init(...)`.
+> Specificity still decides: a `:where(:root)` wrapper drops to 0 and loses regardless of order.
+
 ## API
 
 | Member | Type | Description |