# Bone Flow #036 - Select

Version: 2.0.0  
Status: Development  
Test URL: `/boneflow/test/bone-select.html`

## Rebuild lineage

This package is a clean implementation from the frozen #036 Select requirements. The failed 1.0.x implementation lineage is not a code base for this package.

## Dependencies

- #001 Bone Core v1.0.0
- #002 Bone Joint v1.1.36 — formal `createDeliveryChannel()` WAIT / FIFO / BLOCKED path
- #017 Bone Text — required by #020
- #018 Bone Icon — reached through #019 for Font Awesome icon rendering
- #019 Bone Image v1.0.64 — item Image/Icon rendering and Image Editor delegation
- #020 Bone Label — Select-side label through the public `create()` / `getOutput()` API

#036 does not implement an independent icon picker.

## Items

Items are exactly one hierarchy level:

- Parent: group label; display only; not selectable.
- Child: selectable; `value`, `label`, optional `url`, optional full #019 Image setting.
- A child cannot contain another `children` collection.
- Child `value` is the selectable value.

No display-only unselected option is generated. `null`, empty string, and values not found in children are validation errors. Untrusted IN with those values is BLOCKED without changing the committed value.

## Dropdown overlay

The dropdown is created under `document.body` as an external absolute-positioned overlay and placed below the Select trigger. It is not a child of the Select component layout, so opening or closing it cannot increase the Select width or height.

Normal item lists use visible overflow and no list scrollbar. Only when the actual list content exceeds the internal large-list maximum height (320 px) is normal dropdown scrolling enabled.

## Active Border Effect

Active Border is tied to trigger focus only. It does not depend on the selected value or any selected-state flag.

Supported settings:

- `normal`
- `neon`
- `blink`
- effect color
- neon direction: `clockwise` / `counterclockwise`
- effect speed in milliseconds

`neon` uses an actual rotating border track. Blur removes the focus state and therefore stops the effect.

## List display

- `listLabelVisible`: show/hide child item text.
- `listSize`: list text size and rendered item Image/Icon size.

The stored #019 Image setting is cloned for rendering-size adjustment and is not mutated. The full saved Image setting remains in the item data.

## Label delegation

The Select-side label uses #020 Bone Label. #036 exposes only:

- Select label visible / hidden
- label text

List text sizing and #020 Label styling are separate responsibilities.

## Layout / Parent

When `useParent` is OFF:

- standalone `width`
- standalone `height`
- standalone 9-position value
- standalone `fit`

When `useParent` is ON:

- standalone width, height, position and standalone FIT do not control the rendered component
- the component uses the parent area
- `parentFit` controls whether the Select control itself stretches to that parent area
- no parent 9-position snap Property exists

## OUT

OUT always contains the selected child `value`. When `urlOut` is enabled, the selected child URL is also present as `url`.

## Security and Joint delivery

Security and delivery are separate responsibilities.

- Untrusted IN is checked before changing the Select value.
- Invalid payload/value is returned as BLOCKED and the current value is retained.
- OUT delivery uses #002 Bone Joint v1.1.36 `createDeliveryChannel()`.
- Target busy state queues deliveries FIFO.
- A Joint guard rejection becomes BLOCKED and is not delivered to Target.

## Connection image

The test page contains exactly three display-only connection cases:

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

These display examples do not call or mutate Select state, render, value, OUT, or Delivery.

## Runtime completion rule

Automated tests may report `AUTOMATED PASS`, but that is not user localhost ALL PASS. The page keeps user-localhost confirmation separate and requires explicit visual confirmation for overlay, moving Active Border, and WAIT/BLOCKED behavior.