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

package/dist/temp/src/components/forms-and-input/slider/__tests__/Slider.test.d.ts

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

package/dist/temp/src/components/forms-and-input/slider/__tests__/Slider.test.js

@@ -0,0 +1,294 @@
+// @vitest-environment jsdom
+//
+// Slider (React) 위험 경로 — 위험 목록표 RSL-xx.
+// vanilla NcuaSlider(assets/scripts/slider.ts) 실구현을 그대로 쓴다(vi.mock 없음).
+// jsdom 은 레이아웃이 없으므로 컨테이너의 getBoundingClientRect 를 { left: 0, width: TRACK_WIDTH } 로 고정하고
+// clientX 로 위치를 만든다. 기본 0~100 · step 1 이라 "트랙 비율(%) = 값" 이다.
+// vanilla 결함(SL-05a·SL-19a·SL-22)이 React 에 보이면 새 ID 대신 SL ID 를 참조한다.
+import { createElement, useCallback, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Slider } from '../Slider';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TRACK_WIDTH = 200;
+const PERCENT_SCALE = 100;
+const INITIAL_VALUE = 40;
+const NEXT_VALUE = 50;
+const CLICK_VALUE = 30;
+const DRAG_VALUE = 70;
+const RANGE_LOW = 20;
+const RANGE_HIGH = 60;
+const ABOVE_HIGH = 90;
+const RANGE = [RANGE_LOW, RANGE_HIGH];
+/** 재생성 확인용 옵션 변경값 */
+const WIDE_MAX = 200;
+const STEP_TEN = 10;
+/** step 10 에서 33% 클릭은 30 으로 스냅된다 */
+const OFF_STEP_CLICK = 33;
+/** value 생략 + min > 0 — (0 − 20) / (100 − 20) = −25% */
+const CUSTOM_MIN = 20;
+const OUT_OF_TRACK_LEFT = '-25%';
+let root = null;
+let container = null;
+const renderElement = (element) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(element);
+    });
+    return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = (props = {}) => renderElement(createElement(Slider, props));
+beforeEach(() => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: TRACK_WIDTH,
+        width: TRACK_WIDTH,
+        height: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+    });
+});
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+    vi.restoreAllMocks();
+    document.body.style.userSelect = '';
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const sliderOf = (view) => requireElement(view, '.ncua-slider');
+const trackOf = (view) => requireElement(view, '.ncua-slider__track');
+const handlesOf = (view) => Array.from(view.querySelectorAll('.ncua-slider__handle'));
+const valueNowOf = (view) => handlesOf(view).map((handle) => handle.getAttribute('aria-valuenow'));
+/** 트랙 비율(%)을 clientX 로 바꾼다 (트랙 left 0). */
+const clientXAt = (percent) => (TRACK_WIDTH * percent) / PERCENT_SCALE;
+const mouseDown = (target, clientX) => {
+    act(() => {
+        target.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, clientX }));
+    });
+};
+const mouseMove = (clientX) => {
+    act(() => {
+        document.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX }));
+    });
+};
+const mouseUp = () => {
+    act(() => {
+        document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+    });
+};
+/** 받은 값으로 value 를 갱신하는 일반 controlled 사용 — onChange 를 인라인(매 렌더 새 참조) 또는 useCallback 으로 만든다 */
+const ControlledSlider = ({ stable, onValue, }) => {
+    const [value, setValue] = useState(0);
+    const stableOnChange = useCallback((next) => {
+        onValue(next);
+        setValue(next);
+    }, [onValue]);
+    const inlineOnChange = (next) => {
+        onValue(next);
+        setValue(next);
+    };
+    return createElement(Slider, { value, onChange: stable ? stableOnChange : inlineOnChange });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('Slider — 마운트 (RSL-01)', () => {
+    it('RSL-01 컨테이너에 트랙·진행 바·핸들을 만들고 value·min·max 를 핸들 aria 에 반영한다', () => {
+        const view = render({ min: 0, max: PERCENT_SCALE, value: INITIAL_VALUE });
+        const [handle] = handlesOf(view);
+        expect(view.querySelector('.ncua-slider__track')).not.toBeNull();
+        expect(handlesOf(view)).toHaveLength(1);
+        expect([
+            handle.getAttribute('aria-valuenow'),
+            handle.getAttribute('aria-valuemin'),
+            handle.getAttribute('aria-valuemax'),
+            handle.style.left,
+        ]).toEqual([String(INITIAL_VALUE), '0', String(PERCENT_SCALE), `${INITIAL_VALUE}%`]);
+    });
+    it('RSL-01 labelPosition bottom 이면 핸들 안에 값 라벨을 만든다', () => {
+        const view = render({ value: INITIAL_VALUE, labelPosition: 'bottom' });
+        expect(requireElement(view, '.ncua-slider__label').textContent).toBe(`${INITIAL_VALUE}%`);
+    });
+    it('RSL-01 disabled 로 마운트하면 핸들이 aria-disabled true 이고 트랙을 눌러도 onChange 가 없다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: INITIAL_VALUE, disabled: true, onChange });
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        expect(handlesOf(view)[0].getAttribute('aria-disabled')).toBe('true');
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it('RSL-01 range value 는 핸들 2개로 만든다', () => {
+        const view = render({ value: RANGE });
+        expect(valueNowOf(view)).toEqual([String(RANGE_LOW), String(RANGE_HIGH)]);
+    });
+});
+describe('Slider — 트랙 조작 (RSL-02)', () => {
+    it('RSL-02 단일: 트랙 mousedown·mousemove 마다 onChange(값) 를 부르고 핸들 aria 를 갱신한다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: 0, onChange });
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        mouseMove(clientXAt(DRAG_VALUE));
+        mouseUp();
+        expect(onChange.mock.calls).toEqual([[CLICK_VALUE], [DRAG_VALUE]]);
+        expect(valueNowOf(view)).toEqual([String(DRAG_VALUE)]);
+    });
+    it('RSL-02 range: 오른쪽 핸들 바깥 트랙을 누르면 onChange([low, 누른 값])', () => {
+        const onChange = vi.fn();
+        const view = render({ value: RANGE, onChange });
+        mouseDown(trackOf(view), clientXAt(ABOVE_HIGH));
+        expect(onChange).toHaveBeenCalledWith([RANGE_LOW, ABOVE_HIGH]);
+    });
+});
+describe('Slider — controlled 드래그 (RSL-03)', () => {
+    it('RSL-03 useCallback 으로 안정된 onChange 면 부모 재렌더 뒤에도 드래그가 이어진다', () => {
+        const onValue = vi.fn();
+        const view = renderElement(createElement(ControlledSlider, { stable: true, onValue }));
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        mouseMove(clientXAt(DRAG_VALUE));
+        mouseUp();
+        expect(onValue.mock.calls).toEqual([[CLICK_VALUE], [DRAG_VALUE]]);
+        expect(valueNowOf(view)).toEqual([String(DRAG_VALUE)]);
+    });
+    it('RSL-03 인라인 onChange 면 첫 onChange 뒤 인스턴스가 재생성되어 이어지는 mousemove 가 무시된다', () => {
+        // 현재 동작 고정 — 결함 후보: #596 (onChange 가 생성 effect deps 라 재렌더마다 destroy·재생성, 드래그 상태 유실 — 조작 불능)
+        const onValue = vi.fn();
+        const view = renderElement(createElement(ControlledSlider, { stable: false, onValue }));
+        const handleBefore = handlesOf(view)[0];
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        mouseMove(clientXAt(DRAG_VALUE));
+        mouseUp();
+        expect(onValue.mock.calls).toEqual([[CLICK_VALUE]]);
+        expect(valueNowOf(view)).toEqual([String(CLICK_VALUE)]);
+        expect(handlesOf(view)[0]).not.toBe(handleBefore);
+    });
+    it.todo('RSL-03 인라인 onChange 로 controlled 사용해도 드래그 중 인스턴스를 유지해 mousemove 마다 onChange 가 이어진다 (기대)');
+});
+describe('Slider — value prop 변경 (RSL-04)', () => {
+    it('RSL-04 value 가 바뀌면 같은 핸들의 위치·aria 를 setValue 로 갱신하고 onChange 는 부르지 않는다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: INITIAL_VALUE, onChange });
+        const handleBefore = handlesOf(view)[0];
+        render({ value: NEXT_VALUE, onChange });
+        expect(handlesOf(view)[0]).toBe(handleBefore);
+        expect([handleBefore.getAttribute('aria-valuenow'), handleBefore.style.left]).toEqual([
+            String(NEXT_VALUE),
+            `${NEXT_VALUE}%`,
+        ]);
+        expect(onChange).not.toHaveBeenCalled();
+    });
+});
+describe('Slider — disabled 토글 (RSL-05)', () => {
+    it('RSL-05 false → true 면 disable() 로 조작을 막고 aria-disabled true·opacity 0.5', () => {
+        const onChange = vi.fn();
+        const view = render({ value: 0, onChange });
+        render({ value: 0, onChange, disabled: true });
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        expect(onChange).not.toHaveBeenCalled();
+        expect([handlesOf(view)[0].getAttribute('aria-disabled'), sliderOf(view).style.opacity]).toEqual(['true', '0.5']);
+    });
+    it('RSL-05 true → false 면 enable() 로 조작이 복구되고 aria-disabled false', () => {
+        const onChange = vi.fn();
+        const view = render({ value: 0, onChange, disabled: true });
+        render({ value: 0, onChange, disabled: false });
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        expect(onChange).toHaveBeenCalledWith(CLICK_VALUE);
+        expect([handlesOf(view)[0].getAttribute('aria-disabled'), sliderOf(view).style.opacity]).toEqual(['false', '1']);
+    });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Slider — 재생성 (RSL-06)', () => {
+    it('RSL-06 단일 → range 로 value 타입이 바뀌면 인스턴스를 다시 만들어 핸들이 2개가 된다', () => {
+        const view = render({ value: INITIAL_VALUE });
+        render({ value: RANGE });
+        expect(valueNowOf(view)).toEqual([String(RANGE_LOW), String(RANGE_HIGH)]);
+    });
+    it('RSL-06 range → 단일로 바뀌면 핸들이 1개가 된다', () => {
+        const view = render({ value: RANGE });
+        render({ value: INITIAL_VALUE });
+        expect(valueNowOf(view)).toEqual([String(INITIAL_VALUE)]);
+    });
+    it.each([
+        ['max', { max: WIDE_MAX }, 'aria-valuemax', String(WIDE_MAX)],
+        ['min', { min: CUSTOM_MIN }, 'aria-valuemin', String(CUSTOM_MIN)],
+    ])('RSL-06 %s 가 바뀌면 핸들 %s 에 반영한다', (_name, changed, attribute, expected) => {
+        const view = render({ value: INITIAL_VALUE });
+        render({ value: INITIAL_VALUE, ...changed });
+        expect(handlesOf(view)).toHaveLength(1);
+        expect(handlesOf(view)[0].getAttribute(attribute)).toBe(expected);
+    });
+    it('RSL-06 step 이 바뀌면 트랙 클릭 값을 새 step 으로 스냅한다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: INITIAL_VALUE, onChange });
+        render({ value: INITIAL_VALUE, onChange, step: STEP_TEN });
+        mouseDown(trackOf(view), clientXAt(OFF_STEP_CLICK));
+        expect(onChange.mock.calls).toEqual([[CLICK_VALUE]]);
+    });
+    it('RSL-06 labelPosition 이 바뀌면 그 위치의 라벨로 바꾼다', () => {
+        const view = render({ value: INITIAL_VALUE, labelPosition: 'bottom' });
+        render({ value: INITIAL_VALUE, labelPosition: 'top-floating' });
+        expect(view.querySelectorAll('.ncua-slider__label')).toHaveLength(1);
+        expect(requireElement(view, '.ncua-slider__label--tooltip').textContent).toBe(`${INITIAL_VALUE}%`);
+    });
+    it('RSL-06 재생성된 인스턴스는 바뀐 max 와 tooltip 라벨을 반영한다', () => {
+        const view = render({ value: INITIAL_VALUE });
+        render({ value: INITIAL_VALUE, max: WIDE_MAX, labelPosition: 'top-floating' });
+        expect(handlesOf(view)[0].getAttribute('aria-valuemax')).toBe(String(WIDE_MAX));
+        expect(requireElement(view, '.ncua-slider__label--tooltip').textContent).toBe(`${INITIAL_VALUE}%`);
+    });
+});
+describe('Slider — 언마운트 (RSL-07)', () => {
+    it('RSL-07 언마운트하면 destroy 로 컨테이너를 비우고 document 리스너를 해제한다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: 0, onChange });
+        const slider = sliderOf(view);
+        mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+        act(() => {
+            root?.unmount();
+        });
+        root = null;
+        mouseMove(clientXAt(DRAG_VALUE));
+        expect(slider.childElementCount).toBe(0);
+        expect(onChange.mock.calls).toEqual([[CLICK_VALUE]]);
+    });
+});
+describe('Slider — className (RSL-08)', () => {
+    it('RSL-08 className 은 ncua-slider 뒤에 붙는다', () => {
+        const view = render({ className: 'my-slider' });
+        expect([sliderOf(view).classList.contains('ncua-slider'), sliderOf(view).classList.contains('my-slider')]).toEqual([
+            true,
+            true,
+        ]);
+    });
+    it('RSL-08 className 을 생략하면 class 속성이 "ncua-slider " (뒤 공백)이다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (className 생략 시 템플릿 문자열로 뒤 공백이 남음 — classnames 미사용)
+        const view = render();
+        expect(sliderOf(view).getAttribute('class')).toBe('ncua-slider ');
+    });
+    it.todo('RSL-08 className 을 생략하면 class 속성이 뒤 공백 없이 "ncua-slider" 이다 (기대, #597)');
+});
+describe('Slider — value 생략 (RSL-09)', () => {
+    it('RSL-09 value 를 생략하고 min 이 0 보다 크면 0 으로 시작해 핸들이 트랙 밖에 놓인다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (React 기본값 value = 0 — SL-19a 와 같은 뿌리, min 으로 시작해야 함)
+        const view = render({ min: CUSTOM_MIN });
+        const [handle] = handlesOf(view);
+        expect([handle.getAttribute('aria-valuenow'), handle.style.left]).toEqual(['0', OUT_OF_TRACK_LEFT]);
+    });
+    it.todo('RSL-09 value 를 생략하면 min 으로 시작한다 — min 20 이면 aria-valuenow 20·left 0% (기대, #597)');
+});

