パスワード表示切替
stimeo--password-reveal
パスワード入力の表示 / 非表示を、フォーカスを保ったまま切り替える。
stimeo--password-reveal コントローラは入力の type を password ↔ text に切り替え、トグルボタンの aria-pressed と data-state を同期します。アクセシブル名は状態に依存しない(Show password)まま、状態は aria-pressed で表します。入力自身がフォーカスされていた場合は type 変更をまたいでフォーカスとキャレットを復元し、トグルボタンがフォーカスを持つ場合はそのまま保持します。任意の autoHide で一定時間後に再マスクできます。ライブラリは挙動のみを提供し、アイコン描画はこの Playground が持ちます。
キーボード操作
| キー | 動作 |
|---|---|
| Enter / Space | 表示 / マスクを切り替える(ネイティブボタン)。 |
<%# Markup for the password-reveal demo.
The toggle switches the input's type between password ↔ text and syncs aria-pressed /
data-state. If the input was focused, focus and caret position are preserved. The eye
icon rendering switches on aria-pressed in demo.css. %>
<div class="password-reveal" data-controller="stimeo--password-reveal">
<label class="password-reveal__label" for="password-reveal-demo-input">
<%= t("components.password_reveal.demo.label") %>
</label>
<div class="password-reveal__field">
<input
class="password-reveal__input"
id="password-reveal-demo-input"
type="password"
value="hunter2"
autocomplete="current-password"
data-stimeo--password-reveal-target="input">
<button
class="password-reveal__toggle"
type="button"
aria-pressed="false"
aria-label="<%= t('components.password_reveal.demo.show') %>"
data-stimeo--password-reveal-target="toggle"
data-action="click->stimeo--password-reveal#toggle">
<span class="password-reveal__icon" aria-hidden="true"></span>
</button>
</div>
</div>
/*
* Presentation-only styles for the password-reveal demo.
* The open/closed eye icon switches on the toggle's aria-pressed (set by the library).
*/
.password-reveal {
max-width: 20rem;
}
.password-reveal__label {
display: block;
margin-bottom: 0.25rem;
font-weight: 600;
}
.password-reveal__field {
display: flex;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: 0.375rem;
background: var(--surface-card);
}
.password-reveal__input {
flex: 1;
padding: 0.5rem 0.75rem;
border: 0;
background: transparent;
font: inherit;
color: var(--fg);
}
.password-reveal__input:focus {
outline: none;
}
.password-reveal__field:focus-within {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.password-reveal__toggle {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: 0;
background: transparent;
cursor: pointer;
color: var(--color-text-muted);
}
/* While masked (aria-pressed="false") show the eye icon; while revealed, the eye with a slash. */
.password-reveal__icon::before {
content: "👁";
font-size: 1.1rem;
}
.password-reveal__toggle[aria-pressed="true"] .password-reveal__icon::before {
content: "🙈";
}
このデモに固有の消費側 JS はありません(挙動はコントローラが担います)。
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--password-reveal"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
input
必須
|
type が password と text で切り替わるパスワード入力欄。 | data-stimeo--password-reveal-target="input" |
toggle
必須
|
表示・非表示ボタン。aria-pressed が表示状態を表す。 |
data-stimeo--password-reveal-target="toggle" |
値(Values)
| 名前 | 説明 | 属性 |
|---|---|---|
autoHide
|
表示後に再マスクするまでの遅延(ms)。0(既定)で無効。 | data-stimeo--password-reveal-auto-hide-value |
アクション
| 名前 | 説明 | アクション |
|---|---|---|
toggle
|
入力をマスク/表示で切り替え、フォーカスとキャレットを維持する。 | stimeo--password-reveal#toggle |
イベント
| 名前 | 説明 | イベント |
|---|---|---|
toggle
|
切り替えごとに発火。detail に visible 真偽値を載せる。 | stimeo--password-reveal:toggle |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
aria-pressed |
トグル | 表示中で "true"、マスク中で "false"。 |
data-state |
ルート要素 | "hidden" / "visible"。 |
type |
入力 | "password" / "text"。 |