@orioncactuscorp/ui 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 1.17.0
+
+### Changes
+
+<!-- generated:start -->
+
+_Commit range: `@orioncactuscorp/ui@1.16.0..HEAD`_
+
+#### Other
+
+- `d27d025` Modal 본문 끝 ActionArea 자동 여백 보정 (#282)
+- `35d3f23` Badge variant 전환 및 border 계약 개선 (#284)
+- `757780c` Modal popup 콘텐츠 전환 플래시 및 footer 크롬 플립 개선 (#285)
+- `cae0595` BackgroundIconButton disabled 전환 오버슈트 수정 (#286)
+<!-- generated:end -->
+
+### Minor Changes
+
+- 35d3f23: Badge의 canonical 기본 variant인 `default`를 추가하고, `label-strong` 배경과 `background-normal-normal` 라벨 색을 적용합니다. 기존 `normal` variant는 `label-alternative` 라벨과 `fill-normal` 배경을 유지합니다. Badge 배경 전환을 variant별 opacity 레이어로 분리하고, `oc-border` 기반의 `--oc-badge-border-width` 및 `--oc-badge-border-color` contract를 제공합니다.
+
+  Migration Notes:
+  - `variant`를 생략한 Badge의 `data-oc-variant` 값이 `normal`에서 `default`로 변경됩니다. 해당 selector를 직접 커스터마이즈하는 소비자는 `default`를 기준으로 업데이트하세요.
+  - `variant='default'`는 `label-strong` 배경과 `background-normal-normal` 라벨 색을 사용합니다.
+  - 기존 `variant='normal'`은 `label-alternative` 라벨과 `fill-normal` 배경을 유지합니다.
+  - Badge border는 기본적으로 투명하며, `--oc-badge-border-color`와 선택적인 `--oc-badge-border-width` override로 표시할 수 있습니다.
+
+- 757780c: `ModalRoot`에 open/close transition이 끝난 뒤 호출되는 `onOpenChangeComplete(open)` 콜백을 추가합니다. depth navigation처럼 exit 동안 유지해야 하는 view 상태를 닫힘 완료 후 초기화할 때 사용합니다.
+
+  ### Migration Notes
+  - 없음
+
+### Patch Changes
+
+- 757780c: 렌더링할 액션, caption, extraContent가 없는 `ActionArea`는 `data-oc-empty="true"`를 방출하고 자체 padding과 background를 접습니다. `ModalFooter`와 `FloatingWindowFooter`의 직속 빈 `ActionArea`는 footer 예약을 `0`으로 만들어 body는 기본 하단 여백만 유지합니다.
+
+  ### Migration Notes
+  - 빈 `ActionArea`로 하단 여백을 만들던 경우 명시적 spacer로 바꾸세요.
+  - depth navigation에서 root depth에 액션이 없어도 `ModalFooter`와 `ActionArea`를 계속 마운트해 두면 root에서는 예약이 접히고 다음 depth부터 버튼 높이가 예약됩니다.
+
+- d27d025: ModalBody 마지막 직속 ActionArea가 본문 여백과 중복되지 않도록 자동 보정합니다.
+
+  ### Migration Notes
+  - 기존 ModalBody 마지막 ActionArea에 지정한 중복 여백 override는 제거해도 됩니다.
+  - 이 조합에서는 desktop action group의 기본 max width가 `none`이 되며, standalone ActionArea의 `--oc-atomic-width-content` 기본값은 유지됩니다.
+  - 의도적으로 다른 간격을 사용하는 경우에는 기존 `--oc-action-area-*` override를 유지할 수 있습니다.
+
+- 757780c: WebKit에서 `Fieldset`이 첫 레이아웃 때 legend 높이만큼 더 크게 그려졌다가 내부 재배치 시점에 줄어들던 문제를 수정합니다. legend를 float로 배치해 모든 엔진에서 같은 높이로 그려집니다.
+
+  ### Migration Notes
+  - `FieldLegend` 다음 콘텐츠와의 간격이 `.content`의 시작 margin에서 legend의 끝 margin으로 옮겨졌습니다. 간격 값은 동일하며, legend와 콘텐츠 사이 간격을 직접 덮어쓰던 CSS가 있다면 legend 쪽으로 옮기세요.
+
+- 757780c: Modal popup 콘텐츠 전환이 `navigationDepth` 변경을 명시적 교체 신호로 사용해 목적지 레이아웃 플래시 없이 이전 높이에서 새 높이로 전환합니다. 전환 중 header/footer 측정값이 늦게 반영되면 목표 높이를 재타겟하고, footer 스크롤 크롬은 목적지 scrollport 기준으로 판정해 전환 중 깜빡이지 않습니다. `ModalFooter`를 언마운트해도 측정된 footer 높이가 body 여백에 남지 않습니다.
+
+  ### Migration Notes
+  - depth view 교체에 높이 전환을 기대하는 popup은 `ModalRoot`의 `navigationDepth`를 view와 같은 커밋에서 갱신하세요. 신호 없는 콘텐츠 변화는 기존처럼 안착 후 best-effort로 전환되며, 큰 교체는 한 프레임 동안 목적지 레이아웃이 먼저 보일 수 있습니다.
+  - 내부 attribute `data-oc-modal-sheet-resizing`이 `data-oc-modal-resizing`으로 바뀌었습니다. 공개 selector 계약은 아니지만 이 attribute를 참조하던 CSS가 있다면 갱신하세요.
+  - Reduced motion에서 popup 높이 전환은 즉시 완료되며 `data-oc-content-transition-state="changing"` 구간이 없습니다.
+
+- 757780c: bottom sheet의 depth 전환이 끊기던 문제를 수정합니다. `navigationDepth`가 `0`보다 커서 drag 닫기가 차단된 상태에서는 canvas settle의 시작 translate가 gesture rubber-band 한계로 clamp되어 sheet가 먼저 튀어오른 뒤 멈췄다가 남은 거리만 움직였습니다. canvas settle은 gesture 범위 밖의 programmatic geometry로 취급해 clamp하지 않고, backdrop dim은 목적지 rest 값을 유지해 전환 중 1에서 내려갔다 돌아오지 않습니다. 또한 depth 변경 커밋에서 콘텐츠를 즉시 다시 재어 같은 프레임에 settle을 시작하고, body content를 border-box로 관찰해 header/footer 예약 반영 시 진행 속도를 이어받아 재타겟합니다.
+
+  ### Migration Notes
+  - 없음
+
+- cae0595: BackgroundIconButton disabled 전환이 중간에 밝게 튀었다가 되돌아오던 문제를 수정합니다.
+  - disabled fill을 컴포넌트 루트의 불투명 레이어로 분리하고 `opacity`만 교차 페이드합니다. 장식 레이어(`backdrop-filter`, `::before` multiply, `::after` plus-lighter)는 전환 중 그대로 유지됩니다.
+  - 결과 합성이 두 끝 렌더링의 선형 보간(`(1−p)·enabled + p·disabled`)이 되어 blend/clipping 비선형성과 무관하게 오버슈트가 발생하지 않습니다.
+  - disabled fill 색을 `--oc-background-icon-button-disabled-background-color`로 노출합니다. 기본값은 `--oc-color-theme-interaction-disable`입니다.
+
+  Migration Notes
+  - disabled 상태에서 `--oc-background-icon-button-background-color` 값이 더 이상 보이지 않습니다. 기존에는 이 override가 disabled 배경에도 적용됐습니다. disabled 배경을 조정하려면 `--oc-background-icon-button-disabled-background-color`를 사용하세요.
+  - 컴포넌트 루트가 `::after` 의사 요소를 사용합니다. oc-ui 컴포넌트 루트에 직접 `::after`를 선언하던 소비자 CSS는 충돌할 수 있습니다.
+  - public export, prop, `data-oc-*` selector 계약은 변경되지 않았습니다.
+
 ## 1.16.0
 
 ### Changes

package/README.md

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

package/dist/components/ActionArea/ActionArea.css

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

package/dist/components/ActionArea/ActionArea.js

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

package/dist/components/BackgroundIconButton/BackgroundIconButton.css

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

package/dist/components/Badge/Badge.css

@@ -1 +1 @@
-.oc-Badge-module__badge__ZbEBU{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);display:inline-flex;position:relative;isolation:isolate;align-items:center;justify-content:center;gap:var(--oc-space-item-gap-atom);appearance:none;margin:0;border:none;background:transparent;padding:0;color:var(--oc-badge-color);text-align:center;text-decoration:none;white-space:nowrap;transition: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-Badge-module__badge__ZbEBU{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)}}.oc-Badge-module__badge__ZbEBU:before{position:absolute;inset-block-start:calc(-1 * var(--oc-badge-padding-y));inset-inline-start:calc(-1 * var(--oc-badge-padding-x));z-index:1;box-sizing:content-box;border-radius:var(--oc-badge-radius);background-color:var(--oc-badge-background-color);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);inline-size:100%;block-size:100%;content:"";opacity:var(--oc-badge-background-opacity);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-Badge-module__badge__ZbEBU: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-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D){border-radius:var(--oc-badge-radius);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);--oc-interaction-inset-x: 0;--oc-interaction-inset-y: 0}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D):before{inset:0;padding:0}.oc-Badge-module__badge__ZbEBU: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-Badge-module__badge__ZbEBU[data-oc-interactive=true]:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);--_-interaction-state-scale: 1}}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true]:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true]{-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px)}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true] [data-oc-part=content]{pointer-events:none}.oc-Badge-module__badge__ZbEBU:disabled,.oc-Badge-module__badge__ZbEBU[aria-disabled=true]{--oc-badge-color: var(--oc-color-theme-label-disable);--oc-badge-background-color: var(--oc-color-theme-interaction-disable);cursor:not-allowed}.oc-Badge-module__badge__ZbEBU:disabled>[data-oc-component=interaction],.oc-Badge-module__badge__ZbEBU:disabled>[data-oc-component=interaction]:after,.oc-Badge-module__badge__ZbEBU[aria-disabled=true]>[data-oc-component=interaction],.oc-Badge-module__badge__ZbEBU[aria-disabled=true]>[data-oc-component=interaction]:after{pointer-events:none}.oc-Badge-module__badge__ZbEBU [data-oc-part=content]{position:relative;z-index:3}.oc-Badge-module__badge__ZbEBU>[data-oc-component=interaction]{z-index:2;border-radius:var(--oc-badge-radius)}.oc-Badge-module__badge__ZbEBU{--oc-badge-padding-x: .4em;--oc-badge-padding-y: .25em;--oc-badge-radius: max(0px, .4em * var(--oc-atomic-radius-factor));--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: transparent;--oc-badge-background-opacity: var(--oc-color-global-opacity-100);--oc-interaction-color: currentcolor;--oc-interaction-inset-x: calc(-1 * var(--oc-badge-padding-x));--oc-interaction-inset-y: calc(-1 * var(--oc-badge-padding-y));--oc-interaction-radius: var(--oc-badge-radius)}.oc-Badge-module__normal__tNcew{--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: var(--oc-color-theme-fill-normal)}.oc-Badge-module__accent__nIDKx{--oc-badge-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-opacity: var(--oc-color-global-opacity-8)}.oc-Badge-module__overlay__4KVqG{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal));backdrop-filter:blur(var(--oc-atomic-blur-normal));--oc-badge-color: var(--oc-color-theme-label-normal);--oc-badge-background-color: var(--oc-color-theme-background-normal-normal);--oc-badge-background-opacity: var(--oc-color-global-opacity-74)}.oc-Badge-module__xsmall__twvBK{font-size:calc(var(--oc-typo-size-caption1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-caption1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-caption1);font-weight:var(--oc-typo-weight-caption1-bold);--oc-badge-padding-x: .375em;--oc-badge-padding-y: .1em;--oc-badge-radius: max(0px, .3125em * var(--oc-atomic-radius-factor))}
+.oc-Badge-module__badge__ZbEBU{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);display:inline-flex;position:relative;isolation:isolate;align-items:center;justify-content:center;gap:var(--oc-space-item-gap-atom);appearance:none;margin:0;border:none;background:transparent;padding:0;color:var(--oc-badge-color);text-align:center;text-decoration:none;white-space:nowrap;transition: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-Badge-module__badge__ZbEBU{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)}}.oc-Badge-module__badge__ZbEBU:before{position:absolute;inset-block-start:calc(-1 * var(--oc-badge-padding-y));inset-inline-start:calc(-1 * var(--oc-badge-padding-x));z-index:1;box-sizing:content-box;border-radius:var(--oc-badge-radius);background-color:var(--oc-badge-accent-background-color);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);inline-size:100%;block-size:100%;content:"";opacity:var(--oc-badge-accent-background-opacity);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-Badge-module__badge__ZbEBU:before{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-Badge-module__badge__ZbEBU>[data-oc-part=surface]{position:absolute;inset-block-start:calc(-1 * var(--oc-badge-padding-y));inset-inline-start:calc(-1 * var(--oc-badge-padding-x));z-index:1;box-sizing:content-box;border-radius:var(--oc-badge-radius);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);inline-size:100%;block-size:100%;pointer-events:none}.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-default],.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-normal],.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-overlay]{position:absolute;inset:0;border-radius:inherit;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-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-default],.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-normal],.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-overlay]{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-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-default]{background-color:var(--_-badge-default-surface-background-color);opacity:var(--_-badge-default-surface-opacity)}.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-normal]{background-color:var(--_-badge-normal-surface-background-color);opacity:var(--_-badge-normal-surface-opacity)}.oc-Badge-module__badge__ZbEBU>[data-oc-part=surface]>[data-oc-part=surface-overlay]{background-color:var(--_-badge-overlay-surface-background-color);opacity:var(--_-badge-overlay-surface-opacity)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D){border-radius:var(--oc-badge-radius);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);--oc-interaction-inset-x: 0;--oc-interaction-inset-y: 0}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D):before{inset:0;padding:0}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D)>[data-oc-part=surface]{inset:0;padding:0}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D):after{inset:0;padding:0}.oc-Badge-module__badge__ZbEBU: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-Badge-module__badge__ZbEBU[data-oc-interactive=true]:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);--_-interaction-state-scale: 1}}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true]:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true]{-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px)}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true] [data-oc-part=content]{pointer-events:none}.oc-Badge-module__badge__ZbEBU:disabled,.oc-Badge-module__badge__ZbEBU[aria-disabled=true]{--oc-badge-color: var(--oc-color-theme-label-disable);--oc-badge-background-color: var(--oc-color-theme-interaction-disable);--oc-badge-accent-background-color: var(--oc-color-theme-interaction-disable);--_-badge-default-surface-background-color: var(--oc-color-theme-interaction-disable);--_-badge-normal-surface-background-color: var(--oc-color-theme-interaction-disable);--_-badge-overlay-surface-background-color: var(--oc-color-theme-interaction-disable);cursor:not-allowed}.oc-Badge-module__badge__ZbEBU:disabled>[data-oc-component=interaction],.oc-Badge-module__badge__ZbEBU:disabled>[data-oc-component=interaction]:after,.oc-Badge-module__badge__ZbEBU[aria-disabled=true]>[data-oc-component=interaction],.oc-Badge-module__badge__ZbEBU[aria-disabled=true]>[data-oc-component=interaction]:after{pointer-events:none}.oc-Badge-module__badge__ZbEBU [data-oc-part=content]{position:relative;z-index:3}.oc-Badge-module__badge__ZbEBU:after{position:absolute;inset-block-start:calc(-1 * var(--oc-badge-padding-y));inset-inline-start:calc(-1 * var(--oc-badge-padding-x));z-index:4;box-sizing:content-box;border-radius:var(--oc-badge-radius);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);inline-size:100%;block-size:100%;content:"";pointer-events:none;box-shadow:inset 0 0 0 var(--oc-badge-border-width) var(--oc-badge-border-color);transition:box-shadow 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-Badge-module__badge__ZbEBU:after{transition-property:box-shadow;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-Badge-module__badge__ZbEBU>[data-oc-component=interaction]{z-index:2;border-radius:var(--oc-badge-radius)}.oc-Badge-module__badge__ZbEBU{--oc-badge-padding-x: .4em;--oc-badge-padding-y: .25em;--oc-badge-radius: max(0px, .4em * var(--oc-atomic-radius-factor));--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: transparent;--oc-badge-background-opacity: var(--oc-color-global-opacity-100);--oc-badge-accent-background-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-accent-background-opacity: 0;--_-badge-default-surface-background-color: var(--oc-color-theme-label-strong);--_-badge-default-surface-opacity: 0;--_-badge-normal-surface-background-color: var(--oc-color-theme-fill-normal);--_-badge-normal-surface-opacity: 0;--_-badge-overlay-surface-background-color: var(--oc-color-theme-background-normal-normal);--_-badge-overlay-surface-opacity: 0;--oc-badge-border-width: 1px;--oc-badge-border-color: transparent;--oc-interaction-color: currentcolor;--oc-interaction-inset-x: calc(-1 * var(--oc-badge-padding-x));--oc-interaction-inset-y: calc(-1 * var(--oc-badge-padding-y));--oc-interaction-radius: var(--oc-badge-radius)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__default__iMYOq){--oc-badge-color: var(--oc-color-theme-background-normal-normal);--oc-badge-background-color: var(--oc-color-theme-label-strong);--_-badge-default-surface-background-color: var(--oc-color-theme-label-strong);--oc-badge-accent-background-opacity: 0;--_-badge-default-surface-opacity: var(--oc-badge-background-opacity)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__normal__tNcew){--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: var(--oc-color-theme-fill-normal);--oc-badge-accent-background-opacity: 0;--_-badge-normal-surface-opacity: var(--oc-badge-background-opacity)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__accent__nIDKx){--oc-badge-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-opacity: var(--oc-color-global-opacity-8);--oc-badge-accent-background-opacity: var(--oc-badge-background-opacity)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__overlay__4KVqG){-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal));backdrop-filter:blur(var(--oc-atomic-blur-normal));--oc-badge-color: var(--oc-color-theme-label-normal);--oc-badge-background-color: var(--oc-color-theme-background-normal-normal);--oc-badge-background-opacity: var(--oc-color-global-opacity-74);--oc-badge-accent-background-opacity: 0;--_-badge-overlay-surface-opacity: var(--oc-badge-background-opacity)}.oc-Badge-module__xsmall__twvBK{font-size:calc(var(--oc-typo-size-caption1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-caption1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-caption1);font-weight:var(--oc-typo-weight-caption1-bold);--oc-badge-padding-x: .375em;--oc-badge-padding-y: .1em;--oc-badge-radius: max(0px, .3125em * var(--oc-atomic-radius-factor))}