@spectrabrain/eds 0.0.3 → 0.1.0

package/consumer/update-agent-context.mjs

@@ -0,0 +1,87 @@
+import path from "node:path";
+import { applyBlock, locateBlock, maskFencedBlocks, readBlockVersion, readTemplateBlock, renderBlock } from "./managed-block.mjs";
+import { detectEol, readTextIfExists, realpathOrNull, relativeTo, withEol } from "./paths.mjs";
+
+export const claudeBeginMarker = "<!-- EDS:CLAUDE:BEGIN -->";
+export const claudeEndMarker = "<!-- EDS:CLAUDE:END -->";
+export const claudeImportLine = "@AGENTS.md";
+export const geminiBeginMarker = "<!-- EDS:GEMINI:BEGIN -->";
+export const geminiEndMarker = "<!-- EDS:GEMINI:END -->";
+// Gemini CLI documents its import syntax with an explicit relative path.
+export const geminiImportLine = "@./AGENTS.md";
+
+// Claude Code and Gemini CLI accept `@AGENTS.md` and `@./AGENTS.md` as the same import and ignore fenced code blocks.
+const importPattern = /^[ \t]*@(?:\.\/)?AGENTS\.md[ \t]*$/m;
+
+export function planAgentContext({ consumerRoot, pkg, packageManager = null }) {
+  const filePath = path.join(consumerRoot, "AGENTS.md");
+  const before = readTextIfExists(filePath);
+  // The block is rendered with the target file's dominant line ending; a new file uses LF.
+  const eol = before === null ? "\n" : detectEol(before);
+  const block = withEol(renderBlock(readTemplateBlock(pkg.packageRoot), pkg.version, packageManager), eol);
+  const located = before === null ? null : locateBlock(before);
+  return {
+    label: "agents",
+    path: filePath,
+    relativePath: relativeTo(consumerRoot, filePath),
+    before,
+    after: applyBlock(before, block, eol),
+    block,
+    existingBlock: located?.block ?? null,
+    existingVersion: located ? readBlockVersion(located.block) : null,
+  };
+}
+
+function hasImport(contents, beginMarker, endMarker) {
+  const visible = maskFencedBlocks(contents);
+  if (visible.includes(beginMarker) && visible.includes(endMarker)) {
+    return true;
+  }
+  return importPattern.test(visible);
+}
+
+// Returns null when the file does not exist, or when it and AGENTS.md are the same file (a symlink in either
+// direction): the managed block already lives in that file and an import would point at itself.
+function planImportFile({ consumerRoot, fileName, label, beginMarker, endMarker, importLine }) {
+  const filePath = path.join(consumerRoot, fileName);
+  const before = readTextIfExists(filePath);
+  if (before === null) {
+    return null;
+  }
+  const realPath = realpathOrNull(filePath);
+  const agentsRealPath = realpathOrNull(path.join(consumerRoot, "AGENTS.md"));
+  if (realPath !== null && realPath === agentsRealPath) {
+    return null;
+  }
+  const eol = detectEol(before);
+  const block = [beginMarker, importLine, endMarker].join(eol);
+  const trimmed = before.replace(/\s*$/, "");
+  const after = hasImport(before, beginMarker, endMarker)
+    ? before
+    : (trimmed ? trimmed + eol + eol + block + eol : block + eol);
+  return { label, path: filePath, relativePath: relativeTo(consumerRoot, filePath), before, after };
+}
+
+// Claude Code reads CLAUDE.md; the import makes it follow the AGENTS.md managed block.
+export function planClaudeImport({ consumerRoot }) {
+  return planImportFile({
+    consumerRoot,
+    fileName: "CLAUDE.md",
+    label: "claude",
+    beginMarker: claudeBeginMarker,
+    endMarker: claudeEndMarker,
+    importLine: claudeImportLine,
+  });
+}
+
+// Gemini CLI reads GEMINI.md by default and AGENTS.md only with a context.fileName setting, so it gets the same import.
+export function planGeminiImport({ consumerRoot }) {
+  return planImportFile({
+    consumerRoot,
+    fileName: "GEMINI.md",
+    label: "gemini",
+    beginMarker: geminiBeginMarker,
+    endMarker: geminiEndMarker,
+    importLine: geminiImportLine,
+  });
+}

package/consumer-postinstall.mjs

