@moonarc/core 0.1.0

package/src/components/CheckDraw.astro

@@ -0,0 +1,159 @@
+---
+/**
+ * CheckDraw — a checkbox whose tick is drawn, zero JS. A <label> wraps a
+ * native `<input type="checkbox">` (`appearance: none`, still focusable,
+ * still submitted) and an SVG beside it: the tick is a path with
+ * `pathLength="1"` whose dash offset runs 1 → 0 on the preset curve when
+ * the input is `:checked`; `:indeterminate` (a DOM property your script
+ * sets) draws a short bar instead. The box fills on the fast token first,
+ * so the stroke lands on ink. Radios are not this component.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size'> {
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  /** Visible label. Without it, pass aria-label. */
+  label?: string;
+  /** Box size, any CSS length. */
+  size?: string;
+  /** Box colour when checked; default the ink token. */
+  color?: string;
+}
+
+const { name, value = 'on', checked = false, label, size = '1.25rem', color, class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-checkdraw-size:${size}`, color && `--ma-checkdraw-on:${color}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<label class:list={['ma-checkdraw', className]} style={vars}>
+  <span class="ma-checkdraw__box">
+    <input type="checkbox" class="ma-checkdraw__input" name={name} value={value} checked={checked} {...rest} />
+    <svg class="ma-checkdraw__mark" viewBox="0 0 24 24" aria-hidden="true">
+      <path class="ma-checkdraw__tick" d="M5 12.5l4.5 4.5L19 7" pathLength="1" />
+      <path class="ma-checkdraw__bar" d="M6 12h12" pathLength="1" />
+    </svg>
+  </span>
+  {label && <span class="ma-checkdraw__label">{label}</span>}
+</label>
+
+<style is:global>
+  @layer components {
+    :where(.ma-checkdraw) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.6em;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+    :where(.ma-checkdraw__box) {
+      position: relative;
+      flex: none;
+      display: grid;
+      inline-size: var(--ma-checkdraw-size, 1.25rem);
+      block-size: var(--ma-checkdraw-size, 1.25rem);
+    }
+    :where(.ma-checkdraw__input) {
+      /* the box: the input itself, so focus, the value and the keyboard are native */
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+      grid-area: 1 / 1;
+      inline-size: 100%;
+      block-size: 100%;
+      margin: 0;
+      /* --ma-checkdraw-edge: a section that knows its ground sets a border measured on it (HeroWaitlist, 7G) */
+      border: 1.5px solid var(--ma-checkdraw-edge, color-mix(in srgb, var(--ma-ink) 45%, transparent));
+      border-radius: 0.3em;
+      background: transparent;
+      cursor: pointer;
+      font: inherit;
+      transition:
+        background-color var(--ma-duration-fast) var(--ma-ease-out),
+        border-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-checkdraw__input)::after {
+      content: '';
+      position: absolute;
+      inset: min(0px, calc((var(--ma-checkdraw-size, 1.25rem) - 26px) / 2));
+    }
+    :where(.ma-checkdraw__input:checked),
+    :where(.ma-checkdraw__input:indeterminate) {
+      background: var(--ma-checkdraw-on, var(--ma-ink));
+      border-color: var(--ma-checkdraw-on, var(--ma-ink));
+    }
+    :where(.ma-checkdraw__mark) {
+      grid-area: 1 / 1;
+      inline-size: 100%;
+      block-size: 100%;
+      padding: 12%;
+      pointer-events: none;
+      fill: none;
+      stroke: var(--ma-panel);
+      stroke-width: 3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    :where(.ma-checkdraw__tick),
+    :where(.ma-checkdraw__bar) {
+      /* pathLength 1: the dash is the whole stroke, offset 1 hides it, 0 shows it */
+      stroke-dasharray: 1;
+      stroke-dashoffset: 1;
+      transition: stroke-dashoffset var(--ma-duration-fast) var(--ma-ease-in);
+    }
+    :where(.ma-checkdraw__input:checked ~ .ma-checkdraw__mark .ma-checkdraw__tick),
+    :where(.ma-checkdraw__input:indeterminate ~ .ma-checkdraw__mark .ma-checkdraw__bar) {
+      stroke-dashoffset: 0;
+      transition: stroke-dashoffset var(--ma-duration) var(--ma-ease);
+      /* the stroke waits for the box to fill, so it is drawn on ink, not on nothing */
+      transition-delay: calc(var(--ma-duration-fast) / 2);
+    }
+    :where(.ma-checkdraw__input:focus-visible) {
+      outline: 2px solid var(--ma-checkdraw-on, var(--ma-ink));
+      outline-offset: 3px;
+    }
+    :where(.ma-checkdraw__input:disabled) {
+      cursor: not-allowed;
+      opacity: 0.45;
+      transition: none;
+    }
+    :where(.ma-checkdraw__input:disabled ~ .ma-checkdraw__mark *) {
+      transition: none;
+    }
+    :where(.ma-checkdraw:has(.ma-checkdraw__input:disabled)) {
+      cursor: not-allowed;
+    }
+    :where(.ma-checkdraw:has(.ma-checkdraw__input:disabled) .ma-checkdraw__label) {
+      opacity: 0.6;
+    }
+    :where(.ma-checkdraw__label) {
+      line-height: 1.2;
+      user-select: none;
+    }
+    @media (forced-colors: active) {
+      :where(.ma-checkdraw__input) {
+        border-color: ButtonText;
+        background: Canvas;
+      }
+      :where(.ma-checkdraw__input:checked),
+      :where(.ma-checkdraw__input:indeterminate) {
+        background: Highlight;
+        border-color: Highlight;
+      }
+      :where(.ma-checkdraw__mark) {
+        stroke: HighlightText;
+      }
+      :where(.ma-checkdraw__input:disabled) {
+        border-color: GrayText;
+        opacity: 1;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-checkdraw__input),
+      :where(.ma-checkdraw__tick),
+      :where(.ma-checkdraw__bar) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/CheckDraw.meta.ts

@@ -0,0 +1,37 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'CheckDraw',
+  slug: 'check-draw',
+  title: 'Check Draw',
+  description: 'A checkbox whose tick is drawn. A label wraps a native input with appearance: none and an SVG beside it: the box fills on the fast token, then the tick (a path with pathLength 1) runs its dash offset from 1 to 0 on the preset curve. The indeterminate state draws a bar instead. The value submits, required and disabled work, the keyboard is the browser\'s. Zero JavaScript.',
+  summary: 'A checkbox whose tick draws itself when checked, on a native input that submits, validates and takes the keyboard.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<CheckDraw name="terms" label="I agree" required>',
+  usage: `<CheckDraw name="terms" label="I agree to the terms" required />\n<CheckDraw name="news" label="Send me the newsletter" checked />\n\n<!-- indeterminate is a DOM property, set from your script -->\n<CheckDraw id="all" name="all" label="Select all" />\n<script>document.getElementById('all').indeterminate = true</script>`,
+  props: [
+    { name: 'name', type: 'string', description: 'Form field name.' },
+    { name: 'value', type: 'string', default: "'on'", description: 'Submitted value.' },
+    { name: 'checked', type: 'boolean', default: 'false', description: 'Initial state.' },
+    { name: 'label', type: 'string', description: 'Visible label; the whole label toggles the box. Without it, pass aria-label.' },
+    { name: 'size', type: 'string', default: "'1.25rem'", description: 'Box size, any CSS length; the stroke scales with it.' },
+    { name: 'color', type: 'string', description: 'Box colour when checked; default the ink token.' },
+    { name: '--ma-checkdraw-edge', type: 'CSS colour (custom property)', default: 'the ink token at 45 %', description: 'The unchecked box\'s border. Set it in a rule or style on the component or any ancestor that knows its ground. Use a border measured at 3 : 1 against it (WCAG 1.4.11) where 45 % of the ink falls short, for example on a coloured panel.' },
+  ],
+  reducedMotion: 'The box fills and the tick appears at once.',
+  clientRouter: 'A native input; its state travels with the page. Nothing to bind.',
+  craft: [
+    'The input stays a checkbox in every sense (FormData, required, disabled, the label click, Space, the accessibility tree), and appearance: none only removes the native drawing. The SVG is a sibling that reads :checked and :indeterminate through the general sibling combinator; no :has() needed.',
+    'pathLength="1" makes the dash arithmetic unit-free: dasharray 1, dashoffset 1 is a hidden stroke, 0 is the whole tick, whatever the box size. The tick is drawn on the preset curve after a delay of half the fast token, so the box has filled and the stroke lands on ink.',
+    'Unchecking runs the offset back on the exit curve in the fast duration: the tick leaves the way it came, quickly, and the box empties with it.',
+    'indeterminate is a DOM property, not an attribute, so the bar has no server state; the stage sets it from its script the way a "select all" control would.',
+    'forced-colors rules keep the box visible under Windows high contrast: a ButtonText border, Highlight when checked, the stroke in HighlightText.',
+  ],
+  related: ['switch', 'animated-icons', 'stateful-button'],
+  intents: ['animated checkbox', 'checkbox with drawn check', 'checkmark animation', 'custom checkbox css', 'indeterminate checkbox', 'checkbox tick draws itself'],
+  replaces: ['Checkbox (Motion Primitives)', 'Checkbox (shadcn / Radix)', 'AnimatedCheckbox (Aceternity)'],
+  fixture: { props: { name: 'ma-fixture', label: 'Fixture content for CheckDraw' }, expect: 'Fixture content for CheckDraw' },
+} satisfies ComponentMeta;

package/src/components/CircularText.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * CircularText — a badge of text on a ring, turning slowly around whatever
+ * sits in the middle. SVG <textPath> on a circle, justified to the full
+ * circumference with textLength, spun by one CSS rotation on the compositor.
+ * Zero JS. The centre is the slot.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** The text. Ends with a separator (· or —) so the loop has no seam. */
+  text: string;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Ring diameter, any CSS length. */
+  size?: string;
+  /** Seconds per full turn. */
+  duration?: number;
+  /** Turn direction. */
+  direction?: 'cw' | 'ccw';
+  /** Id for the circle path; set it when the same text appears twice on a page. */
+  id?: string;
+}
+
+const { text, as: Tag = 'span', size = '10em', duration = 18, direction = 'cw', id, class: className, style, ...rest } = Astro.props;
+// the same text always draws the same path id, so the HTML is stable across builds
+const hash = [...text].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7);
+const pathId = id ?? `ma-circ-${hash.toString(36)}`;
+const R = 40;
+const circumference = +(2 * Math.PI * R).toFixed(2);
+// font size in viewBox units so the string fits the ring once: 0.62 em per character is Inter's average
+const chars = Array.from(new Intl.Segmenter().segment(text)).length;
+const fontSize = +Math.min(13, circumference / (chars * 0.62)).toFixed(2);
+const vars = [`--ma-circ-size:${size}`, `--ma-circ-dur:${duration}s`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Tag class:list={['ma-circ', className]} data-ccw={direction === 'ccw' ? '' : undefined} style={vars} {...rest}>
+  <span class="ma-circ__ring" aria-hidden="true">
+    <svg viewBox="0 0 100 100">
+      <defs><path id={pathId} d={`M50,50 m-${R},0 a${R},${R} 0 1,1 ${2 * R},0 a${R},${R} 0 1,1 -${2 * R},0`} /></defs>
+      <text font-size={fontSize}><textPath href={`#${pathId}`} textLength={circumference} lengthAdjust="spacing">{text}</textPath></text>
+    </svg>
+  </span>
+  <span class="ma-circ__center"><slot /></span>
+  <span class="ma-sr">{text}</span>
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-circ) {
+      position: relative;
+      display: inline-grid;
+      place-items: center;
+      width: var(--ma-circ-size, 10em);
+      height: var(--ma-circ-size, 10em);
+      vertical-align: middle;
+    }
+    /* the turn is on an HTML wrapper, not the <svg>: a transform on the SVG root is not always composited */
+    :where(.ma-circ__ring) {
+      grid-area: 1 / 1;
+      display: block;
+      width: 100%;
+      height: 100%;
+      /* linear on purpose: continuous rotation, no spring */
+      animation: ma-circ-spin var(--ma-circ-dur, var(--ma-dur-ambient)) linear infinite;
+      will-change: rotate;
+    }
+    /* direction: ltr. The path runs clockwise from the left; a right-to-left page laid the text out backwards from the
+       path's start, off the path, and the ring was empty. */
+    :where(.ma-circ__ring > svg) {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      direction: ltr;
+      fill: currentColor;
+      font-family: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+    }
+    :where(.ma-circ[data-ccw] .ma-circ__ring) {
+      animation-direction: reverse;
+    }
+    :where(.ma-circ__center) {
+      grid-area: 1 / 1;
+      display: grid;
+      place-items: center;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-circ__ring) {
+        animation: none;
+        will-change: auto;
+      }
+    }
+  }
+
+  @keyframes ma-circ-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+</style>

