#020 Label

../../boneflow.js + ../../boneflow.css 共通Standalone動作確認

bf-label

顧客確認ラベル

確認中...

正式ガイド DOC-0020

既存DOC Integrationの日本語正式ガイド全文を、要約せずこの動作確認ページへ組み込んでいます。

source: docs/doc/content/DOC-0020/ja.md / lines: 1782 / sha256: c81607cd27bf77aeb70749c551350886bf7fceed1f476c70636ece32042482cf

DOC-0020 — Bone Flow #020 Label 操作・HTML Functional Classガイド

0. 文書情報

DOC ID: DOC-0020
TOC ID: TOC-0020
対象UI: UI-020
Component: #020 Label
正式Runtime: BoneLabel v1.0.60
DOC Version: 1.0.1
Status: active
HTML Functional Class: bf-label

このDOCは boneflow(4).zip 内の正式 #020 v1.0.60 実体を基準にしています。#019同梱rootのv1.0.61は正本として採用していません。DOC本文はUI HTMLへ複製せず、UI-020 -> DOC-0020 -> DOC Registry -> DOC Loader -> Guide の経路で表示します。

1. #020 Labelの責務

Labelは LABEL Boneの文字と表示PropertyをDOMへ描画します。ラベル単体と既存親要素への吸着、9方向＋FIT、固定/Fitサイズ、均等割り付け、装飾、#022 Hover Border Effect、#117 Animation、#040 ColorPicker、#002 Bone Joint接続イメージを扱います。

#020 v1.0.60には独立した Untrusted IN / Security Test パネル、BoneJoint.createDeliveryChannel() によるWAIT/FIFO/BLOCKED配送チャネル、独立Runtime Consoleは存在しません。存在しない機能を追加・表示・DOC記載しません。

2. 操作ガイド

2.1 画面を開いた直後

ページ上部の 操作ガイド DOC-0020 からこのDOCを開けます。
使用コンポーネント で #001 / #002 / #022 / #117 / #040 の読込状態を確認します。
プロパティ設定 と 合算プレビュー が主な操作領域です。
画面を開いただけではSmoke Test / Validation / Completionは実行済みになりません。

2.2 ラベル文字を変更する

プロパティ設定 > 基本設定 > ラベル文字 を変更します。
入力変更は合算プレビューへ反映されます。
変更を確定 を押すと、現在の設定を確定値としてPreviewへ反映します。
OUT値は 合算プレビュー > OUT値 で確認します。

2.3 Label単体と親要素吸着を切り替える

親要素に吸着 OFF: Label単体を表示主体として確認します。
親要素に吸着 ON: 合算プレビュー領域を親要素として使用し、その親要素へLabelを吸着します。

ONにすると 親要素設定（継承確認用） が有効になり、親幅・親高さ・背景色・文字色・角丸を確認できます。これらのテスト用親設定はLabel OUTへ混入させません。

2.4 表示位置を変更する

表示位置（9方向 / FIT） の10ボタンから選びます。

左上 / 上中央 / 右上
左中央 / 中央 / 右中央
左下 / 下中央 / 右下
FIT

選択すると、その場で合算プレビューへ反映されます。各値のRuntime名、意味、Default、競合条件は「5. Enum全値」の parentPlacement を参照してください。

2.5 サイズを変更する

サイズ で次を切り替えます。

固定サイズ: ラベル幅・ラベル高さを使用します。
Fit: 表示主体の利用可能領域へ合わせます。

固定サイズ時は ラベル幅(px) / ラベル高さ(px) を変更します。FITとの詳細な優先関係は labelSize.mode のProperty説明を参照してください。

2.6 均等割り付けを使用する

均等割り付けを有効にする をONにすると、表示主体に応じて利用可能幅へLabelを割り付けます。Label単体と親要素吸着では割り付け対象が異なるため、切替後に必ず合算プレビューを確認します。

2.7 色を変更する

文字色・背景・枠色・影色・発光色・#022 Effect色は #040 ColorPickerを正式経路として使用します。

対象の色Propertyを操作します。
#040 ColorPickerが開いた場合は色を選択します。
RETURNされた値を#020側Propertyへ反映します。
背景は単色・透過・Gradientを扱います。

#020側で#040のColorPicker機能を複製しません。

2.8 装飾を確認する

装飾 では枠線、角丸、余白、影、発光、文字輪郭、回転、拡大率を変更できます。各数値範囲・Default・無効値時の扱いは「4. Property詳細」を参照してください。

2.9 マウスオーバー枠Effectを確認する

#022を有効にする をONにします。
枠Effect、Effect色、方向、速度などを設定します。
Preview対象へマウスを重ねて結果を確認します。
Label単体時はLabel、親要素吸着時は親要素へ #022 BoneHoverBorderEffect.attach() を委譲します。

2.10 #117 Animationを確認する

エフェクト（#117 Animation） > 有効 をONにします。
Animation適用先、種類、方向、軸、速度、距離、Loop等を設定します。
#117 Animationをテスト再生 を押します。
#020自身は独自keyframe / timer / loopを持たず、#117へ委譲します。

2.11 接続イメージを確認する

接続イメージ では #002 Bone Jointの正式描画を使用します。IN / OUT、Target Field不存在、型不一致等は#020独自SVGではなく#002の状態・描画結果として確認します。

2.12 Smoke Test / Validationを実行する

Smoke Test 実行: 基本機能を確認します。
Validation 実行: 異常系・契約を確認します。
全テスト実行: Smoke TestとValidationを続けて実行します。
結果クリア: 現在の表示結果を未実行状態へ戻します。
レポート保存（JSON / MD）: 現在の画面上テスト結果を保存します。

画面を開いただけ、またはDOMにテスト名が存在するだけではPASSとは扱いません。

2.13 Completion

Smoke TestとValidationの両方を実行し、両方がALL PASSの場合だけ #020 Bone Labelを完了 が有効になります。完了解除ではDevelopment状態へ戻します。ユーザーlocalhost確認前にDOC記載だけを根拠にCompleted / Frozenとは扱いません。

2.14 キーボード操作

Tab: フォーカス可能な入力・ボタン・Selectへ移動します。
Shift + Tab: 逆方向へ移動します。
Space / Enter: フォーカス中のButtonやCheckboxを通常のHTML操作として実行します。
DOC Guide表示中の Escape: Guideを閉じます。

Runtimeに存在しない独自ショートカットは定義しません。

2.15 操作で問題が出た場合

DOC Guideが開かない: bone-doc-loader.js / bone-doc-guide.js とDOC Registryの読込を確認します。
色選択が動かない: #040 ColorPickerの読込・API状態を確認します。
Hover Effectが出ない: #022の読込と #022を有効にする を確認します。
Animationが出ない: #117の読込、有効、Animation種類が none 以外であることを確認します。
Joint表示が異常: #002 Bone Jointの状態を確認し、#020側で線色やSVGを上書きしません。
Completionできない: Smoke Test / Validationの双方を実行し、FAIL項目を先に解消します。

3. HTML Functional Class — `bf-label`

通常利用Classは bf-label 1つだけです。Public APIの関数名や BoneLabel.Component をHTML Classとして扱いません。

最小HTML

<span class="bf-label">氏名</span>

bf-labelは要素の innerText を text 初期値として BoneLabel v1.0.60 をマウントします。空または空白だけならRuntime Defaultの 項目ラベル を使用します。

対象要素

通常のHTMLElementへ指定できます。Label専用data属性は今回定義しません。

HTMLから直接設定できるProperty

直接取得するのは innerText -> text のみです。位置、サイズ、色、装飾、Effectなどのdata属性契約は定義しません。未定義data属性を追加して「設定できるように見せる」ことはしません。

完全な最小ページ

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/boneflow/css/bone-core.css">
  <link rel="stylesheet" href="/boneflow/css/bone-label.css">
