ferst-core 0.1.0 → 0.2.1

package/components/recipes/Logos.astro

@@ -0,0 +1,77 @@
+---
+/** Logos — a Level-2 recipe: a "trusted by" wall of images. Muted (greyscale +
+ *  dimmed) by default, coming to full colour on hover/focus. Each logo optionally
+ *  links out. Decorative-leaning, so it stays quiet against the page. */
+interface Item { src: string; alt?: string; href?: string }
+interface Props {
+  title?: string;
+  items?: Item[];
+}
+const { title, items = [] } = Astro.props;
+---
+
+<section class="b-logos">
+  {title && <p class="b-logos__title">{title}</p>}
+  <ul class="b-logos__row">
+    {items.map((item) => (
+      <li class="b-logos__item">
+        {item.href ? (
+          <a href={item.href} target="_blank" rel="noopener noreferrer">
+            <img src={item.src} alt={item.alt ?? ''} loading="lazy" decoding="async" />
+          </a>
+        ) : (
+          <img src={item.src} alt={item.alt ?? ''} loading="lazy" decoding="async" />
+        )}
+      </li>
+    ))}
+  </ul>
+</section>
+
+<style>
+  .b-logos {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-logos__title {
+    margin: 0;
+    text-align: center;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .b-logos__row {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(1.5rem, 5vw, 3.5rem);
+  }
+  .b-logos__item img {
+    display: block;
+    height: clamp(1.75rem, 4vw, 2.5rem);
+    width: auto;
+    filter: grayscale(1);
+    opacity: 0.6;
+    transition: filter 0.2s ease, opacity 0.2s ease;
+  }
+  .b-logos__item a:hover img,
+  .b-logos__item a:focus-visible img,
+  .b-logos__item img:hover {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+  .b-logos__item a:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+</style>

package/components/recipes/Marquee.astro

@@ -0,0 +1,75 @@
+---
+/** Marquee — a Level-2 recipe: an infinite horizontal scroll of short phrases
+ *  (a feature strip). Pure-CSS transform loop (GPU-composited); pauses on hover.
+ *  Under reduced-motion it doesn't move — the phrases wrap and centre statically.
+ *  The moving track is duplicated for a seamless loop and marked decorative. */
+interface Props {
+  items?: string[];
+  speed?: 'slow' | 'normal' | 'fast';
+}
+const { items = [], speed = 'normal' } = Astro.props;
+---
+
+<div class="b-marquee" data-speed={speed}>
+  <div class="b-marquee__track" aria-hidden="true">
+    {[...items, ...items].map((item) => (
+      <span class="b-marquee__item">{item}</span>
+    ))}
+  </div>
+</div>
+
+<style>
+  .b-marquee {
+    overflow: hidden;
+    border-block: 1px solid var(--border);
+    padding-block: 0.85rem;
+    background: var(--bg-section);
+    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+  }
+  .b-marquee__track {
+    display: flex;
+    width: max-content;
+    gap: 0;
+    animation: b-marquee-scroll linear infinite;
+  }
+  .b-marquee[data-speed='slow'] .b-marquee__track { animation-duration: 45s; }
+  .b-marquee[data-speed='normal'] .b-marquee__track { animation-duration: 30s; }
+  .b-marquee[data-speed='fast'] .b-marquee__track { animation-duration: 18s; }
+  .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
+
+  .b-marquee__item {
+    display: inline-flex;
+    align-items: center;
+    padding-inline: 1.75rem;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--fg);
+    white-space: nowrap;
+  }
+  .b-marquee__item::after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    margin-left: 3.5rem;
+    border-radius: 999px;
+    background: var(--gold);
+  }
+
+  @keyframes b-marquee-scroll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .b-marquee { -webkit-mask-image: none; mask-image: none; }
+    .b-marquee__track {
+      animation: none;
+      width: auto;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.25rem 0;
+    }
+  }
+</style>

package/components/recipes/Pricing.astro