package/src/components/CircularText.meta.ts

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'CircularText',
+  slug: 'circular-text',
+  title: 'Circular Text',
+  description:
+    'A ring of text turning slowly around an icon, a logo, or nothing. SVG text on a circle, justified to the full circumference so the loop has no seam, spun by one compositor rotation. Pure CSS; the centre is the slot.',
+  summary: 'A ring of text that turns slowly around an icon or a logo, set on a circle so the loop has no gap.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<CircularText duration={18}>',
+  usage: `<CircularText text="MEASURED · NOT ESTIMATED · ZERO BYTES · " size="9rem" class="kicker">\n  <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" /></svg>\n</CircularText>`,
+  props: [
+    { name: 'text', type: 'string', description: 'The text. End it with a separator (· or an em dash) so the loop closes without a seam; 20–40 characters fill the ring at a readable size.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'size', type: 'string', default: "'10em'", description: 'Ring diameter, any CSS length.' },
+    { name: 'duration', type: 'number', default: '18', description: 'Seconds per full turn. Under 8 reads as a spinner, not a badge.' },
+    { name: 'direction', type: "'cw' | 'ccw'", default: "'cw'", description: 'Turn direction.' },
+    { name: 'id', type: 'string', description: 'Id for the circle path, derived from the text by default; set it when the same text appears twice on one page.' },
+  ],
+  reducedMotion: 'The ring is still.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'textLength on the textPath with lengthAdjust="spacing" stretches only the letter-spacing: the glyphs keep their shape, the string fills the circumference exactly once, and the seam is a normal word gap.',
+    'The font size is derived from the character count on the server (0.62 em per character, counted in graphemes), so a longer badge gets smaller instead of overlapping itself.',
+    'One rotation on an HTML wrapper around the <svg>, not on the <svg> itself, whose transform is not composited in every engine: the text is rasterised once and turns as a texture.',
+    'The ring is laid out left to right whatever the page\'s direction: the path starts at the left and runs clockwise, and under dir="rtl" the text ran backwards off the path\'s start and the ring was empty.',
+    'Linear timing: a badge that eases would look like it keeps stopping.',
+    'The ring is aria-hidden and a visually hidden span (.ma-sr) carries the sentence, so a screen reader reads the sentence once.',
+  ],
+  related: ['marquee', 'weight-wave', 'shiny-text'],
+  intents: ['circular text', 'text on a circle', 'rotating badge text', 'spinning text ring', 'text around icon'],
+  replaces: ['CircularText (React Bits)', 'rotating badges (Magic UI, Animata)'],
+  fixture: { props: { text: 'Fixture content for CircularText · ' }, expect: 'ma-sr">Fixture content for CircularText · </span>' },
+} satisfies ComponentMeta;