</head>
<body>
  <span class="bf-label">氏名</span>

  <script src="/boneflow/js/bone-normalizer.js"></script>
  <script src="/boneflow/js/bone-lifecycle.js"></script>
  <script src="/boneflow/js/bone-factory.js"></script>
  <script src="/boneflow/js/bone-cloner.js"></script>
  <script src="/boneflow/js/bone-updater.js"></script>
  <script src="/boneflow/js/bone-serializer.js"></script>
  <script src="/boneflow/js/bone-deserializer.js"></script>
  <script src="/boneflow/js/bone-core.js"></script>
  <script src="/boneflow/js/bone-label.js"></script>
  <script src="/boneflow/js/bone-label-html-class.js"></script>
</body>
</html>

使用サンプル

ここでは「Property名の例」ではなく、実際にLabelを使う目的から選べるサンプルを示します。各コードはそのままコピーできます。bf-labelから直接指定できない位置・装飾などは、未定義data属性を作らず、正式Public APIを使用します。

1. 普通の項目ラベルを表示する

何をするか: 「氏名」というLabelを1つ表示します。
設定: HTML Functional Class bf-label と要素内文字だけを使用します。

<span class="bf-label">氏名</span>

使用結果: 氏名 が #020 Label v1.0.60 として自動マウントされます。通常利用では最初にこの形を使います。

2. 空のLabelでRuntime Defaultを使う

何をするか: HTML側で文字を与えず、Runtime Defaultを確認します。
設定: bf-labelだけを指定し、要素内文字を空にします。

<span class="bf-label"></span>

使用結果: 空または空白だけの場合は、Runtime Defaultの 項目ラベル が表示されます。

3. フォームに複数のLabelを並べる

何をするか: 氏名・メール・電話番号の3項目を、それぞれ独立したLabelとして表示します。
設定: 各要素へ同じ bf-label を付けます。Classを増やしません。

<div class="form-row">
  <span class="bf-label">氏名</span>
  <input type="text" name="name">
</div>
<div class="form-row">
  <span class="bf-label">メール</span>
  <input type="email" name="email">
</div>
<div class="form-row">
  <span class="bf-label">電話番号</span>
  <input type="tel" name="tel">
</div>

使用結果: 3個の .bf-label がそれぞれ別のBoneLabel instanceとして自動マウントされます。

4. 後から追加したLabelを自動マウントする

何をするか: ページ表示後にJavaScriptでLabelを追加します。
設定: 追加する要素にも bf-label を付けます。BoneLabelHTMLClass の監視により追加後にマウントされます。

<div id="dynamic-labels"></div>
<script>
const host = document.createElement("span");
host.className = "bf-label";
host.textContent = "追加項目";
document.getElementById("dynamic-labels").appendChild(host);
</script>

使用結果: 追加項目 が、初期HTMLに存在しなかった場合でも #020 Labelとして表示されます。

5. `bf-label`で作ったLabelの文字を後から更新する

何をするか: 自動マウント済みLabelを取得し、表示文字を変更します。
設定: HTMLは bf-label、更新はHTML Functional Classとは別管理のPublic API instanceを使用します。

<span id="status-label" class="bf-label">未送信</span>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const host = document.getElementById("status-label");
  const label = BoneLabelHTMLClass.getInstance(host);
  label.update({ text: "送信済み" });
});
</script>

使用結果: 初期表示 未送信 が 送信済み へ更新されます。Public API関数名をHTML Classとして追加しません。

6. 既存の親要素の右上へLabelを吸着する

何をするか: カードなど既存要素の右上へLabelを配置します。
設定: parentPlacement: "top-right" をPublic APIから指定します。

<div id="customer-card" style="position:relative;width:320px;height:140px;"></div>
<script>
const parent = document.getElementById("customer-card");
const label = BoneLabel.attachInstance(parent, {
  text: "顧客情報",
  parentPlacement: "top-right"
});
</script>

使用結果: 顧客情報 Labelが指定親要素へ吸着し、右上位置として管理されます。親要素内の9方向は parentPlacement の正式値を使用します。

7. 親要素全体へFITさせる

何をするか: Labelを親要素の利用可能領域へ合わせます。
設定: parentPlacement: "fit" を使用します。

<div id="fit-card" style="position:relative;width:360px;height:96px;"></div>
<script>
const parent = document.getElementById("fit-card");
const label = BoneLabel.attachInstance(parent, {
  text: "FIT表示",
  parentPlacement: "fit"
});
</script>

使用結果: Labelは9方向配置ではなくFITとして親領域へ配置されます。fit と固定サイズの関係は parentPlacement / labelSize.mode のProperty説明を参照してください。

8. 固定サイズと装飾を使って必須表示を作る

何をするか: 固定サイズ、文字色、枠線、角丸を使った「必須」Labelを作ります。
設定: HTML Functional Classでは直接指定できないためPublic APIを使用します。

<div id="required-label"></div>
<script>
const label = BoneLabel.createInstance({
  text: "必須",
  labelSize: {
    mode: "fixed",
    width: 72,
    height: 30
  },
  textStyle: {
    color: "#ff6b6b",
    fontSize: 13,
    fontWeight: 700
  },
  decoration: {
    borderEnabled: true,
    borderColor: "#ff6b6b",
    borderWidth: 1,
    borderStyle: "solid",
    borderRadius: 4,
    paddingX: 6,
    paddingY: 2
  }
});
document.getElementById("required-label").appendChild(label.getElement());
</script>

使用結果: 72×30pxの固定サイズで、赤系文字と枠を持つ 必須 Labelが表示されます。省略したPropertyはRuntime Defaultが使用されます。

4. Property詳細

以下は BoneLabel.defaults()、normalizeValue()、v1.0.60のProperty Editor実体を区別して記載します。Runtime DefaultとEditor初期値が異なる箇所は両方を書きます。bf-labelから直接指定できないPropertyは、その事実を各項目で明記します。

4.1 基本Property

`text`

目的: Labelの表示文字。
Runtime Default: 項目ラベル
Property Editor初期値: 氏名
型・単位・範囲: string。空白のみ不可。
Runtime処理: String()化後、trim結果が空か検査する。
無効値時: 空白だけなら BONE_LABEL_TEXT_REQUIRED。
HTML Functional Class: 直接指定可。要素のinnerTextを使用する。例: <span class="bf-label">氏名</span>。
関連・競合: distribution.modeでは文字単位へ分解される。
表示への影響: .bone-label-textのtextContent。

`forId`

目的: 生成要素をlabel要素にし、for属性を関連付ける。
Runtime Default: 空文字
Property Editor初期値: 空文字固定（Editor操作なし）
型・単位・範囲: string。
Runtime処理: String(value || "")。
無効値時: 例外にはせず空文字になる。
HTML Functional Class: 直接指定不可。Property Editorにも操作なし。Public APIで指定する。
関連・競合: 非空なら生成hostがspanではなくlabelになる。
表示への影響: for属性として反映。

`position`

目的: Labelの基本的な対象との位置関係。
Runtime Default: top
Property Editor初期値: top固定（Editor操作なし）
型・単位・範囲: enum: top/right/bottom/left/inline。
Runtime処理: 文字列化後、5値を厳密検査する。
無効値時: 許容外は BONE_LABEL_POSITION_INVALID。
HTML Functional Class: 直接指定不可。Public APIで指定する。
関連・競合: parentPlacementとは別Property。9方向/FIT UIはparentPlacementを変更する。
表示への影響: bone-label--<position> Classへ反映。

`parentPlacement`

目的: 親要素またはPreview内の実配置。
Runtime Default: top-left
Property Editor初期値: top-left（左上）
型・単位・範囲: enum 10値。
Runtime処理: 文字列化後、10値を厳密検査する。
無効値時: 許容外は BONE_LABEL_PARENT_PLACEMENT_INVALID。
HTML Functional Class: 直接指定不可。Property EditorまたはPublic API。
関連・競合: fitはlabelSize.mode=fitより強く親領域全体へ配置する。
表示への影響: 親レイアウトClass・OUT受信Preview位置へ反映。

