ネットワークステータス
stimeo--network-status
オンライン / オフラインを検知し、変化時にライブリージョンのバナーを切り替える。
stimeo--network-status コントローラは接続時に navigator.onLine を読み、window の online / offline イベントを購読して対応バナーを切り替えます。オフラインは重要度が高いため role="alert"(assertive)、オンライン復帰は role="status"(polite)です。通知を支援技術で確実にするため、状態変化のたびにバナーのテキストを書き換え(同一状態の重複通知はガード)、 onlineAutoHide で復帰バナーを自動的に隠せます。navigator.onLine はブラウザの推定値であり、サーバ疎通までは保証しません。stimeo--network-status:change を発火し、リスナ/タイマーは disconnect(Turbo 遷移含む)で解除されます。ライブラリは挙動のみを提供し、バナーの見た目はこの Playground が持ちます。
これらのボタンは window の online / offline イベントを擬似発火し、実際に切断せずに挙動を確認できるようにしています。
<%# 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}`);
});
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--network-status"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
offline
|
接続喪失時に表示する role="alert" のバナー。 |
data-stimeo--network-status-target="offline" |
online
|
接続回復時に表示する role="status" のバナー。 |
data-stimeo--network-status-target="online" |
値(Values)
| 名前 | 説明 | 属性 |
|---|---|---|
onlineAutoHide
|
回復バナーを自動的に隠すまでのミリ秒。0 で無効(既定 0)。 | data-stimeo--network-status-online-auto-hide-value |
イベント
| 名前 | 説明 | イベント |
|---|---|---|
change
|
接続状態の遷移時に発火。detail.online(真偽値)を伴う。 | stimeo--network-status:change |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
hidden |
offline / online バナー | 対応するバナーの表示を切り替える。 |
data-state |
ルート要素 | "online" / "offline"。 |