@nurihaus/web-design-system 3.7.0 → 3.9.0

package/dist/ai/motion.md

@@ -0,0 +1,431 @@
+<!-- tokens/motion.json 에서 생성됨 — 손으로 고치지 않는다. `yarn tokens` -->
+
+# 모션 토큰
+
+모션은 원시값(primitive) → 의미 토큰 → 컴포넌트 3층이다. 컴포넌트와 화면은 의미 토큰만 쓴다.
+
+- CSS 는 `var(--motion-{토큰}-{키})` 를 쓴다. `--duration-*`·`--ease-*` 를 직접 쓰지 않는다.
+- JS(motion 라이브러리)는 `motionTokens` 를 쓴다. 시간은 초다. CSS 변수의 시간은 ms 다.
+- 스프링은 CSS 에서 `linear()` 곡선과 settle 시간 두 변수로 재생한다. motion 없이 CSS 만으로 같은 곡선이 나온다.
+- `prefers-reduced-motion: reduce` 이면 시간 변수가 모두 `0ms` 가 된다. `MotionProvider` 는 motion 쪽을 같은 설정에 맞춘다.
+
+## 의미 토큰
+
+### press
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 눌림 피드백 |
+| 트리거 | pointerdown 부터 pointerup 까지 |
+| 붙는 곳 | onClick 이나 href 가 있는 모든 표면(버튼·칩·탭·행·카드·키) |
+| 붙이지 않는 곳 | 텍스트 입력, disabled 표면 |
+| 구현층 | `css` |
+| prop | `pressEffect` |
+| reduced-motion | 전환 0ms. 색·scale 은 즉시 바뀐다 |
+| 작업 | KAN-9516 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['press']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-press-duration` | `var(--duration-xs)` | `0.12` | 120ms |
+| `ease` | `--motion-press-ease` | `var(--ease-out)` | `[0.25,0.1,0.25,1]` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+| `scale` | `--motion-press-scale` | `0.98` | `0.98` | 0.98 |
+| `dim` | `--motion-press-dim` | `0.12` | `0.12` | 0.12 |
+
+### confirm
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 선택 확정 피드백 |
+| 트리거 | 사용자 조작으로 값이 바뀜. prop 으로 값을 바꾼 것은 움직이지 않는다 |
+| 붙는 곳 | boolean·선택 컨트롤(Checkbox·Radio·Switch·Rating). 세기 weak·strong 과 delay 를 고른다 |
+| 붙이지 않는 곳 | 값이 바뀌어도 선택이 아닌 것(입력 글자, 페이지 번호) |
+| 구현층 | `motion` |
+| prop | `motion` · `delay` |
+| reduced-motion | MotionConfig 가 transform 을 끄고 색만 바뀐다 |
+| 작업 | KAN-9517 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['confirm']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `weak` | `--motion-confirm-weak-ease` | `var(--ease-spring-small)` | `{"type":"spring","stiffness":480,"damping":50,"mass":1}` | stiffness 480 · damping 50 |
+|  | `--motion-confirm-weak-duration` | `var(--duration-spring-small)` |  |  |
+| `strong` | `--motion-confirm-strong-ease` | `var(--ease-spring-bounce)` | `{"type":"spring","stiffness":300,"damping":15,"mass":1}` | stiffness 300 · damping 15 |
+|  | `--motion-confirm-strong-duration` | `var(--duration-spring-bounce)` |  |  |
+
+### reject
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 거부·불가 피드백 |
+| 트리거 | 막힌 조작(disabled 클릭, 닫기 금지 오버레이 클릭, 경계값 초과) |
+| 붙는 곳 | 막힌 조작을 받은 표면 그 자체 |
+| 붙이지 않는 곳 | 오류 문구가 이미 보이는 입력. 흔들림을 오류 알림 대신 쓰지 않는다 |
+| 구현층 | `css` |
+| prop | 없음 |
+| reduced-motion | 흔들지 않는다. 시간이 0ms 가 된다 |
+| 작업 | KAN-9517, KAN-9519 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['reject']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-reject-duration` | `var(--duration-l)` | `0.35` | 350ms |
+| `ease` | `--motion-reject-ease` | `var(--ease-linear)` | `"linear"` | linear |
+| `distance` | `--motion-reject-distance` | `2px` | `"2px"` | 2px |
+
+### enter
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 콘텐츠 등장 |
+| 트리거 | mount, data-state open |
+| 붙는 곳 | 오버레이(Modal·Drawer·Toast·Tooltip)와 조건부 렌더 블록. 중앙 오버레이는 scale, 가장자리는 slide, 그 밖은 fade. 세기 weak·strong. 대상에 붙은 말풍선(Callout)은 꼬리에서 pop |
+| 붙이지 않는 곳 | 첫 화면에 처음부터 있는 콘텐츠, 목록의 항목 하나하나(reveal 을 쓴다) |
+| 구현층 | `css` |
+| prop | `motion` · `onEntered` |
+| reduced-motion | 시간이 0ms 가 되어 바로 보인다. onEntered 는 그대로 불린다 |
+| 작업 | KAN-9518, KAN-9528 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['enter']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-enter-duration` | `var(--duration-m)` | `0.24` | 240ms |
+| `ease` | `--motion-enter-ease` | `var(--ease-out)` | `[0.25,0.1,0.25,1]` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+| `strong` | `--motion-enter-strong-ease` | `var(--ease-spring-bounce)` | `{"type":"spring","stiffness":300,"damping":15,"mass":1}` | stiffness 300 · damping 15 |
+|  | `--motion-enter-strong-duration` | `var(--duration-spring-bounce)` |  |  |
+| `scale-from` | `--motion-enter-scale-from` | `0.96` | `0.96` | 0.96 |
+| `offset` | `--motion-enter-offset` | `16px` | `"16px"` | 16px |
+| `pop-scale` | `--motion-enter-pop-scale` | `0.6` | `0.6` | 0.6 |
+
+### exit
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 콘텐츠 퇴장 |
+| 트리거 | unmount, data-state closed |
+| 붙는 곳 | enter 와 같은 대상 |
+| 붙이지 않는 곳 | enter 가 없는 콘텐츠 |
+| 구현층 | `css` |
+| prop | `onExited` |
+| reduced-motion | 시간이 0ms 가 되어 바로 사라진다. onExited 는 그대로 불린다 |
+| 작업 | KAN-9518 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['exit']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-exit-duration` | `var(--duration-s)` | `0.16` | 160ms |
+| `ease` | `--motion-exit-ease` | `var(--ease-in)` | `[0.4,0,1,1]` | cubic-bezier(0.4, 0, 1, 1) |
+
+### appear
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 지연 등장(주의 끌기) |
+| 트리거 | 화면 진입 뒤 delay |
+| 붙는 곳 | 행동 유도 요소(CTA·BottomNav)에 명시 prop 으로만 |
+| 붙이지 않는 곳 | 기본값으로 켜기. 한 화면에 둘 이상 |
+| 구현층 | `css` |
+| prop | `appear` |
+| reduced-motion | delay 없이 바로 보인다 |
+| 작업 | KAN-9521 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['appear']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-appear-duration` | `var(--duration-m)` | `0.24` | 240ms |
+| `ease` | `--motion-appear-ease` | `var(--ease-out)` | `[0.25,0.1,0.25,1]` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+
+### reveal
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 집합의 순차 등장 |
+| 트리거 | 집합 첫 렌더 |
+| 붙는 곳 | 동질 항목의 집합(StepProgress 단계·목록·격자) |
+| 붙이지 않는 곳 | 다시 그릴 때마다 반복하기, 항목이 많은 목록(앞 몇 개만) |
+| 구현층 | `css` |
+| prop | `animated` |
+| reduced-motion | 한꺼번에 바로 보인다 |
+| 작업 | KAN-9520 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['reveal']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-reveal-duration` | `var(--duration-m)` | `0.24` | 240ms |
+| `ease` | `--motion-reveal-ease` | `var(--ease-out)` | `[0.25,0.1,0.25,1]` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+| `gap` | `--motion-reveal-gap` | `80ms` | `0.08` | 80ms |
+
+### progress
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 값 변화의 연속 표현 |
+| 트리거 | 수치 prop 변경. 첫 렌더는 움직이지 않는다 |
+| 붙는 곳 | 진행도·위치를 보여주는 것(StepProgress·Tabs 인디케이터) |
+| 붙이지 않는 곳 | 값이 아니라 콘텐츠가 바뀌는 것 |
+| 구현층 | `css` |
+| prop | 없음 |
+| reduced-motion | 새 위치로 바로 옮긴다 |
+| 작업 | KAN-9523, KAN-9527 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['progress']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-progress-duration` | `var(--duration-m)` | `0.24` | 240ms |
+| `spring` | `--motion-progress-spring-ease` | `var(--ease-spring-basic)` | `{"type":"spring","stiffness":200,"damping":30,"mass":1}` | stiffness 200 · damping 30 |
+|  | `--motion-progress-spring-duration` | `var(--duration-spring-basic)` |  |  |
+
+### expand
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 펼침·접힘 |
+| 트리거 | open 토글 |
+| 붙는 곳 | 접히는 컨테이너와 화살표 회전(CollapsibleMenu·DropDown 화살표) |
+| 붙이지 않는 곳 | 오버레이로 뜨는 목록 자체(enter 를 쓴다) |
+| 구현층 | `css` |
+| prop | 없음 |
+| reduced-motion | 바로 펼쳐지고 화살표는 바로 돈다 |
+| 작업 | KAN-9524 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['expand']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-expand-duration` | `var(--duration-m)` | `0.24` | 240ms |
+| `ease` | `--motion-expand-ease` | `var(--ease-out)` | `[0.25,0.1,0.25,1]` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+| `rotate` | `--motion-expand-rotate` | `180deg` | `"180deg"` | 180deg |
+
+### dismiss-on-scroll
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 스크롤 방향 따라 숨김 |
+| 트리거 | 스크롤 방향 전환 |
+| 붙는 곳 | 고정 바(BottomNav). opt-in |
+| 붙이지 않는 곳 | 기본값으로 켜기, 화면 안 콘텐츠 |
+| 구현층 | `css+hook` |
+| prop | `hideOnScroll` |
+| reduced-motion | 숨김과 보임이 바로 바뀐다 |
+| 작업 | KAN-9522 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['dismiss-on-scroll']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `duration` | `--motion-dismiss-on-scroll-duration` | `var(--duration-m)` | `0.24` | 240ms |
+| `ease` | `--motion-dismiss-on-scroll-ease` | `var(--ease-out)` | `[0.25,0.1,0.25,1]` | cubic-bezier(0.25, 0.1, 0.25, 1) |
+| `threshold` | `--motion-dismiss-on-scroll-threshold` | `1px` | `"1px"` | 1px |
+
+### attention
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 주목 유도(shine·blink) |
+| 트리거 | 명령형 호출(ref 메서드) |
+| 붙는 곳 | 행·카드·배지. 자동 재생 금지 |
+| 붙이지 않는 곳 | 마운트하자마자 재생, 반복 재생 |
+| 구현층 | `css+hook` |
+| prop | 없음 |
+| reduced-motion | 재생하지 않는다 |
+| 작업 | KAN-9525 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['attention']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `shine` | `--motion-attention-shine` | `2500ms` | `2.5` | 2500ms |
+| `blink` | `--motion-attention-blink` | `300ms` | `0.3` | 300ms |
+| `float-distance` | `--motion-attention-float-distance` | `3px` | `"3px"` | 3px |
+
+### busy
+
+| 항목 | 내용 |
+| --- | --- |
+| 뜻 | 진행 중 |
+| 트리거 | loading prop |
+| 붙는 곳 | 비동기 액션 버튼·로더. 너비를 유지하고 aria-busy 를 단다 |
+| 붙이지 않는 곳 | 1초 안에 끝나는 동작에 깜빡 보이기 |
+| 구현층 | `css` |
+| prop | `loading` · `animated` |
+| reduced-motion | 링·shimmer·dots 가 멈춘다. aria-busy 와 글자로 상태를 알린다 |
+| 작업 | KAN-9526 |
+
+| 키 | CSS 변수 | CSS 값 | JS `motionTokens['busy']` | 풀린 값 |
+| --- | --- | --- | --- | --- |
+| `ring` | `--motion-busy-ring` | `1200ms` | `1.2` | 1200ms |
+| `ring-ease` | `--motion-busy-ring-ease` | `var(--ease-symmetric)` | `[0.5,0,0.5,1]` | cubic-bezier(0.5, 0, 0.5, 1) |
+| `shimmer` | `--motion-busy-shimmer` | `1500ms` | `1.5` | 1500ms |
+| `dots` | `--motion-busy-dots` | `600ms` | `0.6` | 600ms |
+
+## 원시값
+
+### duration
+
+| 이름 | CSS 변수 | ms |
+| --- | --- | --- |
+| `xs` | `--duration-xs` | 120 |
+| `s` | `--duration-s` | 160 |
+| `m` | `--duration-m` | 240 |
+| `l` | `--duration-l` | 350 |
+| `xl` | `--duration-xl` | 500 |
+
+### ease
+
+| 이름 | CSS 변수 | 값 |
+| --- | --- | --- |
+| `out` | `--ease-out` | `cubic-bezier(0.25, 0.1, 0.25, 1)` |
+| `in` | `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` |
+| `in-out` | `--ease-in-out` | `cubic-bezier(0.4, 0, 0.1, 1)` |
+| `back` | `--ease-back` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
+| `symmetric` | `--ease-symmetric` | `cubic-bezier(0.5, 0, 0.5, 1)` |
+| `linear` | `--ease-linear` | `linear` |
+
+### spring
+
+질량은 1 이다. settle 은 |x−1| < 0.001 이고 속도가 0.01/s 밑으로 내려간 뒤 다시 벗어나지 않는 시간이다.
+
+| 이름 | stiffness | damping | 곡선 변수 | 시간 변수 | settle ms | 점 수 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `rapid` | 1000 | 55 | `--ease-spring-rapid` | `--duration-spring-rapid` | 318 | 40 |
+| `quick` | 800 | 55 | `--ease-spring-quick` | `--duration-spring-quick` | 334 | 40 |
+| `small` | 480 | 50 | `--ease-spring-small` | `--duration-spring-small` | 587 | 59 |
+| `medium` | 270 | 25 | `--ease-spring-medium` | `--duration-spring-medium` | 552 | 56 |
+| `basic` | 200 | 30 | `--ease-spring-basic` | `--duration-spring-basic` | 761 | 77 |
+| `large` | 100 | 15 | `--ease-spring-large` | `--duration-spring-large` | 876 | 88 |
+| `bounce` | 300 | 15 | `--ease-spring-bounce` | `--duration-spring-bounce` | 958 | 96 |
+| `slow` | 70 | 20 | `--ease-spring-slow` | `--duration-spring-slow` | 1604 | 161 |
+
+## 적용 매핑표
+
+컴포넌트마다 어느 토큰이 붙는지 정한 표다. `✓` 는 규칙에 걸려 붙고, `opt` 는 prop 을 줄 때만 붙는다. 컴포넌트에 실제로 붙이는 일은 표의 작업 키가 한다.
+
+| 컴포넌트 | press | confirm | reject | enter | exit | appear | reveal | progress | expand | dismiss-on-scroll | attention | busy |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| Avatar | – | – | – | – | – | – | – | – | – | – | – | – |
+| CTAButton | ✓ | – | ✓ | – | – | opt | – | – | – | – | – | ✓ |
+| OptionBadge | – | – | – | – | – | – | – | – | – | – | opt | – |
+| IconTextBadge | – | – | – | – | – | – | – | – | – | – | opt | – |
+| IconTextOptionBadge | – | – | – | – | – | – | – | – | – | – | opt | – |
+| DataTable | ✓ | – | – | – | – | – | – | – | – | – | opt | – |
+| TextField | – | – | – | – | – | – | – | – | – | – | – | – |
+| Radio | ✓ | ✓ | – | – | – | – | – | – | – | – | – | – |
+| Checkbox | ✓ | ✓ | – | – | – | – | – | – | – | – | – | – |
+| Switch | ✓ | ✓ | – | – | – | – | – | – | – | – | – | – |
+| TextArea | – | – | – | – | – | – | – | – | – | – | – | – |
+| Toast | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| ToastProvider | – | – | – | – | – | – | – | – | – | – | – | – |
+| Pagination | ✓ | – | – | – | – | – | – | – | – | – | – | – |
+| Modal | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| Drawer | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| Skeleton | – | – | – | – | – | – | – | – | – | – | – | ✓ |
+| Breadcrumb | ✓ | – | – | – | – | – | – | – | – | – | – | – |
+| DropDown | ✓ | – | – | ✓ | ✓ | – | – | – | ✓ | – | – | – |
+| CollapsibleMenu | ✓ | – | – | – | – | – | – | – | ✓ | – | – | – |
+| Text | – | – | – | – | – | – | – | – | – | – | – | – |
+| Tooltip | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| TooltipProvider | – | – | – | – | – | – | – | – | – | – | – | – |
+| Tabs | ✓ | – | – | – | – | – | – | ✓ | – | – | – | – |
+| ModalWithDoubleButton | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| Spinner | – | – | – | – | – | – | – | – | – | – | – | ✓ |
+| InlineLoading | – | – | – | – | – | – | – | – | – | – | – | ✓ |
+| OverlayLoading | – | – | – | ✓ | ✓ | – | – | – | – | – | – | ✓ |
+| Icon | – | – | – | – | – | – | – | – | – | – | – | – |
+| BottomNav | ✓ | – | – | – | – | opt | – | ✓ | – | opt | – | – |
+| StepProgress | – | – | – | – | – | – | opt | ✓ | – | – | – | – |
+| ChipGroup | ✓ | ✓ | – | – | – | – | – | – | – | – | – | – |
+| LogProvider | – | – | – | – | – | – | – | – | – | – | – | – |
+| MotionProvider | – | – | – | – | – | – | – | – | – | – | – | – |
+| Callout | – | – | – | ✓ | – | – | – | – | – | – | ✓ | – |
+| Card | ✓ | – | – | – | – | – | – | – | – | – | opt | – |
+| ListGroup | – | – | – | – | – | – | – | – | – | – | – | – |
+| ListRow | ✓ | – | – | – | – | – | – | – | – | – | opt | – |
+| DescriptionList | – | – | – | – | – | – | – | – | – | – | – | – |
+| Notice | – | – | – | opt | – | – | – | – | – | – | – | – |
+| EmptyState | – | – | – | – | – | – | – | – | – | – | – | – |
+| Tag | ✓ | – | – | – | – | – | – | – | – | – | – | – |
+| MessageThread | – | – | – | – | – | – | – | – | – | – | – | – |
+| Message | – | – | – | opt | – | – | – | – | – | – | – | – |
+| MessageEvent | – | – | – | – | – | – | – | – | – | – | – | – |
+| MessageComposer | ✓ | – | ✓ | – | – | – | – | – | – | – | – | ✓ |
+| BottomBar | – | – | – | – | – | – | – | – | – | – | – | – |
+| MediaThumbnail | ✓ | – | – | – | – | – | – | – | – | – | – | ✓ |
+| MediaViewer | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| IconButton | ✓ | – | – | – | – | – | – | – | – | – | – | – |
+
+### 판단 근거
+
+- **Avatar** 없음. onClick 을 받지 않는 표시용 이미지다. 누를 수 있게 하려면 쓰는 쪽이 버튼으로 감싸고 그 버튼이 press 를 받는다
+- **CTAButton** press: onClick 표면 (KAN-9516) · reject: disabled 상태에서 누르면 막힌 조작이다 (KAN-9517) · appear(opt): 행동 유도 요소. appear prop 으로만 (KAN-9521) · busy: loading prop 이 있는 비동기 액션 버튼 (KAN-9526)
+- **OptionBadge** attention(opt): 배지. 값이 새로 생긴 순간 쓰는 쪽이 ref 메서드로 부른다 (KAN-9525)
+- **IconTextBadge** attention(opt): 배지. 값이 새로 생긴 순간 쓰는 쪽이 ref 메서드로 부른다 (KAN-9525)
+- **IconTextOptionBadge** attention(opt): 배지. 값이 새로 생긴 순간 쓰는 쪽이 ref 메서드로 부른다 (KAN-9525)
+- **DataTable** press: onClickRow·onClickCell 이 있는 행과 칸은 onClick 표면이다. 없는 행은 붙지 않는다 (KAN-9516) · attention(opt): 행. 방금 바뀐 행을 쓰는 쪽이 ref 메서드로 짚는다 (KAN-9525)
+- **TextField** 없음. 텍스트 입력은 press 의 avoid 대상이다. 글자가 바뀌는 것은 선택이 아니라 confirm 도 아니다.
+- **Radio** press: 선택지마다 누르는 표면이다 (KAN-9516) · confirm: 하나를 고르는 선택 컨트롤 (KAN-9517)
+- **Checkbox** press: 누르는 표면이다 (KAN-9516) · confirm: boolean 선택 컨트롤 (KAN-9517)
+- **Switch** press: 누르는 표면이다 (KAN-9516) · confirm: boolean 선택 컨트롤. 손잡이 이동과 트랙 색이 확정 피드백이다 (KAN-9517)
+- **TextArea** 없음. 텍스트 입력은 press 의 avoid 대상이다. 글자가 바뀌는 것은 선택이 아니라 confirm 도 아니다
+- **Toast** enter: 가장자리 오버레이라 slide 와 fade 로 들어온다 (KAN-9518) · exit: enter 와 같은 대상. 스와이프로 밀어 닫을 때도 exit 다 (KAN-9518)
+- **ToastProvider** 없음. 토스트 자리(viewport)만 그린다. 모션은 각 Toast 가 받는다
+- **Pagination** press: 페이지 버튼은 onClick 표면이다 (KAN-9516)
+- **Modal** enter: 중앙 오버레이라 scale 로 들어온다 (KAN-9518) · exit: enter 와 같은 대상 (KAN-9518)
+- **Drawer** enter: 가장자리 오버레이라 slide 로 들어오고 바탕은 fade 다 (KAN-9518) · exit: enter 와 같은 대상 (KAN-9518)
+- **Skeleton** busy: 로딩 자리표시. animated 가 켜지면 shimmer 가 흐른다 (KAN-9526)
+- **Breadcrumb** press: href·onItemClick 이 있는 항목은 누르는 표면이다 (KAN-9516)
+- **DropDown** press: 트리거와 항목은 누르는 표면이다 (KAN-9516) · enter: 목록이 떠 있는 오버레이로 열린다. 중앙이 아니라 fade (KAN-9518) · exit: enter 와 같은 대상 (KAN-9518) · expand: 열림에 따라 트리거 화살표가 돈다 (KAN-9524)
+- **CollapsibleMenu** press: 행은 누르는 표면이다 (KAN-9516) · expand: 하위 메뉴가 접히고 화살표가 돈다 (KAN-9524)
+- **Text** 없음. 글자만 그린다
+- **Tooltip** enter: 떠 있는 오버레이다. 작아서 fade (KAN-9518) · exit: enter 와 같은 대상 (KAN-9518)
+- **TooltipProvider** 없음. DOM 을 그리지 않는다. 지연 시간만 나눠 준다
+- **Tabs** press: 트리거는 onClick 표면 (KAN-9516) · progress: 인디케이터 위치가 값에 따라 움직인다 (KAN-9527)
+- **ModalWithDoubleButton** enter: Modal 을 그대로 쓰는 중앙 오버레이. 버튼의 press 는 CTAButton 행이 받는다 (KAN-9518) · exit: enter 와 같은 대상 (KAN-9518)
+- **Spinner** busy: 로더 링 (KAN-9526)
+- **InlineLoading** busy: Spinner 링을 그대로 쓴다. 옛 모션은 Spinner 행에 있다 (KAN-9526)
+- **OverlayLoading** busy: Spinner 링을 그대로 쓴다 (KAN-9526) · enter: open 으로 나타나는 화면 전체 오버레이. 바탕은 fade (KAN-9518) · exit: enter 와 같은 대상 (KAN-9518)
+- **Icon** 없음. 장식 그림이다. 모션은 감싸는 컴포넌트가 정한다
+- **BottomNav** press: 탭은 href 가 있는 표면이다 (KAN-9516) · progress: 선택 캡슐 위치가 value 에 따라 움직인다 (KAN-9527) · appear(opt): 행동 유도 요소. appear prop 으로만 (KAN-9521) · dismiss-on-scroll(opt): 고정 바. hideOnScroll prop 으로만 (KAN-9522)
+- **StepProgress** progress: current 가 바뀌면 진행 막대가 따라 채워진다 (KAN-9523) · reveal(opt): 동질 단계의 집합. animated prop 으로만 첫 렌더에 순차 등장 (KAN-9520)
+- **ChipGroup** press: 칩은 onClick 표면이다 (KAN-9516) · confirm: 하나를 고르는 선택 컨트롤이다. 고른 칩의 색 바뀜이 확정 피드백이다 (KAN-9517)
+- **LogProvider** 없음. DOM 을 그리지 않는다
+- **MotionProvider** 없음. DOM 을 그리지 않는다. 다른 컴포넌트의 motion 층이 이 아래에서 돈다
+- **Callout** enter: 대상에 붙은 말풍선. 꼬리에서 pop 으로 나타난다(ADR 0007) (KAN-9518) · attention: 나타난 뒤 세 번 둥실 움직인다(ADR 0007). 자동 재생이라 attention 의 '명령형 호출로만' 규칙과 어긋난다. KAN-9525 에서 규칙이나 Callout 중 하나를 고친다 (KAN-9525)
+- **Card** press: 링크·버튼 카드(asChild 로 a[href]·button)는 누르는 표면이다. 보기만 하는 카드는 붙지 않는다 (KAN-9451) · attention(opt): 카드. 방금 생긴 카드를 쓰는 쪽이 ref 메서드로 짚는다 (KAN-9525)
+- **ListGroup** 없음. 면과 제목만 그린다. 눌림은 각 ListRow 가 받는다
+- **ListRow** press: onClick·링크가 있는 행은 누르는 표면이다. 폭이 꽉 찬 행이라 scale 대신 배경이 어두워진다 (KAN-9451) · attention(opt): 행. 방금 바뀐 행을 쓰는 쪽이 ref 메서드로 짚는다 (KAN-9525)
+- **DescriptionList** 없음. 이름–값 글자만 그린다. 누르는 표면이 아니다
+- **Notice** enter(opt): 조건부로 나타나는 인라인 안내. motion prop 을 줄 때만 fade 로 들어온다. 나갈 때 모션은 presence 가 필요해 두지 않는다 (KAN-9451)
+- **EmptyState** 없음. 누를 곳이 없는 표시용 화면이다. 버튼은 쓰는 쪽이 넘긴 CTAButton 이 press 를 받는다
+- **Tag** press: 지우기 버튼(X)은 onClick 표면이다 (KAN-9451)
+- **MessageThread** 없음. 목록 틀이다. 등장 모션은 항목(Message)이 가진다
+- **Message** enter(opt): 방금 보내거나 받은 메시지만 motion prop 으로. 처음 그린 대화는 움직이지 않는다 (KAN-9451)
+- **MessageEvent** 없음. 대화 가운데 날짜·상태 줄. 움직이지 않는다
+- **MessageComposer** press: 보내기 버튼은 onClick 표면 (KAN-9451) · reject: 보낼 수 없을 때(빈 값·disabled) 누르면 막힌 조작이다 (KAN-9451) · busy: loading prop 이면 보내기 원에 Spinner (KAN-9451)
+- **BottomBar** 없음. 주 행동·입력을 담는 고정 바라 스크롤로 숨기지 않는다
+- **MediaThumbnail** press: 여는 버튼은 onClick 표면이다 (KAN-9451) · busy: 올리는 중(loading) 에 Spinner 를 덮는다 (KAN-9451)
+- **MediaViewer** enter: 화면 전체 오버레이라 scale 로 들어오고 바탕은 fade 다 (KAN-9451) · exit: enter 와 같은 대상 (KAN-9451)
+- **IconButton** press: onClick·링크가 있는 누르는 표면이다. ghost 는 누르는 동안 회색 원도 보인다 (KAN-9451)
+
+### 바꿀 옛 모션
+
+지금 컴포넌트 CSS 에 있는 모션과, 작업이 그것을 바꿀 토큰이다.
+
+- **Switch** `switch-style.css:42 transition background-color var(--motion-fast) var(--motion-ease)` → confirm
+- **Switch** `switch-style.css:76 transition transform var(--motion-fast) var(--motion-ease)` → confirm
+- **Toast** `toast-style.css:10 animation motion-enter-slide·motion-enter-fade var(--motion-base) var(--motion-ease)` → enter
+- **Toast** `toast-style.css:16 animation motion-exit-fade var(--motion-fast) var(--motion-ease)` → exit
+- **Toast** `toast-style.css:25 transition transform var(--motion-fast) var(--motion-ease) (스와이프 취소)` → exit
+- **Toast** `toast-style.css:31 animation motion-exit-swipe var(--motion-fast) var(--motion-ease)` → exit
+- **Toast** `toast-style.css:86 prefers-reduced-motion 에서 animation none` → enter
+- **Pagination** `pagination-style.css:59 transition background-color·color var(--motion-fast) var(--motion-ease)` → press
+- **Drawer** `drawer-style.css:13 animation motion-enter-fade var(--motion-base) var(--motion-ease) (바탕)` → enter
+- **Drawer** `drawer-style.css:17 animation motion-exit-fade var(--motion-base) var(--motion-ease) (바탕)` → exit
+- **Drawer** `drawer-style.css:111 animation motion-enter-slide var(--motion-base) var(--motion-ease)` → enter
+- **Drawer** `drawer-style.css:115 animation motion-exit-slide var(--motion-base) var(--motion-ease)` → exit
+- **Skeleton** `skeleton-style.css:62 animation motion-busy-shimmer var(--skeleton-duration) var(--motion-ease)` → busy
+- **Skeleton** `skeleton-style.css:68 prefers-reduced-motion 에서 animation none` → busy
+- **Breadcrumb** `breadcrumb-style.css:75 transition color var(--motion-fast) var(--motion-ease)` → press
+- **DropDown** `drop-down-style.css:91 transition transform var(--motion-fast) var(--motion-ease) (화살표)` → expand
+- **CollapsibleMenu** `collapsible-menu-style.css:86 transition transform var(--motion-fast) var(--motion-ease) (화살표)` → expand
+- **Tabs** `tabs-style.css:48 transition color var(--motion-base) var(--motion-ease)` → press
+- **Tabs** `tabs-style.css:92 transition left·width var(--motion-base) var(--motion-ease)` → progress
+- **Spinner** `spinner-style.css:28 animation motion-busy-ring var(--spinner-duration) var(--spinner-ease)` → busy
+- **Spinner** `spinner-style.css:33 animation-delay calc(var(--spinner-duration) * -0.375)` → busy
+- **Spinner** `spinner-style.css:36 animation-delay calc(var(--spinner-duration) * -0.25)` → busy
+- **Spinner** `spinner-style.css:39 animation-delay calc(var(--spinner-duration) * -0.125)` → busy
+- **Spinner** `spinner-style.css:42 animation-delay 0s` → busy
+- **BottomNav** `bottom-nav-style.css:78 transition transform var(--motion-slow) var(--motion-spring) (선택 캡슐)` → progress
+- **BottomNav** `bottom-nav-style.css:81 prefers-reduced-motion 에서 transition none` → progress
+- **BottomNav** `bottom-nav-style.css:90 transition color var(--motion-fast) var(--motion-ease)` → press
+- **BottomNav** `bottom-nav-style.css:110 transition transform var(--motion-fast) var(--motion-spring) (아이콘 눌림)` → press
+- **StepProgress** `step-progress-style.css:30 transition background-color var(--motion-base) var(--motion-ease)` → progress
+- **ChipGroup** `chip-group-style.css:51 transition background-color·color·border-color var(--motion-fast) var(--motion-ease)` → confirm
+- **Callout** `callout-style.css:27 animation motion-enter-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both` → enter
+- **Callout** `callout-style.css:29 animation motion-attention-float calc(var(--motion-base) * 8) var(--motion-ease) … 3` → attention
+- **Callout** `callout-style.css:100 prefers-reduced-motion 에서 animation none` → enter

