@orioncactuscorp/ui 1.13.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,160 @@
 # Changelog
 
+## 1.15.0
+
+### Changes
+
+<!-- generated:start -->
+
+_Commit range: `@orioncactuscorp/ui@1.14.0..HEAD`_
+
+#### Documentation
+
+- `c368e6e` docs(storybook): add scrollable anchor window example
+
+#### Maintenance
+
+- `4153d0c` chore(deps): bump actions/checkout from 7.0.0 to 7.0.1 (#233)
+
+#### Other
+
+- `908a248` 채워진 컨트롤 색상 계약 추가 (#250)
+- `58ee8ed` Interaction 강도 커스터마이즈 개선 (#249)
+- `b27a713` 중첩 오버레이 스태킹 개선 (#251)
+- `5ffc130` Changesets v3 릴리스 파이프라인 마이그레이션 (#247)
+- `479ef83` iOS Safari Modal 키보드 viewport 보정 (#248)
+- `38834bb` Interaction 상태 레이어 색 계약 정리 (#253)
+- `227bb35` Modal 키보드 회피 내부 구조 정리 (#252)
+- `f5087ae` Progress Indicator 컴포넌트 추가 (#254)
+- `ac7c17a` Easing gradient·mask 공용 유틸 추가 (#255)
+- `5afca2d` oc-fluid SCSS helper 추가 (#257)
+- `f4395d5` PositionSnap 공용 스냅 프리미티브 추가 (#256)
+- `5e2ad3e` Safari BackgroundIconButton 원형 렌더링 보정 (#260)
+- `f65d9c2` Alert 반복 거부 피드백 재생 보완 (#261)
+<!-- generated:end -->
+
+### Minor Changes
+
+- f5087ae: 알려진 범위의 작업 및 단계 진행률을 표시하는 `ProgressIndicator`를 추가합니다. `value`/`max`, 세 가지 선 두께, 접근 가능한 이름, semantic color와 oc-motion 기반 길이 전환을 지원합니다. `ModalHeader bottomContent`로 진행률이나 navigation chrome을 배치하면 Modal이 측정된 header 높이와 size별 body 시작 간격을 자동으로 예약하며, 직계 `ProgressIndicator`는 header edge에 맞춰 radius를 제거합니다.
+
+  Migration Notes: 없음
+
+- f4395d5: Button 같은 임의의 콘텐츠를 viewport 또는 element 경계의 논리 방향 위치로 드래그하고 안착시킬 수 있는 `PositionSnap` compound component를 추가합니다. controlled/uncontrolled position, content/handle drag, spring release, RTL 방향을 지원하며 Modal popup은 같은 geometry와 release 정책을 재사용합니다.
+
+  Migration Notes:
+  - 기존 Modal `snapPositions`, `snapPosition`, `defaultSnapPosition`, `onSnapPositionChange` API와 물리 방향 position 이름은 변경되지 않습니다.
+  - Modal이 아닌 콘텐츠에는 `PositionSnap.Root`, `PositionSnap.Positioner`, 선택적인 `PositionSnap.Handle`을 조합하고 논리 방향 position 이름을 사용하세요.
+
+- ac7c17a: 색 변화율에 smoothstep easing을 적용하는 `oc-easing-gradient` 함수와 시작·끝 fade 길이 및 전체 content 길이를 CSS 변수로 조정할 수 있는 `oc-gradient-mask` mixin을 추가합니다. 2D scroll content는 `oc-gradient-mask-edges`로 상하좌우 fade를 독립적으로 조정하고 block·inline mask를 교차 합성할 수 있습니다. Tabs overflow mask는 동일한 scroll·RTL·`oc-motion` 동작을 유지하면서 새 easing gradient를 사용합니다.
+
+  Migration Notes: 기존 Tabs 사용 코드는 변경할 필요가 없습니다. 새 helper는 `@orioncactuscorp/ui/scss/mixins/gradient`에서 import합니다.
+
+- 58ee8ed: Interaction 강도를 host 범위에서 선택할 수 있는 `data-oc-interaction-variant="light|normal|strong"` selector와 `--oc-interaction-opacity-factor` CSS 변수 계약을 추가합니다. 커스텀 host 타입에는 공개된 `InteractionHostProps`를 재사용할 수 있고, Button, ActionArea, Alert, form control, Menu portal을 포함한 합성 경로에서도 같은 계약이 적용되며 기존 `Interaction variant`와 `--oc-interaction-opacity-*` 출력값은 유지됩니다.
+
+  Migration Notes:
+  - 기존 사용 변경 없음
+  - 색을 커스텀한 컴포넌트 또는 합성 영역의 Interaction 강도를 함께 바꾸려면 host에 `data-oc-interaction-variant`를 설정하세요.
+
+- 5afca2d: `oc-fluid()` SCSS helper를 추가해 최소값, 최대값, 기준 viewport, anchor를 조합한 fluid length 값을 생성할 수 있도록 합니다.
+  - `anchor` 기본값은 `to`이며 `$breakpoint-md` 같은 Sass breakpoint 변수와 `375px` 같은 직접 viewport 값을 지원합니다.
+  - 기존 `fluidClamp()` 호출은 호환성을 위해 유지합니다.
+  - Migration Notes: 신규 커스텀 fluid 값은 `scss/mixins/fluid`의 `oc-fluid()`를 사용합니다.
+
+### Patch Changes
+
+- 908a248: Checkbox, Radio, Switch, BackgroundIconButton의 채워진 배경색과 전경색을 component contract CSS 변수로 노출합니다. 기본 색상은 유지하면서 consumer가 내부 상태 selector를 복제하지 않고 두 색을 함께 재정의할 수 있습니다.
+- b27a713: Modal과 FloatingWindow 안의 Menu·Tooltip이 가장 가까운 surface를 portal boundary로 사용하도록 overlay stacking을 개선합니다. MenuContent와 TooltipContent에 명시적 container override를 추가하고 z-index 의미 단계와 중첩 규칙을 문서화합니다.
+
+  Migration Notes:
+  - Modal 또는 FloatingWindow 안의 Menu·Tooltip portal DOM이 document body가 아니라 owner surface 아래에 배치됩니다. body 직계 자식 selector에 의존한 consumer CSS는 `data-oc-*` selector 또는 명시적 `container` prop으로 전환해야 합니다.
+
+- 227bb35: Modal 키보드 회피 세션 해제를 고정 지연 대신 실행 중인 transform transition 감지 기반으로 전환합니다. `--oc-motion-*` 토큰으로 chase 모션이 느려져도 키보드 정리 시점에 스냅이 생기지 않으며, `getAnimations` 미지원 환경은 기존 fallback 지연으로 동작합니다. 내부적으로 키보드 세션 상태 전이가 순수 reducer 모듈로 정리되었고 공개 API 변경은 없습니다.
+
+  Migration Notes:
+  - 없음 — Modal 공개 API와 selector 계약 변경 없이 키보드 세션 해제 타이밍을 개선합니다.
+
+- 38834bb: `--oc-interaction-color`를 host와 하위 Interaction의 공개 상태 레이어 색 계약으로 문서화합니다. 전역 theme token이 아닌 host-scoped override 경계를 명시하고, Button의 기본 fallback을 `label-normal`로 정리하면서 solid/outlined와 variant별 기존 렌더링 결과는 유지합니다.
+- f65d9c2: Alert의 바깥 배경 닫기 거부 피드백이 반복 입력에서도 다시 재생되도록 보완합니다.
+- 479ef83: 모바일(iOS Safari/Chrome, Android Chrome)에서 소프트 키보드가 열리고 닫힐 때 Modal bottom sheet의 키보드 대응을 개선합니다. 키보드 geometry를 sheet motion으로 추격해 footer와 컨테이너가 끊김 없이 이동하고, footer 배경이 키보드 위 브라우저 chrome 영역까지 채워지며, 직전 실측 키보드 높이로 포커스 필드를 선제 노출해 배경 페이지 스크롤/pan과 흔들림을 방지합니다. blur 없이 키보드만 닫는 경우(Android back 제스처 등)에도 하단 예약 공간이 해제됩니다. viewport 레이어에 내부 지향 상태 attribute `data-oc-modal-keyboard-avoiding="true"`가 추가됩니다.
+
+  Migration Notes:
+  - 없음 — 기존 Modal API 변경 없이 키보드가 표시된 모바일 viewport 배치와 전환 품질을 개선합니다.
+
+- 5e2ad3e: Safari에서 `BackgroundIconButton` 배경 레이어가 네모로 렌더링될 수 있는 경우에도 원형 반지름 fallback을 유지합니다.
+
+  Migration Notes:
+  - 없음
+
+### Migration Notes
+
+- Modal 또는 FloatingWindow 안의 Menu·Tooltip portal DOM이 document body가 아니라 owner surface 아래에 배치됩니다. body 직계 자식 selector에 의존한 consumer CSS는 `data-oc-*` selector 또는 명시적 `container` prop으로 전환해야 합니다.
+- Modal이 아닌 콘텐츠에는 `PositionSnap.Root`, `PositionSnap.Positioner`, 선택적인 `PositionSnap.Handle`을 조합하고 논리 방향 position 이름을 사용하세요. 기존 Modal snap API와 물리 방향 position 이름은 변경되지 않습니다.
+- 새 fluid/gradient helper를 사용하는 consumer는 `@orioncactuscorp/ui/scss/mixins/fluid`의 `oc-fluid()`와 `@orioncactuscorp/ui/scss/mixins/gradient`를 import하세요. 기존 `fluidClamp()`와 Tabs 사용 코드는 변경할 필요가 없습니다.
+- 색을 커스텀한 컴포넌트 또는 합성 영역의 Interaction 강도를 함께 바꾸려면 host에 `data-oc-interaction-variant`를 설정하세요. 기존 사용에는 변경이 없습니다.
+
+## 1.14.0
+
+### Changes
+
+<!-- generated:start -->
+
+_Commit range: `@orioncactuscorp/ui@1.13.0..HEAD`_
+
+#### Other
+
+- `0f92eea` FloatingWindow 컴포넌트 추가 (#235)
+- `e44c0e4` 모달 초기 포커스 정책 개선 (#236)
+- `95cca4e` 0 duration 모션 즉시 완료 처리 (#234)
+- `a94819d` FloatingWindow 다중 창 관리자 추가 (#237)
+- `3582939` Modal·FloatingWindow 프레젠테이션 일원화 (#238)
+<!-- generated:end -->
+
+### Minor Changes
+
+- e44c0e4: Modal과 ModalWindow가 DOM상 첫 control 대신 등록된 title을 기본 초기 focus로 사용하도록 개선하고, `auto`, `title`, `first-interactive` focus preset을 추가합니다. modeless FloatingWindow는 열릴 때 현재 focus를 유지합니다.
+
+  Migration Notes:
+  - 기본 Modal/ModalWindow 초기 focus가 Header close button에서 title로 변경됩니다. 첫 tabbable 요소가 필요한 경우 `initialFocus="first-interactive"`를 지정하세요.
+  - `initialFocus="content"`는 호환용으로 유지되지만 신규 구현은 `title` 또는 구체적인 ref/function을 우선하세요.
+
+- 0f92eea: trigger/명시적 anchor 기준 collision-aware 배치, 자유 drag 전환, viewport 경계 보정을 지원하는 `FloatingWindow`와 동일 geometry에 Modal 기본 presentation, popup scale/fade motion 및 focus trap을 연결하는 `ModalWindowRoot`를 추가합니다. ModalWindow backdrop은 기본적으로 표시하지 않으며 명시적으로 활성화할 수 있습니다.
+
+  Migration Notes:
+  - 없음
+
+- a94819d: 다중 FloatingWindow의 등록, 활성화 순서, modality 우선순위, 최상단 dismissal과 modal focus handoff를 조정하는 `FloatingWindowManager`를 추가합니다.
+
+  FloatingWindow의 modeless와 modal Root가 동일한 Modal popup surface 진입·종료 모션을 사용하도록 motion ownership을 surface로 일원화하고, Header와 NavigationSection을 대체형 top chrome 계약으로 명확히 합니다.
+
+  `ModalWindowRoot`는 Modal과 동일하게 backdrop을 기본 표시해 배경 pointer 입력을 차단합니다.
+
+  비활성 modeless window의 Close는 창을 최상단으로 올리지 않고 기존 stack 위치에서 종료 모션을 실행합니다.
+
+  FloatingWindowContent에 Modal과 동일한 `resize="fixed"` surface와 body scroll state 연동을 추가하고, Footer의 ActionArea 조합이 scroll 경계에 맞춰 동작하도록 개선합니다.
+
+  Migration Notes:
+  - 다중 창을 사용할 때 `FloatingWindowManager`로 root들을 감싸고 각 root에 고유한 `windowId`를 지정합니다.
+  - `FloatingWindowHeader`와 `FloatingWindowNavigationSection`은 함께 사용하지 않고 필요한 top chrome 하나를 선택합니다.
+  - 단일 창과 Manager 밖의 기존 사용법은 변경되지 않습니다.
+
+### Patch Changes
+
+- 95cca4e: motion duration 또는 duration factor가 `0`일 때 Accordion과 Modal의 런타임 spring을 시작하지 않고 최종 상태로 즉시 완료하도록 수정합니다. 음수, 비유한 값, 잘못된 CSS multiplier 형식은 runtime 설정 오류로 명확히 거부합니다.
+- 3582939: Modal surface가 header의 overlay positioning과 stacking을 명시적으로 소유하도록 우선순위를 보강해, CSS Module 주입 순서와 무관하게 FloatingWindow의 header, body, footer가 같은 열에 정렬되고 header drag가 유지되도록 수정합니다.
+
+  FloatingWindowClose에 custom render 구성을 추가해 ActionArea 같은 임의의 버튼도 Root의 기본 dismiss 및 exit lifecycle을 유지하며 창을 닫을 수 있습니다.
+
+  Migration Notes:
+  - 없음
+
+### Migration Notes
+
+- 기본 Modal/ModalWindow 초기 focus가 Header close button에서 title로 변경됩니다. 첫 tabbable 요소가 필요한 경우 `initialFocus="first-interactive"`를 지정하세요.
+- `initialFocus="content"`는 호환용으로 유지되지만 신규 구현은 `title` 또는 구체적인 ref/function을 우선하세요.
+- 다중 창을 사용할 때 `FloatingWindowManager`로 root들을 감싸고 각 root에 고유한 `windowId`를 지정합니다.
+- `FloatingWindowHeader`와 `FloatingWindowNavigationSection`은 함께 사용하지 않고 필요한 top chrome 하나를 선택합니다.
+- 단일 창과 Manager 밖의 기존 사용법은 변경되지 않습니다.
+
 ## 1.13.0
 
 ### Changes

package/README.md

@@ -72,28 +72,30 @@ export default function Example() {
 
 ## Documentation
 
-이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/<파일명>`으로 볼 수 있습니다.
-
-| 문서                                                           | 내용                                                                     |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| [API Naming Conventions][api-conventions]                      | `variant`, `appearance`, `size` prop의 역할과 명명 규칙                  |
-| [Selector Contract][selector-contract]                         | `data-oc-*` 기반 커스터마이즈 계약 — 컴포넌트별 selector/slot/state 표   |
-| [Semantic Colors][colors]                                      | 57개 semantic color의 역할, light/dark 기본값, pairing 규칙              |
-| [Typography][typography]                                       | 19개 variant의 용도, responsive stop, line-height, weight                |
-| [SCSS Helpers][scss-helpers]                                   | `oc-border`, `oc-radius`, `oc-alpha`, `typo`, `respond-to`, `fluidClamp` |
-| [Semantic Motion][motion]                                      | intent/phase/pace 기반 motion 계약과 reduced-motion 정책                 |
-| [Spring Motion][spring]                                        | iOS perceptual duration 기반 spring transition                           |
-| [Responsive Foundation Profile][responsive-foundation-profile] | typo/space responsive 출력 mode 컴파일 설정                              |
-| [Token Reference][tokens]                                      | `--oc-*` foundation 토큰 전체 목록                                       |
-| [Stability Policy][stability]                                  | 공개 계약 범위, SemVer 기준, deprecation 절차                            |
-| [Editor Setup][editor-setup]                                   | VS Code CSS 변수 자동완성 설정                                           |
+이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/<파일명>`으로 볼 수 있습니다.
+
+| 문서                                                           | 내용                                                                   |
+| -------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| [API Naming Conventions][api-conventions]                      | `variant`, `appearance`, `size` prop의 역할과 명명 규칙                |
+| [Selector Contract][selector-contract]                         | `data-oc-*` 기반 커스터마이즈 계약 — 컴포넌트별 selector/slot/state 표 |
+| [Semantic Colors][colors]                                      | 57개 semantic color의 역할, light/dark 기본값, pairing 규칙            |
+| [Typography][typography]                                       | 19개 variant의 용도, responsive stop, line-height, weight              |
+| [SCSS Helpers][scss-helpers]                                   | `oc-border`, `oc-radius`, `oc-alpha`, `oc-fluid`, `typo`, `respond-to` |
+| [Semantic Motion][motion]                                      | intent/phase/pace 기반 motion 계약과 reduced-motion 정책               |
+| [Spring Motion][spring]                                        | iOS perceptual duration 기반 spring transition                         |
+| [Responsive Foundation Profile][responsive-foundation-profile] | typo/space responsive 출력 mode 컴파일 설정                            |
+| [Overlay Stacking][overlay-stacking]                           | z-index 의미 단계와 중첩 portal boundary 규칙                          |
+| [Token Reference][tokens]                                      | `--oc-*` foundation 토큰 전체 목록                                     |
+| [Stability Policy][stability]                                  | 공개 계약 범위, SemVer 기준, deprecation 절차                          |
+| [Editor Setup][editor-setup]                                   | VS Code CSS 변수 자동완성 설정                                         |
 
 ## Components
 
 - `SectionHeader`
 - `Button`, `TextButton`, `IconButton`, `BackgroundIconButton`
+- `PositionSnap`, `PositionSnapRoot`, `PositionSnapPositioner`, `PositionSnapHandle`
 - `ActionArea`, `ActionAreaButton`, `ActionAreaLayout`
-- `Badge`, `Background`, `Divider`, `Loading`, `Skeleton`, `Cell`, `CellItem`
+- `Badge`, `Background`, `Divider`, `Loading`, `ProgressIndicator`, `Skeleton`, `Cell`, `CellItem`
 - `CheckMark`
 - `Field`, `FieldLabel`, `FieldControl`, `FieldMessage`, `FieldErrorMessage` (`vertical`/`horizontal` orientation)
 - `Fieldset`, `FieldLegend`, `FieldsetContent`, `FieldGroup`
@@ -107,10 +109,100 @@ export default function Example() {
 - `Accordion`, `AccordionItem`, `AccordionSummary`, `AccordionDetails`, `AccordionDescription`, `AccordionContent`
 - `TabsRoot`, `TabsList`, `TabsTab`, `TabsPanel`
 - `Modal`, `ModalRoot`, `ModalTrigger`, `ModalContent`, `ModalHeader`, `ModalNavigationSection`, `ModalBody`, `ModalFooter`, `ModalClose`
+- `FloatingWindow`, `FloatingWindowManager`, `FloatingWindowRoot`, `ModalWindowRoot`, `FloatingWindowTrigger`, `FloatingWindowContent`, `FloatingWindowDragHandle`, `FloatingWindowHeader`, `FloatingWindowNavigationSection`, `FloatingWindowBody`, `FloatingWindowFooter`, `FloatingWindowTitle`, `FloatingWindowDescription`, `FloatingWindowClose`
 - `TooltipProvider`, `TooltipRoot`, `TooltipTrigger`, `TooltipContent`
 - `ScrollArea`, `ScrollAreaContainer`
 - `SvgIcon`, `Interaction`
 
+### PositionSnap
+
+`PositionSnap`은 Button 같은 독립 control을 viewport 또는 지정한 element의 named position 사이에서 드래그해 안착시키는 compound component입니다. `Positioner`가 위치 transform을 소유하므로 내부 Button의 transform과 interaction 표현은 유지됩니다. `drag="content"`는 Positioner 전체에서, `drag="handle"`은 명시한 `PositionSnapHandle`에서만 drag를 시작합니다.
+
+```tsx
+import { Button, PositionSnap } from '@orioncactuscorp/ui';
+
+<PositionSnap.Root
+  positions={['block-end-inline-start', 'block-end-inline-end']}
+  defaultPosition='block-end-inline-end'
+>
+  <PositionSnap.Positioner>
+    <Button>도움말</Button>
+  </PositionSnap.Positioner>
+</PositionSnap.Root>;
+```
+
+- `position`, `defaultPosition`, `onPositionChange`로 controlled/uncontrolled 상태를 구성합니다.
+- 기본 boundary는 visual viewport이며 `boundary`에 element를 전달하면 해당 영역 안에서 안착합니다.
+- `boundaryPadding`은 boundary와 control 사이의 최소 여백입니다.
+- Modal의 popup `snapPositions`는 같은 position geometry와 release 정책을 사용하지만 backdrop, dismissal, scroll arbitration은 Modal이 계속 소유합니다.
+
+### Modal initial focus
+
+Modal은 DOM 순서의 첫 control을 기계적으로 선택하지 않습니다. 기본 `initialFocus="auto"`는 `ModalHeader`의 title을 `tabIndex={-1}`인 정적 문맥 시작점으로 포커스하고, title이 없을 때만 첫 tabbable 요소로 fallback합니다. modeless surface는 현재 작업 포커스를 유지합니다.
+
+- 일반 Modal과 `ModalWindowRoot`는 같은 초기 포커스 정책을 공유합니다.
+- form은 ref/function으로 첫 입력을, 단순 진행 dialog는 주요 action을 명시할 수 있습니다.
+- 되돌리기 어려운 확인 dialog는 취소처럼 가장 덜 파괴적인 action을 ref로 지정하세요.
+- `initialFocus="first-interactive"`는 첫 tabbable 요소, `initialFocus="title"`은 등록된 title을 명시합니다.
+- `initialFocus="content"`는 dialog container를 포커스하는 호환용 escape hatch입니다. 신규 사용은 title 또는 구체적인 ref/function을 우선하세요.
+
+### 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을 공유합니다.
+
+```tsx
+import {
+  FloatingWindowBody,
+  FloatingWindowContent,
+  FloatingWindowFooter,
+  FloatingWindowHeader,
+  FloatingWindowManager,
+  FloatingWindowRoot,
+  FloatingWindowTrigger,
+  ActionArea,
+  ActionAreaButton,
+} from '@orioncactuscorp/ui';
+
+<FloatingWindowManager>
+  <FloatingWindowRoot windowId='notes'>
+    <FloatingWindowTrigger>메모 열기</FloatingWindowTrigger>
+    <FloatingWindowContent placement='rightTop' resize='fixed'>
+      <FloatingWindowHeader title='프로젝트 메모' />
+      <FloatingWindowBody>임의 콘텐츠</FloatingWindowBody>
+      <FloatingWindowFooter>
+        <ActionArea variant='neutral'>
+          <ActionAreaButton priority='alternative'>취소</ActionAreaButton>
+          <ActionAreaButton priority='main'>저장</ActionAreaButton>
+        </ActionArea>
+      </FloatingWindowFooter>
+    </FloatingWindowContent>
+  </FloatingWindowRoot>
+</FloatingWindowManager>;
+```
+
+- modeless 창은 외부 pointer 작업으로 닫히지 않으며 Escape와 명시적 close로 닫습니다.
+- `placement` 또는 `side` + `alignment`는 trigger 기준 배치를 정합니다. `placement`를 지정하면 `side`와 `alignment`보다 우선합니다.
+- 기본 collision 정책은 주축 `flip`, 정렬축 `shift`입니다. 따라서 오른쪽 공간이 부족한 `right` 창은 왼쪽으로 전환되고, 아래 공간이 부족한 `bottom` 창은 위쪽으로 전환됩니다.
+- `anchor`로 trigger 대신 element, ref, resolver 함수를 기준점으로 사용할 수 있습니다. 열려 있는 anchored window는 anchor가 크기 변화 없이 layout에서 이동해도 좌표를 다시 맞춥니다.
+- 창을 drag하면 anchor에서 분리되어 free window가 됩니다. `position`은 controlled 자유 좌표, `defaultPosition`은 처음부터 분리된 초기 좌표입니다.
+- `onPositionChange`는 anchor 재배치, drag, viewport 보정 중 좌표 변경을 알리고, `onPositionCommit`은 drag 종료 좌표를 저장할 때 사용합니다.
+- `collisionBoundary`는 기본 viewport이며 특정 element를 전달하면 해당 element의 화면상 rect를 배치·이동 경계로 사용합니다.
+- 기본 `dragHandleVisibility={48}`은 viewport 높이가 줄어도 drag handle의 48px을 남겨 창을 복구할 수 있게 합니다.
+- `resize="fixed"`는 Modal popup과 같은 고정 높이 surface를 사용합니다. Body가 넘치면 내부만 스크롤되고 Header와 Footer의 경계 상태가 자동 갱신됩니다.
+- Footer의 기본 action 조합은 Modal과 동일하게 `ActionArea`와 `ActionAreaButton`을 사용합니다.
+- `ModalWindowRoot`는 배경을 inert 처리하고 focus를 가두는 application modal입니다. 배경 pointer 작업만 허용하고 focus는 창에 유지해야 하면 `FloatingWindowRoot modal='trap-focus'`를 사용합니다.
+- modeless `FloatingWindowRoot`는 기본적으로 현재 focus를 유지하며, `ModalWindowRoot`는 Modal과 동일하게 등록된 title을 초기 focus로 사용합니다. `initialFocus`를 명시하면 두 root 모두 해당 정책을 우선합니다.
+- `FloatingWindowClose`의 접근성 이름은 명시한 `aria-label`을 우선하고, 없으면 `label`(기본값 `닫기`)을 사용합니다.
+- `FloatingWindowHeader`와 `FloatingWindowNavigationSection`은 surface 최상단을 소유하는 대체형 chrome입니다. Navigation을 사용할 때는 title이 기본적으로 dialog 접근성 이름을 제공합니다.
+- Header와 명시적인 `FloatingWindowDragHandle`에서 drag를 시작할 수 있습니다. 내부 interactive element는 자동 제외되며 custom interactive target은 `data-oc-window-no-drag`를 선언할 수 있습니다.
+- `FloatingWindowManager`는 열린 창을 등록하고 open, pointer, focus 활성화 순서에 따라 stack level을 정규화합니다. Manager 안의 각 root에는 고유한 `windowId`가 필요합니다.
+- Escape와 outside dismissal은 활성 창 하나에만 적용됩니다. 활성 창의 종료 모션이 끝나면 바로 아래 창이 활성화되며, 개별 창의 geometry나 position 저장은 Manager가 소유하지 않습니다.
+- 비활성 modeless 창의 명시적 Close는 창을 활성화하거나 최상단으로 올리지 않고 현재 stack 위치에서 종료합니다.
+- modeless 창의 활성화는 stacking만 변경하며 포커스를 강제로 이동하지 않습니다. 닫힐 때의 포커스 복원은 각 Dialog trigger 계약을 따릅니다.
+- modal과 `trap-focus` 창은 focus isolation을 보호하기 위해 modeless 창보다 위에 유지됩니다. 같은 modality tier 안에서는 최근 활성화한 창이 위로 이동합니다.
+- focus-owning 창이 여러 개 열리면 활성 창 하나만 실제 modal/inert owner가 됩니다. 아래 modal은 요청한 modality와 stack tier를 유지한 채 대기하고, 위 창 종료 후 focus isolation을 승계합니다.
+- Manager 밖에서는 기존 단일 창 동작을 유지합니다. `onActivate`, `stackLevel`은 외부 coordinator를 위한 unmanaged escape hatch이며 Manager 안에서는 자동 stack level이 우선합니다.
+
 ## Customization
 
 컴포넌트 커스터마이즈는 CSS Module 해시가 아니라 안정 data attribute와 component contract 변수를 사용합니다.
@@ -308,14 +400,18 @@ SCSS foundation profile은 compile-time 설정입니다. Prebuilt `foundations.c
 
 SCSS mixin/function 전체 시그니처와 예시는 [SCSS Helpers 가이드][scss-helpers]를 참조하세요. 아래는 대표 helper 요약입니다.
 
-| Helper                             | 모듈                     | 용도                                                                    |
-| ---------------------------------- | ------------------------ | ----------------------------------------------------------------------- |
-| `oc-border(...)`                   | `scss/mixins/element`    | layout에 영향 없는 box-shadow surface stroke (side/placement 지정 가능) |
-| `oc-radius($radius)`               | `scss/mixins/radius`     | 컴포넌트 로컬 radius를 전역 radius factor에 연결                        |
-| `oc-alpha($color, $opacity)`       | `scss/mixins/color`      | CSS 변수 색상에도 동작하는 `color-mix` 기반 알파                        |
-| `@include typo($variant, $weight)` | `scss/mixins/typo`       | typo 토큰 조합 출력 (`--oc-typo-size-factor` 반영)                      |
-| `@include respond-to(...)`         | `scss/mixins/breakpoint` | breakpoint media query (named/직접 값/구간)                             |
-| `fluidClamp(...)`, `toRem($px)`    | `scss/mixins/utils`      | 커스텀 fluid 값 생성                                                    |
+| Helper                                 | 모듈                     | 용도                                                                    |
+| -------------------------------------- | ------------------------ | ----------------------------------------------------------------------- |
+| `oc-border(...)`                       | `scss/mixins/element`    | layout에 영향 없는 box-shadow surface stroke (side/placement 지정 가능) |
+| `oc-radius($radius)`                   | `scss/mixins/radius`     | 컴포넌트 로컬 radius를 전역 radius factor에 연결                        |
+| `oc-alpha($color, $opacity)`           | `scss/mixins/color`      | CSS 변수 색상에도 동작하는 `color-mix` 기반 알파                        |
+| `oc-easing-gradient(...)`              | `scss/mixins/gradient`   | smoothstep 색 변화율을 적용한 4방향 linear gradient                     |
+| `@include oc-gradient-mask(...)`       | `scss/mixins/gradient`   | fade 길이와 content 길이를 조정하는 양끝 gradient mask                  |
+| `@include oc-gradient-mask-edges(...)` | `scss/mixins/gradient`   | 2D scroll content의 네 edge를 교차 합성하는 gradient mask               |
+| `@include typo($variant, $weight)`     | `scss/mixins/typo`       | typo 토큰 조합 출력 (`--oc-typo-size-factor` 반영)                      |
+| `@include respond-to(...)`             | `scss/mixins/breakpoint` | breakpoint media query (named/직접 값/구간)                             |
+| `oc-fluid(...)`                        | `scss/mixins/fluid`      | 커스텀 fluid 값 생성                                                    |
+| `fluidClamp(...)`, `toRem($px)`        | `scss/mixins/utils`      | 기존 fluid 호출 호환 및 px→rem 변환                                     |
 
 `@orioncactuscorp/ui/scss/mixins/element`는 요소 표면을 구성할 때 쓰는 SCSS helper를 제공합니다.
 
@@ -552,15 +648,16 @@ GitHub 리포지터리 공개를 준비하고 있습니다. 그동안 의견이
 <!-- 버전은 `bun run agent:sync-version`이 릴리스마다 stamp합니다. 직접 수정하지 마세요. -->
 
 [storybook]: https://oc-ui-storybook.pages.dev
-[changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/CHANGELOG.md
-[api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/api-conventions.md
-[selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/selector-contract.md
-[colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/colors.md
-[typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/typography.md
-[scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/scss-helpers.md
-[motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/motion.md
-[spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/spring.md
-[responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/responsive-foundation-profile.md
-[tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/tokens.md
-[stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/stability.md
-[editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.13.0/docs/editor-setup.md
+[changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/CHANGELOG.md
+[api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/api-conventions.md
+[selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/selector-contract.md
+[colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/colors.md
+[typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/typography.md
+[scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/scss-helpers.md
+[motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/motion.md
+[spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/spring.md
+[responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/responsive-foundation-profile.md
+[overlay-stacking]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/overlay-stacking.md
+[tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/tokens.md
+[stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/stability.md
+[editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/editor-setup.md

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);--oc-background-icon-button-size: 1.5rem;--oc-background-icon-button-webkit-blend-opacity: .2;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);transform: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);transform:scale(1)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{color:var(--oc-color-theme-static-black);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) [data-oc-part=icon]{color:var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u) [data-oc-part=background]{background-color:var(--oc-color-theme-primary-normal)}.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-atomic-radius-max);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-atomic-radius-max));overflow:auto;border-radius:0}}@supports (-moz-appearance: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-atomic-radius-max));overflow:auto;border-radius:0}}.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;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) [data-oc-part=icon]{color:var(--oc-color-global-coolNeutral-50);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) [data-oc-part=icon]{color:var(--oc-color-theme-static-white);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]{background-color:color-mix(in srgb,var(--oc-color-global-coolNeutral-30),transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));-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]{cursor:not-allowed}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:disabled [data-oc-part=icon],.oc-BackgroundIconButton-module__backgroundIconButton__up7D1[aria-disabled=true] [data-oc-part=icon]{color:var(--oc-color-theme-label-disable);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]{background-color:var(--oc-color-theme-interaction-disable);-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);--oc-background-icon-button-background-color: transparent;--oc-background-icon-button-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;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);transform: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);transform:scale(1)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG){--oc-background-icon-button-background-color: transparent;--oc-background-icon-button-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){--oc-background-icon-button-background-color: var(--oc-color-theme-primary-normal);--oc-background-icon-button-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);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);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){--oc-background-icon-button-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){--oc-background-icon-button-background-color: color-mix(in srgb, var(--oc-color-global-coolNeutral-30), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--oc-background-icon-button-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]{--oc-background-icon-button-background-color: var(--oc-color-theme-interaction-disable);--oc-background-icon-button-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.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}

package/dist/components/Button/Button.css

@@ -1 +1 @@
-.oc-Button-module__button__18Bed{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)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;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),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Button-module__button__18Bed{transition-property:background-color,box-shadow,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);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-interaction-radius: var(--oc-button-radius);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;padding:.0625rem;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]>[data-oc-component=svg-icon]{inline-size:auto;block-size:var(--oc-button-icon-size, calc(1.5em - var(--oc-button-icon-padding-block, .125em) * 2))}@supports (block-size: 1lh){.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]>[data-oc-component=svg-icon]{block-size:var(--oc-button-icon-size, calc(1lh - var(--oc-button-icon-padding-block, .125em) * 2))}}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini);--oc-button-icon-padding-block: .0625em}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-padding-block: .0625em}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}
+.oc-Button-module__button__18Bed{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)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;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),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Button-module__button__18Bed{transition-property:background-color,box-shadow,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);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-interaction-radius: var(--oc-button-radius);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-label-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;padding:.0625rem;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]>[data-oc-component=svg-icon]{inline-size:auto;block-size:var(--oc-button-icon-size, calc(1.5em - var(--oc-button-icon-padding-block, .125em) * 2))}@supports (block-size: 1lh){.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>[data-oc-component=svg-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]>[data-oc-component=svg-icon]{block-size:var(--oc-button-icon-size, calc(1lh - var(--oc-button-icon-padding-block, .125em) * 2))}}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini);--oc-button-icon-padding-block: .0625em}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-padding-block: .0625em}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB){--oc-interaction-color: var(--oc-color-theme-background-normal-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}

package/dist/components/CheckMark/CheckMark.js

@@ -1,26 +1,28 @@
 'use client';
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import m from "@orioncactuscorp/icons/orioncactus/CheckThick";
-import k from "../Interaction/Interaction.js";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import k from "@orioncactuscorp/icons/orioncactus/CheckThick";
+import u from "../Interaction/Interaction.js";
 import e from "./CheckMark.module.scss.js";
-function b({
+function g({
   children: t,
   className: r = "",
-  size: o = "medium",
+  size: n = "medium",
   onChange: i,
   onCheckedChange: p,
   ref: s,
+  "data-oc-interaction-variant": d,
   ...l
 }) {
-  const d = (c) => {
-    i?.(c), p?.(c.currentTarget.checked);
-  }, h = t !== void 0;
-  return /* @__PURE__ */ n(
+  const h = (o) => {
+    i?.(o), p?.(o.currentTarget.checked);
+  }, m = t !== void 0;
+  return /* @__PURE__ */ c(
     "label",
     {
-      className: [e.checkMark, e[o], r].filter(Boolean).join(" "),
+      className: [e.checkMark, e[n], r].filter(Boolean).join(" "),
       "data-oc-component": "check-mark",
-      "data-oc-size": o,
+      "data-oc-size": n,
+      "data-oc-interaction-variant": d,
       children: [
         /* @__PURE__ */ a(
           "input",
@@ -28,19 +30,19 @@ function b({
             ...l,
             ref: s,
             type: "checkbox",
-            onChange: d,
+            onChange: h,
             "data-oc-part": "input"
           }
         ),
-        /* @__PURE__ */ n("span", { "data-oc-part": "container", children: [
-          /* @__PURE__ */ a(k, { self: !0 }),
-          /* @__PURE__ */ a("span", { "data-oc-part": "icon", children: /* @__PURE__ */ a(m, { size: "custom" }) })
+        /* @__PURE__ */ c("span", { "data-oc-part": "container", children: [
+          /* @__PURE__ */ a(u, { self: !0 }),
+          /* @__PURE__ */ a("span", { "data-oc-part": "icon", children: /* @__PURE__ */ a(k, { size: "custom" }) })
         ] }),
-        h ? /* @__PURE__ */ a("span", { "data-oc-part": "content", children: /* @__PURE__ */ a("span", { "data-oc-part": "label", children: t }) }) : null
+        m ? /* @__PURE__ */ a("span", { "data-oc-part": "content", children: /* @__PURE__ */ a("span", { "data-oc-part": "label", children: t }) }) : null
       ]
     }
   );
 }
 export {
-  b as default
+  g as default
 };

package/dist/components/Checkbox/Checkbox.css

@@ -1 +1 @@
-.oc-Checkbox-module__checkbox__D0D4S{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Checkbox-module__checkbox__D0D4S{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Checkbox-module__checkbox__D0D4S:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Checkbox-module__fill__p-vFK{display:flex;inline-size:100%}.oc-Checkbox-module__small__UzHgE{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);--oc-checkbox-control-size: var(--oc-typo-height-body2);--oc-checkbox-content-height: var(--oc-typo-height-body2)}.oc-Checkbox-module__medium__HvVCs{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);--oc-checkbox-control-size: var(--oc-typo-height-body1);--oc-checkbox-content-height: var(--oc-typo-height-body1)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-checkbox-control-size);block-size:var(--oc-checkbox-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{border-radius:.3125em;inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{transition-property:color,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)}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=icon-wrapper]{display:flex;position:relative;align-items:center;justify-content:center;inline-size:100%;block-size:100%;color:transparent}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{position:absolute;inset:0;transform:scale(max(0,1 + (.9 - 1) * var(--oc-motion-scale-factor-feedback)));color:transparent;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{transition-property: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);transform:none}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:transform}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check]>svg,.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]>svg{inline-size:100%;block-size:100%;padding:.0625rem}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-checkbox-control-size) - var(--oc-checkbox-content-height)) / 2)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Checkbox-module__fill__p-vFK [data-oc-part=label]{flex:1}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-color-theme-primary-normal)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:scale(1);color:var(--oc-color-theme-static-white)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:auto}}
+.oc-Checkbox-module__checkbox__D0D4S{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Checkbox-module__checkbox__D0D4S{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Checkbox-module__checkbox__D0D4S:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Checkbox-module__checkbox__D0D4S{--oc-checkbox-background-color: var(--oc-color-theme-primary-normal);--oc-checkbox-color: var(--oc-color-theme-static-white)}.oc-Checkbox-module__fill__p-vFK{display:flex;inline-size:100%}.oc-Checkbox-module__small__UzHgE{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);--oc-checkbox-control-size: var(--oc-typo-height-body2);--oc-checkbox-content-height: var(--oc-typo-height-body2)}.oc-Checkbox-module__medium__HvVCs{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);--oc-checkbox-control-size: var(--oc-typo-height-body1);--oc-checkbox-content-height: var(--oc-typo-height-body1)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-checkbox-control-size);block-size:var(--oc-checkbox-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{border-radius:.3125em;inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{transition-property:color,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)}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=icon-wrapper]{display:flex;position:relative;align-items:center;justify-content:center;inline-size:100%;block-size:100%;color:transparent}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{position:absolute;inset:0;transform:scale(max(0,1 + (.9 - 1) * var(--oc-motion-scale-factor-feedback)));color:transparent;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{transition-property: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);transform:none}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:transform}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check]>svg,.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]>svg{inline-size:100%;block-size:100%;padding:.0625rem}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-checkbox-control-size) - var(--oc-checkbox-content-height)) / 2)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Checkbox-module__fill__p-vFK [data-oc-part=label]{flex:1}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-checkbox-background-color)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:scale(1);color:var(--oc-checkbox-color)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:auto}}