Navigation

Anatomy

Wrap one or more <details> elements in a .accordioncontainer. Each <details> must contain exactly one<summary> and a .accordion-panel div.

<div class="accordion">
  <details>
    <summary>Question one</summary>
    <div class="accordion-panel">
      <p>Answer text.</p>
    </div>
  </details>
  <details>
    <summary>Question two</summary>
    <div class="accordion-panel">
      <p>Answer text.</p>
    </div>
  </details>
</div>

Open by default

Add the open attribute to any <details> to render it expanded on load — the standard HTML boolean attribute, no extra classes needed.

<details open>
  <summary>Expanded on load</summary>
  <div class="accordion-panel">…</div>
</details>

Usage guidance

Animation

In Chrome 131+ the panel height animates using interpolate-size: allow-keywords combined with the ::details-content pseudo-element. Older browsers get an instant reveal. The + icon rotates 45° on open. Both transitions are disabled under prefers-reduced-motion: reduce.

Token reference

CSS reference

Shipped in dist/farn-components.css. All colors are semantic — adapt to data-theme and data-surface automatically.

.accordion {
  border: 1px solid var(--accordion-border);
  border-radius: var(--accordion-radius);
  overflow: hidden;
}

.accordion-panel {
  padding: 0 var(--space-md) var(--space-md);
  background: var(--accordion-panel-bg);
}

/* Animated height — Chrome 131+ */
@supports (interpolate-size: allow-keywords) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion details::details-content {
    overflow: hidden;
    transition: block-size var(--duration-base) var(--ease-out);
  }
  .accordion details:not([open])::details-content { block-size: 0; }
}

Anatomy

A .tab-list wrapper carries role="tablist" and anaria-label. Each .tab button has role="tab",aria-selected, aria-controls pointing to its panel, and an id. Each .tab-panel has role="tabpanel"and aria-labelledby pointing back to its tab. Non-active panels carry the HTML hidden attribute — the script toggles it on click; CSS reveals all panels when scripting is unavailable.

<div class="tabs">
  <div class="tab-list" role="tablist" aria-label="Section label">
    <button class="tab" role="tab"
            id="tab-a" aria-selected="true"
            aria-controls="panel-a" tabindex="0">First</button>
    <button class="tab" role="tab"
            id="tab-b" aria-selected="false"
            aria-controls="panel-b" tabindex="-1">Second</button>
    <button class="tab" role="tab"
            id="tab-c" aria-selected="false"
            aria-controls="panel-c" tabindex="-1" disabled>Off</button>
  </div>
  <div class="tab-panel" role="tabpanel"
       id="panel-a" aria-labelledby="tab-a" tabindex="0">
    Panel A content.
  </div>
  <div class="tab-panel" role="tabpanel"
       id="panel-b" aria-labelledby="tab-b" tabindex="0" hidden>
    Panel B content.
  </div>
  <div class="tab-panel" role="tabpanel"
       id="panel-c" aria-labelledby="tab-c" tabindex="0" hidden>
    Panel C content.
  </div>
</div>

Script

dist/tabs.js exports initTabs() and ships as a named package export. Call it once after the DOM is ready:

import { initTabs } from 'farn-theme/scripts/tabs';
document.addEventListener('DOMContentLoaded', initTabs);

The Astro docs site calls it automatically via DocLayout.astro. Without the script, panels with hidden are shown stacked (via @media (scripting: none)) so no content is lost.

Keyboard navigation

Usage guidance

Accessibility

Token reference

CSS reference

Shipped in dist/farn-components.css. All colours adapt to data-theme and data-surface automatically.

.tab-list {
  display: flex;
  gap: var(--tab-gap);
  border-bottom: 1px solid var(--tab-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--tab-idle-text);
  font-size: var(--tab-font-size);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-out);
}

.tab:hover { background: var(--tab-hover-bg); color: var(--tab-active-text); }
.tab[aria-selected="true"] { color: var(--tab-active-text); font-weight: 600; }
.tab[aria-selected="true"]::after { background: var(--tab-indicator); }
.tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.tab:disabled,
.tab[aria-disabled="true"] {
  opacity: var(--tab-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.tab-panel {
  padding-top: var(--space-md);
  background: var(--tab-panel-bg);
}

@media (scripting: none) {
  .tab-panel[hidden] { display: block; }
}

Anatomy

Wrap an <ol> in a <nav> witharia-label="Pagination". Each <li> gets.page-item; each link gets .page-link. The active page carries aria-current="page" on its <a> — no extra class needed. Disabled controls carry aria-disabled="true".

<nav aria-label="Pagination">
  <ol class="pagination" role="list">
    <li class="page-item">
      <a class="page-link" href="#" aria-disabled="true" aria-label="Previous page">← Prev</a>
    </li>
    <li class="page-item"><a class="page-link" href="/page/1">1</a></li>
    <li class="page-item">
      <a class="page-link" href="/page/2" aria-current="page">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="/page/3">3</a></li>
    <li class="page-item">
      <a class="page-link" href="/page/3" aria-label="Next page">Next →</a>
    </li>
  </ol>
</nav>

Ellipsis

For truncated ranges, use a .page-ellipsis <span>inside a .page-item marked aria-hidden="true". It is decorative — screen readers skip it entirely.

<li class="page-item" aria-hidden="true">
  <span class="page-ellipsis">…</span>
</li>

Usage guidance

Accessibility

Token reference

CSS reference

Shipped in dist/farn-components.css. All colors adapt to data-theme and data-surface automatically.

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pagination-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-xs);
  border: 1px solid transparent;
  border-radius: var(--pagination-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.page-link[aria-current="page"] {
  background: var(--pagination-active-bg);
  color: var(--pagination-active-text);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

.page-link[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}