`gap`

目的: Label内/対象との間隔。
Runtime Default: 6
Property Editor初期値: 6
型・単位・範囲: number / px / 0以上。Editor min=0。
Runtime処理: 有限数値へ変換し0未満は0へクランプ。非数値fallbackは0。
無効値時: 例外ではなく0へ正規化。
HTML Functional Class: 直接指定不可。
関連・競合: distributionやサイズと併用。
表示への影響: hostのCSS gap。

`disabled`

目的: 無効状態をアクセシビリティ属性へ表す。
Runtime Default: false
Property Editor初期値: Editor操作なし
型・単位・範囲: boolean想定。
Runtime処理: !!valueでboolean化。
無効値時: truthy/falsyとして正規化。
HTML Functional Class: 直接指定不可。
関連・競合: 操作抑止ロジックではなく状態表示。
表示への影響: trueでaria-disabled="true"。

`hidden`

目的: Labelを非表示にする。
Runtime Default: false
Property Editor初期値: Editor操作なし
型・単位・範囲: boolean想定。
Runtime処理: !!valueでboolean化。
無効値時: truthy/falsyとして正規化。
HTML Functional Class: 直接指定不可。
関連・競合: 他Propertyは保持されたまま。
表示への影響: host.hiddenへ反映。

`title`

目的: DOM title文字列。
Runtime Default: 空文字
Property Editor初期値: Editor操作なし
型・単位・範囲: string。
Runtime処理: String(value || "")。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: 非空時だけtitle属性を設定。
表示への影響: ブラウザ標準title表示。

`displayMode`

目的: IN/OUTとEffectの表示主体をLabelか親要素か選ぶ派生Property。
Runtime Default: 実質label
Property Editor初期値: 「親要素に吸着」OFF=label / ON=parent
型・単位・範囲: enum相当: label/parent。
Runtime処理: 入力が厳密にparentならparent、それ以外はlabel。attachToParent()はparentへ強制する。
無効値時: 不明値は例外でなくlabelへ正規化。
HTML Functional Class: 直接指定不可。
関連・競合: effect.trigger、distribution.mode、IN/OUT主体と連動。
表示への影響: parent時は親要素がState/IN/OUTのowner。

4.2 textStyle

`textStyle.fontFamily`

目的: 文字フォント。
Runtime Default: Meiryo, Yu Gothic, sans-serif
Property Editor初期値: 同値固定（Editor操作なし）
型・単位・範囲: CSS font-family文字列。
Runtime処理: 専用正規化なし。CSSへそのまま代入。
無効値時: Runtime例外なし。無効CSSはブラウザ側で反映されない。
HTML Functional Class: 直接指定不可。
関連・競合: 親文字色などとは独立。
表示への影響: .bone-label-text.style.fontFamily。

`textStyle.fontSize`

目的: 文字サイズ。
Runtime Default: 14
Property Editor初期値: 14 / Editor min=8
型・単位・範囲: number想定 / px。通常Runtimeに専用clampなし。FIT計算では最低8px。
Runtime処理: 通常描画は値+px。FIT時は数値化し最低8pxから縮小計算。
無効値時: 非数値は通常CSSとして無効になり得る。FITでは14へfallback。
HTML Functional Class: 直接指定不可。
関連・競合: labelSize.mode=fitまたはparentPlacement=fitで自動縮小と連動。
表示への影響: 文字サイズ。

`textStyle.fontWeight`

目的: 文字太さ。
Runtime Default: 700
Property Editor初期値: 700 / 100–900 step100
型・単位・範囲: number/stringのCSS font-weight。
Runtime処理: 専用正規化なし。String化してCSSへ設定。
無効値時: Runtime例外なし。無効CSSはブラウザ処理。
HTML Functional Class: 直接指定不可。
関連・競合: fontSize等と独立。
表示への影響: 文字太さ。

`textStyle.color`

目的: 文字色。
Runtime Default: #dce8f8
Property Editor初期値: #dce8f8、#040 ColorPicker
型・単位・範囲: COLOR_VALUE_V2相当。#RRGGBB / transparent / linear gradient。gradient最大8 stops。
Runtime処理: normalizeColorValue(..., allowGradient=true, allowTransparent=true)。
無効値時: 不正色は#DCE8F8へfallback。gradient angleは0–359.999、stop positionは0–100へclamp。
HTML Functional Class: 直接指定不可。
関連・競合: #040 ColorPicker正式経路。
表示への影響: solid/transparentはcolor、gradientは背景clip text。

`textStyle.lineHeight`

目的: 行高。
Runtime Default: 1.5
Property Editor初期値: 1.5固定
型・単位・範囲: CSS line-height値。
Runtime処理: 専用正規化なし。String化してCSSへ設定。
無効値時: Runtime例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: fontSizeと組み合わせて行高を決める。
表示への影響: 文字行高。

`textStyle.letterSpacing`

目的: 文字間隔。
Runtime Default: 0
Property Editor初期値: 0固定
型・単位・範囲: number想定 / px。
Runtime処理: 専用正規化なし。値+px。
無効値時: Runtime例外なし。無効CSSはブラウザ処理。
HTML Functional Class: 直接指定不可。
関連・競合: distribution.mode有効時も各文字spanを含むtext hostへ適用。
表示への影響: 文字間隔。

4.3 distribution / labelSize

`distribution.mode`

目的: 文字の均等割り付け方式。
Runtime Default: none
Property Editor初期値: Toggle OFF=none; ON時 label主体=label-width, parent主体=parent-width
型・単位・範囲: enum: none/label-width/parent-width。
Runtime処理: 3値を厳密検査。
無効値時: 許容外は BONE_LABEL_DISTRIBUTION_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: displayModeとEditorのToggleが連動。parent-widthはhost width=100%。
表示への影響: 文字を1文字ずつspan化し均等配置。

`labelSize.mode`

目的: Labelサイズ方式。
Runtime Default: fixed
Property Editor初期値: fixed
型・単位・範囲: enum: fixed/fit。
Runtime処理: 2値を厳密検査。
無効値時: 許容外は BONE_LABEL_SIZE_MODE_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: parentPlacement=fitでは親全体FITが優先。
表示への影響: fixedはwidth/height、fitは利用可能幅へ合わせる。

`labelSize.width`

目的: 固定Label幅。
Runtime Default: 160
Property Editor初期値: 160 / Editor min=20
型・単位・範囲: number / px / Runtime 20–4000。
Runtime処理: 有限数値化し20–4000へclamp、非数値は160。
無効値時: 例外ではなく範囲へ正規化。
HTML Functional Class: 直接指定不可。
関連・競合: labelSize.mode=fixedで主に使用。distributionでも参照。
表示への影響: host width。

`labelSize.height`

目的: 固定Label高さ。
Runtime Default: 32
Property Editor初期値: 32 / Editor min=16
型・単位・範囲: number / px / Runtime 16–2000。
Runtime処理: 有限数値化し16–2000へclamp、非数値は32。
無効値時: 例外ではなく範囲へ正規化。
HTML Functional Class: 直接指定不可。
関連・競合: labelSize.mode=fixedで主に使用。
表示への影響: host height。

4.4 decoration

`decoration.backgroundType`

目的: 背景を単色か線形Gradientか選ぶ。
Runtime Default: solid
Property Editor初期値: #040結果からsolid/gradientを派生
型・単位・範囲: enum: solid/gradient。
Runtime処理: 2値を厳密検査。
無効値時: 許容外は BONE_LABEL_BACKGROUND_TYPE_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #040 label-bgがGradientならgradientへ派生。
表示への影響: host backgroundの描画方式。

