<!-- Trigger -->
<button class="sui-btn" data-sui-sheet="#actionSheet">More Actions</button>

<!-- Sheet -->
<div id="actionSheet" class="sui-sheet" aria-modal="true" role="dialog" aria-label="Actions">
  <div class="sui-sheet-panel">
    <div class="sui-sheet-handle"></div>
    <div class="recipe-action-sheet">
      <button class="sui-btn sui-btn-ghost sui-btn-full recipe-action-sheet-btn">Edit</button>
      <button class="sui-btn sui-btn-ghost sui-btn-full recipe-action-sheet-btn">Duplicate</button>
      <button class="sui-btn sui-btn-ghost sui-btn-full recipe-action-sheet-btn">Share</button>
      <hr class="sui-divider">
      <button class="sui-btn sui-btn-ghost sui-btn-full recipe-action-sheet-btn" style="color: var(--sui-error);">Delete</button>
    </div>
  </div>
</div>

<!-- Custom CSS (~15 lines) -->
<style>
.recipe-action-sheet { display: flex; flex-direction: column; }
.recipe-action-sheet-btn { justify-content: flex-start; border-radius: var(--sui-radius-md); }
.recipe-action-sheet .sui-divider { margin: var(--sui-space-1) 0; }
</style>

<!-- Each screen is a full-viewport flex column -->
<div class="sui-screen is-active" data-screen="matches">
  <div class="sui-screen-header">
    <!-- Safe area inset handled automatically -->
    <strong>MatchPoint</strong>
  </div>
  <div class="sui-screen-body">
    <!-- Scrollable content -->
    <div class="sui-card sui-card-interactive">...</div>
  </div>
  <div class="sui-screen-footer">
    <!-- Safe area inset handled automatically -->
    <div class="sui-segmented">...</div>
  </div>
</div>

<!-- Switch screens by toggling .is-active -->
<div class="sui-screen" data-screen="schedule">...</div>
<div class="sui-screen" data-screen="messages">...</div>

<!-- For single-screen apps, use sui-screen-solo -->
<div class="sui-screen sui-screen-solo">...</div>

<!-- Custom CSS: 0 lines. All SUI classes. -->

<!-- App Shell Scaffold (~15 lines custom CSS) -->
<style>
.app-shell { display: flex; flex-direction: column; height: 100vh; }
.app-shell .sui-topbar { flex-shrink: 0; }
.app-shell-body { display: flex; flex: 1; min-height: 0; }
.app-shell-body .sui-sidenav {
  position: static; height: auto; border-radius: 0;
  border: none; border-right: 1px solid var(--sui-border);
}
.app-shell-body .sui-sidenav-panel {
  position: static; width: 240px; height: 100%; box-shadow: none;
}
.app-shell-main { flex: 1; overflow-y: auto; padding: var(--sui-space-4); }
@media (max-width: 768px) {
  .app-shell-body .sui-sidenav { display: none; }
}
</style>

<div class="app-shell">
  <header class="sui-topbar">...</header>
  <div class="app-shell-body">
    <nav class="sui-sidenav" aria-label="App navigation">
      <div class="sui-sidenav-panel">
        <a href="/dashboard" class="sui-sidenav-link is-active">Dashboard</a>
        <a href="/contacts" class="sui-sidenav-link">Contacts</a>
      </div>
    </nav>
    <main class="app-shell-main">
      <!-- Your page content -->
    </main>
  </div>
</div>

<!-- Author + metadata -->
<div class="sui-flex sui-items-center sui-gap-3">
  <span class="sui-avatar sui-avatar-md">AS</span>
  <div>
    <strong>Adrian Speyer</strong>
    <div class="sui-meta">
      <span>Feb 16, 2026</span>
      <span>842 words</span>
      <span>4 min read</span>
    </div>
  </div>
</div>

<!-- Article body — zero custom CSS -->
<div class="sui-prose">
  <h2>Title</h2>
  <p>Paragraph with <mark class="sui-mark">search matches</mark>
  and <mark class="sui-mark sui-mark-current">current match</mark>.</p>
  <blockquote><p>A quote.</p></blockquote>
</div>

<!-- Custom CSS: 0 lines. All SUI classes. -->

<div class="sui-grid-2 sui-gap-2" role="radiogroup" aria-label="Select plan">
  <button class="sui-btn sui-btn-ghost recipe-btn-group-option" role="radio" aria-checked="false">
    <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-act-zap"/></svg>Starter
  </button>
  <button class="sui-btn sui-btn-ghost recipe-btn-group-option is-selected" role="radio" aria-checked="true">
    <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-act-rocket"/></svg>Pro
  </button>
  <!-- More options... -->
