# Bone Flow #118 Transition Specification v1.0

Runtime Version: 1.0.3  
HTML Functional Class: `bf-transition` v1.0.4  
Status: Development candidate  
Formal source: `000-Development-Order_v1.1.1.md`

## 1. Responsibility

#118 handles visual interpolation for a state change. It does not own the consumer's semantic state.

State A → Transition interpolation → State B

The consumer determines when the target is displayable, open/closed, or hidden. #118 runs only the visual ENTER / EXIT operation.

## 2. Formal Development Order baseline

The formal examples are Fade / Slide / Scale / Dissolve. v1.0.3 keeps those and expands reusable one-time state-change patterns without importing #117 continuous Animation responsibilities.

## 3. Transition catalog

1. `fade` — Fade In / Fade Out / フェードイン / フェードアウト
2. `slide` — Slide In / Slide Out / スライドイン / スライドアウト
3. `slide-fade` — Slide + Fade / スライド + フェード
4. `scale` — Scale In / Scale Out / スケールイン / スケールアウト
5. `scale-fade` — Scale + Fade / スケール + フェード
6. `zoom` — Zoom In / Zoom Out / ズームイン / ズームアウト
7. `zoom-fade` — Zoom + Fade / ズーム + フェード
8. `dissolve` — Dissolve / ディゾルブ
9. `wipe` — Wipe In / Wipe Out / ワイプイン / ワイプアウト
10. `reveal` — Reveal / Conceal / リビール / コンシール
11. `expand` — Expand / Collapse / 展開 / 折り畳み
12. `drop` — Drop Down / Pull Up / ドロップダウン / プルアップ
13. `pop` — Pop In / Pop Out / ポップイン / ポップアウト
14. `flip-x` — Flip X In / Out / X軸フリップ
15. `flip-y` — Flip Y In / Out / Y軸フリップ
16. `curtain-horizontal` — Curtain Horizontal / 左右カーテン開閉
17. `curtain-vertical` — Curtain Vertical / 上下カーテン開閉
18. `shutter-horizontal` — Shutter Horizontal / 横シャッター
19. `shutter-vertical` — Shutter Vertical / 縦シャッター
20. `fold` — Fold / Unfold / フォールド / アンフォールド
21. `rise` — Rise / Sink / 浮上 / 沈下
22. `teleport-up` — Teleport Up / 上昇ワープ（ルーラ風）
23. `iris` — Iris Open / Close / アイリス開閉

## 4. Relation contract

- `transitionUiNo`
- `targetUiNo`
- `targetPart`
- relation key: `transitionUiNo::targetUiNo::targetPart`

#118 Runtime is independent from #117 Animation and #002 Joint. The test-page Motion UI Relation Image uses #002 Bone Joint v1.1.36 only for connection evaluation/rendering (`evaluate`, `drawLine`, `drawError`); this does not make Joint a #118 Runtime dependency.

## 5. Property contract

| Property | Type / values | Default |
|---|---|---|
| transitionUiNo | non-empty string | `UI-118-001` |
| targetUiNo | non-empty string | `UI-046-MENU` |
| targetPart | non-empty string | `menu` |
| transition | one of 23 enums | `fade` |
| direction | `up/down/left/right` | `down` |
| speed | `slow/normal/fast` | `normal` |
| respectReducedMotion | boolean | `true` |

Direction remains stored even for patterns that do not consume it. The Property UI disables the direction selector when the selected pattern does not use direction.

## 6. Lifecycle

- `create`
- `attach`
- `enter` / `exit` or generic `play`
- `cancel` / `finish`
- `detach`
- `destroy`

Runtime state values used by the implementation include `idle`, `attached`, `running`, `finished`, `cancelled`, `detached`, `destroyed`, `reduced-motion`, and `error`.

## 7. Public API (21)

1. `defaults()`
2. `normalizeOptions()`
3. `inspectUntrustedInput()`
4. `create()`
5. `destroy()`
6. `isInstance()`
7. `attach()`
8. `detach()`
9. `getOptions()`
10. `setOptions()`
11. `getState()`
12. `getOutput()`
13. `getRelationKey()`
14. `getTarget()`
15. `buildPlan()`
16. `play()`
17. `enter()`
18. `exit()`
19. `cancel()`
20. `finish()`
21. `validate()`

## 8. Security

`inspectUntrustedInput()` inspects property descriptors and rejects accessor properties before value access, so getter functions are not executed. Invalid transitions, non-object values, nested object values, and ASCII control characters are blocked.

## 9. Accessibility

If `respectReducedMotion=true` and `prefers-reduced-motion: reduce` is active, visual motion is skipped and the final frame is applied with runtime state `reduced-motion`.

## 10. Responsibility separation

Not absorbed into #118:

- #116 Effect
- #117 Animation continuous motion / Flow presets
- #119 State
- #120 Trigger
- #121 Timeline
- #122 KeyFrame

## 11. QA / Completion contract

Smoke and Validation start at NOT RUN and require explicit user action. Runtime ALL PASS is only eligible when both are successful. Completion additionally requires visual confirmation of ENTER / EXIT for all 23 catalog entries. User localhost confirmation and Completion are required before Completed / Frozen.


## 12. v1.0.3 runtime correction

- Every EXIT terminal frame is visually hidden (`opacity=0`), preventing residual slivers or folded shapes.
- A new ENTER starts after restoring temporary Transition visual fields to their normal target state, so an EXIT followed by another pattern can display again.
- Consumer semantic state remains owned by the Consumer. In the #046 demonstration, the SplitButton remains visible and only Target Part `menu` is hidden after EXIT.
- Security Test remains independent from normal Preview and exposes Gate status / code / message / Before / After / Result JSON.
- Smoke and Validation use separate execution/results and Completion remains gated by both runtime groups plus all 23 visual confirmations.

## v1.0.4 HTML Functional Class correction

Runtime remains `BoneTransition v1.0.3`; the 23 Transition catalog and 21 Public API functions are unchanged. The normal-use HTML Functional Class is now the single `bf-transition` class. The former 21 API-direct `bone-transition-*` classes are removed from the formal HTML contract. `bf-transition` maps the existing relation/options fields from `data-*` attributes, creates a real Runtime instance, and attaches that instance to the same host element. Public API and HTML Functional Class remain separate responsibilities.