@@ -0,0 +1,59 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { registerConsumerScripts } from "./consumer/register-scripts.mjs";
+
+const packageRoot = path.dirname(fileURLToPath(import.meta.url));
+const consumerRoot = process.env.INIT_CWD;
+
+if (!consumerRoot || path.resolve(consumerRoot) === packageRoot) {
+  process.exit(0);
+}
+
+const consumerPackagePath = path.join(consumerRoot, "package.json");
+if (!fs.existsSync(consumerPackagePath)) {
+  console.log("[EVA Design System] Consumer package.json was not found; run the documented setup manually.");
+  process.exit(0);
+}
+
+function realpathOrNull(filePath) {
+  try {
+    return fs.realpathSync(filePath);
+  } catch {
+    return null;
+  }
+}
+
+const installedPath = realpathOrNull(path.join(consumerRoot, "node_modules", "@spectrabrain", "eds"));
+if (installedPath === null || installedPath !== realpathOrNull(packageRoot)) {
+  console.log("[EVA Design System] Skipping consumer setup: this install is not the consumer's node_modules/@spectrabrain/eds. Run npx @spectrabrain/eds init from the consumer root if needed.");
+  process.exit(0);
+}
+
+// pnpm rewrites the consumer package.json after dependency lifecycle scripts, so edits made here are lost.
+if (String(process.env.npm_config_user_agent ?? "").startsWith("pnpm/")) {
+  console.log("[EVA Design System] pnpm discards package.json edits made during install; run pnpm exec eds init to register the EDS scripts.");
+  process.exit(0);
+}
+
+let consumerPackage;
+try {
+  consumerPackage = JSON.parse(fs.readFileSync(consumerPackagePath, "utf8"));
+} catch (error) {
+  console.log("[EVA Design System] Consumer package.json could not be parsed (" + error.message + "); run npx @spectrabrain/eds init after fixing it.");
+  process.exit(0);
+}
+
+// A workspaces root hoists the package but is not the app that uses it: registering the scripts and hooks
+// there would make the root build look for src/styles/eds-tokens.css and AGENTS.md in the wrong place.
+if (consumerPackage.workspaces !== undefined) {
+  console.log("[EVA Design System] Skipping consumer setup: package.json declares workspaces. Run npx eds init inside the app package that depends on @spectrabrain/eds.");
+  process.exit(0);
+}
+
+// The install must never fail because of this setup step; anything unexpected is reported and left to eds doctor.
+try {
+  registerConsumerScripts(consumerRoot);
+} catch (error) {
+  console.log("[EVA Design System] Consumer setup was skipped (" + (error instanceof Error ? error.message : String(error)) + "). Run npx eds init to register the EDS scripts.");
+}

package/dist/base.css

@@ -0,0 +1,4 @@
+/* This file is generated by scripts/build-tokens.ts. Do not edit directly. */
+:where(html) {
+  font-family: var(--eds-typography-body1-fontFamily);
+}

package/dist/components/Button/README.md

@@ -2,7 +2,7 @@
 
 이 문서는 `Button` 디렉토리의 기준 문서입니다. `Button`의 개요·사용 맥락·공개 API·접근성 계약을 기록합니다. Button을 사용하기 전에는 이 문서를 먼저 확인합니다.
 
-패키지 설치와 공개 경로는 루트 [README.md](../../../README.md)를, 소비처 AI의 공통 규칙은 루트 [AI.md](../../../AI.md)를 참고합니다. 루트 `AI.md`에는 컴포넌트별 정책을 중복해서 기록하지 않습니다.
+패키지 설치와 공개 경로는 루트 [README.md](../../../README.md)를, 소비처 AI의 필수 규칙은 루트 [QUICKSTART.md](../../../QUICKSTART.md)를, 공개 범위와 금지 사례는 루트 [AI.md](../../../AI.md)를 참고합니다. 루트 문서에는 컴포넌트별 정책을 중복해서 기록하지 않습니다.
 
 ## 개요
 
@@ -10,6 +10,21 @@
 
 탐색 목적의 링크는 `neutral/link` 조합으로 표현하고, 상태 변경·폼 제출·명령 실행은 native `<button>`으로 표현합니다. `Button`은 현재 React 웹과 light theme만 지원합니다.
 