</div>

<!-- Custom CSS (~10 lines) -->
<style>
.recipe-btn-group-option.is-selected {
  border-color: var(--sui-blue-primary);
  background: var(--sui-blue-soft);
  color: var(--sui-blue-primary);
  font-weight: var(--sui-weight-semibold);
}
</style>

<!-- JS: toggle is-selected + aria-checked on click -->

<!-- Chart.js Integration Recipe — copy into your project -->

<!-- 1. Load Chart.js (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>

<!-- 2. SUI token helper (paste in your JS) -->
<script>
  function getSUIToken(name) {
    return getComputedStyle(document.documentElement)
      .getPropertyValue(name).trim();
  }
  function suiChartDefaults() {
    Chart.defaults.color = getSUIToken('--sui-text-muted');
    Chart.defaults.borderColor = getSUIToken('--sui-border');
    Chart.defaults.font.family =
      getSUIToken('--sui-font-primary') || 'Inter, system-ui, sans-serif';
    return {
      blue:    getSUIToken('--sui-blue-primary'),
      green:   getSUIToken('--sui-success-strong'),
      red:     getSUIToken('--sui-error-strong'),
      amber:   getSUIToken('--sui-warning-strong'),
      purple:  getSUIToken('--sui-pro-strong'),
      blueSoft:  getSUIToken('--sui-blue-soft'),
      greenSoft: getSUIToken('--sui-success-soft'),
    };
  }
  var t = suiChartDefaults();
</script>

<!-- 3. Use token colours in your charts -->
<canvas id="myChart"></canvas>
<script>
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
        label: 'Revenue',
        data: [12, 19, 8],
        backgroundColor: t.blue,
        borderRadius: 4
      }]
    }
  });
</script>

<!-- 4. Optional: re-render on theme toggle -->
<script>
  new MutationObserver(function() {
    var t = suiChartDefaults();
    // Update your chart datasets with new colours, then chart.update()
  }).observe(document.documentElement,
    { attributes: true, attributeFilter: ['data-theme'] });
</script>

<!-- Open with Ctrl/Cmd+K -->
<dialog class="sui-dialog" id="cmdk" aria-label="Command palette">
  <div class="sui-modal-body" style="max-width:480px;">
    <input class="sui-input" type="text" placeholder="Type a command..."
           role="combobox" aria-expanded="true">
    <ul role="listbox">
      <li role="option">
        <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-act-plus"/></svg> New Contact
        <kbd class="sui-kbd">N</kbd>
      </li>
    </ul>
  </div>
</dialog>

<script>
document.addEventListener('keydown', e => {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    SUI.modal.open('#cmdk');
  }
});
</script>

<button class="sui-btn sui-btn-danger" data-sui-modal="#confirm">
  Delete account
</button>

<dialog class="sui-dialog" id="confirm"
        role="alertdialog" aria-label="Confirm deletion">
  <div class="sui-modal-body">
    <h3>Delete your account?</h3>
    <p>This action is permanent.</p>
    <div class="sui-flex sui-gap-2 sui-mt-4">
      <button class="sui-btn sui-btn-danger"
              onclick="SUI.modal.close('#confirm')">Delete</button>
      <button class="sui-btn sui-btn-ghost"
              onclick="SUI.modal.close('#confirm')">Cancel</button>
    </div>
  </div>
</dialog>

<!-- Custom CSS: 0 lines. All SUI classes. -->
<!-- Note: there is no SUI.modal.confirm() API — build your
     own confirmation logic. This recipe shows the pattern. -->

<div class="sui-card sui-card-flush">
  <div class="sui-toolbar sui-toolbar-bordered">
    <button class="sui-toolbar-btn" aria-pressed="true">...</button>
    <div class="sui-toolbar-sep"></div>
    <input class="sui-input" type="search" placeholder="Search...">
  </div>
  <div class="recipe-doc-list-item">
    <div class="sui-flex sui-items-center sui-gap-3">
      <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-file-text"/></svg>
      <div>
        <strong>Document Name.md</strong>
        <div class="sui-meta">
          <span>12,340 words</span>
          <span>Updated 2h ago</span>
        </div>
      </div>
      <span class="sui-badge sui-badge-success sui-badge-sm">Published</span>
    </div>
  </div>
</div>

<!-- Custom CSS (~3 lines) -->
<style>
.recipe-doc-list-item { padding: var(--sui-space-3); border-bottom: 1px solid var(--sui-border); cursor: pointer; }
.recipe-doc-list-item:hover { background: var(--sui-bg-elevated); }
</style>

