# Changelog ## 1.25.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.25.0-next.0..HEAD`_ #### Other - `2d748e5` 메뉴 표면 경계 밖 넘침 클리핑 수정 (#495) - `2a50d3c` 둥근 표면 안 ScrollArea 스크롤바의 모서리 곡선 회피 (#496) - `c75ca61` Reveal 진입 정책 통일과 본문·카드 영역 분리 (#497) ### Minor Changes - c75ca61: Reveal과 RevealGroup의 기본 in-view 진입 시점을 viewport 높이 60%로 통일하고 ScrollArea 내부 스크롤 영역에 자동 적용합니다. iframe에서도 콘텐츠가 속한 문서 기준을 유지합니다. 도달 불가능한 시작점에서는 콘텐츠를 즉시 표시하고, 자동 등장 중 설정 변경으로 재시작하지 않습니다. reduced-motion에서는 지연 없이 짧은 opacity 전환을 사용합니다. Migration Notes: `1.25.0-next.0` 대비 단독 Reveal과 RevealGroup, 해당 토큰을 참조하는 소비자 모두 기본 등장 시간이 1,000ms에서 600ms로 변경됩니다. RevealGroup의 Content와 Items는 각자의 60% 진입선을 기준으로 시작합니다. Items는 본문 이후 최소 여백도 충족해야 시작하며, 화면 아래에서 시차를 미리 소진하지 않습니다. Group의 contentGap 기본값은 400ms에서 80ms로 줄이고 카드 간격인 stagger는 160ms를 유지합니다. threshold를 생략한 단독 Reveal의 기존 15% 면적 교차 기준이 60% 높이 기준으로 바뀝니다. 명시한 threshold는 기존 면적 모드를 유지하며 Provider.threshold는 호환을 위해 보존하되 deprecated입니다. Provider에 명시한 trigger는 Group에도 적용되므로 Group만 별도 동작이 필요하면 인스턴스에서 trigger를 지정하세요. timing.contentGap과 timing.stagger도 duration처럼 pace와 전역 duration factor를 곱합니다. 명시한 timing 값은 normal pace와 전역 factor 1에서 동일하게 적용됩니다. - 2a50d3c: 둥근 표면을 채우는 ScrollArea의 스크롤바가 모서리 곡선을 피해 시작하고 끝나도록 `--oc-scroll-area-radius`를 추가합니다. 스크롤바와 곡선 사이 간격은 옆면 간격(`--oc-scroll-area-padding`)과 같게 유지하며, header·footer chrome이 모서리를 덮으면 기존 chrome 위치를 그대로 씁니다. Menu와 popup Modal은 내부에서 표면 반경을 전달하므로 헤더·푸터가 없는 쪽의 스크롤바가 짧아집니다. `oc-corner-inset($outer-radius, $radius, $gap: 0px)` SCSS 함수를 `scss/mixins/radius`에 추가합니다. `oc-inner-radius`의 반대 방향으로, 둥근 컨테이너 안에서 자기 반경이 있는 요소가 모서리 곡선과 일정 간격을 유지하는 위치를 계산합니다. Migration Notes - 없음. `--oc-scroll-area-radius` 기본값은 `0`이라 직접 쓰는 ScrollArea의 스크롤바 위치는 바뀌지 않습니다. - 둥근 카드를 꽉 채우는 ScrollArea에 보정을 적용하려면 그 ScrollArea 자신에 `--oc-scroll-area-radius`를 지정합니다. 조상 요소에 지정하면 상속되지 않습니다. - 3a8fa9a: `ActionAreaLayout` footer 배경을 스크롤 상태에 따라 켜고 끄던 방식에서, footer가 항상 그리는 `ScrollAreaEdge`로 바꿉니다. 끝에서 빠르게 위로 스크롤할 때 배경이 돌아오기 전에 버튼 밑으로 콘텐츠가 비치던 문제를 없앱니다. - `ActionAreaLayout.Footer`가 마지막 자식으로 `ScrollAreaEdge`(`data-oc-part="scroll-edge"`)를 그립니다. 버튼 영역은 항상 덮고, 위쪽 padding 구간에서 서서히 사라지며, 아래에 남은 콘텐츠 거리만큼만 0부터 이어서 위로 번집니다. 스크롤 중 렌더링은 일어나지 않습니다. - `ActionAreaLayout.Footer`에 `scrollEdgeVariant="auto | none | fade | progressive-blur"`(기본 `auto`: `scroll="document"`는 `fade`, `contained`는 `none`)와 `scrollEdgeAppearance="soft | hard"`(기본 `soft`)를 추가합니다. `ModalFooter`와 같은 축에 레이아웃 스크롤 방식을 따르는 `auto`를 더했습니다. `hard`이면 아래에 콘텐츠가 남은 동안 `data-oc-part="scroll-edge-divider"` 구분선이 보이고, footer에 `data-oc-overflow-y-end`가 붙습니다. 구분선은 `divider="normal | neutral | alternative | none"`(기본 `normal`, `ModalFooter`와 같은 축)로 정합니다. `ActionAreaLayoutFooterScrollEdgeVariant` 타입을 추가합니다. - footer의 직속 `ActionArea`가 비어 있으면 edge를 그리지 않습니다. `extraContent`는 예외 없이 같은 규칙을 따릅니다. - `scroll="document"`의 번짐 거리는 레이아웃 콘텐츠 끝에서 footer 아래 끝까지로 잽니다. 레이아웃을 담은 어떤 스크롤 컨테이너에도 반응합니다. - footer 안의 `ActionArea`는 스크롤 여부와 관계없이 위쪽 padding을 유지합니다. 스크롤될 때 그 padding을 body 아래 여백으로 옮기던 동작을 제거합니다. - 단독 `ActionArea`의 `background`는 자기 영역을 단색으로 채우는 것으로 바뀝니다. 위쪽으로 번지던 고정 그라디언트는 제거됩니다. - `contained`에서는 body가 footer 위에서 끝나므로 콘텐츠가 footer 밑으로 지나가지 않습니다. 이 점은 `document`와 다릅니다. - `ActionArea`가 `caption`과 `actions`(또는 `compact-row`)를 새 `data-oc-part="action-group"`으로 묶습니다. 간격은 margin 대신 flex `gap`으로 정합니다. extra와 묶음 사이는 `--oc-action-area-gap`, caption과 버튼 사이는 `--oc-space-item-gap-medium`입니다. Migration Notes - `ActionAreaLayout.ActionArea`의 `background` prop을 제거합니다. `background="auto"`와 `background`(`true`)는 지우면 됩니다. `scroll="document"`에서는 `fade` edge가 기본이고, `contained`에서는 body가 bar 위에서 끝나므로 기본으로 edge를 그리지 않습니다. contained에서 스크롤 중 bar 위 번짐을 유지하려면 Footer에 `scrollEdgeVariant="fade"`를 지정합니다. `background={false}`는 ``으로 옮깁니다. `ActionAreaLayoutActionAreaBackground` 타입을 제거합니다. - footer 배경색은 `--oc-action-area-background-color`를 `ActionAreaLayout.Footer`나 그 조상에 지정합니다. layout 안의 `ActionArea`에 지정한 값은 footer 배경에 닿지 않습니다. internal이던 `--oc-action-area-layout-background-color`, `--oc-action-area-layout-gradient-overlap`, `--oc-action-area-layout-gradient-size`, `--oc-action-area-layout-body-padding-block-end`, `--oc-action-area-background-bleed`, `--oc-action-area-background-gradient-size`를 제거합니다. - `data-oc-background="true"`는 이제 단독 `ActionArea`의 고정 채우기만 뜻합니다. layout footer의 `ActionArea`에는 붙지 않습니다. 스크롤 상태 판단에는 footer의 `data-oc-overflow-y-end`를 씁니다. - `data-oc-scrollable="true"`일 때 footer `ActionArea`가 `--oc-action-area-padding-block-start: 0`을 받고 body가 아래 여백을 갖던 규칙을 제거합니다. 이 동작에 맞춘 스타일이 있다면 지웁니다. - 단독 `ActionArea`를 `absolute`나 `fixed`로 띄우고 `background`로 스크롤 콘텐츠를 가리던 경우, 위쪽 그라디언트가 사라집니다. 같은 모습을 내는 대체는 없으며, 스크롤 콘텐츠 위의 bar는 `ActionAreaLayout`(고정 높이 영역은 `contained`, 페이지 스크롤은 `scroll="document"`)이나 `ScrollArea`의 `ScrollAreaEdge` 패턴으로 옮깁니다. - `extraContent`가 있는 `ActionArea`의 불투명 배경과 위쪽 테두리를 제거합니다. `background`와 footer edge가 다른 경우와 같은 규칙으로 정합니다. 단단한 경계와 구분선이 필요하면 `ActionAreaLayout.Footer`에 `scrollEdgeAppearance="hard"`를, 단독 `ActionArea`에는 `background`와 직접 둔 `Divider`를 씁니다. `ModalFooter`·`FloatingWindowFooter` 안의 extra `ActionArea`도 불투명하지 않게 되어 footer 자체 edge가 보입니다. - `ActionAreaLayoutScrollState` 타입은 더 이상 쓰이지 않아 deprecated로 표시합니다. - `caption`, `actions`, `compact-row`는 이제 `ActionArea` 루트의 직속 자식이 아니라 `data-oc-part="action-group"` 안에 있습니다. 직속 자식 선택자(`[data-oc-component="action-area"] > [data-oc-part="actions"]` 등)를 쓰고 있다면 하위 선택자로 바꾸거나 `action-group`을 거치도록 고칩니다. - `--oc-action-area-gap`은 이제 extra와 action 묶음 사이 간격 전체입니다. 기본값이 `--oc-space-item-gap-small`에서 버튼 영역 상하 padding으로 바뀌고, padding을 더하던 계산은 없어집니다. 기본 간격은 `item-gap-small + padding`에서 `padding`으로 줄어듭니다. 이 변수를 지정하고 있었다면 원하는 전체 간격으로 다시 지정합니다. - 4403c71: `ActionAreaLayout`이 페이지(문서) 스크롤 위에서 footer를 화면 아래에 붙여 두는 `scroll='document'` 모드를 추가합니다. - `ActionAreaLayout`에 `scroll='contained' | 'document'` prop(기본 `contained`)과 `ActionAreaLayoutScroll` 타입을 추가합니다. 루트는 현재 값을 `data-oc-scroll`로 노출합니다. - `document`에서는 body가 페이지 흐름에 남고 footer가 `position: sticky`로 뷰포트 아래 끝에 붙습니다. footer와 fade는 레이아웃이 놓인 컬럼 폭을 따르고, 레이아웃이 끝나면 footer가 풀려 뒤따르는 콘텐츠(페이지 footer 등) 위에 놓입니다. - `document`에서 `--oc-action-area-layout-block-size`는 고정 높이가 아니라 최소 높이로 쓰여, 콘텐츠가 짧아도 footer가 그 높이의 아래 끝에 놓입니다. - 콘텐츠가 짧을 때 모바일에서는 footer가 그 최소 높이의 아래 끝에 놓이고, `md` 이상에서는 최소 높이는 유지한 채 footer가 콘텐츠 바로 뒤에 놓이며 남는 공간은 footer 아래로 갑니다. 콘텐츠가 길면 두 환경 모두 footer가 뷰포트 아래에 붙습니다. - footer 배경은 레이아웃 끝까지 남은 거리에 따라 위로 번지며, 스크롤 중 렌더링이 일어나지 않습니다. 배경 계약은 footer `ScrollAreaEdge` 변경의 Migration Notes를 함께 확인합니다. - 스크롤바를 화면 오른쪽 끝에 두려면 `ScrollArea root` 안에서 사용합니다. `ScrollArea root` 없이 브라우저 기본 스크롤바와도 동작합니다. Migration Notes - `scroll` 기본값은 `contained`이며 루트에 `data-oc-scroll="contained"` attribute가 추가됩니다. footer 배경과 구조 변경은 footer `ScrollAreaEdge` Migration Notes를 함께 확인합니다. - 1a78b07: Menu가 가용 공간 안에서 크기를 제한하고 ScrollArea로 많은 항목을 스크롤하도록 개선합니다. 일반 문자열 제목은 자동 중간 말줄임하며 원문 접근성 이름과 문자 검색을 보존합니다. Migration Notes - 문자열 제목의 기본 표시가 중간 말줄임으로 바뀝니다. 실제로 잘린 제목은 hover·키보드 포커스에서 원문 툴팁을 제공합니다. 커스텀 ReactNode content의 내부 표현은 소비자가 소유합니다. - `--oc-menu-max-inline-size`(기본 `24em`), `--oc-menu-max-block-size`(기본 화면 가용 높이)를 MenuContent className에서 조절할 수 있습니다. 메뉴 표면과 기존 container 사이에 ScrollArea viewport가 추가되므로 직계 자식에 의존하는 스타일은 공개 selector 계약을 확인하세요. - 스크롤 가능한 메뉴의 일반 터치 pan은 내부 스크롤로 동작합니다. trigger hold에서 이어진 드래그 선택과 짧은 메뉴의 기존 선택 동작은 유지합니다. - HistoryNavigationButton도 공통 Menu의 말줄임과 스크롤을 사용합니다. 툴팁은 터치의 탭 선택 동작을 변경하지 않습니다. - 91c0346: `oc-inner-radius($outer-radius, $inset)` SCSS helper를 추가하고 Menu와 SegmentedControl에 적용 - 바깥 radius에서 실제 inset을 빼고 음수 결과를 `0`으로 제한하며, radius factor는 중복 적용하지 않음 - Menu의 셀 강조 배경과 focus ring radius를 popup radius와 실제 여백에서 파생하도록 변경 - SegmentedControl의 기존 radius 계산과 시각 결과 유지 Migration Notes - 필수 변경 없음 - Menu의 기본 radius factor와 padding에서는 기존 모양을 유지하며, factor 또는 `--oc-menu-content-padding`을 조정한 경우 셀 radius가 바깥 surface 곡률에 맞춰 변경됨 - 새 helper는 `@orioncactuscorp/ui/scss/mixins/radius`에서 import 가능 - add1db3: `MenuTrigger`에 길게 눌러 메뉴를 여는 `openOnHold`를 추가합니다. - `openOnHold`를 준 트리거는 탭·클릭·Enter·Space로 render한 control의 동작을 실행하고, 메뉴는 브라우저 뒤로 가기 버튼처럼 지름길로 엽니다. 손가락·펜·마우스 주 버튼으로 hold 판정 시간(`--oc-motion-duration-hold`, 기본 0.65초)을 채우면 메뉴가 열리고, 떼지 않은 채 항목으로 옮겨 놓으면 그 항목을 고릅니다. 판정 전에 움직이면 취소되고(터치는 페이지 스크롤로 양보), 판정 뒤에는 페이지가 스크롤되지 않습니다. 항목에 닿지 않고 떼면 메뉴는 열린 채로 남습니다. - `contextmenu` 이벤트(오른쪽 클릭, Control-클릭, 메뉴 키, VoiceOver VO+Shift+M)와 Shift+F10으로 바로 열리며, 키보드·보조기기는 이 경로를 씁니다. 별도 단축키와 `aria-keyshortcuts`는 없습니다. 링크 trigger는 `contextmenu`로 뜨는 브라우저 링크 메뉴를 유지합니다. iOS는 hold 트리거의 링크 callout을 보여 주지 않고 hold가 메뉴를 엽니다. - 메뉴가 열린 동안 trigger를 누르면 메뉴만 닫히고 control의 동작은 실행되지 않습니다. - 한 `MenuRoot`에 trigger가 여럿이면 hold·`contextmenu`로 메뉴를 연 trigger가 위치 기준, `aria-expanded`, 포커스 복귀 대상이 됩니다. - `nativeButton={false}` trigger에서도 Enter·Space가 render한 control의 `onClick`을 실행합니다. - hold 트리거는 `aria-haspopup`을 출력하지 않고 `openOnHover`를 무시합니다. 메뉴 항목은 화면에 보이는 다른 경로로도 닿을 수 있어야 합니다. - 충전 중 trigger에 입력 종류를 담은 `data-oc-holding="touch|mouse|pen"`, 판정 뒤 손을 뗄 때까지 `data-oc-held="true"`가 붙습니다. `BackgroundIconButton`과 `IconButton`은 이 상태에서 hold 모션으로 부풀었다가 판정 순간 돌아옵니다. - `MenuRoot`가 열림 상태를 직접 관리해 Base UI에 controlled `open`으로 전달합니다. `open`/`defaultOpen`/`onOpenChange` 사용법은 바뀌지 않습니다. - 모든 `Menu`가 닫힐 때 trigger로 포커스를 돌려주되, 마우스·터치·펜으로 닫았으면 포커스 링 없이 돌려줍니다(`focus({ focusVisible: false })`). 키보드로 닫았으면 기존처럼 포커스 링이 보이고, 닫히기 전에 포커스가 메뉴 밖 다른 요소로 옮겨 갔으면 돌려주지 않습니다. iOS Safari에서 손가락으로 닫은 뒤 trigger에 포커스 링이 남던 문제를 막습니다. - 누른 채 미끄러지는 선택이 끝나면 지나간 항목의 `data-oc-pressed`를 바로 지우지 않고, 그 항목에 포인터가 다시 들어오거나 그 항목을 누를 때까지 `false`로 둡니다. 마우스를 iframe·창 밖에서 놓았을 때 마지막 항목에 hover 강조가 남던 문제를 막습니다. - hover로 열지 않은 메뉴(hold, `contextmenu`, `open` prop으로 연 메뉴)가 마우스가 메뉴 밖으로 나갈 때 닫히던 문제를 고칩니다. hover로 연 메뉴는 기존처럼 닫힙니다. Migration Notes - 없음 - c123ea6: 열린 `Menu`에서 손가락을 누른 채 항목 사이를 미끄러져 고르는 터치 선택을 추가합니다. - 터치로 항목을 누른 채 움직이면 손가락 아래 항목이 눌린 상태로 바뀌고, 눌림 표시가 직전 항목 위치에서 출발해 이동합니다. 손을 뗀 항목이 실행됩니다. 마우스는 Base UI의 기존 누른 채 끌어 놓기 선택을 그대로 사용합니다. - 항목 사이 구분선이나 메뉴 안쪽 여백을 지나는 동안에는 직전 항목을 유지합니다. 항목 위아래 divider도 손가락 아래 항목을 따라 숨겨지고 복구됩니다. 메뉴 밖이나 disabled 항목에서 손을 떼면 아무것도 실행하지 않습니다. - 누른 채 움직이는 동안 메뉴 뒤 페이지는 스크롤되지 않습니다. 움직이지 않은 탭은 기존과 같이 동작합니다. - 실행은 항목의 기존 click 경로를 따르므로 `onClick`, `closeOnClick`, 링크 항목 동작은 바뀌지 않습니다. - `CellItem`에 owner가 붙이는 눌림 상태 selector `data-oc-pressed="true|false"`를 추가합니다. 속성이 있는 동안 항목과 그 안의 self Interaction 레이어 모두 `:hover`·`:active` 대신 이 값으로 눌림 표현과 divider 숨김을 결정하며, 속성이 없으면 기존과 같습니다. - `prefers-reduced-motion: reduce`에서는 눌림 표시가 이동하지 않고 항목별로 바뀝니다. Migration Notes - 없음 - 10daf2c: ScrollArea 세로 커스텀 스크롤바의 inline-start/end 위치 변수를 공개 override로 제공합니다. 좌우 분할 화면에서 root 스크롤바를 본문 열 경계에 배치할 수 있으며 기존 기본 배치는 유지됩니다. Migration Notes - 기존 사용법 변경은 필요하지 않습니다. - scrollbar part에 `inset-inline-end`를 직접 지정하던 경우 ScrollArea host의 `--oc-scroll-area-scrollbar-vertical-inset-inline-end` 지정으로 대체할 수 있습니다. 시작 쪽으로 옮길 때는 `--oc-scroll-area-scrollbar-vertical-inset-inline-start`와 함께 반대쪽 값을 `auto`로 지정합니다. - 7963156: 버튼 등 명시적 명령으로 좌표를 이동하는 `animateScrollTo` 유틸과 `utils/scroll` 진입점 추가 `useDragScroll`·스냅 페이지 이동·Carousel의 프로그램 이동과 대상별 실행 소유권 공유 일반 좌표 이동의 정착 구간에서 픽셀 단위 최소 속도 강제를 제거하고 spring 감속 유지 열린 Shadow DOM 경계를 포함한 중첩 스크롤 영역의 입력 소유권 유지 유틸·React API의 네이밍 기준과 기존 `oc*` 도메인 진입점 역할 문서화 Migration Notes - 기존 공개 API 이름과 기본 사용법 유지 - 새 유틸은 `@orioncactuscorp/ui/utils/scroll`에서 import하고 실제 스크롤 요소 또는 `window`를 대상으로 지정 - `animateScrollTo`와 `useDragScroll`을 조합할 때 수동 `cancel()` 연결 없이 자동 인계 - native `scrollTo` 등 외부 API는 기존처럼 드래그의 `cancel()`을 직접 호출해 인계 - reduced-motion에서는 즉시 이동하며, CSS snap에 따라 최종 좌표가 요청 좌표와 달라질 수 있음 - c78c6ec: 방문 기록을 관리하는 `useNavigationHistory`와 버튼 조합형 `HistoryNavigationButton` 추가 Modal의 Depth Navigation with History 예시에 뒤로 이동과 hold 기록 선택, 화면별 제목의 기록 이름 재사용 적용 `ModalHeader`에 긴 제목을 줄바꿈하는 `titleOverflow="wrap"` 추가 `MenuTrigger openOnHold`의 Shift+F10 직접 열기 지원 (메뉴 키는 native contextmenu 경로 유지) Modal·FloatingWindow 등 dialog 안의 모든 Menu에서 부모 focus fallback 이후의 목적지 복원 보완 Modal Header의 leading·title·trailing 영역 간격을 조절하는 `--oc-modal-header-gap` 공개 변수 추가 (기존 기본 간격 유지) Migration Notes - 기존 Modal 제목의 한 줄 말줄임 기본값 유지 - 긴 제목은 `titleOverflow="wrap"`으로 표시하거나 소비자에게 원문 확인 경로 제공 - history key와 계층 depth를 구분하고 입력값·라우터·이동 검증은 소비자에서 관리 - eb468be: Reveal·RevealProvider·RevealGroup을 추가해 콘텐츠의 한 번 등장을 fade·slide·blur로 표현하고, mount·in-view 조건과 영역별 기본값을 지원합니다. 세 효과는 체감 600ms의 바운스 없는 smooth를 공유하며 pace로 속도를 보정합니다. visible로 반복 등장·퇴장을 제어하고, 퇴장 중 입력 차단과 입력값 보존을 지원합니다. RevealGroup.Content와 Items로 본문과 항목을 선언하면 공통 viewport 시작점과 pace별 순차 등장을 처리합니다. pace를 유지하면서 timing의 duration·contentGap·stagger로 Group의 호흡을 조정할 수 있습니다. 개별 요소의 시차에는 delay를 사용할 수 있습니다. 초기 SSR 콘텐츠를 유지하고 reduced-motion에서는 짧은 fade만 사용합니다. Migration Notes 기존 컴포넌트 변경은 없습니다. Reveal과 RevealGroup의 슬롯·항목은 div wrapper를 생성하므로 소비자의 레이아웃·semantic 구조에 맞춰 배치하세요. 모션 intent에 reveal이 추가되어 OcMotionIntent를 전수 매핑하는 소비자는 새 항목을 처리해야 합니다. reveal은 독립된 smooth 모션 정책을 사용하며 기존 move/fade intent는 바뀌지 않습니다. 제어 모드의 native hidden은 visible로 대체하며 trigger·threshold와 동시에 지정할 수 없습니다. 높이 변화를 보간하지 않으므로 인라인 영역의 접힘은 별도 layout owner로 처리하세요. ### Patch Changes - 2d748e5: Menu의 내부 ScrollArea 전체를 둥근 표면 경계에서 잘라 탄성 스크롤 중 항목이나 스크롤바가 메뉴 밖으로 나오는 문제를 수정합니다. 기존 탄성 스크롤과 스크롤바 위치 계산은 유지합니다. Migration Notes - 없음 - f75629f: `Menu`에서 누른 채 미끄러지는 선택이 끝난 뒤 지나간 항목에 hover 강조가 간헐적으로 남던 문제를 고칩니다. - 지나간 항목의 `data-oc-pressed="false"`를 다음 포인터 이동 때가 아니라, 포인터가 그 항목에 다시 들어오거나 그 항목을 누를 때 해제합니다. - Chrome은 마우스를 누른 채 끄는 동안 마지막으로 갱신한 항목에 `:hover`를 남기고, 포인터가 다른 곳으로 움직인 뒤에도 바로 바로잡지 않습니다. 이전에는 이 묵은 `:hover`가 강조로 드러났습니다. Migration Notes - 없음 - 2abadb2: bottom sheet의 snap 높이가 시트 최대 높이를 넘을 때 드래그로 닫히지 않던 문제를 수정합니다. - `Modal`의 `snapPoints`가 시트의 CSS 최대 높이(기본값은 뷰포트 높이에서 `--oc-modal-sheet-block-start-clearance`를 뺀 값)보다 크면 그 최대 높이로 해석합니다. 실제 시트는 원래 최대 높이까지만 그려졌지만 드래그 계산은 더 큰 snap 높이를 기준으로 삼아 두 값이 clearance만큼 어긋났습니다. - `resize='fixed'` 시트에서 이 조건일 때 임계 거리 이상 끌거나 빠르게 내려도 시트가 닫히지 않고 원위치로 돌아가던 문제가 해결됩니다. 기본 clearance(`3rem`)만으로도 `snapPoints={[1]}`이나 높이가 낮은 뷰포트에서 재현됐습니다. - 같은 조건의 `peekable` 시트가 peek로 내려갈 때 헤더 일부만 보이던 문제가 해결됩니다. - 같은 조건에서 더 낮은 snap이 지정한 높이보다 clearance만큼 낮게 멈추던 문제가 해결됩니다. 예를 들어 844px 뷰포트의 `snapPoints={[0.5, 1]}`에서 `0.5` snap은 374px가 아니라 422px로 멈춥니다. - `onSnapPointChange`가 전달하는 값은 바뀌지 않고 `snapPoints`에 지정한 원래 값 그대로입니다. Migration Notes - 최대 높이를 넘는 snap과 더 낮은 snap을 함께 쓰는 화면은 낮은 snap의 정지 위치가 clearance만큼 높아지므로 배치를 확인합니다. 그 밖의 변경은 필요 없습니다. - fae9e74: `PageIndicator` 조작 모드에서 마우스로 점을 클릭할 때 hover 표시가 깜빡이던 문제를 고칩니다. 누르는 동안에도 끝의 작은 점은 `+` 힌트를 유지하고 누른 점은 확대된 크기를 유지합니다. 길게 눌러 스크럽이 시작되면 이전처럼 힌트가 사라집니다. Migration Notes - 없음 ### Migration Notes - `ActionAreaLayout.ActionArea`의 `background` prop과 `ActionAreaLayoutActionAreaBackground` 타입을 제거합니다. `background`/`background="auto"`는 지우고, `background={false}`는 Footer의 `scrollEdgeVariant="none"`으로 옮깁니다. `contained`에서 기존 번짐이 필요하면 Footer에 `scrollEdgeVariant="fade"`를 지정합니다. - footer 배경색 `--oc-action-area-background-color`는 Footer나 조상에 지정합니다. 기존 스크롤 상태별 padding 보정, 단독 ActionArea 그라디언트와 extraContent 불투명 배경에 의존한 화면은 위 상세 Migration Notes에 따라 조정합니다. - `caption`·`actions`·`compact-row`는 `action-group` 안으로 이동합니다. 직속 자식 선택자를 수정하고, `--oc-action-area-gap`은 extra와 action 묶음 사이 전체 간격으로 다시 확인합니다. `ActionAreaLayoutScrollState`는 deprecated입니다. - 최대 높이를 넘는 snap과 더 낮은 snap을 함께 쓰는 bottom sheet는 낮은 snap의 정지 위치가 clearance만큼 높아지므로 배치를 확인합니다. - ScrollArea scrollbar part의 직접 inset override는 host의 `--oc-scroll-area-scrollbar-vertical-inset-inline-start/end`로 옮길 수 있습니다. 기존 기본 배치는 유지됩니다. - Menu 문자열 제목은 기본 중간 말줄임과 원문 툴팁으로 표시됩니다. 내부 ScrollArea viewport 추가에 따른 직속 자식 선택자를 확인하고, 스크롤 가능한 메뉴의 일반 터치 pan은 내부 스크롤로 동작하는지 확인합니다. - Reveal과 RevealGroup의 div wrapper는 소비자 레이아웃·semantic 구조에 맞춰 배치합니다. `OcMotionIntent`를 전수 매핑하는 코드는 새 `reveal` 항목을 처리합니다. 제어 모드에서는 native `hidden` 대신 `visible`을 사용합니다. - 방문 기록의 key와 계층 depth는 구분하며 입력값·라우터·이동 검증은 소비자가 관리합니다. Modal 제목은 기본 한 줄 말줄임을 유지하며 긴 제목은 `titleOverflow="wrap"`으로 표시할 수 있습니다. - `animateScrollTo`는 `@orioncactuscorp/ui/utils/scroll`에서 import합니다. `useDragScroll`과 자동 인계하며, native `scrollTo` 등 외부 이동은 기존처럼 직접 `cancel()`을 연결합니다. - Menu padding 또는 radius factor를 조정한 화면은 셀 radius를 확인합니다. 기본 Menu와 SegmentedControl 모양은 유지되며 `oc-inner-radius`는 `@orioncactuscorp/ui/scss/mixins/radius`에서 제공합니다. - 정식 버전은 `@orioncactuscorp/ui@1.25.0`입니다. 프리릴리즈에서 전환할 때 설치 버전을 갱신합니다. - `1.25.0-next.0`에서 전환하는 경우 Reveal의 기본 등장 시간 600ms, 공통 60% 진입선, Content/Items 독립 진입, 기본 contentGap 80ms와 timing의 pace·전역 factor 적용을 확인합니다. 명시한 threshold의 면적 모드는 유지하고 Provider.threshold는 deprecated입니다. - 둥근 카드를 꽉 채우는 ScrollArea의 `--oc-scroll-area-radius`는 그 ScrollArea 자신에 지정합니다. 조상 요소에서는 상속되지 않습니다. ## 1.25.0-next.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.24.0..HEAD`_ #### Breaking Changes - `3a8fa9a` ActionAreaLayout footer 배경의 ScrollAreaEdge 통합과 스크롤 연동 bleed (#488) #### Features - `10daf2c` feat(scroll-area): expose vertical scrollbar inline inset overrides (#487) #### Maintenance - `3aae529` chore(release): prepare ui 1.25.0-next.0 #### Other - `08d9541` verify:pr e2e worker 8개 병렬 실행과 검증 단일 실행 잠금·포트 자동 할당 (#473) - `c123ea6` Menu 터치 누른 채 미끄러져 선택과 Interaction 이동 엔진 분리 (#477) - `2abadb2` bottom sheet snap 높이의 시트 최대 높이 상한 적용과 드래그 닫힘 복구 (#480) - `75b2443` verify:pr 종료 시 하위 프로세스 정리와 cancelled 기록 (#476) - `50bb026` verify:pr e2e worker 6개 조정과 호스트 부하 기록 (#481) - `add1db3` Menu 트리거 길게 누르기 열기와 이어지는 터치 선택 (#479) - `98235da` 실시간 Carousel·Modal spec의 시간 소유자별 준비·관측 보강과 입력 속도 결정론화 (#486) - `fae9e74` PageIndicator 클릭 중 끝 점 + 힌트 깜빡임 수정 (#484) - `4403c71` ActionAreaLayout 문서 스크롤 모드와 sticky footer (#482) - `f75629f` Menu 누른 채 미끄러지는 선택 후 남는 hover 강조 수정 (#483) - `eb468be` Reveal 등장·퇴장과 그룹 타이밍 제어 추가 (#490) - `c78c6ec` 방문 기록 내비게이션과 Modal Header 계약 추가 (#491) - `1a78b07` Menu 자동 말줄임·원문 툴팁과 내부 스크롤 개선 (#494) - `7963156` 프로그램 스크롤 유틸과 드래그 실행 인계 추가 (#492) - `91c0346` Menu·SegmentedControl 내부 곡률 계산의 공통 유틸화 (#493) ### Minor Changes - 1a78b07: Menu가 가용 공간 안에서 크기를 제한하고 ScrollArea로 많은 항목을 스크롤하도록 개선합니다. 일반 문자열 제목은 자동 중간 말줄임하며 원문 접근성 이름과 문자 검색을 보존합니다. Migration Notes - 문자열 제목의 기본 표시가 중간 말줄임으로 바뀝니다. 실제로 잘린 제목은 hover·키보드 포커스에서 원문 툴팁을 제공합니다. 커스텀 ReactNode content의 내부 표현은 소비자가 소유합니다. - `--oc-menu-max-inline-size`(기본 `24em`), `--oc-menu-max-block-size`(기본 화면 가용 높이)를 MenuContent className에서 조절할 수 있습니다. 메뉴 표면과 기존 container 사이에 ScrollArea viewport가 추가되므로 직계 자식에 의존하는 스타일은 공개 selector 계약을 확인하세요. - 스크롤 가능한 메뉴의 일반 터치 pan은 내부 스크롤로 동작합니다. trigger hold에서 이어진 드래그 선택과 짧은 메뉴의 기존 선택 동작은 유지합니다. - HistoryNavigationButton도 공통 Menu의 말줄임과 스크롤을 사용합니다. 툴팁은 터치의 탭 선택 동작을 변경하지 않습니다. - 91c0346: `oc-inner-radius($outer-radius, $inset)` SCSS helper를 추가하고 Menu와 SegmentedControl에 적용 - 바깥 radius에서 실제 inset을 빼고 음수 결과를 `0`으로 제한하며, radius factor는 중복 적용하지 않음 - Menu의 셀 강조 배경과 focus ring radius를 popup radius와 실제 여백에서 파생하도록 변경 - SegmentedControl의 기존 radius 계산과 시각 결과 유지 Migration Notes - 필수 변경 없음 - Menu의 기본 radius factor와 padding에서는 기존 모양을 유지하며, factor 또는 `--oc-menu-content-padding`을 조정한 경우 셀 radius가 바깥 surface 곡률에 맞춰 변경됨 - 새 helper는 `@orioncactuscorp/ui/scss/mixins/radius`에서 import 가능 - 7963156: 버튼 등 명시적 명령으로 좌표를 이동하는 `animateScrollTo` 유틸과 `utils/scroll` 진입점 추가 `useDragScroll`·스냅 페이지 이동·Carousel의 프로그램 이동과 대상별 실행 소유권 공유 일반 좌표 이동의 정착 구간에서 픽셀 단위 최소 속도 강제를 제거하고 spring 감속 유지 열린 Shadow DOM 경계를 포함한 중첩 스크롤 영역의 입력 소유권 유지 유틸·React API의 네이밍 기준과 기존 `oc*` 도메인 진입점 역할 문서화 Migration Notes - 기존 공개 API 이름과 기본 사용법 유지 - 새 유틸은 `@orioncactuscorp/ui/utils/scroll`에서 import하고 실제 스크롤 요소 또는 `window`를 대상으로 지정 - `animateScrollTo`와 `useDragScroll`을 조합할 때 수동 `cancel()` 연결 없이 자동 인계 - native `scrollTo` 등 외부 API는 기존처럼 드래그의 `cancel()`을 직접 호출해 인계 - reduced-motion에서는 즉시 이동하며, CSS snap에 따라 최종 좌표가 요청 좌표와 달라질 수 있음 - c78c6ec: 방문 기록을 관리하는 `useNavigationHistory`와 버튼 조합형 `HistoryNavigationButton` 추가 Modal의 Depth Navigation with History 예시에 뒤로 이동과 hold 기록 선택, 화면별 제목의 기록 이름 재사용 적용 `ModalHeader`에 긴 제목을 줄바꿈하는 `titleOverflow="wrap"` 추가 `MenuTrigger openOnHold`의 Shift+F10 직접 열기 지원 (메뉴 키는 native contextmenu 경로 유지) Modal·FloatingWindow 등 dialog 안의 모든 Menu에서 부모 focus fallback 이후의 목적지 복원 보완 Modal Header의 leading·title·trailing 영역 간격을 조절하는 `--oc-modal-header-gap` 공개 변수 추가 (기존 기본 간격 유지) Migration Notes - 기존 Modal 제목의 한 줄 말줄임 기본값 유지 - 긴 제목은 `titleOverflow="wrap"`으로 표시하거나 소비자에게 원문 확인 경로 제공 - history key와 계층 depth를 구분하고 입력값·라우터·이동 검증은 소비자에서 관리 - eb468be: Reveal·RevealProvider·RevealGroup을 추가해 콘텐츠의 한 번 등장을 fade·slide·blur로 표현하고, mount·in-view 조건과 영역별 기본값을 지원합니다. 세 효과는 체감 1,000ms의 바운스 없는 smooth를 공유하며 pace로 속도를 보정합니다. visible로 반복 등장·퇴장을 제어하고, 퇴장 중 입력 차단과 입력값 보존을 지원합니다. RevealGroup.Content와 Items로 본문과 항목을 선언하면 공통 viewport 시작점과 pace별 순차 등장을 처리합니다. pace를 유지하면서 timing의 duration·contentGap·stagger로 Group의 호흡을 조정할 수 있습니다. 개별 요소의 시차에는 delay를 사용할 수 있습니다. 초기 SSR 콘텐츠를 유지하고 reduced-motion에서는 짧은 fade만 사용합니다. Migration Notes 기존 컴포넌트 변경은 없습니다. Reveal과 RevealGroup의 슬롯·항목은 div wrapper를 생성하므로 소비자의 레이아웃·semantic 구조에 맞춰 배치하세요. 모션 intent에 reveal이 추가되어 OcMotionIntent를 전수 매핑하는 소비자는 새 항목을 처리해야 합니다. reveal은 독립된 smooth 모션 정책을 사용하며 기존 move/fade intent는 바뀌지 않습니다. 제어 모드의 native hidden은 visible로 대체하며 trigger·threshold와 동시에 지정할 수 없습니다. 높이 변화를 보간하지 않으므로 인라인 영역의 접힘은 별도 layout owner로 처리하세요. - 3a8fa9a: `ActionAreaLayout` footer 배경을 스크롤 상태에 따라 켜고 끄던 방식에서, footer가 항상 그리는 `ScrollAreaEdge`로 바꿉니다. 끝에서 빠르게 위로 스크롤할 때 배경이 돌아오기 전에 버튼 밑으로 콘텐츠가 비치던 문제를 없앱니다. - `ActionAreaLayout.Footer`가 마지막 자식으로 `ScrollAreaEdge`(`data-oc-part="scroll-edge"`)를 그립니다. 버튼 영역은 항상 덮고, 위쪽 padding 구간에서 서서히 사라지며, 아래에 남은 콘텐츠 거리만큼만 0부터 이어서 위로 번집니다. 스크롤 중 렌더링은 일어나지 않습니다. - `ActionAreaLayout.Footer`에 `scrollEdgeVariant="auto | none | fade | progressive-blur"`(기본 `auto`: `scroll="document"`는 `fade`, `contained`는 `none`)와 `scrollEdgeAppearance="soft | hard"`(기본 `soft`)를 추가합니다. `ModalFooter`와 같은 축에 레이아웃 스크롤 방식을 따르는 `auto`를 더했습니다. `hard`이면 아래에 콘텐츠가 남은 동안 `data-oc-part="scroll-edge-divider"` 구분선이 보이고, footer에 `data-oc-overflow-y-end`가 붙습니다. 구분선은 `divider="normal | neutral | alternative | none"`(기본 `normal`, `ModalFooter`와 같은 축)로 정합니다. `ActionAreaLayoutFooterScrollEdgeVariant` 타입을 추가합니다. - footer의 직속 `ActionArea`가 비어 있으면 edge를 그리지 않습니다. `extraContent`는 예외 없이 같은 규칙을 따릅니다. - `scroll="document"`의 번짐 거리는 레이아웃 콘텐츠 끝에서 footer 아래 끝까지로 잽니다. 레이아웃을 담은 어떤 스크롤 컨테이너에도 반응합니다. - footer 안의 `ActionArea`는 스크롤 여부와 관계없이 위쪽 padding을 유지합니다. 스크롤될 때 그 padding을 body 아래 여백으로 옮기던 동작을 제거합니다. - 단독 `ActionArea`의 `background`는 자기 영역을 단색으로 채우는 것으로 바뀝니다. 위쪽으로 번지던 고정 그라디언트는 제거됩니다. - `contained`에서는 body가 footer 위에서 끝나므로 콘텐츠가 footer 밑으로 지나가지 않습니다. 이 점은 `document`와 다릅니다. - `ActionArea`가 `caption`과 `actions`(또는 `compact-row`)를 새 `data-oc-part="action-group"`으로 묶습니다. 간격은 margin 대신 flex `gap`으로 정합니다. extra와 묶음 사이는 `--oc-action-area-gap`, caption과 버튼 사이는 `--oc-space-item-gap-medium`입니다. Migration Notes - `ActionAreaLayout.ActionArea`의 `background` prop을 제거합니다. `background="auto"`와 `background`(`true`)는 지우면 됩니다. `scroll="document"`에서는 `fade` edge가 기본이고, `contained`에서는 body가 bar 위에서 끝나므로 기본으로 edge를 그리지 않습니다. contained에서 스크롤 중 bar 위 번짐을 유지하려면 Footer에 `scrollEdgeVariant="fade"`를 지정합니다. `background={false}`는 ``으로 옮깁니다. `ActionAreaLayoutActionAreaBackground` 타입을 제거합니다. - footer 배경색은 `--oc-action-area-background-color`를 `ActionAreaLayout.Footer`나 그 조상에 지정합니다. layout 안의 `ActionArea`에 지정한 값은 footer 배경에 닿지 않습니다. internal이던 `--oc-action-area-layout-background-color`, `--oc-action-area-layout-gradient-overlap`, `--oc-action-area-layout-gradient-size`, `--oc-action-area-layout-body-padding-block-end`, `--oc-action-area-background-bleed`, `--oc-action-area-background-gradient-size`를 제거합니다. - `data-oc-background="true"`는 이제 단독 `ActionArea`의 고정 채우기만 뜻합니다. layout footer의 `ActionArea`에는 붙지 않습니다. 스크롤 상태 판단에는 footer의 `data-oc-overflow-y-end`를 씁니다. - `data-oc-scrollable="true"`일 때 footer `ActionArea`가 `--oc-action-area-padding-block-start: 0`을 받고 body가 아래 여백을 갖던 규칙을 제거합니다. 이 동작에 맞춘 스타일이 있다면 지웁니다. - 단독 `ActionArea`를 `absolute`나 `fixed`로 띄우고 `background`로 스크롤 콘텐츠를 가리던 경우, 위쪽 그라디언트가 사라집니다. 같은 모습을 내는 대체는 없으며, 스크롤 콘텐츠 위의 bar는 `ActionAreaLayout`(고정 높이 영역은 `contained`, 페이지 스크롤은 `scroll="document"`)이나 `ScrollArea`의 `ScrollAreaEdge` 패턴으로 옮깁니다. - `extraContent`가 있는 `ActionArea`의 불투명 배경과 위쪽 테두리를 제거합니다. `background`와 footer edge가 다른 경우와 같은 규칙으로 정합니다. 단단한 경계와 구분선이 필요하면 `ActionAreaLayout.Footer`에 `scrollEdgeAppearance="hard"`를, 단독 `ActionArea`에는 `background`와 직접 둔 `Divider`를 씁니다. `ModalFooter`·`FloatingWindowFooter` 안의 extra `ActionArea`도 불투명하지 않게 되어 footer 자체 edge가 보입니다. - `ActionAreaLayoutScrollState` 타입은 더 이상 쓰이지 않아 deprecated로 표시합니다. - `caption`, `actions`, `compact-row`는 이제 `ActionArea` 루트의 직속 자식이 아니라 `data-oc-part="action-group"` 안에 있습니다. 직속 자식 선택자(`[data-oc-component="action-area"] > [data-oc-part="actions"]` 등)를 쓰고 있다면 하위 선택자로 바꾸거나 `action-group`을 거치도록 고칩니다. - `--oc-action-area-gap`은 이제 extra와 action 묶음 사이 간격 전체입니다. 기본값이 `--oc-space-item-gap-small`에서 버튼 영역 상하 padding으로 바뀌고, padding을 더하던 계산은 없어집니다. 기본 간격은 `item-gap-small + padding`에서 `padding`으로 줄어듭니다. 이 변수를 지정하고 있었다면 원하는 전체 간격으로 다시 지정합니다. - 4403c71: `ActionAreaLayout`이 페이지(문서) 스크롤 위에서 footer를 화면 아래에 붙여 두는 `scroll='document'` 모드를 추가합니다. - `ActionAreaLayout`에 `scroll='contained' | 'document'` prop(기본 `contained`)과 `ActionAreaLayoutScroll` 타입을 추가합니다. 루트는 현재 값을 `data-oc-scroll`로 노출합니다. - `document`에서는 body가 페이지 흐름에 남고 footer가 `position: sticky`로 뷰포트 아래 끝에 붙습니다. footer와 fade는 레이아웃이 놓인 컬럼 폭을 따르고, 레이아웃이 끝나면 footer가 풀려 뒤따르는 콘텐츠(페이지 footer 등) 위에 놓입니다. - `document`에서 `--oc-action-area-layout-block-size`는 고정 높이가 아니라 최소 높이로 쓰여, 콘텐츠가 짧아도 footer가 그 높이의 아래 끝에 놓입니다. - 콘텐츠가 짧을 때 모바일에서는 footer가 그 최소 높이의 아래 끝에 놓이고, `md` 이상에서는 최소 높이는 유지한 채 footer가 콘텐츠 바로 뒤에 놓이며 남는 공간은 footer 아래로 갑니다. 콘텐츠가 길면 두 환경 모두 footer가 뷰포트 아래에 붙습니다. - footer 배경은 레이아웃 끝까지 남은 거리에 따라 위로 번지며, 스크롤 중 렌더링이 일어나지 않습니다. 배경 계약은 위의 footer `ScrollAreaEdge` 변경과 Migration Notes를 참고하세요. - 스크롤바를 화면 오른쪽 끝에 두려면 `ScrollArea root` 안에서 사용합니다. `ScrollArea root` 없이 브라우저 기본 스크롤바와도 동작합니다. Migration Notes - `scroll` 기본값은 `contained`이며 루트에 `data-oc-scroll="contained"` attribute가 추가됩니다. footer 배경과 구조 변경은 위의 footer `ScrollAreaEdge` Migration Notes를 함께 확인합니다. - add1db3: `MenuTrigger`에 길게 눌러 메뉴를 여는 `openOnHold`를 추가합니다. - `openOnHold`를 준 트리거는 탭·클릭·Enter·Space로 render한 control의 동작을 실행하고, 메뉴는 브라우저 뒤로 가기 버튼처럼 지름길로 엽니다. 손가락·펜·마우스 주 버튼으로 hold 판정 시간(`--oc-motion-duration-hold`, 기본 0.65초)을 채우면 메뉴가 열리고, 떼지 않은 채 항목으로 옮겨 놓으면 그 항목을 고릅니다. 판정 전에 움직이면 취소되고(터치는 페이지 스크롤로 양보), 판정 뒤에는 페이지가 스크롤되지 않습니다. 항목에 닿지 않고 떼면 메뉴는 열린 채로 남습니다. - `contextmenu` 이벤트(오른쪽 클릭, Control-클릭, 메뉴 키, Shift+F10, VoiceOver VO+Shift+M)로는 바로 열리며, 키보드·보조기기는 이 경로를 씁니다. 별도 단축키와 `aria-keyshortcuts`는 없습니다. 링크 trigger는 `contextmenu`로 뜨는 브라우저 링크 메뉴를 유지합니다. iOS는 hold 트리거의 링크 callout을 보여 주지 않고 hold가 메뉴를 엽니다. - 메뉴가 열린 동안 trigger를 누르면 메뉴만 닫히고 control의 동작은 실행되지 않습니다. - 한 `MenuRoot`에 trigger가 여럿이면 hold·`contextmenu`로 메뉴를 연 trigger가 위치 기준, `aria-expanded`, 포커스 복귀 대상이 됩니다. - `nativeButton={false}` trigger에서도 Enter·Space가 render한 control의 `onClick`을 실행합니다. - hold 트리거는 `aria-haspopup`을 출력하지 않고 `openOnHover`를 무시합니다. 메뉴 항목은 화면에 보이는 다른 경로로도 닿을 수 있어야 합니다. - 충전 중 trigger에 입력 종류를 담은 `data-oc-holding="touch|mouse|pen"`, 판정 뒤 손을 뗄 때까지 `data-oc-held="true"`가 붙습니다. `BackgroundIconButton`과 `IconButton`은 이 상태에서 hold 모션으로 부풀었다가 판정 순간 돌아옵니다. - `MenuRoot`가 열림 상태를 직접 관리해 Base UI에 controlled `open`으로 전달합니다. `open`/`defaultOpen`/`onOpenChange` 사용법은 바뀌지 않습니다. - 모든 `Menu`가 닫힐 때 trigger로 포커스를 돌려주되, 마우스·터치·펜으로 닫았으면 포커스 링 없이 돌려줍니다(`focus({ focusVisible: false })`). 키보드로 닫았으면 기존처럼 포커스 링이 보이고, 닫히기 전에 포커스가 메뉴 밖 다른 요소로 옮겨 갔으면 돌려주지 않습니다. iOS Safari에서 손가락으로 닫은 뒤 trigger에 포커스 링이 남던 문제를 막습니다. - 누른 채 미끄러지는 선택이 끝나면 지나간 항목의 `data-oc-pressed`를 바로 지우지 않고, 그 항목에 포인터가 다시 들어오거나 그 항목을 누를 때까지 `false`로 둡니다. 마우스를 iframe·창 밖에서 놓았을 때 마지막 항목에 hover 강조가 남던 문제를 막습니다. - hover로 열지 않은 메뉴(hold, `contextmenu`, `open` prop으로 연 메뉴)가 마우스가 메뉴 밖으로 나갈 때 닫히던 문제를 고칩니다. hover로 연 메뉴는 기존처럼 닫힙니다. Migration Notes - 없음 - c123ea6: 열린 `Menu`에서 손가락을 누른 채 항목 사이를 미끄러져 고르는 터치 선택을 추가합니다. - 터치로 항목을 누른 채 움직이면 손가락 아래 항목이 눌린 상태로 바뀌고, 눌림 표시가 직전 항목 위치에서 출발해 이동합니다. 손을 뗀 항목이 실행됩니다. 마우스는 Base UI의 기존 누른 채 끌어 놓기 선택을 그대로 사용합니다. - 항목 사이 구분선이나 메뉴 안쪽 여백을 지나는 동안에는 직전 항목을 유지합니다. 항목 위아래 divider도 손가락 아래 항목을 따라 숨겨지고 복구됩니다. 메뉴 밖이나 disabled 항목에서 손을 떼면 아무것도 실행하지 않습니다. - 누른 채 움직이는 동안 메뉴 뒤 페이지는 스크롤되지 않습니다. 움직이지 않은 탭은 기존과 같이 동작합니다. - 실행은 항목의 기존 click 경로를 따르므로 `onClick`, `closeOnClick`, 링크 항목 동작은 바뀌지 않습니다. - `CellItem`에 owner가 붙이는 눌림 상태 selector `data-oc-pressed="true|false"`를 추가합니다. 속성이 있는 동안 항목과 그 안의 self Interaction 레이어 모두 `:hover`·`:active` 대신 이 값으로 눌림 표현과 divider 숨김을 결정하며, 속성이 없으면 기존과 같습니다. - `prefers-reduced-motion: reduce`에서는 눌림 표시가 이동하지 않고 항목별로 바뀝니다. Migration Notes - 없음 - 10daf2c: ScrollArea 세로 커스텀 스크롤바의 inline-start/end 위치 변수를 공개 override로 제공합니다. 좌우 분할 화면에서 root 스크롤바를 본문 열 경계에 배치할 수 있으며 기존 기본 배치는 유지됩니다. Migration Notes - 기존 사용법 변경은 필요하지 않습니다. - scrollbar part에 `inset-inline-end`를 직접 지정하던 경우 ScrollArea host의 `--oc-scroll-area-scrollbar-vertical-inset-inline-end` 지정으로 대체할 수 있습니다. 시작 쪽으로 옮길 때는 `--oc-scroll-area-scrollbar-vertical-inset-inline-start`와 함께 반대쪽 값을 `auto`로 지정합니다. ### Patch Changes - f75629f: `Menu`에서 누른 채 미끄러지는 선택이 끝난 뒤 지나간 항목에 hover 강조가 간헐적으로 남던 문제를 고칩니다. - 지나간 항목의 `data-oc-pressed="false"`를 다음 포인터 이동 때가 아니라, 포인터가 그 항목에 다시 들어오거나 그 항목을 누를 때 해제합니다. - Chrome은 마우스를 누른 채 끄는 동안 마지막으로 갱신한 항목에 `:hover`를 남기고, 포인터가 다른 곳으로 움직인 뒤에도 바로 바로잡지 않습니다. 이전에는 이 묵은 `:hover`가 강조로 드러났습니다. Migration Notes - 없음 - 2abadb2: bottom sheet의 snap 높이가 시트 최대 높이를 넘을 때 드래그로 닫히지 않던 문제를 수정합니다. - `Modal`의 `snapPoints`가 시트의 CSS 최대 높이(기본값은 뷰포트 높이에서 `--oc-modal-sheet-block-start-clearance`를 뺀 값)보다 크면 그 최대 높이로 해석합니다. 실제 시트는 원래 최대 높이까지만 그려졌지만 드래그 계산은 더 큰 snap 높이를 기준으로 삼아 두 값이 clearance만큼 어긋났습니다. - `resize='fixed'` 시트에서 이 조건일 때 임계 거리 이상 끌거나 빠르게 내려도 시트가 닫히지 않고 원위치로 돌아가던 문제가 해결됩니다. 기본 clearance(`3rem`)만으로도 `snapPoints={[1]}`이나 높이가 낮은 뷰포트에서 재현됐습니다. - 같은 조건의 `peekable` 시트가 peek로 내려갈 때 헤더 일부만 보이던 문제가 해결됩니다. - 같은 조건에서 더 낮은 snap이 지정한 높이보다 clearance만큼 낮게 멈추던 문제가 해결됩니다. 예를 들어 844px 뷰포트의 `snapPoints={[0.5, 1]}`에서 `0.5` snap은 374px가 아니라 422px로 멈춥니다. - `onSnapPointChange`가 전달하는 값은 바뀌지 않고 `snapPoints`에 지정한 원래 값 그대로입니다. Migration Notes - 최대 높이를 넘는 snap과 더 낮은 snap을 함께 쓰는 화면은 낮은 snap의 정지 위치가 clearance만큼 높아지므로 배치를 확인합니다. 그 밖의 변경은 필요 없습니다. - fae9e74: `PageIndicator` 조작 모드에서 마우스로 점을 클릭할 때 hover 표시가 깜빡이던 문제를 고칩니다. 누르는 동안에도 끝의 작은 점은 `+` 힌트를 유지하고 누른 점은 확대된 크기를 유지합니다. 길게 눌러 스크럽이 시작되면 이전처럼 힌트가 사라집니다. Migration Notes - 없음 ### Migration Notes - `ActionAreaLayout.ActionArea`의 `background` prop과 `ActionAreaLayoutActionAreaBackground` 타입을 제거합니다. `background`/`background="auto"`는 지우고, `background={false}`는 Footer의 `scrollEdgeVariant="none"`으로 옮깁니다. `contained`에서 기존 번짐이 필요하면 Footer에 `scrollEdgeVariant="fade"`를 지정합니다. - footer 배경색 `--oc-action-area-background-color`는 Footer나 조상에 지정합니다. 기존 스크롤 상태별 padding 보정, 단독 ActionArea 그라디언트와 extraContent 불투명 배경에 의존한 화면은 위 상세 Migration Notes에 따라 조정합니다. - `caption`·`actions`·`compact-row`는 `action-group` 안으로 이동합니다. 직속 자식 선택자를 수정하고, `--oc-action-area-gap`은 extra와 action 묶음 사이 전체 간격으로 다시 확인합니다. `ActionAreaLayoutScrollState`는 deprecated입니다. - 최대 높이를 넘는 snap과 더 낮은 snap을 함께 쓰는 bottom sheet는 낮은 snap의 정지 위치가 clearance만큼 높아지므로 배치를 확인합니다. - ScrollArea scrollbar part의 직접 inset override는 host의 `--oc-scroll-area-scrollbar-vertical-inset-inline-start/end`로 옮길 수 있습니다. 기존 기본 배치는 유지됩니다. - Menu 문자열 제목은 기본 중간 말줄임과 원문 툴팁으로 표시됩니다. 내부 ScrollArea viewport 추가에 따른 직속 자식 선택자를 확인하고, 스크롤 가능한 메뉴의 일반 터치 pan은 내부 스크롤로 동작하는지 확인합니다. - Reveal과 RevealGroup의 div wrapper는 소비자 레이아웃·semantic 구조에 맞춰 배치합니다. `OcMotionIntent`를 전수 매핑하는 코드는 새 `reveal` 항목을 처리합니다. 제어 모드에서는 native `hidden` 대신 `visible`을 사용합니다. - 방문 기록의 key와 계층 depth는 구분하며 입력값·라우터·이동 검증은 소비자가 관리합니다. Modal 제목은 기본 한 줄 말줄임을 유지하며 긴 제목은 `titleOverflow="wrap"`으로 표시할 수 있습니다. - `animateScrollTo`는 `@orioncactuscorp/ui/utils/scroll`에서 import합니다. `useDragScroll`과 자동 인계하며, native `scrollTo` 등 외부 이동은 기존처럼 직접 `cancel()`을 연결합니다. - Menu padding 또는 radius factor를 조정한 화면은 셀 radius를 확인합니다. 기본 Menu와 SegmentedControl 모양은 유지되며 `oc-inner-radius`는 `@orioncactuscorp/ui/scss/mixins/radius`에서 제공합니다. - 소비 앱 검증에는 `@orioncactuscorp/ui@1.25.0-next.0`을 정확한 버전으로 고정합니다. ## 1.24.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.23.0..HEAD`_ #### Fixes - `036d4e0` fix(page-indicator): derive hover hint from animated window (#468) #### Other - `a765fc1` InteractionScope 공유 hover 추가 (#430) - `56a52f2` Slider 컴포넌트 추가 (#434) - `50c26d5` PageIndicator 추가와 스냅 페이지 번호 훅 (#435) - `fca5d1d` Carousel 컴포넌트 추가와 useDragScroll cancel 공개 (#438) - `efb9b51` AnimatedNumber 컴포넌트 추가 (#436) - `31d7450` PageIndicator 점 크기·활성 색 모션과 교차 축 판정 보완 (#437) - `0f25fbb` InteractionScope 공유 hover 개별 영역 검사의 실시간 경쟁 조건 제거 (#441) - `64ae693` PageIndicator 조작 모드와 터치 넘기기·탭 펼치기 추가 (#439) - `d26137d` ScrollArea scroll edge와 Modal·FloatingWindow header·footer 크롬 추가 (#432) - `7cded5c` Safari 텍스트 선택 방지용 -webkit-user-select 누락 보완과 재발 방지 검사 (#443) - `2432167` SegmentedControl thumb 드래그 snap 인터랙션 (#431) - `945dc1c` Modal 헤더 탭 키보드 테스트의 reveal spring 프레임 경쟁 조건 제거 (#444) - `0cd848b` oc-motion 길게 누르기용 hold intent와 혼합 transition용 reduced 함수 추가 (#442) - `3ec914e` PageIndicator 길게 누르기·마우스 머무르기에 hold 모션 적용 (#445) - `e9da3a0` PageIndicator 작은 끝 점 중심 마우스 조작과 + 안내 (#448) - `3eee4fa` PageIndicator 펼침 smooth 모션과 마우스 스크럽 거리 절반 (#449) - `4147e68` SegmentedControl 말줄임 라벨 전체 텍스트 툴팁 (#446) - `2af5ef0` Carousel slide loop 버튼·끌기·관성까지 양 끝을 넘는 순환 (#447) - `cf386f3` Carousel slide 연타 이동의 속도 이어받기 (#450) - `1512a21` Carousel 자동 넘김 일시정지 조건 보완과 슬라이드 텍스트 선택 허용 (#453) - `52c88d6` Loading 확정 진행률과 끊김 없는 모드 전환·퇴장 모션 (#454) - `852951c` ProgressIndicator 불확정 상태·흐름 하이라이트·퇴장 모션 (#457) - `dcae01a` Carousel 제어형 index (#455) - `d89b542` PageIndicator 인디케이터 hover 시 끝 점 + 힌트 (#456) - `4e987e3` ageIndicator 숨은 점 hit area 상한으로 WebKit 멈춤 수정 (#462) - `49f50bf` scrollToIndex 스크립트 이동으로 브라우저 간 동일한 smooth 스크롤 (#463) - `7f74dd3` PageIndicator 터치 스크럽 이동 거리를 마우스와 동일하게 조정 (#464) - `afb9b1c` Loading 확정 진행률 호를 실제 진행 비율로 표시 (#459) - `1530e28` AnimatedNumber roll 모션 블러의 Safari 분홍 세로선 제거 (#460) - `bbe4429` Carousel 터치 길게 누르기 텍스트 선택 차단과 선택 중 자동 넘김 정지 (#461) - `654ec6c` PageIndicator 창 연속성 e2e의 transition seek 기반 결정적 측정 (#465) - `2f2c59f` Slider 터치 세로 스와이프의 페이지 스크롤 전환과 터치 포커스 링 제거 (#466) - `06db87a` Carousel slide 마우스 끝단 rubber band와 useDragScroll matchMedia 가드 (#467) - `76095eb` 1.24.0 릴리스 노트와 배포 문서의 소스 대조 정정 (#469) - `8ebcf37` Slider 터치 commit 판별·보류 값 보정과 Safari 마우스 드래그 텍스트 선택 차단 (#470) - `7d3adf4` InteractionScope 묶음 안 빈 공간을 잇는 공유 hover 판정 (#471) - `c24cb5d` 1.24.0 SegmentedControl Migration Notes 정정 (#472) ### Minor Changes - efb9b51: 값이 바뀔 때 바뀐 자리만 움직이는 숫자 `AnimatedNumber` 컴포넌트를 추가합니다. - `Intl.NumberFormat` 서식(`format`, `locales`)으로 정수, 소수, 통화, 퍼센트, compact 표기를 그립니다. 자리는 자릿값으로 추적해 99 → 100처럼 길이가 바뀌어도 남는 자리가 이어지고, 바뀐 폭은 남는 자리가 미끄러지며 맞춥니다. - `variant`(`none`·`slide`·`blur`·`roll`, 기본 `slide`)로 바뀐 자리의 표현을 고릅니다. `roll`은 사이 숫자를 지나 굴러가고, `spins`를 주면 모든 자리가 더 돌고 왼쪽부터 차례로 멈추는 값 공개 표현이 됩니다. - `trend`(`auto`·`up`·`down`)로 방향, `pace`(`quick`·`normal`·`slow`)로 공용 `move` motion 속도를 정합니다. 움직이는 도중 값이 바뀌면 현재 위치에서 이어집니다. reduced-motion에서는 opacity만 바뀝니다. - 움직이는 동안만 가장자리 fade mask를 적용하고, 정지 상태의 box와 글자는 같은 글꼴의 일반 텍스트와 같습니다. 글자 크기·굵기는 감싸는 요소를 상속하며 숫자는 기본 `tabular-nums`입니다. - 보조기술에는 최종 값 문자열만 노출하고 기본으로 변경을 안내하지 않습니다. 안내가 필요하면 `aria-live`를 지정하세요. SSR에서는 서식이 적용된 문자열을 그대로 출력합니다. - selector `data-oc-component="animated-number"`, `data-oc-variant`, `data-oc-moving`을 추가합니다. 공개 CSS 변수는 없습니다. `AnimatedNumber`는 client component입니다. ### Migration Notes - 없음 - fca5d1d: `CarouselRoot`, `CarouselSlide` 컴포넌트를 추가합니다. - `transition`(`slide`·`fade`, 기본 `slide`): slide는 네이티브 scroll-snap에 슬라이드를 나란히 두고 터치·트랙패드·휠을 브라우저에 맡기며 마우스 드래그만 보강합니다. loop가 아닌 slide에서 마우스로 양 끝을 더 끌면 트랙이 트랙패드처럼 살짝 늘어났다가 돌아옵니다(reduced-motion에서는 경계에서 멈춤). fade는 슬라이드를 겹쳐 두고 가로 드래그 거리에 맞춰 크로스페이드하며, 트랙패드 가로 스와이프 한 번에 한 장씩 넘기고 세로 스크롤은 페이지에 넘깁니다. - slide의 다음·이전 버튼, 자동 넘김, 인디케이터 클릭·방향키 이동은 `move` motion 토큰(`--oc-motion-duration-move`, 전역 duration 배율)을 따르는 스크립트 이동입니다. 빠르게 연달아 눌러도 속도를 이어받아 감속·재가속 없이 흐르고(loop에서는 이동보다 한 바퀴 이상 앞서 눌러도 누른 만큼 같은 방향으로 이어집니다), 남은 거리에 맞춰 늦게 감속해 마지막 슬라이드에 overshoot 없이 멈추며, 착지 직전 마지막 몇 픽셀도 프레임마다 1px 이상 이어서 움직여 멈칫하지 않습니다. reduced-motion에서는 즉시 이동하고, 이동 중 reduced-motion이나 방향(`dir`)이 바뀌면 선택된 슬라이드에 바로 착지합니다. 이동 중 터치·마우스 드래그로 잡으면 그 자리에서 손에 넘기고, 휠·키보드로 스크롤하면 멈춘 뒤 가까운 슬라이드로 미끄러져 정착합니다. 인디케이터는 연속 탭이 더블탭 확대로 처리되지 않도록 `touch-action: manipulation`을 사용합니다. - `loop`: fade는 끌기까지 끊김 없이 순환합니다. slide는 다음·이전 버튼, 자동 넘김, 인디케이터 방향키, 터치·트랙패드·휠·마우스 끌기와 그 관성으로 양 끝을 넘어 같은 방향으로 계속 이어집니다. 긴 칸 트랙 위에서 화면 밖 슬라이드만 옮기는 방식이라 빠르게 연달아 넘겨도 끝에 닿지 않습니다. 이를 위해 슬라이드의 DOM 복제본(`data-oc-clone`, `aria-hidden`, `inert`)을 함께 배치하며, DOM·탭·읽기 순서는 그대로이고 정지 상태에서는 항상 원본 슬라이드가 보입니다. - `autoplay`(`true` 또는 `{ interval, pauseOnHover }`, 기본 5초, 최소 1초): 스토리형 진행 막대가 타이머를 표시합니다. 누르고 있으면 잠시 멈추고, 짧게 클릭·탭하면 정지·재생이 바뀌며, 끌다가 놓으면 그 순간 착지할 슬라이드부터 다시 셉니다. 키보드 포커스가 들어오면 멈추고, reduced-motion에서는 시작하지 않습니다. 화면에 절반 이상 보일 때(화면보다 긴 캐러셀은 화면의 절반 이상을 채울 때)만 진행하고, 탭이 숨겨졌거나 슬라이드 안에 포커스나 선택된 텍스트가 있는 동안 잠시 멈춥니다. `pauseOnHover`(기본 `false`)를 켜면 마우스를 올린 동안 멈춥니다. `CarouselSlide`의 `loading`이 켜진 슬라이드에서는 시작 지점에서 기다립니다. - 슬라이드 내용은 텍스트를 선택할 수 있고, 컨트롤만 선택을 막습니다. 끌기가 누름을 가져가는 동안과 터치·펜으로 누르고 있는 동안에는 선택과 이미지 끌기가 시작되지 않습니다(길게 눌러 멈출 때 텍스트가 선택되지 않음). 마우스로 끌거나 길게 눌러 선택할 영역은 `data-oc-drag-scroll-ignore`로 표시합니다. 이 영역은 탭으로 자동 넘김을 토글하지도 않습니다. - `<>...`로 감싼 슬라이드도 한 장씩 셉니다. - 진행 막대는 현재 슬라이드 칸만 채워집니다. 앞으로 넘어가면 떠나는 칸이 꽉 차면서 사라지고(완료), 뒤로 가면 현재 값에서 되감깁니다. 모든 전환은 화면에 보이는 값에서 다시 시작하므로 빠르게 연달아 넘겨도 끊기지 않습니다. 방향은 인덱스가 아니라 이동 의도로 정하므로 loop의 마지막→처음 다음은 앞으로입니다. - `index`(제어형), `defaultIndex`, `onIndexChange`: `index`를 주면 바깥 썸네일·URL 상태와 선택을 공유합니다. 버튼·인디케이터·키·자동 넘김은 제안만 하고 `index`가 바뀌어야 움직입니다. 끌기·스와이프는 손을 따라 먼저 움직이고, 부모가 받아들이지 않으면 스크롤이 정착하거나 디졸브가 끝난 뒤 `index`로 돌아갑니다. `onIndexChange`는 현재 값으로는 부르지 않고, 끌기 한 번에 놓는 순간과 다른 슬라이드에 정착했을 때 최대 두 번 부릅니다. 바깥에서 바꾼 `index`는 loop에서 가까운 쪽으로 이동하며, 부모가 거절한 자동 넘김은 꽉 찬 진행 막대로 기다립니다. 제어형·비제어형 전환과 유한하지 않은 `index`는 개발 모드에서 경고합니다. - WAI-ARIA APG tabbed carousel 시맨틱: root `region` + `aria-roledescription="carousel"`, indicator `tablist`, 슬라이드 `tabpanel`, 키보드로만 보이는 첫 Tab 정지점의 자동 넘김 정지·재생 버튼. root에는 `aria-label`/`aria-labelledby`가 필요하며, 없으면 개발 모드에서 경고합니다. - 이전·다음 `BackgroundIconButton`은 hover 가능한 fine pointer 기기에서 hover·포커스 시 나타납니다. - 공개 CSS 변수 `--oc-carousel-radius`와 selector `data-oc-component="carousel"`, `data-oc-transition`, `data-oc-autoplay`, `data-oc-part="viewport|slides|indicator|segment|track|progress|navigation|autoplay-control|slide"`, 슬라이드의 `data-oc-state="active|inactive"`, loop slide 복제본의 `data-oc-clone`을 추가합니다. ### Migration Notes - 없음 - fca5d1d: `useDragScroll` 반환값에 `cancel()`을 추가합니다. 진행 중인 마우스 드래그와 release 관성·스냅 정착을 멈추고 스냅을 복원합니다. 스크롤 요소 밖 컨트롤에서 `scrollTo`를 호출하기 전에 부르면 release 정착이 새 스크롤을 덮어쓰지 않습니다. ### Migration Notes - 없음 - a765fc1: 나란히 놓인 컨트롤 사이에서 hover 표시 하나가 이동하는 공유 hover를 `InteractionScope`로 추가합니다. - `InteractionScope`로 감싼 영역에서 마우스 포인터가 참여 컨트롤 밖으로 나가지 않고 다음 컨트롤로 넘어가면, 새로 hover된 컨트롤의 Interaction이 직전 컨트롤의 위치·크기·radius·색에서 출발해 자기 자리로 이동합니다. 별도 레이어를 만들지 않으므로 각 컨트롤의 Interaction 색·radius·inset·강도 계약과 clipping은 그대로입니다. - 앱 루트를 감싸면 전체에, 일부를 감싸면 그 영역에만 적용됩니다. 안쪽 scope가 우선하며 `hover="individual"`로 영역 단위로 끌 수 있습니다. scope에서 연 portal 콘텐츠도 포함됩니다. - 자기 표면이 없는 컨트롤인 `IconButton`, `TextButton`, interactive `CellItem`, `TabsTab`, `SegmentedControlItem`이 참여합니다. 커스텀 host는 새 prop ``로 참여합니다. `Button`처럼 표면이 있는 컨트롤은 참여하지 않습니다. - 직전 hover 표시가 사라지는 중이고, 직전 컨트롤에서 포인터까지의 경로가 참여 컨트롤과 같은 묶음의 빈 공간만 지날 때 이동합니다. 같은 묶음은 한 컨테이너에 나란히 놓인 컨트롤이며, header 내비게이션 링크나 Alert 액션처럼 사이에 layout gap이 있어도 이어집니다. - 사이에 텍스트·구분선·참여하지 않는 컨트롤이 있는 경우, 서로 다른 묶음이나 scope, disabled 대상, focus되거나 눌린 출발 컨트롤, 터치·펜 입력, `prefers-reduced-motion: reduce`에서는 기존처럼 개별로 반응합니다. 빈 공간을 천천히 건너 직전 표시가 다 사라진 뒤 도착해도 개별로 반응합니다. focus와 press 표시는 바뀌지 않습니다. - scope를 쓰지 않으면 동작과 렌더링 결과가 이전과 같습니다. 참여 컴포넌트의 Interaction에 `data-oc-shared-hover="true"` 속성만 추가됩니다. - selector `data-oc-component="interaction-scope"`, `data-oc-hover="shared|individual"`, `data-oc-shared-hover="true"`를 추가합니다. `InteractionScope`는 client component입니다. ### Migration Notes - 없음 - 52c88d6: `Loading`에 확정 진행률 `value`·`max`와 퇴장 모션 `visible`·`onExitComplete`를 추가합니다. - `value`가 숫자면 호 길이로 진행률을 그리고 `role="progressbar"`와 `aria-valuemin`·`aria-valuemax`·`aria-valuenow`를 쓰며, 불확정 모드와 달리 `aria-live`는 두지 않습니다. `null`·`undefined`면 기존 불확정 루프(`role="status"`)입니다. 호는 진행률과 같은 비율로 원을 그려 0%에서는 트랙 위 끝점만 남고 100%에서 닫히며, 확정 모드에서는 회전을 유지해 진행률이 멈춰도 작동 중임을 보여 줍니다. - 불확정 → 확정 → 100% → 불확정 대기 → 퇴장처럼 상태가 바뀌어도 지금 그려진 호에서 다음 모션이 이어지고 회전은 다시 시작되지 않습니다. 확정에서 불확정으로 갈 때는 호가 꼬리부터 감긴 뒤 루프로 이어집니다. - `visible={false}`는 호가 감기며 사라지는 퇴장을 재생하고 끝나면 `onExitComplete`를 호출합니다. 요소는 그때까지 남아 있으므로 `onExitComplete`에서 unmount합니다. 전환이나 퇴장 도중 상위 `Suspense`에 의해 숨겨졌다가 다시 보이면 중단된 전환을 목표 상태로 마무리합니다. - 확정 모드 트랙 색 `--oc-loading-track-color`(override)를 추가합니다. 기본은 스피너 색의 28%입니다. - 회전은 호(`circle`)가 아니라 `indicator`(`svg`)에서 일어나고, `track`·`arc` part와 `data-oc-state="indeterminate|determinate"`를 추가합니다. `[data-oc-part='indicator'] circle`에 `transform`이나 `animation`을 지정했다면 `arc` part 기준으로 옮겨야 합니다. - `Loading`은 client 컴포넌트(`'use client'`)가 됩니다. Server Component에서 그대로 렌더링할 수 있습니다. ### Migration Notes - 기존 사용(`value` 없음)은 그대로 동작합니다. - `[data-oc-part='indicator'] circle`을 직접 스타일링했다면 `[data-oc-part='arc']`로 옮기세요. 트랙 원이 추가되어 `circle` 선택자가 두 원에 모두 적용됩니다. - 0cd848b: `oc-motion`에 길게 누르기·hover 체류용 `hold` intent와 `charge` phase를 추가합니다. - `hold charge`: 누르거나 머무는 동안 예열합니다. 시간은 `--oc-motion-duration-hold`(기본 0.65초) × `$pace`이고, 곡선은 iOS Haptic Touch 실측값 `--oc-motion-timing-hold`입니다. 입력 판정 시간이므로 `--oc-motion-duration-factor`와 `$duration-factor`를 적용하지 않고 reduced-motion에서도 바꾸지 않습니다. - `hold enter` / `hold release`: 판정 순간의 팝은 반동이 보이는 snappy spring(bounce 0.25), 판정 전 복귀는 snappy spring(bounce 0.15)을 사용합니다(response 0.2초). reduced-motion에서는 bounce 없는 smooth spring으로 바뀝니다. - `oc-motion-scale(..., hold)`는 `--oc-motion-scale-factor-hold`를 따르며, reduced-motion에서 `--oc-motion-scale-factor-hold-reduced`(기본 0.25)를 곱해 부풀기의 25%만 남깁니다. - runtime `resolveOcMotion({ intent: 'hold', phase: 'charge', element })`이 같은 token을 읽어 판정 타이머 시간을 돌려줍니다. - 새 token: `--oc-motion-duration-hold`, `--oc-motion-duration-hold-enter`, `--oc-motion-duration-hold-release`, `--oc-motion-timing-hold`, `--oc-motion-timing-hold-enter`, `--oc-motion-timing-hold-release`, `--oc-motion-scale-factor-hold`, `--oc-motion-scale-factor-hold-reduced`. - 여러 intent를 한 `transition`에 섞는 경우를 위해 reduced-motion transition item을 돌려주는 `oc-motion-reduced(...)` 함수를 추가합니다. - `charge`는 `hold` 전용이고 `hold`는 `charge`, `enter`, `release`만 받습니다. 잘못된 조합은 Sass와 runtime 모두 오류를 냅니다. ### Migration Notes - 없음 - 3ec914e: `PageIndicator` 조작 모드의 터치·마우스 길게 누르기에 `oc-motion`의 `hold` 모션을 적용합니다. - 판정 시간은 작은 컨트롤용 quick pace로 `--oc-motion-duration-hold` × `--oc-motion-pace-quick`(기본 약 0.49초)을 따르며, 터치와 마우스 길게 누르기가 같은 값을 사용합니다. - 누르는 동안 인디케이터가 조금씩 부풀고 캡슐 배경이 옅게 차오르며, 판정 순간 짧은 스프링으로 캡슐이 완전히 나타납니다. 판정 전에 놓으면 그 자리에서 되돌아갑니다. 터치 탭, 작은 끝 점 클릭, 키보드 포커스로 펼치고 접을 때는 튐 없는 `move` 모션을 사용합니다. - 마우스로 접힌 점을 판정 시간 동안 누르고 있으면 스크럽이 시작되고, 그대로 놓아도 클릭으로 처리하지 않습니다. - 캡슐(`capsule` part)을 `Background` 표면으로 렌더링합니다. - reduced-motion에서는 예열을 유지하되 부풀기를 줄이고, 판정 순간의 튐 없이 자리 잡습니다. - selector `data-oc-holding="touch|mouse"`를 추가합니다. ### Migration Notes - 없음 - 64ae693: `PageIndicator`에 점으로 페이지를 이동하는 조작 모드를 추가하고, `useScrollSnapIndex`가 `scrollToIndex`를 반환합니다. - `onIndexChange(index, { reason })`를 지정하면 `role="slider"`가 되어 방향키(RTL 반전)·Home/End·PageUp/PageDown으로 이동을 요청합니다. `aria-label` 또는 `aria-labelledby`가 필요하며 `getAriaValueText`로 값 문구를 지정합니다. 지정하지 않으면 기존 표시 전용 동작과 같습니다. - 마우스 hover는 점 배치를 바꾸지 않아, 보이는 점을 클릭하면 그 페이지로 이동을 요청합니다(`reason: 'press'`). hover한 점은 원래 크기로 커집니다. 포인터가 인디케이터 위에 있으면 끝의 가장 작은 점이 원래 크기로 커지며 옅은 `+` 아이콘을 보여 주고, 그 점을 hover하면 점 간격만큼 커지며 `+`가 선명해집니다. 이 점을 클릭하면 이동 대신 모든 페이지를 펼칩니다. 펼친 줄이 놓인 영역에 들어가지 않으면 `+` 없이 다른 점처럼 동작합니다. 숨은 점은 작은 점 바깥에 간격 없이 접혀 있다가 펼칠 때 간격과 함께 벌어집니다. 펼친 점은 클릭하거나 끌어 포인터 아래 페이지로 이동하며, 고른 뒤 또는 포인터가 벗어난 뒤 1초가 지나면 접힙니다. 키보드 포커스 동안에도 모든 페이지를 펼칩니다. - 접힌 점을 마우스로 4px 넘게 끌거나 길게 누르면 캡슐이 나타나고, 누른 점부터 점 간격의 절반마다 한 페이지씩 이동을 요청합니다(`reason: 'scrub'`). - 터치에서는 길게 누르면 캡슐이 나타나고, 이어서 좌우로 움직이면 마우스와 같이 점 간격의 절반마다 한 페이지씩 이동을 요청합니다(`reason: 'scrub'`). 인디케이터는 가로 이동을 직접 받으므로(`touch-action: pan-y`) 길게 누르기 전의 가로 스와이프는 아무 동작도 하지 않고, 세로 페이지 스크롤은 브라우저 동작을 유지합니다. 짧게 탭하면 모든 페이지를 펼치고, 펼친 점을 탭하거나 좌우로 끌어 원하는 페이지로 이동합니다. 펼친 폭이 들어가지 않으면 펼치지 않습니다. - `useScrollSnapIndex`가 `scrollToIndex(index, { behavior })`를 반환합니다. 기본 `'smooth'`는 브라우저 smooth scroll 대신 `Carousel` 버튼 이동과 같은 `move` 모션으로 스크립트 이동해 Safari에서도 같은 속도로 움직이고, 스냅 위치에 정확히 멈춥니다. 사용자 입력이 들어오면 즉시 멈추고, reduced-motion에서는 바로 이동합니다. `'auto'`는 CSS `scroll-behavior`를 따릅니다. 넘기기에는 `behavior: 'instant'`를 권장합니다. - selector `data-oc-interactive="true"`, `data-oc-scrubbing="mouse|touch"`, `data-oc-expanded="true"`, part `capsule`과 이동하는 묶음의 점 안에 part `icon`을 추가합니다. `+`는 작은 점 자리에서만 보이며 묶음 이동을 따라 연속으로 바뀝니다. ### Migration Notes - 없음 - 50c26d5: 캐러셀 페이지 위치를 점으로 표시하는 `PageIndicator`와 스냅 페이지 번호를 계산하는 `useScrollSnapIndex`를 추가합니다. - `PageIndicator`는 `count`와 0부터 시작하는 `index`를 받습니다. 6페이지 이상에서는 7칸을 표시하며 가운데 3칸은 원래 크기, 바깥으로 0.67배·0.33배입니다. 현재 페이지가 가운데 3칸을 벗어날 때만 점 묶음이 이동하며, 한 페이지씩 넘기면 한 칸, 멀리 이동하면 필요한 만큼 건너뜁니다. 5페이지 이하에서는 모든 점을 원래 크기로 표시합니다. - 묶음 이동과 점 크기 변화는 `move` 모션을 사용하며 reduced-motion에서는 즉시 바뀝니다. 활성 점 색은 `feedback` 모션으로 바뀌며 reduced-motion에서도 유지됩니다. - 점 색은 `--oc-page-indicator-color`(기본값 `label-normal`, 비활성 점은 이 색의 16%)와 `--oc-page-indicator-active-color`로 조정합니다. - 기본적으로 장식 요소(`aria-hidden="true"`)이며, `aria-label` 또는 `aria-labelledby`를 지정하면 `role="img"`로 렌더링합니다. 위치 안내는 캐러셀 슬라이드 레이블이 담당합니다. - `@orioncactuscorp/ui/react/scroll`의 `useScrollSnapIndex`는 네이티브 스냅 영역에서 다음 또는 이전 페이지가 절반을 넘게 보이면 페이지 번호를 갱신합니다. - selector `data-oc-component="page-indicator"`, part `track`·`dot`, dot의 `data-oc-state="active|inactive"`·`data-oc-tier="full|medium|small|hidden"`을 추가합니다. `PageIndicator`는 client component입니다. ### Migration Notes - 없음 - 852951c: `ProgressIndicator`에 불확정 상태, 흐름 하이라이트 `loading`, 퇴장 모션 `visible`·`onExitComplete`를 추가합니다. - `value`가 `null`·`undefined`면 불확정 상태로, `aria-valuenow` 없이 구간 하나가 머리가 먼저 달리고 꼬리가 쫓는 루프를 반복합니다. `value`는 이제 생략할 수 있습니다. - `loading`을 주면 확정 진행 중 채움 안에 스태틱 화이트 하이라이트가 일정한 속도로 흐릅니다(`data-oc-loading="true"`). 켜고 끌 때는 계속 흐르면서 서서히 나타나고 사라집니다. 기본은 꺼져 있어 단계 표시 등 기존 사용은 그대로입니다. - 확정 → 100% → 불확정 → 퇴장처럼 상태가 바뀌어도 지금 그려진 구간에서 다음 모션이 이어집니다. 확정에서 불확정으로 갈 때는 꼬리가 머리를 쫓아 감긴 뒤 루프가 시작되고, 진행 중인 구간은 되감기지 않고 먼저 감긴 뒤 시작 쪽부터 진행률이 자랍니다. - `visible={false}`는 구간이 감기며 사라지는 퇴장을 재생하고 끝나면 `onExitComplete`를 호출합니다. 요소는 그때까지 남아 있으므로 `onExitComplete`에서 unmount합니다. 전환이나 퇴장 도중 상위 `Suspense`에 의해 숨겨졌다가 다시 보이면 중단된 전환을 목표 상태로 마무리합니다. - 채움은 `inline-size` 대신 track 전체 너비 층을 `clip-path`로 잘라 그립니다. RTL 문서에서는 채움 층을 좌우 반전합니다. `data-oc-state`, `data-oc-loading` selector를 추가합니다. - `ProgressIndicator`는 client 컴포넌트(`'use client'`)가 됩니다. Server Component에서 그대로 렌더링할 수 있습니다. - reduced-motion에서는 감기기와 하이라이트를 생략하고 퇴장은 opacity 전환만 남깁니다. 불확정 루프는 느린 속도로 유지합니다. ### Migration Notes - 기존 사용(`value` 숫자)은 그대로 동작합니다. - `[data-oc-part='indicator']`에 `inline-size`·`inset`을 직접 지정한 스타일은 이제 track 전체를 덮는 채움 층의 크기·위치를 바꿔 진행 표시를 왜곡하므로 제거하세요. 길이는 `value`·`max`로 지정하고, 색·두께·radius는 기존 `--oc-progress-indicator-*` 변수를 사용하세요. - d26137d: header·footer 아래로 스크롤되는 콘텐츠를 처리하는 `ScrollAreaEdge`와, 그 기반인 `ScrollArea`의 가장자리 넘침 상태를 추가합니다. - `ScrollArea` 루트가 `data-oc-overflow-y-start`, `data-oc-overflow-y-end`, `data-oc-overflow-x-start`, `data-oc-overflow-x-end`(`"true" | "false"`)를 노출합니다. 경계를 넘을 때만 DOM에 직접 갱신하므로 스크롤 중 React 렌더링이 없습니다. 기존 `ScrollArea`에도 이 속성이 추가되며, 그 밖의 동작과 렌더링 결과는 같습니다. - `ScrollAreaEdge`(`side="top | bottom"`, `variant="fade | progressive-blur"`)를 `ScrollArea`의 직계 자식으로 두면, 해당 쪽 bar를 덮고 그쪽으로 콘텐츠가 스크롤된 거리만큼 bar 너머로 가장자리 처리가 번집니다. 서버 컴포넌트에서도 렌더링할 수 있는 장식 요소이며 `aria-hidden`입니다. - 공개 CSS 변수 `--oc-scroll-area-edge-inset-block-start`/`-end`(bar 높이), `--oc-scroll-area-edge-bleed`(bar 너머로 번지는 길이), `--oc-scroll-area-edge-color`, `--oc-scroll-area-edge-blur`를 추가합니다. 세로 scrollbar track은 bar 높이만큼 비켜 시작하고, bar 너머로 번지는 edge는 track 아래에 그려집니다. - `prefers-reduced-transparency: reduce`에서는 `progressive-blur`가 불투명 scrim으로 바뀌고, `backdrop-filter`를 지원하지 않으면 tint를 진하게 합니다. - `ModalHeader`에 서로 독립된 `backgroundVariant`(`BackgroundVariant | 'none'`, 기본 `strong`)와 `scrollEdgeVariant`(`'none' | 'fade' | 'progressive-blur'`, 기본 `none`), `divider`(`DividerVariant | 'none'`, 기본 `normal`)를 추가합니다. scroll edge는 header를 덮고, 본문이 맨 위에 있을 때는 header 안에 머물다가 스크롤한 거리만큼만 bleed까지 번집니다. divider는 배경이 있고 scroll edge가 없는 header, 또는 `scrollEdgeAppearance="hard"`인 header에서 콘텐츠가 header 아래로 스크롤될 때 나타납니다. **기존 Modal·FloatingWindow header도 스크롤하면 하단 divider가 나타납니다.** 끄려면 `divider="none"`을 지정하세요. header에는 `data-oc-background-variant` 속성이 추가됩니다. - `ScrollAreaEdge`에 `appearance`(`'soft' | 'hard'`, 기본 `soft`, `data-oc-appearance`)를 추가하고, Modal·FloatingWindow header·footer는 이를 `scrollEdgeAppearance`로 넘깁니다. `hard`는 scroll edge를 bar 안에만 두고 bar 끝까지 균일하게 덮으며, owner가 divider로 경계를 닫습니다. - `ModalFooter`·`FloatingWindowFooter`에 같은 `backgroundVariant`(기본 `none`), `scrollEdgeVariant`(기본 `fade`), `divider`(기본 `normal`)를 추가합니다. footer의 scroll edge는 footer 안에 렌더링되어 키보드·높이 전환과 함께 움직이고, header처럼 항상 footer를 덮다가 아래에 남은 거리만큼 bleed까지 번집니다. `background={false}`이면 edge를 그리지 않고, 재질 footer의 divider는 기존 `background` 정책(`auto | true | false`)으로 표시됩니다. 기존 footer fade는 footer 위로 padding 두 배만큼 번졌지만, 이제 아래에 남은 콘텐츠가 있을 때만 남은 거리만큼 최대 `--oc-space-section-gap-large`까지 번지고 맨 끝에서는 footer 안에 머뭅니다. `FloatingWindowHeader`도 `ModalHeader`와 같은 prop을 받습니다. - `ScrollAreaEdge`는 항상 chrome을 덮고 스크롤한 거리만큼 bleed까지 늘어나며, owner가 끌 수 있는 `visible` prop(`data-oc-state="visible | hidden"`)과 공개 변수 `--oc-scroll-area-edge-fade-size`를 추가합니다. `progressive-blur` tint 기본 진하기는 74%(Background normal과 같음)입니다. bleed는 해당 쪽 끝에서 스크롤한 거리만큼만 적용되어, 맨 위·맨 끝에서는 edge가 bar 안에 머뭅니다. - `ScrollArea`의 CSS 변수 기본값을 specificity 0으로 낮춰, owner가 지정한 값이 번들의 CSS 순서와 관계없이 적용됩니다. 배포 `styles.css`에서 Modal body의 세로 scrollbar가 header 아래가 아니라 위쪽 끝에서 시작하던 문제도 함께 고칩니다. - Modal·FloatingWindow의 header·footer 높이를 측정해 본문 여백, scrollbar track, scroll edge의 공통 기준으로 씁니다. 본문이 스크롤될 때 footer가 위쪽 padding을 빼고 body가 그 공간을 대신 확보하던 동작을 없애, footer는 스크롤 상태와 관계없이 같은 크기를 유지합니다. 버튼의 화면상 위치는 그대로이며, scrollbar track은 header 아래에서 footer 위까지 정확히 맞습니다. 여러 줄 ActionArea처럼 SCSS 기본값보다 큰 footer도 본문 여백에 반영됩니다. - foundation 토큰 `--oc-atomic-blur-soft`(16px)을 추가합니다. `progressive-blur`의 최소 blur 반경은 `--oc-scroll-area-edge-blur-floor`(기본 `soft` 1px, `hard` 2px)로, tint 진하기는 `ScrollAreaEdge`에 지정하는 `--oc-scroll-area-edge-tint-opacity`로 조절합니다. ### Migration Notes - Modal·FloatingWindow header는 본문이 스크롤되면 하단 divider를 표시합니다. 이전처럼 divider 없이 쓰려면 `ModalHeader`에 `divider="none"`을 지정하세요. FloatingWindow header와 material footer도 `divider="none"`으로 끌 수 있습니다. - Modal·FloatingWindow footer의 스크롤 fade는 아래에 남은 콘텐츠가 있을 때만 footer 위로 번지고, 맨 끝까지 스크롤하면 footer 안에 머뭅니다. 별도 조치는 필요 없으며, footer 바로 위 콘텐츠가 가려지는 정도가 달라지므로 해당 화면을 확인하세요. - 4147e68: `SegmentedControl`에서 말줄임으로 잘린 라벨의 전체 텍스트를 툴팁으로 보여 줍니다. - label이 실제로 잘린 세그먼트만 툴팁이 열립니다. 잘림은 열리는 순간 1px 미만의 넘침까지 측정합니다. - 마우스는 hover, 키보드는 focus-visible로 열리고 `Escape`로 닫힙니다. 터치는 500ms 길게 누르면 열리며, 이때 손을 떼도 세그먼트를 선택하지 않습니다. - 컨트롤 하나가 툴팁 하나를 공유하고, label children 대신 텍스트만 보여 줍니다. 접근 가능한 이름에 이미 전체 텍스트가 있어 `aria-describedby`는 추가하지 않습니다. - thumb를 잡고 있는 동안에는 hover·focus로 열리지 않고, 잡은 thumb가 다른 세그먼트로 움직이면 닫힙니다. 아이콘만 있는 세그먼트와 disabled 세그먼트는 툴팁을 띄우지 않습니다. ### Migration Notes - 세그먼트를 소비자 Tooltip으로 따로 감싸고 있었다면 label이 잘린 세그먼트에서 툴팁이 두 개 열리므로 감싼 Tooltip을 제거하세요. - 2432167: `SegmentedControl`의 thumb를 iOS처럼 붙잡고 옮겨 다른 세그먼트를 고를 수 있습니다. - 선택된 세그먼트를 마우스·터치·펜으로 누른 채 옮기면 thumb가 포인터 아래 세그먼트로 칸 단위로 snap합니다. 선택은 손을 뗄 때 한 번만 확정되고, 탭과 같은 `onValueChange` 경로를 거치므로 `eventDetails.cancel()`이 그대로 동작합니다. - 시작 세그먼트로 돌아와 떼거나 `Escape`, pointer cancel이 발생하면 선택이 바뀌지 않습니다. 컨트롤 밖에서도 가장 가까운 끝 세그먼트를 따라가며, disabled 세그먼트에는 thumb가 들어가지 않습니다. - 마우스·펜은 누르는 즉시, 터치는 150ms를 누르고 있거나 가로로 먼저 움직이면 thumb를 잡습니다. 잡은 동안 thumb가 0.95배로 살짝 줄어들고 손을 떼면 돌아옵니다. reduced-motion 환경에서는 크기가 바뀌지 않습니다. - 드래그 중 `aria-checked`는 확정된 세그먼트에 남고, 선택 label 색은 thumb가 가리키는 세그먼트로 옮겨 갑니다. - 터치에서는 선택된 세그먼트에만 `touch-action: pan-y pinch-zoom`을 적용해 가로 이동을 드래그로 씁니다. thumb를 잡기 전의 빠른 세로 스와이프는 페이지 스크롤로 넘기고, 잡은 뒤에는 손을 뗄 때까지 세로 스크롤을 막습니다. 두 손가락 확대는 그대로 둡니다. - 드래그 상태 selector `data-oc-dragging="true"`(root)와 `data-oc-thumb-target="true"`(item)를 추가합니다. ### Migration Notes - 선택된 세그먼트를 누른 채 다른 세그먼트에서 떼면 이전에는 아무것도 바뀌지 않았지만, 이제 그 세그먼트가 선택됩니다. 막아야 하면 `onValueChange`에서 `eventDetails.cancel()`을 호출하세요. - 터치에서 선택된 세그먼트는 `touch-action: pan-y pinch-zoom`을 가집니다. `SegmentedControl`을 가로 스크롤 영역 안에 두었다면 선택된 세그먼트에서 시작한 가로 스와이프가 영역을 스크롤하지 않고 thumb를 옮기므로 해당 화면을 확인하세요. - 56a52f2: 범위 안에서 값 하나 또는 구간을 고르는 `Slider` 컴포넌트를 추가합니다. - 값 하나(`value`/`defaultValue`가 숫자) 또는 구간(숫자 배열, thumb마다 값 하나)을 고릅니다. 구간 thumb은 서로를 밀어내며 `minStepsBetweenValues`로 최소 간격을 둘 수 있습니다. - 포인터와 키보드 입력 모두 `step` 단위로 맞춰집니다. `marks`로 눈금을 표시하며, `true`면 `step`마다, 배열이면 지정한 값에만 그립니다. 채움 구간 안의 눈금은 색이 바뀝니다. - 각 thumb은 ``를 가지며 방향키·Page Up/Down·Home/End, RTL, `format`/`getAriaValueText` 값 안내, `name` form 제출을 지원합니다. 비제어 사용에서는 form reset이 `defaultValue`를 복원합니다. `aria-label`/`aria-labelledby`가 없거나 구간 slider에 thumb별 `getAriaLabel`이 없으면 개발 모드에서 경고합니다. `largeStep`(Page Up/Down, Shift + 방향키)도 `step` 배수에 놓이며 기본값은 범위의 1/10입니다. `dir`이 없으면 상속된 문서 방향을 따릅니다. - thumb은 두 테마 모두 흰 손잡이에 그림자와 바깥 1.5px 라인을 두고, 최소·최대에서도 컴포넌트 밖으로 나가지 않습니다. hover·누름은 thumb 주위 halo로 표시하며 드래그하는 동안 누름 표시가 유지됩니다. 단계가 30개 이하이면 드래그 중에도 thumb이 단계 사이를 부드럽게 이동하고, 더 촘촘하면 포인터를 그대로 따라갑니다. 터치는 150ms를 누르고 있거나 가로로 먼저 움직이면 thumb을 잡고, 그 전의 세로 스와이프는 값을 바꾸지 않고 페이지 스크롤로 넘깁니다. 잡은 뒤에는 손을 뗄 때까지 iOS를 포함해 페이지 스크롤을 막고, 잡기 전에 손을 떼면 탭한 위치로 값이 옮겨집니다. 누르거나 터치해서 생긴 포커스에는 focus ring을 그리지 않고, 키를 누르면 다시 그립니다. thumb의 hit area는 다른 컨트롤과 같은 최소 터치 대상(`--oc-touch-target-min`, 기본 44px)을 따릅니다. - `size`(`medium`·`small`, 기본 `medium`)는 thumb 지름과 포인터 영역 높이를 바꿉니다. - 공개 CSS 변수 `--oc-slider-{track-color,indicator-color,thumb-color,thumb-shadow,thumb-border-color}`와 selector `data-oc-component="slider"`, `data-oc-part="control|track|indicator|mark|thumb"`, `data-oc-size`, `data-oc-range`, `data-oc-disabled`, `data-oc-dragging`, `data-oc-discrete`, `data-oc-active`를 추가합니다. `Slider`는 client component입니다. ### Migration Notes - 없음 ### Patch Changes - 06db87a: `useDragScroll`: `contentRef`를 연결한 스크롤 요소가 `matchMedia`가 없는 환경(jsdom 등)에서 마운트되어도 오류를 내지 않습니다. 이때는 reduced-motion 설정을 알 수 없으므로 경계 늘어남을 쓰지 않습니다. 브라우저 동작은 바뀌지 않습니다. ### Migration Notes - 없음 - cf386f3: `useDragScroll`: oc-ui 컴포넌트가 같은 스크롤 요소의 스냅을 잠시 끈 동안(예: Carousel의 버튼 이동) 마우스 드래그를 시작해도 놓을 때 원래 스냅 위치로 정착합니다. 스냅은 드래그와 컴포넌트 이동이 모두 끝난 뒤 복원되므로 스냅 지점 사이에서 다시 켜져 튀지 않습니다. ### Migration Notes - 없음 - 7cded5c: Safari(iOS·macOS)에서 길게 누르거나 드래그할 때 텍스트가 선택되던 문제를 고칩니다. - `AnimatedNumber`, `FloatingWindow`(드래그 중), `IconButton`, `Menu` popup, `Modal` 상단 고정 영역, `PositionSnap`(드래그 중), `ScrollArea` scrollbar track, `SegmentedControl` 항목이 `user-select: none`과 함께 `-webkit-user-select: none`을 출력합니다. - 공개 API, CSS 변수, `data-oc-*` selector 변경은 없습니다. ### Migration Notes - 없음 ### Migration Notes - Modal·FloatingWindow header는 본문이 스크롤되면 하단 divider를 표시합니다. 이전처럼 divider 없이 쓰려면 `ModalHeader`에 `divider="none"`을 지정하세요. FloatingWindow header와 material footer도 `divider="none"`으로 끌 수 있습니다. - Modal·FloatingWindow footer의 스크롤 fade는 아래에 남은 콘텐츠가 있을 때만 footer 위로 번지고, 맨 끝까지 스크롤하면 footer 안에 머뭅니다. 별도 조치는 필요 없으며, footer 바로 위 콘텐츠가 가려지는 정도가 달라지므로 해당 화면을 확인하세요. - `Loading`의 `[data-oc-part='indicator'] circle`을 직접 스타일링했다면 `[data-oc-part='arc']`로 옮기세요. 트랙 원이 추가되어 `circle` 선택자가 두 원에 모두 적용되고, 회전은 `indicator`(`svg`)에서 일어납니다. - `ProgressIndicator`의 `[data-oc-part='indicator']`에 `inline-size`·`inset`을 직접 지정한 스타일은 이제 track 전체를 덮는 채움 층의 크기·위치를 바꿔 진행 표시를 왜곡하므로 제거하세요. 길이는 `value`·`max`로 지정하고, 색·두께·radius는 기존 `--oc-progress-indicator-*` 변수를 사용하세요. - `SegmentedControl` 세그먼트를 소비자 Tooltip으로 따로 감싸고 있었다면 label이 잘린 세그먼트에서 툴팁이 두 개 열리므로 감싼 Tooltip을 제거하세요. - `SegmentedControl`에서 선택된 세그먼트를 누른 채 다른 세그먼트에서 떼면 이제 그 세그먼트가 선택됩니다. 막아야 하면 `onValueChange`에서 `eventDetails.cancel()`을 호출하세요. - 터치에서 `SegmentedControl`의 선택된 세그먼트는 `touch-action: pan-y pinch-zoom`을 가집니다. 가로 스크롤 영역 안에 두었다면 선택된 세그먼트에서 시작한 가로 스와이프가 영역을 스크롤하지 않고 thumb를 옮기므로 해당 화면을 확인하세요. - `Loading`·`ProgressIndicator`는 client component가 됩니다. Server Component에서 그대로 렌더링할 수 있습니다. - 그 밖의 추가·수정(AnimatedNumber, Carousel, PageIndicator, Slider, InteractionScope, ScrollAreaEdge, `oc-motion` `hold` intent, `useDragScroll` `cancel()`, Safari 텍스트 선택 수정 등)은 대응이 필요 없습니다. ## 1.23.0 ### Changes _Commit range: `@orioncactuscorp/ui@1.22.1..HEAD`_ #### Breaking Changes - `32ad5b8` ActionArea·AlertContent 작성 순서 렌더링과 슬롯 type 판별 금지 (#424) #### Tests - `ebfd9aa` test(scroll-area): hold arrow keys until keyboard scroll settles (#401) #### Other - `43379a8` CellItem slot 래퍼의 div 전환과 블록 콘텐츠 지원 (#395) - `7bf973b` GitHub Actions 의존성 갱신과 Dependabot composite action 검사 추가 (#394) - `68e805c` IconButton assistive variant 추가 (#396) - `9763577` Safari root ScrollArea 네이티브 스크롤바 숨김 정적 CSS 전환과 WebKit 재생성 (#400) - `633084e` 컴포넌트별 CSS의 oc-components 레이어 적용과 cascade 순서 통일 (#403) - `8ef721a` Storybook 컴포넌트 CSS의 oc-components 레이어 적용으로 배포 cascade 검증 일치 (#404) - `fd0061b` strong ActionArea sub 버튼의 disabled 상태 TextButton 형태 유지 (#407) - `5d71c0f` leading/trailing slot 간격 contract 변수 공개 (#408) - `25dc87b` SectionHeader slot의 제목 첫 줄 중앙 정렬 (#410) - `d115773` TextButton loading 상태 추가와 strong ActionArea sub 버튼 loading 형태 유지 (#409) - `c77c733` Button 로딩 스피너 RTL 중앙 정렬과 소비자 aria-busy 전달 보정 (#411) - `5acfadc` Skeleton 고정 접근성 prop 타입 제외와 Alert/ActionArea children 구성 안내 (#413) - `d617089` 컴포넌트 CSS 변수의 public/internal 계약 선언 (#415) - `3ab0984` MenuContent className으로 지정하는 Menu content padding 변수 공개 (#417) - `9b75564` Bottom Modal 안 iframe 입력 포커스 시 키보드 뒤로 밀리는 시트 보정 (#418) - `5797a8e` Popup Modal 신호 없는 본문 콘텐츠 변경의 도착 높이 선노출 수정 (#420) - `01614a0` Alert·ActionArea 슬롯 래핑 시 등록 기반 인식과 초기 포커스·경고 보정 (#419) - `447a333` Stability Policy 버전 라인과 프리릴리즈 채널 명시 (#422) - `3d9d3f6` Fieldset 자동 래핑 제거와 감싼 FieldLegend의 group 이름 유지 (#425) - `1f1086a` SegmentedControl 컴포넌트 추가 (#427) ### Minor Changes - 32ad5b8: ActionArea와 AlertContent가 children을 작성 순서대로 렌더링합니다. 슬롯을 element type으로 찾아 재배치하던 동작을 없애, 소비자 컴포넌트로 감싼 슬롯도 직접 자식과 같은 결과를 냅니다. 작성 순서가 곧 화면 순서와 포커스 순서입니다. - `ActionArea`: `ActionAreaButton`을 priority 순서로 자동 정렬하지 않습니다. 작성 순서가 variant의 priority 순서와 다르면 개발 모드에서 필요한 순서를 담아 경고합니다. - `AlertContent`: `heading`·`description` prop을 맨 앞에, children을 작성 순서대로 렌더링합니다. `AlertHeading`·`AlertDescription`을 묶던 `data-oc-part="message"` 래퍼를 없앴고, heading 바로 뒤 description의 간격은 그대로입니다. `AlertActionArea`를 끝으로 옮기지 않으며, 뒤에 다른 내용이 있으면 개발 모드에서 경고합니다. - `heading` prop과 `AlertHeading`(또는 `description` prop과 `AlertDescription`)을 함께 쓰면 둘 다 렌더링합니다. 기존 경고는 유지하고, 먼저 렌더링되는 prop 쪽이 alertdialog의 이름·설명이 됩니다. - `AlertHeading`·`AlertDescription`은 각자 고유 id를 사용합니다. ### Migration Notes - `ActionAreaButton`을 variant의 priority 순서대로 작성합니다. - `strong`·`cancel`: main → equal → alternative → sub - `neutral`·`compact`: sub → alternative → equal → main - `AlertContent` children은 제목·설명 → 본문 → `AlertActionArea` 순서로 작성합니다. - `heading`·`description` prop과 같은 역할의 슬롯 컴포넌트 중 하나만 사용합니다. - `[data-oc-part="message"]`에 의존한 스타일은 `[data-oc-component="alert-heading"]`·`[data-oc-component="alert-description"]` 기준으로 옮깁니다. - 633084e: 컴포넌트별 CSS를 `@layer oc-components` 안에 넣어, CSS chunk 로드 순서와 상관없이 consumer override가 같은 결과를 내도록 맞춥니다. - 컴포넌트를 import할 때 자동으로 로드되는 `dist/components/*/*.css`를 `@layer oc-components`로 감쌉니다. 지금까지는 layer 밖에 있어서, consumer가 같은 specificity로 slot을 덮으면 production 빌드의 chunk 순서에 따라 결과가 바뀌었습니다. - `foundations.css`, `reset.css`, `styles.css`, 컴포넌트별 CSS가 모두 `@layer oc-tokens, oc-reset, oc-components;`를 먼저 선언합니다. 컴포넌트 CSS가 foundations보다 먼저 로드되어도 layer 순서가 유지됩니다. - SCSS 통합 entry(`scss/index.scss`)도 reset을 `oc-reset` layer로 출력합니다. - `styles.css`를 쓰는 환경도 영향을 받습니다. 컴포넌트 JS가 layer 밖 컴포넌트 CSS를 함께 불러왔기 때문에 실제 cascade는 컴포넌트별 CSS와 같았습니다. ### Migration Notes - layer 밖의 consumer 전역 요소 선택자(`body h2`, `p`, `button` 등)가 이제 컴포넌트 내부 요소를 덮습니다. 예를 들어 `body h2 { ... }`는 `ModalContent` 제목과 `SectionHeader` heading에 적용됩니다. 전역 요소 스타일은 `@layer base, oc-tokens, oc-reset, oc-components;`처럼 oc-ui보다 낮은 layer로 옮기세요. - Tailwind CSS v4처럼 다른 layer를 쓰는 환경은 entry CSS 맨 앞에서 `@layer theme, base, oc-tokens, oc-reset, oc-components, components, utilities;`처럼 전체 순서를 선언하세요. - specificity를 올려 컴포넌트 규칙을 이기던 임시 override(예: `.item[data-oc-component='cell-item']`)는 단일 class로 되돌려도 됩니다. - d617089: 컴포넌트 contract 변수(`--oc-{component}-*`)의 공개 범위를 문서로 선언합니다. - `docs/css-variables.md`를 추가합니다. 컴포넌트별로 변수를 override, 읽기 전용, internal로 구분하고 분류 기준, 값을 지정하는 위치, disabled 표현 방식을 함께 정리합니다. - override·읽기 전용으로 표시된 변수는 Stability Policy의 공개 계약이 됩니다. 제거·이름 변경·의미 변경은 major에서만 진행합니다. - `--oc-` prefix를 쓰지만 internal로 표시된 변수와 `--_-*` 변수는 계약이 아니며 예고 없이 바뀔 수 있습니다. - 변수 이름, 기본값, 렌더링 결과는 바뀌지 않습니다. ### Migration Notes - 없음. 다만 internal로 표시된 `--oc-*` 변수를 override하고 있다면 같은 목적의 override 변수나 prop으로 옮기는 것을 권장합니다. - 3d9d3f6: `Fieldset`이 children을 자동으로 `FieldsetContent`로 감싸지 않고 작성한 그대로 렌더링합니다. - `FieldLegend`를 소비자 컴포넌트로 감싸면 legend를 찾지 못해 legend까지 content slot(`div`) 안에 넣던 문제를 고칩니다. legend가 fieldset의 직계 자식으로 남아 group의 접근 가능한 이름이 유지됩니다. - `FieldsetContent`를 소비자 컴포넌트로 감싸도 content slot이 중복으로 생기지 않습니다. - Selector Contract에 `Fieldset` 계약(`fieldset`, `field-legend`, `fieldset-content`, `required-mark`)과 legend·content 배치 규칙을 추가합니다. - legend float 기반 WebKit 첫 레이아웃 높이 보정과 `FieldsetContent` 간격 값은 바뀌지 않습니다. ### Migration Notes - `Fieldset` 안에 legend 다음 control을 `FieldsetContent` 없이 직접 두었다면 `FieldsetContent`로 감싸세요. 감싸지 않으면 legend·control 간 세로 간격과 control 세로 정렬(flex column)이 적용되지 않습니다. - legend 없이 `aria-label`만 쓰는 `Fieldset`도 같은 레이아웃이 필요하면 children을 `FieldsetContent`로 감싸세요. - `FieldGroup`과 이미 `FieldsetContent`를 명시한 코드는 변경할 필요가 없습니다. - 68e805c: `IconButton`에 보조 액션용 `variant="assistive"`를 추가합니다. - 아이콘과 hover·focus·active interaction 색이 `--oc-color-theme-label-alternative`를 사용합니다. TextButton `assistive`와 같은 색 계약입니다. - root에 `data-oc-variant="assistive"`가 출력됩니다. - disabled 색(`--oc-color-theme-label-disable`), 키보드 포커스, 터치 타깃은 기존 `normal`·`primary`와 같습니다. 기본값은 계속 `normal`입니다. ### Migration Notes - 없음. 도움말 버튼처럼 소비자 CSS로 `label-alternative` 아이콘 색을 지정하던 곳은 `variant="assistive"`로 바꿀 수 있습니다. - 1f1086a: 하나의 값을 고르는 `SegmentedControlRoot`, `SegmentedControlItem` 컴포넌트를 추가합니다. - iOS형 solid 표현: 회색 track 위에서 선택된 세그먼트로 thumb가 이동하며, reduced-motion에서는 즉시 이동합니다. - radio group 시맨틱(`role="radiogroup"`/`radio`): 방향키로 이동하면 바로 선택되고, 양끝에서 순환하며, RTL에서 반전되고, disabled 세그먼트는 건너뜁니다. `name`으로 form에 값을 제출하며, 비제어 사용에서는 form reset이 `defaultValue`를 복원합니다. - 세그먼트 콘텐츠는 Button과 같은 `leadingIcon`·라벨·`trailingIcon` 또는 `icon` 단독 구성을 지원합니다. 아이콘만 있는 세그먼트와 root에는 `aria-label`/`aria-labelledby`가 필요하며, 없으면 개발 모드에서 경고합니다. - `size`(`large`·`medium`·`small`, 기본 `medium`)에 따라 컨트롤 전체 높이가 같은 size의 Button과 같습니다. `fullWidth`는 컨테이너 폭을 채우고, 세그먼트는 등폭이며 공간이 부족하면 라벨을 말줄임합니다. - 공개 CSS 변수 `--oc-segmented-control-{track-color,thumb-color,thumb-shadow,padding,radius,label-color,label-selected-color,label-disabled-color}`와 selector `data-oc-component="segmented-control"`, `data-oc-part="item|thumb|content|label|leading-icon|trailing-icon|icon"`, `data-oc-thumb-ready`를 추가합니다. - 선택에 따라 다른 panel을 보여 주는 경우는 Tabs를 사용합니다. ### Migration Notes - 없음 - 5acfadc: Skeleton이 항상 고정하는 접근성 속성을 타입에서도 제외합니다. - `SkeletonProps`에서 `role`, `tabIndex`, `aria-hidden`을 제거합니다. 이 prop들은 이전에도 전달해도 무시됐습니다. - spread로 전달된 `role`/`tabIndex`도 계속 렌더링하지 않고, `aria-hidden="true"`를 유지합니다. 런타임 동작은 바뀌지 않습니다. - 로딩 상태는 Skeleton을 감싸는 영역의 `aria-busy="true"`와 상태 문구로 알리도록 Storybook과 selector 계약 문서에 안내를 추가합니다. ### Migration Notes - ``에 `role` 또는 `tabIndex`를 직접 넘기던 코드는 타입 오류가 나므로 해당 prop을 삭제합니다. 원래 렌더링되지 않던 값이라 화면과 접근성 트리는 바뀌지 않습니다. - 로딩 상태를 보조기기에 알려야 하면 Skeleton 대신 감싸는 영역에 `aria-busy="true"`와 상태 문구(예: 시각적으로 숨긴 `role="status"` 텍스트)를 둡니다. - 5d71c0f: leading/trailing slot과 콘텐츠 사이 간격을 contract 변수로 공개합니다. 기본 간격 값은 바뀌지 않습니다. - `TextButton`의 `--oc-text-button-gap`(기본 `0.125em`) 추가. Alert action에도 적용 - `TextInput`, `Select`, `TextArea`, `InputGroup`의 `--oc-field-control-gap`(기본 `--oc-space-item-gap-small`) 추가. content row slot 간격, native 입력 slot offset, floating 라벨 offset이 같은 값을 따름 - 기존 `--oc-button-gap`, `--oc-cell-gap`을 컴포넌트가 직접 선언하지 않고 internal default로 기본값 제공. host와 조상 지정값 모두 CSS 로딩 순서와 무관하게 적용 - `Menu`의 `href`/`render` item도 `--oc-cell-gap`을 따르도록 수정. 이전에는 `0.5em` 고정 - 변수별 지정 위치는 Selector Contract 문서의 "Slot 간격 계약" 참고 ### Migration Notes - 필요한 consumer 대응은 없습니다. - 조상 요소에 `--oc-button-gap` 또는 `--oc-cell-gap`을 지정해 두었다면 이전에는 무시되던 값이 이제 하위 컴포넌트에 적용됩니다. - d115773: button·anchor 형태 `TextButton`에 진행 중 상태용 `loading` prop을 추가합니다. - Button의 loading 계약을 따릅니다. variant 글자색을 유지하고, 아이콘 크기 상자의 스피너를 label 위에 겹쳐 폭과 접근성 이름을 보존합니다. - 포커스를 유지한 채 `aria-disabled="true"`, `aria-busy="true"`를 출력하고 click, Enter, Space와 폼 제출을 막습니다. `disabled`와 함께 쓰면 disabled가 우선합니다. - root에 `data-oc-loading="true"`와 `data-oc-disabled="true"`가 출력됩니다. 비활성 스타일 기준이 `[aria-disabled='true']`에서 `:disabled`, `[data-oc-disabled='true']`, 로딩이 아닌 `[aria-disabled='true']`로 바뀝니다. ### Migration Notes - 없음. TextButton 로딩 상태를 직접 스타일링하려면 `[data-oc-loading='true']`를 기준으로 사용합니다. ### Patch Changes - fd0061b: `variant="strong"` ActionArea의 `priority="sub"` ActionAreaButton이 `disabled`일 때도 TextButton(assistive, small) 형태를 유지합니다. - 이전에는 `disabled`가 되면 outlined Button(assistive, large, fullWidth)으로 바뀌어 상태 전환마다 ActionArea 높이와 시각 위계가 달라졌습니다. - `disabled`는 TextButton에 전달됩니다. button 형태는 native `disabled`, `href` 형태는 `aria-disabled="true"`, `tabIndex=-1`과 activation 차단을 사용합니다. - `loading` sub 액션은 기존처럼 Button으로 렌더링됩니다. neutral·compact·cancel variant의 동작은 바뀌지 않습니다. ### Migration Notes - 없음. strong ActionArea의 sub 버튼을 TextButton 형태로 유지하려고 `disabled` 대신 `aria-disabled`와 click guard를 쓰던 곳은 `disabled`로 되돌릴 수 있습니다. - d115773: `variant="strong"` ActionArea의 `priority="sub"` ActionAreaButton이 `loading`일 때도 TextButton(assistive, small) 형태를 유지합니다. - 이전에는 `loading`이 되면 outlined Button(assistive, large, fullWidth)으로 바뀌어 상태 전환마다 ActionArea 높이와 시각 위계가 달라졌습니다. - `loading`은 TextButton의 진행 중 상태로 전달됩니다. neutral·compact·cancel variant의 동작은 바뀌지 않습니다. ### Migration Notes - strong ActionArea의 `loading` sub 버튼을 `[data-oc-component='button']`이나 `[data-oc-loading='true']` Button 스타일로 다루던 곳은 `[data-oc-component='text-button']`을 기준으로 바꿉니다. - 01614a0: Alert와 ActionArea의 슬롯 컴포넌트를 소비자 컴포넌트로 감싸도 인식되도록 슬롯 판별을 owner 등록 방식으로 바꿉니다. - `AlertAction`·`AlertActionArea`를 감싸도 `initialFocus="first" | "least-destructive"`와 `autoFocus` 초기 포커스가 적용되고, "at least one AlertAction" 경고가 잘못 뜨지 않습니다. - `AlertActionArea initialFocus="least-destructive"`에서 `negative` action이 앞에 있으면 첫 action(negative)에 포커스가 가던 문제를 고칩니다. 이제 `assistive` 또는 negative가 아닌 action에 포커스합니다. - `AlertHeading`·`AlertDescription`을 감싸도 alertdialog의 `aria-labelledby`·`aria-describedby`가 연결됩니다. - `ActionAreaButton`을 감싸도 main 개수·`variant="cancel"` 경고가 적용됩니다. - 개발 모드 경고는 렌더 시점이 아니라 마운트·슬롯 등록 시 판정하고, 같은 경고는 인스턴스마다 한 번만 표시합니다. Alert 경고는 Alert가 열린 뒤에만 표시하고, 서버 렌더링 중에는 두 컴포넌트 모두 경고하지 않습니다. - 공개 props, 타입, `data-oc-*` selector는 바뀌지 않습니다. ### Migration Notes - 없음 - c77c733: Button의 `loading` 처리 두 가지를 바로잡습니다. - `loading`이 아닐 때 소비자가 넘긴 `aria-busy`를 그대로 DOM에 전달합니다. 이전에는 `loading`이 false이면 `aria-busy`가 항상 제거됐습니다. `loading` 중에는 계속 `aria-busy="true"`로 고정합니다. - RTL(`dir="rtl"`)에서 로딩 스피너가 버튼 중앙에 오도록 보정합니다. 이전에는 스피너가 자기 너비만큼 왼쪽으로 치우쳤습니다. ### Migration Notes - 없음 - 43379a8: `CellItem` slot에 블록 요소를 넣으면 HTML 콘텐츠 모델을 위반하던 문제를 수정합니다. - `leading`·`content`·`text`·`label`·`description`·`trailing` slot 래퍼를 `span` 대신 `div`로 렌더링합니다. - `h2`·`p`·`ul`·`div` 같은 블록 요소를 slot에 그대로 넣어도 유효한 HTML이 됩니다. - `data-oc-part` 이름·계층과 레이아웃은 변경하지 않습니다. - `AccordionSummary`는 slot이 native button 안에 있어 기존 `span`을 유지합니다. ### Migration Notes - `span[data-oc-part='content']`처럼 요소 이름까지 지정한 selector는 공개 계약이 아니므로 `[data-oc-component='cell-item'] [data-oc-part='content']` 형태로 사용하세요. - 3ab0984: `MenuContent`의 `className`에 지정한 `--oc-menu-content-padding`이 Menu popup padding과 separator 폭·간격에 적용됩니다. - 이전에는 popup 요소가 기본값 `1em`을 직접 선언해 `className`이 붙는 positioner에서 지정한 값이 가려졌습니다. - `--oc-menu-content-padding`을 internal에서 override 변수로 승격합니다. 기본값은 `1em` 그대로입니다. ### Migration Notes - 없음. popup 요소를 `[data-oc-component='menu-content']` selector로 직접 지정해 padding을 바꾸던 곳은 `MenuContent className`의 `--oc-menu-content-padding`으로 옮길 수 있습니다. - 9b75564: Bottom Modal 안 iframe의 입력 필드에서 소프트 키보드가 열릴 때 시트가 키보드 뒤로 밀려나던 문제를 바로잡습니다. - iframe 내부 포커스는 상위 문서의 `focusin`으로 전달되지 않아 키보드 회피 세션이 시작되지 않았고, 시트가 줄어든 visual viewport 높이로 작아진 채 layout viewport 하단에 붙어 키보드 뒤에 가려졌습니다. - 터치 환경에서 Modal 안 iframe이 포커스를 받으면 시트 높이를 유지하는 세션을 시작합니다. 키보드 inset은 viewport가 실제로 줄어들 때만 적용하므로 키보드를 띄우지 않는 iframe 탭은 화면을 바꾸지 않습니다. - 포커스가 상위 문서로 돌아오거나 포커스를 가진 iframe이 제거되면 세션을 닫습니다. 시트 드래그·헤더 탭·배경 드래그의 키보드 닫기도 iframe 포커스를 해제합니다. ### Migration Notes - 없음 - 5797a8e: Popup(`resize='content'`, `contentTransition='auto'`)의 ModalBody 콘텐츠가 depth·탭 전환 없이 바뀔 때 도착 높이가 한 프레임 먼저 그려진 뒤 이전 높이부터 전환되던 문제를 수정합니다. - 이전에는 신호 없는 콘텐츠 변경을 ResizeObserver로 감지한 뒤 다음 animation frame에서 이전 높이를 고정해, 변경 직후 프레임에 최종 높이가 노출되었습니다. - 이제 ModalBody 안의 노드 추가·제거, 텍스트 변경, `style` 외 속성 변경은 페인트 전 MutationObserver 전달 시점에 이전 높이를 고정하고 바로 전환합니다. - inline `style`로 높이를 매 프레임 바꾸는 자체 애니메이션(예: NavigationSection expand)은 기존처럼 관찰 기반으로 분류해 surface가 자연 추종합니다. - 이미지 로드, inline `style`만 바뀌는 변경, header/footer 콘텐츠 변경은 기존 관찰 경로를 유지합니다. ### Migration Notes - 없음 - 9763577: Safari에서 `root` `ScrollArea`가 문서 루트의 네이티브 scrollbar를 숨기지 못하던 문제를 수정합니다. - 문서 루트 scrollbar 숨김 규칙을 런타임 `