カラーフィールド

カテゴリ: テキスト入力
トークン: comp.field
レベル: 合成
構成要素: Field, Color input

概要

Web: tanrei-color-field; schedule
SwiftUI: TanreiColorField; radio_button_unchecked
Jetpack Compose: TanreiColorField; radio_button_unchecked
Flutter: TanreiColorField; radio_button_unchecked
React Native: ColorField; radio_button_unchecked

提供しないバリアント: tanrei: filled, outlined

生成元 docs/status/status.json, specs/color-field.spec.json

ピッカーのボタンがあるカラーフィールドと、プロダクトが色を受け付けなかったカラーフィールド

カラーフィールドは、ユーザーが色を値として設定する場所に使います。テーマのブランドカラーや、ラベルやカテゴリーの色などです。ユーザーは値を読み、入力し、ほかのツールから貼り付け、テキストの横の色見本で確かめます。フィールドは、同じバリアントとサイズのテキストフィールドと同じ見た目と寸法です。

構成要素は、フィールドとカラー入力欄です。フィールドは枠で、ラベル、必須または任意の印、補足、エラーを受け持ちます。カラー入力欄はコントロールで、ボックス、色見本、テキストとしての値、ピッカーのボタンを受け持ちます。カラーフィールドは自分では何も描かず、自分のトークンも持ちません。プロパティはすべて、2 つのどちらかのプロパティで、そのまま渡されます。

置かれた場所の幅いっぱいに広がるブロックで、ボックスもその幅いっぱいに広がります。自分の幅は持ちません。フィールドを狭くするには、置く場所を狭くします。すでにフィールドなので、フィールドの中には入れません。

ピッカーは自分では描きません。picker を付けると、末尾側のボタンがピッカーを求めます。ブラウザーのピッカーか、プロダクトが表示するサーフェスです。

Web では <tanrei-color-field> です。ほかのプラットフォームはまだ実装していません。

使い方

value は、番号記号と小文字の 16 進数 6 桁（#0f766e）か、色がないことを表す空文字列です。入力途中のテキストになることはありません。入力欄にあるものが色でない間、value は空です。

<form>
  <tanrei-color-field name="brand" label="ブランドカラー" value="#0f766e"
    required required-text="必須"
    supporting-text="6 桁の 16 進数で入力します。例：#0f766e"
    invalid-text="6 桁の 16 進数で入力してください。例：#0f766e"
    picker picker-label="色を選択"></tanrei-color-field>
</form>

<script type="module">
  import '@tanrei/web/components/color-field';

  const brand = document.querySelector('tanrei-color-field');
  // 値が変わりました。色か空文字列で、value はすでに新しい値です。
  brand.addEventListener('input', () => preview(brand.value));
  // ユーザーが変わった値を確定しました。フォーカスが離れたとき、Enter、ピッカーが閉じたときです。
  brand.addEventListener('change', () => save(brand.value));
  // 色ではないテキストが確定されました。フィールドはテキストを残し、invalidText を表示します。
  // detail.message が伝えるのも、この invalidText です。
  brand.addEventListener('entryerror', (e) => console.log(e.detail.text, e.detail.message));
  // プロダクト側のピッカーを表示するには、要求をキャンセルして開き、選ばれた色を value に設定します。
  brand.addEventListener('pickerrequest', (e) => {
    e.preventDefault();
    openMyPicker(e.detail.value).then((color) => (brand.value = color));
  });
</script>

import { ColorField } from '@tanrei/react';

<ColorField label="ブランドカラー" value={brand} picker pickerLabel="色を選択"
  invalidText="6 桁の 16 進数で入力してください。例：#0f766e"
  onChange={(event) => setBrand(event.currentTarget.value)} />

1 つ下の階層

同じフィールドを 2 つの構成要素から自分で書いても、見た目は同じで、支援技術にとっても、同じ名前、説明、状態を持つ同じテキストボックスになります。

<tanrei-field label="ブランドカラー" required required-text="必須"
  supporting-text="6 桁の 16 進数で入力します。例：#0f766e">
  <tanrei-color-input name="brand" value="#0f766e"
    invalid-text="6 桁の 16 進数で入力してください。例：#0f766e"
    picker picker-label="色を選択"></tanrei-color-input>
</tanrei-field>

同じフィールドを自分で書いたもの：フィールドの中のカラー入力欄

カラーフィールドにない並べ方が必要なときに、1 つ下の階層で書きます。

必要なもの	使うもの
ラベル、ボックス、補足、エラー	カラーフィールド
枠の中、ボックスの横か下に置く自分の要素	フィールドに、カラー入力欄と自分の要素を入れる
ボックスだけ。行や列がすでに色の名前を示している（パレットのトーン、テーブルのセル）	カラー入力欄を単独で使い、入力欄の `label` で名前を付ける

