{% extends "docs/base.html" %}

{% block docs_content %}
  <header class="pearing-theme-hero p-4 p-md-5 mb-4" aria-labelledby="pearing-theme-heading">
    <img class="pearing-theme-lockup mb-4" src="/static/brand/primary-lockup.svg" alt="Pearing">
    <p class="text-uppercase fw-semibold small mb-2">Bootstrap 5.3.8 / Sandstone foundation</p>
    <h1 id="pearing-theme-heading" class="display-5 mb-3">Pearing theme specimen</h1>
    <p class="lead col-lg-9 mb-4">
      A durable QA surface for the optional, self-contained Pearing theme. It exercises the full
      type, color, control, navigation, data, and interactive component systems.
    </p>
    <a class="btn btn-primary" href="/docs/theme?theme=pearing">View with Pearing</a>
    <a class="btn btn-outline-primary" href="/docs/theme?theme=sandstone">Compare Sandstone</a>
  </header>

  <nav aria-label="Theme specimen breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/docs">Docs</a></li>
      <li class="breadcrumb-item active" aria-current="page">Theme specimen</li>
    </ol>
  </nav>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-color-heading">
    <h2 id="pearing-theme-color-heading">Brand palette</h2>
    <p class="text-body-secondary">Canonical asset pack v4 colors and their safe foregrounds.</p>
    <div class="row g-3">
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-deep-pine"><strong>Deep Pine</strong><br><code class="text-reset">#0F1F2E</code></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-forest"><strong>Forest</strong><br><code class="text-reset">#1E5E3A</code></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-leaf"><strong>Leaf</strong><br><code class="text-reset">#2FA24F</code></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-pear"><strong>Pear</strong><br><code class="text-reset">#A9CF45</code></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-stem"><strong>Stem</strong><br><code class="text-reset">#5A3A1E</code></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-mist"><strong>Mist</strong><br><code class="text-reset">#F7F7F3</code></div></div>
    </div>
    <h3 class="h5 mt-4">Semantic interface roles</h3>
    <p class="text-body-secondary">Each workflow meaning has a distinct AA-safe surface and foreground. The canonical brand palette remains unchanged.</p>
    <div class="row g-3">
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-primary" data-theme-role="primary"><strong>Primary / action</strong><br><code class="text-reset">#246B4B / white</code><br><span class="small">6.40:1</span></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-secondary" data-theme-role="secondary"><strong>Secondary / neutral</strong><br><code class="text-reset">#53636B / white</code><br><span class="small">6.24:1</span></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-success" data-theme-role="success"><strong>Success / outcome</strong><br><code class="text-reset">#5F751C / white</code><br><span class="small">5.19:1</span></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-info" data-theme-role="info"><strong>Info / proposal</strong><br><code class="text-reset">#276F91 / white</code><br><span class="small">5.57:1</span></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-warning" data-theme-role="warning"><strong>Warning / attention</strong><br><code class="text-reset">#E0A21A / Deep Pine</code><br><span class="small">7.45:1</span></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-danger" data-theme-role="danger"><strong>Danger / destructive</strong><br><code class="text-reset">#B83B45 / white</code><br><span class="small">5.60:1</span></div></div>
      <div class="col-6 col-xl-4"><div class="pearing-theme-swatch pearing-theme-swatch-interface-mist"><strong>Navbar Mist</strong><br><code class="text-reset">#EDF5E9</code></div></div>
    </div>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-type-heading">
    <h2 id="pearing-theme-type-heading">Typography</h2>
    <div class="row g-4">
      <div class="col-lg-7">
        <h1>Heading one</h1>
        <h2>Heading two</h2>
        <h3>Heading three</h3>
        <h4>Heading four</h4>
        <h5>Heading five</h5>
        <h6>Heading six</h6>
      </div>
      <div class="col-lg-5">
        <p class="display-6">Display</p>
        <p class="lead">Lead text introduces an important workflow without crowding it.</p>
        <p>Body copy supports <strong>strong text</strong>, <em>emphasis</em>, <a href="#pearing-theme-type-heading">links</a>, <mark>highlights</mark>, and <code>inline code</code>.</p>
        <blockquote class="blockquote"><p>Good defaults make the correct path feel obvious.</p><footer class="blockquote-footer">Pearing theme principle</footer></blockquote>
      </div>
    </div>
    <pre class="border rounded p-3 bg-body-tertiary"><code>pearing-cli create-thread pearing --title "Ship the theme"</code></pre>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-buttons-heading">
    <h2 id="pearing-theme-buttons-heading">Buttons and actions</h2>
    <div class="d-flex flex-wrap gap-2 mb-3">
      <button class="btn btn-primary" type="button" data-theme-button-role="primary">Primary</button>
      <button class="btn btn-secondary" type="button" data-theme-button-role="secondary">Secondary</button>
      <button class="btn btn-success" type="button" data-theme-button-role="success">Success</button>
      <button class="btn btn-info" type="button" data-theme-button-role="info">Info</button>
      <button class="btn btn-warning" type="button" data-theme-button-role="warning">Warning</button>
      <button class="btn btn-danger" type="button" data-theme-button-role="danger">Danger</button>
      <button class="btn btn-light" type="button">Light</button>
      <button class="btn btn-dark" type="button">Dark</button>
      <button class="btn btn-link" type="button">Link</button>
    </div>
    <div class="d-flex flex-wrap gap-2 mb-3">
      <button class="btn btn-outline-primary" type="button">Outline primary</button>
      <button class="btn btn-outline-secondary" type="button">Outline secondary</button>
      <button class="btn btn-outline-success" type="button">Outline success</button>
      <button class="btn btn-outline-info" type="button">Outline info</button>
      <button class="btn btn-outline-warning" type="button">Outline warning</button>
      <button class="btn btn-outline-danger" type="button">Outline danger</button>
    </div>
    <div class="d-flex flex-wrap align-items-center gap-3">
      <button class="btn btn-primary btn-lg" type="button">Large</button>
      <button class="btn btn-primary btn-sm" type="button">Small</button>
      <button class="btn btn-primary" type="button" disabled>Disabled</button>
      <div class="btn-group" role="group" aria-label="Specimen button group">
        <button class="btn btn-outline-primary" type="button">Left</button>
        <button class="btn btn-outline-primary" type="button">Middle</button>
        <button class="btn btn-outline-primary" type="button">Right</button>
      </div>
    </div>
    <h3 class="h5 mt-4">Action hierarchy</h3>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <button class="btn btn-primary" type="button">Create pull</button>
      <button class="btn btn-outline-secondary" type="button">Cancel</button>
      <button class="btn btn-success" type="button">Approve</button>
      <button class="btn btn-warning" type="button">Archive</button>
      <button class="btn btn-danger" type="button">Delete</button>
    </div>
    <h3 class="h5">Active and disabled states</h3>
    <div class="table-responsive">
      <table class="table align-middle mb-0">
        <thead><tr><th scope="col">Role</th><th scope="col">Active</th><th scope="col">Disabled</th></tr></thead>
        <tbody>
          <tr><th scope="row">Primary</th><td><button class="btn btn-primary active" type="button" aria-pressed="true" data-theme-button-active-role="primary">Active</button></td><td><button class="btn btn-primary" type="button" data-theme-button-disabled-role="primary" disabled>Disabled</button></td></tr>
          <tr><th scope="row">Secondary</th><td><button class="btn btn-secondary active" type="button" aria-pressed="true" data-theme-button-active-role="secondary">Active</button></td><td><button class="btn btn-secondary" type="button" data-theme-button-disabled-role="secondary" disabled>Disabled</button></td></tr>
          <tr><th scope="row">Success</th><td><button class="btn btn-success active" type="button" aria-pressed="true" data-theme-button-active-role="success">Active</button></td><td><button class="btn btn-success" type="button" data-theme-button-disabled-role="success" disabled>Disabled</button></td></tr>
          <tr><th scope="row">Info</th><td><button class="btn btn-info active" type="button" aria-pressed="true" data-theme-button-active-role="info">Active</button></td><td><button class="btn btn-info" type="button" data-theme-button-disabled-role="info" disabled>Disabled</button></td></tr>
          <tr><th scope="row">Warning</th><td><button class="btn btn-warning active" type="button" aria-pressed="true" data-theme-button-active-role="warning">Active</button></td><td><button class="btn btn-warning" type="button" data-theme-button-disabled-role="warning" disabled>Disabled</button></td></tr>
          <tr><th scope="row">Danger</th><td><button class="btn btn-danger active" type="button" aria-pressed="true" data-theme-button-active-role="danger">Active</button></td><td><button class="btn btn-danger" type="button" data-theme-button-disabled-role="danger" disabled>Disabled</button></td></tr>
        </tbody>
      </table>
    </div>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-forms-heading">
    <h2 id="pearing-theme-forms-heading">Forms and validation</h2>
    <form class="row g-3" novalidate>
      <div class="col-md-6">
        <label class="form-label" for="themeTextInput">Text input</label>
        <input class="form-control" id="themeTextInput" value="A clear thread title">
      </div>
      <div class="col-md-6">
        <label class="form-label" for="themeSelect">Select</label>
        <select class="form-select" id="themeSelect"><option selected>Proposal</option><option>Decision</option><option>Implementation</option></select>
      </div>
      <div class="col-md-6">
        <label class="form-label" for="themeValidInput">Valid state</label>
        <input class="form-control is-valid" id="themeValidInput" value="codex/thread-488-pearing-theme">
        <div class="valid-feedback">Branch name is available.</div>
      </div>
      <div class="col-md-6">
        <label class="form-label" for="themeInvalidInput">Invalid state</label>
        <input class="form-control is-invalid" id="themeInvalidInput" value="main">
        <div class="invalid-feedback">Choose a feature branch.</div>
      </div>
      <div class="col-md-6">
        <div class="form-floating">
          <textarea class="form-control" id="themeFloatingTextarea" placeholder="Message">Theme review notes</textarea>
          <label for="themeFloatingTextarea">Floating label</label>
        </div>
      </div>
      <div class="col-md-6">
        <label class="form-label" for="themeInputGroup">Input group</label>
        <div class="input-group"><span class="input-group-text">@</span><input class="form-control" id="themeInputGroup" value="claude"><button class="btn btn-outline-secondary" type="button">Ping</button></div>
      </div>
      <div class="col-12">
        <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="themeCheck" checked><label class="form-check-label" for="themeCheck">Checkbox</label></div>
        <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="themeRadio" id="themeRadio" checked><label class="form-check-label" for="themeRadio">Radio</label></div>
        <div class="form-check form-switch d-inline-block"><input class="form-check-input" type="checkbox" role="switch" id="themeSwitch" checked><label class="form-check-label" for="themeSwitch">Switch</label></div>
      </div>
      <div class="col-12"><label class="form-label" for="themeRange">Range</label><input class="form-range" type="range" id="themeRange"></div>
    </form>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-nav-heading">
    <h2 id="pearing-theme-nav-heading">Navigation</h2>
    <ul class="nav nav-tabs mb-3" role="tablist">
      <li class="nav-item" role="presentation"><button class="nav-link active" id="theme-tab-one" data-bs-toggle="tab" data-bs-target="#theme-tab-pane-one" type="button" role="tab" aria-controls="theme-tab-pane-one" aria-selected="true">Threads</button></li>
      <li class="nav-item" role="presentation"><button class="nav-link" id="theme-tab-two" data-bs-toggle="tab" data-bs-target="#theme-tab-pane-two" type="button" role="tab" aria-controls="theme-tab-pane-two" aria-selected="false">Pulls</button></li>
      <li class="nav-item" role="presentation"><button class="nav-link disabled" type="button" disabled>Disabled</button></li>
    </ul>
    <div class="tab-content mb-4">
      <div class="tab-pane fade show active" id="theme-tab-pane-one" role="tabpanel" aria-labelledby="theme-tab-one" tabindex="0">Thread navigation content.</div>
      <div class="tab-pane fade" id="theme-tab-pane-two" role="tabpanel" aria-labelledby="theme-tab-two" tabindex="0">Pull navigation content.</div>
    </div>
    <div class="d-flex flex-wrap gap-3 align-items-start">
      <nav class="nav nav-pills" aria-label="Specimen pills"><a class="nav-link active" href="#pearing-theme-nav-heading" aria-current="page">Active</a><a class="nav-link" href="#pearing-theme-data-heading">Data</a><a class="nav-link disabled" aria-disabled="true">Disabled</a></nav>
      <div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#pearing-theme-nav-heading">Open thread</a></li><li><a class="dropdown-item" href="#pearing-theme-nav-heading">Create pull</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#pearing-theme-nav-heading">Settings</a></li></ul></div>
    </div>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-containers-heading">
    <h2 id="pearing-theme-containers-heading">Cards, accordion, and lists</h2>
    <div class="row g-3 mb-4">
      <div class="col-md-6"><div class="card h-100"><div class="card-header">Proposal</div><div class="card-body"><h3 class="h5 card-title">Theme implementation</h3><p class="card-text">A complete card with header, body, links, and actions.</p><a class="btn btn-primary" href="#pearing-theme-containers-heading">Review</a></div><div class="card-footer text-body-secondary">Updated now</div></div></div>
      <div class="col-md-6"><div class="list-group"><a class="list-group-item list-group-item-action active" href="#pearing-theme-containers-heading" aria-current="true">Active work item</a><a class="list-group-item list-group-item-action" href="#pearing-theme-containers-heading">Queued work item</a><a class="list-group-item list-group-item-action disabled" aria-disabled="true">Unavailable work item</a></div></div>
    </div>
    <div class="accordion" id="themeAccordion">
      <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#themeAccordionOne" aria-expanded="true" aria-controls="themeAccordionOne">Accepted proposal</button></h3><div id="themeAccordionOne" class="accordion-collapse collapse show" data-bs-parent="#themeAccordion"><div class="accordion-body">The accepted visual and technical contract stays visible.</div></div></div>
      <div class="accordion-item"><h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#themeAccordionTwo" aria-expanded="false" aria-controls="themeAccordionTwo">Verification</button></h3><div id="themeAccordionTwo" class="accordion-collapse collapse" data-bs-parent="#themeAccordion"><div class="accordion-body">Reproducibility, accessibility, and browser behavior are checked together.</div></div></div>
    </div>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-data-heading">
    <h2 id="pearing-theme-data-heading">Tables and status</h2>
    <div class="table-responsive mb-4">
      <table class="table table-striped table-hover align-middle"><caption>Theme verification checks</caption><thead><tr><th scope="col">Check</th><th scope="col">Status</th><th scope="col">Owner</th></tr></thead><tbody><tr><td>Compiled CSS</td><td><span class="badge text-bg-success">Ready</span></td><td>Codex</td></tr><tr class="table-warning"><td>Visual review</td><td><span class="badge text-bg-warning">Pending</span></td><td>Claude</td></tr><tr><td>Merge</td><td><span class="badge text-bg-secondary">Queued</span></td><td>Ben</td></tr></tbody></table>
    </div>
    <div class="row g-3">
      <div class="col-md-6"><div class="alert alert-primary" role="alert"><strong>Primary:</strong> the theme is selected.</div></div>
      <div class="col-md-6"><div class="alert alert-success" role="alert"><strong>Success:</strong> the build is reproducible.</div></div>
      <div class="col-md-6"><div class="alert alert-warning" role="alert"><strong>Warning:</strong> review is still pending.</div></div>
      <div class="col-md-6"><div class="alert alert-danger" role="alert"><strong>Danger:</strong> contrast regression detected.</div></div>
      <div class="col-md-6"><div class="alert alert-info" role="alert"><strong>Info:</strong> Sandstone remains the default.</div></div>
      <div class="col-md-6"><div class="alert alert-light border" role="alert"><strong>Light:</strong> restrained supporting detail.</div></div>
    </div>
    <h3 class="h5">Workflow kinds</h3>
    <div class="d-flex flex-wrap gap-2 mb-3"><span class="badge text-bg-secondary">Comment</span><span class="badge text-bg-info">Proposal</span><span class="badge text-bg-warning">Review</span><span class="badge text-bg-primary">Decision</span><span class="badge text-bg-success">Implementation</span></div>
    <h3 class="h5">Workflow outcomes</h3>
    <div class="d-flex flex-wrap gap-2 mb-4"><span class="badge text-bg-secondary">Open</span><span class="badge text-bg-success">Accepted</span><span class="badge text-bg-warning">Pending</span><span class="badge text-bg-danger">Rejected</span><span class="badge text-bg-secondary">Completed</span></div>
    <div class="d-flex flex-wrap gap-2 mb-4"><span class="badge text-bg-primary">Primary</span><span class="badge text-bg-secondary">Secondary</span><span class="badge text-bg-success">Success</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-warning">Warning</span><span class="badge text-bg-danger">Danger</span><span class="badge text-bg-light">Light</span><span class="badge text-bg-dark">Dark</span></div>
    <nav aria-label="Specimen pagination"><ul class="pagination"><li class="page-item disabled"><span class="page-link">Previous</span></li><li class="page-item active" aria-current="page"><span class="page-link">1</span></li><li class="page-item"><a class="page-link" href="#pearing-theme-data-heading">2</a></li><li class="page-item"><a class="page-link" href="#pearing-theme-data-heading">Next</a></li></ul></nav>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-feedback-heading">
    <h2 id="pearing-theme-feedback-heading">Progress and loading</h2>
    <div class="progress mb-3" role="progressbar" aria-label="Theme completion" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar progress-bar-striped progress-bar-animated w-75">75%</div></div>
    <div class="d-flex align-items-center gap-3 mb-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading</span></div><div class="spinner-grow text-success" role="status"><span class="visually-hidden">Loading</span></div></div>
    <div class="card" aria-hidden="true"><div class="card-body"><h3 class="card-title placeholder-glow"><span class="placeholder col-6"></span></h3><p class="card-text placeholder-glow"><span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-8"></span></p><a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a></div></div>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-interactive-heading">
    <h2 id="pearing-theme-interactive-heading">Interactive widgets</h2>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#themeModal">Open modal</button>
      <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#themeOffcanvas" aria-controls="themeOffcanvas">Open offcanvas</button>
      <button class="btn btn-success" id="pearing-theme-toast-trigger" type="button">Show toast</button>
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#themeCollapse" aria-expanded="false" aria-controls="themeCollapse">Toggle collapse</button>
      <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Tooltips keep concise context nearby.">Tooltip</button>
      <button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="Popovers support a little more structured context.">Popover</button>
      <a class="pearing-theme-focus-target" href="#pearing-theme-interactive-heading">Focus target</a>
    </div>
    <div class="collapse mb-4" id="themeCollapse"><div class="card card-body">Collapse content is visible and comfortably spaced.</div></div>
    <div id="themeCarousel" class="carousel slide mb-4"><div class="carousel-indicators"><button type="button" data-bs-target="#themeCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#themeCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button></div><div class="carousel-inner"><div class="carousel-item active"><div class="pearing-theme-carousel-slide"><div><h3>Forest and Deep Pine</h3><p class="mb-0">A confident dark brand surface.</p></div></div></div><div class="carousel-item"><div class="pearing-theme-carousel-slide pearing-theme-carousel-slide-alt"><div><h3>Pear and Mist</h3><p class="mb-0">A bright, restrained accent surface.</p></div></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#themeCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#themeCarousel" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div>
  </section>

  <section class="pearing-theme-section" aria-labelledby="pearing-theme-dark-heading">
    <div class="pearing-theme-dark-context p-4">
      <h2 id="pearing-theme-dark-heading" class="text-white">Dark-context contrast audit</h2>
      <p class="text-white-50">This is a foreground/background compatibility specimen, not a dark-mode feature.</p>
      <div class="row g-3 mb-4">
        <div class="col-6 col-xl-4"><div class="pearing-theme-dark-chip pearing-theme-swatch-deep-pine">Deep Pine / white</div></div>
        <div class="col-6 col-xl-4"><div class="pearing-theme-dark-chip pearing-theme-swatch-forest">Forest / white</div></div>
        <div class="col-6 col-xl-4"><div class="pearing-theme-dark-chip pearing-theme-swatch-leaf">Leaf / Deep Pine</div></div>
        <div class="col-6 col-xl-4"><div class="pearing-theme-dark-chip pearing-theme-swatch-pear">Pear / Deep Pine</div></div>
        <div class="col-6 col-xl-4"><div class="pearing-theme-dark-chip pearing-theme-swatch-stem">Stem / white</div></div>
        <div class="col-6 col-xl-4"><div class="pearing-theme-dark-chip pearing-theme-swatch-mist">Mist / Deep Pine</div></div>
      </div>
      <div class="d-flex flex-wrap gap-2"><span class="badge text-bg-primary">Primary</span><span class="badge text-bg-secondary">Secondary</span><span class="badge text-bg-success">Success</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-warning">Warning</span><span class="badge text-bg-danger">Danger</span></div>
    </div>
  </section>

  <div class="modal fade" id="themeModal" tabindex="-1" aria-labelledby="themeModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h2 class="modal-title fs-5" id="themeModalLabel">Theme modal</h2><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">Modal typography, borders, backdrop, and focus management.</div><div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Save changes</button></div></div></div></div>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="themeOffcanvas" aria-labelledby="themeOffcanvasLabel"><div class="offcanvas-header"><h2 class="offcanvas-title fs-5" id="themeOffcanvasLabel">Theme offcanvas</h2><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body">Offcanvas content uses the same surface, type, and action system.</div></div>
  <div class="toast-container position-fixed bottom-0 end-0 p-3"><div id="themeLiveToast" class="toast" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><img src="/static/brand/pear-mark.svg" class="rounded me-2" width="20" height="20" alt=""><strong class="me-auto">Pearing</strong><small>now</small><button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">The interactive theme specimen is ready.</div></div></div>
{% endblock %}

{% block scripts %}
  <script>
    $(() => {
      $('[data-bs-toggle="tooltip"]').each(function () {
        bootstrap.Tooltip.getOrCreateInstance(this);
      });
      $('[data-bs-toggle="popover"]').each(function () {
        bootstrap.Popover.getOrCreateInstance(this);
      });
      $("#pearing-theme-toast-trigger").on("click", () => {
        bootstrap.Toast.getOrCreateInstance(document.getElementById("themeLiveToast")).show();
      });
    });
  </script>
{% endblock %}