<!-- FilePond Integration Recipe — copy into your project -->

<!-- 1. Load FilePond (CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.css" />
<script src="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.js" defer></script>

<!-- 2. SUI token overrides -->
<style>
  .filepond--root { font-family: var(--sui-font-primary); }
  .filepond--panel-root {
    background-color: var(--sui-bg-elevated);
    border-radius: var(--sui-radius-md);
  }
  .filepond--drop-label {
    color: var(--sui-text-secondary);
    font-size: var(--sui-text-small);
  }
  .filepond--label-action {
    color: var(--sui-blue-primary);
    text-decoration-color: var(--sui-blue-primary);
  }
  .filepond--item-panel {
    border-radius: var(--sui-radius-sm);
  }
  .filepond--root:focus-within .filepond--panel-root {
    outline: 3px solid var(--sui-blue-soft);
    outline-offset: 2px;
  }
  [data-filepond-item-state="processing-complete"]
    .filepond--item-panel {
    background-color: var(--sui-success-strong);
  }
  [data-filepond-item-state*="error"]
    .filepond--item-panel {
    background-color: var(--sui-error-strong);
  }
</style>

<!-- 3. Use with a file input -->
<input type="file" class="filepond" id="myUpload" multiple />

<script>
  FilePond.create(document.getElementById('myUpload'), {
    allowMultiple: true,
    server: '/api/upload', // your endpoint
    credits: false
  });
</script>

<!-- Flatpickr Integration Recipe — copy this into your project -->

<!-- 1. Load Flatpickr (CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script>

<!-- 2. SUI token overrides (paste in your <style> or CSS file) -->
<style>
  .flatpickr-calendar {
    background: var(--sui-bg-card);
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius-md);
    box-shadow: var(--sui-shadow-lg);
    font-family: var(--sui-font-primary);
    color: var(--sui-text-primary);
  }
  .flatpickr-calendar::before,
  .flatpickr-calendar::after { display: none; }
  /* Hide browser calendar picker icons */
  .flatpickr-input::-webkit-calendar-picker-indicator { display: none; }
  .flatpickr-months .flatpickr-month,
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: var(--sui-text-primary);
    fill: var(--sui-text-primary);
  }
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    color: var(--sui-text-secondary);
    fill: var(--sui-text-secondary);
  }
  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--sui-blue-primary);
  }
  .flatpickr-current-month input.cur-year {
    color: var(--sui-text-primary);
  }
  .flatpickr-weekdays { background: transparent; }
  .flatpickr-weekday {
    color: var(--sui-text-muted);
    font-weight: 600;
  }
  .flatpickr-day {
    color: var(--sui-text-primary);
    border-radius: var(--sui-radius-sm);
  }
  .flatpickr-day:hover {
    background: var(--sui-bg-elevated);
    border-color: var(--sui-bg-elevated);
  }
  .flatpickr-day.today {
    border-color: var(--sui-blue-primary);
    color: var(--sui-blue-primary);
  }
  .flatpickr-day.today:hover {
    background: var(--sui-blue-primary);
    border-color: var(--sui-blue-primary);
    color: #fff;
  }
  .flatpickr-day.selected,
  .flatpickr-day.selected:hover {
    background: var(--sui-btn-primary-bg);
    border-color: var(--sui-btn-primary-bg);
    color: #fff;
  }
  .flatpickr-day.flatpickr-disabled,
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
    color: var(--sui-text-muted);
  }
  .flatpickr-day.inRange {
    background: var(--sui-blue-soft);
    border-color: var(--sui-blue-soft);
    color: var(--sui-text-primary);
  }
  .flatpickr-time { border-top: 1px solid var(--sui-border); }
  .flatpickr-time input,
  .flatpickr-time .flatpickr-am-pm {
    color: var(--sui-text-primary);
  }
  .flatpickr-time input:hover,
  .flatpickr-time .flatpickr-am-pm:hover,
  .numInputWrapper:hover {
    background: var(--sui-bg-elevated);
  }
  /* Focus ring — matches SUI's canonical pattern */
  .flatpickr-day:focus {
    outline: 3px solid var(--sui-blue-soft);
    outline-offset: 2px;
  }
  .flatpickr-months .flatpickr-prev-month:focus-visible,
  .flatpickr-months .flatpickr-next-month:focus-visible {
    outline: 3px solid var(--sui-blue-soft);
    outline-offset: 2px;
  }
  /* Stacking — prevents clipping inside overflow:hidden containers */
  .flatpickr-calendar { z-index: 9999; }
</style>

<!-- 3. Use with SUI inputs -->
<label class="sui-input-label">Select date</label>
<input type="text" class="sui-input" id="myDate" placeholder="Pick a date…" />

