@simplysm/angular 14.2.1 → 14.2.3

package/scss/themes/_variables-ide-dark.scss

@@ -1,204 +1,207 @@
-// IDE 다크 테마 — VSCode "Dark 2026" 을 --sd-* 역할 토큰 값 맵으로만 구성(셀렉터 오버라이드 0).
-// 레퍼런스: microsoft/vscode extensions/theme-defaults/themes/2026-dark.json (v1.113 기본 테마)
-// 색 규칙(CONSTRAINT-007): --sd-color-* 팔레트 + 흰/검 알파(rgba white/black)만.
-// 값 이전 기준(FIND-015): 구 스케일 맵·ide-dark-surfaces 확정 상태를 라이트 기본값 등가 슬롯으로 역매핑.
-// 치수(gap·line-height·sheet pv/ph·topbar height)는 밀도 그룹 소유(DEC-007) — 이 맵엔 없음.
+// IDE 다크 테마 — VSCode "Dark 2026"(v1.113 기본, 2026-dark.json)을 --sd-* 역할 토큰 값 맵으로 구성.
+// 색 원천: 리터럴 rgb(팔레트 배타 폐기 — 테마 값 자립). Dark 2026 은 near-black 3단 surface +
+//   solid 텍스트/보더 + 상태만 흰알파(하이브리드) + 죽인 teal 액센트가 핵심 의도.
+// surface 3단: content #121314(editor) < canvas #191A1B(chrome/input) < elevated/overlay #202122(widget/menu).
+// 치수(gap, radius, sheet pv/ph, topbar), 폰트(Sarasa Fixed K), 그림자(off)는 IDE 컨셉 — 색 외 항목 불변.
 $dark: (
   bg: (
-    // 계층: canvas zinc-950 → control zinc-900 → elevated/overlay zinc-800
-    canvas: var(--sd-color-zinc-950),
-    control: var(--sd-color-zinc-900),
-    elevated: var(--sd-color-zinc-800),
-    overlay: var(--sd-color-zinc-800),
-    sheet: var(--sd-color-zinc-950),
+    // 계층: content #121314(메인/에디터 — 제일 어두움) < canvas #191A1B(배경, 사이드바, 토프바) < elevated/overlay #202122(카드, 팝업)
+    // editor.background #121314 = 메인 콘텐츠(content) / sideBar.background #191A1B = 배경(canvas)
+    canvas: rgb(25, 26, 27),
+    // 콘텐츠 면 = editor.background #121314 (메인/에디터/시트셀/리스트 — 제일 어두움)
+    content: rgb(18, 19, 20),
+    elevated: rgb(32, 33, 34),
+    overlay: rgb(32, 33, 34),
+    sheet: rgb(18, 19, 20),
     inverse: white,
-    // 필드 배경 — input.background 근사
-    field: var(--sd-color-zinc-900),
-    track: var(--sd-color-zinc-700),
-    // 시맨틱 solid = 깊은 스텝(600) + hover 한 단계 밝게(500) — VSCode 방식(다크에서 500 배경은 과함)
+    // 필드 배경 — input.background #191A1B
+    field: rgb(25, 26, 27),
+    // 트랙 — inactive-selection #2C2D2E 근사
+    track: rgb(44, 45, 46),
+    // 노브 — 강조텍스트 #ededed 와 통일한 밝은 손잡이(트랙, success-solid 위 대비)
+    knob: rgb(237, 237, 237),
+    // 체크박스 박스 면 = checkbox.background #242526 (별도 면 — canvas 보다 밝음)
+    checkbox: rgb(36, 37, 38),
+    // 시맨틱 solid = 뮤트 중암 채움, hover 는 더 밝게(다크 hover 밝힘 — button #297AA0→#2B7DA3)
     "gray": (
-        solid: var(--sd-color-zinc-400),
-        solid-hover: var(--sd-color-zinc-300),
-        subtle: var(--sd-color-zinc-800),
-        subtle-hover: var(--sd-color-zinc-700),
+        solid: rgb(135, 136, 137),
+        solid-hover: rgb(160, 161, 162),
+        subtle: rgb(32, 33, 34),
+        subtle-hover: rgb(42, 43, 44),
       ),
     blue-gray: (
-      solid: var(--sd-color-slate-400),
-      solid-hover: var(--sd-color-slate-300),
-      subtle: var(--sd-color-slate-800),
-      subtle-hover: var(--sd-color-slate-700),
+      solid: rgb(100, 116, 139),
+      solid-hover: rgb(120, 136, 159),
+      subtle: rgb(28, 34, 44),
+      subtle-hover: rgb(38, 46, 58),
     ),
+    // 액센트 = 죽인 teal(button.background #297AA0 / hover #2B7DA3)
     primary: (
-      solid: var(--sd-color-sky-600),
-      solid-hover: var(--sd-color-sky-500),
-      subtle: var(--sd-color-sky-950),
-      subtle-hover: var(--sd-color-sky-900),
-    ),
-    secondary: (
-      solid: var(--sd-color-sky-600),
-      solid-hover: var(--sd-color-sky-500),
-      subtle: var(--sd-color-zinc-900),
-      subtle-hover: var(--sd-color-sky-900),
-    ),
+        solid: rgb(41, 122, 160),
+        solid-hover: rgb(43, 125, 163),
+        subtle: rgb(20, 50, 63),
+        subtle-hover: rgb(26, 63, 78),
+      ),
     info: (
-      solid: var(--sd-color-cyan-600),
-      solid-hover: var(--sd-color-cyan-500),
-      subtle: var(--sd-color-cyan-950),
-      subtle-hover: var(--sd-color-cyan-900),
+      solid: rgb(57, 148, 188),
+      solid-hover: rgb(66, 158, 200),
+      subtle: rgb(16, 45, 60),
+      subtle-hover: rgb(22, 58, 76),
     ),
+    // success solid = 뮤트 다크그린(파생), tx 는 charts.green #86CF86
     success: (
-      solid: var(--sd-color-green-600),
-      solid-hover: var(--sd-color-green-500),
-      subtle: var(--sd-color-green-950),
-      subtle-hover: var(--sd-color-green-900),
-    ),
+        solid: rgb(56, 125, 86),
+        solid-hover: rgb(64, 140, 97),
+        subtle: rgb(16, 45, 30),
+        subtle-hover: rgb(22, 58, 40),
+      ),
+    // warning = inputValidation.warningBorder #B89500
     warning: (
-      solid: var(--sd-color-amber-600),
-      solid-hover: var(--sd-color-amber-500),
-      subtle: var(--sd-color-amber-950),
-      subtle-hover: var(--sd-color-amber-900),
-    ),
-    // errorForeground #f48771 근사 = red-400 (solid 는 400 기준·hover 500)
+        solid: rgb(184, 149, 0),
+        solid-hover: rgb(200, 163, 10),
+        subtle: rgb(48, 40, 4),
+        subtle-hover: rgb(60, 50, 6),
+      ),
+    // danger solid = inputValidation.errorBorder #BE1100, tx 는 errorForeground #f48771
     danger: (
-        solid: var(--sd-color-red-400),
-        solid-hover: var(--sd-color-red-500),
-        subtle: var(--sd-color-red-950),
-        subtle-hover: var(--sd-color-red-900),
+        solid: rgb(190, 17, 0),
+        solid-hover: rgb(215, 25, 5),
+        subtle: rgb(58, 14, 8),
+        subtle-hover: rgb(74, 18, 10),
       ),
