@orioncactuscorp/ui 1.17.0 → 1.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +91 -0
  2. package/README.md +16 -14
  3. package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
  4. package/dist/components/Modal/Modal.css +1 -1
  5. package/dist/components/Modal/Modal.js +514 -471
  6. package/dist/components/Modal/Modal.module.scss.js +59 -57
  7. package/dist/components/Modal/fieldReveal.js +57 -0
  8. package/dist/components/Modal/headerTapScroll.js +10 -0
  9. package/dist/components/Modal/keyboardEditable.js +31 -0
  10. package/dist/components/Modal/keyboardInsetMemory.js +24 -0
  11. package/dist/components/Modal/keyboardSession.js +46 -73
  12. package/dist/components/Modal/scrollportScroller.js +43 -0
  13. package/dist/components/Modal/tapCaret.js +32 -0
  14. package/dist/components/Modal/useBottomSheetIntrinsicHeight.js +26 -23
  15. package/dist/components/Modal/useFieldReveal.js +81 -0
  16. package/dist/components/Modal/useModalDrag.js +1025 -977
  17. package/dist/components/Modal/useModalKeyboardAvoidance.js +200 -117
  18. package/dist/components/Modal/useModalViewportGeometry.js +35 -19
  19. package/dist/components/PositionSnap/policy.js +40 -43
  20. package/dist/styles.css +2 -2
  21. package/dist/ui/src/components/Modal/Modal.d.ts +1 -1
  22. package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
  23. package/dist/ui/src/components/Modal/Modal.test.utils.d.ts +12 -0
  24. package/dist/ui/src/components/Modal/Modal.test.utils.d.ts.map +1 -0
  25. package/dist/ui/src/components/Modal/contexts.d.ts +5 -0
  26. package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
  27. package/dist/ui/src/components/Modal/fieldReveal.d.ts +18 -0
  28. package/dist/ui/src/components/Modal/fieldReveal.d.ts.map +1 -0
  29. package/dist/ui/src/components/Modal/headerTapScroll.d.ts +5 -0
  30. package/dist/ui/src/components/Modal/headerTapScroll.d.ts.map +1 -0
  31. package/dist/ui/src/components/Modal/keyboardEditable.d.ts +6 -0
  32. package/dist/ui/src/components/Modal/keyboardEditable.d.ts.map +1 -0
  33. package/dist/ui/src/components/Modal/keyboardInsetMemory.d.ts +5 -0
  34. package/dist/ui/src/components/Modal/keyboardInsetMemory.d.ts.map +1 -0
  35. package/dist/ui/src/components/Modal/keyboardSession.d.ts +4 -11
  36. package/dist/ui/src/components/Modal/keyboardSession.d.ts.map +1 -1
  37. package/dist/ui/src/components/Modal/scrollportScroller.d.ts +20 -0
  38. package/dist/ui/src/components/Modal/scrollportScroller.d.ts.map +1 -0
  39. package/dist/ui/src/components/Modal/tapCaret.d.ts +10 -0
  40. package/dist/ui/src/components/Modal/tapCaret.d.ts.map +1 -0
  41. package/dist/ui/src/components/Modal/useBottomSheetIntrinsicHeight.d.ts +8 -1
  42. package/dist/ui/src/components/Modal/useBottomSheetIntrinsicHeight.d.ts.map +1 -1
  43. package/dist/ui/src/components/Modal/useFieldReveal.d.ts +28 -0
  44. package/dist/ui/src/components/Modal/useFieldReveal.d.ts.map +1 -0
  45. package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
  46. package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts +6 -1
  47. package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts.map +1 -1
  48. package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts +1 -0
  49. package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts.map +1 -1
  50. package/dist/ui/src/components/PositionSnap/policy.d.ts.map +1 -1
  51. package/dist/ui/src/utils/gesture.d.ts +58 -0
  52. package/dist/ui/src/utils/gesture.d.ts.map +1 -0
  53. package/dist/utils/gesture.d.ts +2 -0
  54. package/dist/utils/gesture.js +103 -0
  55. package/docs/gesture.md +64 -0
  56. package/docs/selector-contract.md +5 -1
  57. package/docs/spring.md +4 -0
  58. package/package.json +5 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,96 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.18.0