<script>
  // appendTo: document.body prevents clipping inside overflow:hidden containers
  flatpickr('#myDate', { dateFormat: 'Y-m-d', appendTo: document.body });
</script>

<!-- Floating Action Bar — appears when items are selected -->
<!-- Custom CSS (not part of sui-components.css): -->
<style>
  .fab-bar {
    position: fixed;
    bottom: var(--sui-space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: var(--sui-space-2) var(--sui-space-3);
    white-space: nowrap;
    transition: opacity var(--sui-duration-fast) var(--sui-easing),
                transform var(--sui-duration-fast) var(--sui-easing);
  }
  .fab-bar[hidden] {
    display: block;
    opacity: 0;
    transform: translateX(-50%) translateY(1rem);
    pointer-events: none;
  }
</style>

<div class="sui-card sui-card-shadow fab-bar" id="bulkBar"
     role="toolbar" aria-label="Bulk actions" hidden>
  <div class="sui-flex sui-gap-2" style="align-items:center">
    <span class="sui-badge sui-badge-info" id="bulkCount">0 selected</span>
    <button class="sui-btn sui-btn-sm sui-btn-primary">
      <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-act-download"/></svg> Export
    </button>
    <button class="sui-btn sui-btn-sm sui-btn-danger">
      <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-act-trash-2"/></svg> Delete
    </button>
  </div>
</div>

<script>
  // Wire up your selection logic:
  function updateFab(selectedCount) {
    const bar = document.getElementById('bulkBar');
    const count = document.getElementById('bulkCount');
    bar.hidden = selectedCount === 0;
    count.textContent = selectedCount + ' selected';
  }
</script>

<!-- Display mode -->
<span class="recipe-inline-display" role="button" tabindex="0"
      aria-label="Edit company name">Acme Corporation</span>

<!-- Edit mode (toggled via JS) -->
<div class="sui-flex sui-gap-2" aria-live="polite">
  <input class="sui-input" type="text" value="Acme Corporation">
  <button class="sui-btn sui-btn-primary sui-btn-sm">Save</button>
  <button class="sui-btn sui-btn-ghost sui-btn-sm">Cancel</button>
</div>

<!-- Custom CSS (~4 lines) -->
<style>
.recipe-inline-display { cursor: pointer; border-bottom: 1px dashed var(--sui-border); padding: 2px 0; }
.recipe-inline-display:hover { border-color: var(--sui-blue-primary); }
</style>

<style>
.my-selection-bar {
  display: flex; align-items: center; gap: var(--sui-space-3);
  padding: var(--sui-space-2) var(--sui-space-3);
  background: var(--sui-blue-soft); border-radius: var(--sui-radius-sm);
  flex-wrap: wrap;
}
</style>

<div class="my-selection-bar">
  <span aria-live="polite"><strong>3 selected</strong></span>
  <button class="sui-btn sui-btn-primary sui-btn-sm">Email</button>
  <button class="sui-btn sui-btn-ghost sui-btn-sm">Tag</button>
  <button class="sui-btn sui-btn-danger sui-btn-sm">Delete</button>
  <button class="sui-btn sui-btn-ghost sui-btn-sm">Clear</button>
</div>

<!-- Table rows use .is-selected (v2.6.0) for visual state -->
<tr class="is-selected">...</tr>

<div class="sui-flex sui-flex-nowrap sui-scroll-x sui-gap-3">
  <div class="recipe-kanban-col">
    <div class="sui-kpi-label">To Do</div>
    <div class="sui-card sui-card-muted sui-card-interactive" tabindex="0">
      <strong>Task title</strong>
      <div class="sui-flex sui-items-center sui-gap-2">
        <span class="sui-avatar sui-avatar-sm">AS</span>
        <span class="sui-chip sui-chip-info">Label</span>
      </div>
    </div>
  </div>
  <!-- More columns... -->
</div>

<!-- Custom CSS (~6 lines) -->
<style>
.recipe-kanban-col { min-width: 260px; flex-shrink: 0; }
</style>

<table class="sui-table sui-table-interactive">
  <thead><tr><th>Name</th><th>Email</th><th>Stage</th></tr></thead>
  <tbody>
    <tr onclick="showDetail('jane')" style="cursor: pointer">
      <td>Jane Cooper</td>
      <td>jane@acme.com</td>
      <td><span class="sui-badge sui-badge-info">
        <span aria-hidden="true">&#x25CF;</span>Qualified
      </span></td>
    </tr>
  </tbody>
</table>

<div class="sui-panel" id="detailPanel"
     aria-label="Contact detail" aria-hidden="true">
  <div>
    <div class="sui-panel-header">
      <span class="sui-panel-title">Jane Cooper</span>
      <button class="sui-panel-close sui-btn sui-btn-ghost sui-btn-sm" type="button"
              aria-label="Close panel">&times;</button>
    </div>
    <div class="sui-panel-body" id="detailBody">...</div>
  </div>
</div>

<script>
function showDetail(id) {
  document.getElementById('detailBody').innerHTML = '...';
  SUI.panel.open('#detailPanel');
}
</script>

<div class="sui-badge-overlay">
  <button data-sui-panel="#notifPanel"
          aria-label="Notifications, 3 unread"
          aria-expanded="false">
    <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-nav-bell"/></svg>
  </button>
  <span class="sui-badge-count" aria-hidden="true">3</span>
</div>

<div class="sui-panel sui-panel-no-backdrop" id="notifPanel"
     aria-label="Notifications" aria-hidden="true"
     style="--sui-panel-width: 360px">
  <div>
    <div class="sui-panel-header">
      <span class="sui-panel-title">Notifications</span>
      <button class="sui-panel-close sui-btn sui-btn-ghost sui-btn-sm" type="button"
              aria-label="Close">&times;</button>
    </div>
    <div class="sui-panel-body" style="padding: 0">
      <div class="sui-card" style="border-radius:0; border-left:0;
           border-right:0; border-top:0">
        <div style="display:flex; gap:var(--sui-space-2)">
          <div class="sui-avatar" data-initials="AB"
               style="width:32px; height:32px; font-size:12px"></div>
          <div>
            <strong>Alice B.</strong> commented on your task
            <div class="sui-meta sui-mt-1">2 min ago</div>
          </div>
        </div>
      </div>
      <!-- Repeat for each notification -->
    </div>
  </div>
</div>

<style>
.record-detail  { display: flex; flex-direction: column; height: 480px;
  background: var(--sui-bg-card); border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-md); overflow: hidden; }
