@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.1

package/dist/cjs/src/components/feedback-and-status/badge-group/__tests__/BadgeGroup.test.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _BadgeGroup = require("../BadgeGroup");
+// @vitest-environment jsdom
+//
+// BadgeGroup (src/components/feedback-and-status/badge-group/BadgeGroup.tsx) 위험 경로 — 위험 목록표 BG-xx.
+// Badge·sideSlotRender 는 실구현으로 렌더한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const GROUP_LABEL = '새 기능이 추가되었습니다';
+const GROUP_HREF = 'https://example.com/notice';
+const DEFAULT_GROUP_ICON_SIZE = '14';
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const 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)(_BadgeGroup.BadgeGroup, props));
+  });
+  return container;
+};
+const linkOf = view => view.querySelector('a.ncua-badge-group');
+(0, _vitest.describe)('BadgeGroup — 링크·배지·라벨·아이콘 (BG-01)', () => {
+  (0, _vitest.it)('BG-01 <a href target="_blank"> 안에 pill-dark-color Badge · groupLabel 을 렌더하고 기본은 neutral · sm 이다', () => {
+    const view = render({
+      label: 'NEW',
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF
+    });
+    const link = linkOf(view);
+    const badge = link?.querySelector('.ncua-badge');
+    (0, _vitest.expect)(link?.getAttribute('href')).toBe(GROUP_HREF);
+    (0, _vitest.expect)(link?.getAttribute('target')).toBe('_blank');
+    (0, _vitest.expect)(link?.classList.contains('ncua-badge-group--neutral')).toBe(true);
+    (0, _vitest.expect)(link?.classList.contains('ncua-badge-group--sm')).toBe(true);
+    (0, _vitest.expect)(['ncua-badge--pill-dark-color', 'ncua-badge--neutral', 'ncua-badge--sm'].map(name => badge?.classList.contains(name))).toEqual([true, true, true]);
+    (0, _vitest.expect)(badge?.textContent).toBe('NEW');
+    (0, _vitest.expect)(link?.querySelector('.ncua-badge-group__label')?.textContent).toBe(GROUP_LABEL);
+    (0, _vitest.expect)(link?.querySelector(':scope > svg')).toBeNull();
+    link?.focus();
+    (0, _vitest.expect)(document.activeElement).toBe(link);
+  });
+  (0, _vitest.it)('BG-01 color·size·target·groupClassName 을 링크와 Badge 에 반영한다', () => {
+    const view = render({
+      label: '오류',
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF,
+      color: 'error',
+      size: 'xs',
+      target: '_self',
+      groupClassName: 'my-group'
+    });
+    const link = linkOf(view);
+    const badge = link?.querySelector('.ncua-badge');
+    (0, _vitest.expect)(link?.getAttribute('target')).toBe('_self');
+    (0, _vitest.expect)(link?.classList.contains('ncua-badge-group--error')).toBe(true);
+    (0, _vitest.expect)(link?.classList.contains('ncua-badge-group--xs')).toBe(true);
+    (0, _vitest.expect)(link?.classList.contains('my-group')).toBe(true);
+    (0, _vitest.expect)(badge?.classList.contains('ncua-badge--error')).toBe(true);
+    (0, _vitest.expect)(badge?.classList.contains('ncua-badge--xs')).toBe(true);
+  });
+  (0, _vitest.it)('BG-01 groupIcon 이 있으면 라벨 뒤에 기본 14px 아이콘을 렌더한다', () => {
+    const view = render({
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF,
+      groupIcon: {
+        type: 'icon',
+        icon: _uiAdminIcon.ArrowRight
+      }
+    });
+    const icon = linkOf(view)?.lastElementChild;
+    (0, _vitest.expect)(icon?.tagName.toLowerCase()).toBe('svg');
+    (0, _vitest.expect)(icon?.previousElementSibling?.classList.contains('ncua-badge-group__label')).toBe(true);
+    (0, _vitest.expect)([icon?.getAttribute('width'), icon?.getAttribute('height')]).toEqual([DEFAULT_GROUP_ICON_SIZE, DEFAULT_GROUP_ICON_SIZE]);
+  });
+});
+(0, _vitest.describe)('BadgeGroup — rel·href 누락 (BG-02)', () => {
+  (0, _vitest.it)('BG-02 기본 target _blank 인데 rel 을 붙이지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (새 창 링크에 rel="noopener noreferrer" 미지정, 구형 브라우저 reverse tabnabbing·referrer 노출)
+    const view = render({
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF
+    });
+    (0, _vitest.expect)(linkOf(view)?.getAttribute('target')).toBe('_blank');
+    (0, _vitest.expect)(linkOf(view)?.hasAttribute('rel')).toBe(false);
+  });
+  (0, _vitest.it)('BG-02 href 가 없으면 href 없는 <a> 라 링크·키보드 포커스 대상이 아니다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (href 없는 <a> 는 tab 순서에서 빠지고 링크 역할도 없음)
+    const view = render({
+      groupLabel: GROUP_LABEL
+    });
+    const link = linkOf(view);
+    link?.focus();
+    (0, _vitest.expect)(link?.hasAttribute('href')).toBe(false);
+    (0, _vitest.expect)(document.activeElement).not.toBe(link);
+  });
+  _vitest.it.todo('BG-02 target 이 _blank 면 rel="noopener noreferrer" 를 붙인다 (기대, #597)');
+  _vitest.it.todo('BG-02 href 가 없으면 링크가 아닌 요소로 렌더하거나 href 를 필수로 한다 (기대, #597)');
+});

