パスワード強度メーター付き入力欄

<div class="d04-03-12-wrap">
          <span class="d04-03-12-label">パスワード</span>
          <div class="d04-03-12-field">
            <input class="d04-03-12-input" type="password" placeholder="8文字以上で入力">
            <button type="button" class="d04-03-12-toggle">表示</button>
          </div>
          <div class="d04-03-12-meter"><span class="d04-03-12-fill"></span></div>
          <span class="d04-03-12-hint">強度: <b class="d04-03-12-level">-</b></span>
        </div>

.d04-03-12-wrap{width:min(280px,100%)}
        .d04-03-12-label{display:block;margin:0 0 8px;font-size:12px;color:#8a93a3}
        .d04-03-12-field{
          display:flex;align-items:center;gap:8px;padding:0 4px 0 12px;
          border:2px solid #d5d9e0;border-radius:8px;background:#fff;transition:border-color .2s;
        }
        .d04-03-12-field:focus-within{border-color:#4a6cf7}
        .d04-03-12-input{flex:1;min-width:0;border:none;outline:none;padding:10px 0;font-size:14px;background:transparent}
        .d04-03-12-toggle{flex:0 0 auto;border:none;background:none;color:#4a6cf7;font-size:12px;font-weight:700;cursor:pointer;padding:8px}
        .d04-03-12-meter{margin-top:10px;height:6px;border-radius:3px;background:#e4e8ef;overflow:hidden}
        .d04-03-12-fill{display:block;height:100%;width:0;border-radius:3px;background:#dc2626;transition:width .25s,background .25s}
        .d04-03-12-hint{display:block;margin-top:6px;font-size:11px;color:#8a93a3}

(function(){
        var wrap=document.querySelector('.d04-03-12-wrap');
        if(!wrap)return;
        var input=wrap.querySelector('.d04-03-12-input');
        var toggle=wrap.querySelector('.d04-03-12-toggle');
        var fill=wrap.querySelector('.d04-03-12-fill');
        var level=wrap.querySelector('.d04-03-12-level');
        toggle.addEventListener('click',function(){
          var isPw=input.type==='password';
          input.type=isPw?'text':'password';
          toggle.textContent=isPw?'非表示':'表示';
        });
        input.addEventListener('input',function(){
          var v=input.value;
          var score=0;
          if(v.length>=8)score++;
          if(/[A-Z]/.test(v))score++;
          if(/[0-9]/.test(v))score++;
          if(/[^A-Za-z0-9]/.test(v))score++;
          var pct=[0,25,50,75,100][score];
          var colors=['#e4e8ef','#dc2626','#f59e0b','#22b573','#16a34a'];
          var labels=['-','弱い','普通','強い','非常に強い'];
          fill.style.width=pct+'%';
          fill.style.background=colors[score];
          level.textContent=labels[score];
        });
      })();