package/dist/ai/tokens.md

@@ -354,6 +354,20 @@
 | `--bottom-nav-badge-dot` | `8px` | 폭 |
 | `--bottom-nav-badge-count` | `18px` | 폭 |
 | `--glass-blur` | `18px` | 폭 |
+| `--list-row-height` | `56px` | 목록 행: list-row. 한 줄 이름에 보조 글이 붙어도 이 높이부터 |
+| `--touch-target` | `44px` | 손가락 터치 영역. 보이는 크기가 작은 버튼(아이콘 버튼·빼기·보내기)이 이만큼 눌린다 |
+| `--media-thumbnail-size-s` | `64px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
+| `--media-thumbnail-size-m` | `96px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
+| `--media-thumbnail-max-width` | `240px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
+| `--media-overlay-button-size` | `36px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
+| `--media-remove-size` | `20px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
+| `--media-invalid-border` | `2px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
+| `--composer-send-size` | `36px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--composer-max-height` | `132px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--icon-button-size-s` | `36px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--icon-button-size-m` | `44px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--icon-button-size-l` | `56px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--empty-state-icon-box` | `64px` | 빈 화면: empty-state 아이콘 원 |
 | `--step-bar-height` | `4px` | 진행 단계 바 |
 | `--icon-size-xs` | `16px` | 그 밖의 치수 |
 | `--icon-size-s` | `18px` | 그 밖의 치수 |