1 つ下の階層で変わるのは、何をどこに指定するかです。name と value はカラー入力欄に指定し、フォームに加わるコントロールもイベントが届く先も入力欄になります。label、error、disabled、必須の指定はフィールドに残り、フィールドがコントロールに渡します。入力欄自身のものは指定しません。カラーフィールドが行い、フィールドとカラー入力欄を自分で書いたものが行わないことは、ありません。

仕様

空のカラーフィールド、白、黒、大きいサイズ、無効。最後は、行が色の名前を示している場所に置いた、ボックスだけのカラー入力欄

フィールド

パーツ	内容
ラベル	コンテナの上（`stacked`）ではフィールドが描き、コンテナの中で浮く（`filled`、`outlined`）ときはカラー入力欄が描きます。描いても `labelHidden` で隠しても、アクセシブルネームになります
必須・任意の印	ラベルの後ろ。`required` では必須のタグ、アスタリスク、または印なし。`optional` では任意のタグ
色見本	コンテナの先頭側にある、値の見本。値の色そのもので塗った小さな正方形で、細い線で囲まれます。空のときは、その線だけです。コントロールではありません
入力欄	テキストとしての値。1 行で、収まらない分はスクロールします
ピッカーのボタン	`picker` を付けたとき。末尾側にあるアイコンだけのテキストボタンで、名前は `pickerLabel` です
補足テキスト	補足の 1 行。色見本を越えた、値のテキストが始まる位置から始まります。フィールドがエラーの間は、エラーテキストがその位置に代わって出ます（デザインシステムが両方を残す場合は、その下に）。`error` が true の間は `errorText`、確定したテキストが色でない間は `invalidText` で、`invalidText` が空のときは `errorText` です

3 つのバリアントと、3 つのサイズ small（32）、medium（40）、large（56）は、テキストフィールドのものです。既定のシステムが提供するのは stacked だけです。色見本は、テキストフィールドの先頭のアイコンと同じ場所に、同じ大きさで置かれます。そのため、先頭にアイコンのあるテキストフィールドの下にカラーフィールドを置くと、先頭側の端がそろいます。

色見本には何も混ぜません。ホバーの色も、エラーの色も、影もありません。ポインターの下で変わる見本は、間違った見本です。無効のときは、塗りを薄く描き、縁はそのままにします。

値とテキスト

いつ	起きること
ユーザーが入力、貼り付け、音声入力をする	拒否も書き直しもしません。テキスト全体を読みます。色であれば `value` はその色に、そうでなければ空になります。`value` が変わると `input` が発火します
フォーカスが離れる、または Enter	テキストを確定します。色は、値の書き方に書き直します。最後に確定した値と違っていれば `change` が発火します
確定したテキストが色ではない	テキストは残ります。フィールドはエラーになって `invalidText` を表示し、`entryerror` が発火します。エラーは次の編集で終わります
テキストが空	`value` は空になります。フィールドがそれをエラーにすることはありません
プロダクトが `value` を設定する	入力されていた内容にかかわらず、その色を表示します。イベントは発火しません

テキストは、前後の空白を除いて、ちょうど 6 桁の 16 進数であれば色として読みます。大文字でも小文字でも、番号記号があってもなくてもかまいません。0F766E、#0f766e、 #0F766E は、どれも #0f766e です。

それ以外はすべて、色ではありません。3 桁（#0f7）、8 桁（#0f766e80）、色の名前（teal）、関数の書き方（rgb(15, 118, 110)）などです。入力している間、3 桁は色になりません。6 桁を入力する途中でテキストが 3 桁を通るためです。テキストを確定すると、3 桁は CSS と同じく、各桁を重ねた 6 桁として読まれます（#0f7 は #00ff77 になります）。アルファも、広色域の色もありません。

ユーザーが入力している間は、何も報告しません。入力のエラーになるのは、確定したときだけです。

ピッカー

picker を付けると、フィールドの末尾側にボタンが出ます。ボタンを押すと、値を伝える pickerrequest が発火します。

プロダクト	起きること
何もしない	フィールドが、ブラウザーのカラーピッカーを表示します。選ぶたびに、ユーザーによる編集として扱います。テキスト、色見本、`input` です。ピッカーが閉じると `change` が発火し、フォーカスはピッカーのボタンにあります
要求をキャンセルする	フィールドは何も表示しません。プロダクトが、フィールドをアンカーにしたプロダクト側のサーフェスを開き、選ばれた色を `value` に設定します。そのサーフェスは、閉じるときにフォーカスをピッカーのボタンに戻します

