Breadcrumb

<%# Markup for the breadcrumb demo.
    The APG structure (nav + ol + aria-current="page") lives in the markup; the
    library only handles the responsive behavior of collapsing middle items into a
    "…" disclosure button when width runs short. Separators are drawn by demo.css's
    ::after. %>
<nav
  class="breadcrumb"
  data-controller="stimeo--breadcrumb"
  aria-label="<%= t("components.breadcrumb.demo.label") %>">
  <ol class="breadcrumb__list" data-stimeo--breadcrumb-target="list">
    <li class="breadcrumb__item">
      <a href="#"><%= t("components.breadcrumb.demo.home") %></a>
    </li>
    <li class="breadcrumb__item" data-stimeo--breadcrumb-target="ellipsis" hidden>
      <button
        type="button"
        class="breadcrumb__ellipsis"
        aria-expanded="false"
        aria-controls="breadcrumb-collapsed"
        aria-label="<%= t("components.breadcrumb.demo.expand") %>"
        data-stimeo--breadcrumb-target="trigger"
        data-action="click->stimeo--breadcrumb#toggle">…</button>
    </li>
    <li
      class="breadcrumb__item"
      id="breadcrumb-collapsed"
      data-stimeo--breadcrumb-target="collapsible">
      <a href="#"><%= t("components.breadcrumb.demo.section") %></a>
    </li>
    <li class="breadcrumb__item" data-stimeo--breadcrumb-target="collapsible">
      <a href="#"><%= t("components.breadcrumb.demo.subsection") %></a>
    </li>
    <li class="breadcrumb__item" data-stimeo--breadcrumb-target="collapsible">
      <a href="#"><%= t("components.breadcrumb.demo.category") %></a>
    </li>
    <li class="breadcrumb__item">
      <a href="#" aria-current="page"><%= t("components.breadcrumb.demo.current") %></a>
    </li>
  </ol>
</nav>

/*
 * Presentation-only styles for the breadcrumb demo.
 * Collapse/expand is the library toggling the hidden attribute of collapsible items
 * and the ellipsis, plus the trigger's aria-expanded. Here we narrow the container
 * to force overflow and draw the "/" separator with ::after.
 */

.breadcrumb {
  max-width: 22rem;
  overflow: hidden;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: var(--color-text-subtle);
}

.breadcrumb__item a {
  color: var(--accent, var(--color-primary));
  text-decoration: none;
}

.breadcrumb__item a[aria-current="page"] {
  color: var(--fg, var(--color-text));
  font-weight: 600;
  pointer-events: none;
}

.breadcrumb__ellipsis {
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.breadcrumb__ellipsis:hover {
  color: var(--fg, var(--color-text));
}