package/dist/cjs/src/components/feedback-and-status/carousel-arrow/__tests__/CarouselArrow.test.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _react = require("react");
+var _client = require("react-dom/client");
+var _server = require("react-dom/server");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _CarouselArrow = require("../CarouselArrow");
+// @vitest-environment jsdom
+//
+// CarouselArrow (src/components/feedback-and-status/carousel-arrow/CarouselArrow.tsx) 위험 경로 — 위험 목록표 CA-xx.
+// 좌우 아이콘은 아이콘 컴포넌트가 그리는 path 로 구분한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const 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)(_CarouselArrow.CarouselArrow, props));
+  });
+  return container;
+};
+/** 아이콘 컴포넌트가 그리는 path 의 d — DOM 의 svg 와 비교해 어떤 아이콘인지 판별한다 */
+const iconPathOf = Icon => {
+  const holder = document.createElement('div');
+  holder.innerHTML = (0, _server.renderToStaticMarkup)(/*#__PURE__*/(0, _react.createElement)(Icon));
+  return holder.querySelector('path')?.getAttribute('d') ?? null;
+};
+const buttonOf = view => view.querySelector('button.ncua-carousel-arrow');
+(0, _vitest.describe)('CarouselArrow — click·방향·클래스 (CA-01)', () => {
+  (0, _vitest.it)('CA-01 click 하면 onClick 을 호출한다', () => {
+    const onClick = _vitest.vi.fn();
+    const view = render({
+      chevron: 'right',
+      onClick
+    });
+    (0, _testUtils.act)(() => {
+      buttonOf(view)?.click();
+    });
+    (0, _vitest.expect)(buttonOf(view)?.getAttribute('type')).toBe('button');
+    (0, _vitest.expect)(onClick).toHaveBeenCalled();
+  });
+  _vitest.it.each([['left', _uiAdminIcon.ChevronLeft], ['right', _uiAdminIcon.ChevronRight]])('CA-01 chevron %s 면 그 방향 아이콘과 방향 클래스를 쓴다', (chevron, Icon) => {
+    const view = render({
+      chevron
+    });
+    const button = buttonOf(view);
+    (0, _vitest.expect)(button?.querySelector('svg.ncua-carousel-arrow__icon path')?.getAttribute('d')).toBe(iconPathOf(Icon));
+    (0, _vitest.expect)(button?.classList.contains(`ncua-carousel-arrow--${chevron}`)).toBe(true);
+  });
+  (0, _vitest.it)('CA-01 기본은 default · md 클래스이고 type·className 을 넘기면 반영한다', () => {
+    const view = render({
+      chevron: 'left'
+    });
+    (0, _vitest.expect)(buttonOf(view)?.classList.contains('ncua-carousel-arrow--default')).toBe(true);
+    (0, _vitest.expect)(buttonOf(view)?.classList.contains('ncua-carousel-arrow--md')).toBe(true);
+    render({
+      chevron: 'left',
+      type: 'line',
+      className: 'my-arrow'
+    });
+    (0, _vitest.expect)(buttonOf(view)?.classList.contains('ncua-carousel-arrow--line')).toBe(true);
+    (0, _vitest.expect)(buttonOf(view)?.classList.contains('my-arrow')).toBe(true);
+  });
+});
+(0, _vitest.describe)('CarouselArrow — 접근 가능한 이름 (CA-02)', () => {
+  (0, _vitest.it)('CA-02 아이콘만 있는 버튼에 aria-label·텍스트가 없어 접근 가능한 이름이 비어 있다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (아이콘 전용 버튼에 aria-label 이 없어 스크린리더가 용도를 읽지 못함)
+    const view = render({
+      chevron: 'left'
+    });
+    const button = buttonOf(view);
+    (0, _vitest.expect)(button?.hasAttribute('aria-label')).toBe(false);
+    (0, _vitest.expect)(button?.textContent).toBe('');
+  });
+  _vitest.it.todo('CA-02 좌우 방향에 맞는 aria-label(예: 이전·다음)을 가진다 (기대, #597)');
+});

