ExklusivBeta
Door Dial <mv-door-dial>
Kontext-Wählscheibe, die dieselben Links, Aktionen und Codebeispiele auf einen anderen Kontext umlenkt (Umgebung, Region, Mandant, Doku-Version, API-Basis), ohne die Seite neu zu bauen. Türen werden mit <mv-door>-Kindelementen deklariert, jede mit Farbe, Icon und Label gekennzeichnet; die Wählscheibe ist eine kompakte Radiogruppe mit einem kleinen Drehknopf, dessen Zeiger sich zur offenen Tür dreht. Hrefs werden einmal für die Standardtür geschrieben, und jede andere Tür leitet sie mit deklarativen Regeln ab: Austausch der Basis (Origin oder Pfadpräfix, oder ein {door}-Template auf der Wählscheibe), Austausch des Hosts unter Beibehaltung der Subdomains (api.example.com → api.staging.example.com), Query-Parameter, ein data-door-template oder data-door-href-<door> pro Link oder ein JS-Rewrite-Hook. Das gilt für Links, Formular-Actions und Iframes innerhalb eines Bereichs (der for-Selektor), markiert mit data-door oder, mit links="matching", für jeden Link, auf den eine Regel zutrifft. Außerdem schreibt die Komponente Hosts in Codebeispielen um (data-door-text), zeigt türspezifische Inhalte (data-door-only / data-door-not) und füllt Tür-Labels (data-door-label). Hover oder Fokus auf einem umgeschriebenen Link öffnet eine Vorschau im Türrahmen mit dem neuen Ziel, der geänderte Teil hervorgehoben und das Original durchgestrichen. Die Wahl kann gespeichert (über Tabs hinweg synchronisiert) und in einem URL-Parameter gespiegelt werden, später hinzugefügte Links werden erfasst, und jede Drehung läuft über ein abbrechbares mv-door-change, damit die App nachfragen kann, bevor sie die Produktion öffnet. resolve() gibt JS-Anfragen dasselbe Ziel.
| Kategorie | Navigation |
|---|---|
| Typ | Web Component (<mv-door-dial>) |
| Status | Beta |
| Kit | Navigation für Power-User |
| 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
Installation
node scripts/add.mjs door-dial --out ./src/marvelousKI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["door-dial"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Kopierte Dateien (inklusive Abhängigkeiten): 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.
Verwendung
Schnellstart mit dem kleinsten funktionierenden Markup:
<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>Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:
<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>
Northwind <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="northwind.dev" description="Live customer data" default></mv-door>
<mv-door value="staging" label="Staging" icon="flask" color="var(--mv-warning)" host="staging.northwind.dev" description="Mirrors production every night"></mv-door>
<mv-door value="sandbox" label="Sandbox" icon="code" color="var(--mv-info)" host="sandbox.northwind.dev" description="Test cards, simulated payouts"></mv-door>
<mv-door value="preview" label="PR #482" icon="branch" color="var(--mv-accent)" host="pr-482.preview.northwind.dev" 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.northwind.dev/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.northwind.dev/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.northwind.dev/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.northwind.dev/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.northwind.com" 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.northwind.dev/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>
Northwind <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://github.com/northwind/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>Northwind 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>Kulturelle Referenz
Das wandelnde Schloss, Diana Wynne Jones (Roman); Hayao Miyazaki (Film) (1986, Buch). Das Schloss hat eine einzige Eingangstür mit einer Farbscheibe daneben: Dreh die Scheibe, und genau dieselbe Tür öffnet sich in eine andere Stadt. Übertragen auf die UI: Eine Wählscheibe lenkt dieselben Links, Aktionen und Codebeispiele auf eine andere Umgebung, Region, einen anderen Mandanten oder eine andere Doku-Version um, und der Hover über einen Link zeigt, in welche Stadt er sich jetzt öffnet.
API
Attributes
| Name | Typ | 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 | Typ | 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). Clicking the knob does next(). |
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-knob | Decorative rotary knob (aria-hidden): -ticks / -tick (one colored dot per door, data-on for the open one) and -pointer (rotates to --_angle). |
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. The knob is decorative (aria-hidden) and its click is a pointer shortcut for next(). 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 pointer and the indicator jump 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 pointer use CanvasText. Removing the dial restores every href, text, label, hidden state and aria-describedby it changed.