ピッカーのボタンがあるときは、色見本を押すと、ボタンを押したときと同じくピッカーが開きます。入力欄にはフォーカスが移らず、キーボードで開く手段はボタンのままです。ボタンがないときは、フィールドのほかの場所を押したときと同じく、入力欄にフォーカスが移ります。

それぞれの構成要素が受け持つもの

フィールドから：プロパティの label、labelHidden、supportingText、errorText、error、disabled、required、optional、requiredMark、requiredText、optionalText。スロットの label-icon。トークンの comp.field.*。
カラー入力欄から：プロパティの variant、size、value、invalidText、picker、pickerLabel。イベントの input、change、pickerRequest、entryError。トークンは、ボックスが comp.input-box.*（すべての入力ボックスが読みます）、スウォッチが comp.color-input.*。

カラー入力欄は、自身の label、labelHidden、error、disabled を持っています。カラーフィールドが設定するのは、これらではありません。カラーフィールドの label はフィールドのもので、入力欄に名前を与え、Filled と Outlined のフィールドではボックスの中で浮き上がります。

トークン

カラーフィールドに自分のトークンはありません。ボックスはカラー入力欄のトークンを、行（ラベル、印、補足、エラー）はフィールドのトークンを、設定されている場所から読みます。下の表は、フィールドのトークンです。1 つのカラーフィールドだけを変えるには、構成要素のトークンをその要素に設定します。

<tanrei-color-field label="ブランドカラー"
  style="--tanrei-comp-field-label-gap: 12px"></tanrei-color-field>

構成要素

Web パッケージが描くフィクスチャ stacked-empty の上に描いています。

パーツ	説明
1 `field`	The Field: the label row with its glyph and its requirement mark, and the supporting row with the help and the error text. In a look whose input floats the label it draws no label row.
2 `color-input`	The color input, as the Field's one control: the box, the swatch, the value as text, the picker button, and the label that floats in the box in the looks that float one.

プロパティ

プロパティ	型	既定値	説明
`variant`	`stacked` \| `filled` \| `outlined`	`"stacked"`	The text input's three looks, so that a color input is drawn as the text inputs beside it. Stacked is a filled box that shows focus and error with a line inside its edge and draws no label: the label of the Field that frames it stands above it. Filled and outlined float the label inside the box. Use one style per form. A design system may leave some out (the Tanrei system ships stacked only) or add values. — Color input
`size`	`small` \| `medium` \| `large`	`"medium"`	Minimum height of the container: stacked 32 / 40 / 56, as tall as a Button of the same size, so that the box and a Button side by side in one row stand as tall as each other; filled and outlined 40 / 48 / 56, which hold the label that floats inside them. These are the text input's three sizes, small for a bar, a toolbar or a dense row of controls. The hit area always meets the minimum target. A design system may add values. — Color input
`value`	`string`	`""`	The color the input holds: a number sign and six hexadecimal digits in lowercase ("#0f766e"), an opaque sRGB color; or empty for no color. It is never a half-typed text: while the input holds something that is not a color, value is empty. — Color input What the color field reports as its own is the value its color input holds, in that value's own form (CLF-43, CLI-16, CLI-21).
`label`	`string`	`""`	Names the control, visibly and to assistive technology. Required, unless the control names itself (a checkbox or a switch with its own label): then leave it empty and the field adds only help and an error. — Field Names the color input. In a filled or outlined look the input draws it, floating in its box, and the Field draws no label row (FLD-25, CLI-15).
`labelHidden`	`boolean`	`false`	Does not draw the label, which stays the accessible name. For a control whose visible label is elsewhere (a table column, a toolbar). — Field Hides the label wherever it would be drawn: the Field's row, or the input's floating label (FLD-25).
`supportingText`	`string`	`""`	Help shown below the control and given to assistive technology as the control's description. While the field is in error it gives way to errorText, unless the design system keeps both (comp.field.error-text.placement append). — Field
`errorText`	`string`	`""`	Shown while error is true, in supportingText's place — or below it, which then stays, where the design system's comp.field.error-text.placement is append: what is wrong and how to put it right, in words. — Field
`error`	`boolean`	`false`	Puts the field in the error condition: the error text is drawn, the control is exposed as invalid and, where it has an error condition of its own, drawn in it. What a value means is the product's to validate; the field never sets this itself. — Field The Field puts its color input in the input's own error condition (FLD-8, CLI-9).
`disabled`	`boolean`	`false`	Disables the control and draws the frame as disabled. Disable a framed control here, not on the control, so that its label follows. — Field The Field disables its color input, the picker button with it (FLD-14, CLI-31); the color field is then left out of its form (CLF-44).
`required`	`boolean`	`false`	What the form asks of the control: true exposes it as required and draws the required mark beside the label. It never validates: a missing answer is the product's to report with error. — Field The Field exposes its color input as required (FLD-10, CLI-11).
`optional`	`boolean`	`false`	Draws the optional tag after the label and adds optionalText to the control's description, because assistive technology has no state for it. Ignored while required is true: a control is never both. — Field
`requiredMark`	`auto` \| `tag` \| `asterisk` \| `none`	`"auto"`	How this control shows that it is required: tag is a small filled Tag with requiredText, asterisk is "*" after the label, none draws nothing and keeps the semantics. Auto takes comp.field.requirement.mark, which follows sys.behavior.requirement-mark, the system's one answer. Ignored unless required is true. — Field
`requiredText`	`string`	`""`	The text of the required tag, in the product's language ("Required", "必須"). The product's: Tanrei has no word for it. Empty reads the product's words; with neither, FLD-24 says what is drawn. — Field
`optionalText`	`string`	`""`	The text of the optional tag, in the product's language ("Optional", "任意"); also read to assistive technology as part of the description. The product's: Tanrei has no word for it. Empty reads the product's words. — Field
`invalidText`	`string`	`""`	The words for an input committed with a text that is not a color ("Enter six hexadecimal digits, like #0f766e"), in the product's language: given to the Field that frames the input, which shows them as its error text (CLI-20). While it is empty that Field shows its own errorText. — Color input Shown by the Field, in its supporting row (FLD-28).
`picker`	`boolean`	`false`	Shows the picker button. Activated, it emits pickerRequest, and where the platform has a color picker of its own the input presents that picker unless the product cancelled the request. The input draws no picker surface itself. — Color input
`pickerLabel`	`string`	`""`	The accessible name of the picker button ("Choose color"). Required while picker is shown. — Color input

