Known Date と Time Picker コンポーネントの追加と関連インフラの拡充
Web Awesome 3.8 で、日付入力を分割フィールドで扱う <wa-known-date> と、ロケール対応のセグメント化時間入力 <wa-time-picker> が本体に実装されました。これにより、ユーザーが既知の日付や時間を正確に入力できる UI が標準コンポーネントとして提供され、国際化・アクセシビリティも同時に強化されています。
背景
既存の <wa-date-input> はポップアップカレンダー中心の UI であり、既に分かっている日付（例: 生年月日やパスポート発行日）を入力させるユースケースに適していませんでした。加えて、時間入力は高度なロケール表記（12 時制／24 時制、秒・AM/PM の有無）を統一的に扱う仕組みが欠如していました。これらのギャップを埋めるために、本 PR は 新規ピッカーコンポーネント と 共通セグメントコントローラ を導入し、ドキュメント・サイドバー・翻訳まで一括で更新しています。
技術的な変更
新コンポーネント実装
WaKnownDate は 3 つのテキストフィールド（day, month, year）をロケールに応じた順序で配置し、value プロパティは ISO 8601 形式の文字列 (YYYY-MM-DD) で保持します。
+export class WaKnownDate extends WebAwesomeFormAssociatedElement { ... }
内部ロジックは field-order.ts で Intl.DateTimeFormat.formatToParts を利用し、localeFieldOrder(locale) が ['day','month','year'] などの順序配列を返すことで実装されています。
+export function localeFieldOrder(locale: string): SegmentField[] { ... }
入力値の妥当性は PartialDateValidator が担当し、部分入力や不正な日付に対して valueMissing や badInput を返します。
+export const PartialDateValidator = (): Validator => { ... }
WaTimePicker は時間セグメント（hour, minute, optional second, optional dayPeriod）をロケール順に配置し、<wa-popup> と連動したカラム式選択 UI を提供します。時間モデルは time-segments.ts に純粋関数として切り出され、wireToTimeSegments / timeSegmentsToWire が 24 時制のワイヤ形式 (HH:mm[:ss]) と UI 表示形式の相互変換を行います。
+export interface TimeSegments { hour: number | null; minute: number | null; ... }
共通 SegmentedFieldController
両コンポーネントは SegmentedFieldController を利用して、キー入力、フォーカスローテーション、バッファ管理、RTL 反転等の汎用ロジックを共有します。コントローラは SegmentLayout（ロケール由来の順序・リテラル）をキャッシュし、テスト用に clearTimeSegmentLayoutCache() が提供されています。
+export class SegmentedFieldController implements ReactiveController { ... }
i18n と UI 微調整
- 翻訳ファイル (
ar.ts,cs.ts,da.ts,de-ch.ts) にam、chooseDate、closeTimePickerなどのキーが追加され、ピッカーのアクセシビリティヘルプやボタンラベルがローカライズされました。 - アイコン SVG ライブラリに
calendarとclockが追加入稿され、icon.styles.tsのsvg { fill: currentColor; }によりテーマ色が適用されます。 -
cspell.jsonにbday、pass-throughs、spinbuttonなどの新語が登録され、スペルチェックが正しく通過します。
ドキュメント・ナビゲーション更新
サイドバー (sidebar.njk) に Date Picker、Known Date、Time Picker のリンクが追加され、known-date.md と time-picker.md が新規作成されました。component.njk のプロパティ表示ロジックもエスケープ処理に変更され、HTML エスケープが安全に行われます。
設計判断
コンポーネントの粒度と再利用性
WaKnownDate と WaTimePicker は 「セグメント化」 という共通パターンを抽象化し、SegmentedFieldController に集約しました。この設計により、将来的に別のピッカー（例: <wa-month-picker>）を実装する際にロジック重複を回避でき、テストコードもコントローラ単体で網羅可能です。
ロケール依存のフィールド順序
ロケール順序を 実行時に Intl.DateTimeFormat.formatToParts でプローブ する方針は、ブラウザ実装差分を吸収しつつ正確な順序を取得できる点で妥当です。キャッシュを導入し、同一ロケールでの余計なプローブを防いでパフォーマンスを確保しています。
バリデーション戦略
部分入力に対しては PartialDateValidator が UI レベルで明示的なエラーメッセージ（incompleteDate）を提供し、HTML の required と併用しても二重警告が出ないように設計されています。これにより、既知の日付入力に特化した UX が実現されています。
まとめ
今回の PR は 分割入力コンポーネントと汎用セグメントコントローラ を本体に統合し、ロケール対応・アクセシビリティ・国際化 を同時に拡充しました。新規 UI が追加されたことで、ユーザーは既知の日付や時間を正確に入力でき、開発者は共通ロジックを再利用して拡張が容易になるという二重の利点が得られます。