-    // 오버레이·hover: list.hoverBackground #FFFFFF14 근사 — 흰 알파
+    // 상태 오버레이 = 흰알파(list.hover #FFFFFF14 / active, focus #FFFFFF22)
     state: (
-        hover: rgba(255, 255, 255, 0.05),
-        active: rgba(255, 255, 255, 0.08),
-        selected: rgba(255, 255, 255, 0.07),
+        hover: rgba(255, 255, 255, 0.08),
+        active: rgba(255, 255, 255, 0.13),
+        selected: rgba(255, 255, 255, 0.13),
+        // 포커스 없는 선택행 solid (list.inactiveSelection #2C2D2E)
+        selected-inactive: rgb(44, 45, 46),
       ),
-    disabled: var(--sd-color-zinc-800),
+    // 드롭 자리, 텍스트 선택 (list.dropBackground #3994BC1A / editor.selection #276782dd)
+    drop-target: rgba(57, 148, 188, 0.1),
+    selection: rgba(39, 103, 130, 0.87),
+    // 비활성 = 가라앉음(canvas 보다 어둡게)
+    disabled: rgb(22, 23, 24),
     busy-overlay: rgba(0, 0, 0, 0.6),
-    busy-indicator: rgba(255, 255, 255, 0.13),
+    // 진행/로딩 중립 (progressBar.background #878889)
+    busy-indicator: rgb(135, 136, 137)
   ),
