パスワード入力（表示切り替え）Password input

「パスワード入力（表示切り替え）（Password input）」を実装してください。

## これは何か
入れた文字が●で伏せられる入力欄の横に、目のアイコンの「表示する」ボタンが付いた部品。押すと打った文字が見え、もう一度押すと伏せ字に戻る。

## 使いどころ
- ログイン・会員登録・パスワード変更の画面
- スマートフォンのように打ち間違いやすい環境で、送信前に自分の入力を確かめてもらいたいとき

## 実装の要件
- label + 補足文 + input[type=password][autocomplete][spellcheck=false][autocapitalize=none] + button[type=button][aria-controls]。ボタンは入力欄の外に並べる（欄の中に重ねると、パスワード管理ツールのアイコンや長い値と重なる）
- ボタンを押したら input の type を password ⇔ text に替え、ボタンの文言・aria-label・アイコン（fa-eye ⇔ fa-eye-slash）を替える。フォーカスはボタンに残す
- Caps Lock の警告は keydown / keyup で event.getModifierState("CapsLock") を見て出し入れする。出しているときだけ警告の id を input の aria-describedby に入れる（隠した要素でも aria-describedby で指すと読み上げられるため）
- ページに2つ以上置くときは、ボタンの aria-label を「新しいパスワードを表示する」のように欄ごとに変える
- submit のときに type を password に戻してから送る
- テキストフィールドとの違い: 値を伏せ字で出し、表示・非表示を切り替えるボタンを持つ。普通の入力欄に type="password" を付けただけでは切り替えは付かない
- 貼り付けを禁止しない。パスワード管理ツールから貼る人が入れられなくなる（GOV.UK Design System も必ず貼り付けを許すよう求めている）
- 確認のためにもう1欄「パスワード（確認）」を足すより、表示切り替えを付けるほうがよい。GOV.UK Design System も、表示切り替えがあれば確認欄は要らないと判断して外している
- フォームを送信するときは type を password に戻す。text のまま送ると、ブラウザが入力履歴として覚えることがある
- 条件（文字数・使える文字）は入力前に補足文で見せる。送信後のエラーで初めて知らせない

## アクセシビリティの要件
- ボタンは button 要素にし、見える文言（「表示する」／「隠す」）と aria-label（「パスワードを表示する」／「パスワードを隠す」）を押すたびに一緒に替える。aria-label には見える文言を含める（2.5.3 ラベルを含む名前 (name)）
- 文言で状態を伝えるので aria-pressed は付けない。両方付けると「押されている・隠す」のように状態が二重に読まれる
- 切り替えた結果は、見た目に出さない aria-live="polite" の領域に「パスワードが見えています」のように書いて知らせる
- autocomplete は、ログインでは current-password、登録や変更の新しいパスワードでは new-password にする（1.3.5 入力目的の特定）
- 貼り付けと自動入力を妨げない（3.3.8 アクセシブルな認証（最低限））

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-password-input">
  <label class="x-password-input__l" for="x-password-input-i">パスワード</label>
  <p class="x-password-input__h" id="x-password-input-h">8文字以上。英字と数字を両方入れてください</p>
  <div class="x-password-input__f">
    <!-- 貼り付けを止めない。パスワード管理ツールから貼る人がいる -->
    <input class="x-password-input__i" id="x-password-input-i" type="password" name="password"
           value="sample-pass" autocomplete="current-password" spellcheck="false"
           autocapitalize="none" aria-describedby="x-password-input-h x-password-input-caps">
    <!-- 押すたびに JS で type を password ⇔ text に替え、文言と aria-label も「表示する」⇔「隠す」に替える -->
    <button class="x-password-input__t" type="button" aria-controls="x-password-input-i"
            aria-label="パスワードを表示する">
      <i class="fa-regular fa-eye" aria-hidden="true"></i>表示する
    </button>
  </div>
  <!-- Caps Lock がオンのときだけ出す（keydown / keyup の getModifierState("CapsLock") で判定） -->
  <p class="x-password-input__w" id="x-password-input-caps">
    <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>Caps Lock がオンになっています
  </p>
  <!-- 切り替えた結果を知らせる場所。中身は JS で「パスワードが見えています」などに書き換える -->
  <span class="x-password-input__sr" aria-live="polite"></span>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-password-input,
.x-password-input *:not([class*="fa-"]),
.x-password-input *:not([class*="fa-"])::before,
.x-password-input *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-password-input {
  width: 280px;
  max-width: 100%;
  color: #1b2028;
}
.x-password-input__l {
  display: block;
  font-size: 12px;
  font-weight: 700;
}
.x-password-input__h {
  margin: 2px 0 6px;
  color: #5b6472;
  font-size: 11px;
}
.x-password-input__f {
  display: flex;
  gap: 6px;
}
.x-password-input__i {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
}
/* ボタンは入力欄の外に並べる。欄の中に重ねると、長い値やパスワード管理ツールのアイコンと重なる */
.x-password-input__t {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.x-password-input__t:hover {
  background: #eff4ff;
}
.x-password-input__i:focus-visible,
.x-password-input__t:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
.x-password-input__w {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
  color: #92400e;
  font-size: 11.5px;
  font-weight: 700;
}
/* 見た目には出さず、読み上げにだけ届ける */
.x-password-input__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。