package/dist/cjs/src/components/feedback-and-status/carousel-number-group/__tests__/CarouselNumberGroup.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _CarouselNumberGroup = require("../CarouselNumberGroup");
+// @vitest-environment jsdom
+//
+// CarouselNumberGroup (src/components/feedback-and-status/carousel-number-group/CarouselNumberGroup.tsx)
+// 위험 경로 — 위험 목록표 CN-xx.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const CURRENT_PAGE = 3;
+const TOTAL_PAGE = 10;
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const 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)(_CarouselNumberGroup.CarouselNumberGroup, props));
+  });
+  return container;
+};
+const groupOf = view => view.querySelector('.ncua-carousel-number-group');
+(0, _vitest.describe)('CarouselNumberGroup — 표시와 클래스 (CN-01)', () => {
+  (0, _vitest.it)('CN-01 현재 페이지와 "/전체" 를 표시하고 기본은 framed · light · sm 이다', () => {
+    const view = render({
+      currentPage: CURRENT_PAGE,
+      totalPage: TOTAL_PAGE
+    });
+    const group = groupOf(view);
+    (0, _vitest.expect)(view.querySelector('.ncua-carousel-number-group__number')?.textContent).toBe(String(CURRENT_PAGE));
+    (0, _vitest.expect)(view.querySelector('.ncua-carousel-number-group__total')?.textContent).toBe(`/${TOTAL_PAGE}`);
+    (0, _vitest.expect)(['framed', 'ncua-carousel-number-group--light', 'ncua-carousel-number-group--sm'].map(name => group?.classList.contains(name))).toEqual([true, true, true]);
+  });
+  (0, _vitest.it)('CN-01 framed false · dark 면 framed 를 빼고 dark 클래스를 붙인다', () => {
+    const view = render({
+      currentPage: CURRENT_PAGE,
+      totalPage: TOTAL_PAGE,
+      framed: false,
+      color: 'dark'
+    });
+    const group = groupOf(view);
+    (0, _vitest.expect)(group?.classList.contains('framed')).toBe(false);
+    (0, _vitest.expect)(group?.classList.contains('ncua-carousel-number-group--dark')).toBe(true);
+    (0, _vitest.expect)(group?.classList.contains('ncua-carousel-number-group--light')).toBe(false);
+  });
+});

