接続状態に応じて色が変わるステータスドット

<div class="d11-14-09-wrap">
          <div class="d11-14-09-frame">
            <div class="d11-14-09-status" id="d1965Status">
              <span class="d11-14-09-dot online" id="d1965Dot"></span>
              <span class="d11-14-09-text" id="d1965Text">オンライン・接続は良好です</span>
            </div>
            <ul class="d11-14-09-list">
              <li>チャット: 相手がオンラインです</li>
              <li>通知: リアルタイム同期が有効です</li>
            </ul>
          </div>
          <button type="button" class="d11-14-09-toggle" id="d1965Toggle">状態を切り替える</button>
        </div>

.prev.d11-14-09{align-items:flex-start;justify-content:flex-start}
        .d11-14-09-wrap{width:100%}
        .d11-14-09-frame{padding:14px 12px;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-09-status{display:flex;align-items:center;gap:8px;margin-bottom:12px}
        .d11-14-09-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#9ca3af}
        .d11-14-09-dot.online{background:#10b981;animation:d1965Pulse 1.6s infinite}
        .d11-14-09-dot.unstable{background:#f59e0b}
        .d11-14-09-dot.offline{background:#dc2626}
        @keyframes d1965Pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
        .d11-14-09-text{font-size:11.5px;font-weight:700;color:#374151}
        .d11-14-09-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
        .d11-14-09-list li{background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px;font-size:11px;color:#6b7280}
        .d11-14-09-toggle{margin-top:10px;width:100%;padding:9px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-09-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-09');
        var dot=root.querySelector('#d1965Dot');
        var text=root.querySelector('#d1965Text');
        var btn=root.querySelector('#d1965Toggle');
        var states=[
          {cls:'online',text:'オンライン・接続は良好です'},
          {cls:'unstable',text:'不安定・接続が揺らいでいます'},
          {cls:'offline',text:'オフライン・接続がありません'}
        ];
        var idx=0;
        btn.addEventListener('click',function(){
          idx=(idx+1)%states.length;
          dot.className='d11-14-09-dot '+states[idx].cls;
          text.textContent=states[idx].text;
        });
      })();