Password Reveal

<%# 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: "🙈";
}