パスワード強度メーター

<%# Markup for the password-strength demo.
    The controller scores the field with a lightweight zero-dependency heuristic and
    drives the meter (aria-valuenow), the data-strength token, the 0–1 fill on the
    --stimeo--password-strength custom property, and the visible readout — all on the
    keystroke that caused them. The input sits inside the controller so its data-action
    input->...#evaluate binds directly. Level labels are localized via the levels value;
    demo.css colors the bar by the locale-independent data-strength band, so the look
    never depends on the (translated) label text.

    The readout is plain visible output, not a live region: the settled level is
    debounced into the shared stimeo--announcer your app seats once, in its layout.
    Announcing is opt-in through announce-text-value and only fires when the level
    actually changes. The library writes no CSS. %>
<% levels = t("components.password_strength.demo.levels").to_json %>
<% announcement = t("components.password_strength.demo.announcement") %>
<div
  class="password-strength"
  data-controller="stimeo--password-strength"
  data-stimeo--password-strength-levels-value="<%= levels %>"
  data-stimeo--password-strength-announce-text-value="<%= announcement %>">
  <label class="password-strength__label" for="password-strength-demo-input">
    <%= t("components.password_strength.demo.label") %>
  </label>
  <input
    class="password-strength__input"
    id="password-strength-demo-input"
    type="password"
    autocomplete="new-password"
    aria-describedby="password-strength-demo-readout"
    data-stimeo--password-strength-target="input"
    data-action="input->stimeo--password-strength#evaluate">
  <div
    class="password-strength__meter"
    role="meter"
    aria-valuemin="0"
    aria-valuemax="4"
    aria-valuenow="0"
    aria-label="<%= t('components.password_strength.demo.meter_label') %>"
    data-stimeo--password-strength-target="meter">
    <span class="password-strength__bar"></span>
  </div>
  <span
    class="password-strength__readout"
    id="password-strength-demo-readout"
    data-stimeo--password-strength-target="label"></span>
</div>
<p class="password-strength__hint"><%= t("components.password_strength.demo.hint") %></p>

/*
 * Presentation-only styles for the password-strength demo.
 * The bar width comes from --stimeo--password-strength (0–1); its color comes from
 * the data-strength band (weak…strong), which is locale-independent — so the look
 * holds even though the visible level label is localized via the levels value.
 */

.password-strength {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.password-strength__label {
  font-weight: 600;
}

.password-strength__input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  background: var(--bg);
  font: inherit;
  color: var(--fg);
}

.password-strength__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.password-strength__meter {
  height: 0.5rem;
  border-radius: 0.375rem;
  background: var(--surface-subtle);
  overflow: hidden;
}

.password-strength__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: calc(var(--stimeo--password-strength, 0) * 100%);
  background: var(--border-interactive);
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

/* Color bands keyed on the locale-independent data-strength token (weak → strong). */
.password-strength[data-strength="weak"] .password-strength__bar {
  background: var(--danger-500);
}

.password-strength[data-strength="fair"] .password-strength__bar {
  background: var(--amber-500);
}

.password-strength[data-strength="good"] .password-strength__bar {
  background: var(--amber-500);
}

.password-strength[data-strength="strong"] .password-strength__bar {
  background: var(--leaf-500);
}

.password-strength__readout {
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.password-strength__hint {
  margin: 0.25rem 0 0;
  max-width: 32rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .password-strength__bar {
    transition: none;
  }
}