-  // 텍스트: 흰색 알파 스케일 (Dark 2026 근사 — #ededed/#bfbfbf/#8c8c8c/#555)
+  // 텍스트 = solid 그레이(foreground #bfbfbf, description #8c8c8c, disabled #555, activeSelection #ededed)
   tx: (
-      strong: rgba(255, 255, 255, 0.93),
-      default: rgba(255, 255, 255, 0.75),
-      muted: rgba(255, 255, 255, 0.55),
-      faint: rgba(255, 255, 255, 0.33),
+      strong: rgb(237, 237, 237),
+      default: rgb(191, 191, 191),
+      muted: rgb(140, 140, 140),
+      faint: rgb(85, 85, 85),
       on-inverse: white,
       on-inverse-muted: rgba(255, 255, 255, 0.75),
       on-inverse-disabled: rgba(255, 255, 255, 0.55),
-      disabled: rgba(255, 255, 255, 0.33),
-      // 링크·단독 텍스트 = 깊은 톤(600), hover 시 500 (쨍함 억제)
-      "gray": var(--sd-color-zinc-400),
-      gray-hover: var(--sd-color-zinc-300),
-      gray-subtle: var(--sd-color-zinc-200),
-      blue-gray: var(--sd-color-slate-400),
-      blue-gray-hover: var(--sd-color-slate-300),
-      blue-gray-subtle: var(--sd-color-slate-200),
-      primary: var(--sd-color-sky-600),
-      primary-hover: var(--sd-color-sky-500),
-      primary-subtle: var(--sd-color-sky-400),
-      secondary: var(--sd-color-sky-600),
-      secondary-hover: var(--sd-color-sky-500),
-      secondary-subtle: var(--sd-color-sky-400),
-      info: var(--sd-color-cyan-600),
-      info-hover: var(--sd-color-cyan-500),
-      info-subtle: var(--sd-color-cyan-300),
-      success: var(--sd-color-green-600),
-      success-hover: var(--sd-color-green-500),
-      success-subtle: var(--sd-color-green-300),
-      warning: var(--sd-color-amber-600),
-      warning-hover: var(--sd-color-amber-500),
-      warning-subtle: var(--sd-color-amber-300),
-      danger: var(--sd-color-red-400),
-      danger-hover: var(--sd-color-red-500),
-      danger-subtle: var(--sd-color-red-300),
+      disabled: rgb(85, 85, 85),
+      // 시맨틱 텍스트 = VSCode 라이트 foreground(link #48A0C7, charts.* 등)
+      "gray": rgb(140, 140, 140),
+      gray-hover: rgb(191, 191, 191),
+      gray-subtle: rgb(191, 191, 191),
+      blue-gray: rgb(148, 163, 184),
+      blue-gray-hover: rgb(170, 183, 200),
+      blue-gray-subtle: rgb(170, 183, 200),
+      primary: rgb(72, 160, 199),
+      primary-hover: rgb(83, 165, 202),
+      primary-subtle: rgb(130, 197, 224),
+      info: rgb(87, 163, 248),
+      info-hover: rgb(120, 185, 250),
+      info-subtle: rgb(130, 190, 250),
+      success: rgb(134, 207, 134),
+      success-hover: rgb(160, 220, 160),
+      success-subtle: rgb(150, 215, 150),
+      warning: rgb(224, 185, 127),
+      warning-hover: rgb(232, 200, 150),
+      warning-subtle: rgb(232, 205, 160),
+      danger: rgb(244, 135, 113),
+      danger-hover: rgb(248, 160, 140),
+      danger-subtle: rgb(248, 170, 152),
     ),