`decoration.backgroundColor`

目的: 単色背景。
Runtime Default: transparent
Property Editor初期値: #152033から#040を初期化
型・単位・範囲: solid/transparent。
Runtime処理: Gradient不可で正規化。
無効値時: 不正値はtransparentへfallback。
HTML Functional Class: 直接指定不可。
関連・競合: backgroundType=solid時だけ表示に使用。#040 ColorPicker。
表示への影響: host background。

`decoration.gradientStart`

目的: 線形Gradient開始色。
Runtime Default: #1c6fd1
Property Editor初期値: hidden初期値#1c6fd1
型・単位・範囲: #RRGGBB。
Runtime処理: Gradient/transparent不可。
無効値時: 不正値は#1C6FD1へfallback。
HTML Functional Class: 直接指定不可。
関連・競合: backgroundType=gradient時使用。#040 Gradient RETURNから先頭stopを取得。
表示への影響: Gradient開始色。

`decoration.gradientEnd`

目的: 線形Gradient終了色。
Runtime Default: #7c3aed
Property Editor初期値: hidden初期値#7c3aed
型・単位・範囲: #RRGGBB。
Runtime処理: Gradient/transparent不可。
無効値時: 不正値は#7C3AEDへfallback。
HTML Functional Class: 直接指定不可。
関連・競合: backgroundType=gradient時使用。#040から末尾stop。
表示への影響: Gradient終了色。

`decoration.gradientAngle`

目的: 線形Gradient角度。
Runtime Default: 90
Property Editor初期値: hidden初期値90
型・単位・範囲: number / deg / 0–359.999。
Runtime処理: 有限数値化して範囲clamp、非数値90。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: #040 Gradient angleから反映。
表示への影響: CSS linear-gradient角度。

`decoration.borderEnabled`

目的: Label自身の枠を有効化。
Runtime Default: false
Property Editor初期値: OFF
型・単位・範囲: boolean想定。Runtimeで明示boolean変換なし。
Runtime処理: 値をそのまま条件判定に使用。
無効値時: 非booleanは例外にならずtruthy/falsyで判定されるためboolean使用必須。
HTML Functional Class: 直接指定不可。
関連・競合: ON時はcontainerStyle.border* fallbackより優先。
表示への影響: 枠表示ON/OFF。

`decoration.borderColor`

目的: Label枠色。
Runtime Default: #5ba6ff
Property Editor初期値: #5ba6ff、#040 ColorPicker
型・単位・範囲: #RRGGBB / transparent / linear gradient。
Runtime処理: Gradient/transparentを許可して正規化。
無効値時: 不正値は#5BA6FFへfallback。
HTML Functional Class: 直接指定不可。
関連・競合: borderEnabled=true時使用。Gradient時border-image。
表示への影響: 枠色。

`decoration.borderWidth`

目的: Label枠太さ。
Runtime Default: 1
Property Editor初期値: 1 / Editor min=0
型・単位・範囲: number / px / 0以上。
Runtime処理: 有限数値化、0未満0、非数値fallback0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: borderEnabled=true時使用。
表示への影響: 枠太さ。

`decoration.borderStyle`

目的: Label枠種類。
Runtime Default: solid
Property Editor初期値: solid; Editor選択: solid/dashed/dotted/double
型・単位・範囲: CSS border-style文字列。Runtime enum検査なし。
Runtime処理: 文字列値をCSSへ使用。
無効値時: Runtime例外なし。Editor外の無効CSSはブラウザ側で無効。
HTML Functional Class: 直接指定不可。
関連・競合: borderEnabled=true時使用。
表示への影響: 枠線種。

`decoration.borderRadius`

目的: Label角丸。
Runtime Default: 6
Property Editor初期値: 6 / Editor min=0
型・単位・範囲: number / px / 0以上。
Runtime処理: 有限数値化、0未満0、非数値fallback0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: containerStyle.borderRadiusではなく本Propertyが描画に使用される。
表示への影響: host border-radius。

`decoration.paddingX`

目的: 左右内側余白。
Runtime Default: 6
Property Editor初期値: 6 / Editor min=0
型・単位・範囲: number / px / 0以上。
Runtime処理: 有限数値化、0未満0、非数値fallback0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: FIT文字縮小時の利用可能幅計算でも使用。
表示への影響: 左右padding。

`decoration.paddingY`

目的: 上下内側余白。
Runtime Default: 3
Property Editor初期値: 3 / Editor min=0
型・単位・範囲: number / px / 0以上。
Runtime処理: 有限数値化、0未満0、非数値fallback0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: paddingXと組み合わせ。
表示への影響: 上下padding。

`decoration.shadowEnabled`

目的: 影を有効化。
Runtime Default: false
Property Editor初期値: OFF
型・単位・範囲: boolean想定。Runtimeで明示boolean変換なし。
Runtime処理: truthy/falsy判定。
無効値時: 非booleanは例外なし。boolean使用必須。
HTML Functional Class: 直接指定不可。
関連・競合: glowEnabledと同時ON時はbox-shadowへ両方を結合。
表示への影響: 影ON/OFF。

`decoration.shadowX`

目的: 影のXオフセット。
Runtime Default: 0
Property Editor初期値: 0
型・単位・範囲: number / px / -200–200。
Runtime処理: 有限数値化しclamp、非数値0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: shadowEnabled=true時使用。
表示への影響: box-shadow X。

`decoration.shadowY`

目的: 影のYオフセット。
Runtime Default: 3
Property Editor初期値: 3
型・単位・範囲: number / px / -200–200。
Runtime処理: 有限数値化しclamp、非数値3。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: shadowEnabled=true時使用。
表示への影響: box-shadow Y。

`decoration.shadowBlur`

目的: 影ぼかし。
Runtime Default: 10
Property Editor初期値: 10 / Editor min=0
型・単位・範囲: number / px / 0–300。
Runtime処理: 有限数値化しclamp、非数値10。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: shadowEnabled=true時使用。
表示への影響: box-shadow blur。

`decoration.shadowColor`

目的: 影色。
Runtime Default: rgba(0,0,0,.35)
Property Editor初期値: #5ba6ff、#040 ColorPicker
型・単位・範囲: Runtime正規化は#RRGGBB/transparentのみ。
Runtime処理: Default文字列rgbaは許容形式外のためnormalizeValue(defaults())ではfallback #5BA6FFになる。
無効値時: 不正値は#5BA6FFへfallback。
HTML Functional Class: 直接指定不可。
関連・競合: shadowEnabled=true時使用。EditorとDEFAULT_VALUEが異なる重要項目。
表示への影響: 影色。

`decoration.glowEnabled`

目的: 発光を有効化。
Runtime Default: false
Property Editor初期値: OFF
型・単位・範囲: boolean想定。Runtimeで明示boolean変換なし。
Runtime処理: truthy/falsy判定。
無効値時: 非booleanは例外なし。boolean使用必須。
HTML Functional Class: 直接指定不可。
関連・競合: shadowEnabledと同時利用可能。
表示への影響: 0 0 14pxのglowをbox-shadowへ追加。

`decoration.glowColor`

目的: 発光色。
Runtime Default: #5ba6ff
Property Editor初期値: #5ba6ff、#040 ColorPicker
型・単位・範囲: #RRGGBB/transparent。
Runtime処理: Gradient不可。
無効値時: 不正値は#5BA6FFへfallback。
HTML Functional Class: 直接指定不可。
関連・競合: glowEnabled=true時使用。
表示への影響: glow色。

`decoration.outlineEnabled`

目的: 文字輪郭を有効化。
Runtime Default: false
Property Editor初期値: OFF
型・単位・範囲: boolean想定。Runtimeで明示boolean変換なし。
Runtime処理: truthy/falsy判定。
無効値時: 非booleanは例外なし。boolean使用必須。
HTML Functional Class: 直接指定不可。
関連・競合: outlineColor/outlineWidthと連動。
表示への影響: hostのwebkitTextStrokeをON/OFF。

