<div class="stack">
  <!-- Basic details/summary -->
  <details>
    <summary>Getting Started</summary>
    <p>
      Graffiti is a drop-in CSS library that styles native HTML elements automatically.
      No classes required for basic styling—just write semantic HTML.
    </p>
  </details>

  <!-- Bordered variant -->
  <details class="bordered">
    <summary>Installation Options</summary>
    <p>
      Install via npm with <code>npm install graffiti-css</code>, or include directly
      from a CDN. The library works with any framework or vanilla HTML.
    </p>
  </details>

  <!-- Right-aligned trigger variant -->
  <details class="right">
    <summary>View Source Code</summary>
    <p>
      The right-aligned variant places the toggle indicator on the opposite side,
      useful for "show code" toggles or secondary actions.
    </p>
  </details>

  <!-- Minimal variant with +/− toggle -->
  <details class="minimal">
    <summary>Frequently Asked Questions</summary>
    <p>
      The minimal variant removes extra padding and uses a simple +/− indicator,
      perfect for compact FAQ sections or nested accordions.
    </p>
  </details>
</div>

<div class="stack">
	<!-- Basic breadcrumb trail -->
	<nav class="breadcrumbs" aria-label="Breadcrumb">
		<ul class="no-list">
			<li><a href="/">Home</a></li>
			<li><a href="/products">Products</a></li>
			<li><a href="/products/electronics">Electronics</a></li>
			<li aria-current="page">Wireless Headphones</li>
		</ul>
	</nav>

	<!-- Custom separator -->
	<nav class="breadcrumbs" style="--separator: '›'" aria-label="Breadcrumb">
		<ul class="no-list">
			<li><a href="/">Home</a></li>
			<li><a href="/docs">Docs</a></li>
			<li aria-current="page">Getting Started</li>
		</ul>
	</nav>
</div>

<div class="cluster">
  <!-- Basic dropdown with header, items, and dividers -->
  <div class="dropdown" style="--anchor: --dropdown-options">
    <button popovertarget="dropdown-options">Options</button>
    <div id="dropdown-options" popover class="dropdown-menu">
      <div class="dropdown-header">Account</div>
      <hr>
      <a href="#profile">Profile</a>
      <a href="#settings">Settings</a>
      <hr>
      <button>Sign Out</button>
    </div>
  </div>

  <!-- End-aligned dropdown -->
  <div class="dropdown end" style="--anchor: --dropdown-actions">
    <button popovertarget="dropdown-actions">Actions</button>
    <div id="dropdown-actions" popover class="dropdown-menu">
      <div class="dropdown-header">Quick Actions</div>
      <hr>
      <a href="#edit">Edit</a>
      <a href="#duplicate">Duplicate</a>
      <a href="#archive">Archive</a>
      <hr>
      <button>Delete</button>
    </div>
  </div>
</div>

<div class="stack">
  <!-- Copy URL example -->
  <div class="input-group">
    <input type="text" value="https://example.com/share/abc123" readonly />
    <button>Copy</button>
  </div>

  <!-- Search example with primary button -->
  <div class="input-group">
    <input type="search" placeholder="Search documentation..." />
    <button class="primary">Search</button>
  </div>

  <!-- Mini variant example -->
  <div class="input-group">
    <input type="text" placeholder="Enter code..." />
    <button class="mini">Apply</button>
  </div>
</div>

<nav class="sidebar-nav">
  <a href="#inbox">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path
        d="M3 5a2 2 0 012-2h10a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm2 0v3h10V5H5zm0 5v5h10v-5H5z"
      />
    </svg>
    Inbox
  </a>

  <a href="#issues">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <circle
        cx="10"
        cy="10"
        r="7"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      />
    </svg>
    Issues
  </a>

  <details open>
    <summary>
      <svg viewBox="0 0 20 20" fill="currentColor">
        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 10a5 5 0 1110 0H5z" />
      </svg>
      Cycles
    </summary>
    <a href="#current">Current</a>
    <a href="#upcoming" class="active">Upcoming</a>
    <a href="#past">Past</a>
  </details>

  <details>
    <summary>
      <svg viewBox="0 0 20 20" fill="currentColor">
        <rect
          x="3"
          y="3"
          width="14"
          height="14"
          rx="2"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        />
        <path
          d="M7 7h6M7 10h6M7 13h4"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
        />
      </svg>
      Projects
    </summary>
    <a href="#website">Website Redesign</a>
    <a href="#mobile">Mobile App</a>
    <a href="#api">API v2</a>
  </details>

  <a href="#views">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path d="M3 4h14v2H3V4zm0 5h14v2H3V9zm0 5h14v2H3v-2z" />
    </svg>
    Views
  </a>

  <a href="#settings">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <circle
        cx="10"
        cy="10"
        r="7"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      />
    </svg>
    Settings
  </a>
</nav>