.record-tabs    { padding: 0 var(--sui-space-4);
  border-bottom: 1px solid var(--sui-border); }
.record-panel   { padding: var(--sui-space-4); flex: 1; overflow-y: auto; }
.record-footer  { display: flex; gap: var(--sui-space-2);
  justify-content: flex-end;
  padding: var(--sui-space-3) var(--sui-space-4);
  border-top: 1px solid var(--sui-border);
  position: sticky; bottom: 0; background: var(--sui-bg-card); }
.record-activity { display: flex; gap: var(--sui-space-3);
  padding: var(--sui-space-3) 0; border-bottom: 1px solid var(--sui-border); }
.record-activity:last-child { border-bottom: none; }
.record-activity-dot { width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.record-note { padding: var(--sui-space-3);
  background: var(--sui-bg-elevated);
  border-radius: var(--sui-radius-md); margin-bottom: var(--sui-space-3); }
</style>

<!-- Wrap in data-sui-tabs to scope tab switching -->
<div class="record-detail" data-sui-tabs>
  <div class="panel-header">
    <span class="sui-avatar sui-avatar-sm">AC</span>
    <div><strong>Acme Corp</strong>
      <div class="sui-text-muted" style="font-size:var(--sui-text-meta);">
        Enterprise</div></div>
    <div style="flex:1;"></div>
    <span class="sui-badge sui-badge-success">Active</span>
    <button class="sui-btn sui-btn-ghost sui-btn-sm"
            aria-label="Close">&times;</button>
  </div>

  <div class="record-tabs">
    <nav class="sui-nav" role="tablist" aria-label="Record detail"
         style="margin-bottom:-1px;">
      <button class="sui-tab is-active" role="tab"
              aria-selected="true" data-tab="overview">Overview</button>
      <button class="sui-tab" role="tab"
              aria-selected="false" data-tab="activity">Activity</button>
      <button class="sui-tab" role="tab"
              aria-selected="false" data-tab="notes">Notes</button>
    </nav>
  </div>

  <!-- Overview: property table with badges, progress, chips -->
  <div data-view="overview" class="record-panel is-active"
       role="tabpanel" aria-label="Overview">
    <table class="sui-table sui-table-dense"><tbody>
      <tr><td class="sui-text-muted" style="width:35%;">Owner</td>
          <td>Jane Cooper</td></tr>
      <tr><td class="sui-text-muted">Stage</td>
          <td><span class="sui-badge sui-badge-info">Negotiation</span></td></tr>
      <tr><td class="sui-text-muted">Tags</td>
          <td><span class="sui-chip">Enterprise</span>
              <span class="sui-chip">Renewal</span></td></tr>
    </tbody></table>
  </div>

  <!-- Activity: colour-coded timeline -->
  <div data-view="activity" class="record-panel"
       role="tabpanel" aria-label="Activity">
    <div class="record-activity">
      <div class="record-activity-dot"
           style="background:var(--sui-success-soft);
                  color:var(--sui-success-strong);">&#10003;</div>
      <div><strong>Jane Cooper</strong> sent proposal
        <div class="sui-meta">Today</div></div>
    </div>
    <!-- Repeat for each event -->
  </div>

  <!-- Notes: elevated cards -->
  <div data-view="notes" class="record-panel"
       role="tabpanel" aria-label="Notes">
    <div class="record-note">
      <strong>Jane Cooper</strong>
      <span class="sui-meta">Feb 20</span>
      <p class="sui-mt-2">Client wants multi-year pricing...</p>
    </div>
  </div>

  <div class="record-footer">
    <button class="sui-btn sui-btn-ghost sui-btn-sm">Edit</button>
    <button class="sui-btn sui-btn-primary sui-btn-sm">Send SOW</button>
  </div>
</div>

<style>
.panel-header { display: flex; align-items: center; gap: var(--sui-space-2);
  padding: var(--sui-space-3) var(--sui-space-4); border-bottom: 1px solid var(--sui-border); }
.panel-header h3 { margin: 0; flex: 1; }
.panel-body { flex: 1; overflow-y: auto; padding: var(--sui-space-4); }
.panel-footer { display: flex; gap: var(--sui-space-2); justify-content: flex-end;
  padding: var(--sui-space-3) var(--sui-space-4); border-top: 1px solid var(--sui-border); }
</style>

<!-- Use with SUI.panel.open('#my-panel') -->
<div class="sui-panel" id="my-panel" aria-label="Edit contact">
  <div class="panel-header">
    <h3>Edit Contact</h3>
    <button class="sui-panel-close sui-btn sui-btn-ghost sui-btn-sm"
            aria-label="Close">&times;</button>
  </div>
  <div class="panel-body">...</div>
  <div class="panel-footer">
    <button class="sui-btn sui-btn-ghost">Cancel</button>
    <button class="sui-btn sui-btn-primary">Save</button>
  </div>
</div>

<!-- Sizing: override --sui-panel-width in your CSS -->
<!-- .sui-panel { --sui-panel-width: 480px; } for wide panels -->

<div class="app-layout" id="pushLayout">
  <main class="app-main">Main content</main>
  <aside class="app-push-panel">Panel content</aside>
</div>

<style>
.app-layout {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 250ms ease-out;
}
.app-layout.app-panel-open {
  grid-template-columns: 1fr 400px;
}
.app-push-panel {
  display: none;
  border-left: 1px solid var(--sui-border);
  overflow-y: auto;
}
.app-layout.app-panel-open .app-push-panel {
  display: block;
}
</style>

<script>
document.getElementById('toggleBtn').addEventListener('click', () => {
  document.getElementById('pushLayout').classList.toggle('app-panel-open');
});
</script>

<style>
.my-popover-wrap { position: relative; display: inline-block; }
.my-popover {
  position: absolute; top: calc(100% + var(--sui-space-1)); left: 0;
  z-index: var(--sui-z-dropdown); background: var(--sui-bg-card);
  border: 1px solid var(--sui-border); border-radius: var(--sui-radius-md);
  box-shadow: var(--sui-shadow-md); padding: var(--sui-space-3);
  min-width: 240px; display: none;
}
.my-popover.is-open { display: block; }
</style>

<!-- Light popover (no focus trap, click-outside close) -->
<div class="my-popover-wrap">
  <button class="sui-btn" aria-haspopup="true"
          aria-expanded="false">Filter</button>
  <div class="my-popover" role="group">...</div>
</div>

<!-- Heavy popover (focus trap, explicit close) -->
<div class="my-popover-wrap">
  <button class="sui-btn" aria-haspopup="dialog">Quick add</button>
  <div class="my-popover" role="dialog" aria-label="Quick add">
    <!-- Form + Save/Cancel -->
  </div>
</div>

<div class="recipe-profile-header">
  <span class="sui-avatar sui-avatar-xl">AS</span>
  <div>
    <h2>Name</h2>
    <div class="sui-meta">
      <span>Location</span>
      <span>Experience</span>
    </div>
    <div class="sui-flex sui-gap-2">
      <span class="sui-chip sui-chip-info">Skill</span>
    </div>
  </div>
</div>

<div class="sui-timeline" role="feed">
  <div class="sui-timeline-item" role="article">
    <span class="sui-avatar sui-avatar-sm">AS</span>
    <div class="sui-timeline-content">
      <strong>Event title</strong>
      <div class="sui-meta"><span>2 days ago</span></div>
    </div>
  </div>
</div>

<!-- Custom CSS (~3 lines) -->
<style>
.recipe-profile-header { display: flex; gap: var(--sui-space-4); align-items: flex-start; }
@media (max-width: 640px) { .recipe-profile-header { flex-direction: column; align-items: center; } }
</style>

<!-- Quill Integration Recipe — copy into your project -->

<!-- 1. Load Quill (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
      rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"
        defer></script>

<!-- 2. SUI token overrides -->
<style>
  .ql-toolbar.ql-snow {
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius-md) var(--sui-radius-md) 0 0;
    background: var(--sui-bg-elevated);
    font-family: var(--sui-font-primary);
  }
  .ql-container.ql-snow {
    border: 1px solid var(--sui-border);
    border-top: none;
    border-radius: 0 0 var(--sui-radius-md) var(--sui-radius-md);
    font-family: var(--sui-font-primary);
    color: var(--sui-text-primary);
    background: var(--sui-bg-card);
  }
  .ql-editor { min-height: 120px; color: var(--sui-text-primary); }
  .ql-editor.ql-blank::before {
    color: var(--sui-text-muted);
    font-style: normal;
  }
  .ql-snow .ql-stroke { stroke: var(--sui-text-secondary); }
  .ql-snow .ql-fill { fill: var(--sui-text-secondary); }
  .ql-snow .ql-picker { color: var(--sui-text-secondary); }
  .ql-snow .ql-picker-options {
    background: var(--sui-bg-card);
    border-color: var(--sui-border);
    border-radius: var(--sui-radius-sm);
    box-shadow: var(--sui-shadow-lg);
  }
  .ql-snow.ql-toolbar button:hover .ql-stroke,
  .ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--sui-blue-primary);
  }
  .ql-snow.ql-toolbar button:hover .ql-fill,
  .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--sui-blue-primary);
  }
  .ql-container.ql-snow:focus-within {
    outline: 3px solid var(--sui-blue-soft);
    outline-offset: 2px;
  }
