breadcrumb

<!-- .sk-breadcrumb — an ordered trail with a current position.

     Two variants of the same structure:
       default          a navigation trail — <nav> + <ol>, aria-current="page"
       data-variant     a stepper — a progress indicator, aria-current="step"
         ="steps"

     They share a shape (an ordered sequence with one current item) but not a
     meaning, which is why the wrapper element and the aria-current value both
     change. The README says when to reach for which. -->
<nav class="sk-breadcrumb" aria-label="Breadcrumb">
  <ol class="sk-breadcrumb__list">
    <li class="sk-breadcrumb__item">
      <a class="sk-breadcrumb__link" href="#home">Home</a>
    </li>
    <li class="sk-breadcrumb__item">
      <a class="sk-breadcrumb__link" href="#components">Components</a>
    </li>
    <li class="sk-breadcrumb__item">
      <a class="sk-breadcrumb__link" href="#breadcrumb" aria-current="page">Breadcrumb</a>
    </li>
  </ol>
</nav>

<!-- The stepper. data-step and data-total drive the progress fill with typed
     attr(); without it the dots still mark the current step. -->
<div
  class="sk-breadcrumb"
  data-variant="steps"
  data-step="2"
  data-total="4"
  role="group"
  aria-label="Checkout progress"
>
  <div class="sk-breadcrumb__track" aria-hidden="true">
    <div class="sk-breadcrumb__fill"></div>
  </div>

  <ol class="sk-breadcrumb__list">
    <li class="sk-breadcrumb__item">
      <span class="sk-breadcrumb__step" data-state="done">Cart</span>
    </li>
    <li class="sk-breadcrumb__item">
      <span class="sk-breadcrumb__step" data-state="current" aria-current="step">Delivery</span>
    </li>
    <li class="sk-breadcrumb__item">
      <span class="sk-breadcrumb__step">Payment</span>
    </li>
    <li class="sk-breadcrumb__item">
      <span class="sk-breadcrumb__step">Confirm</span>
    </li>
  </ol>
</div>

/* .sk-breadcrumb — an ordered trail (navigation) or a stepper (progress).

   Both are plain lists. There is no interactive behaviour to implement: the
   trail is anchors, the stepper is text. Everything below is presentation, plus
   one computed progress fill.

   Specs:
   - typed attr() ........... https://drafts.csswg.org/css-values-5/#attr-notation
   - aria-current ........... https://w3c.github.io/aria/#aria-current
   - :dir() ................. https://drafts.csswg.org/selectors-4/#the-dir-pseudo */

/* Public theme knobs (ADR 0011). Read, never declared, so the nearest
   declaration above the component wins. */
.sk-breadcrumb {
  --_link-fg: var(--sk-breadcrumb-link-fg, var(--sk-color-text-muted));
  --_link-fg-hover: var(--sk-breadcrumb-link-fg-hover, var(--sk-color-text));
  --_current-fg: var(--sk-breadcrumb-current-fg, var(--sk-color-text));
  --_separator-fg: var(--sk-breadcrumb-separator-color, var(--sk-color-text-subtle));
  --_underline: var(--sk-breadcrumb-underline-color, var(--sk-color-border-strong));
  --_accent: var(--sk-breadcrumb-accent, var(--sk-color-accent));
  --_track-bg: var(--sk-breadcrumb-track-bg, var(--sk-color-border));
  --_track-size: var(--sk-breadcrumb-track-size, var(--sk-space-2xs));
  --_step-fg: var(--sk-breadcrumb-step-fg, var(--sk-color-text-subtle));
  --_step-done-fg: var(--sk-breadcrumb-step-done-fg, var(--sk-color-text-muted));
}

.sk-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sk-text-sm);
}

.sk-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sk-space-xs);
}

/* The separator is decoration, so it is generated content rather than markup —
   nothing for a screen reader to read out between every crumb. */
.sk-breadcrumb__item + .sk-breadcrumb__item::before {
  content: "›";
  color: var(--_separator-fg);
}

/* A chevron points along the reading direction, so it has to turn around in a
   right-to-left document. :dir() is Baseline widely available. */
.sk-breadcrumb__item + .sk-breadcrumb__item:dir(rtl)::before {
  content: "‹";
}

.sk-breadcrumb__link {
  color: var(--_link-fg);
  text-decoration-color: var(--_underline);
  text-underline-offset: 0.2em;
}

.sk-breadcrumb__link:hover {
  color: var(--_link-fg-hover);
}

/* The current page is still a link — it is a real destination, and removing the
   href would take it out of the tab order for no reason. aria-current is what
   marks it, and the styling follows that attribute rather than a class, so the
   two cannot drift apart. */
.sk-breadcrumb__link[aria-current="page"] {
  color: var(--_current-fg);
  font-weight: var(--sk-weight-medium);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Stepper variant
--------------------------------------------------------------------------- */

.sk-breadcrumb[data-variant="steps"] .sk-breadcrumb__list {
  justify-content: space-between;
  gap: var(--sk-space-sm);
}

/* No separator chevrons in the stepper — the track does that job. */
.sk-breadcrumb[data-variant="steps"] .sk-breadcrumb__item + .sk-breadcrumb__item::before {
  content: none;
}

.sk-breadcrumb__track {
  position: relative;
  block-size: var(--_track-size);
  margin-block-end: var(--sk-space-xs);
  border-radius: var(--sk-radius-full);
  background: var(--_track-bg);
  overflow: hidden;
}

/* Without typed attr() there is no fill at all — see the @supports block. A
   fill that defaulted to full width would report every stepper as complete,
   which is worse than showing no bar. */
.sk-breadcrumb__fill {
  display: none;
  block-size: 100%;
  border-radius: inherit;
  background: var(--_accent);
}

.sk-breadcrumb__step {
  color: var(--_step-fg);
  font-size: var(--sk-text-xs);
}

.sk-breadcrumb__step[data-state="done"] {
  color: var(--_step-done-fg);
}

.sk-breadcrumb__step[data-state="current"] {
  color: var(--_accent);
  font-weight: var(--sk-weight-medium);
}

@supports (inline-size: attr(data-step type(<integer>), 0)) {
  .sk-breadcrumb[data-variant="steps"] {
    /* Read straight off the markup: no duplicated value in a style attribute,
       and no chance of the number and the bar disagreeing. */
    --_progress: calc(
      attr(data-step type(<integer>), 0) / attr(data-total type(<integer>), 1) * 100%
    );
  }

  .sk-breadcrumb__fill {
    display: block;
    inline-size: var(--_progress);
  }

  @media (prefers-reduced-motion: no-preference) {
    .sk-breadcrumb__fill {
      transition: inline-size var(--sk-motion-base) var(--sk-ease-out);
    }
  }
}