+화면에서 반복되는 행동 맥락은 다음처럼 선택합니다.
+
+| 행동 맥락 | 우선 검토할 조합 | 설명 |
+| --- | --- | --- |
+| 생성·저장·관리·확인처럼 화면의 핵심 행동 | `brand/solid` | 사용자가 완료해야 할 대표 행동을 강조합니다. 한 화면에 하나를 권장합니다. |
+| 검색·조회·일반적인 주요 실행 | `neutral/solid` | 브랜드 핵심 행동보다 낮은 주목도로 주요 액션을 표현합니다. |
+| 취소·닫기·수정 같은 보조 작업 | `neutral/outline` | 주 행동과 시각적 위계를 분리합니다. |
+| 초기화·갱신·되돌리기처럼 부담이 낮은 반복 행동 | `neutral/weak` | CTA를 보조하면서 반복 가능한 행동을 표현합니다. 되돌리기 어려운 초기화는 `critical/weak`입니다. |
+| 되돌리기 어려운 삭제·초기화 | `critical/weak` | 위험을 분명히 전달하고 가능하면 확인 절차와 함께 사용합니다. |
+| 비동기 저장·확인 처리 | 선택한 조합과 `loading` | 중복 실행을 막고 라벨·아이콘 공간과 accessible name을 유지합니다. |
+
+기존 화면에서 다른 조합을 사용하고 있더라도 새 코드에서는 행동의 의미에 맞는 위계를 먼저 검토합니다. 보조 행동은 한 조합으로 고정합니다. 취소·닫기·수정은 `neutral/outline`, 초기화·갱신·되돌리기처럼 부담이 낮은 반복 행동은 `neutral/weak`입니다. `neutral/link`는 페이지나 콘텐츠로 이동하는 탐색에만 사용합니다.
+
+표 행 조작이나 pagination처럼 공간이 좁은 곳에서는 `iconOnly`를 사용할 수 있습니다. 아이콘만으로 의미가 충분한지 확인하고, 필요한 경우 비어 있지 않은 `aria-label`을 지정합니다. 아이콘은 생성·수정·삭제·외부 이동·다운로드처럼 행동의 목적이나 방향을 보조할 때만 사용합니다.
+
 ## 사용 맥락
 
 ### Size
@@ -32,7 +47,7 @@ Layout은 라벨과 아이콘의 조합으로 결정합니다. 아이콘은 행
 | `iconFirst` | 라벨 앞에 아이콘을 둡니다. | 아이콘이 행동의 목적을 보조할 때 사용합니다. |
 | `iconLast` | 라벨 뒤에 아이콘을 둡니다. | 이동 방향이나 다음 단계를 나타낼 때 사용합니다. |
 | `iconBoth` | 라벨 양쪽에 아이콘을 둡니다. | 양쪽 아이콘이 모두 의미를 더하는 명확한 경우에만 사용합니다. |
-| `iconOnly` | 아이콘만 제공합니다. | 아이콘만으로 행동의 의미가 충분히 명확할 때 사용하며, 비어 있지 않은 `aria-label`이 필요합니다. |
+| `iconOnly` | 아이콘만 제공합니다. | 아이콘만으로 행동의 의미가 충분히 명확할 때 사용하며, 접근성 이름을 제공하려면 `aria-label`을 지정합니다. |
 
 ### Role
 
@@ -53,8 +68,8 @@ Variant는 같은 Role 안에서 시각적 위계를 정의합니다.
 | `brand/solid` | 서비스의 핵심 행동에 사용합니다. 한 화면에 하나를 권장합니다. |
 | `brand/outline` | `brand/solid`보다 낮은 위계의 브랜드 보조 행동에 사용합니다. `neutral/outline`과 조합할 수 있으며 같은 액션 그룹에서 `brand/solid`와 함께 사용하지 않는 것을 권장합니다. |
 | `neutral/solid` | `brand/solid` 다음 위계의 일반적인 주요 CTA에 사용합니다. 한 화면에 하나를 권장합니다. |
