# Bone Flow #036 Select Specification v1.0

Component ID: #036  
Component: Select  
Specification Version: 1.0  
Implementation: v1.0.33  
Status: Development

## 1. Restoration boundary

Implementation v1.0.33 is restored from `BoneFlow_036_Select_v1.0.4(1).zip` only. Later rejected v1.0.5-v1.0.20 implementations are not restoration bases.

Active Border Effect remains active while focus moves within the Select control, including the open list and list items; it ends only when focus leaves the Select.

#036 remains a single-selection Select. Multiple selection, editable text, search/ComboBox behavior, and async loading are outside #036.

## 2. Value / items contract

- type: `SELECT`
- selected value: a known, non-empty child/item `string`
- `null`, empty string, unknown value, number, boolean, object, accessor, and Proxy input are rejected
- there is no selectable `未選択` / empty option
- there is no `required` Property
- `readonly` and `disabled` remain supported
- parent item: display-only group; not selectable
- child item: selectable; one child level only
- child fields: `value`, `label`, optional `url`, optional #019 Image settings
- item values are unique across the full tree
- `outputUrl` controls whether selected child URL is exposed as top-level `OUT.url`

## 3. Select UI / region contract

- visible UI is a closed Select control that opens a dropdown list
- the native single `<select>` is retained as the hidden value/form control
- opening the dropdown does not resize #036's configured width/height
- the dropdown uses the normal overlay presentation from the closed Select; #036 height is not used to clip or force-shrink the open list
- configured width/height are not enlarged when the list opens
- component height must not be used to force scrolling; existing dropdown overflow applies only when the item list itself exceeds the normal dropdown maximum
- parent/Preview rectangles are not used to redefine #036 overflow bounds

## 4. Label / typography

- the left `Select` label is delegated to #020 Bone Label
- `labelVisible` independently shows/hides the #020 Label
- hiding the label keeps the Select body visible
- `labelFontSize` controls #020 Label text
- `itemLabelVisible` shows/hides list item labels
- `listFontSize` separately controls the closed selected value, open list, parent group text, and child text
- rendered #019 item image size follows `listFontSize`; stored #019 item settings are not rewritten

## 5. Item image / Icon flow

#036 does not implement a Font Awesome picker.

Per parent/child item, #036 stores the formal #019 Bone Image setting object. Editing uses `BoneImage.createEditor()`. For Font Awesome, #019 delegates through List Key `018-icon-fontawesome` to #018 Bone Icon and #018's formal 25-page Picker. #036 stores the resulting #019 setting object and uses #019 `create/getOutput` for item rendering.

Formal completed dependency used by this implementation: #019 Bone Image v1.0.64.

## 6. Active Border Effect

The existing Select Active Border Effect remains supported.

- `activeBorderEffect`: `normal` / `neon` / `blink`
- Effect color, Neon movement direction, and Effect speed remain configurable
- `neon` is a moving border effect; `clockwise` / `counterclockwise` and `slow` / `normal` / `fast` must affect the actual animation
- #036 does not suppress Active Border animation via OS / `prefers-reduced-motion`; the configured component Effect remains authoritative
- it is driven by Select focus/active state, including focus movement inside the opened Select list
- item-level `Mouse Over Effect`, `itemHoverEffect`, and per-item `hoverEffect` are not #036 Properties

Parent and child item Property blocks use accordions so the list-item editor does not stay fully expanded vertically.

## 7. Parent / standalone placement / FIT

`inheritParent` means that #036 uses the parent element for rendering. While it is ON, standalone display settings are kept as configuration values but are not used for rendering.

Parent mode (`inheritParent = true`) additionally provides `parentFit`. When `parentFit = true`, Select/list text and rendered #019 item image size are fitted from the actual parent element width/height. `labelFontSize` remains the separate #020 Label setting. When `parentFit = false`, `listFontSize` remains fixed.

Standalone mode (`inheritParent = false`) uses:

- configured width / height
- display position with the 9 positions: top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right
- Select text alignment
- `fontSizeMode`: `fixed` / `fit`

`fontSizeMode = fit` adjusts the Select/list text size to the configured standalone element size. The rendered #019 item image size follows the resolved list font size. Stored #019 Image settings are not rewritten.

There is no separate parent snap position Property.

## 8. Security / OUT / Delivery

- Security accepts only a known, non-empty string selected value
- `null`, empty, and unknown values are Validation Error / Security BLOCKED
- rejected IN keeps the previous committed value
- BLOCKED data does not reach Target
- #002 Bone Joint v1.1.36 Delivery Channel remains responsible for WAIT / FIFO / BLOCKED
- Security testing remains independent from Delivery testing

## 9. Connection image

The connection image has exactly three display-only cases:

1. normal connection
2. IN type mismatch
3. OUT type mismatch

The two missing-target cases are removed. Connection-image rendering must not alter Select state, render state, selected value, OUT, or Delivery behavior.

## 10. QA / Completion

Package Static/Node QA and Browser Runtime QA are distinct. Browser Runtime requires actual browser execution, including closed/open Select, unchanged configured Select bounds, Label show/hide, list-item label show/hide, listFontSize-linked item image sizing, item Property accordions, parent/child selection, standalone FIT, parent-use mode ignoring standalone display settings, parent FIT using actual parent size, #019 item image editing/display, URL OUT, Security BLOCKED, WAIT/FIFO/BLOCKED, three connection cases, Smoke/Validation, and visual confirmation where required.

User localhost confirmation is required before #036 is Completed.