テキストエリアのオーバーフロー時に垂直余白を追加

<wa-textarea> と標準 textarea において、入力が可視行数を超えると最終行が下端ボーダーに密着し視認性が低下していました。今回の変更は CSS の scroll‑padding‑block を導入し、オーバーフロー時のテキスト位置をボーダーから一定距離確保することで改善します。

背景

従来、テキストエリア内部の最終行がスクロール領域の下端に接触し、ユーザーが入力内容を確認しづらい状態が発生していました。デモ (https://codepen.io/roydukkey/pen/ByQRdMB?editors=1100) では、行数が増えると文字列がボーダーにくっつく様子が確認できます。この UI の不整合は、操作ミスや入力ミスのリスクを高める要因となっていました。

技術的な変更

scroll‑padding‑block プロパティをテキストエリアのスタイルに追加し、--wa-form-control-padding-block カスタムトークンをそのまま使用しました。これにより、既存のパディング計算と整合性を保ちながら、スクロール時の下端余白が確保されます。

変更点（textarea.styles.ts）

@@
     color: inherit;
     cursor: inherit;
+    scroll-padding-block: var(--wa-form-control-padding-block);
     padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */

変更点（native.css）

@@
   textarea {
     height: auto;
     min-height: var(--wa-form-control-height);
+    scroll-padding-block: var(--wa-form-control-padding-block);
     padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */

さらに、変更内容は packages/webawesome/docs/docs/resources/changelog.md に追記され、リリースノートとして公開されています。

@@ -40,6 +40,7 @@
  - Synced hardcoded transitions in `<wa-copy-button>`, `<wa-select>`, `<wa-combobox>`, and `<wa-toast-item>` with `--wa-transition-*` tokens
 +- Improved the vertical placement of content within `<wa-textarea>` and `textarea` when the content overflows the control [pr:2424]
  - Updated Native Styles to reset the `list-style`, `margin`, and `padding` of `menu` elements [discuss:2436]

設計判断

scroll‑padding‑block は、スクロール領域の内部余白を CSS だけで制御できる標準プロパティです。既存の --wa-form-control-padding-block トークンを再利用したことで、デザインシステムとの一貫性が保たれ、追加コードは 1 行に留まりました。JavaScript によるスクロール位置の手動調整は不要となり、レンダリングコストと保守負荷の増加を回避できました。

まとめ

<wa-textarea> と標準 textarea に scroll‑padding‑block: var(--wa-form-control-padding-block) を導入し、オーバーフロー時のテキストが下端ボーダーから離れて表示されるよう改善しました。トークンベースの最小侵入実装により、他コンポーネントへの副作用はなく、ユーザー視認性が向上します。