# Bone Flow #026 - TimePicker

Version: 1.0.23  
Status: Development

## Responsibility

#026 TimePicker is the common time-selection Picker UI.

- Shows the Picker below the caller INPUT when it fits; otherwise flips above, with viewport clamp when needed.
- Opens/closes from a clock icon.
- Shows Hour / Minute / Second columns according to caller options.
- `step` is a minute increment, matching #031 TimeBox.
  - Hour column: always 00–23.
  - Minute column: uses the selected step (1 / 5 / 10 / 15 / 30 in Property).
  - Second column: always 00–59 and is not thinned by step.
  - If the minute column is hidden, step does not affect the hour list.
- Supports min / max selectability.
- Supports Default / Dark / Light / Neon Theme.
- Supports built-in Font Awesome-compatible clock SVG / Emoji clock.
- Returns the selected time through `bone-timepicker:select` and `onSelect`.
- Does **not** modify the caller INPUT automatically.
- Does **not** commit, invoke, deliver OUT, run Security Gate, or implement WAIT/BLOCKED.

The caller UI owns commit / OUT behavior.

## Main API

- `BoneTimePicker.create(anchor, options)`
- `open / close / toggle / isOpen / reposition`
- `setValue / getValue`
- `setOptions / getOptions`
- `getAnchor / getPanel`
- `validateTime(value, options)`
- `destroy`

## Value

- Second hidden: `HH:mm`
- Second shown: `HH:mm:ss`
- 24-hour clock only.
- No timezone conversion or precision fabrication.

## Runtime QA

`/BoneFlow/test/bone-timepicker.html`

Browser Runtime ALL PASS must be confirmed on localhost before completion.


## v1.0.4 QA
- 基本UI / 接続イメージ / OUT WAIT-FIFO-BLOCKED / Smoke-Validation / Completion の表示構成は #017 Text を正式基準とする。
- #001 / #002 の正式モジュール読込順を使用する。
- TimePicker 固有責務（時/分/秒、step、選択時刻RETURN）のみ保持する。

- Property UI step list: `1 / 5 / 10 / 15 / 30` (select). Runtime API treats step as minutes, aligned with #031 TimeBox.

## v1.0.5 Consumer UI integration

The TimePicker Runtime responsibility and time-selection behavior are unchanged from v1.0.4.

- The Runtime code change is version metadata only; Hour / Minute / Second, min / max, minute `step`, and RETURN behavior are unchanged.
- The Runtime QA page adds an outer Trigger Mouse Over border effect using #022 Hover Border Effect (formal Public API capability). The effect target is the whole `Caller INPUT + clock button` trigger root and uses `trigger: mouseover`.
- Effect color selection uses #040 ColorPicker (formal Caller API capability) Caller API with `allowedKinds: ["solid"]`; there is no native `input[type=color]` consumer UI.
- The Runtime QA page adds the real `BoneTimePicker` Class list / Public API guide based on the #020 guide structure. No runtime class is fabricated.
- The guide has Class / Public API, Usage, and Operation sections, with individual information for all 17 public functions.
- Japanese / English switching covers the added Effect, Class/Public API and Guide UI as well as the QA presentation.
- No Loop Property is added for #022.
- No parent-inheritance Property is added because parent-element inheritance remains outside #026 responsibility.
- INDEX is not changed because `/boneflow/test/bone-timepicker.html` already exists.


## v1.0.7 scoped correction

- #022 Hover Border Effect target is the individual Hour / Minute / Second value option, not the column container.
- Panel re-render keeps value-level effect attachment through the existing observer path.
- Added Preview parent-element settings for verification only; no parent-dependency option was added to the #026 Runtime Public API.


## v1.0.8 dependency compatibility correction
- #022 Hover Border Effect is checked by component identity + required Public API capability; no fixed version gate is used.
- #040 ColorPicker is checked by component identity + Caller API capability; no fixed version gate is used.
- TimePicker selection/runtime behavior is unchanged.


## DOC Integration v1.0.1 (2026-08-29)
- This historical DOC integration introduced Runtime-owned Property Schema APIs while preserving the existing #026 semantics; the current rebuilt Runtime is BoneTimePicker 1.0.23.
- Normal-use HTML Functional Class is `bf-timepicker` only.
- DOC-0026 / TOC-0026 use the shared Bone DOC guide runtime.