@@ -385,11 +399,86 @@
 | `--z-overlay` | `9998` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--z-modal` | `9999` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--z-toast` | `10000` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
-| `--motion-fast` | `160ms` | 모션 |
-| `--motion-base` | `300ms` | 모션 |
-| `--motion-ease` | `ease` | 모션 |
-| `--motion-slow` | `420ms` | 모션 |
+| `--motion-fast` | `160ms` | 옛 모션 변수 |
+| `--motion-base` | `300ms` | 옛 모션 변수 |
+| `--motion-ease` | `ease` | 옛 모션 변수 |
+| `--motion-slow` | `420ms` | 옛 모션 변수 |
 | `--motion-spring` | `cubic-bezier(0.34, 1.45, 0.5, 1)` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
 | `--spinner-duration` | `1.2s` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
 | `--skeleton-duration` | `1.5s` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
 | `--spinner-ease` | `cubic-bezier(0.5, 0, 0.5, 1)` | 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 |
+
+## 모션
+
+토큰마다 뜻 · 붙는 곳 · prop · reduced-motion 규칙과 컴포넌트별 적용 매핑표는 같은 폴더의 `motion.md` 에 있다. 화면 CSS 는 `--motion-{토큰}-{키}` 를 쓴다. `--duration-*` · `--ease-*` 는 의미 토큰이 가리키는 원시값이다. `prefers-reduced-motion: reduce` 이면 시간 변수가 모두 `0ms` 가 된다.
+
+| 변수 | 값 |
+| --- | --- |
+| `--duration-xs` | `120ms` |
+| `--duration-s` | `160ms` |
+| `--duration-m` | `240ms` |
+| `--duration-l` | `350ms` |
+| `--duration-xl` | `500ms` |
+| `--ease-out` | `cubic-bezier(0.25, 0.1, 0.25, 1)` |
+| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` |
+| `--ease-in-out` | `cubic-bezier(0.4, 0, 0.1, 1)` |
+| `--ease-back` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
+| `--ease-symmetric` | `cubic-bezier(0.5, 0, 0.5, 1)` |
+| `--ease-linear` | `linear` |
+| `--ease-spring-rapid` | `linear(0, 0.0273, 0.0945, 0.184, 0.2834, 0.384, 0.4804, 0.5691, 0.6483, 0.7174, 0.7764, 0.8259, 0.8667, 0.8999, 0.9264, 0.9473, 0.9634, 0.9757, 0.9849, 0.9916, 0.9964, 0.9996, 1.0017, 1.003, 1.0037, 1.0039, 1.0039, 1.0037, 1.0033, 1.003, 1.0026, 1.0022, 1.0018, 1.0015, 1.0012, 1.001, 1.0007, 1.0006, 1.0004, 1.0003, 1)` |
+| `--duration-spring-rapid` | `318ms` |
+| `--ease-spring-quick` | `linear(0, 0.024, 0.0825, 0.1604, 0.247, 0.3352, 0.4205, 0.5002, 0.5728, 0.6377, 0.6948, 0.7445, 0.7872, 0.8237, 0.8546, 0.8806, 0.9023, 0.9204, 0.9354, 0.9477, 0.9578, 0.9661, 0.9728, 0.9783, 0.9827, 0.9863, 0.9891, 0.9914, 0.9933, 0.9947, 0.9959, 0.9968, 0.9975, 0.9981, 0.9985, 0.9989, 0.9991, 0.9993, 0.9995, 0.9996, 1)` |
+| `--duration-spring-quick` | `334ms` |
+| `--ease-spring-small` | `linear(0, 0.0202, 0.069, 0.1334, 0.2049, 0.278, 0.3493, 0.417, 0.4799, 0.5375, 0.5898, 0.6369, 0.6791, 0.7167, 0.7501, 0.7798, 0.806, 0.8292, 0.8497, 0.8677, 0.8836, 0.8976, 0.91, 0.9208, 0.9304, 0.9388, 0.9462, 0.9527, 0.9584, 0.9634, 0.9679, 0.9717, 0.9752, 0.9782, 0.9808, 0.9831, 0.9852, 0.987, 0.9885, 0.9899, 0.9911, 0.9922, 0.9932, 0.994, 0.9947, 0.9954, 0.9959, 0.9964, 0.9968, 0.9972, 0.9976, 0.9979, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.999, 0.9991, 1)` |
+| `--duration-spring-small` | `587ms` |
+| `--ease-spring-medium` | `linear(0, 0.0121, 0.0444, 0.0919, 0.1501, 0.2152, 0.2844, 0.355, 0.4252, 0.4934, 0.5585, 0.6195, 0.6761, 0.7278, 0.7746, 0.8164, 0.8533, 0.8855, 0.9134, 0.9372, 0.9572, 0.9739, 0.9875, 0.9984, 1.007, 1.0136, 1.0184, 1.0217, 1.0238, 1.0249, 1.0252, 1.0248, 1.0239, 1.0227, 1.0212, 1.0196, 1.0178, 1.016, 1.0143, 1.0126, 1.0109, 1.0094, 1.008, 1.0067, 1.0055, 1.0045, 1.0036, 1.0028, 1.0021, 1.0015, 1.001, 1.0006, 1.0003, 1, 0.9998, 0.9996, 1)` |
+| `--duration-spring-medium` | `552ms` |
+| `--ease-spring-basic` | `linear(0, 0.0089, 0.0322, 0.0658, 0.1066, 0.152, 0.2001, 0.2493, 0.2986, 0.3471, 0.3941, 0.4393, 0.4824, 0.5232, 0.5615, 0.5974, 0.6309, 0.662, 0.6909, 0.7175, 0.7421, 0.7648, 0.7855, 0.8046, 0.8221, 0.8381, 0.8527, 0.8661, 0.8783, 0.8894, 0.8995, 0.9088, 0.9172, 0.9248, 0.9318, 0.9381, 0.9438, 0.949, 0.9538, 0.9581, 0.962, 0.9655, 0.9687, 0.9717, 0.9743, 0.9767, 0.9789, 0.9809, 0.9827, 0.9843, 0.9858, 0.9871, 0.9883, 0.9894, 0.9904, 0.9913, 0.9921, 0.9929, 0.9935, 0.9941, 0.9947, 0.9952, 0.9956, 0.9961, 0.9964, 0.9968, 0.9971, 0.9973, 0.9976, 0.9978, 0.998, 0.9982, 0.9984, 0.9985, 0.9987, 0.9988, 0.9989, 1)` |
+| `--duration-spring-basic` | `761ms` |
+| `--ease-spring-large` | `linear(0, 0.0047, 0.0179, 0.0383, 0.0648, 0.0961, 0.1315, 0.1699, 0.2106, 0.2529, 0.2963, 0.3401, 0.3838, 0.4272, 0.4699, 0.5115, 0.5518, 0.5906, 0.6278, 0.6633, 0.697, 0.7288, 0.7586, 0.7866, 0.8126, 0.8368, 0.859, 0.8795, 0.8983, 0.9154, 0.9309, 0.9449, 0.9575, 0.9687, 0.9786, 0.9874, 0.995, 1.0017, 1.0074, 1.0122, 1.0163, 1.0196, 1.0223, 1.0244, 1.0261, 1.0272, 1.0279, 1.0283, 1.0284, 1.0282, 1.0277, 1.0271, 1.0263, 1.0254, 1.0243, 1.0232, 1.0221, 1.0208, 1.0196, 1.0184, 1.0171, 1.0159, 1.0147, 1.0135, 1.0124, 1.0113, 1.0103, 1.0093, 1.0083, 1.0074, 1.0066, 1.0058, 1.0051, 1.0044, 1.0038, 1.0033, 1.0027, 1.0023, 1.0018, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1.0001, 0.9999, 0.9997, 0.9996, 1)` |
+| `--duration-spring-large` | `876ms` |
+| `--ease-spring-bounce` | `linear(0, 0.0142, 0.0537, 0.1139, 0.1902, 0.2784, 0.3743, 0.4741, 0.5747, 0.673, 0.7667, 0.8538, 0.9329, 1.0028, 1.063, 1.113, 1.153, 1.1831, 1.204, 1.2164, 1.221, 1.2189, 1.211, 1.1984, 1.182, 1.1629, 1.1419, 1.1199, 1.0977, 1.0758, 1.0549, 1.0354, 1.0176, 1.0018, 0.9881, 0.9767, 0.9675, 0.9605, 0.9555, 0.9525, 0.9512, 0.9514, 0.953, 0.9556, 0.9591, 0.9633, 0.9678, 0.9727, 0.9776, 0.9825, 0.9871, 0.9915, 0.9955, 0.9991, 1.0022, 1.0048, 1.0069, 1.0085, 1.0097, 1.0104, 1.0108, 1.0108, 1.0105, 1.0099, 1.0092, 1.0083, 1.0073, 1.0062, 1.0051, 1.0041, 1.003, 1.002, 1.0011, 1.0003, 0.9996, 0.999, 0.9985, 0.9982, 0.9979, 0.9977, 0.9976, 0.9976, 0.9977, 0.9978, 0.9979, 0.9981, 0.9984, 0.9986, 0.9988, 0.9991, 0.9993, 0.9995, 0.9997, 0.9999, 1.0001, 1.0002, 1)` |
+| `--duration-spring-bounce` | `958ms` |
+| `--ease-spring-slow` | `linear(0, 0.0033, 0.0122, 0.0257, 0.043, 0.0631, 0.0855, 0.1096, 0.135, 0.1612, 0.188, 0.215, 0.2421, 0.2691, 0.2958, 0.3221, 0.348, 0.3732, 0.3979, 0.4219, 0.4452, 0.4677, 0.4896, 0.5107, 0.5311, 0.5507, 0.5697, 0.5879, 0.6054, 0.6222, 0.6384, 0.654, 0.6689, 0.6832, 0.6969, 0.71, 0.7226, 0.7347, 0.7462, 0.7573, 0.7679, 0.778, 0.7877, 0.797, 0.8059, 0.8144, 0.8225, 0.8303, 0.8378, 0.8449, 0.8517, 0.8582, 0.8645, 0.8704, 0.8761, 0.8816, 0.8868, 0.8918, 0.8965, 0.9011, 0.9054, 0.9096, 0.9136, 0.9174, 0.921, 0.9245, 0.9278, 0.931, 0.934, 0.9369, 0.9397, 0.9424, 0.9449, 0.9473, 0.9497, 0.9519, 0.954, 0.956, 0.958, 0.9598, 0.9616, 0.9633, 0.9649, 0.9664, 0.9679, 0.9693, 0.9707, 0.972, 0.9732, 0.9744, 0.9755, 0.9766, 0.9776, 0.9786, 0.9796, 0.9805, 0.9813, 0.9821, 0.9829, 0.9837, 0.9844, 0.9851, 0.9857, 0.9864, 0.987, 0.9875, 0.9881, 0.9886, 0.9891, 0.9896, 0.9901, 0.9905, 0.9909, 0.9913, 0.9917, 0.9921, 0.9924, 0.9927, 0.9931, 0.9934, 0.9937, 0.9939, 0.9942, 0.9945, 0.9947, 0.9949, 0.9952, 0.9954, 0.9956, 0.9958, 0.996, 0.9961, 0.9963, 0.9965, 0.9966, 0.9968, 0.9969, 0.9971, 0.9972, 0.9973, 0.9974, 0.9975, 0.9976, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9982, 0.9983, 0.9984, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9988, 0.9989, 0.9989, 0.999, 1)` |
+| `--duration-spring-slow` | `1604ms` |
+| `--motion-press-duration` | `var(--duration-xs)` |
+| `--motion-press-ease` | `var(--ease-out)` |
+| `--motion-press-scale` | `0.98` |
+| `--motion-press-dim` | `0.12` |
+| `--motion-confirm-weak-ease` | `var(--ease-spring-small)` |
+| `--motion-confirm-weak-duration` | `var(--duration-spring-small)` |
+| `--motion-confirm-strong-ease` | `var(--ease-spring-bounce)` |
+| `--motion-confirm-strong-duration` | `var(--duration-spring-bounce)` |
+| `--motion-reject-duration` | `var(--duration-l)` |
+| `--motion-reject-ease` | `var(--ease-linear)` |
+| `--motion-reject-distance` | `2px` |
+| `--motion-enter-duration` | `var(--duration-m)` |
+| `--motion-enter-ease` | `var(--ease-out)` |
+| `--motion-enter-strong-ease` | `var(--ease-spring-bounce)` |
+| `--motion-enter-strong-duration` | `var(--duration-spring-bounce)` |
+| `--motion-enter-scale-from` | `0.96` |
+| `--motion-enter-offset` | `16px` |
+| `--motion-enter-pop-scale` | `0.6` |
+| `--motion-exit-duration` | `var(--duration-s)` |
+| `--motion-exit-ease` | `var(--ease-in)` |
+| `--motion-appear-duration` | `var(--duration-m)` |
+| `--motion-appear-ease` | `var(--ease-out)` |
+| `--motion-reveal-duration` | `var(--duration-m)` |
+| `--motion-reveal-ease` | `var(--ease-out)` |
+| `--motion-reveal-gap` | `80ms` |
+| `--motion-progress-duration` | `var(--duration-m)` |
+| `--motion-progress-spring-ease` | `var(--ease-spring-basic)` |
+| `--motion-progress-spring-duration` | `var(--duration-spring-basic)` |
+| `--motion-expand-duration` | `var(--duration-m)` |
+| `--motion-expand-ease` | `var(--ease-out)` |
+| `--motion-expand-rotate` | `180deg` |
+| `--motion-dismiss-on-scroll-duration` | `var(--duration-m)` |
+| `--motion-dismiss-on-scroll-ease` | `var(--ease-out)` |
+| `--motion-dismiss-on-scroll-threshold` | `1px` |
+| `--motion-attention-shine` | `2500ms` |
+| `--motion-attention-blink` | `300ms` |
+| `--motion-attention-float-distance` | `3px` |
+| `--motion-busy-ring` | `1200ms` |
+| `--motion-busy-ring-ease` | `var(--ease-symmetric)` |
+| `--motion-busy-shimmer` | `1500ms` |
+| `--motion-busy-dots` | `600ms` |

package/dist/avatar.js

@@ -320,17 +320,19 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-3274.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-2777.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-7335.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
 /******/ import * as __webpack_chunk_3__ from "./chunk-7298.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ import * as __webpack_chunk_4__ from "./chunk-2777.js";
+/******/ __nuri_require__.C(__webpack_chunk_4__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,2777,7298], () => (__nuri_require__(5468)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,7298,2777], () => (__nuri_require__(5468)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };