<div class="tabs" data-tabs>
  <ul class="tabs-list" role="tablist">
    <li><button class="tab" role="tab" data-tab="t1">Overview</button></li>
    <li><button class="tab" role="tab" data-tab="t2">Installation</button></li>
    <li><button class="tab" role="tab" data-tab="t3">Configuration</button></li>
  </ul>

  <div class="tab-panel" data-tab-panel="t1">
    <h4>Overview</h4>
    <p>Panel content here.</p>
  </div>
  <div class="tab-panel" data-tab-panel="t2">
    <h4>Installation</h4>
    <p>Panel content here.</p>
  </div>
  <div class="tab-panel" data-tab-panel="t3">
    <h4>Configuration</h4>
    <p>Panel content here.</p>
  </div>
</div>

Root: data-tabs on .tabs. Tab buttons: data-tab="id" (unique per set). Panels: data-tab-panel="id" matching the active tab. Optional: class="active" on a tab for initial selection.

// Wire a single root after dynamic insert:
Downstage.tabs.mount(document.querySelector('#my-tabs'));

// Or re-run auto-init for the whole document:
Downstage.tabs.init();

<div class="accordion" data-accordion="single">
  <div class="accordion-item is-open">
    <button class="accordion-header">
      Question text
      <svg class="icon accordion-icon">
        <use href="downstage-icons.svg#plus" />
      </svg>
    </button>
    <div class="accordion-content">
      <div class="accordion-body">
        Answer content here.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <button class="accordion-header">
      Another question
      <svg class="icon accordion-icon">
        <use href="downstage-icons.svg#plus" />
      </svg>
    </button>
    <div class="accordion-content">
      <div class="accordion-body">
        Answer content here.
      </div>
    </div>
  </div>
</div>

Downstage.accordion.init();        // all [data-accordion] on the page
Downstage.accordion.mount(el);    // single container

Exclusive mode: data-accordion="single" on the root (only one .accordion-item.is-open at a time).

<script type="application/json" id="demo-cascade-geo-local-data">
{ "regions": [ … ] }
</script>

<div id="demo-cascade-local" class="stack">
  <div class="field">
    <label class="label" for="region">Region</label>
    <select id="region" class="select" data-cascade-region></select>
  </div>
  <div class="field">
    <label class="label" for="province">Province</label>
    <select id="province" class="select" data-cascade-province></select>
  </div>
  <div class="field">
    <label class="label" for="city">City</label>
    <select id="city" class="select" data-cascade-city></select>
  </div>
</div>

Wiring is implemented in demo/demo.js (wireCascadingGeoSelects) by reading JSON from the script block.

<p id="demo-cascade-remote-status" role="status"></p>
<button type="button" id="demo-cascade-remote-refetch">Reload users</button>

<div id="demo-cascade-remote" class="stack">
  <div class="field">
    <label class="label" for="u">User</label>
    <select id="u" class="select" data-jp-user></select>
  </div>
  <div class="field">
    <label class="label" for="p">Post</label>
    <select id="p" class="select" data-jp-post></select>
  </div>
  <div class="field">
    <label class="label" for="c">Comment</label>
    <select id="c" class="select" data-jp-comment></select>
  </div>
</div>

Handlers live in demo/demo.js (initJsonPlaceholderCascading).

Uses standard form primitives from downstage.css: .stack (vertical spacing), .field, .label, .select. No extra stylesheet is required for this demo.

{
  "regions": [
    {
      "id": "ne",
      "name": "Northeast",
      "provinces": [
        {
          "id": "ny",
          "name": "New York",
          "cities": [
            { "id": "nyc", "name": "New York City" }
          ]
        }
      ]
    }
  ]
}

var base = 'https://jsonplaceholder.typicode.com';

fetch(base + '/users').then(r => r.json());           // 1 — fill users
fetch(base + '/posts?userId=' + id).then(r => r.json()); // 2 — after user
fetch(base + '/comments?postId=' + id).then(r => r.json()); // 3 — after post

<button class="btn btn-danger"
  onclick="document.getElementById('demo-modal').classList.remove('hidden')">
  <svg class="icon"><use href="downstage-icons.svg#trash" /></svg>
  Delete entry
</button>

<div id="demo-modal" class="modal-overlay hidden"
  onclick="if(event.target===this)this.classList.add('hidden')">
  <div class="modal">
    <div class="modal-title">Delete Entry</div>
    <div class="modal-body">Are you sure? This action is irreversible.</div>
    <div class="modal-footer">
      <button class="btn btn-secondary"
        onclick="document.getElementById('demo-modal').classList.add('hidden')">Cancel</button>
      <button class="btn btn-primary"
        onclick="document.getElementById('demo-modal').classList.add('hidden')">Confirm</button>
    </div>
  </div>