スロット

スロット	説明
`label-icon`	A glyph before the label. — Field

イベント

イベント	説明
`input`	The person changed the value — by an edit of the text that made it a color, another color or no color, or by a pick in the platform's picker; carries the new value. Not emitted when the product sets value, nor for an edit that leaves value as it was. — Color input
`change`	The person committed a changed value: focus left the input, the action key was pressed, or the platform's picker closed; carries the value. — Color input
`pickerRequest`	The person activated the picker button; carries the value. Cancelling it keeps the input from presenting the platform's picker: the product then presents its own surface and sets value to what was picked. — Color input
`entryError`	The person committed a text that is not empty and is not a color; carries the text as typed and invalidText, the words the input has for it (empty where the product gave none: the Field that frames the input then shows its own errorText). — Color input

状態

振る舞い

EARS 記法による要件です。各プラットフォームの実装は、この ID に対応するテストで検証されます。要件の原文は仕様ファイルのものをそのまま掲載しています。

ID	要件
`CLF-43`	THE color field SHALL be a Field that frames one color input, and nothing else. It SHALL give label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText and optionalText to its Field and variant, size, value, invalidText, picker and pickerLabel to its color input, each unchanged; SHALL hold the label-icon slot for its Field; and SHALL emit its color input's events as its own, each once. THE color field SHALL be as wide as the place it stands in, and its color input SHALL fill it: it is a block with no width of its own, as its Field is (FLD-1), around a control that fills the width it is given (CLI-44). Its value SHALL at every moment be the value its color input holds — a color in the value's own form, or the empty string (CLI-16) — and not the text the product set where the two differ (CLI-21). It SHALL draw no part of its own, hold no state of its own and have no token of its own: what it shows, how it behaves and what it exposes to assistive technology SHALL be exactly what that Field and that color input do when a product places the one in the other (FLD-1 to FLD-28; CLI-1 to CLI-44) — the label row and its requirement mark (FLD-2 to FLD-6), or the label that floats in the box with the Field's row left out (FLD-25, CLI-15, CLI-7); the supporting row, started at the value's text, after the swatch (FLD-7 to FLD-9, FLD-26, CLI-43); the name, the description and the states (FLD-10, FLD-11, FLD-14, CLI-11); and the entry error of a text that is not a color, shown in the Field's row (FLD-28, CLI-20).
`CLF-44`	WHERE the platform has forms (the web) THE color field SHALL be the one control the form sees: it SHALL take name, submit its color input's value, reset to the value it was first given, restore it on navigation, report to the form's constraint validation exactly what its color input would report there (CLI-11, CLI-20), and be left out WHILE disabled is true or a disabled group of the form holds it; its color input and its Field SHALL take no part in the form themselves. WHEN the action key asks for the form's submission (CLI-19) the form asked SHALL be the color field's own.
`CLF-45`	WHEN the color field is given focus — by the product, by a press on any part of it that FLD-12 or CLI-24 gives to the input, or by a form that reports its validity — THE color field SHALL pass the focus to the input of its color input, never to the picker button, and SHALL add no stop to the focus order: the stops inside it are its color input's, in that input's order (the input, then the picker button while it is shown, CLI-13). WHILE focus is anywhere inside it, the picker button included, THE color field SHALL count as focused for its Field, whose rows take their focused colors (FLD-13); the box takes its own only WHILE its input has focus (CLI-22). WHEN a picker the color input presented closes, focus SHALL be on the picker button (CLI-29), inside the color field.
`CLF-46`	IF the color field is placed in a Field THE color field SHALL in debug builds report that it is a field already and that the bare control is the color input, and both SHALL still render (FLD-15). WHILE it stands in a field group THE color field SHALL follow that group's disabled, through its own Field, and take nothing else from the group (FGR-20).
`CLF-47`	THE color field SHALL have no words of its own and SHALL read none: requiredText and optionalText are read by its Field (FLD-24), each from the instance's prop and then from the product's words; invalidText and pickerLabel are the instance's alone and are given to its color input as they are (CLI-42).
`CLF-48`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE color field SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the color field is invalid — except those the color field owns (aria-label, aria-labelledby, aria-disabled), which it SHALL move and not expose: its name is label (CLF-43). WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE color field SHALL take it off that element. WHEN the product sets an aria- attribute the color field owns THE color field SHALL report it in debug builds.

