Lyotic · 컴포넌트
상태 표시
하나의 축에서 하나의 상태를 glyph와 label로 보여줍니다. 표시 자체가 사실이나 권한을 판단하지 않습니다.
개요
하나의 축에서 하나의 상태를 glyph와 label로 보여줍니다. 표시 자체가 사실이나 권한을 판단하지 않습니다.
| 표현할 수 있는 것 | 표현해서는 안 되는 것 |
|---|---|
| 지정한 축의 상태 값 | 다른 축이나 더 강한 상태 |
구성
- 하나의 상태 축
- 10px glyph disc
- Geist Mono 11px label
- 위치가 변하지 않는 rest·lit 표현
상태
아래는 공용 상태와 전이 픽스처를 사용한 라이브 예제입니다. 동일한 입력과 plan에서 다른 언어가 권한이나 검증의 뜻을 바꿔서는 안 됩니다.
사용과 회피
근거·실행·검증 등 선언된 상태 축의 값을 표시할 때 사용합니다.
Applied를 Verified로 그리거나 결과 미확정에 회전하는 로딩 표시를 사용하지 않습니다.
사용할 때
근거·실행·검증 등 선언된 상태 축의 값을 표시할 때 사용합니다.
사용하지 않을 때
승인 버튼이나 실행 이벤트를 만드는 제어로 사용하지 않습니다.
쓰기와 검증을 구분합니다
Applied를 Verified로 그리거나 결과 미확정에 회전하는 로딩 표시를 사용하지 않습니다. Verified는 상위 구성요소가 정확한 범위를 공개하는 Verification에 연결됩니다. INV-02/11.
근거의 한계
예제는 고정된 픽스처와 현재 공용 컴포넌트의 동작을 보여줍니다. 외부 서비스 연결, 모든 부수 효과 또는 사람의 이해 개선까지 입증하지 않습니다.
계약
열세 가지 항목은 구현의 책임입니다. 이 표의 존재 자체가 모든 테스트의 통과를 의미하지는 않습니다.
| 항목 | 계약 |
|---|---|
| 의미 입력 | 유효한 axis, 그 축의 value, 값보다 강하지 않은 선택적 label |
| 허용 상태 | 정의된 축의 값, rest 또는 lit |
| 금지 상태 | 정의되지 않은 값, 색만의 의미, 더 강한 주장을 만드는 label |
| 근거 요건 | 포함하는 컴포넌트가 권위 있는 상태와 근거를 제공합니다. Mark는 이를 추론하지 않습니다. |
| 행동 범위 | 행동 없음. 상태 표시는 제어가 아닙니다. |
| 권한의 의미 | 권한을 보여줄 수 있으나 부여하지 않습니다. |
| 외부 효과 | 외부 효과 없음 |
| 검증 조건 | Verified는 상위 구성요소가 정확한 범위를 공개하는 Verification에 연결됩니다. INV-02/11. |
| 실패와 복구 | failed, partial, unknown 입력을 추측하지 않고 그대로 표시합니다. |
| 전환 | 약 1.1초의 강조 후 배경·선만 잦아듭니다. Glyph와 label 위치는 유지합니다. MOT-06. |
| 접근성 | 항상 글자를 제공하며 중복 glyph는 보조기술에 숨길 수 있습니다. |
| 관찰 가능한 이벤트 | 실행·검증 이벤트 없음 |
| 테스트 조건 | 축 값, glyph+label, 제한된 문구, 미확정 상태의 정지와 전체 carrier의 plan 검사 |
접근성
항상 글자를 제공하며 중복 glyph는 보조기술에 숨길 수 있습니다.
키보드·포인터·스크린 리더·확대·reduced-motion 조건을 실제 전환 경로에서 확인합니다. 자동 DOM 검사만으로 접근성을 전부 검증했다고 주장하지 않습니다.
코드
아래는 현재 영문 페이지와 같은 API 예제입니다. 함수·속성·상태 식별자는 번역하지 않습니다. 애플리케이션이 권위 있는 입력과 실행 경계를 제공해야 합니다.
import { statusMark } from '../../packages/components/src/index.js';
import { settleLit } from '../../packages/morph/src/index.js';
const mark = statusMark({
axis: 'execution',
value: 'applied',
label: 'Shopify · Applied',
});
document.body.append(mark);
settleLit([mark]);
// INV-02: this is a write outcome, not a verification result.