-  // 보더: 흰색 알파 헤어라인 (widget #2A2B2C·input #333536 근사)
+  // 보더 = solid 그레이(widget.border #2A2B2C, input.border #333536, checkbox #707070)
   bd: (
-      hairline: rgba(255, 255, 255, 0.05),
-      soft: rgba(255, 255, 255, 0.08),
-      default: rgba(255, 255, 255, 0.1),
-      strong: rgba(255, 255, 255, 0.12),
-      emphasis: rgba(255, 255, 255, 0.16),
-      field: rgba(255, 255, 255, 0.1),
-      disabled: rgba(255, 255, 255, 0.08),
+      hairline: rgb(36, 37, 38),
+      soft: rgb(42, 43, 44),
+      default: rgb(42, 43, 44),
+      strong: rgb(51, 53, 54),
+      emphasis: rgb(112, 112, 112),
+      field: rgb(51, 53, 54),
+      disabled: rgb(42, 43, 44),
       "gray": (
-        solid: var(--sd-color-zinc-400),
-        solid-hover: var(--sd-color-zinc-300),
-        subtle: var(--sd-color-zinc-600),
+        solid: rgb(135, 136, 137),
+        solid-hover: rgb(160, 161, 162),
+        subtle: rgb(51, 53, 54),
       ),
       blue-gray: (
-        solid: var(--sd-color-slate-400),
-        solid-hover: var(--sd-color-slate-300),
-        subtle: var(--sd-color-slate-600),
+        solid: rgb(100, 116, 139),
+        solid-hover: rgb(120, 136, 159),
+        subtle: rgb(51, 53, 54),
       ),
       primary: (
-        solid: var(--sd-color-sky-600),
-        solid-hover: var(--sd-color-sky-500),
-        subtle: var(--sd-color-sky-500),
-      ),
-      secondary: (
-        solid: var(--sd-color-sky-600),
-        solid-hover: var(--sd-color-sky-500),
-        subtle: var(--sd-color-sky-500),
+        solid: rgb(41, 122, 160),
+        solid-hover: rgb(43, 125, 163),
+        subtle: rgb(38, 90, 110),
       ),
       info: (
-        solid: var(--sd-color-cyan-600),
-        solid-hover: var(--sd-color-cyan-500),
-        subtle: var(--sd-color-cyan-600),
+        solid: rgb(57, 148, 188),
+        solid-hover: rgb(66, 158, 200),
+        subtle: rgb(30, 74, 96),
       ),
       success: (
-        solid: var(--sd-color-green-600),
-        solid-hover: var(--sd-color-green-500),
-        subtle: var(--sd-color-green-600),
+        solid: rgb(56, 125, 86),
+        solid-hover: rgb(64, 140, 97),
+        subtle: rgb(34, 72, 52),
       ),
       warning: (
-        solid: var(--sd-color-amber-600),
-        solid-hover: var(--sd-color-amber-500),
-        subtle: var(--sd-color-amber-600),
+        solid: rgb(184, 149, 0),
+        solid-hover: rgb(200, 163, 10),
+        subtle: rgb(90, 74, 10),
       ),
       danger: (
-        solid: var(--sd-color-red-400),
-        solid-hover: var(--sd-color-red-500),
-        subtle: var(--sd-color-red-400),
+        solid: rgb(190, 17, 0),
+        solid-hover: rgb(215, 25, 5),
+        subtle: rgb(96, 30, 20),
       ),
     ),
+  // focusBorder #3994BCB3 (70% 알파 teal)
   focus-ring: (
-    color: var(--sd-color-sky-600),
-  ),
-  // Dark 2026 scrollbarSlider.* 근사 (DEC-011)
+      color: rgba(57, 148, 188, 0.7),
+    ),
+  // scrollbarSlider #A8A9AA85/90
   scrollbar: (
-      thumb: rgba(255, 255, 255, 0.1),
-      thumb-hover: rgba(255, 255, 255, 0.16),
+      thumb: rgba(168, 169, 170, 0.52),
+      thumb-hover: rgba(168, 169, 170, 0.565),
       track: rgba(255, 255, 255, 0.03),
     ),