</style>

<!-- 3. Create the editor -->
<div id="myEditor">
  <p>Start typing…</p>
</div>
<script>
  new Quill('#myEditor', { theme: 'snow' });
</script>

<style>
.my-search-bar { display: flex; gap: var(--sui-space-2); }
.my-search-bar .sui-input { flex: 1; min-width: 0; }
/* Toolbar variant: constrain select width */
.my-search-bar .sui-select { width: auto; min-width: 120px; }
</style>

<!-- Simple search bar -->
<div class="my-search-bar">
  <input class="sui-input" type="search" placeholder="Search..."
         aria-label="Search contacts">
  <button class="sui-btn sui-btn-primary" aria-label="Search">
    <svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#sui-icon-act-search"/></svg>
  </button>
</div>

<!-- Toolbar variant (select + search + action) -->
<div class="my-search-bar">
  <select class="sui-select" aria-label="Filter type">...</select>
  <input class="sui-input" type="search" placeholder="Search..." aria-label="Search">
  <button class="sui-btn sui-btn-ghost sui-btn-sm">Clear</button>
  <button class="sui-btn sui-btn-primary">Search</button>
</div>

<div class="sui-card">
  <h3>Notifications</h3>
  <div class="recipe-settings-row">
    <div>
      <strong>Email notifications</strong>
      <div class="sui-text-muted">Description text</div>
    </div>
    <label class="sui-toggle"><input type="checkbox" checked><span class="sui-toggle-track"></span></label>
  </div>
  <hr class="sui-divider">
  <h3>Appearance</h3>
  <div class="recipe-settings-row">
    <div><strong>Theme</strong></div>
    <div class="sui-segmented" role="radiogroup">
      <button class="sui-segment" role="radio" aria-checked="true">Light</button>
      <button class="sui-segment" role="radio" aria-checked="false">Dark</button>
    </div>
  </div>