</div>

<button type="button" id="demo-modal-chain-open">Start chain…</button>

<!-- 1) Confirm -->
<div id="demo-modal-chain-confirm" class="modal-overlay hidden"
     onclick="if(event.target===this)this.classList.add('hidden')">
  <div class="modal" role="dialog" aria-modal="true" onclick="event.stopPropagation()">
    <div class="modal-title">Continue?</div>
    <div class="modal-body">…</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-chain-close>Cancel</button>
      <button type="button" class="btn btn-primary" data-chain-continue>Continue</button>
    </div>
  </div>
</div>

<!-- 2) Form (add data-form-validate on form for Downstage.formValidate) -->
<div id="demo-modal-chain-form" class="modal-overlay hidden"
     onclick="if(event.target===this)this.classList.add('hidden')">
  <div class="modal" role="dialog" aria-modal="true" onclick="event.stopPropagation()">
    <div class="modal-title">Billing details</div>
    <div class="modal-body">
      <form id="demo-form-chain" novalidate>
        <div class="field">
          <label class="label" for="line1">Address</label>
          <input id="line1" class="input" name="line1" required>
          <span class="error" aria-live="polite"></span>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-chain-close>Cancel</button>
      <button type="submit" class="btn btn-primary" form="demo-form-chain">Save</button>
    </div>
  </div>
</div>

Open the first overlay, then swap to the second on Continue; wire data-chain-close / data-chain-continue. Full logic: demo/demo.js (search for demo-modal-chain).

document.getElementById('demo-modal-chain-open')
  .addEventListener('click', function () {
    document.getElementById('demo-modal-chain-confirm').classList.remove('hidden');
  });
// Continue → hide confirm, show form modal
// Cancel → .classList.add('hidden') on active overlay

<div id="my-slideover" class="slideover-overlay hidden" aria-hidden="true">
  <aside class="slideover-panel" role="dialog" aria-labelledby="so-title">
    <div class="slideover-header">
      <h2 class="slideover-title" id="so-title">Filters</h2>
      <button type="button" class="btn btn-ghost btn-sm" data-slideover-close aria-label="Close">×</button>
    </div>
    <div class="slideover-body">…</div>
    <div class="slideover-footer">
      <button type="button" class="btn btn-primary">Apply</button>
    </div>
  </aside>
</div>

No dedicated Downstage.slideover module — toggle .hidden on the overlay and sync aria-hidden. Close targets use [data-slideover-close].

var el = document.getElementById('demo-slideover');
document.getElementById('demo-slideover-open').addEventListener('click', function () {
  el.classList.remove('hidden');
  el.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
});
el.querySelectorAll('[data-slideover-close]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    el.classList.add('hidden');
    el.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
  });
});

Reference implementation: demo/demo.js.

<nav class="nav-vertical" style="max-width: 200px;">
  <a href="#" class="active">Settings</a>
  <a href="#">Account</a>
  <a href="#">Domain</a>
  <a href="#">Export</a>
  <a href="#">Feedback</a>
</nav>

<div class="wizard" data-wizard>
  <ol class="wizard-nav" role="tablist" aria-label="Wizard steps">
    <li>
      <button type="button" class="wizard-nav-item" data-wizard-goto="0" role="tab">
        <span class="wizard-nav-num" aria-hidden="true">1</span> Basics
      </button>
    </li>
    <li>…</li>
  </ol>
  <div class="wizard-panels">
    <section class="wizard-panel">…</section>
    <section class="wizard-panel" hidden>…</section>
  </div>
  <div class="wizard-footer">
    <span class="wizard-meta" data-wizard-progress></span>
    <button type="button" class="btn btn-ghost" data-wizard-prev>Previous</button>
    <button type="button" class="btn btn-primary" data-wizard-next>Next</button>
  </div>
</div>

<!-- Free navigation (any step from nav) -->
<div class="wizard wizard--vertical" data-wizard data-wizard-free="true"> … </div>

Downstage.wizard.mount(document.querySelector('#my-wizard'), {
  free: false,
  onStepChange: function (step, total) { console.log(step, total); },
  onComplete: function () { console.log('done'); }
});

// API returned by mount:
// .goToStep(0), .next(), .prev(), .getStep(), .getTotal()