プラットフォーム別の名前対応

パリティは API が同一であることを意味しません。同じ契約を、各プラットフォームの流儀で表現します。

仕様	Web	SwiftUI	Jetpack Compose	Flutter	React Native
コンポーネント	`tanrei-color-field`	`TanreiColorField`	`TanreiColorField`	`TanreiColorField`	`ColorField`
`variant` · プロパティ	`variant`	`variant`	`variant`	`variant`	`variant`
`size` · プロパティ	`size`	`size`	`size`	`size`	`size`
`value` · プロパティ	`value`	`hex`	`value`	`controller`	`value`
`label` · プロパティ	`label`	`label`	`label`	`labelText`	`label`
`labelHidden` · プロパティ	`labelHidden`	`labelsHidden`	`labelHidden`	`labelHidden`	`labelHidden`
`supportingText` · プロパティ	`supportingText`	`supportingText`	`supportingText`	`helperText`	`supportingText`
`errorText` · プロパティ	`errorText`	`errorText`	`errorText`	`errorText`	`errorText`
`error` · プロパティ	`error`	`error`	`isError`	`isError`	`error`
`disabled` · プロパティ	`disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`required` · プロパティ	`required`	`isRequired`	`required`	`required`	`required`
`optional` · プロパティ	`optional`	`isOptional`	`optional`	`optional`	`optional`
`requiredMark` · プロパティ	`requiredMark`	`requiredMark`	`requiredMark`	`requiredMark`	`requiredMark`
`requiredText` · プロパティ	`requiredText`	`requiredText`	`requiredText`	`requiredText`	`requiredText`
`optionalText` · プロパティ	`optionalText`	`optionalText`	`optionalText`	`optionalText`	`optionalText`
`invalidText` · プロパティ	`invalidText`	`invalidText`	`invalidText`	`invalidText`	`invalidText`
`picker` · プロパティ	`picker`	`showsPicker`	`onPickerRequest`	`onPickerRequest`	`onPickerRequest`
`pickerLabel` · プロパティ	`pickerLabel`	`pickerLabel`	`pickerContentDescription`	`pickerSemanticLabel`	`pickerAccessibilityLabel`
`input` · イベント	`input`	`hex`	`onValueChange`	`onChanged`	`onValueChange`
`change` · イベント	`change`	`onCommit`	`onCommit`	`onCommit`	`onEndEditing`
`pickerRequest` · イベント	`pickerrequest`	`onPickerRequest`	`onPickerRequest`	`onPickerRequest`	`onPickerRequest`
`entryError` · イベント	`entryerror`	`onEntryError`	`onEntryError`	`onEntryError`	`onEntryError`
備考	The tag `tanrei-color-field`, the class `TanreiColorField`, the React name `ColorField`. The element is composed as every composed element on the web is (the web package's README, Composed elements); what follows is what is particular to it. Members: `<tanrei-field>` holding one `<tanrei-color-input>` in its default slot; the product places none. The host is `display: block`. Value member: `tanrei-color-input`. The host is the form's element — `name`, the value and its state, validity anchored on the input, reset to the `value` attribute, restore, `form`, a disabled fieldset — and the input inside has no `name`. Props, set as properties on the member each is from. On the Field: `label`, `labelHidden`, `supportingText`, `errorText`, `error`, `disabled`, `required`, `optional`, `requiredMark`, `requiredText`, `optionalText`. On the color input: `variant`, `size`, `value`, `invalidText`, `picker`, `pickerLabel`. Attributes are the members' own, kebab-case: `label-hidden`, `supporting-text`, `error-text`, `required-mark`, `required-text`, `optional-text`, `invalid-text`, `picker-label`. Props of one name on both members — `label`, `labelHidden`, `error`, `disabled` — are the Field's; the input's are never set by the element and reach the input through the connection. Events: `input`, `change`, `pickerrequest` and `entryerror` are the color input's own composed events and leave by themselves, with the host as their target and `value` already new; `pickerrequest` stays cancelable from outside, and the input reads the result of its own dispatch before it opens the browser's picker. None is stopped and none is copied. Their detail types are the member's, re-exported: `TanreiColorInputPickerRequestDetail`, `TanreiColorInputEntryErrorDetail`. The color input changes a value the product sets without an event — it holds `0F766E` as `#0f766e`, and a text that is not a color as empty (CLI-21) — so the host's `value` is the value member's at every moment, read back changed with no event (CLF-43). Slots: `label-icon` is passed to the Field by a slot element of the same name, rendered only while the host has a child for it. The element has no default slot. Parts: the member hosts are `field` and `color-input`. Exported from the Field: `label`, `label-icon`, `requirement-label`, `supporting-text`. Exported from the color input: `container`, `outline`, `active-indicator`, `label`, `requirement-label`, `swatch`, `input`, `picker-button`. Two names collide, `label` and `requirement-label`. Each is exported with its member's name before it, always (`field-label`, `color-input-label`, `field-requirement-label`, `color-input-requirement-label`), and under the bare name from both members as well, because the two are one thing to a person and are never drawn at once: FLD-25 is the sentence that holds it. Focus: the shadow root does not delegate. `focus()` and `blur()` call the color input's; a press on the label row focuses the input by FLD-12, a press on the box by CLI-24, and a press on the help does nothing. The browser's picker is opened by the color input from inside its own shadow root, in the user activation of the press on its picker button: two shadow roots deep, which `showPicker()` allows. The connection is the Field's with its control (FLD-25, FLD-26, FLD-28; CLI-43); the element takes no part in it. Parts and tokens of its own: none. The element writes no custom property: `--tanrei-comp-field-`, `--tanrei-comp-input-box-` and `--tanrei-comp-color-input-*` reach the members by inheritance, and one color field is set apart by setting any of them on the element. What its twin cannot do that it does: nothing. The twin: `<tanrei-field label="Brand color" required supporting-text="Six hexadecimal digits, like #0f766e."><tanrei-color-input name="brand" value="#0f766e" picker picker-label="Choose color"></tanrei-color-input></tanrei-field>`. Words: the element has none and reads none (CLF-47).	Not built on this platform yet: the color input as a view of its own and the color field as the Field around it, reading `comp.input-box`, `comp.color-input` and `comp.field` tokens. `TanreiColorField(_ label:, hex: Binding<String>, showsPicker:, pickerLabel:, onCommit:, onPickerRequest:, onEntryError:)`; `labelHidden` follows the `.labelsHidden()` environment and `disabled` follows `.disabled(_:)`. The text element, the system color picker and the swatch are the color input's and are in its note. The product's words are read by the Field from the `\.tanreiWords` environment value.	Not built on this platform yet: the color input as a composable of its own and the color field as the Field around it, reading `comp.input-box`, `comp.color-input` and `comp.field` tokens. Compose idiom, as `TextField`: `TanreiColorField(value, onValueChange, label, …)`; the caller keeps `value` (state hoisting), `enabled` is the inverse flag and `isError` keeps Compose's name. The picker button is shown when `onPickerRequest` is not null. The rest is the color input's and is in its note. The product's words are read by the Field from `LocalTanreiWords`.	Not built on this platform yet: the color input as a widget of its own and the color field as the Field around it, reading `comp.input-box`, `comp.color-input` and `comp.field` tokens. Flutter idiom, as `TextField` and `InputDecoration`: `labelText`, `helperText`, `errorText` and `enabled` keep Flutter's names, `enabled` being the inverse flag. `TanreiColorFormField` wraps it as a `FormField<String>`. The rest is the color input's and is in its note. The product's words are read by the Field from the `TanreiWords` inherited widget.	Not built on this platform yet: the color input as a component of its own and the color field as the Field around it, reading `comp.input-box`, `comp.color-input` and `comp.field` tokens. `<ColorField label="Brand color" value={value} onValueChange={setValue} />`. The rest is the color input's and is in its note. The product's words are read by the Field from the `TanreiWordsProvider` context.