`decoration.outlineColor`

目的: 文字輪郭色。
Runtime Default: #0b1220
Property Editor初期値: #0b1220固定（Editor操作なし）
型・単位・範囲: CSS color文字列。専用正規化なし。
Runtime処理: そのままCSSへ使用。
無効値時: Runtime例外なし。無効CSSはブラウザ処理。
HTML Functional Class: 直接指定不可。
関連・競合: outlineEnabled=true時使用。
表示への影響: 文字輪郭色。

`decoration.outlineWidth`

目的: 文字輪郭幅。
Runtime Default: 1
Property Editor初期値: 1固定（Editor操作なし）
型・単位・範囲: number想定 / px。専用clampなし。
Runtime処理: 値+pxでCSSへ使用。
無効値時: Runtime例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: outlineEnabled=true時使用。
表示への影響: 文字輪郭幅。

`decoration.rotation`

目的: Label回転角。
Runtime Default: 0
Property Editor初期値: 0
型・単位・範囲: number / deg。Runtime min/maxなし。
Runtime処理: 有限数値化、非数値fallback0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: scaleと同じbase transform情報を構成。
表示への影響: CSS rotate。

`decoration.scale`

目的: Label拡大率。
Runtime Default: 1
Property Editor初期値: 1 / Editor 0.1–3 step0.1
型・単位・範囲: number / Runtime 0.1–10。
Runtime処理: 有限数値化し0.1–10へclamp、非数値1。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: rotationと併用。Editor上限3とRuntime上限10が異なる。
表示への影響: CSS scale。

4.5 effect / #117 Animation

`effect.enabled`

目的: #117 Animation利用可否。
Runtime Default: false
Property Editor初期値: OFF
型・単位・範囲: boolean。
Runtime処理: 厳密に=== trueのときだけON。
無効値時: true以外はfalse。
HTML Functional Class: 直接指定不可。
関連・競合: type=noneならenabled=trueでも再生しない。
表示への影響: Animationバインド/再生可否。

`effect.type`

目的: #117へ渡すAnimation種類。
Runtime Default: none
Property Editor初期値: none
型・単位・範囲: enum 12値。
Runtime処理: 12値を厳密検査。
無効値時: 許容外は BONE_LABEL_EFFECT_TYPE_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #117 v1.0.9へ委譲。
表示への影響: Animation種類。

`effect.trigger`

目的: Effect発火主体。
Runtime Default: self
Property Editor初期値: Label単体=self; 親吸着=parentに派生
型・単位・範囲: enum self/parent。
Runtime処理: 2値を厳密検査。
無効値時: 許容外は BONE_LABEL_EFFECT_TRIGGER_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: displayModeとProperty Editorが連動。
表示への影響: mouseenter等の発火主体を決定。

`effect.target`

目的: Effect適用対象。
Runtime Default: subject
Property Editor初期値: subject（表示主体全体）
型・単位・範囲: enum subject/text。
Runtime処理: 2値を厳密検査。
無効値時: 許容外は BONE_LABEL_EFFECT_TARGET_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: targetPartをwhole/textへ派生。
表示への影響: 親/Label全体または文字だけを動かす。

`effect.animationUiNo`

目的: #117 RelationのAnimation UI番号。
Runtime Default: UI-117-020-001
Property Editor初期値: 同値
型・単位・範囲: string / ^UI-[0-9A-Za-z._-]+$。
Runtime処理: trim後regex検査。
無効値時: 不正は BONE_LABEL_117_ANIMATION_UI_NO_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #117 Animation Relation。
表示への影響: 表示そのものではなくRelation識別。

`effect.targetUiNo`

目的: #117 RelationのTarget UI番号。
Runtime Default: UI-020-001
Property Editor初期値: 同値
型・単位・範囲: string / ^UI-[0-9A-Za-z._-]+$。
Runtime処理: trim後regex検査。
無効値時: 不正は BONE_LABEL_117_TARGET_UI_NO_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #117 Animation Relation。
表示への影響: Relation識別。

`effect.targetPart`

目的: #117 RelationのTarget Part。
Runtime Default: whole
Property Editor初期値: target=subjectならwhole; target=textならtext（output表示）
型・単位・範囲: stringだがv1.0.60ではtargetから派生。
Runtime処理: normalizeAnimationEffect内で入力targetPartよりtargetを優先しwhole/textへ上書き。
無効値時: 派生値が英数._-規則に反することは通常ない。
HTML Functional Class: 直接指定不可。
関連・競合: effect.targetに依存し、独立指定は実質保持されない。
表示への影響: Relation対象part。

`effect.direction`

目的: Animation方向。
Runtime Default: forward
Property Editor初期値: forward
型・単位・範囲: enum forward/reverse。
Runtime処理: 厳密検査。
無効値時: 不正は BONE_LABEL_117_DIRECTION_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #117へ渡す。
表示への影響: Animation方向。

`effect.axis`

目的: Animation軸。
Runtime Default: horizontal
Property Editor初期値: horizontal
型・単位・範囲: enum horizontal/vertical。
Runtime処理: 厳密検査。
無効値時: 不正は BONE_LABEL_117_AXIS_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #117へ渡す。
表示への影響: 移動系Animation軸。

`effect.speed`

目的: Animation速度。
Runtime Default: normal
Property Editor初期値: normal
型・単位・範囲: enum slow/normal/fast。
Runtime処理: 厳密検査。
無効値時: 不正は BONE_LABEL_117_SPEED_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #117へ渡す。
表示への影響: Animation速度。

`effect.distance`

目的: 移動距離。
Runtime Default: 24
Property Editor初期値: 24
型・単位・範囲: number / px / 0–10000。
Runtime処理: 有限数値化しclamp、非数値24。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: 主にmove/slide系。
表示への影響: Animation距離。

`effect.loop`

目的: Animation Loop。
Runtime Default: true
Property Editor初期値: ON
型・単位・範囲: boolean。
Runtime処理: undefinedならtrue、それ以外は=== trueのみtrue。
無効値時: 文字列"true"等はfalse。
HTML Functional Class: 直接指定不可。
関連・競合: loopWaitMsと連動。
表示への影響: #117 loop設定。

`effect.loopWaitMs`

目的: Loop間WAIT。Joint WAITとは無関係。
Runtime Default: 300
Property Editor初期値: 300
型・単位・範囲: number / ms / 0–60000。
Runtime処理: 有限数値化しclamp、非数値300。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: effect.loop=true時の#117待機値。
表示への影響: #117 loop wait。

`effect.reducedMotion`

目的: prefers-reduced-motionを尊重する。
Runtime Default: true
Property Editor初期値: ON
型・単位・範囲: boolean。
Runtime処理: 明示falseのときだけfalse、それ以外true。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: #117 respectReducedMotionへ渡す。
表示への影響: ユーザーのmotion軽減設定へ追従。

4.6 hoverBorderEffect / #022

`hoverBorderEffect.enabled`

目的: #022 Hover Border Effect有効化。
Runtime Default: false
Property Editor初期値: OFF
型・単位・範囲: boolean。
Runtime処理: 厳密に=== trueのみON。
無効値時: true以外false。
HTML Functional Class: 直接指定不可。
関連・競合: ON時#022 dependencyが必要。
表示への影響: マウスオーバー枠Effect。

`hoverBorderEffect.effect`

目的: #022 Effect種類。
Runtime Default: normal
Property Editor初期値: normal
型・単位・範囲: enum normal/neon/spin/cross/blink。
Runtime処理: 厳密検査。
無効値時: 不正は BONE_LABEL_022_EFFECT_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #022へそのまま委譲。
表示への影響: 枠Effect種類。

`hoverBorderEffect.color`

