@spectrabrain/eds 0.1.0 → 0.2.0

package/dist/components/Button/spec.json

@@ -1,6 +1,6 @@
 {
   "specVersion": 1,
-  "packageVersion": "0.1.0",
+  "packageVersion": "0.2.0",
   "name": "Button",
   "purpose": "사용자가 즉시 실행할 수 있는 행동과 탐색을 표현하는 인터랙티브 요소입니다.",
   "usageContexts": [
@@ -8,20 +8,19 @@
     "다른 페이지나 콘텐츠로 이동하는 탐색에는 neutral/link branch를 사용합니다.",
     "brand는 화면에서 가장 중요한 행동을 강조할 때 사용합니다.",
     "neutral은 일반적인 액션과 탐색에 사용합니다.",
-    "critical은 삭제·초기화처럼 되돌리기 어려운 행동에 사용합니다.",
-    "생성·저장·관리·확인처럼 화면의 핵심 행동에는 brand/solid를 먼저 검토합니다.",
-    "검색·조회·일반적인 주요 실행에는 neutral/solid를 먼저 검토합니다.",
+    "critical은 삭제·초기화처럼 되돌리기 어려운 행동에 critical/weak로 사용하며, 가능하면 확인 절차를 함께 둡니다.",
+    "생성·저장·관리·확인처럼 화면의 핵심 행동에는 brand/solid를 사용합니다.",
+    "검색·조회·일반적인 주요 실행에는 neutral/solid를 사용합니다.",
     "취소·닫기·수정 같은 보조 작업에는 neutral/outline을 사용합니다.",
-    "초기화·갱신·되돌리기처럼 부담이 낮은 반복 행동에는 neutral/weak를 사용합니다.",
-    "되돌리기 어려운 삭제·초기화는 critical/weak와 확인 절차를 먼저 검토합니다.",
+    "초기화·갱신처럼 부담이 낮은 반복 행동에는 neutral/weak를 사용합니다.",
     "비동기 저장·확인에는 loading을 사용해 중복 실행을 막고 라벨 공간을 유지합니다.",
-    "표 행 조작·pagination처럼 공간이 좁은 곳의 icon-only는 accessible name을 확인합니다.",
-    "icon은 생성·수정·삭제·외부 이동·다운로드처럼 행동의 목적이나 방향을 보조할 때 사용합니다.",
-    "icon-only의 접근성 이름을 제공하려면 aria-label을 지정합니다. aria-label은 필수로 강제하지 않습니다."
+    "표 행 조작·pagination처럼 공간이 좁은 곳에는 icon-only를 쓸 수 있습니다(accessible name은 accessibility.iconOnlyName).",
+    "icon은 생성·수정·삭제·외부 이동·다운로드처럼 행동의 목적이나 방향을 보조할 때 사용합니다."
   ],
   "unsupportedContexts": [
     "문서에 없는 role·variant·상태를 className이나 inline style로 우회하지 않습니다.",
-    "상태 변경이나 일반 CTA를 neutral/link로 표현하지 않습니다."
+    "상태 변경이나 일반 CTA를 neutral/link로 표현하지 않습니다.",
+    "neutral/outline을 neutral/solid와 같은 액션 그룹에 두지 않습니다(neutral/solid 옆 취소 버튼의 조합은 미결)."
   ],
   "api": {
     "props": [
@@ -35,7 +34,7 @@
         "name": "role",
         "type": "ButtonRole",
         "required": true,
-        "description": "시각적 역할입니다."
+        "description": "행동의 의미(brand·neutral·critical)를 나타내는 시각적 역할입니다. DOM의 ARIA role로 전달되지 않으며 ARIA role은 지정할 수 없습니다."
       },
       {
         "name": "variant",
@@ -48,20 +47,20 @@
         "type": "NativeButtonType",
         "required": true,
         "branch": "native button",
-        "description": "native button의 동작 유형입니다."
+        "description": "native button의 동작 유형입니다. 폼 제출은 submit, 그 밖의 행동은 button을 지정하며 기본값은 없습니다."
       },
       {
         "name": "href",
         "type": "string",
         "required": true,
         "branch": "neutral/link",
-        "description": "탐색 대상 주소입니다."
+        "description": "탐색 대상 주소입니다. 빈 문자열이나 공백만 있는 값은 render 오류입니다."
       },
       {
         "name": "children",
         "type": "ReactNode",
         "required": false,
-        "description": "text label입니다."
+        "description": "text label입니다. iconOnly를 뺀 모든 slot에서 필수이며, 렌더링할 내용이 없으면(빈 문자열·공백·null) render 오류입니다. slot 조합은 slots를 따릅니다."
       },
       {
         "name": "icon",
@@ -103,7 +102,7 @@
         "name": "aria-label",
         "type": "string",
         "required": false,
-        "description": "accessible name입니다. icon-only의 접근성 이름을 제공할 때 사용합니다."
+        "description": "accessible name입니다. 지정하면 비어 있지 않아야 하며, 빈 문자열이나 공백은 render 오류입니다. icon-only에서는 accessibility.iconOnlyName을 따릅니다."
       },
       {
         "name": "disabled",
@@ -115,13 +114,13 @@
         "name": "loading",
         "type": "boolean",
         "required": false,
-        "description": "처리 중 상태입니다."
+        "description": "비동기 처리 중 상태입니다. aria-busy를 적용하고 상호작용을 막으며 label·아이콘 공간과 accessible name을 유지합니다."
       },
       {
         "name": "className",
         "type": "string",
         "required": false,
-        "description": "배치·컨테이너 보정용 class입니다."
+        "description": "바깥 배치(margin·정렬·grid 위치)용 class입니다."
       },
       {
         "name": "ref",
@@ -163,7 +162,7 @@
       "iconFirst": "children과 startIcon 또는 startIconName을 제공합니다.",
       "iconLast": "children과 endIcon 또는 endIconName을 제공합니다.",
       "iconBoth": "children과 앞·뒤 아이콘을 모두 제공합니다.",
-      "iconOnly": "children 없이 icon 또는 iconName을 제공합니다. 접근성 이름이 필요하면 aria-label을 지정합니다."
+      "iconOnly": "children 없이 icon 또는 iconName을 제공합니다. 이름은 accessibility.iconOnlyName을 따릅니다."
     },
     "iconNames": [
       "ArrowLeft",
@@ -226,127 +225,9 @@
     ]
   },
   "accessibility": {
-    "nativeButtonType": "native button branch에서는 type을 필수로 지정합니다.",
-    "linkHref": "neutral/link branch에서는 href를 필수로 지정합니다.",
-    "iconOnlyName": "icon-only layout에서는 접근성 이름을 제공할 때 비어 있지 않은 aria-label을 지정합니다. aria-label은 필수가 아닙니다.",
-    "disabledLink": "비활성 link는 href를 제거하고 aria-disabled와 tabIndex를 적용합니다.",
-    "loading": "loading 중에는 aria-busy를 적용하고 상호작용을 차단합니다.",
-    "focusVisible": "keyboard focus에는 승인된 focus ring을 표시합니다."
+    "iconOnlyName": "icon-only의 아이콘은 aria-hidden이므로 항상 비어 있지 않은 aria-label 또는 aria-labelledby로 이름을 지정합니다. 타입이 이를 요구하지 않아 빠뜨려도 typecheck가 통과하며, 빈 aria-label은 render 오류입니다.",
+    "loading": "loading 중에도 label·아이콘 공간과 accessible name을 유지합니다. native button은 disabled가 되어 포커스를 잃을 수 있으므로, 끝나면 포커스를 원래 Button이나 결과 요소로 옮기고 결과는 Button 밖의 status·alert 영역으로 알립니다."
   },
-  "semanticTokens": [
-    {
-      "name": "color-bg-brand-primary",
-      "usage": "brand solid의 기본 배경입니다."
-    },
-    {
-      "name": "color-bg-brand-primary-hover",
-      "usage": "brand solid의 hover 배경입니다."
-    },
-    {
-      "name": "color-bg-critical-weak",
-      "usage": "critical weak의 기본 배경입니다."
-    },
-    {
-      "name": "color-bg-critical-weak-hover",
-      "usage": "critical weak의 hover 배경입니다."
-    },
-    {
-      "name": "color-bg-disabled",
-      "usage": "비활성 배경입니다."
-    },
-    {
-      "name": "color-bg-neutral-inverted",
-      "usage": "neutral solid의 기본 배경입니다."
-    },
-    {
-      "name": "color-bg-neutral-inverted-hover",
-      "usage": "neutral solid의 hover 배경입니다."
-    },
-    {
-      "name": "color-bg-neutral-weak",
-      "usage": "neutral weak의 기본 배경입니다."
-    },
-    {
-      "name": "color-bg-neutral-weak-hover",
-      "usage": "neutral weak의 hover 배경입니다."
-    },
-    {
-      "name": "color-bg-transparent",
-      "usage": "outline·ghost·link의 투명 배경입니다."
-    },
-    {
-      "name": "color-bg-transparent-hover",
-      "usage": "outline·ghost·link의 hover 배경입니다."
-    },
-    {
-      "name": "color-fg-brand",
-      "usage": "brand outline의 전경입니다."
-    },
-    {
-      "name": "color-fg-critical",
-      "usage": "critical weak의 전경입니다."
-    },
-    {
-      "name": "color-fg-disabled",
-      "usage": "비활성 전경입니다."
-    },
-    {
-      "name": "color-fg-neutral",
-      "usage": "neutral outline·ghost·link의 전경입니다."
-    },
-    {
-      "name": "color-fg-neutral-inverted",
-      "usage": "solid variant의 대비 전경입니다."
-    },
-    {
-      "name": "color-stroke-focusRing",
-      "usage": "focus-visible ring의 전경입니다."
-    },
-    {
-      "name": "color-stroke-neutral-secondary",
-      "usage": "neutral outline의 경계선입니다."
-    },
-    {
-      "name": "typography-body3-fontFamily",
-      "usage": "xs label의 글꼴입니다."
-    },
-    {
-      "name": "typography-body3-fontSize",
-      "usage": "xs label의 글꼴 크기입니다."
-    },
-    {
-      "name": "typography-body3-fontWeight",
-      "usage": "xs label의 글꼴 두께입니다."
-    },
-    {
-      "name": "typography-body3-letterSpacing",
-      "usage": "xs label의 자간입니다."
-    },
-    {
-      "name": "typography-body3-lineHeight",
-      "usage": "xs label의 행간입니다."
-    },
-    {
-      "name": "typography-title3-fontFamily",
-      "usage": "sm·md label의 글꼴입니다."
-    },
-    {
-      "name": "typography-title3-fontSize",
-      "usage": "sm·md label의 글꼴 크기입니다."
-    },
-    {
-      "name": "typography-title3-fontWeight",
-      "usage": "sm·md label의 글꼴 두께입니다."
-    },
-    {
-      "name": "typography-title3-letterSpacing",
-      "usage": "sm·md label의 자간입니다."
-    },
-    {
-      "name": "typography-title3-lineHeight",
-      "usage": "sm·md label의 행간입니다."
-    }
-  ],
   "unsupportedProps": [
     {
       "name": "style",