-| `neutral/weak` | CTA를 제외한 일반적인 보조 행동에 사용하며, CTA와 함께 제공할 때 보조 위계를 표현합니다. |
-| `neutral/outline` | 시각적 부담을 낮춘 대안이나 보조 행동에 사용합니다. `neutral/solid`과 같은 액션 그룹에서 함께 사용하지 않으며, `brand/outline`과 조합할 수 있습니다. |
+| `neutral/weak` | 초기화·갱신·되돌리기처럼 부담이 낮은 반복 행동에 사용합니다. 취소·닫기·수정은 `neutral/outline`을 사용합니다. |
+| `neutral/outline` | 취소·닫기·수정처럼 주 행동과 위계를 분리하는 보조 행동에 사용합니다. `neutral/solid`과 같은 액션 그룹에서 함께 사용하지 않으며, `brand/outline`과 조합할 수 있습니다. |
 | `neutral/ghost` | 툴바·헤더·옵션 메뉴처럼 주변 UI와의 간섭을 줄여야 하는 보조 행동에 사용합니다. |
 | `neutral/link` | 다른 페이지·콘텐츠로 이동하거나 관련 정보를 확인하는 탐색성 행동에 사용합니다. 상태 변경이나 일반 CTA에는 사용하지 않습니다. `href`가 필요하며 `<a>`로 렌더링합니다. |
 | `critical/weak` | 삭제·초기화처럼 되돌리기 어려운 행동에 사용합니다. 위험을 분명히 전달하며 가능하면 확인 대화상자나 Alert Dialog와 함께 사용합니다. |
@@ -98,10 +113,10 @@ Variant는 같은 Role 안에서 시각적 위계를 정의합니다.
 | --- | --- |
 | `children` | `ReactNode` label입니다. 렌더링 가능한 내용이 하나 이상 필요하며 `startIcon`·`endIcon`과 조합할 수 있습니다. |
 | `icon` | icon-only용 단일 custom `ReactElement`입니다. children이나 start/end icon과 함께 사용하지 않습니다. |
-| `iconName` | icon-only용 `ButtonIconName` lucide 이름입니다. |
+| `iconName` | icon-only용 `ButtonIconName` lucide 이름입니다. 승인된 아이콘 목록의 이름만 허용합니다. |
 | `startIcon` / `endIcon` | label 앞·뒤의 단일 custom `ReactElement` 슬롯입니다. |
-| `startIconName` / `endIconName` | label 앞·뒤의 `ButtonIconName` lucide 이름 슬롯입니다. |
-| `aria-label` | `string`이며 icon-only에서 비어 있지 않은 accessible name으로 필수입니다. |
+| `startIconName` / `endIconName` | label 앞·뒤의 `ButtonIconName` lucide 이름 슬롯입니다. 승인된 아이콘 목록의 이름만 허용합니다. |
+| `aria-label` | 선택적인 `string`입니다. icon-only의 accessible name을 제공할 때 지정하며, 필수로 강제하지 않습니다. |
 | `disabled` | `boolean`입니다. native button은 `disabled`, link는 href 제거·`aria-disabled="true"`·`tabIndex={-1}`를 적용합니다. |
 | `loading` | `boolean`입니다. label·아이콘 공간을 유지한 progress circle을 표시하고 상호작용을 차단합니다. `aria-busy="true"`를 적용합니다. |
 | `className` | `string`이며 배치·컨테이너 보정에만 허용합니다. |
@@ -114,15 +129,19 @@ Variant는 같은 Role 안에서 시각적 위계를 정의합니다.
 
 `startIcon`, `endIcon`, `icon`은 단일 `ReactElement` 슬롯입니다. lucide 아이콘은 `startIconName`, `endIconName`, `iconName`으로 PascalCase 전체 이름을 지정합니다. 이름 prop은 `ButtonIconName` 자동완성을 제공하며 custom ReactElement와 같은 슬롯에 함께 지정할 수 없습니다.
 