package/src/components/CodeTabs.astro

@@ -0,0 +1,213 @@
+---
+/**
+ * CodeTabs — a code block with tabs (npm / pnpm / bun …) and a copy button
+ * per panel. Highlighted at build by Astro's own <Code> (Shiki) with a
+ * light and a dark theme as CSS variables, so the block follows the page's
+ * theme with no script; every token colour is moved at build until it reads at
+ * 4.5 : 1 on the panel (lib/contrast), whichever themes are passed. The tabs are the Tabs pattern — radio inputs and
+ * :has() — so arrow keys, focus and one-selected are native and the
+ * indicator slides on the preset. The only script is CopyButton's, shared.
+ * Long lines scroll inside the panel; the page never widens.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import { Code } from 'astro:components';
+import CopyButton from './CopyButton.astro';
+import { readableCode } from '../lib/contrast';
+
+interface Tab {
+  label: string;
+  code: string;
+  /** Shiki language id. */
+  lang?: string;
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  tabs: Tab[];
+  /** Radio group name and id prefix; unique per page. */
+  id: string;
+  /** Accessible name of the group, e.g. "Package manager". */
+  label?: string;
+  active?: number;
+  /** Shiki themes for light and dark. */
+  themes?: { light: string; dark: string };
+}
+
+const { tabs, id, label, active = 0, themes = { light: 'github-light', dark: 'github-dark-default' }, class: className, style, ...rest } = Astro.props;
+const list = tabs.slice(0, 8);
+const vars = [`--ma-codetabs-n:${list.length}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-codetabs', className]} style={vars} {...rest}>
+  <div class="ma-codetabs__bar">
+    <div class="ma-codetabs__list" role="radiogroup" aria-label={label}>
+      {list.map((t, i) => (
+        <>
+          <input type="radio" name={id} id={`${id}-${i}`} class="ma-codetabs__input" checked={i === active} />
+          <label for={`${id}-${i}`} class="ma-codetabs__tab">{t.label}</label>
+        </>
+      ))}
+      <span class="ma-codetabs__indicator" aria-hidden="true"></span>
+    </div>
+    <div class="ma-codetabs__copies">
+      {list.map((_, i) => <span class="ma-codetabs__copy"><CopyButton target={`#${id}-p${i} pre`} compact /></span>)}
+    </div>
+  </div>
+  <div class="ma-codetabs__panels">
+    {list.map((t, i) => (
+      <div class="ma-codetabs__panel" id={`${id}-p${i}`}>
+        <Code code={t.code} lang={(t.lang ?? 'sh') as never} themes={themes as never} defaultColor={false} transformers={[readableCode()]} />
+      </div>
+    ))}
+  </div>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-codetabs) {
+      display: grid;
+      /* the block's own width, not its widest line's: the tab list scrolls sideways and the code scrolls in its <pre> */
+      grid-template-columns: minmax(0, 1fr);
+      overflow: clip;
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.75rem;
+      background: var(--ma-panel);
+      color: var(--ma-ink);
+      font-size: 0.875rem;
+    }
+    :where(.ma-codetabs__bar) {
+      display: flex;
+      align-items: stretch;
+      justify-content: space-between;
+      gap: 0.5rem;
+      border-bottom: 1px solid var(--ma-edge);
+      padding-inline-end: 0.4rem;
+    }
+    :where(.ma-codetabs__list) {
+      position: relative;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr; /* equal in an auto-sized grid: every fr track takes the widest label */
+      min-width: 0;
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    :where(.ma-codetabs__input) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    :where(.ma-codetabs__tab) {
+      padding: 0.7rem 0.9rem;
+      font-family: ui-monospace, monospace;
+      font-size: 0.8125em;
+      opacity: var(--ma-dim, 0.7);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-codetabs__tab:hover),
+    :where(.ma-codetabs__input:checked + .ma-codetabs__tab) {
+      opacity: 1;
+    }
+    :where(.ma-codetabs__input:focus-visible + .ma-codetabs__tab) {
+      outline: 2px solid currentColor;
+      outline-offset: -3px;
+      border-radius: 0.375rem;
+    }
+    /* the indicator is as wide as one tab and translates by whole tabs — tabs share one width so no measuring is needed */
+    :where(.ma-codetabs__indicator) {
+      position: absolute;
+      inset-inline-start: 0;
+      bottom: 0;
+      width: calc(100% / var(--ma-codetabs-n, 1));
+      height: 2px;
+      background: currentColor;
+      translate: calc(var(--ma-codetab, 0) * 100% * var(--ma-codetabs-dir, 1)) 0;
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    /* right to left the tabs run from the right edge, so the indicator steps left. [dir] and not :dir(): :dir() reached Chrome in 120, and a build that targets an older Chrome rewrites it into a guess from lang, which a page that sets only dir never matches. An
+       ltr island one level inside an rtl page is set back */
+    :where([dir='rtl'] .ma-codetabs, .ma-codetabs[dir='rtl']) { --ma-codetabs-dir: -1; }
+    :where([dir='rtl'] [dir='ltr'] .ma-codetabs, [dir='rtl'] .ma-codetabs[dir='ltr']) { --ma-codetabs-dir: 1; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(2):checked)) { --ma-codetab: 1; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(3):checked)) { --ma-codetab: 2; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(4):checked)) { --ma-codetab: 3; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(5):checked)) { --ma-codetab: 4; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(6):checked)) { --ma-codetab: 5; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(7):checked)) { --ma-codetab: 6; }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(8):checked)) { --ma-codetab: 7; }
+    :where(.ma-codetabs__copies) {
+      display: grid;
+      align-self: center;
+      flex: none;
+    }
+    /* nth-of-type, not nth-child: Astro renders the component's <script> tag next to the first CopyButton. The wrapper is
+       this component's own element (7F): a display rule on the button itself competed with CopyButton's own
+       `display` at equal specificity, and which one won depended on the order the bundler gave the two stylesheets. */
+    :where(.ma-codetabs__copy) {
+      grid-area: 1 / 1;
+      display: none;
+    }
+    :where(.ma-codetabs__copy .ma-copy) {
+      border-color: transparent;
+      background: transparent;
+    }
+    :where(.ma-codetabs__panel) {
+      display: none;
+      opacity: 1;
+      translate: 0 0;
+      transition:
+        opacity var(--ma-duration) var(--ma-ease),
+        translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(1):checked) .ma-codetabs__panel:nth-child(1)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(2):checked) .ma-codetabs__panel:nth-child(2)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(3):checked) .ma-codetabs__panel:nth-child(3)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(4):checked) .ma-codetabs__panel:nth-child(4)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(5):checked) .ma-codetabs__panel:nth-child(5)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(6):checked) .ma-codetabs__panel:nth-child(6)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(7):checked) .ma-codetabs__panel:nth-child(7)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(8):checked) .ma-codetabs__panel:nth-child(8)) {
+      display: block;
+    }
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(1):checked) .ma-codetabs__copy:nth-of-type(1)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(2):checked) .ma-codetabs__copy:nth-of-type(2)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(3):checked) .ma-codetabs__copy:nth-of-type(3)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(4):checked) .ma-codetabs__copy:nth-of-type(4)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(5):checked) .ma-codetabs__copy:nth-of-type(5)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(6):checked) .ma-codetabs__copy:nth-of-type(6)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(7):checked) .ma-codetabs__copy:nth-of-type(7)),
+    :where(.ma-codetabs:has(.ma-codetabs__input:nth-of-type(8):checked) .ma-codetabs__copy:nth-of-type(8)) {
+      display: inline-flex;
+    }
+    @starting-style {
+      :where(.ma-codetabs__panel) {
+        opacity: 0;
+        translate: 0 var(--ma-travel-hover, 4px);
+      }
+    }
+    :where(.ma-codetabs__panel > pre) {
+      margin: 0;
+      padding: 1rem;
+      overflow-x: auto;
+      background: transparent !important;
+      font-size: 0.8125rem;
+      line-height: 1.6;
+      tab-size: 2;
+    }
+    /* Shiki with defaultColor: false leaves the colours in two variables per token; --ma-dark (0 or 1 from the base tokens'
+       three-state rule) picks one, so the block follows system, data-theme and .dark exactly as every other token does */
+    :where(.ma-codetabs__panel pre span) {
+      color: color-mix(in srgb, var(--shiki-dark) calc(var(--ma-dark, 0) * 100%), var(--shiki-light));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-codetabs__indicator),
+      :where(.ma-codetabs__panel) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/CodeTabs.meta.ts

