@operato/input 10.0.0 → 10.1.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.1.0](https://github.com/hatiolab/operato/compare/v10.0.0...v10.1.0) (2026-07-30)
+
+
+### :rocket: New Features
+
+* **input:** add state/validation contract to OxFormField with first tests ([8b47552](https://github.com/hatiolab/operato/commit/8b475523d6d3074d69e8a4bb3085489f0f5e65d4))
+* **input:** add styling contract (--ox-input-*) and apply to pilot components ([88b8fe7](https://github.com/hatiolab/operato/commit/88b8fe72afbcbcfe15f99a66a608db3589d95c06))
+
+
+### :memo: Documentation
+
+* **input:** correct test status after adding base contract tests ([537da22](https://github.com/hatiolab/operato/commit/537da223647861233d0c7eaf6bf45475d2f68424))
+
+
+### :house: Code Refactoring
+
+* **input:** roll out styling contract across all input components ([8bf056e](https://github.com/hatiolab/operato/commit/8bf056e3790d405de0e3ab77dc09435a605914a0))
+
+
+
 ## [10.0.0](https://github.com/hatiolab/operato/compare/v10.0.0-beta.68...v10.0.0) (2026-07-29)
 
 **Note:** Version bump only for package @operato/input

package/STYLING.md

@@ -0,0 +1,194 @@
+# @operato/input — 스타일링 계약
+
+> 입력 컴포넌트의 **인상(색·여백·라운드·타이포·높이·거동)을 앱이 자유롭게 통제**할 수 있게 하는 규약.
+> 원칙: **인상에 영향을 주는 값은 컴포넌트에 고정하지 않는다.**
+
+---
+
+## 왜 필요했나 (실측 근거)
+
+이 패키지 51개 컴포넌트는 같은 의미의 값을 제각각 리터럴로 박아 두었다.
+
+| 축 | 서로 다른 값 | 예 |
+|---|---|---|
+| border-radius | 8종 | `4px`(15) · `--border-radius`(10) · `--md-sys-shape-corner-small`(9) · `8px` · `5px` · `12px` |
+| font-size | 8종 | 토큰(17) · `14px`(9) · `12px`(8) · `13px`(6) · `11px` · `10px` |
+| padding | 8종 | `--spacing-tiny`(12) · `0` · `--spacing-small` · `12px` |
+| 높이 | 혼재 | `--form-element-height-medium`(5) · `16px` · `7px` |
+| transition | 4종 | `all 0.2s ease`(6) · `0.4s` · `0.3s ease` |
+| box-shadow | 3종 | 팝업 그림자가 서로 다름 + 다크 미대응 |
+
+문제는 세 가지였다.
+1. **일관성** — 나란히 놓으면 모서리·글자 크기·정렬이 어긋난다.
+2. **유연성** — `::part()` 0개, 스타일링 훅 11개/3파일 → 앱이 외형을 바꿀 수단이 없었다.
+3. **자립성** — `--spacing-small`(48회) · `--input-font`(17회) 등 **패키지 밖 var 를 정의 없이 참조** →
+   호스트 테마가 없으면(Storybook·단독 사용) 무너졌다. 동시에 다크 테마에서 흰 배경·검정 테두리가 그대로 남았다.
+
+---
+
+## 계층 구조
+
+```
+L1  --md-sys-*        Material 팔레트·shape      소유: 앱/프레임워크 테마
+L2  --ox-input-*      입력 의미 계약(아래 목록)   소유: @operato/input
+L3  --ox-select-* 등  컴포넌트 미세 조정          소유: 각 컴포넌트
+```
+
+- **L2 기본값은 L1 토큰에서 파생**된다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합.
+- **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경에서도 동작(자립).
+- L3 는 항상 L2 로 폴백한다 → 앱은 **전역(L2)** 또는 **특정 컴포넌트(L3)** 어느 쪽으로든 통제 가능.
+
+---
+
+## L2 계약 (`--ox-input-*`)
+
+### 색
+| var | 기본값 |
+|---|---|
+| `--ox-input-color` | `--md-sys-color-on-surface` |
+| `--ox-input-background` | `--md-sys-color-surface` |
+| `--ox-input-border-color` | `--md-sys-color-outline` |
+| `--ox-input-border` | `1px solid var(--ox-input-border-color)` |
+| `--ox-input-focus-color` | `--md-sys-color-primary` |
+| `--ox-input-placeholder-color` | `--md-sys-color-on-surface-variant` |
+
+### 형태
+| var | 기본값 |
+|---|---|
+| `--ox-input-radius` | `--md-sys-shape-corner-small` (4px) |
+| `--ox-input-popup-radius` | `--md-sys-shape-corner-medium` (라운드 2배) |
+| `--ox-input-padding` | `4px 9px` |
+| `--ox-input-gap` | `4px` |
+| `--ox-input-height` | `30px` |
+
+### 타이포
+| var | 기본값 |
+|---|---|
+| `--ox-input-font-size` | `--md-sys-typescale-label-large-size` (0.875rem) |
+| `--ox-input-font-family` | `inherit` |
+| `--ox-input-font` | `normal <size> <family>` |
+| `--ox-input-line-height` | `1.4` |
+
+### 상태
+| var | 기본값 | 쓰임 |
+|---|---|---|
+| `--ox-input-invalid-color` | `--md-sys-color-error` | 검증 실패 시 테두리·포커스 색 |
+| `--ox-input-required-color` | = invalid-color | 필수 표시(별표 등) |
+| `--ox-input-readonly-background` | `--md-sys-color-surface-container-low` | 읽기전용 배경 |
+| `--ox-input-disabled-opacity` | `0.5` | 비활성 흐림 |
+
+`InputStyles` 가 `:host([disabled])` · `:host([readonly])` · `:host([invalid])` 를 함께 정의하므로,
+`OxFormField` 를 상속한 컴포넌트는 **추가 작업 없이 상태 시각을 얻는다**.
+
+### 거동·깊이
+| var | 기본값 |
+|---|---|
+| `--ox-input-transition` | `all 0.2s ease` |
+| `--ox-input-shadow` | `0 4px 16px rgba(0,0,0,.2)` |
+| `--ox-input-scrim` | `rgba(0,0,0,.5)` (모달 배경 — 알파가 본질) |
+
+---
+
+## 사용법
+
+### 앱: 전체 입력의 인상 바꾸기
+```css
+/* 예: 더 둥글고 여유 있는 폼 */
+body {
+  --ox-input-radius: 10px;
+  --ox-input-padding: 8px 12px;
+  --ox-input-height: 38px;
+  --ox-input-font-size: 0.95rem;
+}
+```
+
+### 앱: 특정 컴포넌트만
+```css
+ox-select {
+  --ox-select-icon-color: tomato;
+  --ox-select-border-bottom: 2px solid currentColor;
+}
+```
+
+### 컴포넌트 작성자
+```ts
+import { InputStyles } from './input-styles.js'
+
+static styles = [
+  InputStyles,               // ← 배열 맨 앞
+  css`
+    /* 리터럴 금지. 계약 var 참조 */
+    .field {
+      padding: var(--ox-input-padding);
+      border: var(--ox-input-border);
+      border-radius: var(--ox-input-radius);
+      transition: var(--ox-input-transition);
+    }
+    /* 컴포넌트 조정 지점은 2단 폴백으로 */
+    :host { --ox-mything-color: var(--ox-input-color); }
+  `
+]
+```
+
+### 계약 대상이 아닌 것 (그대로 둔다)
+구조적 필연은 인상 조정 대상이 아니다 — 원형 스와치 `border-radius: 50%`,
+탭 상단 `8px 8px 0 0`(단, 값은 `var(--ox-input-popup-radius)` 파생), 아이콘 스프라이트 좌표 등.
+
+---
+
+## 적용 현황
+
+**확산 완료** (2026-07-29)
+
+| 지표 | 결과 |
+|---|---|
+| 계약 채택 컴포넌트 | **38개** (`InputStyles` 포함) |
+| 계약 var 참조 | **250곳** |
+| 하드코딩 색 | **0** (이전: 흰 배경 14 · 검정 텍스트 8 · 검정 테두리 30) |
+| 외부 미정의 의존 | **0** (이전: `--spacing-*` 48+18 · `--input-font` 17 · `--padding-default` 11 · `--border-radius` 10) |
+| 빌드 · 테스트 | `npm run build` 성공 · 계약 테스트 12/12 통과 |
+
+값 보존 매핑을 사용해 **기본 외형은 그대로 유지**했다.
+`--spacing-tiny`(2px) → `calc(var(--ox-input-gap) / 2)` · `--spacing-small`(4px) → `var(--ox-input-gap)` ·
+`--spacing-medium`(8px)·`--padding-default`(8px) → `calc(var(--ox-input-gap) * 2)`.
+→ 같은 값이지만 이제 **`--ox-input-gap` 하나로 전체 여백 리듬을 조정**할 수 있다.
+
+흩어져 있던 고정값도 수렴했다: `border-radius` 8종 → `--ox-input-radius`,
+`font-size` 10~14px → `--ox-input-font-size` / `--ox-input-font-size-small` 2단,
+`transition` 4종 → `--ox-input-transition`.
+
+계약 대상이 아닌 것으로 남긴 예: 원형 스와치 `50%`, 탭 상단 `8px 8px 0 0`(값은 popup-radius 파생),
+스크림 `rgba(0,0,0,.5)`(알파가 본질), 그림자 알파.
+
+## 기능 계약 (`OxFormField`)
+
+스타일 계약과 짝을 이루는 **상태·검증 계약**. 기반 1곳 수정으로 51개 컴포넌트에 파급된다.
+
+| 멤버 | 설명 |
+|---|---|
+| `disabled` | 상호작용 불가 · 흐리게 · **폼 데이터 제외**(HTML 표준) |
+| `readonly` | 값 표시·선택·복사 가능, 수정 불가 · **폼 데이터 포함** |
+| `required` | `checkValidity()` 의 기준 |
+| `invalid` | 검증 실패 상태 — error 색으로 표시 |
+| `placeholder` | 안내 문구(기반으로 승격, 기존 6개 자체 선언과 호환) |
+| `checkValidity()` | 검증 실행 → `invalid` 갱신, 실패 시 `invalid` 이벤트 |
+| `validateValue()` | 컴포넌트별 규칙 오버라이드 지점(기본 `required` 만) |
+| `isEmpty()` | 문자열·배열·nullish 판정. **`0`·`false` 는 유효한 값** |
+
+**네 상태는 모두 attribute 로 reflect** 된다 — 그래야 프로퍼티로 설정(`el.disabled = true`)해도
+`:host([disabled])` 가 반영된다. (기존 `disabled` 는 reflect 가 없어 이 경우 시각이 반영되지 않았다 → 수정됨)
+
+### `disabled` vs `readonly`
+조회 화면을 `disabled` 로 잠그면 흐려지고 값도 전송되지 않는다. **`readonly` 를 쓴다.**
+
+## 테스트
+
+`test/ox-form-field.test.ts` — 기반 계약 **12건**(reflect · isEmpty 경계값 · required 검증 ·
+invalid 이벤트 · 폼 수집 · disabled 제외 · readonly 포함). 실행: `npm test`(tsc → wtr).
+이 패키지의 **첫 실질 테스트**다(이전에는 `.backup` 파일만 존재).
+
+## 알려진 사항
+- 이 패키지 `npx tsc`(clean 없이)는 **기존부터** `TS5055`(dist 를 입력으로 잡음) 7건이 난다.
+  정상 경로는 `npm run build`(clean → tsc)다. 본 작업과 무관.
+- 기반 계약 테스트 12건은 확보했으나 **개별 컴포넌트 테스트는 아직 없다**(51개 중 0). 스타일 계약 확산 시
+  대표 컴포넌트 테스트를 함께 추가하는 것을 권한다. `property-angle.test.ts.backup` 은 비활성 잔재.

package/dist/src/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+export * from './input-styles.js';
 export * from './ox-form-field.js';
 export * from './ox-buttons-radio.js';
 export * from './ox-checkbox.js';

package/dist/src/index.js

@@ -1,6 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
+export * from './input-styles.js';
 export * from './ox-form-field.js';
 export * from './ox-buttons-radio.js';
 export * from './ox-checkbox.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-video.js'\nexport * from './ox-input-audio.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-secret.js'\nexport * from './ox-input-signature.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './input-styles.js'\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-switch.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-video.js'\nexport * from './ox-input-audio.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\nexport * from './ox-input-search.js'\nexport * from './ox-input-secret.js'\nexport * from './ox-input-signature.js'\n"]}

package/dist/src/input-styles.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 입력 컴포넌트 공통 스타일 계약 (L2).
+ *
+ * ## 왜 필요한가
+ * 이 패키지의 51개 컴포넌트는 여백·라운드·폰트·높이·전환을 각자 리터럴로 박아 두었다
+ * (border-radius 8종, font-size 8종, padding 8종, transition 4종 …).
+ * 그래서 (a) 나란히 놓으면 어긋나 보이고, (b) 앱이 전체 인상을 바꿀 방법이 없고,
+ * (c) `--spacing-small` 같은 **패키지 밖 var 를 정의 없이 참조**해 호스트 테마가 없으면 무너졌다.
+ *
+ * ## 계층
+ * ```
+ * L1  --md-sys-*        Material 팔레트·shape  (앱/프레임워크 테마 소유)
+ * L2  --ox-input-*      입력 의미 계약          (이 패키지 소유 ← 여기)
+ * L3  --ox-select-* 등  컴포넌트 미세 조정      (각 컴포넌트 소유)
+ * ```
+ *
+ * ## 규칙
+ * 1. **인상에 영향을 주는 값은 고정하지 않는다.** 색·여백·라운드·폰트·높이·전환·그림자는 모두
+ *    아래 var 로 노출하며, 앱은 어느 층에서든 덮어쓸 수 있다.
+ * 2. **기본값은 L1 토큰에서 파생**한다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합된다.
+ * 3. **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경(Storybook 등)에서도 자립.
+ * 4. 구조적 필연(원형 스와치 `50%`, 탭 상단 `8px 8px 0 0` 등)은 계약 대상이 아니다.
+ *
+ * ## 사용법
+ * ```ts
+ * static styles = [InputStyles, css`...`]   // 컴포넌트 styles 배열 맨 앞에
+ * ```
+ * 컴포넌트 내부에서는 리터럴 대신 계약 var 를 쓴다:
+ * ```css
+ * padding: var(--ox-input-padding);
+ * border-radius: var(--ox-input-radius);
+ * ```
+ * 컴포넌트별로 달라야 하면 2단 폴백으로 조정 지점을 남긴다:
+ * ```css
+ * color: var(--ox-select-color, var(--ox-input-color));
+ * ```
+ */
+export declare const InputStyles: import("lit").CSSResult;

package/dist/src/input-styles.js

@@ -0,0 +1,108 @@
+import { css } from 'lit';
+/**
+ * 입력 컴포넌트 공통 스타일 계약 (L2).
+ *
+ * ## 왜 필요한가
+ * 이 패키지의 51개 컴포넌트는 여백·라운드·폰트·높이·전환을 각자 리터럴로 박아 두었다
+ * (border-radius 8종, font-size 8종, padding 8종, transition 4종 …).
+ * 그래서 (a) 나란히 놓으면 어긋나 보이고, (b) 앱이 전체 인상을 바꿀 방법이 없고,
+ * (c) `--spacing-small` 같은 **패키지 밖 var 를 정의 없이 참조**해 호스트 테마가 없으면 무너졌다.
+ *
+ * ## 계층
+ * ```
+ * L1  --md-sys-*        Material 팔레트·shape  (앱/프레임워크 테마 소유)
+ * L2  --ox-input-*      입력 의미 계약          (이 패키지 소유 ← 여기)
+ * L3  --ox-select-* 등  컴포넌트 미세 조정      (각 컴포넌트 소유)
+ * ```
+ *
+ * ## 규칙
+ * 1. **인상에 영향을 주는 값은 고정하지 않는다.** 색·여백·라운드·폰트·높이·전환·그림자는 모두
+ *    아래 var 로 노출하며, 앱은 어느 층에서든 덮어쓸 수 있다.
+ * 2. **기본값은 L1 토큰에서 파생**한다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합된다.
+ * 3. **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경(Storybook 등)에서도 자립.
+ * 4. 구조적 필연(원형 스와치 `50%`, 탭 상단 `8px 8px 0 0` 등)은 계약 대상이 아니다.
+ *
+ * ## 사용법
+ * ```ts
+ * static styles = [InputStyles, css`...`]   // 컴포넌트 styles 배열 맨 앞에
+ * ```
+ * 컴포넌트 내부에서는 리터럴 대신 계약 var 를 쓴다:
+ * ```css
+ * padding: var(--ox-input-padding);
+ * border-radius: var(--ox-input-radius);
+ * ```
+ * 컴포넌트별로 달라야 하면 2단 폴백으로 조정 지점을 남긴다:
+ * ```css
+ * color: var(--ox-select-color, var(--ox-input-color));
+ * ```
+ */
+export const InputStyles = css `
+  :host {
+    /* ── 색 ─────────────────────────────────────────────── */
+    --ox-input-color: var(--md-sys-color-on-surface, #1a1b21);
+    --ox-input-background: var(--md-sys-color-surface, #fff);
+    --ox-input-border-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.25));
+    --ox-input-border: 1px solid var(--ox-input-border-color);
+    --ox-input-focus-color: var(--md-sys-color-primary, #495d92);
+    --ox-input-placeholder-color: var(--md-sys-color-on-surface-variant, #45464f);
+    /* 상태 색 — 검증 실패 / 필수 표시 */
+    --ox-input-invalid-color: var(--md-sys-color-error, #b3261e);
+    --ox-input-required-color: var(--ox-input-invalid-color);
+    /* readonly 는 흐리게 하지 않는다(값을 읽는 상태이므로). 배경으로만 구분한다. */
+    --ox-input-readonly-background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));
+
+    /* ── 형태 ───────────────────────────────────────────── */
+    --ox-input-radius: var(--md-sys-shape-corner-small, 4px);
+    /* 드롭다운·피커 등 팝업 표면은 필드보다 큰 라운드를 쓴다(기본 2배, 앱이 조정 가능) */
+    --ox-input-popup-radius: var(--md-sys-shape-corner-medium, calc(var(--ox-input-radius) * 2));
+    --ox-input-padding: 4px 9px;
+    --ox-input-gap: 4px;
+    --ox-input-height: 30px;
+
+    /* ── 타이포 ─────────────────────────────────────────── */
+    --ox-input-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    /* 보조 텍스트(설명·단위·캡션). 기존에 10~13px 로 흩어져 있던 것을 한 단계로 수렴. */
+    --ox-input-font-size-small: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    --ox-input-font-family: inherit;
+    --ox-input-font: normal var(--ox-input-font-size) var(--ox-input-font-family);
+    --ox-input-line-height: 1.4;
+
+    /* ── 거동·깊이 ──────────────────────────────────────── */
+    --ox-input-transition: all 0.2s ease;
+    --ox-input-shadow: 0 4px 16px var(--md-sys-color-shadow-alpha, rgba(0, 0, 0, 0.2));
+    /* 모달 뒤 배경(스크림) — 알파가 본질이라 토큰 파생이 아닌 반투명 값을 유지하되 조정 가능하게 */
+    --ox-input-scrim: rgba(0, 0, 0, 0.5);
+    --ox-input-disabled-opacity: 0.5;
+
+    box-sizing: border-box;
+    color: var(--ox-input-color);
+    font: var(--ox-input-font);
+    line-height: var(--ox-input-line-height);
+  }
+
+  /* disabled — 상호작용 불가 + 흐리게. 폼 데이터 제외는 OxFormField 가 처리. */
+  :host([disabled]) {
+    opacity: var(--ox-input-disabled-opacity);
+    pointer-events: none;
+  }
+
+  /* readonly — 값을 읽고 선택·복사할 수 있어야 하므로 흐리게 하지 않고 배경으로만 구분.
+     실제 수정 차단은 각 컴포넌트가 입력 요소에 readonly 를 전달해 처리한다. */
+  :host([readonly]) {
+    --ox-input-background: var(--ox-input-readonly-background);
+    cursor: default;
+  }
+
+  /* invalid — 테두리·포커스 색을 error 로 전환. 컴포넌트가 --ox-input-border 를 쓰면 자동 반영. */
+  :host([invalid]) {
+    --ox-input-border-color: var(--ox-input-invalid-color);
+    --ox-input-focus-color: var(--ox-input-invalid-color);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+`;
+//# sourceMappingURL=input-styles.js.map

package/dist/src/input-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-styles.js","sourceRoot":"","sources":["../../src/input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE7B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * 입력 컴포넌트 공통 스타일 계약 (L2).\n *\n * ## 왜 필요한가\n * 이 패키지의 51개 컴포넌트는 여백·라운드·폰트·높이·전환을 각자 리터럴로 박아 두었다\n * (border-radius 8종, font-size 8종, padding 8종, transition 4종 …).\n * 그래서 (a) 나란히 놓으면 어긋나 보이고, (b) 앱이 전체 인상을 바꿀 방법이 없고,\n * (c) `--spacing-small` 같은 **패키지 밖 var 를 정의 없이 참조**해 호스트 테마가 없으면 무너졌다.\n *\n * ## 계층\n * ```\n * L1  --md-sys-*        Material 팔레트·shape  (앱/프레임워크 테마 소유)\n * L2  --ox-input-*      입력 의미 계약          (이 패키지 소유 ← 여기)\n * L3  --ox-select-* 등  컴포넌트 미세 조정      (각 컴포넌트 소유)\n * ```\n *\n * ## 규칙\n * 1. **인상에 영향을 주는 값은 고정하지 않는다.** 색·여백·라운드·폰트·높이·전환·그림자는 모두\n *    아래 var 로 노출하며, 앱은 어느 층에서든 덮어쓸 수 있다.\n * 2. **기본값은 L1 토큰에서 파생**한다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합된다.\n * 3. **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경(Storybook 등)에서도 자립.\n * 4. 구조적 필연(원형 스와치 `50%`, 탭 상단 `8px 8px 0 0` 등)은 계약 대상이 아니다.\n *\n * ## 사용법\n * ```ts\n * static styles = [InputStyles, css`...`]   // 컴포넌트 styles 배열 맨 앞에\n * ```\n * 컴포넌트 내부에서는 리터럴 대신 계약 var 를 쓴다:\n * ```css\n * padding: var(--ox-input-padding);\n * border-radius: var(--ox-input-radius);\n * ```\n * 컴포넌트별로 달라야 하면 2단 폴백으로 조정 지점을 남긴다:\n * ```css\n * color: var(--ox-select-color, var(--ox-input-color));\n * ```\n */\nexport const InputStyles = css`\n  :host {\n    /* ── 색 ─────────────────────────────────────────────── */\n    --ox-input-color: var(--md-sys-color-on-surface, #1a1b21);\n    --ox-input-background: var(--md-sys-color-surface, #fff);\n    --ox-input-border-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.25));\n    --ox-input-border: 1px solid var(--ox-input-border-color);\n    --ox-input-focus-color: var(--md-sys-color-primary, #495d92);\n    --ox-input-placeholder-color: var(--md-sys-color-on-surface-variant, #45464f);\n    /* 상태 색 — 검증 실패 / 필수 표시 */\n    --ox-input-invalid-color: var(--md-sys-color-error, #b3261e);\n    --ox-input-required-color: var(--ox-input-invalid-color);\n    /* readonly 는 흐리게 하지 않는다(값을 읽는 상태이므로). 배경으로만 구분한다. */\n    --ox-input-readonly-background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));\n\n    /* ── 형태 ───────────────────────────────────────────── */\n    --ox-input-radius: var(--md-sys-shape-corner-small, 4px);\n    /* 드롭다운·피커 등 팝업 표면은 필드보다 큰 라운드를 쓴다(기본 2배, 앱이 조정 가능) */\n    --ox-input-popup-radius: var(--md-sys-shape-corner-medium, calc(var(--ox-input-radius) * 2));\n    --ox-input-padding: 4px 9px;\n    --ox-input-gap: 4px;\n    --ox-input-height: 30px;\n\n    /* ── 타이포 ─────────────────────────────────────────── */\n    --ox-input-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    /* 보조 텍스트(설명·단위·캡션). 기존에 10~13px 로 흩어져 있던 것을 한 단계로 수렴. */\n    --ox-input-font-size-small: var(--md-sys-typescale-label-medium-size, 0.75rem);\n    --ox-input-font-family: inherit;\n    --ox-input-font: normal var(--ox-input-font-size) var(--ox-input-font-family);\n    --ox-input-line-height: 1.4;\n\n    /* ── 거동·깊이 ──────────────────────────────────────── */\n    --ox-input-transition: all 0.2s ease;\n    --ox-input-shadow: 0 4px 16px var(--md-sys-color-shadow-alpha, rgba(0, 0, 0, 0.2));\n    /* 모달 뒤 배경(스크림) — 알파가 본질이라 토큰 파생이 아닌 반투명 값을 유지하되 조정 가능하게 */\n    --ox-input-scrim: rgba(0, 0, 0, 0.5);\n    --ox-input-disabled-opacity: 0.5;\n\n    box-sizing: border-box;\n    color: var(--ox-input-color);\n    font: var(--ox-input-font);\n    line-height: var(--ox-input-line-height);\n  }\n\n  /* disabled — 상호작용 불가 + 흐리게. 폼 데이터 제외는 OxFormField 가 처리. */\n  :host([disabled]) {\n    opacity: var(--ox-input-disabled-opacity);\n    pointer-events: none;\n  }\n\n  /* readonly — 값을 읽고 선택·복사할 수 있어야 하므로 흐리게 하지 않고 배경으로만 구분.\n     실제 수정 차단은 각 컴포넌트가 입력 요소에 readonly 를 전달해 처리한다. */\n  :host([readonly]) {\n    --ox-input-background: var(--ox-input-readonly-background);\n    cursor: default;\n  }\n\n  /* invalid — 테두리·포커스 색을 error 로 전환. 컴포넌트가 --ox-input-border 를 쓰면 자동 반영. */\n  :host([invalid]) {\n    --ox-input-border-color: var(--ox-input-invalid-color);\n    --ox-input-focus-color: var(--ox-input-invalid-color);\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n`\n"]}

package/dist/src/ox-buttons-radio.js

@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 /**
 여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
 
@@ -32,6 +33,7 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
         });
     }
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: inline-block;
@@ -40,8 +42,8 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
         --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
         --md-outlined-button-container-height: var(--form-element-height-medium);
         --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
-        --md-outlined-button-leading-space: var(--spacing-large);
-        --md-outlined-button-trailing-space: var(--spacing-large);
+        --md-outlined-button-leading-space: calc(var(--ox-input-gap) * 3);
+        --md-outlined-button-trailing-space: calc(var(--ox-input-gap) * 3);
         --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
         --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
         --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
@@ -51,8 +53,8 @@ let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
         --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
         --md-filled-button-container-height: var(--form-element-height-medium);
         --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
-        --md-filled-button-leading-space: var(--spacing-large);
-        --md-filled-button-trailing-space: var(--spacing-large);
+        --md-filled-button-leading-space: calc(var(--ox-input-gap) * 3);
+        --md-filled-button-trailing-space: calc(var(--ox-input-gap) * 3);
         --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
         --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
         --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);

package/dist/src/ox-buttons-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      :host {\n        display: inline-block;\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: calc(var(--ox-input-gap) * 3);\n        --md-outlined-button-trailing-space: calc(var(--ox-input-gap) * 3);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: calc(var(--ox-input-gap) * 3);\n        --md-filled-button-trailing-space: calc(var(--ox-input-gap) * 3);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}

package/dist/src/ox-form-field.d.ts

@@ -1,11 +1,52 @@
 import { LitElement } from 'lit';
+/**
+ * 모든 입력 컴포넌트의 기반 계약.
+ *
+ * ## 상태 계약
+ * `disabled` / `readonly` / `required` / `invalid` 는 **attribute 로 reflect** 된다.
+ * 그래야 `InputStyles` 의 `:host([disabled])` · `:host([readonly])` · `:host([invalid])` 가
+ * **마크업으로 설정했을 때뿐 아니라 프로퍼티로 설정했을 때도** 시각에 반영된다.
+ * (reflect 가 없으면 `el.disabled = true` 는 화면에 나타나지 않는다.)
+ *
+ * ## disabled 와 readonly 의 구분
+ * - `disabled`: 상호작용 불가 · 흐리게 · **폼 데이터에 포함되지 않음**(HTML 표준 거동)
+ * - `readonly`: 값을 **보고 선택·복사할 수 있으나** 수정 불가 · **폼 데이터에는 포함됨**
+ *   → 조회 화면을 `disabled` 로 잠그면 흐려지고 값도 전송되지 않으므로 `readonly` 를 쓴다.
+ *
+ * ## 검증
+ * `checkValidity()` 가 `invalid` 를 갱신하고 결과를 반환한다.
+ * 컴포넌트별 규칙(형식·범위 등)이 있으면 `validateValue()` 를 오버라이드한다(기본은 `required` 만 검사).
+ */
 export declare abstract class OxFormField<T = any> extends LitElement {
     name?: string;
     disabled?: boolean;
+    /** 값 표시·선택은 되지만 수정 불가. disabled 와 달리 폼 데이터에 포함된다. */
+    readonly?: boolean;
+    /** 값이 반드시 있어야 함. checkValidity() 의 기준. */
+    required?: boolean;
+    /** 검증 실패 상태. InputStyles 가 error 색으로 표시한다. */
+    invalid?: boolean;
+    /** 비어 있을 때 보여줄 안내 문구(컴포넌트가 지원하는 경우). */
+    placeholder?: string;
     value?: T;
     protected _form: HTMLFormElement | null;
     protected _formdataEventHandler: EventListener | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 값이 비었는지 판단. 문자열·배열·nullish 를 다룬다.
+     * 숫자 `0` 과 `false` 는 **유효한 값**이므로 비었다고 보지 않는다.
+     */
+    protected isEmpty(): boolean;
+    /**
+     * 자체 검증 규칙. 기본은 `required` 만 검사한다.
+     * 컴포넌트별 규칙이 있으면 오버라이드한다.
+     */
+    protected validateValue(): boolean;
+    /**
+     * 검증을 실행해 `invalid` 를 갱신하고 결과를 반환한다.
+     * 실패 시 `invalid` 이벤트를 올려 폼이 반응할 수 있게 한다.
+     */
+    checkValidity(): boolean;
     protected appendFormData({ formData }: FormDataEvent): void;
 }

package/dist/src/ox-form-field.js

@@ -1,6 +1,24 @@
 import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+/**
+ * 모든 입력 컴포넌트의 기반 계약.
+ *
+ * ## 상태 계약
+ * `disabled` / `readonly` / `required` / `invalid` 는 **attribute 로 reflect** 된다.
+ * 그래야 `InputStyles` 의 `:host([disabled])` · `:host([readonly])` · `:host([invalid])` 가
+ * **마크업으로 설정했을 때뿐 아니라 프로퍼티로 설정했을 때도** 시각에 반영된다.
+ * (reflect 가 없으면 `el.disabled = true` 는 화면에 나타나지 않는다.)
+ *
+ * ## disabled 와 readonly 의 구분
+ * - `disabled`: 상호작용 불가 · 흐리게 · **폼 데이터에 포함되지 않음**(HTML 표준 거동)
+ * - `readonly`: 값을 **보고 선택·복사할 수 있으나** 수정 불가 · **폼 데이터에는 포함됨**
+ *   → 조회 화면을 `disabled` 로 잠그면 흐려지고 값도 전송되지 않으므로 `readonly` 를 쓴다.
+ *
+ * ## 검증
+ * `checkValidity()` 가 `invalid` 를 갱신하고 결과를 반환한다.
+ * 컴포넌트별 규칙(형식·범위 등)이 있으면 `validateValue()` 를 오버라이드한다(기본은 `required` 만 검사).
+ */
 export class OxFormField extends LitElement {
     constructor() {
         super(...arguments);
@@ -25,9 +43,46 @@ export class OxFormField extends LitElement {
             this._formdataEventHandler = null;
         }
     }
+    /**
+     * 값이 비었는지 판단. 문자열·배열·nullish 를 다룬다.
+     * 숫자 `0` 과 `false` 는 **유효한 값**이므로 비었다고 보지 않는다.
+     */
+    isEmpty() {
+        const value = this.value;
+        if (value === undefined || value === null)
+            return true;
+        if (typeof value === 'string')
+            return value.trim().length === 0;
+        if (Array.isArray(value))
+            return value.length === 0;
+        return false;
+    }
+    /**
+     * 자체 검증 규칙. 기본은 `required` 만 검사한다.
+     * 컴포넌트별 규칙이 있으면 오버라이드한다.
+     */
+    validateValue() {
+        return !(this.required && this.isEmpty());
+    }
+    /**
+     * 검증을 실행해 `invalid` 를 갱신하고 결과를 반환한다.
+     * 실패 시 `invalid` 이벤트를 올려 폼이 반응할 수 있게 한다.
+     */
+    checkValidity() {
+        const valid = this.validateValue();
+        this.invalid = !valid;
+        if (!valid) {
+            this.dispatchEvent(new CustomEvent('invalid', { bubbles: true, composed: true, detail: { field: this.name } }));
+        }
+        return valid;
+    }
     appendFormData({ formData }) {
         if (!this.name)
             return;
+        /* disabled 컨트롤은 폼 데이터에 포함하지 않는다(HTML 표준 거동).
+           readonly 는 수정만 막는 상태이므로 포함한다. */
+        if (this.disabled)
+            return;
         let values = this.value;
         if (!(values instanceof Array)) {
             values = [this.value];
@@ -41,8 +96,20 @@ __decorate([
     property({ type: String, attribute: true })
 ], OxFormField.prototype, "name", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], OxFormField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxFormField.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxFormField.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OxFormField.prototype, "invalid", void 0);
+__decorate([
+    property({ type: String })
+], OxFormField.prototype, "placeholder", void 0);
 __decorate([
     property()
 ], OxFormField.prototype, "value", void 0);