tabs

<!-- .sk-tabs — a radio group presented as tabs (ADR 0003).

     Screen readers announce radio semantics, not tab semantics. That is
     deliberate and documented in the README: the behaviour a screen-reader user
     is promised — one tab stop, arrow keys to move, selection is activation —
     is exactly what a radio group delivers natively, and claiming role="tab"
     would promise ARIA behaviour that CSS cannot implement.

     The <fieldset> and <legend> are the native grouping for radios, so no ARIA
     is needed to give the group a name. -->
<fieldset class="sk-tabs">
  <legend class="sk-tabs__legend">Install method</legend>

  <div class="sk-tabs__list">
    <input
      class="sk-tabs__radio"
      type="radio"
      name="sk-tabs-demo"
      id="sk-tabs-demo-cli"
      checked
    />
    <label class="sk-tabs__tab" for="sk-tabs-demo-cli">CLI</label>

    <input
      class="sk-tabs__radio"
      type="radio"
      name="sk-tabs-demo"
      id="sk-tabs-demo-copy"
    />
    <label class="sk-tabs__tab" for="sk-tabs-demo-copy">Copy &amp; paste</label>

    <input
      class="sk-tabs__radio"
      type="radio"
      name="sk-tabs-demo"
      id="sk-tabs-demo-registry"
    />
    <label class="sk-tabs__tab" for="sk-tabs-demo-registry">Registry</label>

    <!-- One underline for the whole group; it anchors itself to whichever
         label is checked. Decorative, hence aria-hidden. -->
    <span class="sk-tabs__underline" aria-hidden="true"></span>
  </div>

  <div class="sk-tabs__panels">
    <section class="sk-tabs__panel">
      <p class="sk-tabs__text">
        <code>npx nojsui add tabs</code> copies the two files into your project.
      </p>
    </section>

    <section class="sk-tabs__panel">
      <p class="sk-tabs__text">
        Copy <code>tabs.html</code> and <code>tabs.css</code> straight out of the
        repository. There is nothing else to wire up.
      </p>
    </section>

    <section class="sk-tabs__panel">
      <p class="sk-tabs__text">
        Fetch <code>/r/tabs.json</code> from the registry if you are generating
        components as part of a build.
      </p>
    </section>
  </div>
</fieldset>

/* .sk-tabs — tabs built on a radio group (ADR 0003).

   A radio group already is the tab keyboard contract: one tab stop, arrow keys
   move between options, and moving the selection *is* activating it. The only
   thing it does not provide is the ARIA role names, and CSS cannot supply those
   honestly — role="tab" promises behaviour (aria-selected toggling, roving
   tabindex) that no stylesheet can implement. The README says exactly what a
   screen reader announces instead.

   Specs:
   - anchor-scope ........... https://drafts.csswg.org/css-anchor-position-1/#anchor-scope
   - position-area .......... https://drafts.csswg.org/css-anchor-position-1/#position-area
   - anchor-size() .......... https://drafts.csswg.org/css-anchor-position-1/#anchor-size-fn */

/* Public theme knobs (ADR 0011). Read, never declared, so the nearest
   declaration above the component wins. Note that --sk-tabs-active is an
   anchor name, not a knob — anchor names share this namespace by the naming
   rules, so no knob may reuse one. */
.sk-tabs {
  --_accent: var(--sk-tabs-accent, var(--sk-color-accent));
  --_tab-fg: var(--sk-tabs-tab-fg, var(--sk-color-text-muted));
  --_tab-fg-hover: var(--sk-tabs-tab-fg-hover, var(--sk-color-text));
  --_divider: var(--sk-tabs-divider-color, var(--sk-color-border));
  --_underline-size: var(--sk-tabs-underline-size, calc(var(--sk-border-width) * 2));
  --_text-fg: var(--sk-tabs-text-fg, var(--sk-color-text-muted));

  margin: 0;
  padding: 0;
  border: 0;

  /* A fieldset is min-content by default; let it fill its container. */
  min-inline-size: 0;
}

/* The legend names the group for assistive tech. The visible tabs are the
   labels, so it does not need to be seen. */
