# Changelog ## 1.14.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.13.0..HEAD`_ #### Other - `0f92eea` FloatingWindow 컴포넌트 추가 (#235) - `e44c0e4` 모달 초기 포커스 정책 개선 (#236) - `95cca4e` 0 duration 모션 즉시 완료 처리 (#234) - `a94819d` FloatingWindow 다중 창 관리자 추가 (#237) - `3582939` Modal·FloatingWindow 프레젠테이션 일원화 (#238) ### Minor Changes - e44c0e4: Modal과 ModalWindow가 DOM상 첫 control 대신 등록된 title을 기본 초기 focus로 사용하도록 개선하고, `auto`, `title`, `first-interactive` focus preset을 추가합니다. modeless FloatingWindow는 열릴 때 현재 focus를 유지합니다. Migration Notes: - 기본 Modal/ModalWindow 초기 focus가 Header close button에서 title로 변경됩니다. 첫 tabbable 요소가 필요한 경우 `initialFocus="first-interactive"`를 지정하세요. - `initialFocus="content"`는 호환용으로 유지되지만 신규 구현은 `title` 또는 구체적인 ref/function을 우선하세요. - 0f92eea: trigger/명시적 anchor 기준 collision-aware 배치, 자유 drag 전환, viewport 경계 보정을 지원하는 `FloatingWindow`와 동일 geometry에 Modal 기본 presentation, popup scale/fade motion 및 focus trap을 연결하는 `ModalWindowRoot`를 추가합니다. ModalWindow backdrop은 기본적으로 표시하지 않으며 명시적으로 활성화할 수 있습니다. Migration Notes: - 없음 - a94819d: 다중 FloatingWindow의 등록, 활성화 순서, modality 우선순위, 최상단 dismissal과 modal focus handoff를 조정하는 `FloatingWindowManager`를 추가합니다. FloatingWindow의 modeless와 modal Root가 동일한 Modal popup surface 진입·종료 모션을 사용하도록 motion ownership을 surface로 일원화하고, Header와 NavigationSection을 대체형 top chrome 계약으로 명확히 합니다. `ModalWindowRoot`는 Modal과 동일하게 backdrop을 기본 표시해 배경 pointer 입력을 차단합니다. 비활성 modeless window의 Close는 창을 최상단으로 올리지 않고 기존 stack 위치에서 종료 모션을 실행합니다. FloatingWindowContent에 Modal과 동일한 `resize="fixed"` surface와 body scroll state 연동을 추가하고, Footer의 ActionArea 조합이 scroll 경계에 맞춰 동작하도록 개선합니다. Migration Notes: - 다중 창을 사용할 때 `FloatingWindowManager`로 root들을 감싸고 각 root에 고유한 `windowId`를 지정합니다. - `FloatingWindowHeader`와 `FloatingWindowNavigationSection`은 함께 사용하지 않고 필요한 top chrome 하나를 선택합니다. - 단일 창과 Manager 밖의 기존 사용법은 변경되지 않습니다. ### Patch Changes - 95cca4e: motion duration 또는 duration factor가 `0`일 때 Accordion과 Modal의 런타임 spring을 시작하지 않고 최종 상태로 즉시 완료하도록 수정합니다. 음수, 비유한 값, 잘못된 CSS multiplier 형식은 runtime 설정 오류로 명확히 거부합니다. - 3582939: Modal surface가 header의 overlay positioning과 stacking을 명시적으로 소유하도록 우선순위를 보강해, CSS Module 주입 순서와 무관하게 FloatingWindow의 header, body, footer가 같은 열에 정렬되고 header drag가 유지되도록 수정합니다. FloatingWindowClose에 custom render 구성을 추가해 ActionArea 같은 임의의 버튼도 Root의 기본 dismiss 및 exit lifecycle을 유지하며 창을 닫을 수 있습니다. Migration Notes: - 없음 ### Migration Notes - 기본 Modal/ModalWindow 초기 focus가 Header close button에서 title로 변경됩니다. 첫 tabbable 요소가 필요한 경우 `initialFocus="first-interactive"`를 지정하세요. - `initialFocus="content"`는 호환용으로 유지되지만 신규 구현은 `title` 또는 구체적인 ref/function을 우선하세요. - 다중 창을 사용할 때 `FloatingWindowManager`로 root들을 감싸고 각 root에 고유한 `windowId`를 지정합니다. - `FloatingWindowHeader`와 `FloatingWindowNavigationSection`은 함께 사용하지 않고 필요한 top chrome 하나를 선택합니다. - 단일 창과 Manager 밖의 기존 사용법은 변경되지 않습니다. ## 1.13.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.12.2..HEAD`_ #### Other - `c35682c` npm 패키지 리소스 링크 자동화 (#230) - `a120226` Badge size 명명 표준화 (#231) ### Minor Changes - a120226: Badge의 작은 named size를 표준 size scale에 맞춰 `tiny`에서 `xsmall`로 정규화하고 TypeScript prop, 런타임 class, `data-oc-size` selector 계약을 일치시킵니다. Migration Notes - ``를 ``로 변경 - `[data-oc-component='badge'][data-oc-size='tiny']` selector를 `[data-oc-component='badge'][data-oc-size='xsmall']`로 변경 ### Patch Changes - c35682c: npm package README에서 공개 Storybook, 버전 고정 Changelog, UI Documentation, 의견 전달 경로를 바로 확인할 수 있도록 추가하고, 릴리즈 버전 변경 시 UI와 Icons의 jsDelivr 리소스 URL을 각 package manifest 버전에 맞춰 자동 갱신·검증합니다. publish 직전에는 README가 가리키는 리소스가 실제 tarball에 포함되는지 확인하고, Storybook 빌드에서는 README deep-link의 story ID를 검증합니다. Migration Notes - 없음 - Updated dependencies [c35682c] - @orioncactuscorp/icons@1.13.0 ### Migration Notes - ``를 ``로 변경 - `[data-oc-component='badge'][data-oc-size='tiny']` selector를 `[data-oc-component='badge'][data-oc-size='xsmall']`로 변경 ## 1.12.2 ### Changes _Commit range: `@orioncactuscorp/ui@1.12.1..HEAD`_ #### Documentation - `d8eb4eb` docs(release): document icon version alignment (#228) #### Other - `e442fed` npm 패키지 릴리즈 노트 포함 (#227) ### Patch Changes - e442fed: npm package tarball에 누적 릴리즈 노트인 `CHANGELOG.md`를 포함하고, publish 전에 실제 pack 결과를 검증합니다. Migration Notes - 없음 - Updated dependencies [e442fed] - @orioncactuscorp/icons@1.12.2 ### Migration Notes - 없음 ## 1.12.1 ### Changes _Commit range: `@orioncactuscorp/ui@1.12.0..HEAD`_ #### Other - `7315336` Storybook Foundation 레퍼런스 개선 (#220) - `395c06e` Interaction radius 전달 방식 일원화 (#221) - `8ea0a4d` 컴포넌트 prop 명명 계약 문서화 (#223) - `268a64c` 컴포넌트 API 명명 컨벤션 공개 문서화 (#225) ### Patch Changes - 268a64c: `variant`, `appearance`, `size` prop의 역할과 명명 규칙을 설명하는 공개 API 컨벤션 문서를 추가합니다. ### Migration Notes - 없음 ## 1.12.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.11.0..HEAD`_ #### Maintenance - `561a104` chore(deps): bump actions/setup-node from 6.4.0 to 7.0.0 (#208) - `93a65e7` build(ui): exclude story helpers from declarations #### Other - `b13d6a9` npm 패키지 페이지 문서 링크 깨짐 수정 (#209) - `104c187` 명시적 light theme cascade 우선순위 수정 (#213) - `9c945d5` 네이티브 UI 테마 일치 (#214) - `45b3453` 색상·타이포그래피 Foundation 문서화 (#216) - `555f73a` Tooltip·ScrollArea z-index 계약 수정 (#217) - `f80506b` Foundation reference 스토리 시각 마감 보강 (#218) ### Minor Changes - 9c945d5: light/dark 테마 범위에 `color-scheme`을 선언해 네이티브 브라우저 UI를 테마와 일치 Migration Notes: dark 테마에서 네이티브 form control, scrollbar 등 브라우저 UI가 dark color scheme으로 렌더링됨. 기존 light 렌더링을 유지해야 하는 소비자는 package CSS import 이후 해당 범위의 `color-scheme`을 override해야 함 ### Patch Changes - 45b3453: semantic color와 typography foundation의 역할 가이드, light/dark·responsive 기본값 표, Storybook 전체 token matrix 추가 Migration Notes: 런타임 token과 컴포넌트 API 변경 없음. 기존 consumer는 변경 없이 업데이트할 수 있으며, 새 문서에서 theme·typography override 경로를 확인할 수 있음 - 104c187: OS dark mode에서 명시적 light theme가 system preference에 덮이던 문제 수정 Migration Notes: ``처럼 light theme를 명시한 소비자는 업데이트 후 OS 설정과 무관하게 의도한 light token이 적용됨 - 555f73a: Tooltip과 ScrollArea가 정의되지 않은 `--oc-z-index-floating` 변수에 의존하던 문제를 수정합니다. Migration Notes - Tooltip은 기본적으로 Modal보다 높은 `--oc-zindex-5` 레이어에 렌더링됩니다. - 특수 stacking context에서 Tooltip layer 조정이 필요하면 `--oc-tooltip-z-index`를 사용합니다. - ScrollArea scrollbar는 외부 floating layer가 아닌 ScrollArea 내부 로컬 stacking context에 유지됩니다. - b13d6a9: npm 패키지 페이지에서 깨지던 README 문서 링크 수정 - README의 `docs/` 상대 링크 15개를 버전 고정 jsDelivr 절대 URL(`https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@/docs/*.md`)로 교체. npm 패키지 페이지는 README만 렌더링하고 tarball 내부 파일 경로를 해석하지 못해, 기존 상대 링크가 `https://www.npmjs.com/package/@orioncactuscorp/docs/*.md`로 잘못 풀리며 깨져 있었음 - Documentation 섹션의 웹 열람 안내를 unpkg에서 jsDelivr로 통일 - 링크 버전은 `bun run agent:sync-version`이 릴리스마다 stamp하고 `agent:check-version`이 릴리스 게이트에서 검증 - 런타임 코드 변경 없음 ### Migration Notes - dark 테마에서 네이티브 form control, scrollbar 등 브라우저 UI가 dark color scheme으로 렌더링됩니다. 기존 light 렌더링을 유지해야 하는 소비자는 package CSS import 이후 해당 범위의 `color-scheme`을 override하세요. - ``처럼 light theme를 명시한 소비자는 업데이트 후 OS 설정과 무관하게 의도한 light token이 적용됩니다. - Tooltip은 기본적으로 Modal보다 높은 `--oc-zindex-5` 레이어에 렌더링됩니다. - 특수 stacking context에서 Tooltip layer 조정이 필요하면 `--oc-tooltip-z-index`를 사용하세요. - ScrollArea scrollbar는 외부 floating layer가 아닌 ScrollArea 내부 로컬 stacking context에 유지됩니다. - 런타임 token과 컴포넌트 API 변경 없음. 기존 consumer는 변경 없이 업데이트할 수 있으며, 새 문서에서 theme·typography override 경로를 확인할 수 있습니다. ## 1.11.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.10.0..HEAD`_ #### Other - `5ee56c3` Popup 콘텐츠 전환의 자체 애니메이션 콘텐츠 경쟁 수정 (#193) - `06a0fc5` 소비자 문서 패키지 동봉 및 README 문서 허브화 (#195) - `909c113` 토큰 인덱스 생성기 추출 로직 공용화 및 단위 테스트 추가 (#196) - `417e28b` 미테스트 컴포넌트 테스트 보강 및 onCheckedChange 계약 고정 (#197) - `54c51bf` ref 병합 로직 공유 유틸(mergeRefs)로 통합 (#198) - `eb69148` 복합 위젯 키보드 APG 동작 테스트 추가 (#199) - `1eb5ffb` focus-ring 토큰 도입 및 :focus-visible 표현 중앙집중화 (#200) - `dcc2791` Tabs 컴포넌트 추가 (#204) - `8ace1d4` foundations.css + per-component 주입 권장화 (#205) - `da890ab` Modal snap 테스트 안정화 (#206) ### Minor Changes - 1eb5ffb: 키보드 포커스 ring foundation 도입 및 :focus-visible 표현 중앙집중화 - 신규 public 토큰: `--oc-focus-ring-width`(2px), `--oc-focus-ring-offset`(2px), `--oc-color-theme-focus-ring`(기본 `--oc-color-theme-primary-normal` alias, light/dark 대응) - 신규 SCSS 믹스인 `oc-focus-ring` (`@orioncactuscorp/ui/scss/mixins/focus`) - reset 레이어가 `button`, `a[href]`, `summary`, `[tabindex]`의 `:focus-visible`에 ring을 전역 기본값으로 제공 (기존: `button:focus-visible { outline: none }`으로 전역 제거) - 모든 focusable 컴포넌트(버튼류, Cell, Menu, Accordion, Tooltip trigger, Modal 내비게이션)가 키보드 포커스 시 ring 표시. Interaction tint(면 피드백)는 보조로 유지 - 선택 컨트롤(Checkbox/Radio/Switch/CheckMark)의 하드코딩 outline을 토큰 경유로 교체 (시각 결과 동일) - Field 계열(TextInput/TextArea/Select)은 기존 `:focus-within` border 강조 유지, Modal surface/Menu popup 같은 프로그램 포커스 표면은 ring 미적용 - ring은 `outline` 기반이라 요소 border-radius를 자동 추종하고 forced-colors(고대비) 모드에서도 유지됨 Migration Notes - 기존 reset의 outline 제거에 의존하던 소비자 UI는 키보드 포커스 시 ring이 새로 표시됩니다 (포인터 인터랙션은 변화 없음). 특정 요소에서 원치 않으면 해당 요소에 `outline: none`을 선언하세요 — 전역 규칙은 `:where()`(specificity 0)라 어떤 로컬 선언이든 우선합니다. - ring 색/두께는 `--oc-color-theme-focus-ring`, `--oc-focus-ring-width`, `--oc-focus-ring-offset` override로 리테마할 수 있습니다. - `all: unset`을 사용하는 focusable 요소는 전역 ring도 함께 제거되므로 `@include oc-focus-ring`으로 재적용이 필요합니다. - dcc2791: Tabs 컴포넌트 추가 - `TabsRoot`, `TabsList`, `TabsTab`, `TabsPanel` compound API 추가 - controlled/uncontrolled 선택, 자동·수동 키보드 활성화, RTL, disabled, keep-mounted panel 지원 - size, full-width, logical padding, trailing slot, indicator, overflow edge fade 커스터마이즈 계약 추가 - tab 상하 padding을 large/medium은 `--oc-space-item-padding-mini`, small은 `--oc-space-item-padding-tiny`에 매핑 - tab inline padding을 Interaction의 외부 확장으로 전환하고 확장값 2배의 gap 적용 - 외부 Interaction을 pointer hit area로 사용하고 `padding=true`에서 viewport 좌우 여백 적용 - Interaction 배경을 transparent로 유지해 label 색 기반 상태 피드백 제공 - indicator에 max radius 기본값과 `--oc-tabs-indicator-radius` 재정의 계약 추가 - `TabsList` typography를 large `headline2`, medium `body1`, small `body2` bold로 매핑하고 각 tab item의 상속·소비자 CSS 재정의 지원 - overflow edge mask가 부드럽게 나타나고 사라지는 transition 추가 - 선택 tab을 edge mask 안쪽으로 스크롤하고 reduced motion에서는 smooth scroll 제거 - tab 관계와 키보드 탐색에 필요한 ARIA, role, panel id/hidden 속성 보호 Migration Notes - 없음 ### Patch Changes - 06a0fc5: 소비자 문서를 npm 패키지에 동봉하고 README를 문서 허브로 재구성 - `docs/`를 패키지 `files`에 추가: selector contract 공개본, SCSS helpers 가이드(`oc-border` 전체 시그니처, `oc-alpha`, `typo`, `respond-to`, `fluidClamp`), semantic motion/spring 가이드, responsive foundation profile, `--oc-*` token reference(자동 생성), stability policy, editor setup - README에 Documentation 색인, Customization(`data-oc-*`) 섹션, 브라우저 지원 기준(`color-mix()` 기준선), Exports 설명 표(`foundations/*.css`, `utils/breakpoints`, `scss/index.scss` 문서화) 추가 - 런타임 코드 변경 없음 Migration Notes - 없음 - 8ace1d4: CSS 소비 경로 정리 — `foundations.css` + per-component 자동 주입을 기본 경로로 문서화 - 권장 경로를 `foundations.css`(토큰 + reset) 1회 import + 컴포넌트 자동 주입으로 재정의. 사용한 컴포넌트 CSS만 로드되어 styles.css 전량 import 대비 번들 절감(examples/nextjs 실측 −57%) - `styles.css`는 "CSS Modules 번들러가 없는 환경"용 단일 파일 대안으로 강등 문서화. `styles.css`에는 파운데이션이 내장되어 있어 `foundations.css`와 병행 import하면 이중 로드됨을 명시 - per-component 주입 무결성을 지키는 빌드 후 검사(`check:css-injection`) 추가: 모든 컴포넌트 chunk가 자기 CSS를 주입하고 고아 CSS가 없음을 보장 Migration Notes - 기존 `styles.css` import 경로는 계속 동작합니다. breaking change 아님 - 컴포넌트 자동 주입은 CSS Modules를 처리하는 번들러(Next.js, Vite 등)를 전제로 합니다. 해당 환경이 아니면 `styles.css`를 사용하세요 - 주입되는 컴포넌트 CSS는 cascade layer 밖(unlayered)입니다. `[data-oc-*]` selector로 개별 property를 override할 때는 selector contract대로 consumer CSS가 컴포넌트 CSS보다 나중에 로드되도록 유지하세요(`--oc-*` 변수 override는 로드 순서와 무관하게 동작) - 54c51bf: ref 병합 로직을 공유 유틸(mergeRefs)로 통합하고 React 19 callback-ref cleanup 지원 - 10개 파일에 중복되던 인라인 ref 병합 로직을 내부 `mergeRefs` 유틸로 통합 (public export 아님) - ref를 받는 컴포넌트(TextInput, TextArea, Select, Checkbox, Cell, Accordion, ActionAreaLayout, ScrollArea, Modal 하위 slot, MotionExpand)에 소비자가 cleanup을 반환하는 callback ref를 전달하면 이제 React 19 시맨틱대로 detach 시 cleanup이 호출됨 (기존: cleanup이 무시되고 null로 재호출) - cleanup을 반환하지 않는 callback ref와 object ref의 동작은 기존과 동일 Migration Notes - 없음 - 5ee56c3: Popup(`resize='content'`)에서 NavigationSection을 접거나 펼칠 때 surface 높이가 조금만 움직이다가 전환이 끝나는 순간 실제 높이로 낙하하던 문제를 수정합니다. 콘텐츠 블록 전환 훅이 불연속 스왑을 전제로 첫 프레임의 비행 중인 중간 높이를 목표로 고정하고 이후 변화를 잠갔던 것이 원인입니다. 이제 ResizeObserver 전달 시점과 다음 프레임 사이에 크기가 계속 움직이는 자체 애니메이션 콘텐츠(예: NavigationSection의 expand motion)를 감지하면 개입하지 않고 자연 추종하며, 한 번에 바뀌는 불연속 콘텐츠 교체는 기존대로 부드럽게 전환합니다. Migration Notes - 없음 ### Migration Notes - 기존 reset의 outline 제거에 의존하던 소비자 UI는 키보드 포커스 시 ring이 새로 표시됩니다 (포인터 인터랙션은 변화 없음). 특정 요소에서 원치 않으면 해당 요소에 `outline: none`을 선언하세요 — 전역 규칙은 `:where()`(specificity 0)라 어떤 로컬 선언이든 우선합니다. - ring 색/두께는 `--oc-color-theme-focus-ring`, `--oc-focus-ring-width`, `--oc-focus-ring-offset` override로 리테마할 수 있습니다. - `all: unset`을 사용하는 focusable 요소는 전역 ring도 함께 제거되므로 `@include oc-focus-ring`으로 재적용이 필요합니다. - 기존 `styles.css` import 경로는 계속 동작합니다. breaking change 아님 - 컴포넌트 자동 주입은 CSS Modules를 처리하는 번들러(Next.js, Vite 등)를 전제로 합니다. 해당 환경이 아니면 `styles.css`를 사용하세요 - 주입되는 컴포넌트 CSS는 cascade layer 밖(unlayered)입니다. `[data-oc-*]` selector로 개별 property를 override할 때는 selector contract대로 consumer CSS가 컴포넌트 CSS보다 나중에 로드되도록 유지하세요(`--oc-*` 변수 override는 로드 순서와 무관하게 동작) ## 1.10.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.9.2..HEAD`_ #### Breaking Changes - `80bb9d0` Bottom sheet backdrop을 snap 임계 기반 modality로 재정의 (#191) #### Other - `a63b87e` 콘텐츠 높이 전환 중 footer 위치·scroll 배경 안정화 (#190) ### Minor Changes - 80bb9d0: Bottom sheet의 backdrop을 modality 신호로 재정의합니다. iOS `largestUndimmedDetentIdentifier` 모델을 따라, 안착 snap 기준 이진(dim 0 또는 1) 상태와 경계 구간 보간으로 동작합니다. - `ModalContent`에 `backdropFrom?: ModalSnapPoint` prop을 추가합니다. 지정한 snap 미만의 detent에 안착하면 backdrop이 없고 non-modal(배경 상호작용 가능, 포커스 트랩 해제, backdrop pointer 통과)이며, 해당 snap 이상 detent에 안착하면 완전한 dim과 modal 상태가 됩니다. backdrop opacity는 가장 큰 undimmed snap과 `backdropFrom` snap 사이를 이동하는 동안에만 보간됩니다. 값은 `snapPoints` 멤버여야 하며 아니면 개발 모드 경고와 함께 무시됩니다. - dim 상태에서 backdrop을 탭하면 dismiss가 불가하거나 peek로 접히던 시트는 가장 큰 undimmed snap으로 collapse합니다. dismiss 가능한 비peekable 시트는 기존대로 dismiss합니다. - non-modal 안착 상태의 backdrop 레이어는 `data-oc-modal-backdrop-passthrough="true"`를 노출합니다. - elevation shadow는 dimmer의 보완 관계(`shadow = 1 − dim`)를 모든 상태에서 유지합니다. dim이 있는 안착에서는 shadow가 없고, undimmed 안착(non-modal)에서는 shadow가 시트를 배경과 분리하며, 경계 구간 이동 중에는 둘이 크로스페이드됩니다. - `snapPoints`가 있고 `backdropFrom`이 없는 경우의 기본 동작이 변경됩니다: 기존에는 backdrop opacity가 시트 가시 높이에 비례했지만, 이제 모든 snap detent에서 1로 유지되고 최저 snap 아래 진입/이탈/peek 구간에서만 페이드됩니다. Migration Notes - `snapPoints`를 사용하는 bottom sheet의 중간 snap에서 backdrop이 부분 투명(가시 높이 비례)이던 동작이 제거되고 모든 snap에서 완전한 dim(1)이 됩니다. 이전처럼 낮은 snap에서 배경을 덜 가리려면 `backdropFrom`으로 dim이 시작될 snap을 지정하세요. 예: `snapPoints={[0.36, 0.72, 0.92]} backdropFrom={0.92}`. - `backdropFrom` 미만 snap에 안착한 시트는 non-modal로 전환되어 포커스 트랩이 해제되고 배경이 상호작용 가능해집니다. 배경 클릭이 시트를 닫지 않으므로(outside-press 무시), 이 상태에서 닫기가 필요하면 명시적 닫기 UI를 제공하세요. ### Patch Changes - a63b87e: Bottom sheet 콘텐츠 높이 전환(depth/탭 이동) 중 footer(ActionArea)가 한 프레임에 아래로 튕겼다가 스프링으로 복귀하거나(확장), 내려갔다가 커밋 시점에 위로 스냅되던(축소) 문제를 수정합니다. 단일 축 canvas 전환은 시트 상단 연속성만 보장하고 surface 물리 하단은 live translate를 따라 움직이는데, footer가 물리 하단에 고정되어 있어 전환 내내 함께 흔들렸습니다. 이제 canvas settle 동안 `data-oc-modal-sheet-resizing` 상태로 footer를 시트의 보이는 하단(커밋 후 안착 지점)에 앵커해 매 스프링 프레임 제자리에 유지합니다. Migration Notes - 없음 - a63b87e: Bottom sheet 콘텐츠 높이 전환(depth/탭 이동) 중 footer(ActionArea)의 scroll 배경 gradient가 잠깐 나타났다가 사라지던 깜빡임을 수정합니다. 전환 동안 scrollport가 프레임 단위로 이전 크기에서 목표 크기로 움직이는 사이, 이미 최종 크기로 스왑된 콘텐츠와 비교되어 "일시적으로 스크롤 가능" 상태가 잘못 보고되던 문제입니다. 이제 canvas settle 동안 스크롤 상태를 목적지 scrollport 높이와 콘텐츠 실측 높이 기준으로 평가해 최종 상태와 일치시키고, settle 중의 과도 상태 보정은 opacity 전환 없이 스냅되어 화면에 드러나지 않습니다. 실제로 스크롤이 필요한 목적지에서는 gradient가 기존 scale 전환으로 부드럽게 등장합니다. Migration Notes - 없음 ### Migration Notes - `snapPoints`를 사용하는 bottom sheet의 중간 snap에서 backdrop이 부분 투명(가시 높이 비례)이던 동작이 제거되고 모든 snap에서 완전한 dim(1)이 됩니다. 이전처럼 낮은 snap에서 배경을 덜 가리려면 `backdropFrom`으로 dim이 시작될 snap을 지정하세요. 예: `snapPoints={[0.36, 0.72, 0.92]} backdropFrom={0.92}`. - `backdropFrom` 미만 snap에 안착한 시트는 non-modal로 전환되어 포커스 트랩이 해제되고 배경이 상호작용 가능해집니다. 배경 클릭이 시트를 닫지 않으므로(outside-press 무시), 이 상태에서 닫기가 필요하면 명시적 닫기 UI를 제공하세요. ## 1.9.2 ### Changes _Commit range: `@orioncactuscorp/ui@1.9.1..HEAD`_ #### Other - `4acf4e8` Modal size padding 변수 추가 (#188) ### Patch Changes - 4acf4e8: Modal size별 width와 padding CSS 변수를 추가하고, header/body/footer padding이 container padding contract를 기본으로 공유하도록 개선합니다. Migration Notes - 없음 ### Migration Notes - 없음 ## 1.9.1 ### Changes _Commit range: `@orioncactuscorp/ui@1.9.0..HEAD`_ #### Fixes - `7481fe6` fix(modal): arbitrate mouse body drags against text selection (#185) - `5254c1e` fix(modal): sync settle scrollport to the sheet frame by frame (#186) #### Other - `0018769` Bottom sheet 콘텐츠 전환 단일 축 재구성 (#184) ### Patch Changes - 7481fe6: Bottom sheet 본문을 마우스로 드래그할 때 텍스트 선택과 시트 조작을 중재합니다. 기존에는 본문 마우스 드래그가 시트를 움직이지 않고 브라우저 텍스트 선택으로 흘러, 위로 끌면 선택 오토스크롤이 본문 스크롤 위치를 맨 위로 되감는 문제가 있었습니다. 이제 제스처가 명확히 수직(12px 이상, 수직 우세)이면 시트 드래그로 승격하고, 수평 우세면 텍스트 선택에 양보합니다. 드래그 시작 시점에 이미 활성 선택이 있으면 기존처럼 선택 조작을 보호합니다. Migration Notes - 없음 - 5254c1e: Bottom sheet를 드래그 후 릴리즈해 위 snap으로 안착할 때 본문 스크롤이 한 프레임에 확 당겨지던 문제를 수정합니다. 릴리즈 settle이 visible scrollport를 목표 크기로 즉시 고정해 시트가 시각적으로 도착하기 전에 브라우저 스크롤 클램프가 발생했습니다. 이제 릴리즈/스냅 settle은 드래그와 동일하게 scrollport를 스프링 프레임마다 시트에 동기하고, entrance settle만 기존처럼 목표를 미리 고정해 footer 스크롤 상태 깜빡임을 방지합니다. Migration Notes - 없음 - 0018769: Bottom sheet의 콘텐츠 높이 전환을 단일 축으로 재구성합니다. 기존에는 height transition(메인 스레드)과 transform transition(컴포지터)을 함께 애니메이션해 메인 스레드 부하 시 두 클럭이 어긋나며 시트가 흔들렸습니다. 이제 전환 동안 surface를 두 크기를 모두 덮는 canvas 높이에 고정하고 translate 하나만 스프링으로 움직인 뒤, 도착 프레임에서 실제 높이로 교체(화면 밖 영역이라 시각적 no-op)합니다. inline height 소유권을 drag hook으로 단일화해 React 렌더 커밋이 보상 프레임보다 먼저 높이를 페인트하던 문제도 함께 제거했습니다. Migration Notes - 없음 ### Migration Notes - 없음 ## 1.9.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.8.0..HEAD`_ #### Other - `d3edc13` Border와 버튼 sizing contract 확장 (#154) - `600c887` 릴리스 문서화와 버전 일관성 CI 게이트 추가 (#156) - `0e3af18` Modal BottomSheet 안착 스크롤포트 안정화 (#157) - `eed2a62` PR CI 경량화(webkit 스코프 축소·문서 변경 스킵) (#158) ### Minor Changes - 0e3af18: `ModalContent`에 콘텐츠 교체 시 surface 높이 변화를 전환하는 `contentTransition` contract를 추가합니다. 기본값 `auto`는 content-resize popup/bottom sheet에서 depth navigation처럼 본문이 바뀌는 경우 높이 변화를 부드럽게 처리하고, snap이 있는 bottom sheet는 snap geometry가 높이 전환을 계속 소유합니다. Bottom sheet는 콘텐츠 높이 변경이나 viewport resize 이후에도 마지막 rest state를 의미 단위(default snap, 특정 snap, expanded, custom)로 보존하도록 개선합니다. 짧은 탭에서 긴 탭으로 바로 이동해도 사용자가 확장하지 않았다면 1차 snap에 머무릅니다. Migration Notes - `ModalContent`의 `contentTransition` 기본값은 `auto`입니다. 콘텐츠 교체 시 높이 전환이 필요 없거나 자체 animation을 사용하는 경우 `contentTransition="none"`을 지정하세요. - 0e3af18: `ModalContent`에 `snapPoints`를 줄 때 `resize='content'`(기본)이면 시트가 콘텐츠 높이에 맞춰 hug하면서 snap 지점을 detent로 사용하도록 개선합니다. 콘텐츠가 가장 작은 snap보다 짧으면 그 높이로 hug하고, 길면 `defaultSnapPoint`에서 열린 뒤 handle을 끌어 상위 snap으로 확장하며 본문을 스크롤합니다. 시트를 항상 가장 큰 snap 높이로 고정하려면 `resize='fixed'`를 사용합니다. Migration Notes - `snapPoints` + `resize='content'`(기본)에서 시트 높이가 "항상 최대 snap 고정"에서 content-hug로 바뀝니다. 기존처럼 최대 snap 높이로 고정하려면 `resize='fixed'`로 전환하세요. ### Patch Changes - 0e3af18: Modal bottom sheet의 content height transition을 sheet geometry 레이어에서 처리하도록 개선합니다. Migration Notes: - 없음 - 0e3af18: BottomSheet가 확장 상태에서 peeked 상태로 안착하는 동안 visible scrollport가 먼저 줄어들지 않도록 수정합니다. Migration Notes: - `Modal` BottomSheet의 settle transition 중 body scrollport는 도착 전까지 현재 보이는 영역을 유지합니다. - 추가 마이그레이션은 필요하지 않습니다. - 0e3af18: Bottom sheet의 1차 snap 상태에서 Modal body scrollport를 실제로 보이는 sheet 높이에 맞추고, viewport 높이 변경 시 snap metric과 expanded 상태를 안정적으로 보존하도록 개선합니다. ScrollArea가 애니메이션 중인 scrollport와 track geometry를 안정적으로 재측정해, 콘텐츠 전환 직후에도 scrollbar thumb 크기를 실제 viewport에 맞게 갱신합니다. - 0e3af18: `ModalHeader`에 tab/버튼처럼 한 줄보다 큰 커스텀 콘텐츠를 넣어 헤더가 기본 한 줄(`2rem` row) 높이보다 커질 때, body가 정적 예약 높이(`2rem + padding`)만 확보해 콘텐츠 상단이 헤더에 가려지던 문제를 수정합니다. 측정된 실제 헤더 높이(`--oc-modal-header-height`)를 surface에 반영해 body 예약 공간이 헤더 높이를 따라가도록 합니다. Migration Notes - 없음 - 0e3af18: `ModalContent`의 `backdrop="hidden"` 상태에서 dimmer/backdrop 레이어를 최종 제거하고, visible/compact에서 hidden으로 바뀔 때는 opacity exit transition을 유지하도록 수정합니다. Migration Notes: - `data-oc-modal-backdrop="hidden"` 상태는 `modal-content`에 유지되며, settled hidden 상태에서는 `data-oc-component="modal-backdrop"` 요소가 렌더링되지 않습니다. - visible/compact에서 hidden으로 전환되는 동안에는 `data-oc-component="modal-backdrop"` 요소가 opacity transition 종료 시점까지 임시 유지될 수 있습니다. - hidden backdrop 상태의 모달 그림자는 backdrop opacity와 연동해 fade되지 않고 surface elevation으로 유지됩니다. - hidden backdrop 요소에 의존한 스타일, 레이아웃, hit test 커스터마이징은 `modal-content` 또는 `surface` 레이어 기준으로 이전해야 합니다. - 0e3af18: BottomSheet를 초기 `peeked` 상태(`presentationState="peeked"` 또는 `defaultPresentationState="peeked"`)로 열 때, mount 시점에 Base UI가 popup ref를 붙이기 전에 entrance settle이 실행되어 시트가 접히지 않고 visible 위치에 그대로 남던 문제를 수정합니다. surface 노드가 마운트되면 entrance settle이 다시 실행되어 navigation만 걸친 docked panel이 정상적으로 표시됩니다. Migration Notes - 없음 - 0e3af18: Bottom Modal의 content-hug snap 높이 변경 시 sheet height와 translate 기준을 동기화해 탭 전환 중 튀거나 접히는 전환을 방지하고, height transition을 추가합니다. 부분 snap 상태에서는 터치 본문 제스처가 내부 스크롤보다 sheet 확장을 먼저 처리하도록 조정하고, `ScrollArea` thumb가 viewport 크기 변화에 맞춰 다시 계산되도록 개선합니다. Migration Notes - 없음 - d3edc13: `oc-border` mixin이 `1px solid top outer var(--stroke)` 같은 CSS-like shorthand를 지원하도록 확장하고, Button/TextButton/Accordion/Modal의 아이콘 sizing을 `oc-icon-box` mixin으로 통일합니다. Migration Notes - `oc-border`의 기존 호출 방식은 유지됩니다. - 아이콘 sizing이 `oc-icon-box` mixin으로 통일됩니다. `block-size`만 line box(`1lh`) 기준으로 잡고 `inline-size: auto`로 두어 SVG viewBox 비율을 보존합니다. 정사각으로 강제되던 비정사각 아이콘은 이제 원본 비율로 렌더링됩니다. - `--oc-*-icon-size` 직접 override는 유지되며, 의미가 "정사각 박스 크기"에서 "아이콘 높이(너비는 viewBox 비율로 결정)"로 바뀝니다. `--oc-*-icon-padding-block`으로 line box에서 뺄 여백을 조정할 수 있습니다. - Accordion/Modal disclosure indicator의 `*-size-reduction` contract는 `*-padding-block`으로 대체됩니다. - Button/TextButton/Accordion/Modal의 기본 아이콘 렌더링 크기는 유지됩니다(모던 브라우저 기준 ±1px 이내). - `1lh` 미지원(pre-2023) 브라우저 fallback은 `--oc-*-icon-padding-block` 기반 `1.5em - padding-block*2`로 자동 근사되며, 모던 브라우저 결과에는 영향이 없습니다. - 0e3af18: `ScrollArea` scrollbar 위치를 조정할 수 있는 inset CSS 변수 contract를 추가합니다. `Modal` bottom sheet는 이 contract를 사용해 부분 snap 상태의 visible 영역에 맞춰 scrollbar track 높이를 조정합니다. Migration Notes - 없음 ### Migration Notes - `ModalContent`의 `contentTransition` 기본값은 `auto`입니다. 콘텐츠 교체 시 높이 전환이 필요 없거나 자체 animation을 사용하는 경우 `contentTransition="none"`을 지정하세요. - `snapPoints` + `resize='content'`(기본)에서 시트 높이가 "항상 최대 snap 고정"에서 content-hug로 바뀝니다. 기존처럼 최대 snap 높이로 고정하려면 `resize='fixed'`로 전환하세요. - `data-oc-modal-backdrop="hidden"` 상태는 `modal-content`에 유지되며, settled hidden 상태에서는 `data-oc-component="modal-backdrop"` 요소가 렌더링되지 않습니다. hidden backdrop 요소에 의존한 스타일, 레이아웃, hit test 커스터마이징은 `modal-content` 또는 `surface` 레이어 기준으로 이전해야 합니다. - 아이콘 sizing이 `oc-icon-box` mixin으로 통일됩니다. `--oc-*-icon-size` 직접 override는 유지되지만 의미가 "정사각 박스 크기"에서 "아이콘 높이(너비는 viewBox 비율로 결정)"로 바뀝니다. - Accordion/Modal disclosure indicator의 `*-size-reduction` contract는 `*-padding-block`으로 대체됩니다. ## 1.8.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.7.0..HEAD`_ #### Other - `f5e9a43` 디스클로저 인디케이터 정렬 개선 (#151) - `0f2414f` Modal 고정 높이와 fill layout 추가 (#152) ### Minor Changes - 0f2414f: Modal의 `resize` 값을 `content | fixed`로 정리하고, `resize="fixed"`에서 `--oc-modal-fixed-block-size`, `--oc-modal-fixed-max-block-size`, `--oc-modal-popup-fixed-max-block-size` CSS 변수로 surface 높이와 popup 상한을 조정할 수 있도록 개선합니다. `ModalBody`에는 `layout="fill"`을 추가해 header/footer reserve를 유지하면서 iframe, 지도, 에디터 같은 임베드 콘텐츠가 남은 body 영역을 채울 수 있도록 지원합니다. Migration Notes - `ModalContent resize="hug"`를 `resize="content"`로 변경 - 고정 높이 Modal은 `resize="fixed"`와 `--oc-modal-fixed-block-size` CSS 변수 사용 - iframe, 지도, 에디터처럼 body 남은 영역을 채워야 하는 콘텐츠는 `ModalBody layout="fill"` 사용 ### Patch Changes - f5e9a43: Accordion과 Modal navigation의 disclosure indicator를 `1lh` frame 안에서 중앙 정렬하도록 개선하고, `--oc-accordion-disclosure-indicator-size`, `--oc-accordion-disclosure-indicator-size-reduction`, `--oc-modal-navigation-indicator-size`, `--oc-modal-navigation-indicator-size-reduction` CSS 변수로 소비자 커스터마이징을 지원합니다. Accordion의 기본 indicator size reduction은 `0.25em`으로 조정합니다. Migration Notes - 없음 ### Migration Notes - `ModalContent resize="hug"`를 `resize="content"`로 변경 - 고정 높이 Modal은 `resize="fixed"`와 `--oc-modal-fixed-block-size` CSS 변수 사용 - iframe, 지도, 에디터처럼 body 남은 영역을 채워야 하는 콘텐츠는 `ModalBody layout="fill"` 사용 ## 1.7.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.6.0..HEAD`_ #### Maintenance - `3be611c` chore(deps): bump changesets action - `7c01a10` chore(deps): bump checkout action - `0bf573e` chore(deps): bump actions/checkout from 6.0.3 to 7.0.0 (#141) #### Other - `dd8ac62` Cell·Accordion 구분선 피드백 개선 (#140) - `310a737` Menu z-index와 placement API 정리 (#142) - `479eeac` 비활성 버튼 인터랙션 피드백 정리 (#143) - `8fd7fa2` cssvar 자동완성 설정 문서 보완 (#144) - `dbe4c71` Skeleton 컴포넌트 추가 (#145) - `928e01e` cssvar 자동완성 설정 보완 (#146) - `fcd4576` ambient와 continuous 모션 계약 분리 (#147) - `299376a` 모달 내비게이션 스냅 및 스크롤 안정화 (#148) - `bf54089` 논리 방향 contract 정리 (#149) ### Minor Changes - dbe4c71: Skeleton 컴포넌트를 추가합니다. Migration Notes - 신규 `Skeleton` export를 사용할 수 있습니다. - `data-oc-component="skeleton"` 및 `data-oc-part="fill"` selector contract가 추가됩니다. - bf54089: 방향성 spacing 및 alignment contract를 logical direction 기준으로 정리합니다. Migration Notes - `ActionArea` CSS 변수명이 logical direction으로 변경됩니다. - `--oc-action-area-padding-x` -> `--oc-action-area-padding-inline` - `--oc-action-area-padding-y` -> `--oc-action-area-padding-block` - `--oc-action-area-padding-top` -> `--oc-action-area-padding-block-start` - `--oc-action-area-padding-bottom` -> `--oc-action-area-padding-block-end` - `ActionAreaLayout` CSS 변수명이 logical direction으로 변경됩니다. - `--oc-action-area-layout-action-area-padding-y` -> `--oc-action-area-layout-action-area-padding-block` - `--oc-action-area-layout-body-padding-bottom` -> `--oc-action-area-layout-body-padding-block-end` - `Modal` CSS 변수명이 logical direction으로 변경됩니다. - `--oc-modal-bottom-top-clearance` -> `--oc-modal-sheet-block-start-clearance` - `--oc-modal-padding-x` -> `--oc-modal-padding-inline` - `--oc-modal-padding-y` -> `--oc-modal-padding-block` - `--oc-modal-header-padding-x` -> `--oc-modal-header-padding-inline` - `--oc-modal-header-padding-y` -> `--oc-modal-header-padding-block` - `--oc-modal-container-padding-x` -> `--oc-modal-container-padding-inline` - `--oc-modal-container-padding-y` -> `--oc-modal-container-padding-block` - `--oc-modal-container-padding-top` -> `--oc-modal-container-padding-block-start` - `--oc-modal-container-padding-bottom` -> `--oc-modal-container-padding-block-end` - `--oc-modal-footer-padding-x` -> `--oc-modal-footer-padding-inline` - `--oc-modal-footer-padding-y` -> `--oc-modal-footer-padding-block` - safe-area section padding CSS 변수명이 logical direction으로 변경됩니다. - `--oc-space-section-padding-viewport-x-safe-left` -> `--oc-space-section-padding-viewport-inline-safe-start` - `--oc-space-section-padding-viewport-x-safe-right` -> `--oc-space-section-padding-viewport-inline-safe-end` - `--oc-space-section-padding-viewport-y-safe-top` -> `--oc-space-section-padding-viewport-block-safe-start` - `--oc-space-section-padding-viewport-y-safe-bottom` -> `--oc-space-section-padding-viewport-block-safe-end` - `Skeleton`의 `align` prop 값이 `left`/`right`에서 `start`/`end`로 변경됩니다. `center`는 유지됩니다. - 299376a: ModalNavigationSection 컴포넌트를 추가합니다. Migration Notes - 신규 `ModalNavigationSection` export와 `Modal.NavigationSection` compound를 사용할 수 있습니다. - `data-oc-component="modal-navigation-section"`, `modal-navigation`, `modal-navigation-panel` selector contract가 추가됩니다. - collapsed 상태에서 panel은 `aria-hidden` 및 `inert`로 비활성화됩니다. - snapped popup은 `drag="handle"`에서도 handle 기반 9방향 snap을 사용할 수 있습니다. - snapped popup drag dismiss는 현재 snap 위치의 top, bottom, center-row 기준을 따릅니다. ### Patch Changes - fcd4576: ambient motion timing을 ease-in-out로 조정하고 continuous motion intent를 추가합니다. Migration Notes - `--oc-motion-timing-ambient` 기본값이 `ease-in-out`로 변경됩니다. - spinner 회전, progress sweep, marquee처럼 일정 속도 반복이 필요한 motion은 신규 `continuous` intent와 `--oc-motion-duration-continuous`, `--oc-motion-timing-continuous` token을 사용합니다. - dd8ac62: Cell과 Accordion divider border-color feedback transition을 공통 surface contract로 정리하고, touch active 상태에서도 divider hide feedback이 적용되도록 수정합니다. Migration Notes - 없음 - dd8ac62: Cell과 Accordion divider border-color feedback duration을 짧게 조정합니다. Migration Notes - 없음 - 928e01e: VS Code CSS variable 자동완성 설정에서 generated token index 단일 사용, node_modules 기본 ignore 해제, `phoenisx.cssvar` trigger 사용법, completion popup 표시 설정 안내를 추가합니다. Migration Notes - `phoenisx.cssvar` 확장을 사용하는 consumer는 `.vscode/settings.json`의 `cssvar.files`에 `./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css`를 추가할 때, `cssvar.ignore`에서 `**/node_modules/**` 제외를 제거해야 설치된 oc-ui token index를 읽을 수 있습니다. - `@orioncactuscorp/ui/scss/foundations/*` source file은 `color.theme.light.scss`와 `color.theme.dark.scss`처럼 같은 semantic token 이름을 theme별 값으로 다시 선언하므로, 자동완성 설정에는 generated token index만 추가해야 합니다. - oc-ui source repository에서는 compiled `styles.css`, `foundations.css`, per-foundation CSS, raw foundation source를 `cssvar.ignore`에 두어 generated token index와 중복 스캔되지 않게 합니다. - `phoenisx.cssvar` completion은 빈 CSS value 위치가 아니라 `padding: --` 또는 `padding: var(--`처럼 `--` token을 입력했을 때 표시됩니다. - VS Code Insiders 또는 Copilot inline suggestion 환경에서 completion popup 대신 회색 inline suggestion만 보이면 `editor.quickSuggestions`, `editor.suggestOnTriggerCharacters`, `editor.inlineSuggest.suppressSuggestions`를 함께 설정해야 합니다. - 8fd7fa2: VS Code CSS variable 자동완성 설정 문서를 보완합니다. Migration Notes - `phoenisx.cssvar` 확장을 사용하는 consumer는 `.vscode/settings.json`의 `cssvar.files`에 `./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css`를 추가하면 설치된 oc-ui 버전의 foundation `--oc-*` token 자동완성을 사용할 수 있습니다. - 479eeac: IconButton, BackgroundIconButton, TextButton, Badge의 disabled 상태에서 active/focus/hover feedback이 노출되지 않도록 수정하고 disabled 전환을 feedback motion으로 맞춥니다. Migration Notes - 없음 - 310a737: Menu z-index 기본값을 foundation z-index 토큰으로 정리하고 `placement` 기반 12방향 배치 API를 추가합니다. Migration Notes - Menu가 더 이상 정의되지 않은 `--oc-z-index-floating` 변수나 숫자 fallback에 의존하지 않습니다. - 특수 stacking context에서 Menu layer 조정이 필요하면 `--oc-menu-z-index`를 사용합니다. - `MenuContent`의 `placement` prop으로 `topLeft`, `rightTop`, `bottomRight` 등 12방향 선호 배치를 지정할 수 있습니다. - 299376a: Fixed ModalNavigationSection이 접힐 때 popup surface 높이가 콘텐츠 자연 높이로 커지지 않도록 보정하고, fixed 및 max-height에 닿은 hug 상태에서 panel content가 정상 스크롤되도록 개선합니다. 또한 기본 disclosure indicator를 Accordion과 공통화하고 Safari에서 custom-size SVG가 0 크기로 렌더링되지 않도록 보정합니다. top/bottom popup snap 상태에서는 surface 높이가 바뀌어도 해당 edge를 기준으로 유지되도록 개선합니다. ModalNavigationSection panel scroll 영역은 ModalBody와 동일하게 ScrollArea를 사용하도록 정렬합니다. Migration Notes - 없음 - 299376a: ModalNavigationSection이 있는 snapped popup의 navigation row drag와 top/bottom collapse anchoring을 보정합니다. Migration Notes - 없음 ### Migration Notes - `ActionArea`, `ActionAreaLayout`, `Modal`, safe-area section padding CSS 변수명이 logical direction 기준으로 변경됩니다. - `Skeleton`의 `align` prop 값이 `left`/`right`에서 `start`/`end`로 변경됩니다. `center`는 유지됩니다. - 신규 `Skeleton`, `ModalNavigationSection`, `Modal.NavigationSection` export를 사용할 수 있습니다. - `Skeleton`, `ModalNavigationSection` 관련 `data-oc-*` selector contract가 추가됩니다. - `--oc-motion-timing-ambient` 기본값이 `ease-in-out`로 변경되며, 일정 속도 반복 motion에는 신규 `continuous` intent와 관련 token을 사용합니다. - Menu가 정의되지 않은 `--oc-z-index-floating` 변수나 숫자 fallback에 의존하지 않습니다. 특수 stacking context 조정은 `--oc-menu-z-index`를 사용합니다. - `MenuContent`의 `placement` prop으로 12방향 선호 배치를 지정할 수 있습니다. - VS Code `phoenisx.cssvar` 자동완성 설정에서 generated token index를 사용하고, `cssvar.ignore`의 `**/node_modules/**` 제외를 제거해야 설치된 oc-ui token index를 읽을 수 있습니다. ## 1.6.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.5.1..HEAD`_ #### Breaking Changes - `7d6e60f` ActionArea footer gradient 개선 (#135) #### Other - `c26137e` Radio 아이콘 패딩 조정 (#136) ### Minor Changes - 7d6e60f: Modal CSS 변수 naming을 padding contract로 정리합니다. Migration Notes - Modal CSS 변수 `--oc-modal-space-x`, `--oc-modal-space-y`를 `--oc-modal-padding-x`, `--oc-modal-padding-y`로 변경 - Modal CSS 변수 `--oc-modal-header-space-x`, `--oc-modal-header-space-y`를 `--oc-modal-header-padding-x`, `--oc-modal-header-padding-y`로 변경 - Modal CSS 변수 `--oc-modal-container-space-x`, `--oc-modal-container-space-y`, `--oc-modal-container-space-top`, `--oc-modal-container-space-bottom`을 `--oc-modal-container-padding-x`, `--oc-modal-container-padding-y`, `--oc-modal-container-padding-top`, `--oc-modal-container-padding-bottom`으로 변경 - Modal CSS 변수 `--oc-modal-footer-space-x`, `--oc-modal-footer-space-y`를 `--oc-modal-footer-padding-x`, `--oc-modal-footer-padding-y`로 변경 ### Patch Changes - 7d6e60f: ActionArea footer gradient와 scroll body reserve를 분리합니다. Migration Notes - standalone ActionArea는 `background=true` 상태에서도 상단 padding을 유지함 - Modal footer와 ActionAreaLayout footer 안의 ActionArea는 상단 padding을 scroll body reserve로 이전함 - Modal footer와 ActionAreaLayout footer는 내부 ActionArea gradient를 중복 렌더링하지 않고 owner overlay로 background를 표시함 - footer overlay gradient는 ActionArea content 시작점까지 `padding-y * 2` 범위로 표시됨 - 7d6e60f: Modal과 ActionAreaLayout에서 ActionArea footer의 상단 여백 이동을 scrollable 상태에만 적용하도록 수정합니다. Migration Notes - 별도 마이그레이션은 필요하지 않습니다. - 짧은 본문처럼 스크롤이 필요 없는 Modal과 ActionAreaLayout에서는 ActionArea의 기본 상단 padding이 유지됩니다. - 스크롤 가능한 본문에서는 기존처럼 ActionArea 상단 padding을 body reserve로 이동해 footer gradient와 마지막 콘텐츠 간격을 유지합니다. - c26137e: Radio checked icon의 SVG padding을 조정합니다. Migration Notes - 없음 ### Migration Notes - Modal CSS 변수 `--oc-modal-space-x`, `--oc-modal-space-y`를 `--oc-modal-padding-x`, `--oc-modal-padding-y`로 변경 - Modal CSS 변수 `--oc-modal-header-space-x`, `--oc-modal-header-space-y`를 `--oc-modal-header-padding-x`, `--oc-modal-header-padding-y`로 변경 - Modal CSS 변수 `--oc-modal-container-space-x`, `--oc-modal-container-space-y`, `--oc-modal-container-space-top`, `--oc-modal-container-space-bottom`을 `--oc-modal-container-padding-x`, `--oc-modal-container-padding-y`, `--oc-modal-container-padding-top`, `--oc-modal-container-padding-bottom`으로 변경 - Modal CSS 변수 `--oc-modal-footer-space-x`, `--oc-modal-footer-space-y`를 `--oc-modal-footer-padding-x`, `--oc-modal-footer-padding-y`로 변경 - standalone ActionArea는 `background=true` 상태에서도 상단 padding을 유지함 - Modal footer와 ActionAreaLayout footer 안의 ActionArea는 상단 padding을 scroll body reserve로 이전함 - Modal footer와 ActionAreaLayout footer는 내부 ActionArea gradient를 중복 렌더링하지 않고 owner overlay로 background를 표시함 - footer overlay gradient는 ActionArea content 시작점까지 `padding-y * 2` 범위로 표시됨 ## 1.5.1 ### Changes _Commit range: `@orioncactuscorp/ui@1.5.0..HEAD`_ #### Other - `9beed64` Modal 드래그 및 Storybook 동작 개선 (#131) - `3343dcf` ActionArea 배경 패딩 안정화 (#132) ### Patch Changes - 3343dcf: ActionArea background가 활성화될 때 상단 gradient와 content 사이에 추가 padding이 끼지 않도록 조정합니다. Migration Notes - ActionAreaLayout과 Modal footer 안의 ActionArea는 background 상태와 무관하게 상단 padding을 제거해 scroll-state 임계점에서 footer 높이가 흔들리지 않도록 유지함 - standalone ActionArea는 `background=true`일 때 상단 padding을 제거함 - 9beed64: Modal footer 안의 ActionArea가 md 이상에서도 footer 폭을 기본으로 꽉 채우도록 max width override를 추가합니다. Migration Notes - 없음 - 9beed64: Modal drag 시작 시 진행 중인 snap settle animation을 현재 위치에서 interrupt해 새 포인터/터치 입력이 즉시 제어권을 갖도록 보정합니다. Migration Notes - 없음 - 9beed64: Modal의 마우스 드래그 핸들 조작 중 브라우저 native text selection과 drag가 함께 시작되지 않도록 보정합니다. Migration Notes - 없음 ### Migration Notes - ActionAreaLayout과 Modal footer 안의 ActionArea는 background 상태와 무관하게 상단 padding을 제거해 scroll-state 임계점에서 footer 높이가 흔들리지 않도록 유지함 - standalone ActionArea는 `background=true`일 때 상단 padding을 제거함 ## 1.5.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.4.1..HEAD`_ #### Other - `75a53da` CI self-hosted runner 전환 테스트 (#126) - `609c21b` Fade 모션 intent 추가 (#127) - `01bc705` Modal 반응형 스냅 전환 개선 (#128) ### Minor Changes - 609c21b: 일반 content show/hide에 사용할 수 있는 `fade` motion intent를 추가합니다. Migration Notes - 새 `fade` intent는 `@include oc-motion(opacity, fade)` 형태로 사용합니다. - `fade`는 non-spring opacity transition이며 reduced-motion에서도 짧은 opacity fade를 유지합니다. - `--oc-motion-duration-fade`, `--oc-motion-timing-fade` token이 추가됩니다. - 기존 `feedback`, `disclosure`, `surface`, `sheet`, `expand`, `move`, `gesture`, `ambient` intent의 동작은 변경되지 않습니다. ### Patch Changes - 01bc705: Modal이 bottom sheet와 snapped popup 사이를 전환할 때 bottom 전용 fill, backdrop opacity, overshoot fill inline 상태가 남지 않도록 정리합니다. hidden backdrop을 사용하는 snapped popup에서는 배경 영역 상호작용을 허용하고, bottom 전환 후 popup으로 돌아와도 마지막 snap position을 유지합니다. Migration Notes - 없음 ### Migration Notes - 새 `fade` intent는 `@include oc-motion(opacity, fade)` 형태로 사용합니다. - `fade`는 non-spring opacity transition이며 reduced-motion에서도 짧은 opacity fade를 유지합니다. - `--oc-motion-duration-fade`, `--oc-motion-timing-fade` token이 추가됩니다. - 기존 `feedback`, `disclosure`, `surface`, `sheet`, `expand`, `move`, `gesture`, `ambient` intent의 동작은 변경되지 않습니다. ## 1.4.1 ### Changes _Commit range: `@orioncactuscorp/ui@1.4.0..HEAD`_ #### Fixes - `3f67339` fix(modal): remove bottom surface opacity motion (#123) #### Other - `62bf9cc` ActionAreaLayout footer overlay 개선 (#124) ### Patch Changes - 62bf9cc: ActionAreaLayout footer gradient를 layout-owned overlay로 전환해 스크롤 끝단에서 opacity와 scaleY로 자연스럽게 사라지도록 개선합니다. md 이상에서 ActionArea actions slot의 최대 너비를 content width로 제한합니다. Migration Notes - 기존 ActionAreaLayout 사용처의 API 변경은 없음 - `--oc-action-area-layout-gradient-overlap`, `--oc-action-area-layout-gradient-size`, `--oc-action-area-layout-background-color`로 footer overlay 범위와 배경색 조정 가능 - `--oc-action-area-container-max-width`로 md 이상 actions slot 최대 너비 조정 가능 - 3f67339: Modal bottom variant의 surface motion에서 opacity fade를 제거하고 translate motion만 유지합니다. ### Migration Notes - 없음 ## 1.4.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.3.0..HEAD`_ #### Features - `3c2da27` feat(ui): support link icon buttons #### Fixes - `0f245d6` fix(button): align loading indicator to content height (#120) #### Documentation - `d02538f` docs(agents): clarify compound composition boundary #### Other - `e66ca98` ActionArea 레이아웃 추가 (#121) ### Minor Changes - e66ca98: ActionAreaLayout을 추가해 스크롤 본문과 하단 ActionArea footer를 하나의 layout owner에서 구성할 수 있도록 합니다. Migration Notes - 신규 opt-in API이므로 기존 사용처 변경은 필요 없음 - 3c2da27: IconButton과 BackgroundIconButton이 `href`를 받으면 anchor로 렌더링하도록 지원합니다. Migration Notes - 없음 ### Patch Changes - 0f245d6: Button 로딩 인디케이터가 label/content 영역 기준으로 정렬되도록 수정하고, Loading 내부 SVG part를 `indicator`로 변경해 Button icon slot과 충돌하지 않도록 개선합니다. ### Migration Notes - `Loading` 내부 SVG를 selector로 커스터마이즈했다면 `[data-oc-part='icon']` 대신 `[data-oc-part='indicator']`를 사용하세요. ### Migration Notes - `Loading` 내부 SVG를 selector로 커스터마이즈했다면 `[data-oc-part='icon']` 대신 `[data-oc-part='indicator']`를 사용하세요. ## 1.3.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.2.0..HEAD`_ #### Features - `5f154f7` feat(motion): add extra bounce override (#106) - `9ff2f9b` feat(storybook): add foundation profile toolbar #### Fixes - `0922662` fix(modal): keep bottom fill in sheet opacity layer - `7cf2bfe` fix(select): apply icon styling to indicator - `1eda9f5` fix(modal): keep close button visible by default - `a99a706` fix(ui): make row interactions self-driven - `f884992` fix(ui): default row dividers to neutral - `1910da6` fix(ui): preserve cell activation through interaction layer - `bf96c94` fix(ui): avoid duplicate cell control activation #### Documentation - `908e824` docs(agent): update figma agent setup guidance - `2069560` docs(ui): rely on cell default divider in stories #### Other - `2916a70` Motion phase 스토리 추가 (#100) - `4da6f5f` motion factor 토큰명 정리 (#102) - `9d67d6f` Atomic radius factor 추가 (#103) - `858fe7b` Figma foundation sync 문서화 (#105) - `eae3c17` Modal 레이어 계약 정리 (#107) - `c0f6de5` Accordion summary 표면 계약 개선 (#108) - `63b2615` 모션 시맨틱 계약 정리 (#109) - `952bc13` 모션 reveal 계약 제거 (#110) - `a0c700d` Badge 인터랙션 렌더링 추가 (#111) - `510ed36` 선택 컨트롤 크기 계약 정리 (#112) - `8bdd955` ActionArea priority 계약 정리 (#113) - `f6dc9c9` Switch RTL 대응 및 라벨 정렬 개선 (#114) - `42dab32` 모달 BottomSheet 러버밴드 보정 (#115) - `3de755e` Modal 여백 및 hidden backdrop 닫힘 정책 개선 (#116) - `4849f41` 아이콘 생성 및 Figma 동기화 도구 개선 (#117) ### Minor Changes - 8bdd955: ActionAreaButton의 action hierarchy contract를 `priority` prop으로 정리하고 동등 선택지를 위한 `equal` priority를 추가합니다. Migration Notes - `ActionAreaButton variant` prop 제거, `priority` prop으로 교체 필요 - `ActionAreaButton variant="main"`은 `priority="main"`으로 변경 필요 - `ActionAreaButton variant="alternative"`는 `priority="alternative"`로 변경 필요 - `ActionAreaButton variant="sub"`는 `priority="sub"`로 변경 필요 - 동등한 선택지를 표시할 때는 `priority="equal"` 사용 필요 - `data-oc-action-area-button-variant` selector 제거, `data-oc-action-area-button-priority` selector 사용 필요 - `ActionAreaButton priority="alternative"`는 기존과 동일하게 outlined secondary Button으로 렌더링됨 - `ActionAreaButton priority="equal"`은 outlined primary Button으로 렌더링됨 - `ActionArea`는 strong에서 위→아래 `main` → `equal` → `alternative` → `sub`, neutral/compact에서 inline-start→inline-end 기준 `sub` → `alternative` → `equal` → `main` 순서로 action을 정렬함 - `Button appearance="outlined" variant="secondary"`의 content 색상은 primary를 유지하고 interaction만 label-normal 기준으로 변경됨 - 9d67d6f: atomic radius token과 component-local radius 값을 조정할 수 있는 radius factor를 추가합니다. Migration Notes - `--oc-atomic-radius-factor` token 추가 - `--oc-atomic-radius-*` token이 radius factor를 반영하도록 변경 - `oc-radius($radius, $factor-token)` Sass helper 추가 - `Badge`, `Menu`, `Alert`, `Tooltip`, `TextButton`, `Checkbox`의 component-local radius 기본값이 radius factor를 반영하도록 변경 - `BackgroundIconButton` interaction clip radius가 `--oc-atomic-radius-max`를 반영하도록 변경 - 기존 `--oc-atomic-radius-*` token 이름은 유지되며 consumer rename은 필요 없음 - consumer가 radius를 전역으로 줄이거나 제거해야 하면 `--oc-atomic-radius-factor`를 override - 5f154f7: oc-motion의 spring-backed motion에서 extra bounce override를 지원합니다. Migration Notes - SCSS `oc-motion(...)`과 `@include oc-motion(...)`에 `$extra-bounce` 인자 추가 - TS runtime `ocMotion.resolve(...)`와 `MotionExpand`에 `extraBounce` option 추가 - non-spring motion에서 extra bounce override를 넘기면 에러 발생 - 4da6f5f: motion과 typo의 runtime multiplier token vocabulary를 `factor` 기준으로 정리합니다. Migration Notes - `--oc-typo-scale`을 `--oc-typo-size-factor`로 변경 - `--oc-motion-duration-scale*`을 `--oc-motion-duration-factor*`로 변경 - `--oc-motion-scale*` amplitude token을 `--oc-motion-scale-factor*`로 변경 - `--oc-motion-distance-scale*`을 `--oc-motion-distance-factor*`로 변경 - SCSS `oc-motion(...)`, `oc-motion-duration(...)`의 `$duration-scale` 인자를 `$duration-factor`로 변경 - SCSS `oc-motion-duration(...)`의 `$duration-scale-token` 인자를 `$duration-factor-token`으로 변경 - SCSS `oc-motion-scale(...)`의 `$scale-token` 인자를 `$scale-factor-token`으로 변경 - SCSS `oc-motion-distance(...)`의 `$distance-token` 인자를 `$distance-factor-token`으로 변경 - React/runtime motion option과 result의 `durationScale` field를 `durationFactor`로 변경 - React/runtime motion result의 `paceScale` field를 `paceFactor`로 변경 - 기존 `scale` token alias는 제공하지 않음 - 63b2615: motion intent vocabulary를 `disclosure`, `surface`, `sheet`, `expand`, `release` 중심으로 확장하고 Menu, Tooltip, Modal, Accordion motion contract를 새 intent에 맞게 정리합니다. Migration Notes - 기존 `reveal` motion intent는 제거됩니다. Menu/Tooltip은 `disclosure`, Popup Modal은 `surface`, Bottom Modal은 `sheet`, layout expand motion은 `expand`를 사용해야 합니다. - `MotionReveal` runtime primitive는 `MotionExpand`로 이름이 변경됩니다. 기본 `data-oc-component`도 `motion-reveal`에서 `motion-expand`로 변경됩니다. - `--oc-motion-duration-reveal`, `--oc-motion-duration-reveal-exit`, `--oc-motion-timing-reveal`, `--oc-motion-timing-reveal-exit` token은 제거됩니다. - `--oc-motion-scale-factor-reveal`, `--oc-motion-distance-factor-reveal` token은 `--oc-motion-scale-factor-spatial`, `--oc-motion-distance-factor-spatial`로 변경됩니다. - Menu/Tooltip은 `disclosure`, Popup Modal은 `surface`, Bottom Modal은 `sheet`, Accordion은 `expand` motion intent를 사용합니다. - Menu/Tooltip의 `disclosure exit`은 `0.14s`와 `cubic-bezier(0.8, 0, 1, 1)` 기준의 non-spring accelerate motion을 사용합니다. - Popup Modal의 surface exit은 smooth `0.24` 기준입니다. - Bottom Modal의 sheet enter는 smooth `0.26`, sheet exit/release는 smooth `0.33` 기준입니다. - Popup drag release는 `gesture release`, Bottom drag release는 `sheet release`를 사용합니다. - Reduced-motion에서 Accordion chevron은 상태 회전을 보존하고 panel content는 opacity fade를 유지하며, Loading은 fade와 360도 회전만 유지합니다. ### Patch Changes - c0f6de5: Cell item surface SCSS contract를 분리해 Accordion summary와 공유하고, Accordion hover divider 및 details opacity expand motion을 Cell/oc-motion 정책에 맞춥니다. Migration Notes - 없음 - a0c700d: Badge에 self-driven Interaction을 켤 수 있는 `interactive` prop과 link rendering을 추가합니다. Migration Notes - 기존 Badge 사용에는 영향 없음 - command 역할의 Badge는 `interactive` prop으로 button 렌더링 가능 - navigation 역할의 Badge는 `href` prop으로 anchor 렌더링 가능 - a99a706: Cell item과 Accordion summary interaction을 self-driven mode로 전환해 fillWidth=false에서 확장된 interaction 영역도 hover/active 상태를 받을 수 있게 합니다. Migration Notes - 없음 - bf96c94: Cell 안의 Checkbox, Radio, Switch control surface 클릭이 native label activation과 Cell proxy activation으로 중복 처리되지 않도록 수정합니다. Migration Notes - 없음 - 0922662: Modal bottom sheet의 rubber-band fill layer가 닫힘 opacity motion과 함께 합성되도록 수정합니다. Migration Notes - 없음 - 42dab32: Modal BottomSheet의 rubber-band 감쇠 기준에 viewport 비율 cap을 적용합니다. Migration Notes - 없음 - 1eda9f5: Modal Header의 기본 닫기 버튼이 viewport와 placement에 관계없이 표시되도록 변경합니다. Migration Notes - `ModalHeader`의 `closeButton` 기본값이 실제 UI에서도 일관되게 반영됨 - 닫기 버튼을 숨겨야 하는 경우 `closeButton={false}`를 명시하세요. - 3de755e: Modal popup에서 시각적 backdrop이 hidden 상태일 때 배경 클릭으로 닫히지 않도록 변경합니다. Migration Notes - `ModalContent`의 resolved backdrop이 `hidden`이면 backdrop click과 outside press dismissal이 무시됨 - 배경 클릭으로 닫히는 popup이 필요하면 `backdrop="visible"`을 명시하세요. - eae3c17: Modal.Content의 public CSS variable contract가 motion/layout layer까지 도달하도록 수정하고, Modal surface focus ring 기본 표시를 제거합니다. Migration Notes - `Modal.Content` `className`은 motion layer, visual surface layer, bottom fill layer에 함께 적용됨 - `Modal.Content` `style`의 CSS custom property는 motion layer와 bottom fill layer에도 전달되어 `--oc-modal-bottom-top-clearance`, `--oc-modal-width` 같은 layout contract override 가능 - `--oc-modal-bottom-top-clearance` 기본값을 `3rem`으로 변경하고 consumer override 값을 그대로 사용 - `initialFocus="content"` 사용 시 Modal/Alert surface 전체 focus ring은 기본 표시되지 않음 - f884992: Cell과 Accordion의 기본 divider 색상을 neutral로 맞춥니다. Migration Notes - 기본 Cell, Accordion divider가 `alternative`에서 `neutral`로 변경됨 - 7cf2bfe: Select indicator 아이콘을 ChevronUpDown으로 바꾸고, 아이콘 슬롯과 맞는 padding 및 sizing contract를 사용하도록 정리합니다. Migration Notes - 없음 - 510ed36: Checkbox, Radio, CheckMark에 `small`/`medium` size contract를 정렬합니다. Migration Notes - `Checkbox`, `Radio`, `CheckMark`의 기본 size는 `medium`으로 유지됨 - root export에서 `CheckboxSize`, `RadioSize`, `CheckMarkSize` type을 제공함 - `small`은 `body2` 높이 기준, `medium`은 `body1` 높이 기준으로 control 크기와 label typography를 정렬함 - selection control container padding을 `0.125em`으로 통일함 - 작은 selection control이 필요한 consumer는 `size="small"` 지정 필요 - f6dc9c9: Switch의 checked thumb 이동을 RTL direction에서 반대로 적용합니다. Migration Notes - `dir="rtl"` 환경에서 `Switch` checked thumb가 inline-start 방향으로 이동함 - public API 변경 없음 - f6dc9c9: Switch 라벨 typography와 content alignment를 SelectionControl 공통 size contract에 맞춥니다. Migration Notes - `Switch size="medium"` 라벨은 body1 기준, `size="small"` 라벨은 body2 기준으로 정렬됨 - public API 변경 없음 - Updated dependencies [4849f41] - Updated dependencies [4849f41] - @orioncactuscorp/icons@1.3.0 ### Migration Notes - `ActionAreaButton variant` prop 제거, `priority` prop으로 교체 필요 - `data-oc-action-area-button-variant` selector 제거, `data-oc-action-area-button-priority` selector 사용 필요 - `--oc-atomic-radius-factor` token 추가, `--oc-atomic-radius-*` token은 radius factor를 반영하도록 변경 - SCSS `oc-radius($radius, $factor-token)` helper 추가 - SCSS `oc-motion(...)`, `@include oc-motion(...)`, React/runtime motion API에 extra bounce 및 factor 기반 option 추가 - `--oc-typo-scale`은 `--oc-typo-size-factor`로 변경 - `--oc-motion-duration-scale*`, `--oc-motion-scale*`, `--oc-motion-distance-scale*` token은 각각 `factor` 기준 이름으로 변경 - 기존 `reveal` motion intent와 `MotionReveal` runtime primitive 제거, `disclosure`, `surface`, `sheet`, `expand`, `MotionExpand` 사용 필요 - reveal 관련 motion duration/timing/scale/distance token 제거 또는 spatial/factor 기준 token으로 변경 - `Badge`는 `interactive` prop과 `href` prop으로 interactive rendering 지원 - `ModalHeader` 닫기 버튼 기본 표시가 실제 UI에 일관되게 반영되며 숨길 때는 `closeButton={false}` 명시 필요 - `ModalContent`의 resolved backdrop이 `hidden`이면 backdrop click과 outside press dismissal이 무시됨 - `Modal.Content` `className`/`style`은 motion layer, visual surface layer, bottom fill layer에 함께 적용됨 - `--oc-modal-bottom-top-clearance` 기본값을 `3rem`으로 변경 - 기본 Cell, Accordion divider가 `alternative`에서 `neutral`로 변경 - `Checkbox`, `Radio`, `CheckMark`에 `small`/`medium` size contract 정렬 및 관련 size type root export 추가 - `Switch`는 `dir="rtl"` 환경에서 checked thumb 이동 방향을 반대로 적용 - `Switch size="medium"` 라벨은 body1 기준, `size="small"` 라벨은 body2 기준으로 정렬됨 ## 1.2.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.1.0..HEAD`_ #### Fixes - `7722704` fix(storybook): exclude library plugins from static build #### Documentation - `b43c650` docs(agent): document release workflow skill #### Other - `8555c47` SCSS inset border helper 추가 (#89) - `7a359c1` montage-icons upstream sync command 추가 (#90) - `4a9e6e4` Storybook 테마와 모션 툴바 개선 (#91) ### Minor Changes - 8555c47: SCSS inset border helper를 `oc-border`로 교체합니다. ### Migration Notes - `inset-stroke` mixin을 제거합니다. - 기존 `@include inset-stroke(...)` 사용처는 `@include oc-border(...)`로 변경해야 합니다. - `@include oc-border`는 `1px currentColor` inset border를 출력하고, `@include oc-border(black)`은 `1px black` inset border를 출력합니다. - `1.5px`, `2.5px`, `3.5px` 같은 half-pixel px inset border는 WebKit/DPR 보정을 적용합니다. ### Migration Notes - `inset-stroke` mixin을 제거합니다. - 기존 `@include inset-stroke(...)` 사용처는 `@include oc-border(...)`로 변경해야 합니다. - `@include oc-border`는 `1px currentColor` inset border를 출력하고, `@include oc-border(black)`은 `1px black` inset border를 출력합니다. - `1.5px`, `2.5px`, `3.5px` 같은 half-pixel px inset border는 WebKit/DPR 보정을 적용합니다. ## 1.1.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.0.0..HEAD`_ #### Features - `68e4f3a` feat(alert): add content message props (#83) #### Fixes - `3b84e25` fix(release): avoid existing tag output #### Documentation - `50d960c` docs: refine public package documentation - `14a7162` docs(ui): document foundation customization - `89effa7` docs(ui): split install commands by manager - `ae16b1c` docs(ui): expand motion documentation - `d7d9802` docs(ui): simplify runtime motion example #### Maintenance - `db95a78` chore(release): fix public release tag creation #### Other - `81de07e` npm OIDC 배포 전환 (#79) - `8e6fbbd` Field control stroke paint 보정 (#82) - `fe0db9d` Modal 드래그 정착 CSS fallback 제거 (#84) - `cb2f8da` RSC 클라이언트 경계 보존 (#85) - `5174d57` 내부 visual layer stacking 격리 (#86) - `17e6057` Modal 그림자 및 backdrop 정책 개선 (#87) ### Minor Changes - 17e6057: atomic foundation에 Figma shadow effect style과 대응되는 shadow token을 추가합니다. Migration Notes - 신규 shadow token을 사용할 수 있으며, 기존 shadow token과 component API는 유지됩니다. - 17e6057: ModalContent에 backdrop 표시 정책을 추가하고, snapped popup과 peeked bottom sheet의 auto backdrop을 숨김 처리합니다. Migration Notes - `ModalContent`에서 backdrop 표시를 직접 고정해야 하는 경우 새 backdrop policy를 명시할 수 있습니다. - snapped popup과 peeked bottom sheet에서 auto backdrop에 의존하던 consumer style은 더 이상 표시되지 않습니다. ### Patch Changes - 68e4f3a: AlertContent에 `heading`, `description` prop 기반 메시지 API를 추가합니다. Migration Notes - 기존 AlertHeading, AlertDescription compound API는 유지됩니다. - 정형 Alert 메시지는 AlertContent의 `heading`, `description` prop으로 작성할 수 있습니다. - 8e6fbbd: Field control surface에 stacking context 격리를 추가해 Modal body 스크롤 중 TextInput, TextArea, Select stroke가 Modal header 위로 paint되지 않도록 보정합니다. Migration Notes - consumer repo에서 Modal body scope에 추가했던 Field control isolation 우회 스타일은 제거할 수 있습니다. - cb2f8da: React Server Components 환경에서 root barrel import가 interactive component의 client boundary를 잃지 않도록 `use client` directive 보존과 RSC boundary 검증을 추가합니다. Migration Notes - Next App Router Server Component에서 `@orioncactuscorp/ui` root barrel로 interactive component를 import하는 경우 leaf client boundary가 유지됩니다. - Server Component에서 `onClick` 같은 function prop을 interactive component에 직접 전달하는 사용 방식은 React Server Components 제약상 Client Component로 분리해야 합니다. - 5174d57: Badge, ActionArea, Checkbox, Radio, CheckMark의 내부 visual layer에 stacking context 격리를 추가해 외부 chrome과 z-index가 경쟁하지 않도록 보정합니다. Migration Notes - 없음 ### Migration Notes - `ModalContent`에서 backdrop 표시를 직접 고정해야 하는 경우 새 backdrop policy를 명시할 수 있습니다. - snapped popup과 peeked bottom sheet에서 auto backdrop에 의존하던 consumer style은 더 이상 표시되지 않습니다. - consumer repo에서 Modal body scope에 추가했던 Field control isolation 우회 스타일은 제거할 수 있습니다. - Next App Router Server Component에서 `@orioncactuscorp/ui` root barrel로 interactive component를 import하는 경우 leaf client boundary가 유지됩니다. - Server Component에서 `onClick` 같은 function prop을 interactive component에 직접 전달하는 사용 방식은 React Server Components 제약상 Client Component로 분리해야 합니다. ## 1.0.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.11.0..HEAD`_ #### Maintenance - `afc7780` chore(release): prepare npm public publish bootstrap #### Other - `4ea5168` Public package 배포 준비 (#73) ### Major Changes - 4ea5168: Public package 배포를 위한 metadata, license, documentation을 정리합니다. - `@orioncactuscorp/ui`와 `@orioncactuscorp/icons` package metadata를 MIT license, public publish access, homepage, author, support email 기준으로 정리합니다. - `@orioncactuscorp/ui` public package tarball에서 내부 `agent/*` artifact를 제외합니다. - README와 `docs/agent-setup.md`에 public-safe Agent 초기 세팅 prompt를 추가합니다. - GitHub Packages private 설치 안내를 public package 설치 안내로 교체합니다. Migration Notes - `node_modules/@orioncactuscorp/ui/agent/*`를 직접 읽던 consumer Agent setup은 README 또는 `docs/agent-setup.md`의 복붙 prompt 기반으로 전환해야 합니다. - runtime component, CSS, SCSS, icon import 사용성은 변경되지 않습니다. ### Patch Changes - Updated dependencies [4ea5168] - @orioncactuscorp/icons@1.0.0 ### Migration Notes - 없음 ## 0.11.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.10.0..HEAD`_ #### Other - `a489fc4` 아이콘 패키지 분리 (#69) - `a3224b8` Montage 아이콘 패키지 추가 (#70) - `0b897e8` BackgroundIconButton 블렌드 QA 정리 (#72) ### Minor Changes - a489fc4: `@orioncactuscorp/icons` package를 추가하고 `orioncactus` first-party icon set을 `@orioncactuscorp/ui`에서 분리합니다. - `SvgIcon`, `IconProps`, `orioncactus` icon set을 `@orioncactuscorp/icons`로 이동합니다. - `SvgIcon`은 비상호작용 시각 SVG primitive로 정리하고 `title`, `desc`, `aria-*` 접근성 metadata를 지원합니다. - `@orioncactuscorp/ui`는 내부 component indicator icon을 `@orioncactuscorp/icons` dependency에서 가져옵니다. - `@orioncactuscorp/ui/icons/orioncactus`, `@orioncactuscorp/ui/icons/material-rounded`, `@orioncactuscorp/ui/icons/montage` export를 제거합니다. - `@orioncactuscorp/ui` root barrel의 `IconDefault` export를 제거합니다. - `material-rounded` placeholder와 `montage` derived icon set은 새 icons package에 포함하지 않습니다. Migration Notes - 앱 코드에서 icon을 직접 사용하는 경우 import 경로를 `@orioncactuscorp/icons`로 변경해야 합니다. - 기존 `import { IconDefault } from '@orioncactuscorp/ui'`는 `import { IconDefault } from '@orioncactuscorp/icons'`로 변경합니다. - 기존 `import { IconClose } from '@orioncactuscorp/ui/icons/orioncactus'`는 `import { IconClose } from '@orioncactuscorp/icons'`로 변경합니다. - `@orioncactuscorp/ui` component만 사용하는 경우 `Checkbox`, `Radio`, `Select`, `Accordion`, `ModalClose` 등의 내부 icon 표시는 그대로 동작합니다. - GitHub Actions에서 private package를 설치하는 consumer repository는 GitHub Packages의 `ui`, `icons` package settings에 모두 `Manage Actions access: Read` 권한이 필요합니다. - icon 자체에 `onClick`, `tabIndex`, `role='button'`을 부여한 consumer 코드는 부모 `button`, `a`, `IconButton`으로 interaction을 옮겨야 합니다. ### Patch Changes - 0b897e8: BackgroundIconButton normal variant의 blend layer를 Figma IconButtonBackground 구조에 맞춰 조정합니다. - 기본 아이콘은 static black 43% opacity로 낮추고, WebKit에서는 cool neutral 50 61% opacity와 `plus-darker` blend를 적용합니다. - 배경 slot에 white `plus-lighter` 35% layer와 black 8% `multiply` 보정 layer를 분리 적용합니다. - BackgroundIconButton에서 blend opacity 기본값을 관리하고, Background surface 안에서는 WebKit 전용 black 보정 layer에 4%를 추가합니다. - alternative variant는 cool neutral 30 61% 배경과 static white 88% 아이콘 계약으로 고정합니다. - WebKit normal variant는 `brightness(200%)` backdrop-filter와 black `multiply` 20% layer를 사용하고, Background surface 내부에서는 4%를 추가 보정합니다. - WebKit과 Chromium에서 흰색, 회색, 검정, 이미지, Modal header 환경을 검증하는 Storybook QA story와 Playwright 테스트를 추가합니다. Migration Notes - 없음 - Updated dependencies [a489fc4] - @orioncactuscorp/icons@0.11.0 ### Migration Notes - 앱 코드에서 icon을 직접 사용하는 경우 import 경로를 `@orioncactuscorp/icons`로 변경해야 함 - 기존 `import { IconDefault } from '@orioncactuscorp/ui'`는 `import { IconDefault } from '@orioncactuscorp/icons'`로 변경 - 기존 `import { IconClose } from '@orioncactuscorp/ui/icons/orioncactus'`는 `import { IconClose } from '@orioncactuscorp/icons'`로 변경 - icon 자체에 `onClick`, `tabIndex`, `role='button'`을 부여한 consumer 코드는 부모 `button`, `a`, `IconButton`으로 interaction 이동 - GitHub Actions에서 private package를 설치하는 consumer repository는 GitHub Packages의 `ui`, `icons` package settings에 모두 `Manage Actions access: Read` 권한 필요 ## 0.10.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.9.0..HEAD`_ #### Other - `e6e8fad` 컴포넌트 선택자 우선순위 개선 (#43) - `0a3f53f` GitHub Actions Node 24 런타임 전환 (#44) - `cb47d90` Reduced Motion 대응 기준 및 모달 동작 개선 (#46) - `5a24604` motion helper 도입 (#49) - `62c16c9` CI 실행 시간 단축 (#50) - `2de4e1d` oc-motion 전환 완료 (#51) - `4b3017a` Modal stacking contract 정리 (#52) - `7fcc0ae` Modal 중첩 닫기 정책 추가 (#54) - `e15258f` TextButton inherit variant 정리 (#55) - `535a5ba` motion duration scale 토큰명 정리 (#56) - `b9c9ad7` Field 가로 배치 지원 (#58) - `cf56dc8` Alert 컴포넌트 추가 (#57) - `e33af8b` TextButton 색상 계약 정리 (#59) - `99c3aed` import 경로 기준 정리 (#60) - `a5a67c6` 주석 정책 정리 (#61) - `7ad3583` Cell 인터랙션 구조 개선 (#63) - `2c31da4` oc-motion 피드백 및 amplitude token 개선 (#65) - `adea6a1` 런타임 모션 Accordion 추가 (#64) - `619f771` 모션 및 Storybook 상태 개선 (#66) - `40641ca` Bottom Modal 드래그 관성 개선 (#67) - `1a7a01a` 팝업 스냅 드래그 관성 개선 (#68) ### Minor Changes - b9c9ad7: Field에 horizontal orientation과 label width contract를 추가합니다. Migration Notes - `Field`가 `orientation="horizontal"`과 `labelWidth` prop을 지원합니다. - `labelWidth`의 number 값은 `16px = 1rem` 기준 rem CSS length로 변환됩니다. - `FieldControl`은 stable wrapper slot인 `data-oc-component="field-control"` 및 `data-oc-part="control"`을 렌더링합니다. - horizontal Field의 helper/error message는 control column 시작 위치에 정렬됩니다. - 2c31da4: Motion scale amplitude token을 추가합니다. Migration Notes - `oc-motion-scale($scale, $intent)` helper 추가 - `--oc-motion-scale-feedback`, `--oc-motion-scale-reveal` foundation token 추가 - Button, TextButton, IconButton, BackgroundIconButton, Cell, Checkbox, Menu, Tooltip, Modal, Motion story의 scale feedback/reveal 값을 `oc-motion-scale(...)` 경유로 변경 - Radio dot의 고정 시각 크기 scale은 motion amplitude가 아니므로 `--oc-radio-icon-scale` component contract로 분리 - 기본 token 값은 `1`이므로 기존 scale 값은 유지되며, consumer가 token을 `0` 또는 `0.5` 등으로 override해 scale 효과를 제거하거나 약하게 조정 가능 - 2c31da4: `oc-motion`에 거부된 시도를 표현하는 `reject` intent를 추가합니다. Migration Notes - `oc-motion(..., reject)`는 닫기, 전환, 입력 같은 사용자 시도가 거부되었음을 알리는 transform feedback에 사용 - `reject` intent는 일반 환경에서 smooth spring-backed transform transition을 제공 - `--oc-motion-duration-reject`, `--oc-motion-timing-reject` foundation token 추가 및 smooth spring 기반 기본값 제공 - cf56dc8: Alert compound component를 추가합니다. Migration Notes - `Alert`, `AlertRoot`, `AlertContent`, `AlertHeading`, `AlertDescription`, `AlertActionArea`, `AlertAction` root export 추가 - `AlertContent`는 `Modal`의 popup/hug overlay contract를 재사용하며 기본 `role="alertdialog"`와 heading/description 접근성 연결 제공 - Alert body layout은 `data-oc-part="container"` 아래 `message`와 `actions` slot을 sibling으로 배치함 - `AlertRoot`는 기본적으로 backdrop/outside dismissal을 막고, 정보성 alert에서만 `outsideDismissible`로 허용 가능 - `AlertHeading`과 `AlertDescription`은 `data-oc-part="message"` slot으로 그룹화됨 - `AlertActionArea`는 기본적으로 action에 autofocus를 주입하지 않으며, destructive confirm 등에서 `initialFocus="least-destructive"`를 명시해 사용할 수 있음 - `AlertAction`은 `normal`, `assistive`, `negative` variant를 제공하며 기본 클릭 시 Alert를 닫음 - Alert width는 `--oc-alert-width` contract var로 조정 가능하며 Modal surface에는 `--oc-modal-width`로 전달됨 - `ModalContent`는 Base UI Dialog initial focus를 제어하는 `initialFocus` prop과 popup 자체를 가리키는 `"content"` 값을 지원함 - e15258f: TextButton 기본 스타일을 Figma의 assistive medium 계약에 맞추고, 부모 색상과 타이포를 따르는 `inherit` variant/size 조합을 명시합니다. Migration Notes - `TextButton` 기본값이 `variant="assistive"`, `size="medium"`으로 변경됨 - 기존 `variant="normal"`은 제거되며, 부모 색상을 상속해야 하는 경우 `variant="inherit"` 사용 - 부모 타이포를 상속해야 하는 경우 기존처럼 `size="inherit"` 사용 - 7fcc0ae: Modal에 nested navigation dismissal 정책을 추가합니다. - `ModalRoot`에 `navigationDepth`와 `dismissBehavior` prop 추가 - `navigationDepth > 0`의 `auto` 정책에서 drag dismissal과 background pointer dismissal 기본 차단 - `dismissBehavior`의 reason별 `allow`/`block` override 지원 Migration Notes - 기존 Modal은 `navigationDepth` 기본값이 `0`이므로 동작 변경 없음 - 중첩 화면 Modal에서 back stack 우회 방지가 필요하면 `navigationDepth`를 현재 depth로 전달 - 중첩 화면에서도 drag 또는 backdrop 닫기를 허용해야 하면 `dismissBehavior={{ drag: 'allow', backdrop: 'allow' }}` 사용 - 7ad3583: Cell에 interactive row, fill width, leading/content/trailing slot, divider variant contract를 추가하고 MenuItem이 개선된 Cell primitive를 재사용하도록 정리합니다. Migration Notes - Cell은 `divider="normal|neutral|alternative|none"`을 지원하며 기존 `dividerColor` prop은 제거 - CellItem은 `interactive`, `fillWidth`, `verticalAlign`, `leading`, `trailing`, `content`, `description`, `divider` prop과 `data-oc-*` selector contract를 제공 - CellItem의 `leading`, `trailing`에 직접 전달한 Icon은 `size`가 없으면 Cell slot icon size를 따름 - `interactive` CellItem은 `data-oc-cell-control`로 opt-in한 내부 control에만 cell click activation을 전달 - MenuItem은 CellItem 기반으로 렌더링되며 기존 `data-oc-component="menu-item"` contract는 유지 - MenuItem에 `leading`, `trailing`, `content`, `fillWidth`, `divider` prop 추가 - Menu는 기존 `size="small|medium"`에 따른 typography와 em 기반 item padding을 유지 - 1a7a01a: Modal Popup에 `snapPositions`와 `defaultSnapPosition`을 추가해 가운데, 좌우, 상하, 모서리 위치로 드래그 후 스냅할 수 있도록 개선합니다. Migration Notes - 기존 BottomSheet `snapPoints` 사용 방식 변경 없음 - Popup snap이 필요한 경우 `variant="popup"`과 `snapPositions`를 함께 지정 - adea6a1: TS runtime `oc-motion` layer와 Accordion compound component를 추가합니다. Migration Notes - `@orioncactuscorp/ui/utils/motion` subpath 추가 - `@orioncactuscorp/ui/react/motion` subpath 추가 - `ocMotion.resolve(...)`는 SCSS `oc-motion`과 같은 intent, phase, pace, reduced-motion policy, duration scale token vocabulary 사용 - `MotionReveal` runtime wrapper 추가 - `MotionReveal`은 `block-size` reveal을 low-level `ocSpring` animator에 연결하고 reduced-motion에서 non-feedback reveal motion 즉시 완료 - `Accordion`, `AccordionItem`, `AccordionSummary`, `AccordionDetails`, `AccordionDescription`, `AccordionContent` compound export 추가 - Accordion details reveal은 CSS grid 대신 `MotionReveal` 사용 - Accordion selector contract 추가 - `IconChevronDownTight` export 추가 - 5a24604: motion duration scale token과 `oc-motion(...)` SCSS helper를 추가해 transition duration, pace, reduced-motion 정책을 공통 contract로 관리합니다. Migration Notes - `--oc-motion-*` foundation token 추가 - `@include oc-motion($properties, $intent, $phase, $pace, $duration-scale, $reduced)` mixin 추가 - `transition: oc-motion(...)`, `oc-motion-duration(...)`, `oc-motion-timing(...)` SCSS function 추가 - `$duration-token` escape hatch 추가. 단 spring-backed motion에서는 compile error 처리 - `$pace`는 `quick | normal | slow` semantic preset만 허용 - 숫자 duration 보정은 `$duration-scale` escape hatch로 분리 - `reveal` motion은 일반 환경에서 spring profile을 사용하며 transform에는 extra-bounce를 적용 - `--oc-motion-pace-*`, `--oc-motion-duration-scale`, `--oc-motion-duration-scale-reduced`, `--oc-motion-duration-scale-preserve`는 unitless multiplier로 사용 - spring-backed `oc-motion` duration도 `--oc-motion-duration-scale`과 `--oc-motion-pace-*` multiplier를 적용 - unknown phase, pace, reduced policy와 음수 `$duration-scale`은 compile error 처리 - `$reduced: preserve`는 `--oc-motion-duration-scale-preserve`를 사용 - `Interaction`, `Button`, `IconButton`, `TextButton`, `BackgroundIconButton`, `CheckMark`, `Checkbox`, `Radio`, `Switch`, `ScrollArea`, `Field`, `Tooltip`, `Menu`, `Modal` transition을 motion helper 기반으로 전환 - `Menu`, `Tooltip`, `Modal` reveal 계열은 reduced-motion에서 helper duration token을 사용하고 scale/translate motion을 제거 - `Switch` thumb처럼 상태 이해에 필요한 motion은 `$reduced: preserve`로 명시 - `Loading`은 reduced-motion에서 반복 animation을 멈추고 static indicator로 대체 - `docs/oc-motion.md`와 README motion 섹션 추가 - 2c31da4: Motion scale/distance amplitude parent token과 `oc-motion-distance(...)` helper를 추가합니다. Migration Notes - `--oc-motion-scale` parent token 추가 - `--oc-motion-scale-feedback`, `--oc-motion-scale-reveal`이 기본적으로 `--oc-motion-scale`을 참조하도록 변경 - `--oc-motion-distance-scale`, `--oc-motion-distance-scale-reject`, `--oc-motion-distance-scale-reveal` token 추가 - `oc-motion-distance($distance, $intent)` SCSS helper 추가 - Menu reveal translate와 Modal reject shake 거리가 motion distance token을 사용 - Storybook toolbar에서 전체 scale/distance와 intent별 override 조정 가능 ### Patch Changes - adea6a1: Accordion chevron rotation이 bouncy spring-backed `oc-motion`을 사용하도록 조정합니다. Migration Notes - Cell/Accordion icon slot size contract `--oc-cell-icon-size`가 shared Cell contract default에서 `1.375rem`으로 정렬됨 - `oc-motion(transform, feedback, $phase: settle)`가 bouncy spring-backed timing을 사용함 - Accordion 기본 chevron rotation은 `feedback + settle` phase에 1.5 duration scale을 적용하고 토글마다 시계방향 180deg씩 누적 회전함 - Accordion icon slot은 Cell과 같은 `--oc-cell-icon-size` block-size contract를 유지하며 inline axis는 강제하지 않음 - adea6a1: Cell과 Accordion disabled 시각 상태를 opacity contract로 정리합니다. Migration Notes - Cell disabled 상태는 `--oc-cell-disabled-opacity` contract var를 통해 내부 visual slot에만 기본 `0.28` opacity로 표현됨 - Accordion disabled item도 Cell과 같은 `--oc-cell-disabled-opacity` contract를 내부 summary/details visual slot에 적용함 - 기존 disabled label color token 기반 표현 대신 content opacity가 적용되며 divider border는 흐려지지 않음 - 4b3017a: Modal이 여러 개 동시에 열릴 때 `--oc-zindex-4` modal band 안에서 열린 순서대로 자동 stacking되도록 개선합니다. Migration Notes - Modal backdrop과 viewport가 각각 `--oc-modal-backdrop-z-index`, `--oc-modal-viewport-z-index` contract var를 통해 z-index를 계산 - 중첩 Modal은 내부 stack offset으로 순서를 조정하며, 닫힌 뒤 다시 열린 Modal은 가장 위에 배치 - Tooltip, Toast 등 더 높은 floating layer를 위해 Modal viewport의 고정 `--oc-zindex-5` 사용 제거 - Modal public prop 추가 없음 - e33af8b: TextButton 텍스트 색상을 `--oc-text-button-color` component contract var로 노출하고, Interaction 색상은 텍스트 현재 색상을 따르도록 정리합니다. Migration Notes - TextButton의 `primary`, `assistive`, `inherit` 색상은 `--oc-text-button-color`로 제어됨 - TextButton root class에서 색상을 바꾸는 consumer CSS는 `color` 대신 `--oc-text-button-color` override를 우선 권장 - 예: `Header`의 logo link, inquiry list의 `loadMoreButton`처럼 `TextButton`에 직접 className을 붙이는 경우 - 부모나 slot에서 `color`를 상속받는 기존 `variant="inherit"` 사용은 계속 동작함 - e6e8fad: 컴포넌트 modifier selector specificity를 낮춰 소비자 커스텀 class의 component contract var override가 더 쉽게 적용되도록 개선합니다. Migration Notes - Button, IconButton, TextButton, BackgroundIconButton, Interaction, Badge의 root modifier selector를 `:where()` 기반으로 조정 - BackgroundIconButton background slot 스타일 기준을 CSS Module hash class에서 `data-oc-part="background"` contract로 정리 - Agent selector contract와 convention metadata에 low-specificity modifier authoring 정책 추가 - CSS Module hash class 직접 타겟은 여전히 public customization contract가 아님 - cb47d90: Reduced motion 환경에서 motion intent 기준을 적용하도록 주요 컴포넌트의 transition 동작을 조정합니다. Migration Notes - Menu와 Tooltip은 `prefers-reduced-motion: reduce`에서 scale, translate, spring motion 대신 인지 가능한 opacity-only transition 사용 - Button, Interaction, CheckMark, Checkbox, Radio, ScrollArea, Switch는 reduced-motion에서도 opacity/color/background feedback transition 유지 - Bottom Modal은 reduced-motion에서도 공간 모델을 전달하기 위한 짧은 non-spring slide transition 유지 - Modal drag dismissal은 reduced-motion에서도 CSS에 정의된 transition duration이 있으면 해당 duration을 사용 - Popup Modal은 기본 환경에서 scale transition을 유지 - Popup/full Modal은 reduced-motion에서 transform motion 없이 인지 가능한 opacity transition 중심으로 동작 - Modal content는 `surface-motion` 레이어와 `surface` 레이어를 분리해 transform/opacity motion과 visual clipping/layout 책임을 분리 - Modal visual customization은 `data-oc-part="surface"` 또는 component contract var 기준 권장 - ModalContent `className`/`style`은 visual surface 레이어에 적용 - Loading은 reduced-motion에서 반복 animation을 멈추고 static indicator로 대체 - 2c31da4: Alert background 클릭이 닫기 차단 상태일 때 popup surface에 거부 피드백을 표시합니다. Migration Notes - `AlertRoot` 기본값처럼 background dismissal이 차단된 상태에서 backdrop을 클릭하면 popup surface가 reject motion으로 응답 - Modal motion layer가 닫기 시도 거부 중 `data-oc-modal-feedback="reject"` transient state selector를 노출 - 거부 피드백 거리는 `--oc-modal-reject-distance` contract var로 조정 가능 - 2c31da4: Scale 기반 active feedback이 `oc-motion` helper를 거치도록 누락된 컴포넌트를 정리합니다. Migration Notes - `TextButton` active scale feedback이 `oc-motion(transform, feedback)` transition을 사용 - `BackgroundIconButton` active scale feedback이 `oc-motion(transform, feedback)` transition을 사용 - public prop 또는 selector 변경 없음 - 619f771: Bottom Modal의 open motion을 runtime spring 기반으로 전환하고 drag release, peek/snap settle, backdrop opacity를 sheet translate와 같은 프레임에서 보간합니다. Migration Notes - `reveal` spring은 opacity에 smooth profile, transform에 snappy profile과 extra bounce를 적용 - `move`, `ambient loop` motion의 SCSS/TS spring profile 동기화 - `gesture settle` duration token을 `0.52s`로 조정하고 Safari drag release 체감을 위해 token easing 유지 - Bottom Modal은 reduced-motion에서도 sheet translate와 drag settle motion을 유지 - Bottom Modal backdrop opacity가 open/peek/snap/drag settle 중 sheet motion과 함께 보간 ### Migration Notes - `TextButton` 기본값이 `variant="assistive"`, `size="medium"`으로 변경되며, 기존 `variant="normal"`은 제거됨 - `Cell`의 기존 `dividerColor` prop은 제거되고 `divider="normal|neutral|alternative|none"` contract로 대체됨 - `Field`는 `orientation="horizontal"`과 `labelWidth`를 지원하며, horizontal helper/error message 정렬이 control column 기준으로 변경됨 - `ModalRoot`는 nested navigation dismissal 제어를 위해 `navigationDepth`와 `dismissBehavior`를 지원함 - `Alert`, `Accordion`, `MotionReveal`, motion utility subpath 및 motion foundation token이 추가됨 - scale, distance, reject, reduced-motion 관련 motion token과 helper가 추가되어 consumer override 지점이 확장됨 ## 0.9.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.8.0..HEAD`_ #### Other - `6c77a77` 자동완성 필드 표면 보정 (#33) - `fc17cf4` iOS Spring 모션 유틸리티 추가 (#34) - `514564f` Atomic foundation 토큰 정리 (#36) - `4467c24` Spring Storybook 개선 (#37) - `dfa8e89` Spring transition API 개선 (#38) - `2047b3e` Spring 런타임 개선 (#39) ### Minor Changes - fc17cf4: iOS spring motion을 CSS와 TS에서 사용할 수 있는 utility를 추가합니다. - `@orioncactuscorp/ui/scss/spring`의 `oc-spring(...)`, `oc-spring-timing(...)`, `oc-spring-settle-duration(...)`, `oc-spring-duration-scale(...)` 추가 - `@orioncactuscorp/ui/utils/spring`의 `ocSpring` runtime utility 추가 - `--oc-spring-smooth-*`, `--oc-spring-snappy-*`, `--oc-spring-bouncy-*` preset token 추가 Migration Notes - 신규 spring API의 `duration`은 iOS와 같은 perceptual duration 기준입니다. - CSS에 출력되는 transition duration은 spring 감쇠가 안정되는 settling duration입니다. - TS runtime 결과에서는 실제 CSS duration을 `settlingDuration`, `settlingDurationSeconds`로 명확히 구분합니다. - CSS token을 직접 사용할 때는 `--oc-spring-*` token을 사용하고, SCSS에서는 `oc-spring(...)` 사용을 권장합니다. - 2047b3e: React에서 spring runtime을 사용할 수 있는 hook subpath를 추가합니다. - `@orioncactuscorp/ui/react/spring` export 추가 - `useSpringAnimator`로 React lifecycle에 맞춘 animator 생성/정리 지원 - `useSpringValue`로 value, velocity, target frame state와 retarget setter 제공 - `useSpringTarget`으로 React state target을 따라가는 controlled spring value 지원 - Storybook runtime drag 예제에 hook 기반 사용 예시 추가 Migration Notes - 기존 `@orioncactuscorp/ui/utils/spring` API는 그대로 유지됩니다. - React component에서 spring value가 React state target을 따라가야 하면 `useSpringTarget` 사용을 권장합니다. - 직접 retarget setter, spring 변경, jump 제어가 필요하면 `useSpringValue` 사용을 권장합니다. - DOM write를 직접 제어하는 고빈도 gesture에는 `useSpringAnimator` 또는 기존 `createSpringAnimator` 사용을 권장합니다. - 2047b3e: TS spring runtime animator를 추가하고 static spring sampling과 같은 Apple Spring 모델을 공유하도록 정리합니다. - `createSpringAnimator`와 `ocSpring.createAnimator` 추가 - runtime animator에서 number, number array, numeric object 값 지원 - `setTarget()` retarget 시 현재 position과 velocity를 이어받는 persistent spring 동작 추가 - `setSpring()` 및 `blendDuration` 기반 spring parameter blending 지원 - `ocSpring.*` 결과에 `response`와 `evaluate({ time })` 추가 - Storybook에 WWDC 2023 2D drag spring 예제 추가 Migration Notes - 기존 `ocSpring.*.transition()`, `settlingDuration`, `timingFunction` 사용법은 그대로 유지됩니다. - gesture, drag, interrupt가 중요한 런타임 상호작용은 `createSpringAnimator` 사용을 권장합니다. - object value를 animator에 전달할 때는 초기 value, target, velocity의 numeric key shape가 같아야 합니다. - dfa8e89: SCSS `oc-spring(...)`에서 여러 transition property와 property별 spring 설정을 지원합니다. - `oc-spring((opacity, transform), 0.3s, snappy)`처럼 동일 spring 설정을 여러 property에 적용할 수 있습니다. - `oc-spring((opacity: (0.3s, snappy), transform: (0.3s, snappy, 0.1)))`처럼 property별 duration, preset, extra bounce를 지정할 수 있습니다. - `oc-spring((opacity: (duration: 0.3s, preset: snappy, delay: 50ms)))`처럼 property별 고급 옵션은 named map으로 지정할 수 있습니다. - Menu transition은 opacity와 transform spring 설정을 분리해 open/close transition 대상이 유지되도록 개선합니다. Migration Notes - 기존 `oc-spring(transform, 0.3s, snappy)` 단일 property 사용법은 그대로 유지됩니다. - property별 설정 tuple은 `(duration, preset, extra-bounce, delay, samples)` 순서입니다. - property별 physical spring이나 `bounce`, `initial-velocity` 같은 고급 옵션은 named map을 사용해야 합니다. - 514564f: foundation `element` token을 `atomic`과 `motion`으로 재구성합니다. - `@orioncactuscorp/ui/scss/foundations/element`를 제거하고 `atomic`, `motion` foundation으로 분리 - `--oc-element-radius-*`, `--oc-element-width-*`, `--oc-element-blur-*` token을 `--oc-atomic-*` token으로 변경 - `--oc-spring-*` preset token을 `motion` foundation에서 발행 - `--oc-element-header-height`, `--oc-element-overlay-*`, `--oc-element-ease-spring-*` token 제거 - `Badge` accent override contract를 `--oc-element-accent-color`에서 `--oc-badge-accent-color`로 변경 Migration Notes - `@orioncactuscorp/ui/scss/foundations/element` import를 `@orioncactuscorp/ui/scss/foundations/atomic`으로 변경하세요. - spring preset CSS token이 필요하면 `@orioncactuscorp/ui/scss/foundations/motion`도 함께 import하세요. - `--oc-element-radius-*`는 `--oc-atomic-radius-*`로 변경하세요. - `--oc-element-width-*`는 `--oc-atomic-width-*`로 변경하세요. - `--oc-element-blur-*`는 `--oc-atomic-blur-*`로 변경하세요. - `--oc-element-header-height`는 제거되었습니다. 앱 또는 Header 레벨에서 정의하세요. - `--oc-element-overlay-*`는 제거되었습니다. `Interaction` 컴포넌트의 `--oc-interaction-opacity-hover`, `--oc-interaction-opacity-focus`, `--oc-interaction-opacity-active` contract를 사용하세요. - `--oc-element-ease-spring-*`는 제거되었습니다. `--oc-spring-*` 또는 SCSS `oc-spring(...)` API를 사용하세요. - `--oc-element-accent-color`는 제거되었습니다. `Badge` accent color override에는 `--oc-badge-accent-color`를 사용하세요. ### Patch Changes - 6c77a77: iOS 자동완성 상태에서 Field 기반 TextInput, TextArea, Select의 radius와 stroke surface가 유지되도록 개선합니다. ### Migration Notes - 없음 ## 0.8.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.7.1..HEAD`_ #### Other - `d6adfe1` Divider 여백 제어 개선 (#30) - `cdca65e` Field 컨트롤 터치 영역 개선 (#31) - `8410cfe` 사이트 아키텍처 Agent 문서 추가 (#32) ### Minor Changes - d6adfe1: Divider에 `spacing` prop을 추가합니다. Migration Notes - `spacing='normal'`은 기존 기본 여백을 유지합니다. - `spacing='none'`으로 Divider 외부 여백을 제거할 수 있습니다. - `spacing`에 CSS variable 문자열 또는 number 값을 전달해 orientation에 맞는 여백을 조정할 수 있습니다. - 기존 `--oc-divider-margin-block`, `--oc-divider-margin-inline` contract는 `--oc-divider-spacing`으로 대체됩니다. ### Patch Changes - cdca65e: TextInput, TextArea, Select의 네이티브 컨트롤 터치 영역과 slot 레이아웃 동작을 개선합니다. ### Migration Notes - Divider의 기존 `--oc-divider-margin-block`, `--oc-divider-margin-inline` contract는 `--oc-divider-spacing`으로 대체됩니다. - 기존 기본 여백은 `spacing='normal'`에서 유지됩니다. - Divider 외부 여백 제거는 `spacing='none'`, 사용자 지정 여백은 CSS variable 문자열 또는 number 값으로 지정할 수 있습니다. ## 0.7.1 ### Changes _Commit range: `@orioncactuscorp/ui@0.7.0..HEAD`_ #### Fixes - `ba2a2c0` fix(agent): align migration manifest version #### Documentation - `a8a8282` docs: require agent manifest version checks ### Patch Changes - 0.7.0 package artifact의 agent migration manifest version mismatch를 보정합니다. Migration Notes - `packages/ui/agent/migration-manifest.json.packageVersion`을 package version과 동일하게 유지 - consumer Agent는 `0.7.1`부터 package artifact 내부 manifest version을 신뢰 가능 ### Migration Notes - 없음 ## 0.7.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.8..HEAD`_ #### Refactors - `b2188a4` refactor(field): consolidate field control styles #### Documentation - `b95b5a1` docs: update component documentation - `9b18a90` docs: add public surface checklist #### Other - `dc64ffb` ActionArea 추가 및 모달 액션 영역 개선 (#25) - `ac3e340` 필드 컨트롤 콘텐츠 슬롯 추가 (#26) - `234f2a1` 컴포넌트 마이너 개선 (#27) - `f84fb2a` Montage 아이콘 세트 추가 (#28) - `afdd3d3` 필드 컨트롤 surface 클릭 동작 개선 (#29) ### Minor Changes - dc64ffb: ActionArea와 ActionAreaButton을 추가하고 ModalFooter의 ActionArea spacing contract를 정리합니다. Migration Notes - Modal 하단 버튼 조합은 ModalFooter 내부에서 ActionArea를 사용하는 방식 권장 - Modal slot별 x spacing CSS 변수 추가: `--oc-modal-header-space-x`, `--oc-modal-container-space-x`, `--oc-modal-footer-space-x` - ModalFooter 내부 ActionArea에 `--oc-action-area-padding-x`, `--oc-action-area-padding-y`, `--oc-action-area-padding-bottom` 주입 - f84fb2a: montage 보조 아이콘 세트를 추가합니다. Migration Notes - montage 아이콘은 `@orioncactuscorp/ui/icons/montage` subpath에서 사용 - 기본 icon set은 `orioncactus` 유지 - montage 아이콘은 루트 barrel export에 포함하지 않음 - f84fb2a: SvgIcon과 공통 IconProps를 non-interactive visual primitive 계약으로 정리합니다. Migration Notes - `SvgIcon`과 아이콘 컴포넌트의 직접 `onClick` 사용 제거 - 클릭 가능한 아이콘은 `IconButton`, `Button` icon prop 또는 상위 interactive 컴포넌트 사용 - 의미 있는 아이콘은 `role="img"`와 `aria-label` 또는 `aria-labelledby` 사용 - 기본 아이콘 크기 `24px` 유지 ### Patch Changes - ac3e340: TextInput, TextArea, Select의 content slot primitive와 field control slot 사용 예시를 보강합니다. Migration Notes - TextInputContent public primitive 추가 - TextInput leading/trailing slot에서 TextInputContent 사용 권장 - TextInput leading/trailing slot selector를 `leading-content`, `trailing-content`로 정리 - SelectContent public primitive 및 Select leading/trailing slot 추가 - TextAreaContent public primitive 및 TextArea leading/trailing slot 추가 - TextInputContent, SelectContent, TextAreaContent icon variant padding 추가 - TextInputContent, SelectContent, TextAreaContent icon variant `aria-hidden` 기본값 추가 - TextArea `className`, `style`은 native textarea에 적용되며 wrapper 커스터마이징은 `containerClassName`, `containerStyle` 사용 - TextArea leading/trailing content는 TextArea content surface 내부에서 column layout으로 배치 - 기존 TextInput `leading`, `trailing`, `trailingInteractive` API 유지 - afdd3d3: TextInput, TextArea, Select의 content surface 클릭이 native control focus로 위임되도록 개선합니다. Migration Notes - TextInput, TextArea, Select의 content surface 클릭 시 내부 native control focus 보장 - interactive trailing content, native button/link/control, disabled control은 focus delegation 대상에서 제외 - Select는 브라우저가 `showPicker`를 지원하는 경우 content surface 클릭으로 native picker 열기 시도 - 234f2a1: TextInput, TextArea, Select의 field control surface contract를 통합합니다. Migration Notes - TextInput, TextArea, Select의 stroke/background/outline 내부 CSS 변수를 `--oc-field-control-*`로 통합 - invalid 기본 stroke에 1.5px inset stroke와 WebKit DPR 보정 적용 - invalid focus 상태는 기존 2.5px focus stroke contract 유지 - 234f2a1: Modal, Cell, Button의 기본 시각 contract를 보완합니다. Migration Notes - Modal과 Cell의 상속 텍스트 색상에 `--oc-color-theme-label-normal` 적용 - Button icon-only 상태에 정사각 control size 적용 - Button icon-only와 fullWidth 조합은 fullWidth contract 우선 유지 - 234f2a1: TextInput invalid 상태의 stroke 색상 투명도를 조정합니다. Migration Notes - TextInput invalid stroke에 `--oc-color-theme-status-negative` alpha 35 적용 - TextInput invalid focus outline 색상은 기존 negative 원색 유지 ### Migration Notes - 없음 ## 0.6.8 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.7..HEAD`_ #### Other - `5d403b0` 모달 바텀시트 터치 스크롤 보정 (#23) ### Patch Changes - 5d403b0: Modal BottomSheet의 scrollable body가 top에서 시작한 touch drag-dismiss 제스처 동안에만 rubber-band로 함께 움직이지 않도록 overscroll을 차단합니다. Migration Notes - 없음 ### Migration Notes - 없음 ## 0.6.7 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.6..HEAD`_ #### Other - `4ed1bc7` 모달 터치 스크롤 handoff 보정 (#22) ### Patch Changes - 4ed1bc7: Modal BottomSheet의 touch content drag가 scrollTop 0에서 native body overscroll을 먼저 차단하고, 내부 스크롤에서 sheet drag로 넘어갈 때 handoff 기준점을 재설정하도록 보정합니다. React passive touchmove 위임을 우회하기 위해 open bottom sheet에 non-passive native touchmove listener를 사용합니다. Migration Notes - 기존 Modal API 변경 없음 - touch device에서 scrollable Modal body를 아래로 끌 때 body rubber-band보다 sheet drag가 우선됨 - scrolled body는 내부 스크롤을 우선하며 top 도달 후 sheet drag로 전환됨 ### Migration Notes - 없음 ## 0.6.6 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.5..HEAD`_ #### Other - `6a0151c` 모달 터치 드래그 닫기 보정 (#21) ### Patch Changes - 6a0151c: Modal BottomSheet가 실제 touch 입력에서 pointer cancel 이후에도 header/handle 및 scrollTop 0 content drag-dismiss를 처리하도록 보정합니다. Migration Notes - 기존 Modal API 변경 없음 - `canCloseAttempt`/`onCloseAttempt` drag-dismiss guard 의미 유지 - mobile/touch content drag는 body scroll이 top인 경우 sheet drag로 전환되며, scrolled body는 내부 scroll을 우선 ## 0.6.5 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.4..HEAD`_ #### Other - `9bce29e` 컴포넌트 selector contract 정리 (#19) - `130ba90` 모달 바텀시트 드래그 개선 (#20) ### Patch Changes - 9bce29e: Legacy compatibility selector 목록과 제거 정책을 Agent artifact로 문서화합니다. Migration Notes - `agent/selector-contract.md`를 추가해 consumer customization selector, provider-owned 예외 attr, legacy compatibility attr replacement를 정리합니다. - legacy attr은 호환 출력으로만 유지하며 새 consumer styling target으로 사용하지 않습니다. - legacy attr 제거는 patch/minor에서 진행하지 않고, 명시적으로 승인된 breaking/major migration 후보로만 다룹니다. - 130ba90: Modal bottom sheet drag now applies resistant downward movement when close guards prevent drag dismissal. Migration Notes - `canCloseAttempt`가 `reason: 'drag-dismiss'`를 차단하는 BottomSheet는 drag 중 닫힘 거리까지 그대로 따라가지 않고 제한된 overshoot로 반응함 - drag-dismiss 허용 여부는 drag 세션 중 한 번 미리 확인되며, `onCloseAttempt`는 실제 release 또는 dismiss 경로에서만 호출됨 - 130ba90: ModalRoot now supports `canCloseAttempt` for side-effect-free close guards, and drag dismiss checks use it before release instead of calling `onCloseAttempt` during movement. Migration Notes - drag 중 close 가능 여부를 미리 제한해야 하는 consumer는 `onCloseAttempt`와 같은 조건을 `canCloseAttempt`에도 전달 - `onCloseAttempt`는 drag move 중에는 호출되지 않고 release 또는 실제 dismiss 경로에서만 호출 - 9bce29e: Modal bottom placement now uses `--oc-modal-bottom-top-clearance` to reserve top viewport space before sizing the sheet. Migration Notes - bottom Modal의 상단 여백 기준이 `--oc-space-section-padding-viewport-y`에서 `--oc-modal-bottom-top-clearance`로 변경됨 - 기본값은 `4rem`이며, 앱 header 높이를 반영해야 하는 consumer는 `--oc-modal-bottom-top-clearance: max(4rem, var(--app-header-height));` 형태로 override 가능 - 9bce29e: Agent artifact와 source guard가 component-owned selector의 `data-oc-*` namespace 정책을 명시합니다. Migration Notes - consumer customization은 `data-oc-component`, component-owned `data-oc-*` visual/state selector, `data-oc-part` 조합을 기준으로 합니다. - CSS Module hash class, legacy compatibility attr, 취약한 DOM depth selector에 의존하지 않도록 agent artifact를 갱신합니다. - component-owned selector attr과 고정 accessibility attr이 consumer rest props로 덮이지 않도록 source authoring 규칙을 명시합니다. - Base UI attr(`data-side`, `data-starting-style`, `data-ending-style`)와 foundation `data-theme`는 예외 계약으로 유지합니다. - 130ba90: Modal bottom sheet content drag now follows pointer-specific targets: touch can drag from content, while mouse and pen input drag from the sheet header or handle. Migration Notes - desktop/fine pointer에서 `drag="content"` BottomSheet의 body content 영역 드래그가 더 이상 sheet drag를 시작하지 않음 - mobile/touch에서는 기존 content drag를 유지하며, body scroll이 top이 아닐 때는 내부 스크롤을 우선함 - header/handle에서 시작한 drag는 body scroll lock 상태와 관계없이 sheet drag로 처리됨 - 9bce29e: Public component root elements expose stable `data-oc-component` selectors alongside existing `data-oc-part` slot selectors. Migration Notes - 신규 `data-oc-component` selector contract 추가 - 기존 API, className, `data-oc-part` contract 변경 없음 - 9bce29e: Public 컴포넌트가 size, variant, appearance, viewport, invalid 상태 같은 시각 prop을 안정적인 `data-oc-*` selector로 노출합니다. Migration Notes - `Button`, `Badge`, `TextButton`, `Divider`, `Loading`, `IconButton`, `BackgroundIconButton`, `Checkbox`, `Radio`, `Switch`, `Background`, `SectionHeader`, `MenuContent`, `ModalContent`가 `data-oc-size`, `data-oc-variant`, `data-oc-appearance`, `data-oc-viewport` 같은 시각 prop selector와 관련 상태 selector를 노출합니다. - `TextInput`, `TextArea`, `Select`가 invalid 상태일 때 `data-oc-invalid="true"`를 노출합니다. - `Checkbox`, `TextInput`, `ScrollArea`가 `data-oc-indeterminate`, `data-oc-interactive`, `data-oc-scroll`, `data-oc-scroll-container`, `data-oc-orientation`, `data-oc-state` 같은 namespaced internal selector를 노출하며 기존 호환 attr은 유지합니다. - `Loading`의 `role="status"`와 `aria-live="polite"` 기본 접근성 의미는 consumer prop으로 덮이지 않도록 유지합니다. - 기존 className, `data-oc-component`, `data-oc-part`, legacy `SectionHeader` `data-size` / `data-viewport` 계약은 유지합니다. ### Migration Notes - 없음 ## 0.6.4 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.3..HEAD`_ #### Other - `e35c0bf` 선택 컨트롤 드래그 방지 및 Modal 여백 정리 (#17) ### Patch Changes - e35c0bf: CheckMark, Checkbox, Radio 라벨의 WebKit 텍스트 선택을 방지합니다. Migration Notes - 없음 - e35c0bf: Modal body container의 세로 여백 contract를 `--oc-modal-space-y`, `--oc-modal-container-space-y`, `--oc-modal-container-space-top`, `--oc-modal-container-space-bottom`으로 분리하고 footer가 있을 때 container 하단 여백을 제거합니다. Migration Notes - Modal body container 기본 상단 여백이 header 높이만 반영하도록 변경됨 - footer가 있는 Modal body container의 하단 여백이 footer 영역으로 이관됨 ### Migration Notes - 없음 ## 0.6.3 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.2..HEAD`_ - 생성할 commit log 없음 ### Patch Changes - Agent migration artifact의 package version metadata를 실제 배포 버전과 동기화합니다. Migration Notes - 없음 ### Migration Notes - 없음 ## 0.6.2 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.1..HEAD`_ #### Other - `6acb6e4` Mobile-first SCSS 규칙 문서화 (#16) - `5c3eb69` VS Code CSS 변수 자동완성 artifact 추가 (#15) - `b252e2e` responsive foundation stops 분리 (#14) ### Patch Changes - b252e2e: responsive.config에서 typography와 spacing의 active stop range를 별도로 설정할 수 있도록 `$oc-responsive-typo-stops`, `$oc-responsive-space-stops` 옵션을 추가했습니다. spacing에는 두 mode Figma Viewport를 대응할 수 있는 `$oc-responsive-space-profile` stepped-points profile도 추가했습니다. Migration Notes - 기존 `$oc-responsive-stops`만 사용하는 consumer는 변경 없음 - typography 또는 spacing만 다른 responsive stop range가 필요하면 foundation별 stops 옵션 사용 - spacing token의 base/media point 출력이 필요하면 `$oc-responsive-space-profile` 사용 - `$oc-space-overrides`에서 stop 값을 `null`로 지정하면 해당 stop은 정의되지 않은 것으로 취급 - 5c3eb69: VS Code CSS variable 자동완성을 위한 `dist/vscode/oc-ui-vars.css` package artifact를 추가합니다. Migration Notes - `phoenisx.cssvar` 확장을 사용하는 consumer는 `.vscode/settings.json`의 `cssvar.files`에 `./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css`를 추가하면 설치된 oc-ui 버전의 foundation `--oc-*` token 자동완성을 사용할 수 있음 ### Migration Notes - 기존 `$oc-responsive-stops`만 사용하는 consumer는 변경 없음 - typography 또는 spacing만 다른 responsive stop range가 필요하면 foundation별 stops 옵션 사용 - spacing token의 base/media point 출력이 필요하면 `$oc-responsive-space-profile` 사용 - `$oc-space-overrides`에서 stop 값을 `null`로 지정하면 해당 stop은 정의되지 않은 것으로 취급 - `phoenisx.cssvar` 확장을 사용하는 consumer는 `.vscode/settings.json`의 `cssvar.files`에 `./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css`를 추가하면 설치된 oc-ui 버전의 foundation `--oc-*` token 자동완성을 사용할 수 있음 ## 0.6.1 ### Changes _Commit range: `@orioncactuscorp/ui@0.6.0..HEAD`_ #### Documentation - `c44b9fb` docs(skill): add ui release workflow - `c9ced18` docs(release): align agent artifact versions ### Patch Changes - Agent artifact version metadata를 package version과 동기화하고 consumer migration 예시 버전을 placeholder로 명확히 정리합니다. Migration Notes - 없음 ### Migration Notes - 없음 ## 0.6.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.5.3..HEAD`_ #### Documentation - `2e5ca55` docs: update SCSS grouping guidelines #### Maintenance - `db2c070` ci(release): gate release workflow by commit prefix #### Other - `e2774e5` Storybook 다크 모드 문서 테마 동기화 (#12) - `844ed2e` SectionHeader 컴포넌트 추가 (#11) - `282fabb` Modal 컴포넌트 추가 및 BottomSheet 인터랙션 정리 (#13) ### Minor Changes - 282fabb: `Modal` compound component를 추가합니다. Migration Notes - 신규 API: `Modal`, `ModalRoot`, `ModalTrigger`, `ModalContent`, `ModalHeader`, `ModalBody`, `ModalFooter`, `ModalClose` - 신규 close guard API: `ModalRoot`의 `onCloseAttempt`는 닫기 버튼, backdrop, outside press, escape key, drag dismiss 같은 닫힘 시도를 하나의 contract로 전달하며 `false`를 반환하면 닫힘을 막습니다. - 신규 `data-oc-*` contract: `data-oc-part="backdrop|viewport|bottom-fill|surface|header|handle|header-inner|header-leading|header-title|header-trailing|close|body|body-container|footer"` - 신규 CSS 변수 contract: `--oc-modal-header-height`, `--oc-modal-footer-height`, `--oc-modal-peek-height`, `--oc-modal-sheet-height`, `--oc-modal-translate-y`, `--oc-modal-overshoot-fill-height`, `--oc-modal-backdrop-opacity` - `variant="adaptive"`는 모바일에서 BottomSheet, 데스크톱에서 Popup 형태로 동작합니다. - BottomSheet는 `md` 이하에서 size와 무관하게 full width로 표시되고, `min md` 이상에서는 Popup과 동일한 size별 max-width를 사용합니다. - `ModalContent`의 기본 drag 동작은 `content`이며, BottomSheet에서 본문 영역을 드래그해 이동할 수 있습니다. - BottomSheet의 `presentationState="peeked"`는 modal trap을 해제한 docked panel 상태이며, 실제 닫힘은 `open={false}`입니다. `peekable`을 켠 경우에만 닫기 전에 peeked 상태로 걸치며, `peekHeight`를 생략하면 Header 높이를 peek 높이로 사용합니다. - BottomSheet는 최대로 열린 상태에서 위로 드래그하거나 peeked 상태에서 아래로 드래그하면 저항감 있는 overshoot를 제공하고, release 시 유효한 snap 위치로 복귀합니다. - BottomSheet overshoot fill은 BottomSheet surface와 동일한 size별 width를 따릅니다. - BottomSheet drag 중 backdrop opacity는 inline `opacity`가 아니라 `--oc-modal-backdrop-opacity`로 제어되어 close ending transition을 덮지 않습니다. - BottomSheet를 짧게 빠르게 아래로 드래그하면 닫히지 않고 원위치로 복귀하며, 닫힘 거리까지 내려간 경우에는 하단으로 settle한 뒤 닫힙니다. - `onCloseAttempt`가 BottomSheet drag dismiss를 막으면 닫히지 않고 기존 위치로 복귀합니다. `disablePointerDismissal`을 켜면 drag dismiss를 close 후보로 보지 않고 아래쪽 resistant overshoot로 처리합니다. - BottomSheet에 `snapPoints`가 있으면 빠른 drag release는 기본적으로 방향 기준 인접 snap point로 이동하되, drag 위치가 여러 snap point를 지나친 경우 가장 멀리 지나친 snap point로 이동합니다. - BottomSheet drag release transition은 vaul drawer와 동일한 `0.5s cubic-bezier(0.32, 0.72, 0, 1)` easing을 사용합니다. - Popup surface의 닫힘 transition은 `0.2s ease-in`을 사용하며, backdrop과 BottomSheet motion은 기존 easing을 유지합니다. - Header는 content 위에 overlay되고, Background의 `strong` variant와 `elevated-normal` back color를 사용해 compact backdrop blur를 제공합니다. - `Body` ScrollArea vertical scrollbar는 Header overlay 아래에서 시작합니다. - Header handle은 BottomSheet placement에서 `drag="handle"` 또는 `drag="content"`일 때만 렌더링됩니다. - `Footer`는 향후 ActionArea 도입을 위한 하단 액션 슬롯으로 `Body` 외부에 렌더링됩니다. - 844ed2e: `SectionHeader` 컴포넌트를 추가합니다. - `size`: `large` | `medium` | `small` | `xsmall` (기본값: `medium`) - `viewport`: `auto` | `mobile` | `desktop` (기본값: `auto`) — md 브레이크포인트 기준 자동 반응형, 또는 고정 모드 - `as`: `h1`~`h6` heading 태그 override (size별 기본값: large→h2, medium→h3, small→h4, xsmall→h5) - `headingSlot`: 제목 옆 슬롯 (max-height를 heading line-height에 맞춰 자동 정렬) - `trailingSlot`: 우측 슬롯 (동일) - `description`: 부가 설명 (`xsmall`에서는 렌더링되지 않음) ### Migration Notes - `Modal`, `SectionHeader` 신규 public API가 추가됩니다. - `ModalRoot`의 `onCloseAttempt`, `ModalContent`의 BottomSheet 관련 prop, Modal CSS 변수와 `data-oc-*` slot contract를 consumer에서 사용할 수 있습니다. - 기존 API 제거 또는 필수 consumer 수정 사항은 없습니다. ## 0.5.3 ### Changes _Commit range: `@orioncactuscorp/ui@0.5.2..HEAD`_ #### Fixes - `f7a0ea1` fix(fieldset): align layout spacing with content slot ### Patch Changes - f7a0ea1: FieldsetContent를 추가하고 Fieldset의 기본 layout spacing을 Field와 같은 label/control gap contract로 정렬합니다. Migration Notes - `FieldsetContent`를 public slot으로 추가합니다. - `Fieldset`은 native `fieldset`/`legend` 렌더링과 Safari 호환성을 유지하면서 legend 이후 children을 content slot으로 감싸 `Field`와 동일한 `--oc-space-item-gap-xsmall` spacing contract를 사용합니다. ### Migration Notes - `FieldsetContent`를 public slot으로 추가합니다. - `Fieldset`은 native `fieldset`/`legend` 렌더링과 Safari 호환성을 유지하면서 legend 이후 children을 content slot으로 감싸 `Field`와 동일한 `--oc-space-item-gap-xsmall` spacing contract를 사용합니다. ## 0.5.2 ### Changes _Commit range: `@orioncactuscorp/ui@0.5.1..HEAD`_ #### Fixes - `64ade6f` fix(fieldset): align legend label styling ### Patch Changes - 64ade6f: FieldLegend의 시각 스타일을 FieldLabel과 같은 label contract로 정렬합니다. Migration Notes - `FieldLegend`는 semantic element로 ``를 유지하지만, CSS Module slot class는 FieldLabel과 같은 `label` 스타일을 사용합니다. - 기존 `FieldLegend`의 typography weight와 label color가 `FieldLabel`과 동일하게 바뀝니다. ### Migration Notes - 없음 ## 0.5.1 ### Changes _Commit range: `@orioncactuscorp/ui@0.5.0..HEAD`_ #### Other - `4f920c3` oc-website 마이그레이션 지원 컴포넌트 정리 (#10) ### Patch Changes - 4f920c3: ScrollArea의 root/window 스크롤 호환성을 개선하고 터치 디바이스 fallback을 안정화합니다. Migration Notes - 기존 ScrollArea API 변경 없음 - root 모드에서 container overflow가 window 스크롤을 가로막지 않도록 조정 - ScrollArea scrollbar selector는 legacy `[data-label='scrollbar']`가 아니라 `[data-oc-part='scrollbar-vertical']`, `[data-oc-part='scrollbar-horizontal']` contract를 기준으로 갱신 필요 - 4f920c3: 배포 산출물에서 React client component directive가 유지되도록 빌드 후처리를 추가합니다. Migration Notes - 없음 - 4f920c3: FieldLegend에 required 표시 contract를 추가합니다. Migration Notes - `FieldLegend`는 `required` prop을 받아 `[data-oc-part='required-mark']` slot으로 필수 표시를 렌더링합니다. - 여러 control을 하나의 필수 그룹으로 표현하는 경우 `FieldLabel`이 아니라 `Fieldset`과 `FieldLegend required`를 사용해야 합니다. - 실제 native validation 의미는 각 필수 control의 `required` attribute로 전달해야 합니다. - 4f920c3: FieldLabel에 required 표시 contract를 추가합니다. Migration Notes - `FieldLabel`은 `required` prop을 받아 `[data-oc-part='required-mark']` slot으로 필수 표시를 렌더링합니다. - 실제 native validation 의미는 기존처럼 `TextInput`, `TextArea`, `Select` 같은 control의 `required` attribute로 전달해야 합니다. ### Migration Notes - 없음 ## 0.5.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.4.2..HEAD`_ #### Features - `a4a3db5` feat(tokens): add SCSS theme selection config #### Other - `13ab787` website 공용 컴포넌트 승격 (#7) - `bd6ef71` SCSS 테마 selection config 대응 (#8) ### Minor Changes - 13ab787: website 공용 UI 후보를 package component surface로 확장합니다. - `Badge`, `Background`, `Divider`, `Loading`, `Cell`, `CellItem` 추가 - `Field`, `FieldLabel`, `FieldControl`, `FieldMessage`, `FieldErrorMessage` 추가 - `Fieldset`, `FieldLegend`, `FieldGroup` 추가 - `Checkbox`, `CheckMark`, `Radio`, `Switch`, `TextInput`, `TextArea`, `Select` 추가 - `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuItem`, `MenuSeparator` 추가 - `TooltipProvider`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent` 추가 - `ScrollArea`, `ScrollAreaContainer` 추가 - `Background`의 `frontColor`, `backColor`, `Cell`의 `padding`, `Divider`의 `variant` prop 추가 - `Divider`는 `variant`만 public appearance prop으로 제공합니다. - `Loading`의 `small`, `medium`, `large`, `custom` size contract 추가 - `Checkbox`의 `indeterminate` 시각 상태가 `checked`보다 우선하도록 보정 - `Switch` track을 `Checkbox`와 같은 body1-height control slot 기준으로 정렬 - `Switch` interaction layer를 track 크기에 맞추고 thumb stacking과 pointer event 처리를 보정 - `TextInput`, `TextArea`, `Select` stroke와 focus outline을 inset box-shadow 기반으로 보정 - `IconCaretDown`, `IconCaretUp`을 추가하고 `Select` indicator를 caret icon slot 구조로 보정 - `inset-stroke` SCSS mixin을 추가하고 fractional surface stroke 보정을 중앙화 - `Cell`, `MenuItem`의 인접 item separator를 structural border 기반으로 보정 - `TextField`는 `TextInput`, `TextareaField`는 `TextArea`, `SelectField`는 `Select`로 component/export 이름 확정 - `Button`에 `loading` prop 추가 및 loading 중 activation 차단 - `Button` loading indicator의 색상, 크기, 중앙 정렬을 버튼 state/size contract에 맞게 보정 - `Button` anchor loading 중 middle-click activation 차단 - `FieldControl`의 ARIA 연결이 실제 렌더링된 label/message만 참조하도록 보정 - `MenuTrigger`가 기본 trigger 렌더링에서도 `nativeButton` prop을 전달하도록 보정 - `ScrollArea`의 global scrollbar style cleanup을 multi-instance 기준으로 보정 - `@base-ui-components/react`를 runtime dependency로 추가 ### Migration Notes - website 원본의 layered background, badge overlay, loading stroke animation, custom scrollbar, touch tooltip 동작을 package component contract로 유지합니다. - `Loading` 기본 크기는 website 원본과 같은 `large`이며, `large=48px`, `medium=24px`, `small=16px`입니다. - `Loading`은 기본적으로 `currentColor`를 따르며, `Button` 내부 loading indicator는 버튼 size와 disabled state contract를 따릅니다. - `Checkbox`는 `checked`와 `indeterminate`가 동시에 참일 때 mixed 표시를 우선합니다. - `CheckMark`는 indeterminate 상태가 없는 check-only checkbox control입니다. - `Switch` label은 `Checkbox`와 같은 `data-oc-part="content"` 내부에 렌더링되며 control은 body1-height 기준으로 정렬됩니다. - `Switch`의 interaction layer는 track과 같은 크기이며, thumb는 interaction 위에 렌더링되지만 pointer event를 가로채지 않습니다. - `TextInput`, `TextArea`, `Select`는 border 대신 inset `box-shadow`로 기본 stroke와 active outline을 표현합니다. - `Checkbox`, `Radio`의 1.5px surface stroke는 `inset-stroke` SCSS mixin을 통해 WebKit/DPR 보정을 적용합니다. - `Cell`, `MenuItem`의 item 사이 separator는 `box-shadow`가 아니라 인접 item의 `border-block-start`로 표현합니다. - `TextField`, `TextareaField`, `SelectField` 이름은 제공하지 않습니다. 각각 `TextInput`, `TextArea`, `Select`를 사용해야 합니다. - `Divider`의 선 색상 강도는 `variant`를 사용해야 합니다. - `FieldControl`은 `FieldLabel`, `FieldMessage`, `FieldErrorMessage`가 실제 렌더링된 경우에만 해당 id를 ARIA로 연결합니다. - website의 `InputGroup`, `CheckboxGroup`, `RadioGroup`은 canonical API로 승격하지 않습니다. - 단일 control label/helper/error 연결은 `Field` compound family를 사용해야 합니다. - checkbox/radio/switch option 묶음은 `Fieldset` 또는 migration alias인 `FieldGroup`을 사용해야 합니다. - 기존 `TextInput` wrapper는 `Field`와 `TextInput` 또는 `TextArea` 조합으로 치환해야 합니다. - `Menu`와 `Tooltip`은 Base UI 기반이지만 Base UI 타입을 consumer API로 직접 노출하지 않습니다. - a4a3db5: color theme 선택 SCSS 설정 추가 `foundations/color.config` 모듈을 추가해 SCSS 빌드 단에서 light/dark theme emit 여부와 `prefers-color-scheme` 미디어쿼리 사용 여부를 선택할 수 있도록 한다. - `$oc-color-themes` (`!default`: `(light, dark)`) — 둘 중 하나만 두면 해당 theme의 `:root`/`[data-theme]` ruleset만 emit. 빈 값이거나 `light`/`dark` 외 값이 들어오면 `@error`. - `$oc-color-system-preference` (`!default`: `true`) — `false`로 설정하면 `@media (prefers-color-scheme: dark)` ruleset이 빠지고 attribute 토글만 남음. `themes`가 `(dark)` 단독이면 `:root`가 곧장 dark이므로 이 옵션은 무시됨. 기존 consumer는 변경 없음. 사용 예: ```scss @use '@orioncactuscorp/ui/scss/foundations/color.config' with ( $oc-color-themes: ( light, ) ); @use '@orioncactuscorp/ui/scss/index'; ``` ### Migration Notes - 없음 ## 0.4.2 ### Changes _Commit range: `@orioncactuscorp/ui@0.4.0..HEAD`_ #### Fixes - `bd6fadb` fix(tokens): compile alpha theme variables ### Patch Changes - Button primary interaction overlay를 `0.3.1` 동작에 맞춥니다. ### Migration Notes - 없음 - Agent migration manifest의 package version 표기를 `0.4.2`로 맞춥니다. ### Migration Notes - 없음 ## 0.4.1 ### Changes _Commit range: `@orioncactuscorp/ui@0.4.0..HEAD`_ - 생성할 commit log 없음 ### Patch Changes - Foundation color theme CSS에서 `oc-alpha(...)` Sass helper가 raw CSS 함수처럼 남지 않도록 컴파일합니다. ### Migration Notes - 없음 - Agent migration manifest의 package version 표기를 `0.4.1`로 맞춥니다. ### Migration Notes - 없음 ## 0.4.0 ### Changes _Commit range: `@orioncactuscorp/ui@0.3.1..HEAD`_ #### Features - `60b738e` feat(button): add Figma solid and outlined variants - `a47fa46` feat(button): add default surface - `fc1f090` feat(typo): add default font family token - `b30d374` feat(tokens): add global color palette - `3d99493` feat(tokens): refine theme label colors - `310a7c5` feat(tokens): add accent global color steps - `a5e4766` feat(tokens): add accent and inverse theme colors - `44b7d17` feat(tokens): add static transparent tokens #### Fixes - `8d97f6e` fix(button): expose default variant #### Refactors - `de21eca` refactor(typo): make font family token configurable - `56fcd31` refactor(tokens): migrate theme color aliases - `ce5e2fc` refactor(tokens): align status theme aliases - `36625a1` refactor(scss): add alpha color helper - `e5c6664` refactor(button): align button family prop contracts #### Documentation - `1dd9b2a` docs: document responsive foundation profiles (#5) - `8ba6ba9` docs: remove completed todo items - `d6f3b5c` docs: organize component expansion TODOs - `bb2d6eb` docs(figma): document design translation pipeline - `d3044ed` docs(figma): add semantic DOM mapping guidance - `b56f087` docs(agent): define consumer convention migration - `3e8a298` docs(agent): ship consumer convention artifacts - `e33580f` docs(agent): link consumer convention workflow - `99e0984` docs(agent): add consumer instruction prompts - `ed018b1` docs(agent): add component audit guidance - `779acb0` docs(storybook): show Button source examples - `b8511d3` docs(agent): add Figma token guardrails - `2a65e90` docs(todo): note Button loading follow-up - `9ccda7e` docs(agent): add montage reference priority - `7216df4` docs(tokens): update color token migration guidance - `e7e9a69` docs(agents): document release changelog phases - `a65971e` docs(tokens): prune completed color token notes - `ae28782` docs(agent): clarify component reference priority - `593d51d` docs(agents): document PR changeset policy - `9db0656` docs(agents): document component API contracts #### Maintenance - `0576874` chore(release): generate changelog during version bump - `b7ab8f1` chore(stylelint): align SCSS namespace rule #### Other - `8512578` 소비자 시나리오 프리뷰 추가 (#6) ### Patch Changes - Button, TextButton, IconButton, BackgroundIconButton props contract를 native element attribute 기반으로 정리합니다. React 19+ ref prop contract에 맞춰 button family의 forwardRef wrapper를 제거합니다. ### Migration Notes - `0.3.1`에서 `0.4.0`으로 업데이트할 때는 color token contract 변경을 확인해야 합니다. - `Button`에 `appearance`, `variant`, `size`, `fullWidth`, `leadingIcon`, `trailingIcon`, `icon` prop이 추가되었습니다. - `Button`의 기본 `variant`는 `primary`가 아니라 `default`입니다. 기존 primary surface가 필요하면 `variant='primary'`를 명시해야 합니다. - `Button`의 `variant='secondary'`는 `appearance='solid'`에서 `primary`로 fallback되고, `appearance='outlined'`에서 secondary outlined surface로 동작합니다. - `Button`의 `children`은 optional이 되었고 icon-only 사용이 가능합니다. `icon`만 사용하는 경우 `aria-label` 또는 `aria-labelledby`를 함께 제공해야 합니다. - `href`가 있는 disabled `Button`은 anchor에 `aria-disabled='true'`와 `tabIndex={-1}`를 적용하고 click 기본 동작을 막습니다. - `href`가 있는 Button은 anchor native attribute를, 없는 Button은 button native attribute를 기준으로 타입 검사합니다. - TextButton은 `as` 값에 맞는 anchor/button/span native attribute를 기준으로 타입 검사합니다. - IconButton과 BackgroundIconButton은 button native attribute를 기준으로 타입 검사합니다. - button family ref는 React 19+의 function component ref prop으로 전달합니다. - `--oc-color-theme-accent-blue` 참조는 `--oc-color-theme-accent-background-blue`로 교체해야 합니다. - `--oc-color-theme-dimmer` 참조는 `--oc-color-theme-material-dimmer`로 교체해야 합니다. - `--oc-color-theme-status-positive`, `--oc-color-theme-status-cautionary`, `--oc-color-theme-status-negative`는 accent background alias를 기준으로 정렬되었습니다. 상태 색상을 직접 override하는 consumer는 신규 accent background token과 함께 의도한 값이 유지되는지 확인해야 합니다. - 신규 accent background/foreground theme token, inverse theme token, global color palette, accent global color step, static transparent token이 추가되었습니다. - PR #6의 consumer scenario preview 추가는 package runtime migration을 요구하지 않습니다. ## 0.3.1 - responsive foundation의 stepped emitter 전환 지점 계산을 수정했습니다. ## 0.2.0 - `TextButton`, `BackgroundIconButton` 컴포넌트 추가 - `orioncactus` icon set 전체 제공 및 `@orioncactuscorp/ui/icons/orioncactus` subpath export 추가 - root barrel은 기본 API surface 유지를 위해 `IconDefault`만 유지 - `IconButton`, `BackgroundIconButton`의 icon `viewBox` 보존 동작 개선 ## 0.1.1 - `Interaction` self-driven overlay 정리 및 keyboard active feedback 보강 - CSS module build artifact 정리 순서 개선 - website consumer 검증을 위한 GitHub Packages patch release ## 0.1.0 - `@orioncactuscorp/ui` 초기 private package 릴리스 - Foundation tokens, reset, SCSS mixins, responsive typography pipeline 추가 - `Button`, `IconButton`, `SvgIcon`, `Interaction`, `IconDefault` 제공 - `orioncactus` 기본 icon set 및 `material-rounded` placeholder subpath 추가 - Storybook, Vitest, Playwright, Next.js example 기반 검증 구성