@orioncactuscorp/ui 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,169 @@
 # Changelog
 
+## 1.18.0
+
+### Migration Notes
+
+- 기존 컴포넌트 사용 코드의 필수 변경은 없습니다.
+- `ocGesture`는 `@orioncactuscorp/ui/utils/gesture`에서 가져옵니다. 속도는 px/s, 시간은 ms이므로 기존 px/ms 계산을 교체할 때 단위를 변환하세요.
+- Modal handle bar는 이제 `handle-area`의 자식이며 Interaction을 포함합니다. handle의 직계 자식 구조나 의사 요소에 의존하는 커스텀 스타일을 확인하세요.
+- ModalHeader의 자체 영역 탭은 body를 맨 위로 스크롤합니다. 제외할 콘텐츠는 `data-oc-modal-no-drag` 또는 header `onClick`의 `preventDefault()`를 사용하세요.
+- 키보드 포커스 필드는 header 아래로 정렬됩니다. 별도 포커스 스크롤 보정이 있다면 중복 여부를 확인하세요.
+- iOS bottom sheet에서는 키보드 툴바 ▲(이전)가 비활성화되는 제한이 있습니다. 이전 필드는 body를 스크롤해 탭할 수 있습니다.
+
+### Changes
+
+<!-- generated:start -->
+
+_Commit range: `@orioncactuscorp/ui@1.17.0..HEAD`_
+
+#### Documentation
+
+- `d358fd0` docs(changeset): complete release migration notes
+
+#### Other
+
+- `f5d87e5` Gradient Mask 스토리 스크롤 오류 수정 (#289)
+- `56ade11` BackgroundIconButton 원형 키보드 포커스 개선 (#290)
+- `c6e3f7b` Modal bottom sheet 핀치 줌 geometry 오인 수정 (#293)
+- `c80a504` Modal 키보드 세션 시트 안정화 및 포커스 필드 정렬 (#292)
+- `3f75e6f` Modal 키보드 모듈 개념별 분리 리팩토링 (#299)
+- `9ef1278` Modal 키보드 reveal 스크롤 정수 픽셀 쓰기 (#300)
+- `cfac798` Modal handle 드래그 hit 영역 확장 및 hover 피드백 개선 (#294)
+- `a824aac` ocGesture 제스처 계산 유틸 공개 및 경계 저항 공통화 (#298)
+- `f383ddb` Modal header 탭으로 body 맨 위 스크롤 (#301)
+- `9a71706` Modal 키보드 툴바 포커스 이동 시 시트 흔들림 수정 (#302)
+- `116ad0b` Modal 키보드 툴바 이동 preventScroll 포커스 통일 및 ▲ 한계 문서화 (#303)
+- `878c50d` Modal 시트 성장 e2e 정지 구간 한도 CI 지터 여유 확보 (#304)
+<!-- generated:end -->
+
+### Minor Changes
+
+- a824aac: `utils/gesture`의 `ocGesture` 진입점을 추가합니다. 경계 저항, 마찰 감속과 투사, px/s 기반 속도 추적기를 제공하며 Modal·PositionSnap의 rubber band 계산을 공통화합니다. 기존 스냅·닫기·속도 측정 정책은 유지합니다.
+
+  ### Migration Notes
+  - 기존 컴포넌트 소비자의 필수 변경은 없습니다.
+  - 제스처 유틸은 `@orioncactuscorp/ui/utils/gesture`에서 `ocGesture`로 가져옵니다.
+  - 속도는 px/s, 시간은 ms입니다. 기존 px/ms 기반 구현을 교체할 때 단위를 변환하세요.
+  - 감속 기본값은 normal(0.998)이며 fast(0.99)는 `{ rate: ocGesture.decelerationRates.fast }`로 지정합니다.
+
+- f383ddb: `ModalHeader`의 자체 영역(title, 빈 공간, handle-area)을 탭하면 body가 sheet 모션 spring으로 맨 위로 스크롤됩니다. iOS status bar 탭이 페이지를 맨 위로 보내는 것과 같은 보조 제스처이며, header 안의 컨트롤 클릭과 `data-oc-modal-no-drag` 콘텐츠(drag 시작을 막는 기준과 동일), 소비자 `onClick`의 `preventDefault`, drag 뒤의 click, body가 이미 맨 위인 경우는 제외됩니다. reduced-motion에서는 즉시 이동합니다. 키보드 필드 reveal과 header 탭 스크롤은 모달당 하나의 스크롤러를 공유해 새 이동이 진행 중인 이동을 이어받습니다.
+
+  ### Migration Notes
+  - 기존 소비자의 필수 코드 변경은 없습니다. header의 자체 콘텐츠에서 맨 위 스크롤을 제외하려면 `data-oc-modal-no-drag`를 지정하거나 header `onClick`에서 `preventDefault()`를 호출하세요.
+
+### Patch Changes
+
+- 116ad0b: Modal bottom sheet에서 iOS 키보드 툴바 ▼(다음)가 켜진 채 이동하지 않거나 이동 뒤 시트가 흔들리던 문제를 수정합니다. iOS는 포커스 시점에 ▲▼ 상태를 스냅샷하고 누르는 시점에 이웃 필드의 중심이 가려지지 않았는지 다시 판정하므로, 탭 가로채기와 툴바 이동 모두 필드를 최종 위치(header 바로 아래)에 둔 채 `preventScroll`로 포커스해 스냅샷과 최종 레이아웃을 같게 하고 WebKit의 visual viewport pan을 없앱니다. ▲(이전)는 이전 필드가 항상 header 뒤에 놓여 iOS가 이동 대상으로 보지 않으므로 bottom sheet에서는 꺼진 상태로 유지됩니다.
+
+  ### Migration Notes
+  - 기존 소비자의 필수 코드 변경은 없습니다. iOS bottom sheet에서는 이전 필드가 header 뒤에 놓여 키보드 툴바 ▲(이전)가 비활성화되는 제한이 있습니다. 이전 필드로 돌아가려면 body를 스크롤해 해당 필드를 탭하세요.
+
+- 9a71706: Modal bottom sheet에서 iOS 키보드 툴바의 ▲▼(또는 Tab, 프로그램 포커스)로 다음 입력 필드로 이동할 때 시트가 흔들리던 문제를 수정합니다. WebKit이 스스로 옮기는 포커스는 visual viewport를 pan하므로, 이전 필드의 `focusout`이 다음 필드를 알려주는 시점에 그 이동을 이어받아 탭 가로채기와 같은 경로(최종 위치에 임시로 둔 채 `preventScroll` 포커스, 원위치 복귀, sheet 모션 spring reveal)로 처리합니다. WebCore는 handler가 포커스를 옮기면 자기 이동을 버리므로 pan이 일어나지 않습니다.
+
+  ### Migration Notes
+  - 없음
+
+- cfac798: `drag='handle'` 또는 `drag='content'` Modal에서 handle을 잡기 쉽도록 `ModalHeader` handle 구조를 확장합니다. 32×4px bar `data-oc-part="handle"`은 그대로 두고 `data-oc-part="handle-area"`로 감싸며, 두 drag 모드에서 `data-oc-draggable="true"`인 공통 pointer 영역을 사용합니다. fine pointer에서는 surface 좌우 끝까지 닿는 16px 상단 strip, coarse pointer에서는 중앙 72×44px pad가 pointer를 받습니다. fine pointer의 full-width strip은 header control과 겹치지 않도록 compact header에서도 상단 clearance를 보장합니다. hover 가능 기기에서는 strip hover 시 bar가 제자리에서 1.1배로 커지고(`expand` smooth spring) bar 안의 `Interaction`(light)이 hover/active tint를 표시하며, 누르는 동안 drag hook이 handle-area에 `data-oc-state="pressed"`를, release 후 pointer가 area 위에 남아 있으면 `data-oc-state="hover"`를 내보내 브라우저 `:hover` 공백 동안에도 확대 상태가 끊기지 않습니다. `drag='content'`에서는 handle-area와 header 전체가 같은 chrome drag arbitration을 사용하고, `drag='handle'`에서는 handle-area만 drag를 시작합니다. reduced-motion에서는 scale 없이 tint만 남습니다. `ModalNavigationSection` handle의 동작은 바뀌지 않습니다.
+
+  ### Migration Notes
+  - `[data-oc-part="handle"]`은 이제 `[data-oc-part="handle-area"]`의 자식이며 `Interaction` 자식을 가집니다. bar 시각 커스터마이즈는 기존처럼 `[data-oc-part="handle"]`을 대상으로 하되, `::before`/`::after`나 자식 구조에 의존하는 override가 있으면 확인하세요.
+
+- c80a504: Modal bottom sheet의 소프트 키보드 대응을 개선합니다. 키보드 세션 동안 `resize="content"` 시트의 높이를 고정해 키보드 예약 공간이 콘텐츠 높이로 읽혀 시트 상단이 위로 밀리던 문제를 해결하고, 포커스된 입력 필드를 키보드 경계에 최소한으로 붙이는 대신 ModalHeader 바로 아래(scroll-padding 시작 edge)로 정렬합니다. 필드가 키보드에서 멀리 놓이므로 WebKit이 visual viewport를 pan하거나 배경 페이지를 스크롤할 이유가 사라져 시트 떨림이 줄고, 활성 필드 아래의 다음 필드가 함께 드러납니다. 이미 정렬된 필드는 키보드에 가려질 때만 다시 정렬합니다. 키보드 높이 메모리는 viewport 폭과 키패드 종류(text/numeric, `inputmode` 우선)별로 기록해 숫자 키패드와 QWERTY가 서로를 잘못 seed하지 않으며, `readOnly` 필드와 `inputmode="none"` 필드는 키보드 회피 세션을 시작하지 않습니다. 정렬 앵커는 필드 바로 위의 라벨(`labels`, `aria-labelledby`)까지 포함하고, 정렬은 focus 이벤트 안에서 동기적으로 실행되며, 터치 환경(coarse pointer)에서는 키보드 높이를 측정하기 전인 첫 포커스에서도 정렬합니다. 정렬은 콘텐츠 끝(키보드 예약 공간 포함)을 넘지 않아 마지막 필드는 rest와 같은 간격으로 footer 위에 놓입니다. 터치 환경에서는 편집 가능한 필드에 대한 탭을 가로채 WebKit이 포커스 rect를 읽는 동안만 필드를 최종 위치에 두고(paint 없이) `preventScroll`로 포커스한 뒤 원위치로 돌려 iOS의 visual viewport pan 자체를 없애고, 이어서 sheet 모션 spring으로 부드럽게 스크롤해 드러내며(reduced motion에서는 즉시), 탭 위치의 caret을 복원합니다. 라벨을 탭해 필드가 포커스되는 경우도 같은 경로를 탑니다. 키보드 세션 중 body 스크롤이 끝에 닿아도 visual viewport pan으로 이어지지 않도록 overscroll을 억제하며, footer와 pan 보정의 chase 시간을 iOS 키보드 애니메이션(약 0.25초)에 맞춰 줄였습니다. 키보드가 닫힐 때 footer는 blur 시점부터 iOS 키보드 해제 choreography(약 0.5초)에 맞춘 sheet 모션으로 내려가고(viewport 레이어에 `data-oc-modal-keyboard-closing="true"` 방출), pan 보정은 복원 샘플을 그대로 따르며, 세션 동안 footer 높이 측정값을 고정해 safe-area inset 변화로 body 끝 여백이 줄어들며 콘텐츠가 밀리는 현상을 막습니다. 이전 세션이 닫히는 동안 다른 필드를 포커스해도 rest baseline을 이어받아 시트 shell이 키보드 높이로 접히지 않습니다.
+
+  ### Migration Notes
+  - 기존 소비자의 필수 코드 변경은 없습니다. 키보드가 열린 동안 입력 필드는 header 아래로 정렬되므로, 소비자가 별도로 구현한 포커스 스크롤 보정과의 중복 여부를 확인하세요.
+
+- c6e3f7b: Modal bottom sheet가 핀치 줌으로 줄어든 visual viewport를 소프트 키보드로 오인해 스냅 높이와 시트 크기를 매 프레임 재계산하던 문제를 수정합니다. `visualViewport.scale`이 1이 아니면 layout viewport 기준 geometry를 유지하므로 줌 중에도 시트 크기와 위치가 고정되고, popup snap 위치 재동기화도 줌 중에는 건너뜁니다. bottom sheet surface의 `touch-action`이 `pan-y`에서 `pan-y pinch-zoom`으로 바뀌어 시트 위에서도 핀치 줌이 시작됩니다.
+
+  드래그 핸들에서도 핀치 줌을 허용하고, 단일 터치 드래그 중 멀티터치로 전환하면 드래그와 스크롤 잠금을 해제하고 시작 위치로 복귀합니다.
+
+  ### Migration Notes
+  - 없음
+
+- 9ef1278: Modal 키보드 reveal 스크롤이 프레임마다 정수 픽셀을 쓰도록 바꿔, 소수 스크롤 위치를 버림 처리하는 Safari에서 이동 끝에 1px이 튀어 오르던 현상을 제거합니다.
+
+  ### Migration Notes
+  - 없음
+
+- 56ade11: BackgroundIconButton의 키보드 포커스 링이 작은 사각형 본체 대신 실제 원형 배경 바깥을 따라 표시되도록 수정합니다. 버튼 크기와 터치 영역은 유지합니다.
+
+  ### Migration Notes
+  - 없음
+
+## 1.17.0
+
+### Changes
+
+<!-- generated:start -->
+
+_Commit range: `@orioncactuscorp/ui@1.16.0..HEAD`_
+
+#### Other
+
+- `d27d025` Modal 본문 끝 ActionArea 자동 여백 보정 (#282)
+- `35d3f23` Badge variant 전환 및 border 계약 개선 (#284)
+- `757780c` Modal popup 콘텐츠 전환 플래시 및 footer 크롬 플립 개선 (#285)
+- `cae0595` BackgroundIconButton disabled 전환 오버슈트 수정 (#286)
+<!-- generated:end -->
+
+### Minor Changes
+
+- 35d3f23: Badge의 canonical 기본 variant인 `default`를 추가하고, `label-strong` 배경과 `background-normal-normal` 라벨 색을 적용합니다. 기존 `normal` variant는 `label-alternative` 라벨과 `fill-normal` 배경을 유지합니다. Badge 배경 전환을 variant별 opacity 레이어로 분리하고, `oc-border` 기반의 `--oc-badge-border-width` 및 `--oc-badge-border-color` contract를 제공합니다.
+
+  Migration Notes:
+  - `variant`를 생략한 Badge의 `data-oc-variant` 값이 `normal`에서 `default`로 변경됩니다. 해당 selector를 직접 커스터마이즈하는 소비자는 `default`를 기준으로 업데이트하세요.
+  - `variant='default'`는 `label-strong` 배경과 `background-normal-normal` 라벨 색을 사용합니다.
+  - 기존 `variant='normal'`은 `label-alternative` 라벨과 `fill-normal` 배경을 유지합니다.
+  - Badge border는 기본적으로 투명하며, `--oc-badge-border-color`와 선택적인 `--oc-badge-border-width` override로 표시할 수 있습니다.
+
+- 757780c: `ModalRoot`에 open/close transition이 끝난 뒤 호출되는 `onOpenChangeComplete(open)` 콜백을 추가합니다. depth navigation처럼 exit 동안 유지해야 하는 view 상태를 닫힘 완료 후 초기화할 때 사용합니다.
+
+  ### Migration Notes
+  - 없음
+
+### Patch Changes
+
+- 757780c: 렌더링할 액션, caption, extraContent가 없는 `ActionArea`는 `data-oc-empty="true"`를 방출하고 자체 padding과 background를 접습니다. `ModalFooter`와 `FloatingWindowFooter`의 직속 빈 `ActionArea`는 footer 예약을 `0`으로 만들어 body는 기본 하단 여백만 유지합니다.
+
+  ### Migration Notes
+  - 빈 `ActionArea`로 하단 여백을 만들던 경우 명시적 spacer로 바꾸세요.
+  - depth navigation에서 root depth에 액션이 없어도 `ModalFooter`와 `ActionArea`를 계속 마운트해 두면 root에서는 예약이 접히고 다음 depth부터 버튼 높이가 예약됩니다.
+
+- d27d025: ModalBody 마지막 직속 ActionArea가 본문 여백과 중복되지 않도록 자동 보정합니다.
+
+  ### Migration Notes
+  - 기존 ModalBody 마지막 ActionArea에 지정한 중복 여백 override는 제거해도 됩니다.
+  - 이 조합에서는 desktop action group의 기본 max width가 `none`이 되며, standalone ActionArea의 `--oc-atomic-width-content` 기본값은 유지됩니다.
+  - 의도적으로 다른 간격을 사용하는 경우에는 기존 `--oc-action-area-*` override를 유지할 수 있습니다.
+
+- 757780c: WebKit에서 `Fieldset`이 첫 레이아웃 때 legend 높이만큼 더 크게 그려졌다가 내부 재배치 시점에 줄어들던 문제를 수정합니다. legend를 float로 배치해 모든 엔진에서 같은 높이로 그려집니다.
+
+  ### Migration Notes
+  - `FieldLegend` 다음 콘텐츠와의 간격이 `.content`의 시작 margin에서 legend의 끝 margin으로 옮겨졌습니다. 간격 값은 동일하며, legend와 콘텐츠 사이 간격을 직접 덮어쓰던 CSS가 있다면 legend 쪽으로 옮기세요.
+
+- 757780c: Modal popup 콘텐츠 전환이 `navigationDepth` 변경을 명시적 교체 신호로 사용해 목적지 레이아웃 플래시 없이 이전 높이에서 새 높이로 전환합니다. 전환 중 header/footer 측정값이 늦게 반영되면 목표 높이를 재타겟하고, footer 스크롤 크롬은 목적지 scrollport 기준으로 판정해 전환 중 깜빡이지 않습니다. `ModalFooter`를 언마운트해도 측정된 footer 높이가 body 여백에 남지 않습니다.
+
+  ### Migration Notes
+  - depth view 교체에 높이 전환을 기대하는 popup은 `ModalRoot`의 `navigationDepth`를 view와 같은 커밋에서 갱신하세요. 신호 없는 콘텐츠 변화는 기존처럼 안착 후 best-effort로 전환되며, 큰 교체는 한 프레임 동안 목적지 레이아웃이 먼저 보일 수 있습니다.
+  - 내부 attribute `data-oc-modal-sheet-resizing`이 `data-oc-modal-resizing`으로 바뀌었습니다. 공개 selector 계약은 아니지만 이 attribute를 참조하던 CSS가 있다면 갱신하세요.
+  - Reduced motion에서 popup 높이 전환은 즉시 완료되며 `data-oc-content-transition-state="changing"` 구간이 없습니다.
+
+- 757780c: bottom sheet의 depth 전환이 끊기던 문제를 수정합니다. `navigationDepth`가 `0`보다 커서 drag 닫기가 차단된 상태에서는 canvas settle의 시작 translate가 gesture rubber-band 한계로 clamp되어 sheet가 먼저 튀어오른 뒤 멈췄다가 남은 거리만 움직였습니다. canvas settle은 gesture 범위 밖의 programmatic geometry로 취급해 clamp하지 않고, backdrop dim은 목적지 rest 값을 유지해 전환 중 1에서 내려갔다 돌아오지 않습니다. 또한 depth 변경 커밋에서 콘텐츠를 즉시 다시 재어 같은 프레임에 settle을 시작하고, body content를 border-box로 관찰해 header/footer 예약 반영 시 진행 속도를 이어받아 재타겟합니다.
+
+  ### Migration Notes
+  - 없음
+
+- cae0595: BackgroundIconButton disabled 전환이 중간에 밝게 튀었다가 되돌아오던 문제를 수정합니다.
+  - disabled fill을 컴포넌트 루트의 불투명 레이어로 분리하고 `opacity`만 교차 페이드합니다. 장식 레이어(`backdrop-filter`, `::before` multiply, `::after` plus-lighter)는 전환 중 그대로 유지됩니다.
+  - 결과 합성이 두 끝 렌더링의 선형 보간(`(1−p)·enabled + p·disabled`)이 되어 blend/clipping 비선형성과 무관하게 오버슈트가 발생하지 않습니다.
+  - disabled fill 색을 `--oc-background-icon-button-disabled-background-color`로 노출합니다. 기본값은 `--oc-color-theme-interaction-disable`입니다.
+
+  Migration Notes
+  - disabled 상태에서 `--oc-background-icon-button-background-color` 값이 더 이상 보이지 않습니다. 기존에는 이 override가 disabled 배경에도 적용됐습니다. disabled 배경을 조정하려면 `--oc-background-icon-button-disabled-background-color`를 사용하세요.
+  - 컴포넌트 루트가 `::after` 의사 요소를 사용합니다. oc-ui 컴포넌트 루트에 직접 `::after`를 선언하던 소비자 CSS는 충돌할 수 있습니다.
+  - public export, prop, `data-oc-*` selector 계약은 변경되지 않았습니다.
+
 ## 1.16.0
 
 ### Changes

package/README.md

@@ -72,7 +72,7 @@ export default function Example() {
 
 ## Documentation
 
-이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/<파일명>`으로 볼 수 있습니다.
+이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/<파일명>`으로 볼 수 있습니다.
 
 | 문서                                                           | 내용                                                                   |
 | -------------------------------------------------------------- | ---------------------------------------------------------------------- |
@@ -146,6 +146,45 @@ Modal은 DOM 순서의 첫 control을 기계적으로 선택하지 않습니다.
 - `initialFocus="first-interactive"`는 첫 tabbable 요소, `initialFocus="title"`은 등록된 title을 명시합니다.
 - `initialFocus="content"`는 dialog container를 포커스하는 호환용 escape hatch입니다. 신규 사용은 title 또는 구체적인 ref/function을 우선하세요.
 
+### Modal depth navigation
+
+같은 Modal 안에서 view를 교체하는 depth navigation은 `ModalRoot`의 `navigationDepth`로 현재 깊이를 알립니다. 이 값은 두 가지 계약을 동시에 가집니다.
+
+- `0`보다 크면 drag, backdrop pointer 같은 암묵적 닫기가 기본 차단됩니다. `dismissBehavior`로 reason별 정책을 조정할 수 있습니다.
+- `contentTransition="auto"`인 popup은 `navigationDepth` 변경을 명시적 교체 신호로 사용합니다. view와 depth가 같은 커밋에서 바뀌면 surface가 이전 높이를 고정한 채 새 높이로 전환하므로 목적지 레이아웃이 먼저 보이는 플래시가 없습니다.
+
+```tsx
+const [depth, setDepth] = useState(0);
+
+<ModalRoot open={open} onOpenChange={setOpen} navigationDepth={depth}>
+  <ModalContent variant='popup' resize='content'>
+    <ModalHeader
+      title='문의하기'
+      leadingContent={
+        depth > 0 ? (
+          <BackButton onClick={() => setDepth(depth - 1)} />
+        ) : undefined
+      }
+      bottomContent={
+        <ProgressIndicator value={depth} max={2} aria-label='진행률' />
+      }
+    />
+    <ModalBody>{views[depth]}</ModalBody>
+    <ModalFooter>
+      <ActionArea variant='neutral'>{actions[depth]}</ActionArea>
+    </ModalFooter>
+  </ModalContent>
+</ModalRoot>;
+```
+
+- 닫을 때는 `navigationDepth`와 view 상태를 그대로 두세요. surface는 exit transition 동안 계속 렌더링되므로 `onOpenChange(false)`에서 depth를 `0`으로 되돌리면 사라지는 surface 아래에서 root view로 교체되어 높이가 튑니다. 초기화는 다시 열 때(`onOpenChange(true)`) 하거나, exit가 끝난 뒤 호출되는 `onOpenChangeComplete(false)`에서 하세요.
+- depth 하나당 한 번의 이산 교체를 전제로 합니다. depth를 바꾸는 커밋에서 자체 애니메이션 콘텐츠를 함께 시작하면 surface가 그 애니메이션을 뒤따라가므로, 펼침 같은 in-place 모션은 depth 전환이 끝난 뒤 시작하세요.
+- 전환 중 header나 footer 측정값이 늦게 반영되어 목표 높이가 바뀌면 진행 중인 전환이 새 목표로 재타겟됩니다. footer의 스크롤 배경과 여백은 목적지 scrollport 기준으로 판정되어 전환 중 깜빡이지 않습니다.
+- `ModalFooter`와 header `bottomContent`는 depth 0부터 유지하는 구성을 권장합니다. 조건부로 마운트해도 높이 전환은 동작하지만 chrome 자체는 즉시 나타나고, `ActionArea` 버튼 등장에는 별도 모션 계약이 없습니다. 버튼이 없는 `ActionArea`는 `data-oc-empty="true"`로 접혀 footer 예약 없이 body의 기본 하단 여백만 남습니다.
+- `navigationDepth` 없이 바뀌는 콘텐츠는 안착한 이산 변화만 best-effort로 전환하고, 자체 애니메이션 중인 콘텐츠는 surface가 자연스럽게 따라갑니다. 이 경로는 큰 교체에서 한 프레임 동안 목적지 레이아웃이 먼저 보일 수 있으므로 view 교체에는 `navigationDepth`를 사용하세요.
+- bottom sheet는 콘텐츠 높이 변화를 sheet motion 계약(canvas settle)으로 처리합니다. `navigationDepth` 변경 커밋에서는 콘텐츠를 즉시 다시 재어 같은 프레임에 settle을 시작하고, 전환 중 header/footer 측정값이 늦게 반영되면 진행 중인 속도를 이어받아 새 목표로 재타겟합니다.
+- 높이 전환이 필요 없거나 자체 animation을 사용하는 경우 `contentTransition="none"`을 지정하세요.
+
 ### FloatingWindow
 
 `FloatingWindowRoot`는 trigger 또는 명시적 anchor를 기준으로 collision-aware 배치되는 modeless dialog가 기본입니다. `ModalWindowRoot`는 같은 geometry에 focus trap, 배경 입력을 차단하는 backdrop, Modal popup scale/fade motion을 적용합니다. 필요한 경우에만 `FloatingWindowContent backdrop="hidden"`으로 dimmer를 숨길 수 있으며 modal focus와 배경 inert 정책은 유지됩니다. Header, Body, Footer, NavigationSection은 Modal 기본 presentation을 공유합니다.
@@ -234,6 +273,7 @@ import {
 | `@orioncactuscorp/ui/scss/index.scss`                    | SCSS source compile용 통합 entry (foundation CSS를 방출하므로 `foundations.css`와 함께 쓰지 않음) |
 | `@orioncactuscorp/ui/scss/foundations/responsive.config` | responsive 출력 mode 설정                                                                         |
 | `@orioncactuscorp/ui/utils/breakpoints`                  | `getBreakpoint`/`getBreakpoints` — runtime breakpoint 값 조회                                     |
+| `@orioncactuscorp/ui/utils/gesture`                      | `ocGesture`: 경계 저항·마찰 감속·투사·속도 추적 ([가이드][gesture])                               |
 | `@orioncactuscorp/ui/utils/spring`                       | `ocSpring`, `createSpringAnimator`                                                                |
 | `@orioncactuscorp/ui/utils/motion`                       | motion intent/phase/pace vocabulary와 resolve 유틸                                                |
 | `@orioncactuscorp/ui/react/spring`                       | `useSpringTarget`, `useSpringValue`                                                               |
@@ -648,16 +688,17 @@ GitHub 리포지터리 공개를 준비하고 있습니다. 그동안 의견이
 <!-- 버전은 `bun run agent:sync-version`이 릴리스마다 stamp합니다. 직접 수정하지 마세요. -->
 
 [storybook]: https://oc-ui-storybook.pages.dev
-[changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/CHANGELOG.md
-[api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/api-conventions.md
-[selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/selector-contract.md
-[colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/colors.md
-[typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/typography.md
-[scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/scss-helpers.md
-[motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/motion.md
-[spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/spring.md
-[responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/responsive-foundation-profile.md
-[overlay-stacking]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/overlay-stacking.md
-[tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/tokens.md
-[stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/stability.md
-[editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.16.0/docs/editor-setup.md
+[changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/CHANGELOG.md
+[api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/api-conventions.md
+[selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/selector-contract.md
+[colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/colors.md
+[typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/typography.md
+[scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/scss-helpers.md
+[motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/motion.md
+[spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/spring.md
+[responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/responsive-foundation-profile.md
+[overlay-stacking]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/overlay-stacking.md
+[tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/tokens.md
+[stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/stability.md
+[editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/editor-setup.md
+[gesture]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/gesture.md

package/dist/components/ActionArea/ActionArea.css

@@ -1 +1 @@
-.oc-ActionArea-module__actionArea__jnxep{position:relative;isolation:isolate;display:flex;flex-direction:column;inline-size:100%;--_-action-area-padding-block: var(--oc-action-area-padding-block, var(--oc-space-section-padding-viewport-y));padding-block:var(--oc-action-area-padding-block-start, var(--_-action-area-padding-block)) var(--oc-action-area-padding-block-end, var(--_-action-area-padding-block));padding-inline:var(--oc-action-area-padding-inline, var(--oc-space-section-padding-viewport-x));--oc-action-area-gap: var(--oc-space-item-gap-small);--oc-action-area-actions-gap: var(--oc-space-item-gap-small);--oc-action-area-container-max-width: var(--oc-atomic-width-content);--oc-action-area-background-color: var(--oc-color-theme-background-elevated-normal);--oc-action-area-background-bleed: var(--_-action-area-padding-block);--oc-action-area-background-gradient-size: calc(var(--_-action-area-padding-block) * 2)}.oc-ActionArea-module__actionArea__jnxep:before{position:absolute;inset-block:calc(var(--oc-action-area-background-bleed) * -1) 0;inset-inline:0;z-index:0;background-color:var(--oc-action-area-background-color);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--oc-action-area-background-gradient-size));mask-image:linear-gradient(to bottom,transparent 0,black var(--oc-action-area-background-gradient-size));opacity:0;content:"";pointer-events:none}.oc-ActionArea-module__actionArea__jnxep>*{position:relative;z-index:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-background=true]:before{opacity:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-has-extra=true]{border-block-start:1px solid var(--oc-color-theme-line-normal-neutral);background-color:var(--oc-action-area-background-color)}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=extra-slot]{display:flex;flex-direction:column;align-items:center;margin-block-end:calc(var(--oc-action-area-gap) + var(--_-action-area-padding-block))}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=caption]{font-size:calc(var(--oc-typo-size-label2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label2);font-weight:var(--oc-typo-weight-label2-normal);margin:0 0 var(--oc-space-item-gap-medium);color:var(--oc-color-theme-label-alternative);text-align:center}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{display:flex;gap:var(--oc-action-area-actions-gap);min-width:0}@media screen and (min-width:769px){.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{max-inline-size:var(--oc-action-area-container-max-width)}.oc-ActionArea-module__actionArea__jnxep:not([data-oc-variant=compact]) [data-oc-part=actions]{inline-size:100%;margin-inline:auto}}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=strong] [data-oc-part=actions],.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=cancel] [data-oc-part=actions]{flex-direction:column}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]{flex-direction:row}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button=true]{flex:1 1 0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]{flex-direction:row;justify-content:flex-end}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]:has(>[data-oc-action-area-button-priority=sub][data-oc-icon-only=true]){justify-content:space-between;inline-size:100%}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-row]{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-item-gap-medium);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-slot]{display:flex;align-items:center;flex:1 1 auto;min-width:0}.oc-ActionArea-module__actionButton__fKHJQ{min-width:0}.oc-ActionArea-module__actionButton__fKHJQ[data-oc-component=text-button]{flex:0 0 auto;inline-size:fit-content;align-self:center}
+.oc-ActionArea-module__actionArea__jnxep{position:relative;isolation:isolate;display:flex;flex-direction:column;inline-size:100%;--_-action-area-padding-block: var(--oc-action-area-padding-block, var(--oc-space-section-padding-viewport-y));padding-block:var(--oc-action-area-padding-block-start, var(--_-action-area-padding-block)) var(--oc-action-area-padding-block-end, var(--_-action-area-padding-block));padding-inline:var(--oc-action-area-padding-inline, var(--oc-space-section-padding-viewport-x));--oc-action-area-gap: var(--oc-space-item-gap-small);--oc-action-area-actions-gap: var(--oc-space-item-gap-small);--oc-action-area-background-color: var(--oc-color-theme-background-elevated-normal);--oc-action-area-background-bleed: var(--_-action-area-padding-block);--oc-action-area-background-gradient-size: calc(var(--_-action-area-padding-block) * 2)}.oc-ActionArea-module__actionArea__jnxep:before{position:absolute;inset-block:calc(var(--oc-action-area-background-bleed) * -1) 0;inset-inline:0;z-index:0;background-color:var(--oc-action-area-background-color);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--oc-action-area-background-gradient-size));mask-image:linear-gradient(to bottom,transparent 0,black var(--oc-action-area-background-gradient-size));opacity:0;content:"";pointer-events:none}.oc-ActionArea-module__actionArea__jnxep>*{position:relative;z-index:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-background=true]:before{opacity:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-empty=true]{padding:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-empty=true]:before{content:none}.oc-ActionArea-module__actionArea__jnxep[data-oc-has-extra=true]{border-block-start:1px solid var(--oc-color-theme-line-normal-neutral);background-color:var(--oc-action-area-background-color)}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=extra-slot]{display:flex;flex-direction:column;align-items:center;margin-block-end:calc(var(--oc-action-area-gap) + var(--_-action-area-padding-block))}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=caption]{font-size:calc(var(--oc-typo-size-label2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label2);font-weight:var(--oc-typo-weight-label2-normal);margin:0 0 var(--oc-space-item-gap-medium);color:var(--oc-color-theme-label-alternative);text-align:center}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{display:flex;gap:var(--oc-action-area-actions-gap);min-width:0}@media screen and (min-width:769px){.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{max-inline-size:var(--oc-action-area-container-max-width, var(--oc-atomic-width-content))}.oc-ActionArea-module__actionArea__jnxep:not([data-oc-variant=compact]) [data-oc-part=actions]{inline-size:100%;margin-inline:auto}}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=strong] [data-oc-part=actions],.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=cancel] [data-oc-part=actions]{flex-direction:column}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]{flex-direction:row}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button=true]{flex:1 1 0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]{flex-direction:row;justify-content:flex-end}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]:has(>[data-oc-action-area-button-priority=sub][data-oc-icon-only=true]){justify-content:space-between;inline-size:100%}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-row]{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-item-gap-medium);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-slot]{display:flex;align-items:center;flex:1 1 auto;min-width:0}.oc-ActionArea-module__actionButton__fKHJQ{min-width:0}.oc-ActionArea-module__actionButton__fKHJQ[data-oc-component=text-button]{flex:0 0 auto;inline-size:fit-content;align-self:center}

package/dist/components/ActionArea/ActionArea.js

@@ -1,41 +1,41 @@
 'use client';
-import { jsx as e, jsxs as B } from "react/jsx-runtime";
-import { useContext as V, createContext as _, Children as y, isValidElement as A, Fragment as g } from "react";
+import { jsx as i, jsxs as y } from "react/jsx-runtime";
+import { useContext as V, Children as g, isValidElement as v, Fragment as b, createContext as _ } from "react";
 import j from "../Button/Button.js";
 import C from "../TextButton/TextButton.js";
-import b from "./ActionArea.module.scss.js";
-const N = _(null), q = {
+import N from "./ActionArea.module.scss.js";
+const x = _(null), q = {
   strong: ["main", "equal", "alternative", "sub"],
   neutral: ["sub", "alternative", "equal", "main"],
   compact: ["sub", "alternative", "equal", "main"]
 };
-function x(...t) {
+function E(...t) {
   return t.filter(Boolean).join(" ");
 }
-function m(t) {
+function A(t) {
   return t != null && t !== !1 && t !== "";
 }
 function z() {
-  return V(N)?.variant ?? "strong";
+  return V(x)?.variant ?? "strong";
 }
 function P(t) {
-  return y.toArray(t).flatMap((o) => {
-    if (!A(o)) return [];
-    if (o.type === g) {
+  return g.toArray(t).flatMap((o) => {
+    if (!v(o)) return [];
+    if (o.type === b) {
       const n = o.props;
       return P(n.children);
     }
-    return o.type !== v ? [] : [o];
+    return o.type !== B ? [] : [o];
   });
 }
 function D(t) {
-  return A(t) && t.type === v;
+  return v(t) && t.type === B;
 }
-function E(t) {
-  return y.toArray(t).flatMap((o) => {
-    if (!A(o) || o.type !== g) return [o];
+function h(t) {
+  return g.toArray(t).flatMap((o) => {
+    if (!v(o) || o.type !== b) return [o];
     const n = o.props;
-    return E(n.children);
+    return h(n.children);
   });
 }
 function O(t) {
@@ -47,10 +47,10 @@ function I({
 }) {
   const n = q[o ?? "strong"];
   if (!n) return t;
-  const r = E(t);
+  const r = h(t);
   return r.every(D) ? n.flatMap(
-    (i) => r.filter(
-      (a) => O(a) === i
+    (c) => r.filter(
+      (a) => O(a) === c
     )
   ) : t;
 }
@@ -71,7 +71,7 @@ function M({
     (a) => a.props.priority !== void 0 && a.props.priority !== "main"
   ) && console.warn(
     '[@orioncactuscorp/ui] ActionArea variant="cancel" should use ActionAreaButton priority="main".'
-  ), t !== "compact" && m(n) && console.warn(
+  ), t !== "compact" && A(n) && console.warn(
     '[@orioncactuscorp/ui] ActionArea compactContent is only rendered with variant="compact".'
   );
 }
@@ -80,62 +80,63 @@ function F({
   className: o = "",
   variant: n = "strong",
   caption: r,
-  extraContent: i,
+  extraContent: c,
   compactContent: a,
   background: u = !1,
   ref: p,
   ...s
 }) {
-  const c = m(i), f = m(r), d = n === "compact" && m(a), l = I({ children: t, variant: n });
-  return M({ variant: n, children: t, compactContent: a }), /* @__PURE__ */ e(N.Provider, { value: { variant: n }, children: /* @__PURE__ */ B(
+  const e = A(c), d = A(r), l = n === "compact" && A(a), m = !e && !d && !l && h(t).length === 0, f = I({ children: t, variant: n });
+  return M({ variant: n, children: t, compactContent: a }), /* @__PURE__ */ i(x.Provider, { value: { variant: n }, children: /* @__PURE__ */ y(
     "div",
     {
       ...s,
       ref: p,
-      className: x(b.actionArea, o),
+      className: E(N.actionArea, o),
       "data-oc-component": "action-area",
       "data-oc-variant": n,
       "data-oc-background": u ? "true" : void 0,
-      "data-oc-has-extra": c ? "true" : void 0,
-      "data-oc-has-caption": f ? "true" : void 0,
+      "data-oc-has-extra": e ? "true" : void 0,
+      "data-oc-has-caption": d ? "true" : void 0,
+      "data-oc-empty": m ? "true" : void 0,
       children: [
-        c ? /* @__PURE__ */ e("div", { "data-oc-part": "extra-slot", children: i }) : null,
-        f ? /* @__PURE__ */ e("p", { "data-oc-part": "caption", children: r }) : null,
-        d ? /* @__PURE__ */ B("div", { "data-oc-part": "compact-row", children: [
-          /* @__PURE__ */ e("div", { "data-oc-part": "compact-slot", children: a }),
-          /* @__PURE__ */ e("div", { "data-oc-part": "actions", children: l })
-        ] }) : /* @__PURE__ */ e("div", { "data-oc-part": "actions", children: l })
+        e ? /* @__PURE__ */ i("div", { "data-oc-part": "extra-slot", children: c }) : null,
+        d ? /* @__PURE__ */ i("p", { "data-oc-part": "caption", children: r }) : null,
+        l ? /* @__PURE__ */ y("div", { "data-oc-part": "compact-row", children: [
+          /* @__PURE__ */ i("div", { "data-oc-part": "compact-slot", children: a }),
+          /* @__PURE__ */ i("div", { "data-oc-part": "actions", children: f })
+        ] }) : /* @__PURE__ */ i("div", { "data-oc-part": "actions", children: f })
       ]
     }
   ) });
 }
-function v({
+function B({
   children: t,
   className: o = "",
   priority: n = "main",
   disabled: r = !1,
-  loading: i = !1,
+  loading: c = !1,
   leadingIcon: a,
   trailingIcon: u,
   icon: p,
   ...s
 }) {
-  const c = z();
-  process.env.NODE_ENV !== "production" && c === "cancel" && n !== "main" && console.warn(
+  const e = z();
+  process.env.NODE_ENV !== "production" && e === "cancel" && n !== "main" && console.warn(
     '[@orioncactuscorp/ui] ActionAreaButton inside ActionArea variant="cancel" should use priority="main".'
   );
-  const f = !!(p && t == null && !a && !u), d = {
+  const d = !!(p && t == null && !a && !u), l = {
     "data-oc-action-area-button": "true",
     "data-oc-action-area-button-priority": n
-  }, l = x(b.actionButton, o), h = c === "cancel";
-  if (n === "sub" && c === "strong" && !p && !i && !r) {
+  }, m = E(N.actionButton, o), f = e === "cancel";
+  if (n === "sub" && e === "strong" && !p && !c && !r) {
     if ("href" in s && s.href !== void 0)
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ i(
         C,
         {
           ...s,
-          ...d,
-          className: l,
+          ...l,
+          className: m,
           leftIcon: a,
           rightIcon: u,
           variant: "assistive",
@@ -144,14 +145,14 @@ function v({
         }
       );
     const R = s, { type: w = "button", ...T } = R;
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ i(
       C,
       {
         ...T,
-        ...d,
+        ...l,
         as: "button",
         type: w,
-        className: l,
+        className: m,
         leftIcon: a,
         rightIcon: u,
         variant: "assistive",
@@ -160,30 +161,30 @@ function v({
       }
     );
   }
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ i(
     j,
     {
       ...s,
-      ...d,
-      className: l,
-      appearance: n === "main" && !h ? "solid" : "outlined",
-      variant: n === "main" && !h ? "primary" : n === "alternative" ? "secondary" : n === "equal" ? "primary" : "assistive",
+      ...l,
+      className: m,
+      appearance: n === "main" && !f ? "solid" : "outlined",
+      variant: n === "main" && !f ? "primary" : n === "alternative" ? "secondary" : n === "equal" ? "primary" : "assistive",
       size: "large",
-      fullWidth: c === "strong" || c === "cancel",
+      fullWidth: e === "strong" || e === "cancel",
       disabled: r,
-      loading: i,
+      loading: c,
       leadingIcon: a,
       trailingIcon: u,
       icon: p,
-      children: f ? void 0 : t
+      children: d ? void 0 : t
     }
   );
 }
 const S = Object.assign(F, {
-  Button: v
+  Button: B
 });
 export {
   F as ActionArea,
-  v as ActionAreaButton,
+  B as ActionAreaButton,
   S as default
 };

package/dist/components/BackgroundIconButton/BackgroundIconButton.css

@@ -1 +1 @@
-.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;--oc-interaction-inset-x: -.25rem;--oc-interaction-inset-y: -.25rem;--oc-interaction-radius: var(--oc-atomic-radius-max);--oc-interaction-scale: 1;--oc-interaction-time: .225s;--oc-interaction-z-index: 3;--oc-background-icon-button-blend-opacity: var(--oc-color-global-opacity-8);--_-background-icon-button-default-background-color: transparent;--_-background-icon-button-default-color: var(--oc-color-theme-static-black);--oc-background-icon-button-radius: min(50%, var(--oc-atomic-radius-max));--oc-background-icon-button-size: 1.5rem;--oc-background-icon-button-webkit-blend-opacity: .2;--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px);width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{transition:none;transform:none}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.95 - 1) * var(--oc-motion-scale-factor-feedback)))}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true]){transform:none}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:focus-visible:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);--_-interaction-state-scale: 1}@media(hover:hover){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);--_-interaction-state-scale: 1}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG){--_-background-icon-button-default-background-color: transparent;--_-background-icon-button-default-color: var(--oc-color-theme-static-black)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{opacity:var(--oc-color-global-opacity-43)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{background-color:transparent}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{background-color:var(--oc-color-theme-static-white);mix-blend-mode:plus-lighter;opacity:var(--oc-color-global-opacity-35)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:rgb(0,0,0,var(--oc-background-icon-button-blend-opacity));mix-blend-mode:multiply}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u){--_-background-icon-button-default-background-color: var(--oc-color-theme-primary-normal);--_-background-icon-button-default-color: var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{position:absolute;inset-block-start:-.25rem;inset-inline-start:-.25rem;z-index:0;width:100%;height:100%;padding:.25rem;box-sizing:content-box;-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);border-radius:var(--oc-background-icon-button-radius);background-color:var(--oc-background-icon-button-background-color, var(--_-background-icon-button-default-background-color));overflow:hidden;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{transition-property:background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-background-icon-button-radius));overflow:auto;border-radius:var(--oc-background-icon-button-radius)}}@supports (-moz-appearance: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-background-icon-button-radius));overflow:auto;border-radius:var(--oc-background-icon-button-radius)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:1;width:100%;height:100%;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:before{transition-property:background-color,opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:0;width:100%;height:100%;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:after{transition-property:background-color,opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);z-index:1;color:var(--oc-background-icon-button-color, var(--_-background-icon-button-default-color));transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]{transition-property:color,opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]>svg{padding:.125rem}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG){--_-background-icon-button-default-color: var(--oc-color-global-coolNeutral-50)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{opacity:var(--oc-color-global-opacity-61);mix-blend-mode:plus-darker}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:#000;opacity:calc(var(--oc-background-icon-button-webkit-blend-opacity) + var(--oc-background-icon-button-webkit-blend-opacity-add, 0))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{mix-blend-mode:normal}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv){--_-background-icon-button-default-background-color: color-mix(in srgb, var(--oc-color-global-coolNeutral-30), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--_-background-icon-button-default-color: var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=icon]{opacity:var(--oc-color-global-opacity-88);mix-blend-mode:normal}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]{-webkit-backdrop-filter:none;backdrop-filter:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:before,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:after{background-color:transparent;mix-blend-mode:normal;opacity:1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]{--_-background-icon-button-default-background-color: var(--oc-color-theme-interaction-disable);--_-background-icon-button-default-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled>[data-oc-component=interaction],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled>[data-oc-component=interaction]:after,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]>[data-oc-component=interaction],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]>[data-oc-component=interaction]:after{pointer-events:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled [data-oc-part=icon],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true] [data-oc-part=icon]{opacity:1;mix-blend-mode:normal}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled [data-oc-part=background],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true] [data-oc-part=background]{-webkit-backdrop-filter:none;backdrop-filter:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled [data-oc-part=background]:before,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled [data-oc-part=background]:after,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true] [data-oc-part=background]:before,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true] [data-oc-part=background]:after{background-color:transparent;mix-blend-mode:normal;opacity:1}
+.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;--oc-interaction-inset-x: -.25rem;--oc-interaction-inset-y: -.25rem;--oc-interaction-radius: var(--oc-atomic-radius-max);--oc-interaction-scale: 1;--oc-interaction-time: .225s;--oc-interaction-z-index: 3;--oc-background-icon-button-blend-opacity: var(--oc-color-global-opacity-8);--_-background-icon-button-default-background-color: transparent;--_-background-icon-button-default-color: var(--oc-color-theme-static-black);--oc-background-icon-button-radius: min(50%, var(--oc-atomic-radius-max));--oc-background-icon-button-size: 1.5rem;--oc-background-icon-button-webkit-blend-opacity: .2;--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px);width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{transition:none;transform:none}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:after{content:"";position:absolute;inset-block-start:-.25rem;inset-inline-start:-.25rem;z-index:0;width:100%;height:100%;padding:.25rem;box-sizing:content-box;border-radius:var(--oc-background-icon-button-radius);background-color:var(--oc-background-icon-button-disabled-background-color, var(--oc-color-theme-interaction-disable));opacity:0;pointer-events:none;transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:after{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.95 - 1) * var(--oc-motion-scale-factor-feedback)))}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true]){transform:none}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:focus-visible:not(:disabled,[aria-disabled=true]){outline:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:focus-visible:not(:disabled,[aria-disabled=true]):before{content:"";position:absolute;inset:-.25rem;border-radius:var(--oc-background-icon-button-radius);pointer-events:none;outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:focus-visible:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);--_-interaction-state-scale: 1}@media(hover:hover){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);--_-interaction-state-scale: 1}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG){--_-background-icon-button-default-background-color: transparent;--_-background-icon-button-default-color: var(--oc-color-theme-static-black)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{opacity:var(--oc-color-global-opacity-43)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{background-color:transparent}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{background-color:var(--oc-color-theme-static-white);mix-blend-mode:plus-lighter;opacity:var(--oc-color-global-opacity-35)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:rgb(0,0,0,var(--oc-background-icon-button-blend-opacity));mix-blend-mode:multiply}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u){--_-background-icon-button-default-background-color: var(--oc-color-theme-primary-normal);--_-background-icon-button-default-color: var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{position:absolute;inset-block-start:-.25rem;inset-inline-start:-.25rem;z-index:0;width:100%;height:100%;padding:.25rem;box-sizing:content-box;-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);border-radius:var(--oc-background-icon-button-radius);background-color:var(--oc-background-icon-button-background-color, var(--_-background-icon-button-default-background-color));overflow:hidden;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{transition-property:background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-background-icon-button-radius));overflow:auto;border-radius:var(--oc-background-icon-button-radius)}}@supports (-moz-appearance: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-background-icon-button-radius));overflow:auto;border-radius:var(--oc-background-icon-button-radius)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:1;width:100%;height:100%;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:before{transition-property:background-color,opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:0;width:100%;height:100%;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:after{transition-property:background-color,opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);z-index:1;color:var(--oc-background-icon-button-color, var(--_-background-icon-button-default-color));transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]{transition-property:color,opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]>svg{padding:.125rem}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG){--_-background-icon-button-default-color: var(--oc-color-global-coolNeutral-50)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{opacity:var(--oc-color-global-opacity-61);mix-blend-mode:plus-darker}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:#000;opacity:calc(var(--oc-background-icon-button-webkit-blend-opacity) + var(--oc-background-icon-button-webkit-blend-opacity-add, 0))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{mix-blend-mode:normal}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv){--_-background-icon-button-default-background-color: color-mix(in srgb, var(--oc-color-global-coolNeutral-30), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--_-background-icon-button-default-color: var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=icon]{opacity:var(--oc-color-global-opacity-88);mix-blend-mode:normal}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]{-webkit-backdrop-filter:none;backdrop-filter:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:before,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:after{background-color:transparent;mix-blend-mode:normal;opacity:1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]{--_-background-icon-button-default-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled:after,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]:after{opacity:1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled>[data-oc-component=interaction],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled>[data-oc-component=interaction]:after,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]>[data-oc-component=interaction],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true]>[data-oc-component=interaction]:after{pointer-events:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled [data-oc-part=icon],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true] [data-oc-part=icon]{opacity:1;mix-blend-mode:normal}