</div>

<!-- Custom CSS (~4 lines) -->
<style>
.recipe-settings-row { display: flex; justify-content: space-between; align-items: center;
  padding: var(--sui-space-3) 0; gap: var(--sui-space-3); }
.recipe-settings-row:not(:last-child) { border-bottom: 1px solid var(--sui-border); }
</style>

<script>
function onContextSwitch(activeGroupName) {
  const nav = document.querySelector('.sui-sidenav');
  SUI.sidenav.collapseAll(nav);  // collapse everything

  // Expand the active group
  const group = nav.querySelector('[data-group="' + activeGroupName + '"]');
  if (group) {
    const btn = group.querySelector('.sui-sidenav-group-toggle');
    const links = group.querySelector('.sui-sidenav-group-links');
    btn.setAttribute('aria-expanded', 'true');
    links.hidden = false;
  }

  // Clear stale URL hash
  if (window.location.hash) {
    history.replaceState(null, '', window.location.pathname);
  }
}
</script>

<!-- Add search inside .sui-sidenav-panel, before groups -->
<div class="app-sidenav-search">
  <input type="search" class="sui-input" placeholder="Filter…"
         aria-label="Filter sections" autocomplete="off">
</div>

<script>
const search = document.querySelector('.app-sidenav-search input');
const groups = document.querySelectorAll('[data-sui-sidenav-group]');
const links  = document.querySelectorAll('.sui-sidenav-link');

