fix: share neutral inset focus defaults across DDS fields

.changeset/neutral-inset-focus.md

@@ -0,0 +1,11 @@
+---
+"@devslab/dds-tokens": patch
+"@devslab/dds-css": patch
+---
+
+Use a shared neutral focus color in both themes: #52606d in light mode and
+#b0bbc4 in dark mode. Text, multiline, select, choice, number and date/range
+inputs now draw their 2px focus ring inside the existing border box. Calendar
+popup focus uses the same semantic focus color. Keyboard behavior, error
+borders, disabled states and the outer ring placement of small controls remain
+unchanged. These defaults are shared by CSS, Solid, React, Vue and Svelte.

docs/design-system.ko.md

@@ -179,7 +179,7 @@
 | `color.text.brand` | `cyan.700` | `cyan.400` | 브랜드 텍스트·링크 |
 | `color.border.default` | `zinc.200` | `zinc.800` | 기본 보더 |
 | `color.border.strong` | `zinc.300` | `zinc.700` | 입력 필드 등 강조 보더 |
-| `color.border.focus` | `cyan.500` | `cyan.400` | 포커스 링 |
+| `color.border.focus` | `neutral-focus.light` (`#52606d`) | `neutral-focus.dark` (`#b0bbc4`) | 중립색 포커스 링 |
 | `color.status.success` / `.success-bg` | `green.700` / `green.50` | `green.400` / `green.900` | 성공 |
 | `color.status.warning` / `.warning-bg` | `amber.700` / `amber.50` | `amber.400` / `amber.900` | 경고 |
 | `color.status.danger` / `.danger-bg` | `red.700` / `red.50` | `red.400` / `red.900` | 위험·오류 |
@@ -437,7 +437,11 @@ Dialog, BottomSheet (native) / Modal (web), Toast, Tooltip (web), EmptyState.
 - 텍스트 대비 4.5:1 이상, 대형 텍스트·UI 요소 3:1 이상 (WCAG AA)
 - 터치 타깃 44×44 (모바일) / 클릭 타깃 24×24 (웹) 이상
 - 웹: 모든 인터랙티브 요소 키보드 도달 가능, `focus-visible` 링 표시
-  (`color.border.focus`, 2px, offset 2px)
+  (`color.border.focus`, 2px). 텍스트·여러 줄·선택·복합 선택·숫자·날짜/기간
+  입력은 offset -2px로 기존 테두리 안쪽에 맞춘다. 오류 입력은 -3px로
+  1px 오류 경계를 보존한다. 작은 컨트롤의 위치는 각 컴포넌트 규칙을
+  유지한다. 달력 팝업 초점도 같은 의미 색상을 사용한다.
+  제품 테마는 토큰을 명시적으로 덮어쓸 수 있으며 브랜드색·오류색과 구분한다.
 - 아이콘 단독 버튼은 `aria-label` (웹) / `accessibilityLabel` (RN) 필수
 - 색만으로 상태를 전달하지 않는다 (아이콘·텍스트 병행)
 - 모션 감소 설정 존중 (§3.6)

docs/design-system.md

@@ -187,7 +187,7 @@ toggle**; both mappings are first-class from day one.
 | `color.text.brand` | `cyan.700` | `cyan.400` | brand text & links |
 | `color.border.default` | `zinc.200` | `zinc.800` | default borders |
 | `color.border.strong` | `zinc.300` | `zinc.700` | emphasized borders (inputs) |
-| `color.border.focus` | `cyan.500` | `cyan.400` | focus ring |
+| `color.border.focus` | `neutral-focus.light` (`#52606d`) | `neutral-focus.dark` (`#b0bbc4`) | neutral focus ring |
 | `color.status.success` / `.success-bg` | `green.700` / `green.50` | `green.400` / `green.900` | success |
 | `color.status.warning` / `.warning-bg` | `amber.700` / `amber.50` | `amber.400` / `amber.900` | warning |
 | `color.status.danger` / `.danger-bg` | `red.700` / `red.50` | `red.400` / `red.900` | danger · errors |
@@ -458,7 +458,12 @@ the docs.
 - Text contrast ≥ 4.5:1; large text and UI elements ≥ 3:1 (WCAG AA)
 - Touch targets ≥ 44×44 (mobile) / click targets ≥ 24×24 (web)
 - Web: every interactive element keyboard-reachable, with a `focus-visible`
-  ring (`color.border.focus`, 2px, offset 2px)
+  ring (`color.border.focus`, 2px). Text, multiline, select, choice, number and
+  date/range input rings use offset -2px, inside the existing border box.
+  Invalid fields use -3px to leave their 1px error border visible.
+  Small controls retain their component-specific offset. Calendar popup focus
+  uses the same semantic focus color. Product themes may explicitly override
+  the token; brand and error colors remain separate.
 - Icon-only buttons require `aria-label` (web) / `accessibilityLabel` (RN)
 - Never convey state by color alone (pair with icon or text)
 - Respect reduced-motion settings (§3.6)

docs/qa/focus-defaults-20261025/README.ko.md

