{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input",
  "type": "registry:ui",
  "title": "Password field (MIAN)",
  "description": "A password input with a show/hide toggle and an optional four-step strength meter.",
  "categories": [
    "forms",
    "password",
    "show password",
    "reveal",
    "strength meter"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/password-input.css",
      "type": "registry:file",
      "target": "mian/components/password-input.css",
      "content": ".mn-password { position: relative; }\n.mn-password-toggle { display: grid; place-items: center; width: var(--mn-size-md); flex: none; border: 0; background: none; color: var(--mn-muted); cursor: pointer; }\n.mn-password-toggle:hover { color: var(--mn-fg); }\n.mn-password-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); border-radius: var(--mn-radius-field); }\n.mn-password-toggle svg { width: 1.05rem; height: 1.05rem; }\n.mn-password-toggle .mn-password-hide, .mn-password-toggle[aria-pressed=\"true\"] .mn-password-show { display: none; }\n.mn-password-toggle[aria-pressed=\"true\"] .mn-password-hide { display: contents; }\n.mn-password-meter { --_s: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: .5rem; }\n.mn-password-meter > i { height: 4px; border-radius: 999px; background: var(--mn-surface-2); transition: background-color var(--mn-duration) var(--mn-ease); }\n.mn-password-meter > i:nth-child(-n + 4) { background: var(--mn-surface-2); }\n.mn-password-meter[data-score=\"1\"] > i:nth-child(-n + 1) { background: var(--mn-danger); }\n.mn-password-meter[data-score=\"2\"] > i:nth-child(-n + 2) { background: var(--mn-warning); }\n.mn-password-meter[data-score=\"3\"] > i:nth-child(-n + 3) { background: var(--mn-info); }\n.mn-password-meter[data-score=\"4\"] > i:nth-child(-n + 4) { background: var(--mn-success); }\n.mn-password-meter > span { grid-column: 1 / -1; font-size: calc(var(--mn-text-sm) - 1px); color: var(--mn-muted); }"
    },
    {
      "path": "mian/examples/password-input.html",
      "type": "registry:file",
      "target": "mian/examples/password-input.html",
      "content": "<!-- With strength meter -->\n<div class=\"mn-field\" style=\"max-width:22rem\">\n  <label class=\"mn-label\" for=\"pw-1\">New password</label>\n  <div class=\"mn-input-group mn-password\">\n    <input class=\"mn-input\" id=\"pw-1\" type=\"password\" autocomplete=\"new-password\" value=\"noodles\">\n    <button class=\"mn-password-toggle\" type=\"button\" aria-label=\"Show password\" aria-pressed=\"false\"><span class=\"mn-password-show\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg></span><span class=\"mn-password-hide\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 3l18 18\"/><path d=\"M10.6 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6\"/><path d=\"M9.9 9.9a3 3 0 0 0 4.2 4.2\"/></svg></span></button>\n  </div>\n  <div class=\"mn-password-meter\" data-mn-for=\"#pw-1\"><i></i><i></i><i></i><i></i><span></span></div>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/password-input",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-password",
        "mn-password-toggle",
        "mn-password-meter[data-mn-for=\"#id\"]"
      ],
      "accessibility": [
        "The toggle is a real button with a fixed label (“Show password”); aria-pressed=\"true\" says the password is visible.",
        "The strength label is linked with aria-describedby and announced politely as it changes. Colour is never the only signal.",
        "Use autocomplete=\"new-password\" for sign-up and \"current-password\" for sign-in."
      ],
      "intents": [
        "password field",
        "show password",
        "password strength",
        "new password"
      ]
    }
  }
}