.sk-tabs__legend {
  /* Out of flow and clipped away, but still in the accessibility tree — it is
     what gives the radio group its name. No sizing needed: absolute
     positioning keeps it out of the layout and clip-path removes the paint. */
  position: absolute;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sk-tabs__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-xs);
  border-block-end: var(--sk-border-width) solid var(--_divider);
}

/* The radios drive everything and are never seen — but they stay in the
   document and in the accessibility tree, because they are the control. Focus
   lands on the radio, so the ring is drawn on its label. */
.sk-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sk-tabs__tab {
  padding-block: var(--sk-space-xs);
  padding-inline: var(--sk-space-sm);
  color: var(--_tab-fg);
  font-size: var(--sk-text-sm);
  font-weight: var(--sk-weight-medium);
  cursor: pointer;
  min-block-size: var(--sk-size-tap-target);
  display: flex;
  align-items: center;
}

.sk-tabs__tab:hover {
  color: var(--_tab-fg-hover);
}

.sk-tabs__radio:checked + .sk-tabs__tab {
  color: var(--_accent);

  /* Fallback underline: a border on the checked label. Correct everywhere,
     just static. The shared sliding element below replaces it where anchor
     positioning is available. */
  box-shadow: inset 0 calc(-1 * var(--_underline-size)) 0 0 var(--_accent);
}

/* Focus is on the visually hidden radio, so mirror the ring onto its label. */
.sk-tabs__radio:focus-visible + .sk-tabs__tab {
  outline: var(--sk-ring-width) solid var(--sk-color-focus);
  outline-offset: calc(var(--sk-ring-offset) * -1);
  border-radius: var(--sk-radius-sm);
}

/* ---------------------------------------------------------------------------
   The underline

   Fallback first: a border on the checked label. Correct everywhere, just
   static. The enhancement is one shared element that anchors itself to
   whichever label is checked, so it slides between them.

   anchor-scope is what keeps this copy-pasteable — the anchor name is scoped to
   each .sk-tabs__list, so every instance on a page can use the same name
   instead of needing a generated one per demo.
--------------------------------------------------------------------------- */

.sk-tabs__underline {
  display: none;
}

@supports (anchor-scope: --x) and (position-area: block-end) {
  .sk-tabs__list {
    anchor-scope: --sk-tabs-active;
  }

  .sk-tabs__radio:checked + .sk-tabs__tab {
    anchor-name: --sk-tabs-active;

    /* the shared underline takes over from the per-label border */
    box-shadow: none;
  }

  .sk-tabs__underline {
    display: block;
    position: absolute;
    position-anchor: --sk-tabs-active;
    position-area: block-end;
    inline-size: anchor-size(inline);
    block-size: var(--_underline-size);
    background: var(--_accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .sk-tabs__underline {
      transition:
        inset-inline-start var(--sk-motion-fast) var(--sk-ease-out),
        inline-size var(--sk-motion-fast) var(--sk-ease-out);
    }
  }
}

/* ---------------------------------------------------------------------------
   Panels

   One :has() per rule, not a chain (CLAUDE.md forbids :has() state machines).
   Six tabs are supported; a seventh needs another pair of rules, which is a
   deliberate ceiling — a tab strip that long wants a different component.
--------------------------------------------------------------------------- */

.sk-tabs__panel {
  display: none;
  padding-block: var(--sk-space-md);
}

.sk-tabs:has(.sk-tabs__radio:nth-of-type(1):checked) .sk-tabs__panel:nth-of-type(1),
.sk-tabs:has(.sk-tabs__radio:nth-of-type(2):checked) .sk-tabs__panel:nth-of-type(2),
.sk-tabs:has(.sk-tabs__radio:nth-of-type(3):checked) .sk-tabs__panel:nth-of-type(3),
.sk-tabs:has(.sk-tabs__radio:nth-of-type(4):checked) .sk-tabs__panel:nth-of-type(4),
.sk-tabs:has(.sk-tabs__radio:nth-of-type(5):checked) .sk-tabs__panel:nth-of-type(5),
.sk-tabs:has(.sk-tabs__radio:nth-of-type(6):checked) .sk-tabs__panel:nth-of-type(6) {
  display: block;
}

.sk-tabs__text {
  margin: 0;
  color: var(--_text-fg);
  font-size: var(--sk-text-sm);
  max-inline-size: var(--sk-size-measure);
}