search.addEventListener('input', () => {
  const q = search.value.toLowerCase().trim();
  links.forEach(link => {
    const match = !q || link.textContent.toLowerCase().includes(q);
    link.style.display = match ? '' : 'none';
  });
  groups.forEach(group => {
    const visible = group.querySelectorAll(
      '.sui-sidenav-link:not([style*="display: none"])'
    );
    const count = group.querySelector('.sui-sidenav-group-count');
    if (count) count.textContent = visible.length;
    if (q) {
      const btn = group.querySelector('.sui-sidenav-group-toggle');
      const container = group.querySelector('.sui-sidenav-group-links');
      btn.setAttribute('aria-expanded', 'true');
      container.hidden = false;
    }
    group.style.display = visible.length === 0 ? 'none' : '';
  });
});
</script>

<div class="recipe-split recipe-split-40-60">
  <div class="recipe-split-list">
    <div class="recipe-split-list-item is-active">...</div>
    <div class="recipe-split-list-item">...</div>
  </div>
  <div class="recipe-split-detail">...</div>
</div>

<!-- Custom CSS (~8 lines) -->
<style>
.recipe-split { display: grid; gap: 0; border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-lg); overflow: hidden; min-height: 320px; }
.recipe-split-40-60 { grid-template-columns: 2fr 3fr; }
.recipe-split-list { border-right: 1px solid var(--sui-border); overflow-y: auto; }
.recipe-split-list-item { padding: var(--sui-space-3) var(--sui-space-4);
  border-bottom: 1px solid var(--sui-border); cursor: pointer; }
.recipe-split-list-item:hover { background: var(--sui-bg-elevated); }
.recipe-split-list-item.is-active { background: var(--sui-blue-soft); }
.recipe-split-detail { padding: var(--sui-space-4); }
@media (max-width: 640px) {
  .recipe-split { grid-template-columns: 1fr; }
  .recipe-split-list { border-right: none; max-height: 200px; }
}
</style>

<!-- Tom Select Integration Recipe — copy into your project -->

<!-- 1. Load Tom Select (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.5.1/dist/css/tom-select.css"
      rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.5.1/dist/js/tom-select.complete.min.js"
        defer></script>

<!-- 2. SUI token overrides -->
<style>
  .ts-control {
    border: 1px solid var(--sui-border);
    border-radius: var(--sui-radius-sm);
    background: var(--sui-bg-card);
    color: var(--sui-text-primary);
    font-family: var(--sui-font-primary);
    min-height: 38px;
  }
  .full .ts-control { background: var(--sui-bg-card); }
  .ts-control .item { color: var(--sui-text-primary); }
  .focus .ts-control {
    border-color: var(--sui-blue-primary);
    box-shadow: 0 0 0 3px var(--sui-blue-soft);
  }
  .ts-wrapper.multi .ts-control > div {
    background: var(--sui-blue-soft);
    color: var(--sui-text-primary);
    border-radius: var(--sui-radius-sm);
  }
  .ts-dropdown {
    border: 1px solid var(--sui-border);
    background: var(--sui-bg-card);
    box-shadow: var(--sui-shadow-lg);
    color: var(--sui-text-primary);
    z-index: 9999;
  }
  .ts-dropdown .active {
    background: var(--sui-bg-elevated);
    color: var(--sui-text-primary);
  }
  .ts-dropdown [data-selectable] .highlight {
    background: var(--sui-blue-soft);
  }
</style>

<!-- 3. Use with a native select -->
<label class="sui-input-label">Choose a department</label>
<select id="mySelect">
  <option value="">Select…</option>
  <option value="eng">Engineering</option>
  <option value="des">Design</option>
</select>
<script>
  new TomSelect('#mySelect');
</script>