目的: #022 Effect色。
Runtime Default: #35f4ff
Property Editor初期値: #35f4ff、#040 ColorPicker
型・単位・範囲: #RRGGBBのみ。
Runtime処理: Gradient/transparent不可。
無効値時: 不正は#35F4FFへfallback。
HTML Functional Class: 直接指定不可。
関連・競合: #040はこの項目をSolid限定で提供。
表示への影響: Effect色。

`hoverBorderEffect.direction`

目的: #022回転方向。
Runtime Default: clockwise
Property Editor初期値: clockwise
型・単位・範囲: enum clockwise/counterclockwise。
Runtime処理: 厳密検査。
無効値時: 不正は BONE_LABEL_022_DIRECTION_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: spin等で使用。
表示への影響: Effect方向。

`hoverBorderEffect.speed`

目的: #022速度。
Runtime Default: normal
Property Editor初期値: normal
型・単位・範囲: enum slow/normal/fast。
Runtime処理: 厳密検査。
無効値時: 不正は BONE_LABEL_022_SPEED_INVALID。
HTML Functional Class: 直接指定不可。
関連・競合: #022へ委譲。
表示への影響: Effect速度。

`hoverBorderEffect.spinWidth`

目的: Spin外周幅。
Runtime Default: 2
Property Editor初期値: 2
型・単位・範囲: number / px / 1–24。
Runtime処理: 有限数値化しclamp、非数値2。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: effect=spinで主に使用。
表示への影響: Spin線幅。

`hoverBorderEffect.spinGlow`

目的: Spin発光量。
Runtime Default: 12
Property Editor初期値: 12
型・単位・範囲: number / px / 0–40。
Runtime処理: 有限数値化しclamp、非数値12。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: effect=spinで主に使用。
表示への影響: Spin glow。

4.7 containerStyle

`containerStyle.minWidth`

目的: Label hostの最小幅。
Runtime Default: 0
Property Editor初期値: Editor操作なし
型・単位・範囲: number / px / 0以上。
Runtime処理: 描画時に有限数値化、min0、非数値0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: distribution fixed時はlabelSize.widthがminWidthを上書きする場合がある。
表示への影響: host min-width。

`containerStyle.maxWidth`

目的: Label hostの最大幅。
Runtime Default: null
Property Editor初期値: Editor操作なし
型・単位・範囲: number/null / px / 0以上。
Runtime処理: nullならCSS none。非nullは有限数値化しmin0。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: host自体には先にmaxWidth=100%設定後、本値で上書きされる。
表示への影響: host max-width。

`containerStyle.paddingTop`

目的: 予約済みcontainer上padding。
Runtime Default: 0
Property Editor初期値: Editor操作なし
型・単位・範囲: number想定。
Runtime処理: v1.0.60 rendererでは参照されない。
無効値時: 値は保持されるが描画効果なし。
HTML Functional Class: 直接指定不可。
関連・競合: 実描画paddingはdecoration.paddingY/Xを使用。
表示への影響: v1.0.60では表示影響なし。

`containerStyle.paddingRight`

目的: 予約済みcontainer右padding。
Runtime Default: 0
Property Editor初期値: Editor操作なし
型・単位・範囲: number想定。
Runtime処理: v1.0.60 rendererでは参照されない。
無効値時: 値は保持されるが描画効果なし。
HTML Functional Class: 直接指定不可。
関連・競合: decoration.paddingXが実描画。
表示への影響: v1.0.60では表示影響なし。

`containerStyle.paddingBottom`

目的: 予約済みcontainer下padding。
Runtime Default: 0
Property Editor初期値: Editor操作なし
型・単位・範囲: number想定。
Runtime処理: v1.0.60 rendererでは参照されない。
無効値時: 値は保持されるが描画効果なし。
HTML Functional Class: 直接指定不可。
関連・競合: decoration.paddingYが実描画。
表示への影響: v1.0.60では表示影響なし。

`containerStyle.paddingLeft`

目的: 予約済みcontainer左padding。
Runtime Default: 0
Property Editor初期値: Editor操作なし
型・単位・範囲: number想定。
Runtime処理: v1.0.60 rendererでは参照されない。
無効値時: 値は保持されるが描画効果なし。
HTML Functional Class: 直接指定不可。
関連・競合: decoration.paddingXが実描画。
表示への影響: v1.0.60では表示影響なし。

`containerStyle.backgroundColor`

目的: 予約済みcontainer背景。
Runtime Default: null
Property Editor初期値: Editor操作なし
型・単位・範囲: color/null。
Runtime処理: v1.0.60 rendererでは参照されない。
無効値時: 値は保持されるが描画効果なし。
HTML Functional Class: 直接指定不可。
関連・競合: 実背景はdecoration.background*。
表示への影響: v1.0.60では表示影響なし。

`containerStyle.borderEnabled`

目的: decoration枠OFF時のfallback border。
Runtime Default: false
Property Editor初期値: Editor操作なし
型・単位・範囲: boolean想定。
Runtime処理: decoration.borderEnabled=false時にtruthyならcontainer borderを使用。
無効値時: 非booleanは例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: decoration.borderEnabled=trueが優先。
表示への影響: fallback枠ON/OFF。

`containerStyle.borderColor`

目的: fallback border色。
Runtime Default: #425a78
Property Editor初期値: Editor操作なし
型・単位・範囲: CSS color文字列。専用正規化なし。
Runtime処理: そのままfallback borderへ連結。
無効値時: 無効CSSはブラウザ処理。
HTML Functional Class: 直接指定不可。
関連・競合: containerStyle.borderEnabled=trueかつdecoration.borderEnabled=false時。
表示への影響: fallback枠色。

`containerStyle.borderWidth`

目的: fallback border太さ。
Runtime Default: 1
Property Editor初期値: Editor操作なし
型・単位・範囲: number想定 / px。専用clampなし。
Runtime処理: そのままfallback borderへ連結。
無効値時: Runtime例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: 同上。
表示への影響: fallback枠幅。

`containerStyle.borderStyle`

目的: fallback border種類。
Runtime Default: solid
Property Editor初期値: Editor操作なし
型・単位・範囲: CSS border-style文字列。
Runtime処理: そのまま使用。
無効値時: 無効CSSはブラウザ処理。
HTML Functional Class: 直接指定不可。
関連・競合: 同上。
表示への影響: fallback枠線種。

`containerStyle.borderRadius`

目的: 予約済みcontainer角丸。
Runtime Default: 6
Property Editor初期値: Editor操作なし
型・単位・範囲: number想定。
Runtime処理: v1.0.60 rendererでは参照されない。
無効値時: 値は保持されるが描画効果なし。
HTML Functional Class: 直接指定不可。
関連・競合: 実角丸はdecoration.borderRadius。
表示への影響: v1.0.60では表示影響なし。

`containerStyle.opacity`

目的: Label host不透明度。
Runtime Default: 1
Property Editor初期値: Editor操作なし
型・単位・範囲: number / 0–1。
Runtime処理: 描画時に有限数値化し0–1へclamp、非数値1。
無効値時: 例外なし。
HTML Functional Class: 直接指定不可。
関連・競合: 他装飾全体へ作用。
表示への影響: host opacity。

5. Enum全値

`position` 全値

Defaultは top です。9方向/FITの実配置はparentPlacementです。

`top`

基本関係を上側として表す。v1.0.60 Property Editorはこの値に固定。

`right`

基本関係を右側として表す。

`bottom`

基本関係を下側として表す。

`left`

基本関係を左側として表す。

`inline`

インライン関係を表す。

`parentPlacement` 全値

Defaultは top-left です。

`top-left`

左上。Property Editor初期値。親吸着時は左上、OUT receiverでも左上へ配置。

`top-center`

上辺中央。

`top-right`

右上。

`middle-left`

左辺中央。

`center`