-  // 그림자 전면 제거 — VSCode 는 경계를 보더로 세움
+  // 그림자 전면 제거 — dark JSON 은 widget.shadow 부재, 계층을 휘도 3단으로 표현
   shadow: (
       size: 0,
       blur-mult: 0,
     ),
-  // 다크는 그림자가 약해 카드 경계를 헤어라인으로, 포커스 시 상단 액센트 라인
-  // (tab.activeBorderTop #3994BC 근사 = sky-500)
+  // 카드 경계 = solid widget.border #2A2B2C. focus 는 전체 outline(focus-ring)으로 — 상단 액센트 라인 제거
   card: (
-      bd: rgba(255, 255, 255, 0.08),
-      bd-active: var(--sd-color-sky-500),
+      bd: rgb(42, 43, 44),
+      bd-active: transparent,
       shadow: none,
       shadow-hover: none,
     ),
-  // 오버레이 elevated 경계 — editorWidget/menu 배경 + widget.border #2A2B2C 근사
+  // 오버레이 경계 — editorWidget/menu 배경(#202122) + widget.border #2A2B2C solid
   modal: (
-      bd: rgba(255, 255, 255, 0.22),
-      header-bg: var(--sd-color-zinc-800),
-      header-tx: rgba(255, 255, 255, 0.75),
-      header-tx-muted: var(--sd-color-zinc-400),
+      bd: rgb(42, 43, 44),
+      header-bg: rgb(32, 33, 34),
+      header-tx: rgb(191, 191, 191),
+      header-tx-muted: rgb(140, 140, 140),
     ),
   dropdown: (
-    bd: rgba(255, 255, 255, 0.22),
+    bd: rgb(42, 43, 44),
   ),
-  // 권한표 그룹 행 — theme 원색 solid 를 무채 어두운 행으로
+  // 권한표 그룹 행 — 원색 solid 를 무채 어두운 행으로
   permission-group: (
-      bg: var(--sd-color-zinc-800),
+      bg: rgb(32, 33, 34),
       tx: rgba(255, 255, 255, 0.75),
     ),
-  // VSCode 수준 소형 라운드 — 버튼·인풋 2px, 위젯·메뉴 4px 급 (12px 기준)
+  // VSCode 수준 소형 라운드 — 버튼, 인풋 2px, 위젯, 메뉴 4px 급(12px 기준)
   radius: (
       xs: 0.0833rem,
       sm: 0.0833rem,
@@ -207,7 +210,26 @@ $dark: (
       xl: 0.3333rem,
       xxl: 0.5rem,
     ),
-  // 폰트는 이 테마 컨셉이라 여기서만 Sarasa Fixed K 로 덮는다(라이트·블루프린트 불변)
+  // 치수 — 오밀조밀(구 밀도 compact 이관). 라이트, 블루프린트는 기본 치수 유지.
+  gap: (
+      xxs: 0.0833rem,
+      xs: 0.0833rem,
+      sm: 0.1667rem,
+      default: 0.3333rem,
+      lg: 0.4167rem,
+      xl: 0.6667rem,
+      xxl: 1rem,
+    ),
+  // line-height: 1.5em,
+  // line-height-strip-unit: 1.5,
+  sheet: (
+      pv: 0.0833rem,
+      ph: 0.1667rem,
+    ),
+  topbar: (
+    height: 2rem,
+  ),
+  // 폰트는 이 테마 컨셉이라 여기서만 Sarasa Fixed K 로 덮는다(라이트, 블루프린트 불변)
   font-family: '"Sarasa Fixed K", ui-monospace, monospace',
   font-family-field: '"Sarasa Fixed K", ui-monospace, monospace',
   font-family-monospace: '"Sarasa Fixed K", ui-monospace, monospace',

package/src/controls/button/sd-anchor.ts

@@ -60,7 +60,7 @@ import {
 })
 export class SdAnchor {
   disabled = input(false, { transform: booleanAttribute });
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >("primary");
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">(
+    "primary",
+  );
 }

package/src/controls/button/sd-button.ts

@@ -37,7 +37,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           padding: var(--sd-gap-sm) var(--sd-gap-lg);
           width: 100%;
 
-          background-color: var(--sd-bg-control);
+          background-color: var(--sd-bg-content);
           border-color: var(--sd-bd-primary-solid);
           border-radius: var(--sd-radius-default);
 
