Actionbar + Accordion Showcase

This showcase combines <dsx-actionbar>, <dsx-accordion>, and <dsx-accordion-item> in a realistic long-form editing page.

Live Preview

What it demonstrates

A fixed, full-width actionbar with back navigation, title context, and primary page actions
Accordion sections that break a larger form into scannable groups
An expanded first section for active editing, with follow-up sections collapsed by default

Components used

<dsx-actionbar>
<dsx-accordion>
<dsx-accordion-item>

Imports

import '@bnotk/dsx/components/actionbar.js';
import '@bnotk/dsx/components/accordion.js';

The docs demo imports the bundled components with:

<script type="module" src="/demos/_shared/components.js"></script>

Layout pattern

<dsx-actionbar class="page-actionbar">
  <div slot="left">
    <button class="dsx-btn dsx-btn--light dsx-btn--icon" type="button" aria-label="Back">
      <!-- icon -->
    </button>
    <h1>Edit application record</h1>
  </div>

  <div slot="right">
    <button class="dsx-btn dsx-btn--secondary" type="button">Cancel</button>
    <button class="dsx-btn dsx-btn--primary" type="button">Save</button>
  </div>
</dsx-actionbar>

<dsx-accordion variant="card">
  <dsx-accordion-item header="Personal Details" expanded>
    <!-- active section fields -->
  </dsx-accordion-item>
  <dsx-accordion-item header="Contact Information">
    <!-- additional sections -->
  </dsx-accordion-item>
  <dsx-accordion-item header="Preferences"></dsx-accordion-item>
  <dsx-accordion-item header="Notes"></dsx-accordion-item>
</dsx-accordion>

Notes

The fixed actionbar behavior in this showcase is applied with page-level CSS on the <dsx-actionbar> host so the action buttons stay visible while the accordion content scrolls beneath it.