+`ButtonIconName`은 EVA 화면에서 실제로 사용하는 lucide 아이콘을 모은 승인된 아이콘 목록입니다. 목록은 `lucide-react`의 canonical 이름만 포함하며 `AlertCircle`처럼 deprecated된 alias는 허용하지 않습니다. 승인된 이름 전체는 설치된 패키지의 공개 `spec.json`의 `api.iconNames`와 내부 Storybook 아이콘 카탈로그에서 확인합니다. 이름으로 지정한 아이콘은 동기적으로 렌더링하며 SSR에서도 SVG를 바로 출력합니다. 목록에 없는 이름은 TypeScript 오류로 막고, 런타임에 전달되면 render 오류로 처리합니다.
+
+승인된 아이콘 목록 밖의 아이콘이 필요하면 `icon`, `startIcon`, `endIcon`에 `ReactElement`로 전달합니다. 같은 아이콘이 두 화면 이상에서 반복되면 승인된 아이콘 목록에 추가하는 PR을 엽니다. 슬롯 아이콘을 `lucide-react`에서 직접 import할 때는 소비처 `package.json`에 `lucide-react`를 EDS와 같은 `1.45.0`으로 선언합니다. pnpm처럼 엄격한 node_modules에서는 선언 없이 resolve되지 않고, 버전이 다르면 아이콘 코드가 두 벌 번들됩니다. 슬롯 아이콘의 크기는 Button이 맞추므로 stroke 두께만 lucide 기본값 `2`로 두면 이름으로 지정한 아이콘과 같아 보입니다.
+
 이름으로 지정한 lucide 아이콘은 `lucide-react`의 기본 시각 설정을 사용합니다. Button은 아이콘 영역의 크기만 조정하며, `color`, `size`, `strokeWidth`, `strokeLinecap`, `strokeLinejoin`을 소비처 prop으로 노출하거나 덮어쓰지 않습니다. `aria-hidden`과 `focusable`은 Button 접근성 contract에 따라 내부에서 설정합니다.
 
 - children만 있으면 `textOnly`입니다.
 - children과 `startIcon`이 있으면 `iconFirst`입니다.
 - children과 `endIcon`이 있으면 `iconLast`입니다.
 - children과 두 아이콘이 있으면 `iconBoth`입니다.
-- children 없이 `icon`만 있으면 `iconOnly`이며 비어 있지 않은 `aria-label`이 필수입니다.
+- children 없이 `icon` 또는 `iconName`만 있으면 `iconOnly`입니다. 접근성 이름이 필요하면 비어 있지 않은 `aria-label`을 지정합니다.
 
-빈 label·icon과 잘못된 슬롯 조합은 모든 환경에서 오류로 처리합니다. label은 한 줄을 유지합니다.
+빈 label·icon, 제공된 빈 `aria-label`과 잘못된 슬롯 조합은 모든 환경에서 오류로 처리합니다. label은 한 줄을 유지합니다.
 
 `className`, native `aria-*`, `data-*`, `forwardRef`를 지원합니다. `style`과 임의 스타일 override는 공개하지 않습니다.
 
@@ -135,7 +154,7 @@ Variant는 같은 Role 안에서 시각적 위계를 정의합니다.
 - hover는 CSS `:hover`로 처리합니다.
 - 승인된 시각 상태는 enabled, hover, disabled, loading이며 focus-visible은 별도 focus ring 상태로 제공합니다. active·pressed·visited 상태는 지원하지 않습니다.
 - focus-visible ring은 `color-stroke-focusRing` semantic token과 2px outline·offset 구조값을 사용합니다.
-- 아이콘은 시각 장식으로 `aria-hidden="true"` 처리하며, icon-only의 이름은 Button의 `aria-label`로 제공합니다.
+- 아이콘은 시각 장식으로 `aria-hidden="true"` 처리하며, icon-only의 accessible name을 제공할 때 Button의 `aria-label`을 사용합니다. `aria-label`은 필수로 강제하지 않습니다.
 - loading progress circle은 `800ms linear infinite` 회전하며 `prefers-reduced-motion: reduce`에서는 정지합니다.
 
 ## 문서와 검증

package/dist/components/Button/spec.json

