Network Status

<%# Markup for the network-status (offline-detection banner) demo.
    The library checks navigator.onLine initially and subscribes to the window's
    online/offline events, toggling the corresponding banner's hidden. Offline uses
    role="alert" (assertive); coming back online uses role="status" (polite). Since real
    online/offline is environment-dependent, the demo's demo.js fakes the window events
    to reproduce the behavior. %>
<div class="network-demo">
  <div class="network-demo__controls">
    <button class="demo-trigger" type="button" data-network-demo="offline">
      <%= t("components.network_status.demo.go_offline") %>
    </button>
    <button class="demo-trigger" type="button" data-network-demo="online">
      <%= t("components.network_status.demo.go_online") %>
    </button>
  </div>

  <div data-controller="stimeo--network-status"
       data-stimeo--network-status-online-auto-hide-value="3000">
    <div
      class="network-banner network-banner--offline"
      role="alert"
      hidden
      data-stimeo--network-status-target="offline">
      <%= t("components.network_status.demo.offline_message") %>
    </div>
    <div
      class="network-banner network-banner--online"
      role="status"
      hidden
      data-stimeo--network-status-target="online">
      <%= t("components.network_status.demo.online_message") %>
    </div>
  </div>

  <p class="network-demo__note"><%= t("components.network_status.demo.note") %></p>
</div>

/*
 * Presentation-only styles for the network-status demo.
 * This CSS owns the banner's color and placement; the library only toggles
 * hidden and reflects data-state (online / offline).
 */

.network-demo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 32rem;
}

.network-demo__controls {
  display: flex;
  gap: 0.5rem;
}

.network-banner {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.95rem;
}

.network-banner--offline {
  border-color: var(--danger-500);
  background: var(--danger-50);
  color: var(--color-accent);
}

.network-banner--online {
  border-color: var(--leaf-500);
  background: var(--leaf-50);
  color: var(--leaf-500);
}

.network-demo__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

// Consumer-side JS for the network-status demo (demo-only).
// Real online / offline transitions are environment-dependent and hard to reproduce,
// so demo buttons fake the window's online / offline events. The library subscribes to
// those events to switch the banner, so production runs the same code path.
document.querySelectorAll("[data-network-demo='offline']").forEach((button) => {
  button.addEventListener("click", () => {
    window.dispatchEvent(new Event("offline"));
  });
});

document.querySelectorAll("[data-network-demo='online']").forEach((button) => {
  button.addEventListener("click", () => {
    window.dispatchEvent(new Event("online"));
  });
});

// Example of subscribing to the state-change event (usable for analytics, a toast, etc.).
document.addEventListener("stimeo--network-status:change", (event) => {
  console.log(`[network-status] online=${event.detail.online}`);
});