エクスクルーシブ
Door Dial <mv-door-dial>
ページを再構築せずに、同じリンク、アクション、コードサンプルを別のコンテキスト（環境、リージョン、テナント、ドキュメントのバージョン、API のベース）に向け直すコンテキストダイヤルです。
文化的リファレンス
ハウルの動く城、ダイアナ・ウィン・ジョーンズ（小説）、宮崎駿（映画）（1986年、書籍）。城には玄関の扉が 1 つだけあり、開くたびに別の町へつながるよう切り替えられます。UI ではその仕組みだけを残し、シンプルなセグメントコントロールで表現しています。コンテキストを選ぶと、同じリンク、アクション、コードサンプルが別の環境、リージョン、テナント、ドキュメントのバージョンへ向け直され、リンクにホバーすると、それが今どの町につながっているかが表示されます。
仕組み
コンテキストダイヤル：ページを再構築せずに、同じリンク、アクション、コードサンプルを別のコンテキスト（環境、リージョン、テナント、ドキュメントのバージョン、API のベース）へ向け直します。扉は <mv-door> 子要素で宣言し、それぞれ色、アイコン、ラベルで区別されます。ダイヤルはコンパクトなセグメント型のラジオグループで、色付きのインジケーターが開いている扉の下へスライドします。href はデフォルトの扉に対して一度だけ書けばよく、ほかの扉はすべて宣言的なルールで href を導き出します。ベースの置換（オリジンまたはパスのプレフィックス、またはダイヤル上の {door} テンプレート）、サブドメインを保つホストの置換（api.example.com → api.staging.example.com）、クエリパラメーター、リンクごとの data-door-template または data-door-href-<door>、あるいは JS の書き換えフックです。対象はスコープ（for セレクター）内のリンク、フォームの action、iframe で、data-door を付けたもの、または links="matching" の場合はルールが当てはまるすべてのリンクです。コードサンプル内のホストも書き換え（data-door-text）、特定の扉でのみ表示するコンテンツを出し分け（data-door-only / data-door-not）、扉のラベルを埋めます（data-door-label）。書き換えられたリンクにホバーまたはフォーカスすると、扉の枠のプレビューが開き、新しい行き先、変更された部分のハイライト、元の部分の取り消し線が表示されます。選択は保存でき（タブ間で同期）、URL パラメーターにも反映できます。後から追加されたリンクも拾われ、切り替えのたびにキャンセル可能な mv-door-change を経由するため、アプリは本番環境を開く前に確認できます。resolve() は JS のリクエストにも同じ行き先を返します。
| カテゴリー | ナビゲーション |
|---|---|
| タイプ | Web Component（<mv-door-dial>） |
| ステータス | 安定版 |
| キット | パワーユーザー向けナビゲーション |
| Keywords | exclusive, culture, context-switcher, environment-switcher, region-picker, tenant-switcher, workspace-switcher, version-switcher, docs-version, api-base, link-rewrite, href, multi-region, staging, production, dev-portal, radiogroup, dial |
When to use
- Staff jump between production, staging and preview deploys in one console and every shortcut must open in the chosen environment
- A multi-region admin or API reference must point its links and code samples at the US, EU or APAC endpoint the user picked
- A docs site keeps several versions and switching version should re-target every doc link in place, not reload a different page
- Support agents open the same tools for different tenants or workspaces and links must carry the selected tenant
Avoid when
- The page only needs to show which environment it is running in, with no links to re-target → use Env Marker instead
- The choice switches a local view or mode and no link or action depends on it → use Segmented instead
- Each context is a different page with its own content: route to it instead of rewriting links, so URLs stay canonical and indexable for SEO
インストール
node scripts/add.mjs door-dial --out ./src/marvelousMarvelous UI MCP サーバーを使う AI エージェント：install_components({ slugs: ["door-dial"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。
コピーされるファイル（依存関係を含む）：tokens/tokens.css、core/base.css、core/dom.js、core/element.js、core/focus.js、core/motion.js、core/observe.js、core/position.js、components/door-dial/door-dial.js、components/door-dial/door-dial.css。
使い方
クイックスタート、動作する最小限のマークアップ：
<mv-door-dial label="Environment">
<mv-door value="production" label="Production" host="app.example.com" default></mv-door>
<mv-door value="staging" label="Staging" host="staging.example.com"></mv-door>
</mv-door-dial>
<a href="https://app.example.com/settings" data-door>Open settings</a>基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：
<div id="dd-demo" style="width:min(100%,60rem);margin-inline:auto">
<style>
#dd-demo { display:grid; gap:1.25rem; align-content:start }
#dd-demo .dd-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
#dd-demo .dd-bar { display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; min-height:3.5rem; padding:.625rem 1rem .625rem 1.125rem; border-bottom:1px solid var(--mv-border) }
#dd-demo .dd-brand { display:flex; align-items:center; gap:.5rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em; margin-inline-end:auto }
#dd-demo .dd-logo { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--mv-radius-md); background:var(--mv-fg); color:var(--mv-bg) }
#dd-demo .dd-logo svg { width:1rem; height:1rem }
#dd-demo .dd-brand small { color:var(--mv-fg-muted); font-weight:500; font-size:.8125rem }
#dd-demo .dd-body { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; padding:1.125rem }
#dd-demo .dd-status { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; font-size:.8125rem; color:var(--mv-fg-muted) }
#dd-demo .dd-status b { color:var(--mv-fg); font-weight:600 }
#dd-demo .dd-note { display:flex; align-items:center; gap:.5rem; margin:0; padding:.5rem .75rem; border-radius:var(--mv-radius-md); font-size:.8125rem; background:color-mix(in oklab, var(--mv-door-color) 10%, var(--mv-surface)); border:1px solid color-mix(in oklab, var(--mv-door-color) 28%, transparent); color:var(--mv-fg) }
#dd-demo .dd-note svg { flex:none; width:1rem; height:1rem; color:color-mix(in oklab, var(--mv-door-color) 75%, var(--mv-fg)) }
#dd-demo .dd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:.625rem }
#dd-demo .dd-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.125rem .625rem; align-items:start; padding:.75rem .875rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle); color:inherit; text-decoration:none; transition:border-color var(--mv-duration-fast), background-color var(--mv-duration-fast) }
#dd-demo .dd-card:hover { border-color:var(--mv-border-strong); background:var(--mv-surface) }
#dd-demo .dd-card:focus-visible { outline:none; box-shadow:var(--mv-focus-ring) }
#dd-demo .dd-ico { grid-row:span 2; display:grid; place-items:center; width:2rem; height:2rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-muted); color:var(--mv-fg-muted) }
#dd-demo .dd-ico svg { width:1rem; height:1rem }
#dd-demo .dd-card b { font-size:.8125rem; font-weight:600 }
#dd-demo .dd-card span.dd-d { color:var(--mv-fg-muted); font-size:.75rem; line-height:1.4 }
#dd-demo .dd-card[data-door-rewritten] b::after { content:""; display:inline-block; width:.375rem; height:.375rem; margin-inline-start:.375rem; border-radius:50%; background:var(--mv-door-color); vertical-align:middle }
#dd-demo .dd-code { margin:0; padding:.75rem .875rem; border-radius:var(--mv-radius-lg); background:var(--mv-bg-muted); color:var(--mv-fg); font:.75rem/1.6 var(--mv-font-mono); overflow-x:auto; white-space:pre }
#dd-demo .dd-code-head { display:flex; justify-content:space-between; align-items:center; margin:0 0 .375rem; font-size:.75rem; color:var(--mv-fg-muted) }
#dd-demo .dd-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.75rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
#dd-demo .dd-switches { display:flex; gap:.5rem 1.25rem; flex-wrap:wrap }
#dd-demo .mv-choice { font-size:.8125rem }
#dd-demo .dd-log { margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
#dd-demo .dd-confirm { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.625rem 1.125rem; border-bottom:1px solid color-mix(in oklab, var(--mv-danger) 30%, transparent); background:color-mix(in oklab, var(--mv-danger) 8%, var(--mv-surface)); font-size:.8125rem }
#dd-demo .dd-confirm[hidden] { display:none }
#dd-demo .dd-confirm p { margin:0; flex:1 1 18rem }
#dd-demo .dd-confirm span { display:flex; gap:.5rem }
#dd-demo .dd-docs { display:grid; grid-template-columns:12rem minmax(0,1fr) }
#dd-demo .dd-side { display:grid; align-content:start; gap:.125rem; padding:1rem .75rem; border-inline-end:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
#dd-demo .dd-side h5 { margin:.5rem .5rem .25rem; color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase }
#dd-demo .dd-side h5:first-child { margin-top:0 }
#dd-demo .dd-side a { display:block; padding:.3125rem .5rem; border-radius:var(--mv-radius-md); color:var(--mv-fg-muted); font-size:.8125rem; text-decoration:none }
#dd-demo .dd-side a:hover { background:var(--mv-bg-muted); color:var(--mv-fg) }
#dd-demo .dd-side a[aria-current] { background:var(--mv-bg-muted); color:var(--mv-fg); font-weight:500 }
#dd-demo .dd-side a:focus-visible { outline:none; box-shadow:var(--mv-focus-ring) }
#dd-demo .dd-article { display:grid; gap:.75rem; align-content:start; padding:1.125rem 1.25rem 1.25rem }
#dd-demo .dd-article h4 { margin:0; font-size:1.125rem; letter-spacing:-.01em }
#dd-demo .dd-article p { margin:0; color:var(--mv-fg-muted); font-size:.875rem; line-height:1.6 }
#dd-demo .dd-article a { color:var(--mv-fg); text-decoration:underline; text-decoration-color:var(--mv-border-strong); text-underline-offset:2px }
#dd-demo .dd-article a:hover { text-decoration-color:currentColor }
#dd-demo .dd-crumbs { color:var(--mv-fg-subtle); font-size:.75rem }
@media (max-width:40rem) {
#dd-demo .dd-docs { grid-template-columns:minmax(0,1fr) }
#dd-demo .dd-side { border-inline-end:0; border-bottom:1px solid var(--mv-border) }
}
</style>
<!-- 1. An operations console: one set of links, four environments (host swap, subdomains kept) -->
<section class="dd-app" aria-label="Operations console">
<header class="dd-bar">
<span class="dd-brand">
<span class="dd-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 3 8l9 5 9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
Acme <small>Operations</small>
</span>
<mv-door-dial id="dd-env" label="Environment" for="#dd-console" value="staging">
<mv-door value="production" label="Production" icon="shield" color="var(--mv-danger)" host="example.com" description="Live customer data" default></mv-door>
<mv-door value="staging" label="Staging" icon="flask" color="var(--mv-warning)" host="staging.example.com" description="Mirrors production every night"></mv-door>
<mv-door value="sandbox" label="Sandbox" icon="code" color="var(--mv-info)" host="sandbox.example.com" description="Test cards, simulated payouts"></mv-door>
<mv-door value="preview" label="PR #482" icon="branch" color="var(--mv-accent)" host="pr-482.preview.example.com" description="Deploy preview · checkout-v2"></mv-door>
</mv-door-dial>
</header>
<div class="dd-confirm" id="dd-confirm" role="group" aria-label="Confirm environment" hidden>
<p id="dd-confirm-text"><b>Open Production?</b> Links on this page will act on live customer data.</p>
<span>
<button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="dd-cancel">Stay</button>
<button type="button" class="mv-button" data-variant="destructive" data-size="sm" id="dd-go" aria-describedby="dd-confirm-text">Open Production</button>
</span>
</div>
<div class="dd-body" id="dd-console">
<div class="dd-status">
<span>Every link below opens in <b data-door-label>Production</b></span>
<span class="mv-badge" data-variant="danger" data-door-only="production">Live data</span>
<span class="mv-badge" data-variant="secondary" data-door-not="production">Test data</span>
</div>
<nav class="dd-grid" aria-label="Console shortcuts" data-door>
<a class="dd-card" href="https://console.example.com/dashboard"><span class="dd-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg></span><b>Dashboard</b><span class="dd-d">Orders, revenue</span></a>
<a class="dd-card" href="https://logs.example.com/search?service=checkout&level=error"><span class="dd-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h10M4 18h13"/></svg></span><b>Error logs</b><span class="dd-d">Checkout · 24 h</span></a>
<a class="dd-card" href="https://console.example.com/flags/checkout-v2"><span class="dd-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg></span><b>Feature flags</b><span class="dd-d">checkout-v2 · 25%</span></a>
<a class="dd-card" href="https://console.example.com/developers/webhooks"><span class="dd-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"/><path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"/><path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"/></svg></span><b>Webhooks</b><span class="dd-d">6 endpoints</span></a>
<a class="dd-card" href="https://status.example.net" data-door="off"><span class="dd-ico"><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 12h4l3-8 4 16 3-8h4"/></svg></span><b>Public status</b><span class="dd-d">Same everywhere</span></a>
</nav>
<div>
<p class="dd-code-head"><span>List recent orders</span><span data-door-label="description">Live customer data</span></p>
<pre class="dd-code" data-door-text>curl https://api.example.com/v1/orders?limit=20 \
-H "Authorization: Bearer <your-api-key>"</pre>
</div>
<p class="dd-note" data-door-only="production"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 2 20h20z"/><path d="M12 10v4M12 17h.01"/></svg>You are in Production: every change applies to live customers immediately.</p>
<p class="dd-note" data-door-not="production"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 1.5"/></svg>Test environment: data resets every Sunday at 00:00 UTC.</p>
</div>
<div class="dd-foot">
<span class="dd-switches">
<label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="dd-ask" checked> Ask before opening Production</label>
<label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="dd-remember"> Remember my choice</label>
</span>
<p class="dd-log" id="dd-log">Hover a shortcut to see where it now leads.</p>
</div>
</section>
<!-- 2. A docs site: versions as a path template, every matching link re-targeted (compact dial) -->
<section class="dd-app" aria-label="Developer documentation">
<header class="dd-bar">
<span class="dd-brand">
<span class="dd-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5V5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h14"/></svg></span>
Acme <small>Docs</small>
</span>
<mv-door-dial id="dd-ver" label="Version" for="#dd-docs" links="matching" template="/docs/{door}" value="v2" compact>
<mv-door value="v3" label="v3.2 (latest)" short="v3.2" icon="tag" color="var(--mv-success)" description="Current release" default></mv-door>
<mv-door value="v2" label="v2.8" short="v2.8" icon="tag" color="var(--mv-warning)" description="Supported until Mar 31, 2027"></mv-door>
<mv-door value="v1" label="v1 (end of life)" short="v1" icon="tag" color="var(--mv-fg-muted)" disabled></mv-door>
</mv-door-dial>
</header>
<div class="dd-docs" id="dd-docs">
<nav class="dd-side" aria-label="Documentation">
<h5>Get started</h5>
<a href="/docs/v3/quickstart">Quickstart</a>
<a href="/docs/v3/authentication">Authentication</a>
<h5>Guides</h5>
<a href="/docs/v3/webhooks" aria-current="page">Webhooks</a>
<a href="/docs/v3/errors">Errors and retries</a>
<a href="/docs/v3/pagination">Pagination</a>
<h5>More</h5>
<a href="/changelog">Changelog</a>
<a href="https://code.example.net/acme/sdk-node">Node.js SDK</a>
</nav>
<article class="dd-article">
<span class="dd-crumbs">Guides / Webhooks · <span data-door-label>v3.2 (latest)</span></span>
<h4>Receiving webhooks</h4>
<p class="dd-note" data-door-only="v2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>You are reading the v2 docs. v2 is supported until March 31, 2027.</p>
<p>Acme sends an HTTPS <code>POST</code> to your endpoint for every event. Verify each request with the <a href="/docs/v3/webhooks#signatures">signing secret</a> before trusting it, and answer within 10 seconds or the delivery is <a href="/docs/v3/errors#retries">retried with backoff</a>.</p>
<p>New in this release? Read the <a href="/changelog">changelog</a> or jump back to the <a href="/docs/v3/quickstart">quickstart</a>.</p>
</article>
</div>
</section>
<script type="module">
const env = document.getElementById("dd-env");
const ver = document.getElementById("dd-ver");
const log = document.getElementById("dd-log");
const ask = document.getElementById("dd-ask");
const remember = document.getElementById("dd-remember");
const confirmBar = document.getElementById("dd-confirm");
let confirmed = false;
// Veto: opening Production needs an explicit confirmation.
env.addEventListener("mv-door-change", (e) => {
if (e.detail.value !== "production" || !ask.checked || confirmed) { confirmed = false; return; }
e.preventDefault();
confirmBar.hidden = false;
document.getElementById("dd-go").focus();
log.textContent = "Switch to Production is waiting for confirmation.";
});
document.getElementById("dd-go").addEventListener("click", () => {
confirmed = true;
confirmBar.hidden = true;
env.turn("production", { source: "user" });
env.focus();
});
document.getElementById("dd-cancel").addEventListener("click", () => {
confirmBar.hidden = true;
env.focus();
log.textContent = `Stayed in ${env.door.label}.`;
});
env.addEventListener("mv-door-rewrite", (e) => {
if (e.detail.source === "init") return;
const n = e.detail.count;
log.textContent = `${e.detail.door.label} · ${n} link${n === 1 ? "" : "s"} re-targeted, API sample updated.`;
});
remember.addEventListener("change", () => { env.persist = remember.checked ? "dd-demo-env" : null; });
// Demo only: never leave the page, show where the click would have gone.
document.getElementById("dd-demo").addEventListener("click", (e) => {
const a = e.target.closest("a[href]");
if (!a) return;
e.preventDefault();
if (a.closest("#dd-console")) log.textContent = `Would open ${a.href}`;
});
</script>
</div>API
Attributes
| Name | タイプ | Default | Description |
|---|---|---|---|
value | string | Value of the open door (reflected). Initial priority: the query URL parameter, then the persisted choice, then value, then the default door. Setting it applies the door without mv-door-change. | |
label | string | Open links in (visually hidden) | Visible caption before the doors (“Environment”, “Region”, “Version”) and accessible name of the radio group. Without it, the group is named by the hidden default. |
for | CSS selector | Scope roots whose content is re-targeted (every match, including ones added later). Without it: the nearest [data-door-scope] ancestor, else the whole document body. | |
links | marked | matching | marked | marked: only elements carrying data-door (or inside a container that does). matching: also every a[href], area[href], form[action] and iframe[src] of the scope that some door’s rules would change; data-door="off" still opts out. |
template | string with {door} | Base shared by every door without its own base, e.g. "/docs/{door}" or "https://{door}.api.example.com": the default door’s filled base is swapped for the open door’s. | |
persist | string | Opt-in: saves the chosen door in localStorage under mv-door-dial:<key>, restores it on load and follows changes made in other tabs (storage event). | |
query | string | Opt-in: URL parameter mirroring the door (history.replaceState, removed on the default door) so a shared page link opens the same door. | |
preview | auto | always | off | auto | Door-frame preview on hover (after 260 ms) and keyboard focus of a managed link: auto only when the destination differs from the authored href, always also on the default door. |
compact | boolean | Doors show their short text (or only their icon); the full label stays the accessible name and a native tooltip. | |
disabled | boolean | Locks the dial on its current door. | |
data-current / data-default | string / boolean | Set on the dial by the component: open door value, and whether it is the default door (styleable). | |
<mv-door> value, label, short, description, icon, color | strings | One door. label (or text content) is the name; short replaces it in compact mode; description appears in the preview; icon is a built-in name (globe, server, laptop, flask, cloud, shield, book, code, flag, building, branch, tag, user, bolt) or an inline <svg> child; color is any CSS color (default: --mv-door-dial-color-1…6 by position). | |
<mv-door> default, disabled | boolean | default: the door hrefs are authored for (else the first door). disabled: shown but cannot be opened (end-of-life version, region not provisioned). | |
<mv-door> base, host, param | strings | Rewrite rules, applied in this order. base: URL or path prefix swapped for the default door’s on a path boundary ("https://api.eu.example.com", "/docs/v2"). host: host swap for any URL on the default door’s host (else its absolute base’s host, else the page’s) or one of its subdomains; accepts a scheme and port ("http://localhost:3000"); URLs already on another door’s host are left alone. param: query params set on matched or same-origin URLs ("region=eu&tenant=acme"), the default door’s keys being removed first. | |
data-door | "" | "on" | "off" | dial id | On a link, form or iframe: managed. On any other element: every URL element inside is managed. off opts out (nearest wins); a dial id binds content to one dial when several share a scope. | |
data-door-attr | string | URL attribute to rewrite when it isn’t the tag default (href, action, src), e.g. formaction on a button or data-src. | |
data-door-href-<door> / data-door-template | string | Per-link overrides: an explicit destination for one door, or a template with {door} and {label} used for every door. | |
data-door-text | boolean | Text inside (code samples, API base labels) has the default door’s base and host swapped. Originals are kept and restored. | |
data-door-only / data-door-not | door values (space or comma separated) | Element shown only in those doors, or hidden in them (hidden attribute; the original state is restored when the dial goes away). | |
data-door-label | "" | label | short | value | description | Text replaced by the open door’s field. | |
data-door-rewritten / data-door-flash / data-door-current | set by the component | On managed elements whose destination differs from the authored one; on elements that just changed (1.2 s outline); on scope roots (open door value). --mv-door-color is set on all of them. |
Properties
| Name | タイプ | Description |
|---|---|---|
value | string | Open door value; setting it applies silently (no mv-door-change). |
door / defaultDoor / doors | Door | Door[] | Read-only snapshots: { value, label, short, description, color, icon, base, host, param, default, disabled, element }. |
rewrite | (url: URL, door, { href, element, defaultDoor }) => string | URL | null | Custom rule run after the declarative ones for non-default doors (tenant ids in paths, signed URLs…); return null to keep the result. Setting it re-applies. |
strings | Partial<Record<string, string>> | Overrides for visible texts and announcements (keys: label, announce ({label}), links ({count}), link, hint ({label}), previewTitle, previewInstead). English defaults. |
for / links / template / persist / query / preview / compact / disabled / label | reflected | Mirror the attributes. |
Methods
| Name | Description |
|---|---|
turn(value, { source? }) | Opens a door like a user would: emits the cancelable mv-door-change, then applies it. Returns false if vetoed, unknown or disabled. |
next() / previous() | Turns to the next or previous enabled door (wraps). |
resolve(href, value?, element?) | Where an href authored for the default door leads in a door (default: the open one). Use it for fetch() calls and anything built in JS. |
refresh() | Re-scans the scope and re-applies (links added later are already picked up by a MutationObserver). |
focus() | Focuses the open door’s radio. |
Events
| Name | Description |
|---|---|
mv-door-change | Cancelable, before a door opens. detail: { value, previous, door, previousDoor, source: "user" | "api" | "storage" }. preventDefault() keeps the current door (e.g. to confirm before production). |
mv-door-rewrite | After a door was applied, including on first connection. detail: { value, door, count (URLs that changed), source: "init" | "user" | "api" | "storage" }. |
Content structure
| Name | Description |
|---|---|
<mv-door> children | The doors, in order. They are config only (display: none) and watched: adding, removing or editing one updates the dial. |
CSS classes
| Name | Description |
|---|---|
mv-door-dial-label | Visible caption, labels the radio group. |
mv-door-dial-track / mv-door-dial-door | The radiogroup and its role="radio" buttons (data-selected, data-default, --_c = door color): -glyph (icon, or data-icon="dot"), -name. |
mv-door-dial-indicator | Tinted surface with a threshold line, sliding under the open door. |
mv-door-dial-preview | Door-frame preview (popover, aria-hidden): -head, -glyph, -title, -desc, -url (mark = changed part), -was / -old (s = replaced part). |
CSS variables
| Name | Default | Description |
|---|---|---|
--mv-door-color | (open door color) | Set by the component on the dial, scope roots and managed elements: tint anything by the open door. |
--mv-door-dial-color-1 … -6 | accent, success, warning, info, danger, fg-muted | Palette for doors without a color, by position (defined on :root). |
--mv-door-dial-bg | var(--mv-surface) | Dial background. |
--mv-door-dial-radius | var(--mv-radius-lg) | Dial corner radius (doors follow it). |
--mv-door-dial-height | var(--mv-control-sm) | Height of a door. |
Accessibility
The doors are a real radio group (role="radiogroup" named by the visible caption, role="radio" buttons with aria-checked): Tab reaches the open door, arrow keys move and open the next door (roving tabindex, wraps), Home and End jump to the first and last, disabled doors are skipped. Every door has an icon and a text label as well as its color, so nothing relies on color alone; in compact mode the full label stays the accessible name. A polite live region announces each turn with the number of changed URLs (“Now opening in: EU region. 5 links updated.”). Rewritten links keep their own accessible name: when they lead somewhere other than their authored door, aria-describedby points to a shared hidden hint (“Opens in: EU region”), removed again on the default door. The door-frame preview is aria-hidden with pointer-events: none (the hint carries the same information), opens on hover and on keyboard focus (focus-visible) of a rewritten link, and Escape or leaving the link closes it. A vetoed turn (mv-door-change prevented) puts focus back on the open door unless the app moved it, for example to a confirmation button. Door-only content uses the hidden attribute, so it leaves the accessibility tree too. Reduced motion (OS or data-motion="reduce"): the indicator jumps instead of sliding, the preview appears without motion and the outline flash on changed links is skipped. Forced colors: the open door and the indicator use Highlight, dots and the indicator line use CanvasText. Removing the dial restores every href, text, label, hidden state and aria-describedby it changed.