@orioncactuscorp/ui 1.1.0 → 1.3.0

package/README.md

@@ -125,7 +125,9 @@ Foundation별 커스텀 방식은 아래 기준으로 나눕니다.
 | space  | `$oc-space-overrides`                                     | 필요                                             |
 | atomic | radius, width, blur, shadow 같은 `--oc-atomic-*` override | 보통 불필요                                      |
 
-`--oc-typo-scale`은 특정 요소나 section 안의 typography를 함께 키우거나 줄일 때 쓰는 runtime multiplier입니다. 예를 들어 article 영역의 읽기 크기를 전반적으로 키워야 할 때 해당 scope에 `--oc-typo-scale: 1.1`처럼 지정할 수 있습니다.
+`--oc-typo-size-factor`은 특정 요소나 section 안의 typography를 함께 키우거나 줄일 때 쓰는 runtime multiplier입니다. 예를 들어 article 영역의 읽기 크기를 전반적으로 키워야 할 때 해당 scope에 `--oc-typo-size-factor: 1.1`처럼 지정할 수 있습니다.
+
+`--oc-atomic-radius-factor`는 atomic radius와 radius helper를 거친 component-local radius를 함께 키우거나 줄이는 runtime multiplier입니다. `0`으로 지정하면 `--oc-atomic-radius-max`를 포함한 radius token이 모두 각진 형태가 되며, 기존 `--oc-atomic-radius-*` token 이름은 그대로 유지됩니다.
 
 Typography나 spacing token의 responsive 출력 방식까지 바꿔야 하는 경우에는 `foundations.css` 대신 SCSS foundation source를 직접 compile할 수 있습니다. 이때 `foundations.css`를 대체하므로 reset은 별도로 import합니다.
 
@@ -202,6 +204,43 @@ import '@orioncactuscorp/ui/styles.css';
 
 SCSS foundation profile은 compile-time 설정입니다. Prebuilt `foundations.css` 또는 `styles.css` import에는 적용되지 않습니다.
 
+## SCSS Helpers
+
+`@orioncactuscorp/ui/scss/mixins/element`는 요소 표면을 구성할 때 쓰는 SCSS helper를 제공합니다.
+
+`oc-border`는 실제 CSS `border` 대신 inset `box-shadow`로 안쪽 border를 그립니다. 요소의 content, padding, layout 크기를 바꾸지 않는 surface stroke가 필요할 때 사용합니다.
+
+```scss
+@use '@orioncactuscorp/ui/scss/mixins/element' as *;
+
+.surface {
+  @include oc-border;
+}
+
+.surfaceAccent {
+  @include oc-border(var(--oc-color-theme-primary-normal));
+}
+
+.surfaceInvalid {
+  @include oc-border(1.5px, var(--oc-color-theme-status-negative));
+}
+```
+
+- `@include oc-border`는 `1px currentColor` inset border를 출력합니다.
+- `@include oc-border(black)`처럼 색상만 넘기면 `1px black` inset border를 출력합니다.
+- `@include oc-border(1.5px, var(--color))`처럼 width와 color를 함께 넘길 수 있습니다.
+- `1.5px`, `2.5px`, `3.5px` 같은 half-pixel px width는 WebKit/DPR 보정을 함께 출력합니다.
+
+`oc-radius($radius, $factor-token: var(--oc-atomic-radius-factor))`는 `rem`, `em`, `px`, `clamp(...)` 기반 radius 값을 전역 radius factor에 연결합니다. 컴포넌트 로컬 radius contract가 typography-relative `em` 값을 유지하면서도 전역 radius 정책을 따라야 할 때 사용합니다.
+
+```scss
+@use '@orioncactuscorp/ui/scss/mixins/radius' as *;
+
+.badge {
+  --oc-badge-radius: #{oc-radius(0.4em)};
+}
+```
+
 ## Icons
 
 `@orioncactuscorp/ui`는 `@orioncactuscorp/icons`를 dependency로 사용합니다. `Checkbox`, `Radio`, `Select`, `Accordion`, `ModalClose` 같은 컴포넌트 내부 indicator를 별도 설정 없이 렌더링합니다.
@@ -218,10 +257,19 @@ import { IconClose, IconDefault } from '@orioncactuscorp/icons';
 
 ## Motion
 
-Motion은 duration/easing 숫자를 직접 고르는 대신 `feedback`, `reveal`, `move` 같은 intent 기준으로 작성합니다. `oc-motion`은 intent, phase, pace를 기반으로 duration token, spring profile, reduced-motion 정책을 함께 적용합니다.
+Motion은 duration/easing 숫자를 직접 고르는 대신 `feedback`, `disclosure`, `surface`, `sheet`, `expand` 같은 intent 기준으로 작성합니다. `oc-motion`은 intent, phase, pace를 기반으로 duration token, spring profile, reduced-motion 정책을 함께 적용합니다.
 
 ```scss
-@include oc-motion($properties, $intent, $phase: change, $pace: normal);
+@include oc-motion(
+  $properties,
+  $intent,
+  $phase: change,
+  $pace: normal,
+  $duration-factor: 1,
+  $reduced: auto,
+  $duration-token: null,
+  $extra-bounce: null
+);
 ```
 
 ```scss
@@ -232,43 +280,51 @@ Motion은 duration/easing 숫자를 직접 고르는 대신 `feedback`, `reveal`
 }
 
 .popover {
-  @include oc-motion((opacity, transform), reveal);
+  @include oc-motion((opacity, transform), disclosure);
+}
+
+.accordionPanel {
+  @include oc-motion(block-size, expand, $phase: enter);
 }
 ```
 
 일반 컴포넌트와 consumer SCSS에서는 `oc-motion`을 우선 사용하고, 직접 spring parameter를 설계해야 하는 고급 케이스에서만 `oc-spring`을 사용합니다.
 
