PageTabs.astro

---
interface Props {
  labels: string[]; // One label per panel slot (panel-0 ... panel-9)
  links?: string[]; // Optional array of URLs, if provided, renders as navigation links instead of same-page tabs
  id: string; // Required id
  initial?: number; // 0-based default tab
  activeIndex?: number; // 0-based active tab for navigation mode
}

const { labels = [], links, id, initial = 0, activeIndex }: Props = Astro.props;
const { t } = Astro.locals;
if (!Array.isArray(labels) || labels.length === 0) {
  throw new Error("<PageTabs> needs a non-empty labels array.");
}
if (labels.length > 10) {
  throw new Error("<PageTabs> supports up to 10 tabs.");
}
if (links && links.length !== labels.length) {
  throw new Error("<PageTabs> links array must match labels array length.");
}
if (links && labels.some((_, i) => Astro.slots.has(`panel-${i}`))) {
  throw new Error("<PageTabs> cannot have both links and slot content.");
}
if (typeof id !== "string" || id.trim() === "") {
  throw new Error("<PageTabs> requires a non-empty id.");
}
const uid = id.trim();
const I = (n: number) =>
  Math.min(Math.max(0, Number(n) || 0), labels.length - 1);
const active = I(initial);
---

<div class="tabs" id={uid}>
  {
    links ? (
      <div class="tab-header">
        {labels.map((label, i) => (
          <a
            class:list={["tab-label", activeIndex === i && "active"]}
            href={links[i]}
          >
            {label}
          </a>
        ))}
      </div>
    ) : (
      <>
        <fieldset>
          <legend class="sr-only">
            {t("common:components.pageTabs.tabSelection")}
          </legend>
          {labels.map((_, i) => (
            <input
              type="radio"
              name={uid}
              id={`${uid}-${i}`}
              checked={active === i}
              aria-controls={`${uid}-panel-${i}`}
            />
          ))}
        </fieldset>

        <div class="tab-header">
          {labels.map((label, i) => (
            <label class="tab-label" for={`${uid}-${i}`}>
              {label}
            </label>
          ))}
        </div>

        <div class="tab-content">
          {labels[0] && (
            <div
              class="panel"
              id={`${uid}-panel-0`}
              role="tabpanel"
              aria-labelledby={`${uid}-0`}
            >
              <slot name="panel-0" />
            </div>
          )}
          {labels[1] && (
            <div
              class="panel"
              id={`${uid}-panel-1`}
              role="tabpanel"
              aria-labelledby={`${uid}-1`}
            >
              <slot name="panel-1" />
            </div>
          )}
          {labels[2] && (
            <div
              class="panel"
              id={`${uid}-panel-2`}
              role="tabpanel"
              aria-labelledby={`${uid}-2`}
            >
              <slot name="panel-2" />
            </div>
          )}
          {labels[3] && (
            <div
              class="panel"
              id={`${uid}-panel-3`}
              role="tabpanel"
              aria-labelledby={`${uid}-3`}
            >
              <slot name="panel-3" />
            </div>
          )}
          {labels[4] && (
            <div
              class="panel"
              id={`${uid}-panel-4`}
              role="tabpanel"
              aria-labelledby={`${uid}-4`}
            >
              <slot name="panel-4" />
            </div>
          )}
          {labels[5] && (
            <div
              class="panel"
              id={`${uid}-panel-5`}
              role="tabpanel"
              aria-labelledby={`${uid}-5`}
            >
              <slot name="panel-5" />
            </div>
          )}
          {labels[6] && (
            <div
              class="panel"
              id={`${uid}-panel-6`}
              role="tabpanel"
              aria-labelledby={`${uid}-6`}
            >
              <slot name="panel-6" />
            </div>
          )}
          {labels[7] && (
            <div
              class="panel"
              id={`${uid}-panel-7`}
              role="tabpanel"
              aria-labelledby={`${uid}-7`}
            >
              <slot name="panel-7" />
            </div>
          )}
          {labels[8] && (
            <div
              class="panel"
              id={`${uid}-panel-8`}
              role="tabpanel"
              aria-labelledby={`${uid}-8`}
            >
              <slot name="panel-8" />
            </div>
          )}
          {labels[9] && (
            <div
              class="panel"
              id={`${uid}-panel-9`}
              role="tabpanel"
              aria-labelledby={`${uid}-9`}
            >
              <slot name="panel-9" />
            </div>
          )}
        </div>
      </>
    )
  }
</div>

<style lang="scss">
  .tabs {
    width: 100%;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }

  .tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tab-header {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;

    width: max-content;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: var(--space-2xl);

    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    &::-webkit-scrollbar {
      height: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: var(--radius-full);
    }
  }

  .tab-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-md);
    padding-inline: clamp(1rem, 0.6rem + 2vw, 2rem);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: clamp(0.75rem, 0.75rem + 0.5vw, 1rem);
    user-select: none;
    text-decoration: none;
    border-radius: var(--radius-full);
    white-space: nowrap;
    scroll-snap-align: center;
    color: var(--heading-color);

    &:hover {
      background: var(--card-hover-color);
    }

    &.active {
      background: var(--footer-color);
    }
  }

  .panel {
    display: none;
  }

  @media (max-width: 900px) {
    .tab-header {
      width: 100%;
    }

    .tab-label {
      flex: 1;
    }
  }

  @for $i from 0 through 9 {
    fieldset:has(input[id$="-#{$i}"]:checked)
      ~ .tab-header
      label[for$="-#{$i}"] {
      background: var(--footer-color);
    }
    fieldset:has(input[id$="-#{$i}"]:focus-visible)
      ~ .tab-header
      label[for$="-#{$i}"] {
      outline: 2px solid currentColor;
    }
    fieldset:has(input[id$="-#{$i}"]:checked)
      ~ .tab-content
      .panel[id$="-panel-#{$i}"] {
      display: block;
    }
  }
</style>