@ncds/ui-admin 1.8.23-alpha.1 → 1.8.24

package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

package/dist/types/src/components/navigation/bread-crumb/BreadCrumb.d.ts

@@ -4,10 +4,8 @@ interface BreadcrumbItemProps {
 }
 interface BreadcrumbProps {
     items: BreadcrumbItemProps[];
-    /** 첫 항목을 홈 아이콘으로 렌더링할지 여부. false 이면 label 텍스트로 렌더링한다. */
-    showHomeIcon?: boolean;
     className?: string;
 }
-declare const BreadCrumb: ({ items, showHomeIcon, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
 export { BreadCrumb };
 export type { BreadcrumbItemProps, BreadcrumbProps };

package/dist/ui-admin/assets/styles/style.css

@@ -67,6 +67,9 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
+  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
+  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -324,7 +327,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-sm-focused-4px-primary-100);
+  box-shadow: var(--shadow-xs-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -370,7 +373,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-sm-focused-4px-gray-100);
+  box-shadow: var(--shadow-xs-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -956,7 +959,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1737,7 +1740,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1927,7 +1930,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -3189,7 +3192,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3691,7 +3694,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -4032,7 +4035,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);
@@ -5194,7 +5197,7 @@ button {
   font-weight: var(--font-weights-commerce-sans-1);
   cursor: pointer;
 }
-.ncua-breadcrumb__list-item--home {
+.ncua-breadcrumb__list-item:first-child {
   height: 24px;
   padding: 4px;
 }
@@ -5325,16 +5328,15 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
+  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
-  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
-  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6596,7 +6598,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: var(--z-index-1);
+  z-index: 1;
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6741,7 +6743,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: var(--z-index-sticky);
+  z-index: 10;
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.23-alpha.1",
+  "version": "1.8.24",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -78,7 +78,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
-    "@ncds/ui-admin-icon": "0.1.12",
+    "@ncds/ui-admin-icon": "0.1.13",
     "classnames": "2.5.1",
     "dompurify": "3.4.12",
     "flatpickr": "4.6.13",

package/dist/cjs/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.js

@@ -1,207 +0,0 @@
-"use strict";
-
-var _react = require("react");
-var _client = require("react-dom/client");
-var _testUtils = require("react-dom/test-utils");
-var _vitest = require("vitest");
-var _BreadCrumb = require("../BreadCrumb");
-// @vitest-environment jsdom
-
-const LIST_ITEM = '.ncua-breadcrumb__list-item';
-const HOME_MODIFIER = 'ncua-breadcrumb__list-item--home';
-const ACTIVE_MODIFIER = 'ncua-breadcrumb__list-item--active';
-const ITEM = '.ncua-breadcrumb__item';
-/** DocBreadcrumbs(유일한 사내 호출부)와 같은 형태의 입력 — AC-7 회귀 기준 */
-const DOC_ITEMS = [{
-  href: '/',
-  label: '홈'
-}, {
-  href: '/docs',
-  label: '문서'
-}, {
-  label: '현재 페이지'
-}];
-let root = null;
-let container = null;
-function render(props) {
-  if (!container) {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = (0, _client.createRoot)(container);
-  }
-  (0, _testUtils.act)(() => {
-    root?.render(/*#__PURE__*/(0, _react.createElement)(_BreadCrumb.BreadCrumb, props));
-  });
-  return container;
-}
-(0, _vitest.afterEach)(() => {
-  if (root && container) {
-    (0, _testUtils.act)(() => root?.unmount());
-    container.remove();
-  }
-  root = null;
-  container = null;
-});
-const listItems = el => Array.from(el.querySelectorAll(LIST_ITEM));
-/** <li> 안에서 실제 포커스를 받는 요소(<a> 또는 <span>) */
-const itemOf = li => li.querySelector(ITEM);
-(0, _vitest.describe)('BreadCrumb — showHomeIcon 아이콘/라벨 분기', () => {
-  (0, _vitest.it)('AC-1: showHomeIcon 미지정이면 첫 항목을 홈 아이콘으로 렌더한다', () => {
-    // Given/When: showHomeIcon 을 넘기지 않고 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 첫 항목은 --home 모디파이어를 달고 svg 를 품으며, label 텍스트는 노출되지 않는다
-    const [first] = listItems(el);
-    (0, _vitest.expect)(first.classList.contains(HOME_MODIFIER)).toBe(true);
-    (0, _vitest.expect)(first.querySelector('svg')).not.toBeNull();
-    (0, _vitest.expect)(first.textContent).not.toContain(DOC_ITEMS[0].label);
-  });
-  (0, _vitest.it)('AC-2: showHomeIcon={false} 이면 첫 항목을 label 텍스트로 렌더한다', () => {
-    // Given/When: 라벨 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS,
-      showHomeIcon: false
-    });
-    // Then: 아이콘 대신 label 텍스트가 나오고 --home 은 붙지 않는다
-    const [first] = listItems(el);
-    (0, _vitest.expect)(first.classList.contains(HOME_MODIFIER)).toBe(false);
-    (0, _vitest.expect)(first.querySelector('svg')).toBeNull();
-    (0, _vitest.expect)(first.textContent).toBe(DOC_ITEMS[0].label);
-  });
-  (0, _vitest.it)('AC-3: 홈 아이콘 항목의 링크에 label 값이 aria-label 로 부여된다', () => {
-    // Given/When: 아이콘 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 접근 가능한 이름은 <li> 가 아니라 포커스를 받는 <a> 에 붙는다
-    const [first] = listItems(el);
-    const anchor = itemOf(first);
-    (0, _vitest.expect)(anchor?.tagName).toBe('A');
-    (0, _vitest.expect)(anchor?.getAttribute('aria-label')).toBe(DOC_ITEMS[0].label);
-  });
-  (0, _vitest.it)('AC-4(라벨 모드): 어떤 항목에도 --home 과 aria-label 이 붙지 않는다', () => {
-    // Given/When: 라벨 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS,
-      showHomeIcon: false
-    });
-    // Then: --home 은 전 항목에서 사라지고, 첫 항목의 aria-label 속성 자체가 출력되지 않는다
-    const items = listItems(el);
-    (0, _vitest.expect)(items.every(li => !li.classList.contains(HOME_MODIFIER))).toBe(true);
-    (0, _vitest.expect)(itemOf(items[0])?.hasAttribute('aria-label')).toBe(false);
-  });
-  (0, _vitest.it)('AC-4(아이콘 모드): --home 은 첫 항목에만 붙는다', () => {
-    // Given/When: 아이콘 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 홈 아이콘인 첫 항목에만 붙고 나머지에는 붙지 않는다
-    const items = listItems(el);
-    (0, _vitest.expect)(items.filter(li => li.classList.contains(HOME_MODIFIER))).toHaveLength(1);
-    (0, _vitest.expect)(items[0].classList.contains(HOME_MODIFIER)).toBe(true);
-  });
-  (0, _vitest.it)('AC-5: 마지막 항목은 showHomeIcon 과 무관하게 --active 를 달고 링크가 아니다', () => {
-    // Given/When: 아이콘 모드로 렌더하면
-    const iconMode = listItems(render({
-      items: DOC_ITEMS
-    }));
-    const iconLast = iconMode[iconMode.length - 1];
-    // Then: --active 가 붙고 <span> 이라 클릭 이동이 없다
-    (0, _vitest.expect)(iconLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    (0, _vitest.expect)(itemOf(iconLast)?.tagName).toBe('SPAN');
-    // When: 라벨 모드로 다시 렌더해도
-    const labelMode = listItems(render({
-      items: DOC_ITEMS,
-      showHomeIcon: false
-    }));
-    const labelLast = labelMode[labelMode.length - 1];
-    // Then: 판정은 showHomeIcon 과 독립이다
-    (0, _vitest.expect)(labelLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    (0, _vitest.expect)(itemOf(labelLast)?.tagName).toBe('SPAN');
-  });
-  (0, _vitest.it)('AC-6: 단일 항목이면 첫 항목이 곧 마지막 항목으로 처리된다', () => {
-    // Given/When: 항목이 하나뿐인 배열을 아이콘 모드로 렌더하면
-    const single = [{
-      href: '/',
-      label: '홈'
-    }];
-    const [iconOnly] = listItems(render({
-      items: single
-    }));
-    // Then: --home 과 --active 가 동시에 붙고 링크가 아니다
-    (0, _vitest.expect)(iconOnly.classList.contains(HOME_MODIFIER)).toBe(true);
-    (0, _vitest.expect)(iconOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    (0, _vitest.expect)(itemOf(iconOnly)?.tagName).toBe('SPAN');
-    (0, _vitest.expect)(iconOnly.querySelector('svg')).not.toBeNull();
-    // When: 같은 배열을 라벨 모드로 렌더하면
-    const [labelOnly] = listItems(render({
-      items: single,
-      showHomeIcon: false
-    }));
-    // Then: --active 만 붙고 label 텍스트가 나온다
-    (0, _vitest.expect)(labelOnly.classList.contains(HOME_MODIFIER)).toBe(false);
-    (0, _vitest.expect)(labelOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    (0, _vitest.expect)(labelOnly.textContent).toBe(single[0].label);
-  });
-  (0, _vitest.it)('AC-7: 기존 호출부 입력의 렌더 결과는 --home·aria-label 추가분 외에 변하지 않는다', () => {
-    // Given/When: DocBreadcrumbs 와 같은 입력을 showHomeIcon 미지정으로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    const items = listItems(el);
-    // Then: 요소 종류·텍스트·href 는 변경 전과 같고, 첫 항목 svg 도 그대로다
-    (0, _vitest.expect)(items).toHaveLength(DOC_ITEMS.length);
-    (0, _vitest.expect)(items.map(li => itemOf(li)?.tagName)).toEqual(['A', 'A', 'SPAN']);
-    (0, _vitest.expect)(items.map(li => itemOf(li)?.getAttribute('href'))).toEqual(['/', '/docs', null]);
-    (0, _vitest.expect)(items.map(li => li.textContent)).toEqual(['', DOC_ITEMS[1].label, DOC_ITEMS[2].label]);
-    (0, _vitest.expect)(items[0].querySelector('svg')).not.toBeNull();
-    // Then: <li> 클래스는 기존 베이스/--active 를 그대로 유지하고, 늘어난 것은 --home 뿐이다
-    (0, _vitest.expect)(items.map(li => Array.from(li.classList).sort())).toEqual([['ncua-breadcrumb__list-item', HOME_MODIFIER].sort(), ['ncua-breadcrumb__list-item'], ['ncua-breadcrumb__list-item', ACTIVE_MODIFIER].sort()]);
-    // Then: <a>/<span> 에 늘어난 속성은 첫 항목의 aria-label 뿐이다
-    (0, _vitest.expect)(itemOf(items[1])?.hasAttribute('aria-label')).toBe(false);
-    (0, _vitest.expect)(itemOf(items[2])?.hasAttribute('aria-label')).toBe(false);
-  });
-  (0, _vitest.it)('비링크 홈 항목에는 role="img" 를 부여해 aria-label 이 무시되지 않게 한다', () => {
-    // Given/When: 첫 항목에 href 가 없어 <span> 으로 렌더되는 입력(meta usageExamples.default 형태)을 아이콘 모드로 렌더하면
-    const el = render({
-      items: [{
-        label: '대시보드'
-      }, {
-        href: '/products',
-        label: '상품'
-      }, {
-        label: '상품 상세'
-      }]
-    });
-    // Then: generic role 의 <span> 은 aria-label 을 노출하지 못하므로 role="img" 로 이름을 살린다
-    const [first] = listItems(el);
-    const home = itemOf(first);
-    (0, _vitest.expect)(home?.tagName).toBe('SPAN');
-    (0, _vitest.expect)(home?.getAttribute('role')).toBe('img');
-    (0, _vitest.expect)(home?.getAttribute('aria-label')).toBe('대시보드');
-  });
-  (0, _vitest.it)('링크인 홈 항목에는 role 을 부여하지 않는다', () => {
-    // Given/When: 첫 항목에 href 가 있어 <a> 로 렌더되는 입력을 아이콘 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 링크는 이미 접근 가능한 이름을 지원하므로 role 을 덧씌우지 않는다 (ADR-3)
-    const items = listItems(el);
-    const home = itemOf(items[0]);
-    (0, _vitest.expect)(home?.tagName).toBe('A');
-    (0, _vitest.expect)(home?.hasAttribute('role')).toBe(false);
-    // Then: 홈이 아닌 항목에도 role 은 출력되지 않는다
-    (0, _vitest.expect)(items.slice(1).every(li => !itemOf(li)?.hasAttribute('role'))).toBe(true);
-  });
-  (0, _vitest.it)('경계: items 가 빈 배열이면 아무것도 렌더하지 않는다', () => {
-    // Given/When: 빈 배열을 양쪽 모드로 렌더하면
-    const el = render({
-      items: [],
-      showHomeIcon: false
-    });
-    // Then: <nav> 자체가 만들어지지 않는다 (기존 동작 유지)
-    (0, _vitest.expect)(el.querySelector('.ncua-breadcrumb')).toBeNull();
-    (0, _vitest.expect)(el.innerHTML).toBe('');
-  });
-});

package/dist/esm/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.js

@@ -1,204 +0,0 @@
-// @vitest-environment jsdom
-import { createElement } from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { afterEach, describe, expect, it } from 'vitest';
-import { BreadCrumb } from '../BreadCrumb';
-const LIST_ITEM = '.ncua-breadcrumb__list-item';
-const HOME_MODIFIER = 'ncua-breadcrumb__list-item--home';
-const ACTIVE_MODIFIER = 'ncua-breadcrumb__list-item--active';
-const ITEM = '.ncua-breadcrumb__item';
-/** DocBreadcrumbs(유일한 사내 호출부)와 같은 형태의 입력 — AC-7 회귀 기준 */
-const DOC_ITEMS = [{
-  href: '/',
-  label: '홈'
-}, {
-  href: '/docs',
-  label: '문서'
-}, {
-  label: '현재 페이지'
-}];
-let root = null;
-let container = null;
-function render(props) {
-  if (!container) {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-  }
-  act(() => {
-    root?.render(/*#__PURE__*/createElement(BreadCrumb, props));
-  });
-  return container;
-}
-afterEach(() => {
-  if (root && container) {
-    act(() => root?.unmount());
-    container.remove();
-  }
-  root = null;
-  container = null;
-});
-const listItems = el => Array.from(el.querySelectorAll(LIST_ITEM));
-/** <li> 안에서 실제 포커스를 받는 요소(<a> 또는 <span>) */
-const itemOf = li => li.querySelector(ITEM);
-describe('BreadCrumb — showHomeIcon 아이콘/라벨 분기', () => {
-  it('AC-1: showHomeIcon 미지정이면 첫 항목을 홈 아이콘으로 렌더한다', () => {
-    // Given/When: showHomeIcon 을 넘기지 않고 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 첫 항목은 --home 모디파이어를 달고 svg 를 품으며, label 텍스트는 노출되지 않는다
-    const [first] = listItems(el);
-    expect(first.classList.contains(HOME_MODIFIER)).toBe(true);
-    expect(first.querySelector('svg')).not.toBeNull();
-    expect(first.textContent).not.toContain(DOC_ITEMS[0].label);
-  });
-  it('AC-2: showHomeIcon={false} 이면 첫 항목을 label 텍스트로 렌더한다', () => {
-    // Given/When: 라벨 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS,
-      showHomeIcon: false
-    });
-    // Then: 아이콘 대신 label 텍스트가 나오고 --home 은 붙지 않는다
-    const [first] = listItems(el);
-    expect(first.classList.contains(HOME_MODIFIER)).toBe(false);
-    expect(first.querySelector('svg')).toBeNull();
-    expect(first.textContent).toBe(DOC_ITEMS[0].label);
-  });
-  it('AC-3: 홈 아이콘 항목의 링크에 label 값이 aria-label 로 부여된다', () => {
-    // Given/When: 아이콘 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 접근 가능한 이름은 <li> 가 아니라 포커스를 받는 <a> 에 붙는다
-    const [first] = listItems(el);
-    const anchor = itemOf(first);
-    expect(anchor?.tagName).toBe('A');
-    expect(anchor?.getAttribute('aria-label')).toBe(DOC_ITEMS[0].label);
-  });
-  it('AC-4(라벨 모드): 어떤 항목에도 --home 과 aria-label 이 붙지 않는다', () => {
-    // Given/When: 라벨 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS,
-      showHomeIcon: false
-    });
-    // Then: --home 은 전 항목에서 사라지고, 첫 항목의 aria-label 속성 자체가 출력되지 않는다
-    const items = listItems(el);
-    expect(items.every(li => !li.classList.contains(HOME_MODIFIER))).toBe(true);
-    expect(itemOf(items[0])?.hasAttribute('aria-label')).toBe(false);
-  });
-  it('AC-4(아이콘 모드): --home 은 첫 항목에만 붙는다', () => {
-    // Given/When: 아이콘 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 홈 아이콘인 첫 항목에만 붙고 나머지에는 붙지 않는다
-    const items = listItems(el);
-    expect(items.filter(li => li.classList.contains(HOME_MODIFIER))).toHaveLength(1);
-    expect(items[0].classList.contains(HOME_MODIFIER)).toBe(true);
-  });
-  it('AC-5: 마지막 항목은 showHomeIcon 과 무관하게 --active 를 달고 링크가 아니다', () => {
-    // Given/When: 아이콘 모드로 렌더하면
-    const iconMode = listItems(render({
-      items: DOC_ITEMS
-    }));
-    const iconLast = iconMode[iconMode.length - 1];
-    // Then: --active 가 붙고 <span> 이라 클릭 이동이 없다
-    expect(iconLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    expect(itemOf(iconLast)?.tagName).toBe('SPAN');
-    // When: 라벨 모드로 다시 렌더해도
-    const labelMode = listItems(render({
-      items: DOC_ITEMS,
-      showHomeIcon: false
-    }));
-    const labelLast = labelMode[labelMode.length - 1];
-    // Then: 판정은 showHomeIcon 과 독립이다
-    expect(labelLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    expect(itemOf(labelLast)?.tagName).toBe('SPAN');
-  });
-  it('AC-6: 단일 항목이면 첫 항목이 곧 마지막 항목으로 처리된다', () => {
-    // Given/When: 항목이 하나뿐인 배열을 아이콘 모드로 렌더하면
-    const single = [{
-      href: '/',
-      label: '홈'
-    }];
-    const [iconOnly] = listItems(render({
-      items: single
-    }));
-    // Then: --home 과 --active 가 동시에 붙고 링크가 아니다
-    expect(iconOnly.classList.contains(HOME_MODIFIER)).toBe(true);
-    expect(iconOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    expect(itemOf(iconOnly)?.tagName).toBe('SPAN');
-    expect(iconOnly.querySelector('svg')).not.toBeNull();
-    // When: 같은 배열을 라벨 모드로 렌더하면
-    const [labelOnly] = listItems(render({
-      items: single,
-      showHomeIcon: false
-    }));
-    // Then: --active 만 붙고 label 텍스트가 나온다
-    expect(labelOnly.classList.contains(HOME_MODIFIER)).toBe(false);
-    expect(labelOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
-    expect(labelOnly.textContent).toBe(single[0].label);
-  });
-  it('AC-7: 기존 호출부 입력의 렌더 결과는 --home·aria-label 추가분 외에 변하지 않는다', () => {
-    // Given/When: DocBreadcrumbs 와 같은 입력을 showHomeIcon 미지정으로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    const items = listItems(el);
-    // Then: 요소 종류·텍스트·href 는 변경 전과 같고, 첫 항목 svg 도 그대로다
-    expect(items).toHaveLength(DOC_ITEMS.length);
-    expect(items.map(li => itemOf(li)?.tagName)).toEqual(['A', 'A', 'SPAN']);
-    expect(items.map(li => itemOf(li)?.getAttribute('href'))).toEqual(['/', '/docs', null]);
-    expect(items.map(li => li.textContent)).toEqual(['', DOC_ITEMS[1].label, DOC_ITEMS[2].label]);
-    expect(items[0].querySelector('svg')).not.toBeNull();
-    // Then: <li> 클래스는 기존 베이스/--active 를 그대로 유지하고, 늘어난 것은 --home 뿐이다
-    expect(items.map(li => Array.from(li.classList).sort())).toEqual([['ncua-breadcrumb__list-item', HOME_MODIFIER].sort(), ['ncua-breadcrumb__list-item'], ['ncua-breadcrumb__list-item', ACTIVE_MODIFIER].sort()]);
-    // Then: <a>/<span> 에 늘어난 속성은 첫 항목의 aria-label 뿐이다
-    expect(itemOf(items[1])?.hasAttribute('aria-label')).toBe(false);
-    expect(itemOf(items[2])?.hasAttribute('aria-label')).toBe(false);
-  });
-  it('비링크 홈 항목에는 role="img" 를 부여해 aria-label 이 무시되지 않게 한다', () => {
-    // Given/When: 첫 항목에 href 가 없어 <span> 으로 렌더되는 입력(meta usageExamples.default 형태)을 아이콘 모드로 렌더하면
-    const el = render({
-      items: [{
-        label: '대시보드'
-      }, {
-        href: '/products',
-        label: '상품'
-      }, {
-        label: '상품 상세'
-      }]
-    });
-    // Then: generic role 의 <span> 은 aria-label 을 노출하지 못하므로 role="img" 로 이름을 살린다
-    const [first] = listItems(el);
-    const home = itemOf(first);
-    expect(home?.tagName).toBe('SPAN');
-    expect(home?.getAttribute('role')).toBe('img');
-    expect(home?.getAttribute('aria-label')).toBe('대시보드');
-  });
-  it('링크인 홈 항목에는 role 을 부여하지 않는다', () => {
-    // Given/When: 첫 항목에 href 가 있어 <a> 로 렌더되는 입력을 아이콘 모드로 렌더하면
-    const el = render({
-      items: DOC_ITEMS
-    });
-    // Then: 링크는 이미 접근 가능한 이름을 지원하므로 role 을 덧씌우지 않는다 (ADR-3)
-    const items = listItems(el);
-    const home = itemOf(items[0]);
-    expect(home?.tagName).toBe('A');
-    expect(home?.hasAttribute('role')).toBe(false);
-    // Then: 홈이 아닌 항목에도 role 은 출력되지 않는다
-    expect(items.slice(1).every(li => !itemOf(li)?.hasAttribute('role'))).toBe(true);
-  });
-  it('경계: items 가 빈 배열이면 아무것도 렌더하지 않는다', () => {
-    // Given/When: 빈 배열을 양쪽 모드로 렌더하면
-    const el = render({
-      items: [],
-      showHomeIcon: false
-    });
-    // Then: <nav> 자체가 만들어지지 않는다 (기존 동작 유지)
-    expect(el.querySelector('.ncua-breadcrumb')).toBeNull();
-    expect(el.innerHTML).toBe('');
-  });
-});

package/dist/temp/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.d.ts

@@ -1 +0,0 @@
-export {};