@@ -1,6 +1,6 @@
 {
   "specVersion": 1,
-  "packageVersion": "0.0.3",
+  "packageVersion": "0.1.0",
   "name": "Button",
   "purpose": "사용자가 즉시 실행할 수 있는 행동과 탐색을 표현하는 인터랙티브 요소입니다.",
   "usageContexts": [
@@ -8,12 +8,20 @@
     "다른 페이지나 콘텐츠로 이동하는 탐색에는 neutral/link branch를 사용합니다.",
     "brand는 화면에서 가장 중요한 행동을 강조할 때 사용합니다.",
     "neutral은 일반적인 액션과 탐색에 사용합니다.",
-    "critical은 삭제·초기화처럼 되돌리기 어려운 행동에 사용합니다."
+    "critical은 삭제·초기화처럼 되돌리기 어려운 행동에 사용합니다.",
+    "생성·저장·관리·확인처럼 화면의 핵심 행동에는 brand/solid를 먼저 검토합니다.",
+    "검색·조회·일반적인 주요 실행에는 neutral/solid를 먼저 검토합니다.",
+    "취소·닫기·수정 같은 보조 작업에는 neutral/outline을 사용합니다.",
+    "초기화·갱신·되돌리기처럼 부담이 낮은 반복 행동에는 neutral/weak를 사용합니다.",
+    "되돌리기 어려운 삭제·초기화는 critical/weak와 확인 절차를 먼저 검토합니다.",
+    "비동기 저장·확인에는 loading을 사용해 중복 실행을 막고 라벨 공간을 유지합니다.",
+    "표 행 조작·pagination처럼 공간이 좁은 곳의 icon-only는 accessible name을 확인합니다.",
+    "icon은 생성·수정·삭제·외부 이동·다운로드처럼 행동의 목적이나 방향을 보조할 때 사용합니다.",
+    "icon-only의 접근성 이름을 제공하려면 aria-label을 지정합니다. aria-label은 필수로 강제하지 않습니다."
   ],
   "unsupportedContexts": [
     "문서에 없는 role·variant·상태를 className이나 inline style로 우회하지 않습니다.",
-    "상태 변경이나 일반 CTA를 neutral/link로 표현하지 않습니다.",
-    "icon-only에서는 accessible name 없이 아이콘만 사용하지 않습니다."
+    "상태 변경이나 일반 CTA를 neutral/link로 표현하지 않습니다."
   ],
   "api": {
     "props": [
@@ -95,7 +103,7 @@
         "name": "aria-label",
         "type": "string",
         "required": false,
-        "description": "accessible name입니다. icon-only에서는 필수입니다."
+        "description": "accessible name입니다. icon-only의 접근성 이름을 제공할 때 사용합니다."
       },
       {
         "name": "disabled",
@@ -155,8 +163,57 @@
       "iconFirst": "children과 startIcon 또는 startIconName을 제공합니다.",
       "iconLast": "children과 endIcon 또는 endIconName을 제공합니다.",
       "iconBoth": "children과 앞·뒤 아이콘을 모두 제공합니다.",
-      "iconOnly": "children 없이 icon 또는 iconName을 제공하고 비어 있지 않은 aria-label을 지정합니다."
+      "iconOnly": "children 없이 icon 또는 iconName을 제공합니다. 접근성 이름이 필요하면 aria-label을 지정합니다."
     },
+    "iconNames": [
+      "ArrowLeft",
+      "ArrowRight",
+      "Check",
+      "ChevronDown",
+      "ChevronLeft",
+      "ChevronRight",
+      "ChevronUp",
+      "ChevronsUpDown",
+      "Circle",
+      "CircleAlert",
+      "CircleCheckBig",
+      "CirclePause",
+      "CirclePlay",
+      "CircleQuestionMark",
+      "ClockAlert",
+      "Copy",
+      "Eye",
+      "EyeOff",
+      "FaceNeutral",
+      "FileDown",
+      "FilePenLine",
+      "FileX",
+      "FolderClock",
+      "Fullscreen",
+      "ImageOff",
+      "ImagePlus",
+      "Info",
+      "Key",
+      "Languages",
+      "Layers2",
+      "List",
+      "LoaderCircle",
+      "LockOpen",
+      "Mail",
+      "Megaphone",
+      "Minimize",
+      "Minus",
+      "Moon",
+      "Paperclip",
+      "Plus",
+      "RotateCw",
+      "Search",
+      "Sun",
+      "ThumbsUp",
+      "Trash",
+      "VectorSquare",
+      "X"
+    ],
     "typeExports": [
       "ButtonProps",
       "ButtonComponent",
@@ -171,7 +228,7 @@
   "accessibility": {
     "nativeButtonType": "native button branch에서는 type을 필수로 지정합니다.",
     "linkHref": "neutral/link branch에서는 href를 필수로 지정합니다.",
-    "iconOnlyName": "icon-only layout에서는 비어 있지 않은 aria-label을 필수로 지정합니다.",
+    "iconOnlyName": "icon-only layout에서는 접근성 이름을 제공할 때 비어 있지 않은 aria-label을 지정합니다. aria-label은 필수가 아닙니다.",
     "disabledLink": "비활성 link는 href를 제거하고 aria-disabled와 tabIndex를 적용합니다.",
     "loading": "loading 중에는 aria-busy를 적용하고 상호작용을 차단합니다.",
     "focusVisible": "keyboard focus에는 승인된 focus ring을 표시합니다."

package/dist/components.css

@@ -245,9 +245,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 auto;
   appearance: none;
-  margin: 0;
   border: 0;
   font: inherit;
   white-space: nowrap;