paragraph
code()
line 1 line 2``` ### 3.2 Input elements ```html ``` Any other input type is rejected with `BONE_TEXT_HTML_CLASS_INPUT_TYPE_INVALID`. ### 3.3 Unsupported element ```html ``` An element that is neither one of the eight display tags nor `input` is rejected with `BONE_TEXT_HTML_CLASS_ELEMENT_UNSUPPORTED`. ## 4. Minimal HTML ### Display text ```html ABC ``` ### Paragraph ```html
Bone Flow Text sample.
``` ### Editable text ```html ``` ### Placeholder ```html ``` ### Required / Readonly ```html ``` ## 5. What is rendered The Functional Class reads the source HTML and replaces it with an element created by BoneText Runtime. For display elements, the initial value is the element text. ```html Important ``` For input, the initial value comes from `value`. ```html ``` During input, the Runtime emits the `bone-text-input` CustomEvent. #017 does not invent an alternative text editor keyboard model; the browser's normal input behavior remains authoritative. ## 6. Configured HTML ### Display attributes ```htmlLine 1 Line 2
``` ### Input appearance and behavior ```html ``` ### Number alignment With `type="number"` and no explicit `text-align`, `inputAlign:auto` resolves to right alignment. ```html ``` ## 7. HTML settings reference ### `class="bf-text"` Required normal-use entry point. ```html ABC ``` ### `id` Directly available from HTML. ```html READY ``` ### `role` / `aria-label` ```html READY ``` ### `title` / `lang` / `dir` ```html ABC ``` `dir` supports `ltr / rtl / auto`. ### `hidden` ```html Hidden ``` ### `tabindex` ```html ``` ### `white-space` The six supported values for display elements are `normal / nowrap / pre / pre-wrap / pre-line / break-spaces`. ```htmlA B``` ### `type` Input supports only `text / number / password`. ```html ``` ### `placeholder` ```html ``` ### `readonly` / `required` ```html ``` ### `text-align` ```html ``` Supported direct values are `left / center / right`; no value means Runtime `auto`. ### Font CSS Input mode reads `font-family`, `font-size`, `font-weight`, `font-style`, `color`, and `background-color` from inline CSS. ```html ``` ### Runtime settings not directly encoded by normal `bf-text` HTML Do not invent private `data-*` attributes. Use the Property Editor or Public API for: - `prefix` - `suffix` - `emptyText` - `formatter` - `overflow` - `maxLines` - `position` - `selectable` - Gradient values for `inputFont.color / backgroundColor` ## 8. Complete Runtime defaults ### Display / common - `tag`: `span` - `className`: `""` - `id`: `""` - `role`: `""` - `ariaLabel`: `""` - `title`: `""` - `lang`: `""` - `direction`: `auto` - `whitespace`: `normal` - `overflow`: `wrap` - `selectable`: `true` - `hidden`: `false` - `maxLines`: `0` - `emptyText`: `""` - `prefix`: `""` - `suffix`: `""` - `formatter`: `null` ### Input - `valueType`: `text` - `position`: `center` - `inputAlign`: `auto` - `placeholder`: `""` - `readOnly`: `false` - `required`: `false` - `inheritParent`: `true`; the default parent-attachment layout. ### inputFont - `family`: `system-ui, sans-serif` - `size`: `16` px; Runtime accepts any finite number greater than zero. The current Property Editor limits its UI to `8–72px`. - `weight`: `400`; Runtime accepts keywords and 100–900. Current Property Editor offers `400 / 600 / 700`. - `style`: `normal` - `color`: `#111111` - `backgroundColor`: `#ffffff` ## 9. Complete Property details ### Formal Property definitions (Runtime Schema) The Runtime is the canonical source of Property definitions. The page and guide do not keep a second hand-written schema. - `BoneText.getPropertySchema()` returns all Property definitions. - `BoneText.getPropertyDefaults()` returns the Runtime defaults. - `BoneText.getPropertyDefinition(key)` returns one definition, or `null` for an unknown key. The test page section “Formal Property definitions (Runtime Schema)” is rendered from `getPropertySchema()`. ### `inheritParent` — attach to parent - Type: `boolean` - Runtime Default: `true` - `true`: Text / Text Editor uses the available width of its parent and stays inside the parent content area, including parent padding. - `false`: Text uses its own content width basis. - HTML Functional Class: `data-inherit-parent="true|false"`; omitted means `true`. - With `true`, Text / Editor uses `display:block; width:100%` and actually stretches to the parent content width. With `false`, those layout styles are removed and intrinsic content width is used. ```html ABC ``` ### `tag` Eight display tags. Changing the tag of an existing display instance is rejected with `BONE_TEXT_TAG_IMMUTABLE`. ### `className` Additional CSS classes for the generated element. Normal HTML can use `class="bf-text another-class"`. ### `id`, `role`, `ariaLabel`, `title`, `lang` Standard metadata strings. ### `direction` `ltr / rtl / auto`. ### `whitespace` Six values controlling whitespace and line breaks. ### `overflow` `wrap / ellipsis / clip`; normal Functional Class HTML does not invent a dedicated attribute for this setting. ### `selectable` Boolean, default `true`. ### `hidden` Boolean, default `false`. ### `maxLines` Integer `>= 0`. Zero means unlimited. ### `emptyText` Fallback text when a value is null/undefined. ### `prefix` / `suffix` Strings added before/after display text. ### `formatter` Function or `null`; it is an advanced Runtime option, not an inline HTML callback attribute. ### `valueType` `text / number / password`. ### `position` Nine Runtime positions. The normal Functional Class does not add a private `data-position` contract. ### `inputAlign` `auto / left / center / right`. ### `placeholder` Input hint text. ### `readOnly` Prevents editing when true. ### `required` Maps to the HTML input required state. ### `inputFont.family` Non-empty string. ### `inputFont.size` Finite number greater than zero, in px. The Property Editor currently exposes 8–72px. ### `inputFont.weight` Keywords or numeric 100–900. ### `inputFont.style` `normal / italic / oblique`. ### `inputFont.color` Solid, transparent, or formal Gradient Runtime value. Property Editor uses #040. ### `inputFont.backgroundColor` Solid, transparent, or formal Gradient Runtime value. Property Editor uses #040. ## 10. All enum values ### tag (8) `span`, `p`, `div`, `small`, `strong`, `em`, `code`, `pre`. ### valueType (3) `text`, `number`, `password`. ### position (9) - `top-left` - `top-center` - `top-right` - `middle-left` - `center` - `middle-right` - `bottom-left` - `bottom-center` - `bottom-right` ### inputAlign (4) `auto`, `left`, `center`, `right`. ### direction (3) `ltr`, `rtl`, `auto`. ### whitespace (6) `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`, `break-spaces`. ### overflow (3) `wrap`, `ellipsis`, `clip`. ### Font Weight `normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900`. The current Property Editor offers only `400 / 600 / 700`; do not confuse the editor list with the Runtime contract. ### Font Style `normal / italic / oblique`. ## 11. Operation Display elements are not editable. Change them through an upper UI or Runtime API. Input elements behave as standard HTML inputs: ```html ``` `readonly` prevents editing and `required` participates in the browser validation state. ## 12. Keyboard #017 does not define a private Enter-commit, Escape-cancel, or arrow-key editor protocol. Keyboard editing remains standard browser input behavior. - Tab: standard focus navigation. - Character keys: standard input. - Backspace/Delete: standard editing. - IME: standard browser composition behavior. Listen for `bone-text-input` when the value changes: ```javascript const input = document.querySelector('.bf-text'); input.addEventListener('bone-text-input', (event) => { console.log(event.detail.value); }); ``` ## 13. ColorPicker The #017 Property Editor delegates text/background color selection to **#040 ColorPicker**. #017 does not implement a second picker. - #017 owns its trigger and Property value. - #040 owns its overlay, selection, and RETURN flow. Direct HTML can use standard CSS for solid/transparent colors: ```html ``` For formal Gradient Runtime values, use the value returned by #040 with `BoneText.setOptions()` rather than inspecting #040 internal DOM/CSS. ## 14. Joint Joint is owned by **#002 Bone Joint**. It is an advanced Flow-integration topic, not a prerequisite for basic `bf-text` usage. #017 does not create independent lines, missing-target marks, WAIT spinners, or BLOCKED icons. The #017 test page covers normal IN/OUT, missing Target Field, type mismatch, connection errors, WAIT/FIFO, and BLOCKED through #002. ## 15. Smoke / Validation Smoke checks the Runtime identity, dependencies, Preview, HTML Functional Class, and #002/#040 integration. Validation checks contracts such as duplicate IDs, responsibility separation, DOC routing, and the Completion gate. `NOT RUN` means the test has not been executed. A test is only run after its execution button is used. ## 16. Completion Completion requires: 1. Smoke Test ALL PASS. 2. Validation ALL PASS. 3. Visual verification of WAIT → READY → FIFO. 4. Visual verification that BLOCKED does not deliver to Target. 5. User localhost rendering/operation confirmation. A candidate is not automatically treated as Completed or Specification Frozen. ## 17. Public API Public API is for advanced usage. Prefer `bf-text` for ordinary HTML. 1. `normalizeValue(value, emptyText?)` — normalize a value to display text. 2. `normalizeOptions(options)` — validate/normalize Runtime options. 3. `create(value, options)` — create a display element. 4. `createEditor(value, options)` — create an input editor. 5. `render(target, value, options)` — append display text to a target. 6. `renderEditor(target, value, options)` — append an editor to a target. 7. `update(element, value, options)` — update an instance. 8. `setText(element, value)` — change text/value. 9. `getText(element)` — get current text. 10. `getValue(element)` — get the held Runtime value. 11. `getOptions(element)` — get an option snapshot. 12. `setOptions(element, options)` — change options. 13. `destroy(element)` — destroy an instance. 14. `isInstance(element)` — test whether an element is managed by BoneText. 15. `getCompletionState()` — read #017 completion state. 16. `complete(validation)` — complete only with valid Smoke/Validation evidence. 17. `reopen()` — return to Development state. Example: ```javascript const target = document.getElementById('target'); const text = BoneText.render(target, 'ABC', { tag: 'strong' }); BoneText.setText(text, 'DEF'); ``` ## 18. Error / Troubleshooting - `BONE_TEXT_HTML_CLASS_RUNTIME_UNAVAILABLE`: BoneText Runtime is not available when the Functional Class mounts. - `BONE_TEXT_HTML_CLASS_INPUT_TYPE_INVALID`: input type is not text/number/password. - `BONE_TEXT_HTML_CLASS_ELEMENT_UNSUPPORTED`: unsupported HTML element. - `BONE_TEXT_TAG_INVALID`: invalid Runtime tag. - `BONE_TEXT_VALUE_TYPE_INVALID`: invalid valueType. - `BONE_TEXT_POSITION_INVALID`: invalid position. - `BONE_TEXT_INPUT_ALIGN_INVALID`: invalid inputAlign. - `BONE_TEXT_DIRECTION_INVALID`: invalid direction. - `BONE_TEXT_WHITESPACE_INVALID`: invalid whitespace. - `BONE_TEXT_OVERFLOW_INVALID`: invalid overflow. - `BONE_TEXT_MAX_LINES_INVALID`: maxLines is not an integer >= 0. - `BONE_TEXT_FONT_SIZE_INVALID`: font size is not a finite number > 0. - `BONE_TEXT_FONT_WEIGHT_INVALID`: unsupported font weight. - `BONE_TEXT_FONT_STYLE_INVALID`: unsupported font style. - `BONE_TEXT_TARGET_INVALID`: render target is not an Element. - `BONE_TEXT_INSTANCE_INVALID`: instance API received an unmanaged element. - `BONE_TEXT_COMPLETION_VALIDATION_REQUIRED`: Completion attempted without required ALL PASS evidence. Do not weaken tests to make failures disappear; fix the underlying issue. ## 19. Copy-ready samples ### Status ```html READY ``` ### Multi-line ```html