@@ -0,0 +1,36 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'CodeTabs',
+  slug: 'code-tabs',
+  title: 'Code Tabs',
+  description: 'A code block with tabs (for example npm, pnpm, bun) and a copy button per panel. Highlighted at build by Astro\'s own <Code> (Shiki) with light and dark themes as CSS variables, so it follows the page theme with no script. The tabs are radio inputs and :has(), so arrow keys and selection are native and the indicator slides on the preset. The only script is CopyButton\'s, shared; long lines scroll inside the panel.',
+  summary: 'Code tabs for npm, pnpm or bun with a copy button on each panel and Shiki highlighting that follows the theme.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'widely', needs: ['has', 'starting-style', 'clipboard'], fallback: 'panels switch without the fade' },
+  readout: '<CodeTabs id="install" tabs={[…]}>',
+  usage: `<CodeTabs\n  id="install"\n  tabs={[\n    { label: 'npm', code: 'npx astro add moonarc' },\n    { label: 'pnpm', code: 'pnpm astro add moonarc' },\n    { label: 'bun', code: 'bunx astro add moonarc' },\n  ]}\n/>`,
+  props: [
+    { name: 'tabs', type: '{ label: string; code: string; lang?: string }[]', description: 'Up to eight tabs; lang is a Shiki language id, sh by default.' },
+    { name: 'id', type: 'string', description: 'Radio group name and id prefix; unique per page.' },
+    { name: 'label', type: 'string', description: 'Accessible name of the radio group ("Package manager").' },
+    { name: 'active', type: 'number', default: '0', description: 'Index selected on load.' },
+    { name: 'themes', type: '{ light: string; dark: string }', default: 'github-light / github-dark-default', description: 'Shiki themes; both are emitted as variables per token, each colour moved until it reads at 4.5 : 1 on its panel.' },
+  ],
+  reducedMotion: 'The indicator jumps; panels switch instantly.',
+  clientRouter: 'The tabs are CSS; CopyButton rebinds through the shared runtime.',
+  craft: [
+    'Highlighting happens at build: the HTML carries the colours as two custom properties per token, and one rule per theme state picks one. Zero bytes of highlighter in the browser.',
+    'Contrast is fixed at build: a transformer (lib/contrast) moves each token colour in OKLCH lightness, hue kept, until it reads at 4.5 : 1 on a panel a shade heavier than the default. As shipped, GitHub light\'s red and orange, and every grey comment, fall short of AA. Colours that already pass are untouched.',
+    'The tabs are a radiogroup, not a tablist: the controls are radios, and a screen reader announces them as radios ("pnpm, radio button, 2 of 3"). label names the group.',
+    'Every panel has its own CopyButton, shown only with its panel (:has() again), and each copies its own <pre>, so no script decides which tab is open.',
+    'Tabs are equal-width columns in an auto-sized grid, so the indicator is one translate of whole widths; no measuring.',
+    'The panel scrolls horizontally inside itself (min-width: 0 on the grid item, overflow-x on the pre), so a long install line never widens a 390 px page.',
+  ],
+  related: ['tabs', 'copy-button', 'browser-frame'],
+  intents: ['code block with tabs', 'npm pnpm yarn tabs', 'install command tabs', 'code tabs with copy button', 'shiki code tabs astro'],
+  replaces: ['CodeTabs (Fumadocs)', 'CodeBlock tabs (Aceternity)', 'Tabs + CodeBlock (shadcn)'],
+  fixture: { props: { id: 'ma-fixture-codetabs', tabs: [{ label: 'npm', code: 'echo "Fixture content for CodeTabs"' }, { label: 'pnpm', code: 'pnpm x' }] }, expect: 'Fixture content for CodeTabs' },
+} satisfies ComponentMeta;