@@ -0,0 +1,149 @@
+---
+/** Pricing — a Level-2 recipe: a row of plan cards (name, price, period,
+ *  feature list, CTA). One plan may be `featured`. Composes Heading + Button +
+ *  the check icon. Token-driven, so it recolours + restyles with the theme. */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import Icon from '../Icon.astro';
+
+interface Plan {
+  name: string;
+  price: string;
+  period?: string;
+  description?: string;
+  features?: string[];
+  cta?: { label: string; href: string };
+  featured?: boolean;
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  plans?: Plan[];
+}
+const { title, intro, plans = [] } = Astro.props;
+---
+
+<section class="b-pricing">
+  {(title || intro) && (
+    <div class="b-pricing__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-pricing__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-pricing__grid" data-count={plans.length}>
+    {plans.map((plan) => (
+      <div class="b-pricing__plan" data-featured={plan.featured ? 'true' : 'false'}>
+        {plan.featured && <span class="b-pricing__badge">Most popular</span>}
+        <p class="b-pricing__name">{plan.name}</p>
+        <p class="b-pricing__price">
+          <span class="b-pricing__amount">{plan.price}</span>
+          {plan.period && <span class="b-pricing__period">{plan.period}</span>}
+        </p>
+        {plan.description && <p class="b-pricing__desc">{plan.description}</p>}
+        {plan.features && plan.features.length > 0 && (
+          <ul class="b-pricing__features">
+            {plan.features.map((f) => (
+              <li><span class="b-pricing__check" aria-hidden="true"><Icon name="check" size={16} /></span>{f}</li>
+            ))}
+          </ul>
+        )}
+        {plan.cta && (
+          <div class="b-pricing__cta">
+            <Button href={plan.cta.href} variant={plan.featured ? 'cta' : 'secondary'}>{plan.cta.label}</Button>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-pricing {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-pricing__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-pricing__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-pricing__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    align-items: start;
+  }
+  @media (min-width: 48em) {
+    .b-pricing__grid[data-count='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-pricing__grid[data-count='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-pricing__grid[data-count='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 64em) {
+    .b-pricing__grid[data-count='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-pricing__plan {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.75rem;
+    border-radius: var(--radius);
+    border: var(--card-border);
+    background: var(--bg-surface);
+    box-shadow: var(--shadow-md);
+  }
+  .b-pricing__plan[data-featured='true'] {
+    border-color: var(--gold);
+    box-shadow: var(--shadow-lg);
+    position: relative;
+  }
+  .b-pricing__badge {
+    align-self: flex-start;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-light);
+    background: var(--gold);
+    padding: 0.2rem 0.6rem;
+    border-radius: var(--radius-pill);
+  }
+  .b-pricing__name {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--fg);
+  }
+  .b-pricing__price { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; }
+  .b-pricing__amount {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
+    line-height: 1;
+    color: var(--fg);
+  }
+  .b-pricing__period { color: var(--muted); font-size: 0.9rem; }
+  .b-pricing__desc { margin: 0; color: var(--muted); line-height: 1.5; }
+  .b-pricing__features {
+    list-style: none;
+    margin: 0.5rem 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+  .b-pricing__features li { display: flex; gap: 0.5rem; align-items: flex-start; }
+  .b-pricing__check { color: var(--gold); display: inline-flex; margin-top: 0.1rem; flex-shrink: 0; }
+  .b-pricing__cta { margin-top: auto; padding-top: 0.5rem; }
+  .b-pricing__cta :global(.btn) { width: 100%; }
+</style>

package/components/recipes/Stats.astro

@@ -0,0 +1,124 @@
+---
+/** Stats — a Level-2 recipe: a band of headline numbers over an optional
+ *  heading/intro. Composes the Heading primitive; numbers use the brand accent. */
+import Heading from '../blocks/Heading.astro';
+
+interface Item { value: string; label: string; description?: string }
+interface Props {
+  title?: string;
+  intro?: string;
+  background?: 'none' | 'muted' | 'accent';
+  columns?: 2 | 3 | 4;
+  items?: Item[];
+}
+const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.props;
+---
+
+<section class="b-stats" data-bg={background}>
+  <div class="b-stats__inner">
+    {(title || intro) && (
+      <div class="b-stats__head">
+        {title && <Heading text={title} level={2} align="center" />}
+        {intro && <p class="b-stats__intro">{intro}</p>}
+      </div>
+    )}
+    <div class="b-stats__grid" data-cols={columns}>
+      {items.map((item) => (
+        <div class="b-stats__item">
+          <span class="b-stats__value">{item.value}</span>
+          <span class="b-stats__label">{item.label}</span>
+          {item.description && <span class="b-stats__desc">{item.description}</span>}
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .b-stats { padding-block: clamp(2.5rem, 6vw, 4rem); }
+  .b-stats[data-bg='muted'] { background: var(--bg-section); }
+  .b-stats[data-bg='accent'] { background: var(--gold-light); }
+  .b-stats__inner {
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .b-stats__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-stats__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-stats__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem 2rem;
+  }
+  @media (min-width: 40em) {
+    .b-stats__grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 60em) {
+    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-stats__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.35rem;
+  }
+  .b-stats__value {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
+    line-height: 1;
+    color: var(--gold);
+  }
+  .b-stats__label { font-weight: 600; color: var(--fg); }
+  .b-stats__desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
+</style>
+
+<script>
+  // Count-up: numbers tick from 0 to their value when they scroll into view.
+  // Progressive — the final value is server-rendered, so with no JS (or under
+  // reduced-motion) it just shows the number. Non-numeric values (One, Any…) are
+  // left untouched; a leading sign / trailing suffix (+, %, " day") is preserved.
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const values = document.querySelectorAll<HTMLElement>('.b-stats__value');
+  if (!reduce && 'IntersectionObserver' in window && values.length) {
+    const parse = (t: string) => {
+      const m = t.match(/^(\D*)(\d[\d,]*(?:\.\d+)?)(.*)$/);
+      if (!m) return null;
+      const decimals = (m[2].split('.')[1] || '').length;
+      return { pre: m[1], num: parseFloat(m[2].replace(/,/g, '')), suf: m[3], decimals };
+    };
+    const fmt = (n: number, d: number) => (d > 0 ? n.toFixed(d) : Math.round(n).toLocaleString());
+    const run = (el: HTMLElement) => {
+      const final = (el.textContent || '').trim();
+      const p = parse(final);
+      if (!p) return;
+      const dur = 1100;
+      const t0 = performance.now();
+      const tick = (now: number) => {
+        const t = Math.min(1, (now - t0) / dur);
+        const eased = 1 - Math.pow(1 - t, 3);
+        el.textContent = p.pre + fmt(p.num * eased, p.decimals) + p.suf;
+        if (t < 1) requestAnimationFrame(tick);
+        else el.textContent = final;
+      };
+      requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(
+      (entries) => entries.forEach((e) => { if (e.isIntersecting) { run(e.target as HTMLElement); io.unobserve(e.target); } }),
+      { threshold: 0.4 }
+    );
+    values.forEach((v) => io.observe(v));
+  }
+</script>

package/components/recipes/Steps.astro

@@ -0,0 +1,120 @@
+---
+/** Steps — a Level-2 recipe: a numbered process. `horizontal` lays connected
+ *  cards in a row; `vertical` a stacked timeline. Composes Heading + Icon. */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+
+interface Item { title: string; text?: string; icon?: string }
+interface Props {
+  title?: string;
+  intro?: string;
+  layout?: 'horizontal' | 'vertical';
+  items?: Item[];
+}
+const { title, intro, layout = 'horizontal', items = [] } = Astro.props;
+---
+
+<section class="b-steps" data-layout={layout}>
+  {(title || intro) && (
+    <div class="b-steps__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-steps__intro">{intro}</p>}
+    </div>
+  )}
+  <ol class="b-steps__list">
+    {items.map((item, i) => (
+      <li class="b-steps__item">
+        <span class="b-steps__marker" aria-hidden="true">
+          {item.icon && isIconKey(item.icon) ? <Icon name={item.icon} size={20} /> : i + 1}
+        </span>
+        <div class="b-steps__body">
+          <h3 class="b-steps__title">{item.title}</h3>
+          {item.text && <p class="b-steps__text">{item.text}</p>}
+        </div>
+      </li>
+    ))}
+  </ol>
+</section>
+
+<style>
+  .b-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-steps__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-steps__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-steps__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 1.5rem;
+  }
+  /* Base (and mobile): marker left, body right. */
+  .b-steps__item {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  .b-steps__marker {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-pill);
+    background: var(--gold);
+    color: var(--text-light);
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: 1.05rem;
+  }
+  .b-steps__title { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--fg); }
+  .b-steps__text { margin: 0; color: var(--muted); line-height: 1.6; }
+
+  /* Vertical: a centred, stacked timeline. */
+  .b-steps[data-layout='vertical'] .b-steps__list { max-width: 40rem; margin-inline: auto; }
+
+  /* Horizontal (≥48em): connected cards in a row, marker over centred body. */
+  @media (min-width: 48em) {
+    .b-steps[data-layout='horizontal'] .b-steps__list {
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      gap: 1rem;
+    }
+    .b-steps[data-layout='horizontal'] .b-steps__item {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 0.85rem;
+      position: relative;
+    }
+    /* Connector from this marker's right edge to the next marker's left edge.
+       The +1.5rem / -2rem account for the 2.5rem marker AND the 1rem grid gap,
+       so the line sits centred between markers (not falling short). */
+    .b-steps[data-layout='horizontal'] .b-steps__item:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      top: calc(1.25rem - 1px);
+      left: calc(50% + 1.5rem);
+      width: calc(100% - 2rem);
+      height: 2px;
+      background: var(--border);
+      z-index: 0;
+    }
+    .b-steps[data-layout='horizontal'] .b-steps__marker { position: relative; z-index: 1; }
+  }
+</style>

package/components/recipes/Tabs.astro

@@ -0,0 +1,133 @@
+---
+/** Tabs — a Level-2 recipe: labelled panels, one open at a time. Progressive:
+ *  the first panel is visible with no JavaScript; a small script adds selection,
+ *  ARIA state and arrow-key navigation. Composes the Heading primitive. */
+import Heading from '../blocks/Heading.astro';
+
+interface Item { label: string; heading?: string; text?: string; image?: { src: string; alt?: string } }
+interface Props {
+  title?: string;
+  items?: Item[];
+}
+const { title, items = [] } = Astro.props;
+const uid = 'tabs-' + Math.random().toString(36).slice(2, 9);
+---
+
+<section class="b-tabs">
+  {title && <Heading text={title} level={2} align="center" />}
+  <div class="b-tabs__inner">
+    <div class="b-tabs__list" role="tablist" aria-label={title ?? 'Tabs'}>
+      {items.map((item, i) => (
+        <button
+          type="button"
+          role="tab"
+          id={`${uid}-tab-${i}`}
+          aria-controls={`${uid}-panel-${i}`}
+          aria-selected={i === 0 ? 'true' : 'false'}
+          tabindex={i === 0 ? 0 : -1}
+          class="b-tabs__tab"
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+    {items.map((item, i) => (
+      <div
+        role="tabpanel"
+        id={`${uid}-panel-${i}`}
+        aria-labelledby={`${uid}-tab-${i}`}
+        class="b-tabs__panel"
+        hidden={i !== 0}
+        tabindex="0"
+      >
+        {item.image && (
+          <img class="b-tabs__img" src={item.image.src} alt={item.image.alt ?? ''} loading="lazy" decoding="async" />
+        )}
+        <div class="b-tabs__copy">
+          {item.heading && <h3 class="b-tabs__heading">{item.heading}</h3>}
+          {item.text && <p class="b-tabs__text">{item.text}</p>}
+        </div>
+      </div>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-tabs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .b-tabs__tab {
+    appearance: none;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    padding: 0.7rem 1rem;
+    font-family: var(--font-heading);
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--muted);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .b-tabs__tab:hover { color: var(--fg); }
+  .b-tabs__tab[aria-selected='true'] { color: var(--gold); border-bottom-color: var(--gold); }
+  .b-tabs__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
+  .b-tabs__panel {
+    display: grid;
+    gap: 1.25rem;
+  }
+  /* A class `display` beats the UA `[hidden]{display:none}` (equal specificity,
+     author origin wins), so make the hidden state explicit — for the first paint
+     and every JS toggle. */
+  .b-tabs__panel[hidden] {
+    display: none;
+  }
+  @media (min-width: 48em) {
+    .b-tabs__panel:has(.b-tabs__img) { grid-template-columns: 1fr 1fr; align-items: center; }
+  }
+  .b-tabs__panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }
+  .b-tabs__img { width: 100%; height: auto; border-radius: var(--radius); }
+  .b-tabs__heading { margin: 0 0 0.5rem; color: var(--fg); }
+  .b-tabs__text { margin: 0; color: var(--muted); line-height: 1.65; }
+</style>
+
+<script>
+  // Wire every tabs group on the page: selection, ARIA state, arrow-key nav.
+  document.querySelectorAll<HTMLElement>('.b-tabs').forEach((root) => {
+    const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
+    const panels = Array.from(root.querySelectorAll<HTMLElement>('[role="tabpanel"]'));
+    if (!tabs.length) return;
+
+    function select(index: number, focus = true) {
+      tabs.forEach((tab, i) => {
+        const on = i === index;
+        tab.setAttribute('aria-selected', on ? 'true' : 'false');
+        tab.tabIndex = on ? 0 : -1;
+        panels[i]?.toggleAttribute('hidden', !on);
+      });
+      if (focus) tabs[index]?.focus();
+    }
+
+    tabs.forEach((tab, i) => {
+      tab.addEventListener('click', () => select(i, false));
+      tab.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); select((i + 1) % tabs.length); }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); select((i - 1 + tabs.length) % tabs.length); }
+        else if (e.key === 'Home') { e.preventDefault(); select(0); }
+        else if (e.key === 'End') { e.preventDefault(); select(tabs.length - 1); }
+      });
+    });
+  });
+</script>