package/dist/cjs/src/components/feedback-and-status/empty-state/__tests__/EmptyState.test.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _EmptyState = require("../EmptyState");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '결과가 없습니다';
+const DESCRIPTION = '조건을 바꿔 보세요';
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+});
+const mount = node => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  mounted.push({
+    root,
+    container
+  });
+  (0, _testUtils.act)(() => root.render(node));
+  return {
+    container
+  };
+};
+const emptyState = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/(0, _react.createElement)(_EmptyState.EmptyState, {
+    title: TITLE,
+    description: DESCRIPTION,
+    ...props
+  });
+};
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const buttons = root => Array.from(root.querySelectorAll('.ncua-empty-state__button-group button'));
+(0, _vitest.describe)('EmptyState — 버튼 영역 (EMS-01)', () => {
+  (0, _vitest.it)('EMS-01 buttons 가 없으면 title · description 만 그리고 버튼 영역이 없다', () => {
+    const view = mount(emptyState());
+    (0, _vitest.expect)(mustQuery(view.container, '.ncua-empty-state__title').textContent).toBe(TITLE);
+    (0, _vitest.expect)(mustQuery(view.container, '.ncua-empty-state__description').textContent).toBe(DESCRIPTION);
+    (0, _vitest.expect)(view.container.querySelector('.ncua-empty-state__button-group')).toBeNull();
+  });
+  (0, _vitest.it)('EMS-01 빈 배열이면 버튼 영역이 없다', () => {
+    const view = mount(emptyState({
+      buttons: []
+    }));
+    (0, _vitest.expect)(view.container.querySelector('.ncua-empty-state__button-group')).toBeNull();
+  });
+  (0, _vitest.it)('EMS-01 단일 객체면 버튼 1개를 그리고 size 기본값 xs 를 쓴다', () => {
+    const view = mount(emptyState({
+      buttons: {
+        label: '등록'
+      }
+    }));
+    const rendered = buttons(view.container);
+    (0, _vitest.expect)(rendered.map(button => button.textContent)).toEqual(['등록']);
+    (0, _vitest.expect)(rendered[0].classList.contains('ncua-btn--xs')).toBe(true);
+  });
+  (0, _vitest.it)('EMS-01 배열이면 순서대로 그리고 지정한 size · hierarchy · disabled 를 전달한다', () => {
+    const view = mount(emptyState({
+      buttons: [{
+        label: '취소',
+        size: 'sm',
+        hierarchy: 'secondary-gray'
+      }, {
+        label: '등록',
+        size: 'sm',
+        hierarchy: 'primary',
+        disabled: true
+      }]
+    }));
+    const rendered = buttons(view.container);
+    (0, _vitest.expect)(rendered.map(button => button.textContent)).toEqual(['취소', '등록']);
+    (0, _vitest.expect)(rendered.map(button => button.classList.contains('ncua-btn--sm'))).toEqual([true, true]);
+    (0, _vitest.expect)(rendered.map(button => button.disabled)).toEqual([false, true]);
+    (0, _vitest.expect)(rendered[1].classList.contains('ncua-btn--primary')).toBe(true);
+  });
+  (0, _vitest.it)('EMS-01 버튼 클릭은 그 버튼의 onClick 을 부른다', () => {
+    const onRegister = _vitest.vi.fn();
+    const view = mount(emptyState({
+      buttons: [{
+        label: '취소'
+      }, {
+        label: '등록',
+        onClick: onRegister
+      }]
+    }));
+    (0, _testUtils.act)(() => buttons(view.container)[1].click());
+    (0, _vitest.expect)(onRegister).toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('EmptyState — 폼 안 버튼 (EMS-02)', () => {
+  (0, _vitest.it)('EMS-02 폼 안의 EmptyState 버튼을 클릭하면 폼을 제출한다 (BTN-04 영향 사용처)', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#620 VNT-12 · BTN-04 같은 뿌리 — 공용 Button 에 type 기본값 없음)
+    const submits = [];
+    const view = mount(/*#__PURE__*/(0, _react.createElement)('form', {
+      onSubmit: event => {
+        event.preventDefault();
+        submits.push(event.nativeEvent);
+      }
+    }, emptyState({
+      buttons: {
+        label: '등록'
+      }
+    })));
+    (0, _testUtils.act)(() => buttons(view.container)[0].click());
+    (0, _vitest.expect)(submits).toHaveLength(1);
+  });
+  _vitest.it.todo('EMS-02 기대 동작: 폼 안의 EmptyState 버튼 클릭은 폼을 제출하지 않는다 (BTN-04 수정 시 함께 해소)');
+});

package/dist/cjs/src/components/feedback-and-status/progress-bar/__tests__/ProgressBar.test.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _ProgressBar = require("../ProgressBar");
+// @vitest-environment jsdom
+//
+// ProgressBar (React) 위험 경로 — 위험 목록표 RPB-xx. SegmentBar·SegmentLabels 는 렌더 결과로 함께 덮는다.
+// vanilla ProgressBar.ts(PB-xx)와 같은 계약 — 같은 입력에 다른 결과면 결함 후보로 적는다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const VALUE = 40;
+const SEG_A = 30;
+const SEG_B = 10;
+/** 30 : 10 → 75 : 25 로 정규화 */
+const NORMALIZED_A = 75;
+const NORMALIZED_B = 25;
+/** 라벨 위치 — 앞 폭 합 + 자기 폭 / 2 : 75 / 2 = 37.5, 75 + 25 / 2 = 87.5 */
+const CENTER_DIVISOR = 2;
+const FIRST_LABEL_LEFT = NORMALIZED_A / CENTER_DIVISOR;
+const SECOND_LABEL_LEFT = NORMALIZED_A + NORMALIZED_B / CENTER_DIVISOR;
+/** 세그먼트 1개 float 라벨 값 */
+const FLOAT_VALUE = 15;
+/** 0 세그먼트 라벨 시작점 — 앞 폭 합 − 1 (최소 0) */
+const ZERO_LABEL_OFFSET = 1;
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  return container;
+};
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/(0, _react.createElement)(_ProgressBar.ProgressBar, props));
+};
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const fillsOf = view => Array.from(view.querySelectorAll('.ncua-progress-bar__fill'));
+const segmentLabelsOf = view => Array.from(view.querySelectorAll('.ncua-progress-bar__label--segment'));
+// ── P0 ─────────────────────────────────────────────────
+(0, _vitest.describe)('ProgressBar — 단일 value (RPB-01)', () => {
+  (0, _vitest.it)('RPB-01 fill 하나의 width 와 aria-valuenow 가 같은 값이고 aria 범위는 0~100', () => {
+    const view = render({
+      value: VALUE
+    });
+    const [fill] = fillsOf(view);
+    (0, _vitest.expect)(fillsOf(view)).toHaveLength(1);
+    (0, _vitest.expect)([fill.style.width, fill.getAttribute('aria-valuenow'), fill.getAttribute('aria-valuemin'), fill.getAttribute('aria-valuemax')]).toEqual([`${VALUE}%`, String(VALUE), '0', '100']);
+  });
+});
+(0, _vitest.describe)('ProgressBar — 다중 세그먼트 (RPB-02)', () => {
+  (0, _vitest.it)('RPB-02 SegmentBar 가 세그먼트마다 정규화 width·first/last·색 클래스로 fill 을 만든다', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A,
+        color: 'blue'
+      }, {
+        value: SEG_B,
+        color: 'red'
+      }]
+    });
+    const [first, last] = fillsOf(view);
+    (0, _vitest.expect)(fillsOf(view).map(fill => fill.style.width)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+    (0, _vitest.expect)([first.classList.contains('ncua-progress-bar__fill--first'), first.classList.contains('ncua-progress-bar__fill--last'), first.classList.contains('ncua-progress-bar__fill--color-blue'), last.classList.contains('ncua-progress-bar__fill--last'), last.classList.contains('ncua-progress-bar__fill--color-red')]).toEqual([true, false, true, true, true]);
+    (0, _vitest.expect)(requireElement(view, '.ncua-progress-bar__bar').classList.contains('ncua-progress-bar__bar--segments')).toBe(true);
+  });
+  (0, _vitest.it)('RPB-02 SegmentLabels 가 세그먼트마다 정규화 값 라벨과 색 클래스를 렌더한다', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A,
+        color: 'blue'
+      }, {
+        value: SEG_B,
+        color: 'red'
+      }]
+    });
+    const labels = segmentLabelsOf(view);
+    (0, _vitest.expect)(labels.map(label => label.textContent)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+    (0, _vitest.expect)([labels[0].classList.contains('ncua-progress-bar__label--color-blue'), labels[1].classList.contains('ncua-progress-bar__label--color-red')]).toEqual([true, true]);
+    (0, _vitest.expect)(requireElement(view, '.ncua-progress-bar').classList.contains('ncua-progress-bar-bottom')).toBe(true);
+  });
+});
+(0, _vitest.describe)('ProgressBar — 세그먼트 1개 (RPB-03)', () => {
+  (0, _vitest.it)('RPB-03 색 fill 하나에 width·aria-valuenow 를 넣고 right 라벨에 값을 표시한다', () => {
+    const view = render({
+      label: 'right',
+      segments: [{
+        value: SEG_A,
+        color: 'green'
+      }]
+    });
+    const [fill] = fillsOf(view);
+    (0, _vitest.expect)(fillsOf(view)).toHaveLength(1);
+    (0, _vitest.expect)([fill.style.width, fill.getAttribute('aria-valuenow')]).toEqual([`${SEG_A}%`, String(SEG_A)]);
+    (0, _vitest.expect)(fill.classList.contains('ncua-progress-bar__fill--color-green')).toBe(true);
+    (0, _vitest.expect)(requireElement(view, '.ncua-progress-bar__label-right').textContent).toBe(`${SEG_A}%`);
+  });
+  _vitest.it.each([['bottom', '.ncua-progress-bar__label-bottom'], ['top-float', '.ncua-progress-bar__label-top-float'], ['bottom-float', '.ncua-progress-bar__label-bottom-float']])('RPB-03 label %s 이면 SingleLabel 을 그 위치에 렌더한다', (label, selector) => {
+    const view = render({
+      label,
+      segments: [{
+        value: SEG_A,
+        color: 'green'
+      }]
+    });
+    (0, _vitest.expect)(requireElement(view, selector).textContent).toBe(`${SEG_A}%`);
+    (0, _vitest.expect)(view.querySelectorAll('.ncua-progress-bar__label')).toHaveLength(1);
+  });
+  (0, _vitest.it)('RPB-03 세그먼트 1개 + float 라벨이면 컨테이너에 --progress-value 스타일을 준다', () => {
+    const view = render({
+      label: 'top-float',
+      segments: [{
+        value: FLOAT_VALUE
+      }]
+    });
+    (0, _vitest.expect)(requireElement(view, '.ncua-progress-bar').style.getPropertyValue('--progress-value')).toBe(`${FLOAT_VALUE}%`);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+const containerOf = view => requireElement(view, '.ncua-progress-bar');
+/** 컨테이너 직계 자식의 마지막 클래스(위치 modifier) — 라벨이 content 안/밖·앞/뒤 어디 있는지 본다 */
+const childOrderOf = view => Array.from(containerOf(view).children).map(child => child.classList[child.classList.length - 1] ?? '');
+(0, _vitest.describe)('ProgressBar — 라벨 배치 (RPB-04)', () => {
+  (0, _vitest.it)('RPB-04 right 라벨은 content 안 막대 뒤에 있고 컨테이너 클래스는 ncua-progress-bar-right', () => {
+    const view = render({
+      label: 'right',
+      value: VALUE
+    });
+    const content = requireElement(view, '.ncua-progress-bar__content');
+    (0, _vitest.expect)(containerOf(view).classList.contains('ncua-progress-bar-right')).toBe(true);
+    (0, _vitest.expect)(Array.from(content.children).map(child => child.classList[0])).toEqual(['ncua-progress-bar__bar', 'ncua-progress-bar__label']);
+    (0, _vitest.expect)(requireElement(content, '.ncua-progress-bar__label-right').textContent).toBe(`${VALUE}%`);
+  });
+  _vitest.it.each([['bottom', ['ncua-progress-bar__content', 'ncua-progress-bar__label-bottom']], ['top-float', ['ncua-progress-bar__label-top-float', 'ncua-progress-bar__content']], ['bottom-float', ['ncua-progress-bar__label-bottom-float', 'ncua-progress-bar__content']]])('RPB-04 %s 라벨은 content 밖 순서 %j', (label, order) => {
+    const view = render({
+      label,
+      value: VALUE
+    });
+    (0, _vitest.expect)(childOrderOf(view)).toEqual(order);
+    (0, _vitest.expect)(containerOf(view).classList.contains(`ncua-progress-bar-${label}`)).toBe(true);
+  });
+  (0, _vitest.it)('RPB-04 float 라벨이면 컨테이너에 --progress-value 를 준다', () => {
+    const view = render({
+      label: 'bottom-float',
+      value: VALUE
+    });
+    (0, _vitest.expect)(containerOf(view).style.getPropertyValue('--progress-value')).toBe(`${VALUE}%`);
+  });
+  (0, _vitest.it)('RPB-04 세그먼트 1개 + bottom-float 도 라벨이 content 앞에 온다', () => {
+    const view = render({
+      label: 'bottom-float',
+      segments: [{
+        value: SEG_A
+      }]
+    });
+    (0, _vitest.expect)(childOrderOf(view)).toEqual(['ncua-progress-bar__label-bottom-float', 'ncua-progress-bar__content']);
+  });
+});
+(0, _vitest.describe)('ProgressBar — 0% 라벨 (RPB-05)', () => {
+  _vitest.it.each([['기본(숨김)', undefined, null], ['showZeroLabel true', true, '0%']])('RPB-05 value 0 + %s → 라벨 %s', (_label, showZeroLabel, expected) => {
+    const view = render({
+      label: 'right',
+      value: 0,
+      showZeroLabel
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-progress-bar__label')?.textContent ?? null).toBe(expected);
+  });
+  (0, _vitest.it)('RPB-05 세그먼트 1개 값 0 도 기본은 라벨을 숨긴다', () => {
+    const view = render({
+      label: 'bottom',
+      segments: [{
+        value: 0
+      }]
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-progress-bar__label')).toBeNull();
+  });
+  (0, _vitest.it)('RPB-05 0 세그먼트 라벨은 기본 숨김, showZeroLabel 이면 앞 폭 합 − 1 위치에 translateX(0) 로 둔다', () => {
+    const segments = [{
+      value: SEG_A
+    }, {
+      value: 0
+    }, {
+      value: SEG_B
+    }];
+    const hidden = render({
+      segments
+    });
+    (0, _vitest.expect)(segmentLabelsOf(hidden).map(label => label.textContent)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+    const shown = render({
+      segments,
+      showZeroLabel: true
+    });
+    const zero = segmentLabelsOf(shown)[1];
+    (0, _vitest.expect)([zero.textContent, zero.style.left, zero.style.transform]).toEqual(['0%', `${NORMALIZED_A - ZERO_LABEL_OFFSET}%`, 'translateX(0)']);
+  });
+  (0, _vitest.it)('RPB-05 첫 세그먼트가 0 이면 시작점은 0 아래로 내려가지 않는다', () => {
+    const view = render({
+      segments: [{
+        value: 0
+      }, {
+        value: SEG_A
+      }],
+      showZeroLabel: true
+    });
+    (0, _vitest.expect)(segmentLabelsOf(view)[0].style.left).toBe('0%');
+  });
+});
+(0, _vitest.describe)('ProgressBar — 세그먼트 라벨 위치 (RPB-06)', () => {
+  (0, _vitest.it)('RPB-06 라벨 left = 앞 세그먼트 폭 합 + 자기 폭 / 2, transform translateX(-50%)', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A
+      }, {
+        value: SEG_B
+      }]
+    });
+    const labels = segmentLabelsOf(view);
+    (0, _vitest.expect)(labels.map(label => [label.style.left, label.style.transform])).toEqual([[`${FIRST_LABEL_LEFT}%`, 'translateX(-50%)'], [`${SECOND_LABEL_LEFT}%`, 'translateX(-50%)']]);
+  });
+  (0, _vitest.it)('RPB-06 색이 없으면 색 클래스를 붙이지 않는다', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A
+      }, {
+        value: SEG_B
+      }]
+    });
+    (0, _vitest.expect)(fillsOf(view).some(fill => Array.from(fill.classList).some(name => name.includes('--color-')))).toBe(false);
+  });
+});
+(0, _vitest.describe)('ProgressBar — 다중 세그먼트 aria (RPB-07)', () => {
+  (0, _vitest.it)('RPB-07 세그먼트 2개 이상이면 aria-valuenow 가 어디에도 없다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (다중 세그먼트에 진행 값 aria 가 없음 — vanilla ProgressBar.ts 와 같은 동작, 접근성)
+    const view = render({
+      segments: [{
+        value: SEG_A
+      }, {
+        value: SEG_B
+      }]
+    });
+    (0, _vitest.expect)(view.querySelector('[aria-valuenow]')).toBeNull();
+  });
+  _vitest.it.todo('RPB-07 세그먼트 2개 이상이면 role="progressbar" 와 합계 aria-valuenow 를 노출한다 (기대, #597)');
+});
+(0, _vitest.describe)('ProgressBar — label 미지정 (RPB-08)', () => {
+  (0, _vitest.it)('RPB-08 label 을 생략하면 컨테이너 클래스가 빈 modifier ncua-progress-bar- 를 갖고 라벨이 없다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (label 생략 시 빈 modifier "ncua-progress-bar-" 클래스가 붙음)
+    const view = render({
+      value: VALUE
+    });
+    (0, _vitest.expect)(containerOf(view).classList.contains('ncua-progress-bar-')).toBe(true);
+    (0, _vitest.expect)(view.querySelector('.ncua-progress-bar__label')).toBeNull();
+  });
+  _vitest.it.todo('RPB-08 label 을 생략하면 빈 modifier 클래스 ncua-progress-bar- 를 붙이지 않는다 (기대, #597)');
+});