package/dist/temp/src/components/forms-and-input/switch/__tests__/Switch.test.d.ts

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

package/dist/temp/src/components/forms-and-input/switch/__tests__/Switch.test.js

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+//
+// Switch (React) 위험 경로 — 위험 목록표 SW-xx.
+// 두 radio 중 하나를 고르는 컴포넌트다. controlled radio 는 click 직후 React 가 checked 를 되돌리므로
+// "내부 상태가 바뀌었는가"는 click 뒤의 checked·active 클래스로 관찰한다.
+import { createElement, createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Switch } from '../Switch';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TEXT_OPTIONS = {
+    left: { label: '일', value: 'day' },
+    right: { label: '주', value: 'week' },
+};
+/** 왼쪽이 true 인 boolean 구성 — 문서 예시와 같은 정상 구성 */
+const ON_OFF = {
+    left: { label: '켜기', value: true },
+    right: { label: '끄기', value: false },
+};
+/** 왼쪽이 false 인 boolean 구성 — value 와 화면이 뒤집히는 구성 (SW-03) */
+const OFF_ON = {
+    left: { label: '끄기', value: false },
+    right: { label: '켜기', value: true },
+};
+let root = null;
+let container = null;
+const renderElement = (element) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(element);
+    });
+    return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = (props = {}) => renderElement(createElement(Switch, { name: 'period', ...TEXT_OPTIONS, ...props }));
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+    vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const switchOf = (view) => requireElement(view, '.ncua-switch');
+const leftOf = (view) => requireElement(view, '.ncua-switch__radio--left');
+const rightOf = (view) => requireElement(view, '.ncua-switch__radio--right');
+const optionOf = (view, side) => requireElement(view, `.ncua-switch__option--${side}`);
+const isActive = (view, side) => optionOf(view, side).classList.contains('ncua-switch__option--active');
+/** [왼쪽 checked, 오른쪽 checked] — 선택 상태를 한 번에 단언한다 */
+const checkedOf = (view) => [leftOf(view).checked, rightOf(view).checked];
+const click = (element) => {
+    act(() => {
+        element.click();
+    });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('Switch — uncontrolled 선택 (SW-01)', () => {
+    it('SW-01 defaultValue 를 생략하면 왼쪽이 선택되고 active 클래스가 붙는다', () => {
+        const view = render();
+        expect(checkedOf(view)).toEqual([true, false]);
+        expect(isActive(view, 'left')).toBe(true);
+        expect(optionOf(view, 'right').classList.contains('ncua-switch__option--inactive')).toBe(true);
+    });
+    it('SW-01 오른쪽 radio click → onChange(오른쪽 값) 이고 선택·active 가 오른쪽으로 옮겨간다', () => {
+        const onChange = vi.fn();
+        const view = render({ onChange });
+        click(rightOf(view));
+        expect(onChange).toHaveBeenCalledWith('week');
+        expect(checkedOf(view)).toEqual([false, true]);
+        expect([isActive(view, 'left'), isActive(view, 'right')]).toEqual([false, true]);
+    });
+    it('SW-01 defaultValue 로 오른쪽에서 시작해 왼쪽 click 시 onChange(왼쪽 값)', () => {
+        const onChange = vi.fn();
+        const view = render({ defaultValue: 'week', onChange });
+        expect(checkedOf(view)).toEqual([false, true]);
+        click(leftOf(view));
+        expect(onChange).toHaveBeenCalledWith('day');
+        expect(checkedOf(view)).toEqual([true, false]);
+    });
+});
+describe('Switch — controlled 문자열 (SW-02)', () => {
+    it('SW-02 value 로 선택을 표시하고 click 은 onChange 만 부를 뿐 선택을 옮기지 않는다', () => {
+        const onChange = vi.fn();
+        const view = render({ value: 'day', onChange });
+        click(rightOf(view));
+        expect(onChange).toHaveBeenCalledWith('week');
+        expect(checkedOf(view)).toEqual([true, false]);
+        expect(isActive(view, 'left')).toBe(true);
+    });
+    it('SW-02 부모가 value 를 바꿔야 선택이 옮겨간다', () => {
+        const view = render({ value: 'day', onChange: vi.fn() });
+        render({ value: 'week', onChange: vi.fn() });
+        expect(checkedOf(view)).toEqual([false, true]);
+        expect(isActive(view, 'right')).toBe(true);
+    });
+});
+describe('Switch — boolean 옵션 (SW-03)', () => {
+    it('SW-03 왼쪽이 true 인 구성: value true 면 왼쪽, false 면 오른쪽을 선택 표시한다', () => {
+        const view = render({ ...ON_OFF, value: true, onChange: vi.fn() });
+        expect(checkedOf(view)).toEqual([true, false]);
+        render({ ...ON_OFF, value: false, onChange: vi.fn() });
+        expect(checkedOf(view)).toEqual([false, true]);
+    });
+    it('SW-03 왼쪽이 true 인 구성: controlled 오른쪽 click → onChange(false), 왼쪽 click → onChange(true)', () => {
+        const onChange = vi.fn();
+        const view = render({ ...ON_OFF, value: true, onChange });
+        click(rightOf(view));
+        expect(onChange).toHaveBeenLastCalledWith(false);
+        render({ ...ON_OFF, value: false, onChange });
+        click(leftOf(view));
+        expect(onChange).toHaveBeenLastCalledWith(true);
+    });
+    it('SW-03 uncontrolled boolean 은 옵션 값을 그대로 넘긴다', () => {
+        const onChange = vi.fn();
+        const view = render({ ...OFF_ON, onChange });
+        click(rightOf(view));
+        expect(onChange).toHaveBeenCalledWith(true);
+        expect(checkedOf(view)).toEqual([false, true]);
+    });
+    it('SW-03 왼쪽이 false 인 구성에서 value true 를 주면 false 옵션(왼쪽)이 선택 표시된다', () => {
+        // 현재 동작 고정 — 결함 후보: #596 (value 를 옵션 값이 아니라 "왼쪽 여부"로 해석해 화면이 뒤집힘)
+        const view = render({ ...OFF_ON, value: true, onChange: vi.fn() });
+        expect(checkedOf(view)).toEqual([true, false]);
+        expect(leftOf(view).value).toBe('false');
+    });
+    it('SW-03 왼쪽이 false 인 구성에서 true 옵션(오른쪽) click 이 onChange(false) 를 넘긴다', () => {
+        // 현재 동작 고정 — 결함 후보: #596 (controlled 는 옵션 값이 아니라 "왼쪽이 선택됐는가"를 넘김 — 입력값 오전달)
+        const onChange = vi.fn();
+        const view = render({ ...OFF_ON, value: true, onChange });
+        click(rightOf(view));
+        expect(rightOf(view).value).toBe('true');
+        expect(onChange).toHaveBeenCalledWith(false);
+    });
+    it.todo('SW-03 boolean value 는 옵션 값과 비교해 선택을 표시한다 — {left:false,right:true} 에서 value true 면 오른쪽 (기대)');
+    it.todo('SW-03 controlled 여부와 무관하게 onChange 는 선택된 옵션의 value 를 넘긴다 (기대, #596)');
+});
+describe('Switch — disabled (SW-04)', () => {
+    it('SW-04 두 radio 가 disabled 이고 ncua-switch--disabled 가 붙으며 click 해도 onChange·선택 변화가 없다', () => {
+        const onChange = vi.fn();
+        const view = render({ disabled: true, onChange });
+        click(rightOf(view));
+        expect([leftOf(view).disabled, rightOf(view).disabled]).toEqual([true, true]);
+        expect(switchOf(view).classList.contains('ncua-switch--disabled')).toBe(true);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(checkedOf(view)).toEqual([true, false]);
+    });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Switch — ref (SW-05)', () => {
+    it('SW-05 forwarded ref 는 왼쪽 input 을 가리킨다', () => {
+        const ref = createRef();
+        const view = render({ ref });
+        expect(ref.current).toBe(leftOf(view));
+    });
+    it('SW-05 refs 를 주면 refs[0]·refs[1] 이 각 input 을 받는다', () => {
+        const leftRef = createRef();
+        const rightRef = createRef();
+        const view = render({ refs: [leftRef, rightRef] });
+        expect([leftRef.current, rightRef.current]).toEqual([leftOf(view), rightOf(view)]);
+    });
+    it('SW-05 refs 와 forwarded ref 를 함께 주면 forwarded ref 는 null 이다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (refs[0] 가 leftInputRef 자리를 차지해 useImperativeHandle 이 null 을 노출)
+        const ref = createRef();
+        const leftRef = createRef();
+        const view = render({ ref, refs: [leftRef, createRef()] });
+        expect(leftRef.current).toBe(leftOf(view));
+        expect(ref.current).toBeNull();
+    });
+    it.todo('SW-05 refs 를 함께 줘도 forwarded ref 는 왼쪽 input 을 가리킨다 (기대, #597)');
+});
+describe('Switch — 속성·라벨 (SW-06)', () => {
+    it('SW-06 두 radio 가 같은 name 을 갖고 value 는 문자열 그대로', () => {
+        const view = render();
+        expect([leftOf(view).name, rightOf(view).name, leftOf(view).value, rightOf(view).value]).toEqual([
+            'period',
+            'period',
+            'day',
+            'week',
+        ]);
+    });
+    it("SW-06 boolean 옵션 값은 'true'/'false' 문자열로 정규화된다", () => {
+        const view = render({ ...ON_OFF });
+        expect([leftOf(view).value, rightOf(view).value]).toEqual(['true', 'false']);
+    });
+    it('SW-06 label 은 ReactNode 그대로 렌더한다', () => {
+        const view = render({
+            left: { label: createElement('strong', { className: 'custom-label' }, '굵게'), value: 'bold' },
+            right: { label: '보통', value: 'normal' },
+        });
+        expect(requireElement(optionOf(view, 'left'), '.custom-label').textContent).toBe('굵게');
+        expect(requireElement(optionOf(view, 'right'), '.ncua-switch__label').textContent).toBe('보통');
+    });
+});
+describe('Switch — size·className (SW-07)', () => {
+    it.each(['xxs', 'xs', 'sm', 'md'])('SW-07 size %s → ncua-switch--%s', (size) => {
+        const view = render({ size });
+        expect(switchOf(view).classList.contains(`ncua-switch--${size}`)).toBe(true);
+    });
+    it('SW-07 목록 밖 size(타입 우회)는 xs 로 fallback 한다', () => {
+        const view = render({ size: 'lg' });
+        expect([
+            switchOf(view).classList.contains('ncua-switch--xs'),
+            switchOf(view).classList.contains('ncua-switch--lg'),
+        ]).toEqual([true, false]);
+    });
+    it('SW-07 size 를 생략하면 xs, className 은 루트에 붙는다', () => {
+        const view = render({ className: 'my-switch' });
+        expect([
+            switchOf(view).classList.contains('ncua-switch--xs'),
+            switchOf(view).classList.contains('my-switch'),
+        ]).toEqual([true, true]);
+    });
+});
+describe('Switch — onChange 없음 (SW-08)', () => {
+    it('SW-08 onChange 없이 click 해도 예외 없이 uncontrolled 선택이 옮겨간다', () => {
+        const view = render();
+        click(rightOf(view));
+        expect(checkedOf(view)).toEqual([false, true]);
+    });
+});

package/dist/temp/src/components/forms-and-input/textarea/__tests__/Textarea.test.d.ts

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