トークン

トークン	参照先	解決値（ライト）
`--tanrei-comp-field-counter-gap`	`sys.space.space200`	16px
`--tanrei-comp-field-error-text-gap`	`sys.space.space50`	4px
`--tanrei-comp-field-error-text-placement`	—	0
`--tanrei-comp-field-label-icon-gap`	`sys.space.space100`	8px
`--tanrei-comp-field-label-icon-size`	`sys.icon.small`	20px
`--tanrei-comp-field-label-gap`	`sys.space.space100`	8px
`--tanrei-comp-field-motion-state-duration`	`sys.motion.role.state.default`	250ms
`--tanrei-comp-field-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-field-requirement-asterisk-gap`	`sys.space.space25`	2px
`--tanrei-comp-field-requirement-gap`	`sys.space.space100`	8px
`--tanrei-comp-field-requirement-mark`	`sys.behavior.requirement-mark`	0
`--tanrei-comp-field-standard-counter-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-disabled-counter-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-counter-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-label-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-required-asterisk-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-error-value-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-label-icon-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-required-asterisk-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-supporting-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-disabled-value-text-color`	—	#1b1b1b · 38%
`--tanrei-comp-field-standard-error-text-color`	`sys.color.error`	#cd262f
`--tanrei-comp-field-standard-error-counter-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-error-label-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-error-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-field-standard-error-required-asterisk-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-field-standard-error-supporting-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-error-value-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-focused-counter-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-text-color`	—	#cd262f
`--tanrei-comp-field-standard-focused-error-counter-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-label-icon-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-label-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-error-required-asterisk-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-error-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-error-value-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-label-icon-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-label-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-required-asterisk-color`	—	#1b1b1b
`--tanrei-comp-field-standard-focused-supporting-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-focused-value-text-color`	—	#4b4b4b
`--tanrei-comp-field-standard-label-icon-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-field-standard-required-asterisk-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-field-standard-supporting-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-standard-value-text-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-field-supporting-text-gap`	`sys.space.space50`	4px
`--tanrei-comp-field-value-text-gap`	`sys.space.space200`	16px
`--tanrei-comp-field-label-typescale`	`sys.typescale.label`	500 14px/1.4286
`--tanrei-comp-field-supporting-text-typescale`	`sys.typescale.label-small`	500 12px/1.3333
`--tanrei-comp-field-value-text-typescale`	`sys.typescale.label`	500 14px/1.4286