@@ -184,7 +184,6 @@ export class SdButton {
   type = input<"button" | "submit">("button");
   theme = input<
     | "primary"
-    | "secondary"
     | "info"
     | "success"
     | "warning"
@@ -193,7 +192,6 @@ export class SdButton {
     | "blue-gray"
     | "link"
     | "link-primary"
-    | "link-secondary"
     | "link-info"
     | "link-success"
     | "link-warning"

package/src/controls/checkbox/sd-checkbox.ts

@@ -135,7 +135,7 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
 
         &[data-sd-theme="white"] {
           > ._indicator_rect {
-            background-color: var(--sd-bg-control);
+            background-color: var(--sd-bg-checkbox);
             border-color: var(--sd-bd-field);
           }
 
@@ -279,15 +279,7 @@ export class SdCheckbox {
   inline = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
   theme = input<
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "warning"
-    | "danger"
-    | "gray"
-    | "blue-gray"
-    | "white"
+    "primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray" | "white"
   >();
 
   contentStyle = input<string>();

package/src/controls/checkbox/sd-switch.ts

@@ -56,7 +56,7 @@ import { setupModelHook } from "../../core/setupModelHook";
             height: calc(var(--sd-line-height) - var(--sd-gap-xs));
             border-radius: 100%;
 
-            background-color: var(--sd-bg-control);
+            background-color: var(--sd-bg-knob);
 
             transition: transform var(--sd-animation-duration);
           }
@@ -123,9 +123,7 @@ export class SdSwitch {
   inset = input(false, { transform: booleanAttribute });
 
   size = input<"sm" | "lg">();
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
 
   constructor() {
     setupModelHook(this.value, this.canChangeFn);

package/src/controls/dropdown/sd-dropdown.ts

@@ -42,7 +42,8 @@ export class SdDropdown {
   });
 
   private _popupEl?: HTMLElement;
-  private _mouseoverEl?: HTMLElement;
+  /** `<svg>` 등 비-HTML 요소도 hover 대상이 되므로 `Element` 로 받는다. */
+  private _mouseoverEl?: Element;
   private _backdropEl?: HTMLElement;
   private readonly _isMobile;
   private readonly _mql: MediaQueryList;
@@ -88,7 +89,8 @@ export class SdDropdown {
           this._onDocumentScrollCapture(event);
         };
         const onMouseover = (event: Event) => {
-          this._mouseoverEl = (event as MouseEvent).target as HTMLElement;
+          const target = (event as MouseEvent).target;
+          this._mouseoverEl = target instanceof Element ? target : undefined;
         };
         const onBlur = (event: Event) => {
           this._onDocumentBlurCapture(event as FocusEvent);
@@ -245,18 +247,27 @@ export class SdDropdown {
       }
     }
 
+    // 팝업 내부 요소가 disabled 로 전환되며 포커스를 잃은 경우.
+    // 브라우저가 렌더 도중 동기 blur 를 발사하는 경로이며, 사용자가 팝업을 벗어난 것이 아니다.
+    // 여기서 팝업을 닫으면 렌더 중 signal 쓰기가 되어 NG0600 이 발생한다.
+    const blurredEl = event.target;
+    if (
+      relatedTarget == null &&
+      blurredEl instanceof HTMLElement &&
+      (contentEl.contains(blurredEl) === true || popupEl.contains(blurredEl) === true) &&
+      blurredEl.matches(":disabled")
+    ) {
+      this._restoreFocus();
+      return;
+    }
+
     const mouseoverEl = this._mouseoverEl;
     if (
       relatedTarget == null &&
-      mouseoverEl instanceof HTMLElement &&
+      mouseoverEl instanceof Element &&
       (contentEl.contains(mouseoverEl) === true || popupEl.contains(mouseoverEl) === true)
     ) {
-      const tabbable = popupEl.findFirstTabbableChild();
-      if (tabbable != null) {
-        tabbable.focus();
-      } else {
-        contentEl.focus();
-      }
+      this._restoreFocus();
       return;
     }
 
@@ -265,6 +276,19 @@ export class SdDropdown {
     }
   }
 
+  /** 팝업이 열린 상태를 유지해야 할 때 포커스를 팝업 안으로 되돌린다. */
+  private _restoreFocus(): void {
+    const popupEl = this._popupEl;
+    if (popupEl == null) return;
+
+    const tabbable = popupEl.findFirstTabbableChild();
+    if (tabbable != null) {
+      tabbable.focus();
+    } else {
+      this._elRef.nativeElement.focus();
+    }
+  }
+
   private _removePopup(): void {
     if (this._backdropEl != null) {
       this._backdropEl.remove();

package/src/controls/input/sd-textarea.ts

@@ -160,7 +160,7 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-inset="true"] {
             > ._contents {
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               color: var(--sd-tx-default);
             }
           }
@@ -190,9 +190,7 @@ export class SdTextarea {
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
   validatorFn = input<(value: string | undefined) => string | undefined>();
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   inputStyle = input<string>();
   inputClass = input<string>();
 

package/src/controls/input/sd-textfield-type-handlers.ts

@@ -160,7 +160,7 @@ function createNumberHandler(): TextfieldTypeHandler {
     },
     isIncomplete(raw) {
       const inputValue = raw.replace(/[^0-9-.]/g, "");
-      // 부호·소수점 형식은 갖췄으나 아직 완성되지 않은 진행 상태 ("-", "12.", ".", "-.")
+      // 부호, 소수점 형식은 갖췄으나 아직 완성되지 않은 진행 상태 ("-", "12.", ".", "-.")
       // Number("12.")===12 이므로 endsWith(".") 를 별도 판정 (parse 의 실패 조건과 정합)
       return (
         /^-?\d*\.?\d*$/.test(inputValue)

package/src/controls/input/sd-textfield.ts

@@ -273,7 +273,7 @@ import { textfieldTypeHandlers, type SdTextfieldTypes } from "./sd-textfield-typ
           // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-inset="true"] {
             > ._contents {
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               color: var(--sd-tx-default);
             }
           }
@@ -326,13 +326,11 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   inline = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
 
   private readonly _inputElRef = viewChild<ElementRef<HTMLInputElement>>("inputEl");
 
-  // 실제 input 의 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
+  // 실제 input 의 브라우저 native 제약 위반(이메일 형식, 날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
   private readonly _nativeInvalidMessage = signal("");
 
   // IME 조합(한글 등) 중 여부. 조합 중에는 미완성 자모가 model 로 흐르지 않도록 갱신을 보류.
@@ -375,11 +373,11 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         if (this._composing) return;
 
         // 편집(포커스) 중이라도 변경 origin 을 구분한다.
-        // 사용자 입력이 만든 DOM(정규화 차이·진행 중 입력 포함)은 보호하고,
-        // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋·prefill·표시옵션 변경)는 되써서 반영한다.
+        // 사용자 입력이 만든 DOM(정규화 차이, 진행 중 입력 포함)은 보호하고,
+        // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋, prefill, 표시옵션 변경)는 되써서 반영한다.
         if (document.activeElement === inputEl) {
           const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
-          // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿·IME 보호
+          // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿, IME 보호
           const domReflectsModel =
             domParsed != null &&
             this._handler().toControlValue(domParsed, {
@@ -399,9 +397,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     }
 
     setupInvalid(() => {
-      // 비활성·읽기전용 필드는 사용자가 편집할 수 없으므로 검증에서 제외 (네이티브 disabled 동작과 동일)
-      if (this.disabled() || this.readonly()) return "";
-
+      // 검증은 편집 가능 여부와 무관하다. disabled, readonly 여도 값이 제약을 어기면 invalid 다.
+      // 값이 무의미한 맥락이면 소비자가 제약(required 등)을 함께 내려야 한다.
       const value = this.value();
       const handlerErrors = this._handler().validate(value, {
         required: this.required(),
@@ -422,7 +419,7 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         }
       }
 
-      // 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등)을 우리 검증(빨간점)에 합류
+      // 브라우저 native 제약 위반(이메일 형식, 날짜 미완성 등)을 우리 검증(빨간점)에 합류
       const nativeMessage = this._nativeInvalidMessage();
       if (nativeMessage !== "") {
         errorMessages.push(nativeMessage);