-### Motion Scale
-
-Motion scale은 transform scale, 이동 거리, duration의 전역 강도를 조정하는 runtime token입니다. 기본값보다 작으면 효과가 약해지거나 짧아지고, 크면 효과가 강해지거나 길어집니다. 전체 tone은 parent token으로 먼저 맞추고, 특정 intent만 달라야 할 때 child token을 override합니다.
-
-| Token                                 | 기본값                            | 비고                                   |
-| ------------------------------------- | --------------------------------- | -------------------------------------- |
-| `--oc-motion-scale`                   | `1`                               | 전체 transform scale amplitude         |
-| `--oc-motion-scale-feedback`          | `var(--oc-motion-scale)`          | press, hover, selected                 |
-| `--oc-motion-scale-reveal`            | `var(--oc-motion-scale)`          | menu, tooltip, modal                   |
-| `--oc-motion-distance-scale`          | `1`                               | 전체 translate/reject 거리             |
-| `--oc-motion-distance-scale-reject`   | `var(--oc-motion-distance-scale)` | reject shake                           |
-| `--oc-motion-distance-scale-reveal`   | `var(--oc-motion-distance-scale)` | reveal, move                           |
-| `--oc-motion-duration-scale`          | `1`                               | 전체 duration. 작으면 빠르고 크면 느림 |
-| `--oc-motion-duration-scale-reduced`  | `0.75`                            | reduced-motion fade/feedback           |
-| `--oc-motion-duration-scale-preserve` | `1`                               | reduced-motion preserve                |
-| `--oc-motion-pace-quick`              | `0.75`                            | `quick` pace duration multiplier       |
-| `--oc-motion-pace-normal`             | `1`                               | `normal` pace duration multiplier      |
-| `--oc-motion-pace-slow`               | `1.35`                            | `slow` pace duration multiplier        |
+spring-backed motion의 반동만 국소 조정해야 할 때는 `$extra-bounce`를 사용할 수 있습니다. non-spring motion에서는 사용할 수 없고, transform entrance처럼 overshoot가 의미 있는 property에 제한적으로 사용합니다.
+
+### Motion Factor
+
+Motion factor는 transform scale, 이동 거리, duration의 전역 강도를 조정하는 runtime token입니다. 기본값보다 작으면 효과가 약해지거나 짧아지고, 크면 효과가 강해지거나 길어집니다. 전체 tone은 parent token으로 먼저 맞추고, 특정 intent만 달라야 할 때 child token을 override합니다.
+
+`spatial` factor는 intent가 아니라 scale/translate amplitude group입니다. `disclosure`, `surface`, `sheet`, `expand`, `move`처럼 UI의 공간 관계를 설명하는 motion에 적용됩니다.
+
+| Token                                  | 기본값                             | 비고                                     |
+| -------------------------------------- | ---------------------------------- | ---------------------------------------- |
+| `--oc-motion-scale-factor`             | `1`                                | 전체 transform scale amplitude           |
+| `--oc-motion-scale-factor-feedback`    | `var(--oc-motion-scale-factor)`    | press, hover, selected                   |
+| `--oc-motion-scale-factor-spatial`     | `var(--oc-motion-scale-factor)`    | disclosure, surface, sheet, expand, move |
+| `--oc-motion-distance-factor`          | `1`                                | 전체 translate/reject 거리               |
+| `--oc-motion-distance-factor-reject`   | `var(--oc-motion-distance-factor)` | reject shake                             |
+| `--oc-motion-distance-factor-spatial`  | `var(--oc-motion-distance-factor)` | disclosure, surface, sheet, expand, move |
+| `--oc-motion-duration-factor`          | `1`                                | 전체 duration. 작으면 빠르고 크면 느림   |
+| `--oc-motion-duration-factor-reduced`  | `0.75`                             | reduced-motion fade/feedback             |
+| `--oc-motion-duration-factor-preserve` | `1`                                | reduced-motion preserve                  |
+| `--oc-motion-pace-quick`               | `0.75`                             | `quick` pace duration multiplier         |
+| `--oc-motion-pace-normal`              | `1`                                | `normal` pace duration multiplier        |
+| `--oc-motion-pace-slow`                | `1.35`                             | `slow` pace duration multiplier          |
 
 ### Runtime Motion
 
-React에서 height/reveal처럼 CSS transition만으로 안정적으로 다루기 어려운 motion은 `@orioncactuscorp/ui/react/motion` subpath를 사용합니다. `MotionReveal`은 같은 `intent`, `phase`, `pace`, `reduced` vocabulary로 layout size를 JS spring animation에 연결합니다.
+React에서 height expand처럼 CSS transition만으로 안정적으로 다루기 어려운 motion은 `@orioncactuscorp/ui/react/motion` subpath를 사용합니다. `MotionExpand`는 같은 `intent`, `phase`, `pace`, `extraBounce`, `reduced` vocabulary로 layout size를 JS spring animation에 연결합니다.
 
 ```tsx
-import { MotionReveal } from '@orioncactuscorp/ui/react/motion';
+import { MotionExpand } from '@orioncactuscorp/ui/react/motion';
 
 export function Panel({ open, children }) {
   return (
-    <MotionReveal open={open} forceMount intent='reveal' pace='normal'>
+    <MotionExpand open={open} forceMount intent='expand' pace='normal'>
       {children}
-    </MotionReveal>
+    </MotionExpand>
   );
 }
 ```

package/dist/components/Accordion/Accordion.css