フィクスチャ

基準となる描画パターンです。全プラットフォームが同じ ID でスナップショットを撮り、結果を比較できるようにしています。

`variant: stacked` (27)

stacked-empty

label: Brand color

stacked-filled

value: #0f766e label: Brand color

stacked-large

size: large value: #0f766e label: Brand color

stacked-label-hidden

value: #0f766e label: Brand color labelHidden: true

stacked-supporting

value: #0f766e label: Brand color supportingText: Six hexadecimal digits, like #0f766e.

stacked-white

value: #ffffff label: Page background

stacked-black

value: #000000 label: Text

stacked-picker

value: #0f766e label: Brand color picker: true pickerLabel: Choose color

stacked-picker-empty

label: Brand color picker: true pickerLabel: Choose color

stacked-picker-large

size: large value: #0f766e label: Brand color picker: true pickerLabel: Choose color

stacked-error

value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true

stacked-error-picker

value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true picker: true pickerLabel: Choose color

stacked-disabled

value: #0f766e label: Brand color disabled: true

stacked-picker-disabled

value: #0f766e label: Brand color disabled: true picker: true pickerLabel: Choose color

stacked-label-icon

value: #0f766e label: Brand color slots: label-icon

stacked-required

value: #0f766e label: Brand color required: true requiredText: Required

stacked-optional

label: Accent color optional: true optionalText: Optional

stacked-required-asterisk

value: #0f766e label: Brand color required: true requiredMark: asterisk

stacked-required-label-icon

value: #0f766e label: Brand color required: true requiredText: Required slots: label-icon

stacked-required-error

label: Brand color errorText: Choose a brand color. error: true required: true requiredText: Required

stacked-required-disabled

value: #0f766e label: Brand color disabled: true required: true requiredText: Required

