Color Picker

色を選択するための高度なコンポーネントです。2Dパレットでの直感的な選択、色相・透明度（アルファ）スライダー、直接のカラーコード入力、プリセットカラーからの選択など、多様な操作方法を提供します。

Basic

デフォルト設定では、HEXフォーマットで色が管理され、透明度スライダーとカラー入力欄が表示されます。

Presets

presets プロパティを使用して、事前に定義された推奨色のパレットを提供できます。ブランドカラーの強制などに役立ちます。

Simple（アルファ・入力なし）

透明度の変更や直接入力が不要な場合は、これらを非表示にしてコンパクトな UI を提供できます。

RGB Format

format 属性を指定することで、出力と入力の形式を RGB や HSL に切り替えることができます。

Disabled

disabled プロパティでカラーピッカーを無効化します。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`Pointer Events`	ドラッグ操作	全ver	全ver	全ver	Baseline
`Touch Events`	タッチ対応	全ver	全ver	全ver	Baseline

💡 標準的な DOM イベントと CSS のみを使用しており、モダンブラウザで問題なく動作します。

アクセシビリティ

WAI-ARIA:
- トリガーはネイティブの <button> 要素で、aria-label に triggerLabel Prop（既定値 Open color picker）、aria-haspopup="dialog"、開閉状態を示す aria-expanded、対象パネルを指す aria-controls が設定されます。disabled 時は disabled 属性が付与されます。
- 開いたパネルは role="dialog" を持ち、aria-label には triggerLabel の値が設定されます。
- 色相スライダーは role="slider" を持ち、aria-label（hueLabel Prop、既定 色相）、aria-valuemin="0"、aria-valuemax="360"、現在の色相を示す aria-valuenow が設定されます。
- アルファスライダー（showAlpha が真のとき表示）も同様に role="slider" を持ち、aria-label（alphaLabel Prop、既定 透明度）、aria-valuemin="0"、aria-valuemax="100"、aria-valuenow が設定されます。
- カラー値の入力欄（showInput が真のとき表示）には現在のフォーマットを含む aria-label（例: Color value (hex)）が設定されます。
- プリセットカラーの各スウォッチはネイティブの <button> で、aria-label と title にその色値が設定されます。
- ラベル（label Prop）を指定した場合は <label> がトリガーボタンの id と htmlFor で関連付けられます。
キーボードナビゲーション:
- トリガーボタンは Tab でフォーカスでき、Enter / Space でパネルを開閉できます。
- 色相スライダー・アルファスライダーはともに tabindex="0" でフォーカス可能で、ArrowRight / ArrowUp で増加、ArrowLeft / ArrowDown で減少、Home で最小値、End で最大値に移動できます。
- パネルが開いている間は、Escape キーでパネルを閉じることができます。また、コンポーネント外をクリックした場合も閉じます。
- 注: 2D パレット（彩度・明度の選択領域）はマウス／タッチのドラッグ操作で動作し、専用のキーボード操作は実装されていません。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`alphaLabel`	`alpha-label`	アルファスライダーの aria-label	`string`	`'透明度'`
`disabled`	`disabled`	無効状態	`boolean`	`false`
`format`	`format`	色フォーマット	`"hex" \| "hsl" \| "rgb"`	`'hex'`
`hueLabel`	`hue-label`	色相スライダーの aria-label	`string`	`'色相'`
`label`	`label`	ラベル	`string`	`''`
`name`	`name`	フォーム識別用の name 属性	`string`	`undefined`
`presets`	`presets`	プリセットカラー（JSON文字列 or 配列）	`PresetColor[] \| string`	`'[]'`
`showAlpha`	`show-alpha`	アルファスライダーを表示するか	`boolean`	`true`
`showInput`	`show-input`	カラー入力を表示するか	`boolean`	`true`
`size`	`size`	サイズ	`"lg" \| "md" \| "sm"`	`'md'`
`triggerLabel`	`trigger-label`	トリガーのアクセシビリティラベル	`string`	`'Open color picker'`
`value`	`value`	現在の色値	`string`	`'#1677ff'`

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	色が変更された時	`CustomEvent<{ value: string; format: string; }>`
`juiClose`	パネルが閉じた時	`CustomEvent<void>`
`juiOpen`	パネルが開いた時	`CustomEvent<void>`

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
`"alpha-slider"`	アルファスライダー
`"hue-slider"`	色相スライダー
`"input"`	カラー入力欄
`"palette"`	2Dカラーパレット
`"panel"`	カラーパネル
`"presets"`	プリセットカラーエリア
`"trigger"`	トリガースウォッチ

Built with StencilJS