4
+
5
+ ### Migration Notes
6
+
7
+ - 기존 컴포넌트 사용 코드의 필수 변경은 없습니다.
8
+ - `ocGesture`는 `@orioncactuscorp/ui/utils/gesture`에서 가져옵니다. 속도는 px/s, 시간은 ms이므로 기존 px/ms 계산을 교체할 때 단위를 변환하세요.
9
+ - Modal handle bar는 이제 `handle-area`의 자식이며 Interaction을 포함합니다. handle의 직계 자식 구조나 의사 요소에 의존하는 커스텀 스타일을 확인하세요.
10
+ - ModalHeader의 자체 영역 탭은 body를 맨 위로 스크롤합니다. 제외할 콘텐츠는 `data-oc-modal-no-drag` 또는 header `onClick`의 `preventDefault()`를 사용하세요.
11
+ - 키보드 포커스 필드는 header 아래로 정렬됩니다. 별도 포커스 스크롤 보정이 있다면 중복 여부를 확인하세요.
12
+ - iOS bottom sheet에서는 키보드 툴바 ▲(이전)가 비활성화되는 제한이 있습니다. 이전 필드는 body를 스크롤해 탭할 수 있습니다.
13
+
14
+ ### Changes
15
+
16
+ <!-- generated:start -->
17
+
18
+ _Commit range: `@orioncactuscorp/ui@1.17.0..HEAD`_
19
+
20
+ #### Documentation
21
+
22
+ - `d358fd0` docs(changeset): complete release migration notes
23
+
24
+ #### Other
25
+
26
+ - `f5d87e5` Gradient Mask 스토리 스크롤 오류 수정 (#289)
27
+ - `56ade11` BackgroundIconButton 원형 키보드 포커스 개선 (#290)
28
+ - `c6e3f7b` Modal bottom sheet 핀치 줌 geometry 오인 수정 (#293)
29
+ - `c80a504` Modal 키보드 세션 시트 안정화 및 포커스 필드 정렬 (#292)
30
+ - `3f75e6f` Modal 키보드 모듈 개념별 분리 리팩토링 (#299)
31
+ - `9ef1278` Modal 키보드 reveal 스크롤 정수 픽셀 쓰기 (#300)
32
+ - `cfac798` Modal handle 드래그 hit 영역 확장 및 hover 피드백 개선 (#294)
33
+ - `a824aac` ocGesture 제스처 계산 유틸 공개 및 경계 저항 공통화 (#298)
34
+ - `f383ddb` Modal header 탭으로 body 맨 위 스크롤 (#301)
35
+ - `9a71706` Modal 키보드 툴바 포커스 이동 시 시트 흔들림 수정 (#302)
36
+ - `116ad0b` Modal 키보드 툴바 이동 preventScroll 포커스 통일 및 ▲ 한계 문서화 (#303)
37
+ - `878c50d` Modal 시트 성장 e2e 정지 구간 한도 CI 지터 여유 확보 (#304)
38
+ <!-- generated:end -->
39
+
40
+ ### Minor Changes
41
+
42
+ - a824aac: `utils/gesture`의 `ocGesture` 진입점을 추가합니다. 경계 저항, 마찰 감속과 투사, px/s 기반 속도 추적기를 제공하며 Modal·PositionSnap의 rubber band 계산을 공통화합니다. 기존 스냅·닫기·속도 측정 정책은 유지합니다.
43
+
44
+ ### Migration Notes
45
+ - 기존 컴포넌트 소비자의 필수 변경은 없습니다.
46
+ - 제스처 유틸은 `@orioncactuscorp/ui/utils/gesture`에서 `ocGesture`로 가져옵니다.
47
+ - 속도는 px/s, 시간은 ms입니다. 기존 px/ms 기반 구현을 교체할 때 단위를 변환하세요.
48
+ - 감속 기본값은 normal(0.998)이며 fast(0.99)는 `{ rate: ocGesture.decelerationRates.fast }`로 지정합니다.
49
+
50
+ - 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 탭 스크롤은 모달당 하나의 스크롤러를 공유해 새 이동이 진행 중인 이동을 이어받습니다.
51
+
52
+ ### Migration Notes
53
+ - 기존 소비자의 필수 코드 변경은 없습니다. header의 자체 콘텐츠에서 맨 위 스크롤을 제외하려면 `data-oc-modal-no-drag`를 지정하거나 header `onClick`에서 `preventDefault()`를 호출하세요.
54
+
55
+ ### Patch Changes
56
+
57
+ - 116ad0b: Modal bottom sheet에서 iOS 키보드 툴바 ▼(다음)가 켜진 채 이동하지 않거나 이동 뒤 시트가 흔들리던 문제를 수정합니다. iOS는 포커스 시점에 ▲▼ 상태를 스냅샷하고 누르는 시점에 이웃 필드의 중심이 가려지지 않았는지 다시 판정하므로, 탭 가로채기와 툴바 이동 모두 필드를 최종 위치(header 바로 아래)에 둔 채 `preventScroll`로 포커스해 스냅샷과 최종 레이아웃을 같게 하고 WebKit의 visual viewport pan을 없앱니다. ▲(이전)는 이전 필드가 항상 header 뒤에 놓여 iOS가 이동 대상으로 보지 않으므로 bottom sheet에서는 꺼진 상태로 유지됩니다.
58
+
59
+ ### Migration Notes
60
+ - 기존 소비자의 필수 코드 변경은 없습니다. iOS bottom sheet에서는 이전 필드가 header 뒤에 놓여 키보드 툴바 ▲(이전)가 비활성화되는 제한이 있습니다. 이전 필드로 돌아가려면 body를 스크롤해 해당 필드를 탭하세요.
61
+
62
+ - 9a71706: Modal bottom sheet에서 iOS 키보드 툴바의 ▲▼(또는 Tab, 프로그램 포커스)로 다음 입력 필드로 이동할 때 시트가 흔들리던 문제를 수정합니다. WebKit이 스스로 옮기는 포커스는 visual viewport를 pan하므로, 이전 필드의 `focusout`이 다음 필드를 알려주는 시점에 그 이동을 이어받아 탭 가로채기와 같은 경로(최종 위치에 임시로 둔 채 `preventScroll` 포커스, 원위치 복귀, sheet 모션 spring reveal)로 처리합니다. WebCore는 handler가 포커스를 옮기면 자기 이동을 버리므로 pan이 일어나지 않습니다.
63
+
64
+ ### Migration Notes
65
+ - 없음
66
+
67
+ - 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의 동작은 바뀌지 않습니다.
68
+
69
+ ### Migration Notes
70
+ - `[data-oc-part="handle"]`은 이제 `[data-oc-part="handle-area"]`의 자식이며 `Interaction` 자식을 가집니다. bar 시각 커스터마이즈는 기존처럼 `[data-oc-part="handle"]`을 대상으로 하되, `::before`/`::after`나 자식 구조에 의존하는 override가 있으면 확인하세요.
71
+
72
+ - 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이 키보드 높이로 접히지 않습니다.
73
+
74
+ ### Migration Notes
75
+ - 기존 소비자의 필수 코드 변경은 없습니다. 키보드가 열린 동안 입력 필드는 header 아래로 정렬되므로, 소비자가 별도로 구현한 포커스 스크롤 보정과의 중복 여부를 확인하세요.
76
+
77
+ - 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`으로 바뀌어 시트 위에서도 핀치 줌이 시작됩니다.
78
+
79
+ 드래그 핸들에서도 핀치 줌을 허용하고, 단일 터치 드래그 중 멀티터치로 전환하면 드래그와 스크롤 잠금을 해제하고 시작 위치로 복귀합니다.
80
+
81
+ ### Migration Notes
82
+ - 없음
83
+
84
+ - 9ef1278: Modal 키보드 reveal 스크롤이 프레임마다 정수 픽셀을 쓰도록 바꿔, 소수 스크롤 위치를 버림 처리하는 Safari에서 이동 끝에 1px이 튀어 오르던 현상을 제거합니다.
85
+
86
+ ### Migration Notes
87
+ - 없음
88
+
89
+ - 56ade11: BackgroundIconButton의 키보드 포커스 링이 작은 사각형 본체 대신 실제 원형 배경 바깥을 따라 표시되도록 수정합니다. 버튼 크기와 터치 영역은 유지합니다.
90
+
91
+ ### Migration Notes
92
+ - 없음
93
+
3
94
  ## 1.17.0
4
95
 
5
96
  ### Changes
package/README.md CHANGED
@@ -72,7 +72,7 @@ export default function Example() {
72
72
 
73
73
  ## Documentation
74
74
 
75
- 이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/<파일명>`으로 볼 수 있습니다.
75
+ 이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/<파일명>`으로 볼 수 있습니다.
76
76
 
77
77
  | 문서 | 내용 |
78
78
  | -------------------------------------------------------------- | ---------------------------------------------------------------------- |
@@ -273,6 +273,7 @@ import {
273
273
  | `@orioncactuscorp/ui/scss/index.scss` | SCSS source compile용 통합 entry (foundation CSS를 방출하므로 `foundations.css`와 함께 쓰지 않음) |
274
274
  | `@orioncactuscorp/ui/scss/foundations/responsive.config` | responsive 출력 mode 설정 |
275
275
  | `@orioncactuscorp/ui/utils/breakpoints` | `getBreakpoint`/`getBreakpoints` — runtime breakpoint 값 조회 |
276
+ | `@orioncactuscorp/ui/utils/gesture` | `ocGesture`: 경계 저항·마찰 감속·투사·속도 추적 ([가이드][gesture]) |
276
277
  | `@orioncactuscorp/ui/utils/spring` | `ocSpring`, `createSpringAnimator` |
277
278
  | `@orioncactuscorp/ui/utils/motion` | motion intent/phase/pace vocabulary와 resolve 유틸 |
278
279
  | `@orioncactuscorp/ui/react/spring` | `useSpringTarget`, `useSpringValue` |
@@ -687,16 +688,17 @@ GitHub 리포지터리 공개를 준비하고 있습니다. 그동안 의견이
687
688
  <!-- 버전은 `bun run agent:sync-version`이 릴리스마다 stamp합니다. 직접 수정하지 마세요. -->
688
689
 
689
690
  [storybook]: https://oc-ui-storybook.pages.dev
690
- [changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/CHANGELOG.md
691
- [api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/api-conventions.md
692
- [selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/selector-contract.md
693
- [colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/colors.md
694
- [typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/typography.md
695
- [scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/scss-helpers.md
696
- [motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/motion.md
697
- [spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/spring.md
698
- [responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/responsive-foundation-profile.md
699
- [overlay-stacking]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/overlay-stacking.md
700
- [tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/tokens.md
701
- [stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/stability.md
702
- [editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.17.0/docs/editor-setup.md
691
+ [changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/CHANGELOG.md
692
+ [api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/api-conventions.md
693
+ [selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/selector-contract.md
694
+ [colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/colors.md
695
+ [typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/typography.md
696
+ [scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/scss-helpers.md
697
+ [motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/motion.md
698
+ [spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/spring.md
699
+ [responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/responsive-foundation-profile.md
700
+ [overlay-stacking]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/overlay-stacking.md
701
+ [tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/tokens.md
702
+ [stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/stability.md
703
+ [editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/editor-setup.md
704
+ [gesture]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.18.0/docs/gesture.md
package/dist/components/BackgroundIconButton/BackgroundIconButton.css CHANGED
@@ -1 +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: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])>[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}
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}