stacked-required-ja

value: #0f766e label: ブランドカラー required: true requiredText: 必須 picker: true pickerLabel: 色を選択

stacked-optional-ja

label: アクセントカラー supportingText: # と 6 桁の 16 進数で入力します。 optional: true optionalText: 任意

stacked-required-rtl

value: #0f766e label: لون العلامة required: true requiredText: مطلوب picker: true pickerLabel: اختيار اللون direction: rtl

stacked-error-rtl

value: #fde047 label: צבע המותג errorText: בהיר מדי לטקסט לבן. בחרו צבע כהה יותר. error: true direction: rtl slots: label-icon

ltr-label-rtl

value: #0f766e label: Brand color (HEX) supportingText: sRGB, 6 digits direction: rtl

long-label

value: #0f766e label: The color of the primary buttons, the li… supportingText: Six hexadecimal digits after a number si… required: true requiredText: Required

`variant: filled` (5)

filled-empty

variant: filled label: Brand color

filled-filled

variant: filled value: #0f766e label: Brand color

filled-picker

variant: filled value: #0f766e label: Brand color picker: true pickerLabel: Choose color

filled-error

variant: filled value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true

filled-disabled

variant: filled value: #0f766e label: Brand color disabled: true

`variant: outlined` (7)

outlined-empty

variant: outlined label: Brand color

outlined-filled

variant: outlined value: #0f766e label: Brand color

outlined-large

variant: outlined size: large value: #0f766e label: Brand color

outlined-picker

variant: outlined value: #0f766e label: Brand color picker: true pickerLabel: Choose color

outlined-error

variant: outlined value: #fde047 label: Brand color errorText: Too light for white text. Choose a darke… error: true

outlined-disabled

variant: outlined value: #0f766e label: Brand color disabled: true

outlined-required

variant: outlined value: #0f766e label: Brand color required: true requiredText: Required

生成元 specs/color-field.spec.json, tokens/comp/field.tokens.json, design/tokens/

Web での描き方の違い

要素のシャドウルートにあるのは、<tanrei-color-input> を入れた <tanrei-field> だけです。要素をインポートすると、両方が定義されます。
カラーフィールドは、フォームに関連付けられる要素です。name を受け取り、value を送信します。色か、空文字列です。リセットでは value 属性に戻ります。required で value が空の間は値の欠落を、入力のエラーが続く間は不正な入力を、フォームに報告します。2 つの構成要素がフォームに項目を加えることはありません。
value は、いつでもカラー入力欄のものです。0F766E と設定した値は #0f766e として、色ではない値は空文字列として読み返されます。
input と change は detail のないイベントなので、value は要素から読みます。pickerrequest と entryerror は CustomEvent で、前者は detail.value を、後者は detail.text と detail.message を持ちます。どれもカラー入力欄自身のイベントで、ターゲットはこの要素です。detail.message は invalidText で、指定していなければ空です。フィールドが代わりに errorText を表示している間も空です。
パーツ: field と color-input が 2 つの構成要素です。構成要素のパーツは、1 つ下の階層と同じ名前です。label-icon、supporting-text と、container、outline、active-indicator、swatch、input、picker-button です。label と requirement-label は、どちらの構成要素が描いていても、描かれているものを指します。field-label、color-input-label、field-requirement-label、color-input-requirement-label は、片方の構成要素のものを指します。
要素自体にはフォーカスが移らず、ロールもありません。focus() は入力欄に移り、ピッカーのボタンには移りません。ラベルの行、ボックス、色見本（ピッカーのボタンがないとき）、浮き上がるラベルを押すと、入力欄にフォーカスが移ります。補足やエラーテキストを押しても、何も起きません。
ラベルと補足は、ピッカーのボタンを含め、フィールドの中のどこかにフォーカスがある間、フォーカス時の色になります。ボックスがフォーカス時の見た目になるのは、入力欄にフォーカスがある間だけです。
名前は label で付けます。ラベルを描かないときは label-hidden を付けます。aria-label は使いません。この要素では何の名前にもなりません。
Tanrei は言葉を同梱しません。requiredText と optionalText は、指定するまで空です。requiredText のない必須のフィールドは、タグが置かれる場所にアスタリスクを表示します。
ブラウザーのピッカーは、ブラウザーによって違います。Chromium ではページのポップアップ、Firefox と Safari ではシステムの色のウィンドウです。見た目、位置、キーは、ブラウザーのものです。
全角の文字で書いたテキスト（＃０ｆ７６６ｅ）は、色として読みません。
要素が定義されるまでは、大きさがありません。高さを確保してください。

ガイドライン