@@ -0,0 +1,30 @@
+# DDS 공통 초점 기본값 · 2026-10-25
+
+사용자는 FM에서 확인한 중립색 초점과 테두리 안쪽 정렬을 다음 DDS 소비자에도 기본 적용하고 패키지 배포까지 요청했다. 기존 DDS 레이아웃·브랜드 면·폼 API·키보드 동작을 보존하며 Taste로 공통 입력 경계를 검토한 뒤 Impeccable Polish로 색·간격·오류 상태를 마무리했다. 새 페이지/통계/모션을 추가하지 않았다.
+
+## 실제 변경
+
+- `color.border.focus`: palette의 neutral-focus.light/dark를 통해 밝음#52606d, 어두움#b0bbc4. 기존 의미 토큰이므로 CSS·Tailwind·TS/RN·Ionic 생성 결과에 함께 전달된다.
+- Input/TextField/Textarea/native Select/Choice/NumberInput/DatePicker/MonthPicker/DateRangePicker: 2px 초점선을 -2px offset으로 박스 안쪽 정렬. 복합 입력은 기존 wrapper 초점선 하나를 유지한다.
+- 오류 입력은 -3px로 기존1px 오류 테두리를 보존한다. 달력 팝업 초점색도 border.focus를 사용한다. 작은 컨트롤은 기존 컴포넌트별 위치를 유지한다.
+- Solid/React/Vue/Svelte는 같은 공유 CSS와 토큰을 사용한다. 기존 제품의 명시적 토큰 override나 고정된 구버전은 자동으로 바뀌지 않는다.
+- changeset은 tokens/css patch 두 항목. 12개 공개 패키지 fixed group의 정상 버전/발행 절차를 사용한다.
+
+## 검증 근거
+
+- base `78a173c`의 새 branch `sexysinny/dds-neutral-inset-focus`. 이전 dental-common-controls 브랜치와 파일을 되돌리지 않았다. 원격 조회에서 기존 PR121과0.29.1 발행 완료를 확인한 뒤 새 패치로 분리했다.
+- `pnpm install --frozen-lockfile`: exit0, lockfile diff 없음. 초기 source fixture의 solid-virtual resolve 실패는 설치된 의존성이 lock과 달랐던 문제로, 설치 후 원래 시작한 서버만 재기동했다.
+- `node packages/dds-tokens/build.mjs`:8개 생성 성공. `node packages/dds-tokens/scripts/validate-tokens.mjs`:134경로 및 light/dark parity 통과.
+- `node packages/dds-css/build.mjs`:33개 CSS bundle/component 생성 성공. `node packages/dds-css/scripts/check-css.mjs`: hardcoded색 없음, source/bundle동기화 통과.
+- `node scripts/check-docs-sync.mjs`: en/ko spec 및 preview/token 동기화 통과. `git diff --check`: exit0.
+- 실제 원본 Solid fixture(Vite 단독, 자동 runner 아님) `http://127.0.0.1:5282/`: Input/Choice/Number/Date/Time/Month/Range를 직접 키보드로 이동. 기본 focus색과 안쪽2px 확인. 값을 제출하거나 외부에 전달하지 않았다.
+- 실제 생성 CSS 미리보기 `http://127.0.0.1:8770/preview/components.html`: 밝음·어두움 오류 TextField의 붉은1px border와 중립2px focus가 동시에 보임. native Select·오류 Textarea도 확인했다. PNG·AX·DOM계산값은 같은 폴더에 보존했다.
+- 독립 정적 리뷰에서 초기 오류 border 가림을 발견했고, 오류 상태 -3px 예외와 실제 두 테마 이미지로 해결 확인했다.
+
+이 문서는 패키지 발행 전 소스/부분 수동 검수 기록이다. 모든 프레임워크·폭·상태의 실검수 통과나 npm 발행 완료로 대신하지 않는다. 발행은 정상 PR CI → 병합 → Changesets 릴리스 PR → 검증 후 npm 발행 및 registry 확인 순서로 이어간다. FM의 기존 자동 검사/앱 배포 제한은 유지한다.
+
+## 발행 검증의 최초 실패와 수정
+
+- PR122 최초 head `baff33202765958045395ea24b301b98b5019dd5`의 CI run `40106128250`, verify job `120908136902`는 Svelte 발행 모의검증에서 실패했다. Svelte 빌드와 앞 단계는 통과했으나 npm이 이미 공개된 `0.29.1`의 publish dry-run을 거부했다. [최초 실패 로그](https://github.com/devslab-kr/dds/actions/runs/40106128250/job/120908136902)를 보존한다.
+- `verify-svelte-release.mjs`를 기존 Vue 검증과 동일하게 수정했다. 이미 발행된 버전이라는 정확한 registry 충돌만 구분하며, 다른 실패는 다시 던진다. tarball의 exports/types/styles/license 및 별도 소비 앱 SSR·클라이언트 검증은 그대로 필수다. 실제 npm 발행이나 CI 기준 완화는 하지 않았다.
+- 수정 후 `pnpm run verify:svelte:release`: exit0. 기존 버전 충돌을 명시한 뒤 패키지 구성과 별도 소비 앱의 SSR·클라이언트 마운트 검증을 통과했다. 이 결과는 새 head의 전체 CI 또는 npm 발행 완료를 대신하지 않는다.