## v1.0.16 hour-range visibility correction
- Hour candidate domain remains `00`–`23`; `24` / `24:00` is not added.
- New Boolean option `showOutOfRangeHours` defaults to `false`.
  - `false`: Hour candidates outside the min/max hour range are omitted from the Picker DOM.
  - `true`: all `00`–`23` Hour candidates are shown; an Hour is enabled only when that hour contains at least one selectable time. Hours completely outside min/max remain non-selectable, while boundary hours such as 18 for max=18:00 remain navigable so the valid minute can be chosen.
- Minute `step` behavior and Second `00`–`59` behavior are unchanged.
- Existing 17 Public API functions, Runtime Error contract, RETURN-only boundary, #022, #040, Security/Delivery responsibility boundary are unchanged.
- DOC/caller code does not rewrite Hour candidate DOM.
- Legacy API-per-class `bone-html-class-use` is not the normal-use contract.
- Shared DOC files are not modified or bundled.

## DOC Integration v1.0.5 (2026-08-30)
- Runtime: BoneTimePicker v1.0.23.
- At that DOC Integration revision the HTML-declarable Property count was 18; the current rebuilt `bf-timepicker` exposes 22 HTML-declarable properties after the #118 transition properties were added.
- DOC-0026 / TOC-0026 shared DOC route is preserved; shared DOC runtime files are not overwritten or bundled.
- Existing Guide overlay, #022, #040, Security/Delivery responsibility boundary, Smoke/Validation/Runtime Console/Completion structures are preserved.

## v1.0.19 viewport-aware placement
- Runtime chooses below when the Panel fits, otherwise above.
- If neither side fully fits, top is clamped inside the viewport using the side with more available space.
- Existing horizontal clamp and scroll/resize `reposition()` remain active.
- No DOC-side Panel coordinate post-processing is used.

## DOC Integration v1.0.6 test-condition correction (2026-08-30)
- This historical DOC-only correction did not change Runtime behavior at that revision; the current rebuilt Runtime is BoneTimePicker v1.0.22.
- Smoke S24 keeps the existing expectation `00..23` and now explicitly runs with `min=null / max=null`, matching the formal no-min/max requirement.
- S32/S33 remain the independent min=08/max=18 OFF/ON range-visibility checks.


## v1.0.20 #025 parity revision
- Runtime-owned Property Schema adds #118 `transition`, `transitionDirection`, `transitionSpeed`, and `respectReducedMotion`.
- Picker Panel ENTER / EXIT is delegated to #118 BoneTransition / `bf-transition`.
- Test UI follows the #025 final panel order and includes #022 Hover Border Effect, #040 ColorPicker Caller, #118 Transition, integrated Smoke / Validation, Completion, and HTML Functional Class.


## v1.0.20 #118 / Installer correction
- #118 Transition is validated as the real picker-panel ENTER / EXIT owner.
- Validation enumerates all 23 formal Transition catalog entries and checks visible ENTER, visible EXIT, hidden-after-EXIT, close paths, rapid reopen, and animation residue.
- Installer index/cumulative insertion no longer depends on one exact #025 card markup; safe structural fallbacks are used without fixed dependency version gates.

## v1.0.21 #118 anchor / #022 responsibility correction
- Picker position ownership is separated from #118 visual interpolation. The fixed outer Picker Panel keeps the caller-relative `left` / `top`; #118 animates only the inner `.bone-timepicker__motion` surface.
- This prevents slide / scale / teleport and other transform-based #118 transitions from moving the anchor position itself.
- #022 Hover Border Effect remains Caller-only: target = Caller INPUT + clock Trigger host. #022 is not attached to the Picker Panel or the #118 motion surface.
- Validation checks all 23 #118 transitions for stable outer Panel coordinates during ENTER / EXIT and checks #022 exclusion from Picker DOM.



## v1.0.22 lifecycle / baseline correction

- Keeps the v1.0.21 responsibility split: the outer fixed Picker Panel owns caller-relative placement; #118 animates only the inner `.bone-timepicker__motion` surface.
- Keeps #022 attached only to the Caller INPUT + clock Trigger outer host; Picker Panel / Motion Surface remain excluded.
- Rapid Trigger close -> reopen now cancels the in-flight EXIT and re-enters through the same formal #118 Functional Class instance.
- EXIT finalization accepts the resolved #118 snapshot or the formal current `BoneTransition.getState(instance)` terminal state (`finished` / `reduced-motion`) before hiding the Panel.
- Destroy cancels an in-flight #118 motion before Functional Class unmount.
- Package UI/test structure is re-audited against completed #017 Text v1.0.14; no #017/#025/#022/#040/#118 runtime is modified.