水平・垂直中央。

`middle-right`

右辺中央。

`bottom-left`

左下。

`bottom-center`

下辺中央。

`bottom-right`

右下。

`fit`

親/receiver領域へFIT。親吸着時はLabel width/heightを100%にする。

`distribution.mode` 全値

Defaultは none です。

`none`

均等割り付けなし。通常の文字列として描画。

`label-width`

Label自身の幅に対して文字を均等配置。

`parent-width`

親要素幅に対して文字を均等配置し、Label幅を100%へする。

`labelSize.mode` 全値

Defaultは fixed です。

`fixed`

width/heightを固定値として使用。

`fit`

利用可能幅へ合わせる。文字がはみ出す場合は8pxを下限として縮小計算。

`decoration.backgroundType` 全値

Defaultは solid です。

`solid`

backgroundColorを使用。

`gradient`

gradientStart / gradientEnd / gradientAngleを使用。

`effect.type` 全値

Defaultは none です。

`none`

Animationなし。enabled=trueでもplayEffectはfalse。

`move`

Moveを#117へ委譲。

`bounce`

Bounceを#117へ委譲。

`pulse`

Pulseを#117へ委譲。

`spin`

Spinを#117へ委譲。

`blink`

Blinkを#117へ委譲。

`slide`

Slideを#117へ委譲。

`zoom`

Zoomを#117へ委譲。

`flow`

Flowを#117へ委譲。

`shimmer`

Shimmerを#117へ委譲。

`glow-sweep`

Glow Sweepを#117へ委譲。

`breathing-glow`

Breathing Glowを#117へ委譲。

`effect.trigger` 全値

Defaultは self です。

`self`

Label自身を発火主体にする。

`parent`

親要素を発火主体にする。Property Editorは親吸着ONでこの値へ派生。

`effect.target` 全値

Defaultは subject です。

`subject`

表示主体全体。targetPart=wholeへ派生。

`text`

Label文字だけ。targetPart=textへ派生。

`effect.direction` 全値

Defaultは forward です。

`forward`

正方向。

`reverse`

逆方向。

`effect.axis` 全値

Defaultは horizontal です。

`horizontal`

水平軸。

`vertical`

垂直軸。

`effect.speed` 全値

Defaultは normal です。

`slow`

低速。

`normal`

標準。

`fast`

高速。

`hoverBorderEffect.effect` 全値

Defaultは normal です。

`normal`

通常枠Effect。

`neon`

ネオン枠。

`spin`

外周スピン。

`cross`

クロス。

`blink`

点滅。

`hoverBorderEffect.direction` 全値

Defaultは clockwise です。

`clockwise`

時計回り。

`counterclockwise`

反時計回り。

`hoverBorderEffect.speed` 全値

Defaultは normal です。

`slow`

低速。

`normal`

標準。

`fast`

高速。

`Property Editor borderStyle` 全値

Defaultは solid です。Runtime自体はこの4値に限定しておらずCSS文字列として使用します。

`solid`

実線。

`dashed`

破線。

`dotted`

点線。

`double`

二重線。

6. #040 ColorPickerとの関係

#020側で独自ColorPickerを作りません。v1.0.60 Property Editorは#040のCaller経路を使用します。

textStyle.color: Solid / Transparent / Linear Gradient
decoration.backgroundColor + gradient fields: #040のlabel-bg RETURNからSolid / Transparent / Linear Gradientを派生
decoration.borderColor: Solid / Transparent / Linear Gradient
decoration.shadowColor: Solid / Transparent
decoration.glowColor: Solid / Transparent
hoverBorderEffect.color: Solidのみ

#040のsetValue()はRETURNイベントを偽造せず、ユーザー確定RETURNだけをPropertyへ反映する既存テストを維持します。

7. #002 Bone Joint / IN / OUT

buildInput()は componentId: "020", componentName: "Label", type: "LABEL", value: <正規化Property> を返します。buildOutput()は valueにLabel文字、propertyに正規化Propertyを返します。

接続イメージの線・端点・Target Field不存在・型不一致は#002 Bone Jointの責務です。#020で独自SVG・独自線色・見た目だけの接続判定を作りません。

WAIT / FIFO / BLOCKED

#020 v1.0.60には BoneJoint.createDeliveryChannel() を利用するOUT配送チャネルがありません。そのためWAIT/FIFO/BLOCKEDを#020固有機能として追加しません。Property Editorの Loop WAIT(ms) は#117 AnimationのLoop待機時間であり、Joint WAITとは別物です。

8. Validation / Security

v1.0.60には通常Previewと独立したSecurity Testパネルはありません。したがって新しいSecurity画面は作りません。Runtimeに実在する入力検証だけを扱います。

text空白拒否: BONE_LABEL_TEXT_REQUIRED
Bone type不一致: BONE_LABEL_BONE_TYPE_MISMATCH
enum不正: 各 *_INVALID
#022不足: BONE_LABEL_022_DEPENDENCY_MISSING
#117 v1.0.9不足/不一致: BONE_LABEL_117_DEPENDENCY_MISSING
数値は項目ごとのRuntime clamp/fallbackに従う
色は項目ごとの許容形式とfallbackに従う

9. Public API — HTML Functional Classとは別管理

Public APIは高度操作用です。bf-labelのClass数へ数えません。

1. `defaults()`

DEFAULT_VALUEの複製を返す。

2. `normalizeValue(input)`

Label Propertyを正規化する。

3. `validateValue(input)`

例外をvalid/errors形式へ変換して検証する。

4. `buildInput(input)`

#020 IN構造を作る。

5. `buildOutput(input)`

#020 OUT構造を作る。

6. `renderOutput(receiver, output)`

OUTをreceiverへ描画する。

7. `create(input)`

LABEL BoneからLabel DOMを生成する。

8. `attachToParent(parent, input)`

Labelを親要素へ吸着し親をState/IN/OUT主体にする。

9. `playEffect(element)`

#117 Animationを再生/再開する。

10. `distributeLabels(parent, inputs, options)`

複数Labelの均等割り付けhostを生成する。

11. `getInput(element)`

管理要素のINを取得する。

12. `getOutput(element)`

管理要素のOUTを取得する。

13. `getState(element)`

管理要素のState snapshotを取得する。

14. `isInstance(element)`

BoneLabel管理対象か判定する。

15. `createInstance(input, options)`

BoneLabel.Component instanceを生成する。

16. `attachInstance(parent, input, options)`

instanceを生成し親へattachする。

17. `getInstance(element)`

既存管理要素からBoneLabel.Componentを取得/adoptする。

18. `getClassList()`

Runtime Class APIメタ情報を返す。

19. `getCompletionState()`

Completion保存状態を読む。

20. `getAnimationState(element)`

#117 Animation Stateを取得する。

21. `getAnimationOutput(element)`

#117 Animation OUTを取得する。

22. `getAnimationDependency()`

#117依存ID/Versionを返す。

23. `getHoverBorderEffectState(element)`

#022 Stateを取得する。

24. `refreshHoverBorderEffect(element)`

#022 Effectを再描画する。

25. `complete(validation)`

Smoke/Validation ALL PASS情報を要求してCompletion保存する。

26. `reopen()`

CompletionをDevelopmentへ戻す。

10. `BoneLabel.Component` Runtime Class

これはHTML Functional Classではありません。instance参照で生成・更新・親吸着・解除・破棄を行う高度操作用Classです。

Constructor

new BoneLabel.Component(input[, options])

Methods

getElement(): Label DOMを取得
getParentElement(): attach中の親要素を取得
getValue(): 現在の正規化Property取得
setValue(input): Propertyを置換更新
update(input): Property更新
getInput(): IN取得
getOutput(): OUT取得
getState(): Class State取得
attach(parent): 親へ吸着
detach(): 親から解除
playEffect(): #117再生
getAnimationState(): #117 State
getAnimationOutput(): #117 OUT
getHoverBorderEffectState(): #022 State
refreshHoverBorderEffect(): #022再描画
destroy(): DOM/Effect/instance参照を破棄
isDestroyed(): 破棄済み判定

