@iyulab/components 1.18.0 → 1.21.0

package/dist/styles/light.css

@@ -198,6 +198,11 @@
   --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%;
 
@@ -215,6 +220,16 @@
   --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);
@@ -259,10 +274,14 @@
   --u-border-color-strong:   var(--u-neutral-400);
   --u-border-color-hover:    var(--u-neutral-400);
 
+  /* ★상태 테두리는 `-strong` 단이다 — 면이 아니라 **면 위에 그리는 선**이기 때문이다.
+     1.16.0 이 가른 용도(`-color` = 면 / `-strong` = 면·바탕 위)에 이 자리가 맞춰지지
+     않아 다크에서 미달이었다: focus 2.74 · invalid 2.44 (WCAG 1.4.11 기준 3.0).
+     `-strong` 으로 옮기면 다크 4.74 / 4.34, 라이트 5.75 / 5.62 — 두 테마 모두 단조 상승. */
   --u-input-border-color:         var(--u-neutral-300);
   --u-input-border-color-hover:   var(--u-neutral-400);
-  --u-input-border-color-focus:   var(--u-primary-color);
-  --u-input-border-color-invalid: var(--u-danger-color);
+  --u-input-border-color-focus:   var(--u-primary-color-strong);
+  --u-input-border-color-invalid: var(--u-danger-color-strong);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-0);
@@ -311,16 +330,132 @@
   --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);
   --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);
 
+  /* ==========================================================================
+     Elevation Scale — 높이(그림자)
+
+     ★색 축은 있었지만 **높이 축이 없었다.** 그 결과 컴포넌트가 그림자를 리터럴로
+     썼고, 같은 리듬을 의도한 자리에 서로 다른 값 11가지가 생겼다(카드 .1 vs 캐러셀
+     .15 — 둘 다 "표면에 얹힌 카드"인데 알파가 다르다).
+
+     ⚠**그리고 그 리터럴들은 테마를 몰랐다** — `rgba(0,0,0,.1)` 은 다크 바탕에서
+     거의 보이지 않는다. 이 축을 경유하면 다크의 진한 알파(.25~.60)를 자동으로 받는다.
+
+     ⚠**알파를 `--u-shadow-color-*` 로 중첩하지 않고 인라인한다.** use-site 폴백
+     생성기는 합성 값을 리터럴로 다루므로, 중첩하면 `var(--u-shadow-md, 0 2px 8px
+     var(--u-shadow-color-normal))` 처럼 **폴백 안에 또 토큰이 들어간다** — 시트가
+     없을 때 그 폴백도 함께 무효가 되어 그림자가 통째로 사라진다.
+     두 축의 알파가 어긋나지 않는지는 `tests/build/elevation-scale.test.ts` 가 지킨다.
+     ========================================================================== */
+  --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);    /* = shadow-color-weak     — 표면에 얹힌 작은 컨트롤(탭·손잡이) */
+  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);    /* = shadow-color-normal   — 카드·표면 */
+  --u-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06);   /* = shadow-color-strong   — 떠 있는 레이어(드롭다운·알림) */
+  --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08);   /* = shadow-color-stronger — 모달·최상위(대화상자·툴팁) */
+
+
+  /* ==========================================================================
+     Type Scale — 글자 크기·굵기·행간·자간의 **한 벌**
+     ★**크기만 주면 스케일이 되지 않는다.** 소비자가 크기만 받고 굵기·행간을 각자 정하면
+     결국 화면마다 다른 위계가 생긴다 — 그래서 네 값을 **단 단위로 묶어** 낸다.
+
+     단 이름은 크기가 아니라 **역할**이다(`lg`/`xl` 이 아니라 `title`/`label`). 역할로 두면
+     소비자가 *"어느 크기를 쓸까"* 가 아니라 *"이 글자는 무엇인가"* 를 묻게 된다.
+
+     ★**한글 기준으로 값을 골랐다**:
+       ⑴ 행간은 **1.4 이상**. 라틴 관례(1.2)는 한글에서 답답하다 — 받침 때문에 글자 상자가
+          세로로 꽉 차 있어 라틴과 같은 행간이면 줄이 붙어 보인다.
+       ⑵ 자간은 **0 이 기본**이고 큰 제목만 **음수**. 한글에 양수 자간(letter-spacing)을 주면
+          가독성이 떨어진다 — 라틴 소문자 조판 관례를 그대로 옮기면 안 되는 자리다.
+       ⑶ `overline` 에만 양수 자간을 둔다. 그 단은 **영문·숫자 라벨**을 전제한 자리이고,
+          한글을 넣을 소비자는 자간을 0 으로 덮어야 한다(문서에 명시).
+
+     ⚠**`text-transform` 은 토큰으로 내지 않는다.** 한글에는 대문자가 없어 `uppercase` 가
+       아무 효과가 없고, 영문이 섞이면 그것만 커져 오히려 어수선해진다.
+     ========================================================================== */
+  --u-text-display-size:     26px;
+  --u-text-display-weight:   700;
+  --u-text-display-leading:  1.4;
+  --u-text-display-tracking: -0.02em;
+
+  --u-text-title-size:       20px;
+  --u-text-title-weight:     700;
+  --u-text-title-leading:    1.45;
+  --u-text-title-tracking:   -0.01em;
+
+  --u-text-subtitle-size:    16px;
+  --u-text-subtitle-weight:  600;
+  --u-text-subtitle-leading: 1.5;
+  --u-text-subtitle-tracking: 0;
+
+  --u-text-body-size:        14px;
+  --u-text-body-weight:      400;
+  --u-text-body-leading:     1.6;
+  --u-text-body-tracking:    0;
+
+  --u-text-label-size:       13px;
+  --u-text-label-weight:     600;
+  --u-text-label-leading:    1.5;
+  --u-text-label-tracking:   0;
+
+  --u-text-caption-size:     12px;
+  --u-text-caption-weight:   400;
+  --u-text-caption-leading:  1.5;
+  --u-text-caption-tracking: 0;
+
+  --u-text-overline-size:    11px;
+  --u-text-overline-weight:  700;
+  --u-text-overline-leading: 1.45;
+  --u-text-overline-tracking: 0.06em;
+
+  /* ==========================================================================
+     Motion — 지속시간·이징
+     ★값이 없으면 앱마다 다른 속도가 생기고, `prefers-reduced-motion` 은 **반드시**
+     빠뜨리는 앱이 나온다. 축을 여기 두고 존중 규칙은 아래 미디어 쿼리가 진다.
+     ========================================================================== */
+  --u-duration-instant: 80ms;
+  --u-duration-fast:   140ms;
+  --u-duration-normal: 220ms;
+  --u-duration-slow:   320ms;
+  --u-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
+  --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-400);
   --u-scrollbar-color-hover: var(--u-neutral-500);
   --u-scrollbar-track-color: transparent;
 
