phantom gap を除去した `<wa-date-input>` と `<wa-time-input>` のスタイル修正

この PR は、空の start/end スロットが余計な間隔を生じさせていた <wa-date-input> と <wa-time-input> の左端揃えを修正し、他のフォームコントロールとビジュアルを統一します。

背景

Issue #2527 で報告されたように、<wa-date-input> と <wa-time-input> の選択された値が、同一レベルの <wa-select> や <wa-input> と比較して左側に数ピクセルずれて表示されるという phantom gap が発生していました。原因は、コンポーネント内部のスロット構造が空の場合でも CSS の gap が適用され、余分なスペースが挿入されていたことです。この視覚的不整合は、フォーム全体の一貫性を損なうため修正が求められました。

したがって、スタイルレベルで余計な間隔を削除し、スロットが空でも他のコントロールと同一の開始位置になるように調整する方針が採られました。

技術的な変更

修正は packages/webawesome/src/components/time-input/time-input.styles.ts の CSS を直接変更することで実現されています。具体的には、コンテナ要素から gap: 0.25em; を除去し、代わりにクリアボタンと拡張ボタンに margin-inline-start: 0.25em; を付与して、空スロットが余計なスペースを生成しないようにしています。この変更により、ボタンと入力値の間の視覚的な間隔は維持されつつ、不要な phantom gap が排除されます。

@@ -150,7 +150,6 @@ export default css`
     width: 100%;
     min-width: 0;
     align-items: center;
-    gap: 0.25em;
     min-height: var(--wa-form-control-height);
     background-color: var(--wa-form-control-background-color);
     border-color: var(--wa-form-control-border-color);
@@ -283,6 +282,8 @@ export default css`
     cursor: pointer;
     color: var(--wa-color-text-quiet);
     font: inherit;
+    /* Margin separates the button from the value so empty start/end slots don't add a phantom gap. */
+    margin-inline-start: 0.25em;
     padding: 0.25em;
     border-radius: var(--wa-border-radius-s);
     transition: color var(--wa-transition-fast);

CSS のみの調整であるため、コンポーネントの JavaScript ロジックや公開 API には影響がなく、既存の利用者はそのまま動作を継続できます。

設計判断

本修正では、スロット構造を変更せずに CSS のプロパティでレイアウトを調整する方針が選択されました。gap プロパティは子要素全体に均等な間隔を与える便利な手段ですが、空スロットが存在するケースでは意図しない余白を生むことが判明したため、対象要素に限定した margin-inline-start に置き換えることで最小限の侵入性に抑えています。このアプローチは、デザインの一貫性を保ちつつ、将来的に同様のスロットベースレイアウトで生じうる余計な間隔への対策パターンとして再利用可能です。

結果として、コンポーネントの外観が他のフォームコントロールと揃い、ユーザー体験の統一感が向上しました。

まとめ

空の start/end スロットが引き起こす phantom gap を CSS の gap 削除と margin-inline-start 追加で解消し、<wa-date-input> と <wa-time-input> が他のフォームコントロールと同一の左端揃えになるように調整しました。この変更は視覚的な一貫性を高めると同時に、コンポーネントの API を維持したまま実装できた点が評価されます。