Exclusivebeta

Door Dial — `<mv-door-dial>`

Context dial that re-targets the same links, actions and code samples onto another context (environment, region, tenant, docs version, API base) without rebuilding the page. Doors are declared with <mv-door> children, each color, icon and label coded; the dial is a compact radio group with a small rotary knob whose pointer turns to the open door. Hrefs are authored once for the default door and every other door derives them with declarative rules: base swap (origin or path prefix, or a {door} template on the dial), host swap that keeps subdomains (api.example.com → api.staging.example.com), query params, a per-link data-door-template or data-door-href-<door>, or a JS rewrite hook. It covers links, form actions and iframes inside a scope (the for selector), marked with data-door or, with links="matching", every link a rule applies to. It also rewrites hosts inside code samples (data-door-text), shows door-only content (data-door-only / data-door-not) and fills door labels (data-door-label). Hovering or focusing a rewritten link opens a door-frame preview with the new destination, the changed part highlighted and the original struck out. The choice can be persisted (synced across tabs) and mirrored in a URL parameter, links added later are picked up, and every turn goes through a cancelable mv-door-change so the app can ask before opening production. resolve() gives JS requests the same destination.

Category	Navigation
Type	Web Component (`<mv-door-dial>`)
Status	beta
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 Totem 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

Install

node scripts/add.mjs door-dial --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["door-dial"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): 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.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<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&amp;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 &lt;your-api-key&gt;"</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>

Cultural reference

Howl’s Moving Castle — Diana Wynne Jones (novel); Hayao Miyazaki (film) (1986, book). The castle has a single front door with a color dial beside it: turn the dial and the very same door opens onto a different town. In the UI, a dial re-targets the same links, actions and code samples onto another environment, region, tenant or docs version, and hovering a link shows which town it now opens onto.

API

Attributes

Name	Type	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	Type	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.