-  /* Font Styles */
-  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  /* ==========================================================================
+     Font Styles
+     ★**CJK 폴백을 스택에 포함한다 — 국제화이지 취향이 아니다.**
+     종전 스택(`-apple-system, Segoe UI, Noto Sans, Helvetica, Arial`)에는 **한중일 글립을
+     가진 폰트가 하나도 없었다.** Windows 에서 한글은 `Segoe UI` 에 없으므로 UA 가 임의로
+     맑은 고딕을 고르고, macOS 는 `-apple-system` 이 Apple SD Gothic Neo 를 준다 ⇒ **같은 앱이
+     OS 마다 다른 글꼴로 렌더**됐다. 폴백을 명시하면 그 선택이 결정적이 된다.
+     ⚠**웹폰트를 로드하지 않는다.** 라이브러리가 네트워크 요청을 만들면 소비자의 CSP·
+     오프라인 환경을 깬다. 스택 맨 앞의 `Pretendard` 는 **소비자가 로드했을 때만** 잡히는
+     선택적 이름이다(없으면 조용히 다음으로 넘어간다).
+     ========================================================================== */
+  --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';
   --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;
   --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;
   --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` 존중 — **라이브러리가 진다.**
+   소비자마다 각자 처리하게 두면 반드시 빠뜨리는 앱이 나온다(그리고 그 앱은
+   접근성 감사 전까지 아무도 모른다). 지속시간 축을 0 으로 눌러 두면 이 축을
+   경유하는 모든 애니메이션이 함께 멈춘다.
+   ⚠`animation: none` 으로 강제하지 않는다 — 로딩 스피너처럼 **의미를 나르는**
+   움직임까지 죽이면 사용자가 진행 중인지 알 수 없게 된다.
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --u-duration-instant: 0ms;
+    --u-duration-fast:    0ms;
+    --u-duration-normal:  0ms;
+    --u-duration-slow:    0ms;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.18.0",
+  "version": "1.21.0",
   "keywords": [
     "iyulab",
     "components",
@@ -53,7 +53,9 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "focus-trap": "^8.2.2",
-    "lit": "^3.3.3"
+    "glob": "^13.0.6",
+    "lit": "^3.3.3",
+    "tabbable": "^6.5.0"
   },
   "peerDependencies": {
     "@lit/react": ">=1.0.8",
@@ -74,7 +76,6 @@
     "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.3.1",
-    "glob": "^13.0.6",
     "globals": "^17.7.0",
     "react": "^19.2.7",
     "typescript": "^5.9.3",