@@ -1 +1 @@
-.oc-Accordion-module__accordion__wD27Q{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body1);display:flex;flex-direction:column;margin-top:calc(-1 * var(--oc-cell-padding));margin-bottom:calc(-1 * var(--oc-cell-padding));color:var(--oc-color-theme-label-normal);--oc-cell-padding: var(--oc-space-item-padding-small);--oc-cell-padding-inline: var(--oc-space-item-padding-medium);--oc-cell-gap: .5em;--oc-cell-icon-size: 1.375rem;--oc-cell-disabled-opacity: .28;--oc-cell-interaction-margin-inline: var(--oc-space-item-padding-xsmall);--oc-cell-interaction-radius: var(--oc-atomic-radius-small);--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal);--oc-accordion-current-divider-color: var(--oc-cell-divider-color)}.oc-Accordion-module__item__YNNr-[data-oc-divider=normal]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Accordion-module__item__YNNr-[data-oc-divider=neutral]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Accordion-module__item__YNNr-[data-oc-divider=alternative]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Accordion-module__item__YNNr-[data-oc-divider=none]{--oc-accordion-current-divider-color: transparent}.oc-Accordion-module__item__YNNr-+.oc-Accordion-module__item__YNNr-{border-block-start:1px solid var(--oc-accordion-current-divider-color)}.oc-Accordion-module__item__YNNr-[data-oc-disabled=true] .oc-Accordion-module__summary__ORyIA>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]),.oc-Accordion-module__item__YNNr-[data-oc-disabled=true] [data-oc-part=panel-inner]{opacity:var(--oc-cell-disabled-opacity)}.oc-Accordion-module__header__AYOT5{margin:0;font:inherit}.oc-Accordion-module__summary__ORyIA{position:relative;display:flex;align-items:flex-start;gap:var(--oc-cell-gap);inline-size:100%;min-inline-size:0;padding:var(--oc-cell-padding) 0;border:0;color:inherit;font:inherit;text-align:start;background:transparent;cursor:pointer;transform:scale(var(--oc-accordion-summary-press-scale, 1));-webkit-user-select:none;user-select:none;transition:border-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__summary__ORyIA{transition-property:border-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * .5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Accordion-module__summary__ORyIA{--oc-cell-content-min-block-size: var(--oc-typo-height-body1)}.oc-Accordion-module__summary__ORyIA[data-oc-vertical-align=center]{align-items:center}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=true]{padding-inline:var(--oc-cell-padding-inline)}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=true]>[data-oc-component=interaction]{--oc-interaction-inset-x: 0;--oc-interaction-radius: 0}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=false]>[data-oc-component=interaction]{--oc-interaction-inset-x: calc(-1 * var(--oc-cell-interaction-margin-inline));--oc-interaction-radius: var(--oc-cell-interaction-radius)}.oc-Accordion-module__summary__ORyIA:focus-visible{outline:none}.oc-Accordion-module__summary__ORyIA:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Accordion-module__summary__ORyIA:hover:not(:disabled)>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Accordion-module__summary__ORyIA:active:not(:disabled){--oc-accordion-summary-press-scale: .9875}.oc-Accordion-module__summary__ORyIA:active:not(:disabled)>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Accordion-module__summary__ORyIA:disabled{cursor:not-allowed}.oc-Accordion-module__summary__ORyIA[data-oc-disabled=true]>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]){opacity:var(--oc-cell-disabled-opacity)}.oc-Accordion-module__summary__ORyIA>[data-oc-component=interaction]{border-radius:var(--oc-interaction-radius)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=leading],.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]{position:relative;z-index:2;display:inline-flex;flex:none;align-items:center;min-block-size:var(--oc-cell-content-min-block-size);color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=leading]>[data-oc-component=svg-icon],.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]>[data-oc-component=svg-icon]{block-size:var(--oc-cell-icon-size)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=content]{position:relative;z-index:2;display:flex;align-items:center;flex:1;min-block-size:var(--oc-cell-content-min-block-size);min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=text]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-atom);min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=label],.oc-Accordion-module__summary__ORyIA [data-oc-part=description]{min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=description]{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__trailing__Gnf84{justify-content:flex-end}.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transform:rotate(var(--oc-accordion-chevron-rotation, 0deg));transition:transform calc(.326s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1.5) linear(0 0%,.0045 .95%,.017 1.9%,.0363 2.86%,.061 3.81%,.0902 4.76%,.1229 5.71%,.1582 6.67%,.1956 7.62%,.2343 8.57%,.2738 9.52%,.3136 10.48%,.3533 11.43%,.3927 12.38%,.4313 13.33%,.469 14.29%,.5056 15.24%,.541 16.19%,.5749 17.14%,.6074 18.1%,.6384 19.05%,.6678 20%,.6956 20.95%,.7219 21.9%,.7466 22.86%,.7697 23.81%,.7913 24.76%,.8114 25.71%,.8301 26.67%,.8474 27.62%,.8635 28.57%,.8782 29.52%,.8918 30.48%,.9043 31.43%,.9157 32.38%,.9261 33.33%,.9355 34.29%,.9441 35.24%,.9518 36.19%,.9588 37.14%,.9651 38.1%,.9707 39.05%,.9757 40%,.9802 40.95%,.9842 41.9%,.9877 42.86%,.9907 43.81%,.9934 44.76%,.9957 45.71%,.9977 46.67%,.9995 47.62%,1.0009 48.57%,1.0022 49.52%,1.0032 50.48%,1.004 51.43%,1.0047 52.38%,1.0052 53.33%,1.0056 54.29%,1.0059 55.24%,1.0061 56.19%,1.0062 57.14%,1.0063 58.1%,1.0063 59.05%,1.0062 60%,1.0061 60.95%,1.0059 61.9%,1.0057 62.86%,1.0055 63.81%,1.0053 64.76%,1.0051 65.71%,1.0048 66.67%,1.0046 67.62%,1.0044 68.57%,1.0041 69.52%,1.0039 70.48%,1.0036 71.43%,1.0034 72.38%,1.0031 73.33%,1.0029 74.29%,1.0027 75.24%,1.0025 76.19%,1.0023 77.14%,1.0021 78.1%,1.0019 79.05%,1.0018 80%,1.0016 80.95%,1.0015 81.9%,1.0013 82.86%,1.0012 83.81%,1.0011 84.76%,1.001 85.71%,1.0009 86.67%,1.0008 87.62%,1.0007 88.57%,1.0006 89.52%,1.0005 90.48%,1.0005 91.43%,1.0004 92.38%,1.0004 93.33%,1.0003 94.29%,1.0003 95.24%,1.0002 96.19%,1.0002 97.14%,1.0002 98.1%,1.0001 99.05%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transition:none;transform:none}}.oc-Accordion-module__details__x7mjA{min-block-size:0}.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__summary__ORyIA,.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__trailing__Gnf84{transition:none}.oc-Accordion-module__panelInner__YQXzI{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-small);min-block-size:0;padding-block:0 var(--oc-cell-padding);padding-inline:0}.oc-Accordion-module__item__YNNr-:has([data-oc-component=accordion-summary][data-oc-fill-width=true]) [data-oc-part=panel-inner]{padding-inline:var(--oc-cell-padding-inline)}.oc-Accordion-module__description__bKdPX{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);margin:0;color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__content__RyBzl{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-small);min-inline-size:0}.oc-Accordion-module__normal__Fz83W{--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Accordion-module__neutral__eEyvY{--oc-cell-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Accordion-module__alternative__HdOit{--oc-cell-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Accordion-module__none__EiLem{--oc-cell-divider-color: transparent}
+.oc-Accordion-module__accordion__wD27Q{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);display:flex;flex-direction:column;margin-top:calc(-1 * var(--oc-cell-padding));margin-bottom:calc(-1 * var(--oc-cell-padding));color:var(--oc-color-theme-label-normal);--oc-cell-padding: var(--oc-space-item-padding-small);--oc-cell-padding-inline: var(--oc-space-item-padding-medium);--oc-cell-gap: .5em;--oc-cell-icon-size: 1.375rem;--oc-cell-disabled-opacity: .28;--oc-cell-interaction-margin-inline: var(--oc-space-item-padding-xsmall);--oc-cell-interaction-radius: var(--oc-atomic-radius-small);--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal);--oc-accordion-current-divider-color: var(--oc-cell-divider-color)}.oc-Accordion-module__item__YNNr-[data-oc-divider=normal]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Accordion-module__item__YNNr-[data-oc-divider=neutral]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Accordion-module__item__YNNr-[data-oc-divider=alternative]{--oc-accordion-current-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Accordion-module__item__YNNr-[data-oc-divider=none]{--oc-accordion-current-divider-color: transparent}.oc-Accordion-module__item__YNNr-+.oc-Accordion-module__item__YNNr-{border-block-start:1px solid var(--oc-accordion-current-divider-color)}@media(hover:hover){.oc-Accordion-module__item__YNNr-:has(>.oc-Accordion-module__header__AYOT5>.oc-Accordion-module__summary__ORyIA:hover:not(:disabled)){--oc-accordion-current-divider-color: transparent}.oc-Accordion-module__item__YNNr-:has(>.oc-Accordion-module__header__AYOT5>.oc-Accordion-module__summary__ORyIA:hover:not(:disabled)):not([data-oc-state=open])+.oc-Accordion-module__item__YNNr-{--oc-accordion-current-divider-color: transparent}}.oc-Accordion-module__item__YNNr-[data-oc-disabled=true] .oc-Accordion-module__summary__ORyIA>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]),.oc-Accordion-module__item__YNNr-[data-oc-disabled=true] [data-oc-part=panel-inner]{opacity:var(--oc-cell-disabled-opacity)}.oc-Accordion-module__header__AYOT5{margin:0;font:inherit}.oc-Accordion-module__summary__ORyIA{position:relative;display:flex;align-items:flex-start;gap:var(--oc-cell-gap);padding-block:var(--oc-cell-padding);min-inline-size:0;color:inherit;transform:scale(var(--oc-accordion-summary-press-scale, 1));transition:border-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__summary__ORyIA{transition-property:border-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * .5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Accordion-module__summary__ORyIA{--oc-cell-content-min-block-size: var(--oc-typo-height-body1)}.oc-Accordion-module__summary__ORyIA[data-oc-vertical-align=center]{align-items:center}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=true]{padding-inline:var(--oc-cell-padding-inline)}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=true]>[data-oc-component=interaction]{--oc-interaction-inset-x: 0;--oc-interaction-radius: 0}.oc-Accordion-module__summary__ORyIA[data-oc-fill-width=false]>[data-oc-component=interaction]{--oc-interaction-inset-x: calc(-1 * var(--oc-cell-interaction-margin-inline));--oc-interaction-radius: var(--oc-cell-interaction-radius)}.oc-Accordion-module__summary__ORyIA{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.oc-Accordion-module__summary__ORyIA:focus-visible{outline:none}.oc-Accordion-module__summary__ORyIA:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Accordion-module__summary__ORyIA:hover:not(:disabled)>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Accordion-module__summary__ORyIA:active:not(:disabled){--oc-accordion-summary-press-scale: max(0, 1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback))}.oc-Accordion-module__summary__ORyIA:active:not(:disabled)>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Accordion-module__summary__ORyIA[data-oc-disabled=true]{cursor:not-allowed}.oc-Accordion-module__summary__ORyIA[data-oc-disabled=true]>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]){opacity:var(--oc-cell-disabled-opacity)}.oc-Accordion-module__summary__ORyIA[data-oc-disabled=true]>[data-oc-component=interaction]{pointer-events:none}.oc-Accordion-module__summary__ORyIA>[data-oc-component=interaction]{border-radius:var(--oc-interaction-radius)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=leading],.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]{position:relative;z-index:2;display:inline-flex;flex:none;align-items:center;min-block-size:var(--oc-cell-content-min-block-size);color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=leading]>[data-oc-component=svg-icon],.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]>[data-oc-component=svg-icon]{block-size:var(--oc-cell-icon-size)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=content]{position:relative;z-index:2;display:flex;align-items:center;flex:1;min-block-size:var(--oc-cell-content-min-block-size);min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=text]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-atom);min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=label],.oc-Accordion-module__summary__ORyIA [data-oc-part=description]{min-inline-size:0}.oc-Accordion-module__summary__ORyIA [data-oc-part=description]{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);color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__summary__ORyIA>[data-oc-part=trailing]{justify-content:flex-end}.oc-Accordion-module__summary__ORyIA{inline-size:100%;padding-inline:0;border:0;font:inherit;text-align:start;background:transparent}.oc-Accordion-module__summary__ORyIA:disabled{cursor:not-allowed}.oc-Accordion-module__trailing__Gnf84{justify-content:flex-end}.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transform:rotate(var(--oc-accordion-chevron-rotation, 0deg));transition:transform calc(.561s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-quick) * 1) linear(0 0%,.0045 .83%,.0168 1.67%,.0356 2.5%,.0593 3.33%,.0871 4.17%,.1178 5%,.1507 5.83%,.1852 6.67%,.2207 7.5%,.2566 8.33%,.2926 9.17%,.3283 10%,.3635 10.83%,.398 11.67%,.4316 12.5%,.4642 13.33%,.4957 14.17%,.5259 15%,.5549 15.83%,.5826 16.67%,.609 17.5%,.6341 18.33%,.6579 19.17%,.6805 20%,.7018 20.83%,.722 21.67%,.7409 22.5%,.7588 23.33%,.7756 24.17%,.7913 25%,.8061 25.83%,.8199 26.67%,.8328 27.5%,.8449 28.33%,.8562 29.17%,.8667 30%,.8765 30.83%,.8857 31.67%,.8942 32.5%,.9021 33.33%,.9095 34.17%,.9163 35%,.9227 35.83%,.9286 36.67%,.934 37.5%,.9391 38.33%,.9438 39.17%,.9481 40%,.9522 40.83%,.9559 41.67%,.9594 42.5%,.9625 43.33%,.9655 44.17%,.9682 45%,.9707 45.83%,.9731 46.67%,.9752 47.5%,.9772 48.33%,.979 49.17%,.9807 50%,.9822 50.83%,.9837 51.67%,.985 52.5%,.9862 53.33%,.9873 54.17%,.9883 55%,.9893 55.83%,.9902 56.67%,.991 57.5%,.9917 58.33%,.9924 59.17%,.993 60%,.9936 60.83%,.9941 61.67%,.9946 62.5%,.995 63.33%,.9955 64.17%,.9958 65%,.9962 65.83%,.9965 66.67%,.9968 67.5%,.9971 68.33%,.9973 69.17%,.9975 70%,.9977 70.83%,.9979 71.67%,.9981 72.5%,.9983 73.33%,.9984 74.17%,.9985 75%,.9987 75.83%,.9988 76.67%,.9989 77.5%,.999 78.33%,.9991 79.17%,.9991 80%,.9992 80.83%,.9993 81.67%,.9993 82.5%,.9994 83.33%,.9994 84.17%,.9995 85%,.9995 85.83%,.9996 86.67%,.9996 87.5%,.9996 88.33%,.9997 89.17%,.9997 90%,.9997 90.83%,.9998 91.67%,.9998 92.5%,.9998 93.33%,.9998 94.17%,.9998 95%,.9998 95.83%,.9999 96.67%,.9999 97.5%,.9999 98.33%,.9999 99.17%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transition:none;transform:none}}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__trailing__Gnf84[data-oc-rotate=true]{transform:rotate(var(--oc-accordion-chevron-rotation, 0deg))}}.oc-Accordion-module__details__x7mjA{min-block-size:0}.oc-Accordion-module__details__x7mjA>[data-oc-part=panel-inner]{opacity:0;transition:opacity calc(.449s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(0 0%,.0045 .83%,.0169 1.67%,.0356 2.5%,.0594 3.33%,.0871 4.17%,.1179 5%,.1508 5.83%,.1853 6.67%,.2208 7.5%,.2567 8.33%,.2927 9.17%,.3285 10%,.3637 10.83%,.3983 11.67%,.4319 12.5%,.4644 13.33%,.4959 14.17%,.5261 15%,.5551 15.83%,.5828 16.67%,.6092 17.5%,.6343 18.33%,.6582 19.17%,.6807 20%,.7021 20.83%,.7222 21.67%,.7412 22.5%,.759 23.33%,.7758 24.17%,.7915 25%,.8063 25.83%,.8201 26.67%,.833 27.5%,.8451 28.33%,.8564 29.17%,.8669 30%,.8767 30.83%,.8858 31.67%,.8943 32.5%,.9022 33.33%,.9096 34.17%,.9164 35%,.9228 35.83%,.9287 36.67%,.9341 37.5%,.9392 38.33%,.9439 39.17%,.9482 40%,.9523 40.83%,.956 41.67%,.9594 42.5%,.9626 43.33%,.9656 44.17%,.9683 45%,.9708 45.83%,.9731 46.67%,.9753 47.5%,.9772 48.33%,.979 49.17%,.9807 50%,.9823 50.83%,.9837 51.67%,.985 52.5%,.9862 53.33%,.9874 54.17%,.9884 55%,.9893 55.83%,.9902 56.67%,.991 57.5%,.9917 58.33%,.9924 59.17%,.993 60%,.9936 60.83%,.9941 61.67%,.9946 62.5%,.9951 63.33%,.9955 64.17%,.9958 65%,.9962 65.83%,.9965 66.67%,.9968 67.5%,.9971 68.33%,.9973 69.17%,.9975 70%,.9977 70.83%,.9979 71.67%,.9981 72.5%,.9983 73.33%,.9984 74.17%,.9985 75%,.9987 75.83%,.9988 76.67%,.9989 77.5%,.999 78.33%,.9991 79.17%,.9991 80%,.9992 80.83%,.9993 81.67%,.9993 82.5%,.9994 83.33%,.9994 84.17%,.9995 85%,.9995 85.83%,.9996 86.67%,.9996 87.5%,.9996 88.33%,.9997 89.17%,.9997 90%,.9997 90.83%,.9998 91.67%,.9998 92.5%,.9998 93.33%,.9998 94.17%,.9998 95%,.9998 95.83%,.9999 96.67%,.9999 97.5%,.9999 98.33%,.9999 99.17%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__details__x7mjA>[data-oc-part=panel-inner]{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-expand-exit) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-expand-exit)}}.oc-Accordion-module__details__x7mjA[data-oc-motion-state=opening]>[data-oc-part=panel-inner],.oc-Accordion-module__details__x7mjA[data-oc-motion-state=open]>[data-oc-part=panel-inner]{opacity:1;transition:opacity calc(.561s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(0 0%,.0045 .83%,.0168 1.67%,.0356 2.5%,.0593 3.33%,.0871 4.17%,.1178 5%,.1507 5.83%,.1852 6.67%,.2207 7.5%,.2566 8.33%,.2926 9.17%,.3283 10%,.3635 10.83%,.398 11.67%,.4316 12.5%,.4642 13.33%,.4957 14.17%,.5259 15%,.5549 15.83%,.5826 16.67%,.609 17.5%,.6341 18.33%,.6579 19.17%,.6805 20%,.7018 20.83%,.722 21.67%,.7409 22.5%,.7588 23.33%,.7756 24.17%,.7913 25%,.8061 25.83%,.8199 26.67%,.8328 27.5%,.8449 28.33%,.8562 29.17%,.8667 30%,.8765 30.83%,.8857 31.67%,.8942 32.5%,.9021 33.33%,.9095 34.17%,.9163 35%,.9227 35.83%,.9286 36.67%,.934 37.5%,.9391 38.33%,.9438 39.17%,.9481 40%,.9522 40.83%,.9559 41.67%,.9594 42.5%,.9625 43.33%,.9655 44.17%,.9682 45%,.9707 45.83%,.9731 46.67%,.9752 47.5%,.9772 48.33%,.979 49.17%,.9807 50%,.9822 50.83%,.9837 51.67%,.985 52.5%,.9862 53.33%,.9873 54.17%,.9883 55%,.9893 55.83%,.9902 56.67%,.991 57.5%,.9917 58.33%,.9924 59.17%,.993 60%,.9936 60.83%,.9941 61.67%,.9946 62.5%,.995 63.33%,.9955 64.17%,.9958 65%,.9962 65.83%,.9965 66.67%,.9968 67.5%,.9971 68.33%,.9973 69.17%,.9975 70%,.9977 70.83%,.9979 71.67%,.9981 72.5%,.9983 73.33%,.9984 74.17%,.9985 75%,.9987 75.83%,.9988 76.67%,.9989 77.5%,.999 78.33%,.9991 79.17%,.9991 80%,.9992 80.83%,.9993 81.67%,.9993 82.5%,.9994 83.33%,.9994 84.17%,.9995 85%,.9995 85.83%,.9996 86.67%,.9996 87.5%,.9996 88.33%,.9997 89.17%,.9997 90%,.9997 90.83%,.9998 91.67%,.9998 92.5%,.9998 93.33%,.9998 94.17%,.9998 95%,.9998 95.83%,.9999 96.67%,.9999 97.5%,.9999 98.33%,.9999 99.17%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-Accordion-module__details__x7mjA[data-oc-motion-state=opening]>[data-oc-part=panel-inner],.oc-Accordion-module__details__x7mjA[data-oc-motion-state=open]>[data-oc-part=panel-inner]{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-expand) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-expand)}}.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__summary__ORyIA,.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__trailing__Gnf84,.oc-Accordion-module__accordion__wD27Q[data-oc-animation=disabled] .oc-Accordion-module__details__x7mjA>[data-oc-part=panel-inner]{transition:none}.oc-Accordion-module__panelInner__YQXzI{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-small);min-block-size:0;padding-block:0 var(--oc-cell-padding);padding-inline:0}.oc-Accordion-module__item__YNNr-:has([data-oc-component=accordion-summary][data-oc-fill-width=true]) [data-oc-part=panel-inner]{padding-inline:var(--oc-cell-padding-inline)}.oc-Accordion-module__description__bKdPX{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);margin:0;color:var(--oc-color-theme-label-alternative)}.oc-Accordion-module__content__RyBzl{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-small);min-inline-size:0}.oc-Accordion-module__normal__Fz83W{--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Accordion-module__neutral__eEyvY{--oc-cell-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Accordion-module__alternative__HdOit{--oc-cell-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Accordion-module__none__EiLem{--oc-cell-divider-color: transparent}

package/dist/components/Accordion/Accordion.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as u, jsxs as k } from "react/jsx-runtime";
-import { useRef as $, useState as E, useCallback as z, useId as J, useEffect as L, createContext as H, useContext as q } from "react";
+import { useRef as $, useState as S, useCallback as z, useId as J, useEffect as L, createContext as H, useContext as q } from "react";
 import Q from "@orioncactuscorp/icons/orioncactus/ChevronDownTight";
-import { MotionReveal as W } from "../../react/motion.js";
+import { MotionExpand as W } from "../../react/motion.js";
 import X from "../Interaction/Interaction.js";
 import { normalizeSlotIcon as V } from "../internal/slot.js";
 import p from "./Accordion.module.scss.js";
@@ -21,7 +21,7 @@ function j(o) {
     throw new Error(`${o} must be used within AccordionItem.`);
   return t;
 }
-function S(o, t) {
+function E(o, t) {
   const e = Array.from(new Set(o.filter(Boolean)));
   return t ? e : e.slice(0, 1);
 }
@@ -60,32 +60,32 @@ function lo({
   defaultValue: a = [],
   disabled: m = !1,
   disableAnimation: c = !1,
-  divider: d = "alternative",
+  divider: d = "neutral",
   loopFocus: l = !0,
   multiple: r = !0,
   onValueChange: A,
   ref: y,
   value: f,
-  ...h
+  ...x
 }) {
-  const I = $(null), x = f !== void 0, [b, v] = E(
-    () => S(a, r)
-  ), n = S(
-    x ? f : b,
+  const v = $(null), I = f !== void 0, [b, h] = S(
+    () => E(a, r)
+  ), n = E(
+    I ? f : b,
     r
   ), D = (i) => {
-    I.current = i, O(y, i);
-  }, R = (i) => {
-    const g = S(i, r);
-    x || v(g), A?.(g);
+    v.current = i, O(y, i);
   }, w = (i) => {
+    const g = E(i, r);
+    I || h(g), A?.(g);
+  }, R = (i) => {
     if (m) return;
     if (n.includes(i)) {
       if (!e) return;
-      R(n.filter((N) => N !== i));
+      w(n.filter((N) => N !== i));
       return;
     }
-    R(r ? [...n, i] : [i]);
+    w(r ? [...n, i] : [i]);
   };
   return /* @__PURE__ */ u(
     B.Provider,
@@ -97,15 +97,15 @@ function lo({
         divider: d,
         disableAnimation: c,
         loopFocus: l,
-        rootRef: I,
-        toggleItem: w
+        rootRef: v,
+        toggleItem: R
       },
       children: /* @__PURE__ */ u(
         "div",
         {
           ref: D,
           className: C(p.accordion, p[d], t),
-          ...h,
+          ...x,
           "data-oc-component": "accordion",
           "data-oc-disabled": m ? "true" : void 0,
           "data-oc-divider": d,
@@ -125,9 +125,9 @@ function uo({
   value: c,
   ...d
 }) {
-  const l = P("AccordionItem"), r = J(), A = l.disabled || e, y = l.value.includes(c), f = a ?? l.divider, [h, I] = E(y), x = z((b) => {
-    I(
-      (v) => v === b ? v : b
+  const l = P("AccordionItem"), r = J(), A = l.disabled || e, y = l.value.includes(c), f = a ?? l.divider, [x, v] = S(y), I = z((b) => {
+    v(
+      (h) => h === b ? h : b
     );
   }, []);
   return /* @__PURE__ */ u(
@@ -140,8 +140,8 @@ function uo({
         divider: f,
         summaryId: `${r}-summary`,
         detailsId: `${r}-details`,
-        detailsPresent: h,
-        setDetailsPresent: x
+        detailsPresent: x,
+        setDetailsPresent: I
       },
       children: /* @__PURE__ */ u(
         "div",
@@ -172,23 +172,23 @@ function mo({
   onClick: A,
   onKeyDown: y,
   ref: f,
-  trailing: h,
-  type: I = "button",
-  verticalAlign: x = "top",
+  trailing: x,
+  type: v = "button",
+  verticalAlign: I = "top",
   ...b
 }) {
-  const v = P("AccordionSummary"), n = j("AccordionSummary"), D = $(n.open), [R, w] = E(
+  const h = P("AccordionSummary"), n = j("AccordionSummary"), D = $(n.open), [w, R] = S(
     () => n.open ? 180 : 0
-  ), i = n.disabled || m, g = n.open && !v.collapsible, N = `h${to(d) ? d : 3}`, U = e ?? (a ? /* @__PURE__ */ k("span", { "data-oc-part": "text", children: [
+  ), i = n.disabled || m, g = n.open && !h.collapsible, N = `h${to(d) ? d : 3}`, U = e ?? (a ? /* @__PURE__ */ k("span", { "data-oc-part": "text", children: [
     /* @__PURE__ */ u("span", { "data-oc-part": "label", children: o }),
     /* @__PURE__ */ u("span", { "data-oc-part": "description", children: a })
-  ] }) : o), K = V(r), T = h === void 0 ? /* @__PURE__ */ u(Q, { size: "custom" }) : h, F = V(T), G = h === void 0 ? {
-    "--oc-accordion-chevron-rotation": `${R}deg`
+  ] }) : o), K = V(r), T = x === void 0 ? /* @__PURE__ */ u(Q, { size: "custom" }) : x, F = V(T), G = x === void 0 ? {
+    "--oc-accordion-chevron-rotation": `${w}deg`
   } : void 0, M = (s) => {
     O(f, s);
   };
   return L(() => {
-    D.current !== n.open && (D.current = n.open, w(
+    D.current !== n.open && (D.current = n.open, R(
       (s) => s + Y
     ));
   }, [n.open]), /* @__PURE__ */ u(N, { className: p.header, "data-oc-part": "header", children: /* @__PURE__ */ k(
@@ -197,28 +197,28 @@ function mo({
       ref: M,
       className: C(p.summary, t),
       ...b,
-      type: I,
+      type: v,
       disabled: i,
       "aria-disabled": i || g ? "true" : b["aria-disabled"],
       "aria-expanded": n.open,
       "aria-controls": n.open || n.detailsPresent ? n.detailsId : void 0,
       id: n.summaryId,
       onClick: (s) => {
-        A?.(s), !(s.defaultPrevented || i || g) && v.toggleItem(n.value);
+        A?.(s), !(s.defaultPrevented || i || g) && h.toggleItem(n.value);
       },
       onKeyDown: (s) => {
         y?.(s), !(s.defaultPrevented || i) && (s.key === "ArrowDown" || s.key === "ArrowUp" || s.key === "Home" || s.key === "End") && (s.preventDefault(), oo({
-          root: v.rootRef.current,
+          root: h.rootRef.current,
           currentTarget: s.currentTarget,
           key: s.key,
-          loopFocus: v.loopFocus
+          loopFocus: h.loopFocus
         }));
       },
       "data-oc-component": "accordion-summary",
       "data-oc-disabled": i ? "true" : void 0,
       "data-oc-fill-width": c ? "true" : "false",
       "data-oc-state": n.open ? "open" : "closed",
-      "data-oc-vertical-align": x,
+      "data-oc-vertical-align": I,
       children: [
         r ? /* @__PURE__ */ u("span", { "data-oc-part": "leading", children: K }) : null,
         /* @__PURE__ */ u("span", { "data-oc-part": "content", children: U }),
@@ -227,12 +227,12 @@ function mo({
           {
             className: p.trailing,
             "data-oc-part": "trailing",
-            "data-oc-rotate": h === void 0 ? "true" : void 0,
+            "data-oc-rotate": x === void 0 ? "true" : void 0,
             style: G,
             children: F
           }
         ) : null,
-        i ? null : /* @__PURE__ */ u(X, { variant: l })
+        i ? null : /* @__PURE__ */ u(X, { variant: l, self: !0 })
       ]
     }
   ) });
@@ -260,6 +260,7 @@ function fo({
       open: r.open,
       forceMount: e,
       disableAnimation: l.disableAnimation,
+      intent: "expand",
       contentProps: {
         className: p.panelInner,
         "data-oc-part": "panel-inner"

package/dist/components/Accordion/Accordion.module.scss.js

@@ -1,8 +1,8 @@
-import './Accordion.css';const o = "oc-Accordion-module__accordion__wD27Q", n = "oc-Accordion-module__item__YNNr-", c = "oc-Accordion-module__summary__ORyIA", e = "oc-Accordion-module__header__AYOT5", _ = "oc-Accordion-module__trailing__Gnf84", t = "oc-Accordion-module__details__x7mjA", r = "oc-Accordion-module__panelInner__YQXzI", d = "oc-Accordion-module__description__bKdPX", i = "oc-Accordion-module__content__RyBzl", l = "oc-Accordion-module__normal__Fz83W", a = "oc-Accordion-module__neutral__eEyvY", m = "oc-Accordion-module__alternative__HdOit", s = "oc-Accordion-module__none__EiLem", u = {
+import './Accordion.css';const o = "oc-Accordion-module__accordion__wD27Q", n = "oc-Accordion-module__item__YNNr-", c = "oc-Accordion-module__header__AYOT5", e = "oc-Accordion-module__summary__ORyIA", _ = "oc-Accordion-module__trailing__Gnf84", t = "oc-Accordion-module__details__x7mjA", r = "oc-Accordion-module__panelInner__YQXzI", d = "oc-Accordion-module__description__bKdPX", i = "oc-Accordion-module__content__RyBzl", l = "oc-Accordion-module__normal__Fz83W", a = "oc-Accordion-module__neutral__eEyvY", m = "oc-Accordion-module__alternative__HdOit", s = "oc-Accordion-module__none__EiLem", u = {
   accordion: o,
   item: n,
-  summary: c,
-  header: e,
+  header: c,
+  summary: e,
   trailing: _,
   details: t,
   panelInner: r,
@@ -20,12 +20,12 @@ export {
   u as default,
   d as description,
   t as details,
-  e as header,
+  c as header,
   n as item,
   a as neutral,
   s as none,
   l as normal,
   r as panelInner,
-  c as summary,
+  e as summary,
   _ as trailing
 };

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%;padding:var(--oc-action-area-padding-y) var(--oc-action-area-padding-x) var(--oc-action-area-padding-bottom);--oc-action-area-padding-x: var(--oc-space-section-padding-viewport-x);--oc-action-area-padding-y: var(--oc-space-section-padding-viewport-y);--oc-action-area-padding-bottom: var(--oc-action-area-padding-y);--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-ActionArea-module__actionArea__jnxep:before{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,transparent,var(--oc-action-area-background-color) 45%);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(--oc-action-area-padding-y))}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=caption]{font-size:calc(var(--oc-typo-size-label2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label2) * var(--oc-typo-scale, 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}.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-variant=sub][data-oc-icon-only=true]{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-variant=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=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%;padding:var(--oc-action-area-padding-y) var(--oc-action-area-padding-x) var(--oc-action-area-padding-bottom);--oc-action-area-padding-x: var(--oc-space-section-padding-viewport-x);--oc-action-area-padding-y: var(--oc-space-section-padding-viewport-y);--oc-action-area-padding-bottom: var(--oc-action-area-padding-y);--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-ActionArea-module__actionArea__jnxep:before{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,transparent,var(--oc-action-area-background-color) 45%);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(--oc-action-area-padding-y))}.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}.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}