Callbacks: onAttach, onUpdate, onDetach, onDestroy。

Events: bone-label:attach, bone-label:update, bone-label:detach, bone-label:destroy。

11. Public APIで詳細設定する完全例

bf-labelに未定義data属性を追加せず、詳細設定はPublic APIを使用します。

<div id="label-host"></div>
<script>
const host = document.getElementById("label-host");
const instance = BoneLabel.createInstance({
  text: "金額",
  parentPlacement: "top-right",
  labelSize: { mode: "fixed", width: 180, height: 32 },
  textStyle: { fontSize: 14, fontWeight: 700, color: "#DCE8F8" },
  decoration: {
    backgroundType: "solid",
    backgroundColor: "transparent",
    borderEnabled: true,
    borderColor: "#5BA6FF",
    borderWidth: 1,
    borderStyle: "solid",
    borderRadius: 6,
    paddingX: 6,
    paddingY: 3
  }
});
host.appendChild(instance.getElement());
</script>

12. 親要素へ吸着する例

<div id="field-row"></div>
<script>
const parentElement = document.getElementById("field-row");
const label = BoneLabel.attachInstance(parentElement, {
  text: "氏名",
  parentPlacement: "top-left",
  labelSize: { mode: "fixed", width: 160, height: 32 }
});
</script>

parentPlacement=fitでは親領域へLabelを100%で配置します。labelSize.mode=fitでは利用可能幅へ合わせ、文字がはみ出す場合は自動縮小します。

13. 依存Component

#001 Bone Core: LABEL Bone normalize/create
#002 Bone Joint: Connection Image / Joint評価・描画
#022 Hover Border Effect: Hover Border Effect
#117 Animation v1.0.9: 要素Motion
#040 ColorPicker: 色Property選択

依存Componentの内部実装を#020へ複製しません。

14. Smoke Test / Validation / Completion

v1.0.60実画面のSmoke Test、Validation、全テスト実行、Report保存、Completion管理を維持します。テスト期待値をDOC統合のために都合よく変更しません。

独立Runtime Consoleはv1.0.60実画面に存在しないため追加しません。

Completion Runtimeは allPass, smokePassed, validationPassed がすべてtrueの検証情報を要求します。これはRelease Ready状態の保存であり、正式なCompleted / Specification Frozenはユーザーlocalhost Runtime確認後にユーザーが「完了」と明示した時点です。

15. トラブル確認

bf-labelが表示されない: /boneflow/js/bone-core.js, bone-label.js v1.0.60, bone-label-html-class.jsの読込を確認。
通常画面が素のHTMLになる: /boneflow/css/ と共有Runtimeが空Targetへ配置されているか確認。
DOCが開かない: DOC RegistryのDOC-0020、source、bone-doc-loader.jsを確認。
ColorPickerが開かない: #040のCaller APIを確認。
Hover枠が出ない: #022 APIを確認。
Motionが動かない: #117 Animation v1.0.9とRelation UI番号を確認。
Jointが赤/オレンジ: #002側のTarget Field・型・接続状態を確認。
Label text空欄: Runtimeは空白のみを拒否する。

#020 Label

bf-label

正式ガイド DOC-0020

DOC-0020 — Bone Flow #020 Label 操作・HTML Functional Classガイド

0. 文書情報

1. #020 Labelの責務

2. 操作ガイド

2.1 画面を開いた直後

2.2 ラベル文字を変更する

2.3 Label単体と親要素吸着を切り替える

2.4 表示位置を変更する

2.5 サイズを変更する

2.6 均等割り付けを使用する

2.7 色を変更する

2.8 装飾を確認する

2.9 マウスオーバー枠Effectを確認する

2.10 #117 Animationを確認する

2.11 接続イメージを確認する

2.12 Smoke Test / Validationを実行する

2.13 Completion

2.14 キーボード操作

2.15 操作で問題が出た場合

3. HTML Functional Class — bf-label

最小HTML

対象要素

HTMLから直接設定できるProperty

完全な最小ページ

使用サンプル

1. 普通の項目ラベルを表示する

2. 空のLabelでRuntime Defaultを使う

3. フォームに複数のLabelを並べる

4. 後から追加したLabelを自動マウントする

5. bf-labelで作ったLabelの文字を後から更新する

6. 既存の親要素の右上へLabelを吸着する

7. 親要素全体へFITさせる

8. 固定サイズと装飾を使って必須表示を作る

4. Property詳細

4.1 基本Property

text

forId

position

parentPlacement

gap

disabled

hidden

title

displayMode

4.2 textStyle

textStyle.fontFamily

textStyle.fontSize

textStyle.fontWeight

textStyle.color

textStyle.lineHeight

textStyle.letterSpacing

4.3 distribution / labelSize

distribution.mode

labelSize.mode

labelSize.width

labelSize.height

4.4 decoration

decoration.backgroundType

decoration.backgroundColor

decoration.gradientStart

decoration.gradientEnd

decoration.gradientAngle

decoration.borderEnabled

decoration.borderColor

decoration.borderWidth

decoration.borderStyle

decoration.borderRadius

decoration.paddingX

decoration.paddingY

decoration.shadowEnabled

decoration.shadowX

decoration.shadowY

decoration.shadowBlur

decoration.shadowColor

decoration.glowEnabled

decoration.glowColor

decoration.outlineEnabled

3. HTML Functional Class — `bf-label`

5. `bf-label`で作ったLabelの文字を後から更新する

`text`

`forId`

`position`

`parentPlacement`

`gap`

`disabled`

`hidden`

`title`

`displayMode`

`textStyle.fontFamily`

`textStyle.fontSize`

`textStyle.fontWeight`

`textStyle.color`

`textStyle.lineHeight`

`textStyle.letterSpacing`

`distribution.mode`

`labelSize.mode`

`labelSize.width`

`labelSize.height`

`decoration.backgroundType`

`decoration.backgroundColor`

`decoration.gradientStart`

`decoration.gradientEnd`

`decoration.gradientAngle`

`decoration.borderEnabled`

`decoration.borderColor`

`decoration.borderWidth`

`decoration.borderStyle`

`decoration.borderRadius`

`decoration.paddingX`

`decoration.paddingY`

`decoration.shadowEnabled`

`decoration.shadowX`

`decoration.shadowY`

`decoration.shadowBlur`

`decoration.shadowColor`

`decoration.glowEnabled`

`decoration.glowColor`

`decoration.outlineEnabled`

`decoration.outlineColor`

`decoration.outlineWidth`

`decoration.rotation`

`decoration.scale`

`effect.enabled`

`effect.type`

`effect.trigger`

`effect.target`

`effect.animationUiNo`

`effect.targetUiNo`

`effect.targetPart`

`effect.direction`

`effect.axis`

`effect.speed`

`effect.distance`

`effect.loop`

`effect.loopWaitMs`

`effect.reducedMotion`

`hoverBorderEffect.enabled`

`hoverBorderEffect.effect`

`hoverBorderEffect.color`

`hoverBorderEffect.direction`

`hoverBorderEffect.speed`

`hoverBorderEffect.spinWidth`

`hoverBorderEffect.spinGlow`

`containerStyle.minWidth`

`containerStyle.maxWidth`

`containerStyle.paddingTop`

`containerStyle.paddingRight`

`containerStyle.paddingBottom`

`containerStyle.paddingLeft`

`containerStyle.backgroundColor`

`containerStyle.borderEnabled`

`containerStyle.borderColor`

`containerStyle.borderWidth`

`containerStyle.borderStyle`

`containerStyle.borderRadius`

`containerStyle.opacity`

`position` 全値