@moonarc/core 0.1.0

package/src/components/Switch.astro

@@ -0,0 +1,165 @@
+---
+/**
+ * Switch — a toggle that springs, zero JS. It *is* a checkbox: `<input
+ * type="checkbox" role="switch">` with `appearance: none`, the input itself
+ * drawn as the track and its ::before as the thumb, so the value submits,
+ * `required` and `disabled` work, Space flips it and a form library sees a
+ * plain checkbox. The thumb travels on `translate` with the preset curve
+ * (snap and lively are sampled springs, so it lands with a bounce); the
+ * track colour crosses on the fast token. WebKit's native `switch`
+ * attribute is set too, but nothing here depends on it. Wrapped in a
+ * <label> when `label` is given; otherwise pass `aria-label`. Classes are
+ * `.ma-toggle` — `.ma-switch` was already taken.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size'> {
+  /** Form field name. */
+  name?: string;
+  /** Submitted value when on. */
+  value?: string;
+  checked?: boolean;
+  /** Visible label; without it, pass aria-label. */
+  label?: string;
+  /** Track height: 1.25rem or 1.5rem. */
+  size?: 'sm' | 'md';
+  /** Track colour when on; default the ink token. */
+  color?: string;
+}
+
+const { name, value = 'on', checked = false, label, size = 'md', color, class: className, style, ...rest } = Astro.props;
+const vars = [color && `--ma-toggle-on:${color}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+// the WebKit native switch attribute: harmless elsewhere, and appearance: none overrides its look everywhere
+const native = { switch: '' };
+---
+
+<label class:list={['ma-toggle', className]} data-size={size} style={vars || undefined}>
+  <input type="checkbox" role="switch" class="ma-toggle__input" name={name} value={value} checked={checked} {...native} {...rest} />
+  {label && <span class="ma-toggle__label">{label}</span>}
+</label>
+
+<style is:global>
+  @layer components {
+    :where(.ma-toggle) {
+      --ma-toggle-h: 1.5rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.6em;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+    :where(.ma-toggle[data-size='sm']) {
+      --ma-toggle-h: 1.25rem;
+    }
+    :where(.ma-toggle__input) {
+      /* the track: the input itself, so the value, the focus and the keyboard are the browser's */
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+      flex: none;
+      inline-size: calc(var(--ma-toggle-h) * 1.75);
+      block-size: var(--ma-toggle-h);
+      margin: 0;
+      border: 1px solid var(--ma-edge);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--ma-ink) 14%, 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-toggle__input)::before {
+      /* the thumb: a pseudo-element, travelling the track width minus itself on the preset spring */
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 0;
+      inline-size: calc(var(--ma-toggle-h) - 6px);
+      block-size: calc(var(--ma-toggle-h) - 6px);
+      margin-block-start: calc((var(--ma-toggle-h) - 6px) / -2);
+      margin-inline-start: 2px;
+      border-radius: 50%;
+      background: var(--ma-panel);
+      box-shadow: 0 1px 2px var(--ma-glow);
+      translate: 0 0;
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    /* the target: whatever the track's size, the input answers a press within 24 × 24 px (WCAG 2.2) — a pseudo-element of the input is part of it for hit testing */
+    :where(.ma-toggle__input)::after {
+      content: '';
+      position: absolute;
+      inset: min(0px, calc((var(--ma-toggle-h) - 26px) / 2)) min(0px, calc((var(--ma-toggle-h) * 1.75 - 26px) / 2));
+    }
+    :where(.ma-toggle__input:checked) {
+      background: var(--ma-toggle-on, var(--ma-ink));
+      border-color: var(--ma-toggle-on, var(--ma-ink));
+    }
+    :where(.ma-toggle__input:checked)::before {
+      translate: calc(var(--ma-toggle-h) * 0.75 * var(--ma-toggle-dir, 1)) 0;
+    }
+    /* right to left: the thumb starts at the right end (inset-inline-start), so on is a move to the left, and translate
+       has no logical form. [dir] and not :dir(): Chrome has :dir() only from 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-toggle, .ma-toggle__input[dir='rtl']) {
+      --ma-toggle-dir: -1;
+    }
+    :where([dir='rtl'] [dir='ltr'] .ma-toggle, [dir='rtl'] .ma-toggle__input[dir='ltr']) {
+      --ma-toggle-dir: 1;
+    }
+    :where(.ma-toggle__input:focus-visible) {
+      outline: 2px solid var(--ma-toggle-on, var(--ma-ink));
+      outline-offset: 3px;
+    }
+    :where(.ma-toggle__input:disabled) {
+      cursor: not-allowed;
+      opacity: 0.45;
+      transition: none;
+    }
+    :where(.ma-toggle__input:disabled)::before {
+      transition: none;
+    }
+    :where(.ma-toggle:has(.ma-toggle__input:disabled)) {
+      cursor: not-allowed;
+    }
+    :where(.ma-toggle:has(.ma-toggle__input:disabled) .ma-toggle__label) {
+      opacity: 0.6;
+    }
+    :where(.ma-toggle__label) {
+      line-height: 1.2;
+      user-select: none;
+    }
+    /* Windows high contrast: the track is a stroke, the thumb a filled dot, on = Highlight */
+    @media (forced-colors: active) {
+      :where(.ma-toggle__input) {
+        border-color: ButtonText;
+        background: Canvas;
+      }
+      :where(.ma-toggle__input)::before {
+        background: ButtonText;
+        box-shadow: none;
+      }
+      :where(.ma-toggle__input:checked) {
+        background: Highlight;
+        border-color: Highlight;
+      }
+      :where(.ma-toggle__input:checked)::before {
+        background: HighlightText;
+      }
+      :where(.ma-toggle__input:disabled) {
+        border-color: GrayText;
+        opacity: 1;
+      }
+      :where(.ma-toggle__input:disabled)::before {
+        background: GrayText;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-toggle__input),
+      :where(.ma-toggle__input)::before {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/Switch.meta.ts

@@ -0,0 +1,37 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Switch',
+  slug: 'switch',
+  title: 'Switch',
+  description: 'A toggle that springs. It is a native checkbox with role="switch" and appearance: none (the input is the track, its ::before the thumb), so the value submits, required and disabled work, Space flips it, and the thumb travels on the preset curve with a bounce under the snap and lively presets. Zero JavaScript.',
+  summary: 'A toggle switch with a springy thumb on a native checkbox, so it submits with the form and Space flips it.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<Switch name="alerts" label="Email me" checked>',
+  usage: `<Switch name="alerts" label="Email me about releases" checked />\n<Switch name="beta" label="Beta features" size="sm" />\n\n<!-- no visible label: name it for assistive tech -->\n<Switch name="dark" aria-label="Dark mode" />`,
+  props: [
+    { name: 'name', type: 'string', description: 'Form field name; the value is sent when the switch is on.' },
+    { 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, wrapping the input in a <label>. Without it, pass aria-label.' },
+    { name: 'size', type: "'sm' | 'md'", default: "'md'", description: 'Track height: 1.25 rem or 1.5 rem; the thumb and the travel follow.' },
+    { name: 'color', type: 'string', description: 'Track colour when on; default the ink token.' },
+  ],
+  reducedMotion: 'The thumb jumps and the track colour changes at once.',
+  clientRouter: 'A native input; its state is in the DOM and goes with the page. Nothing to bind.',
+  craft: [
+    'The input is the control. appearance: none removes the native drawing and leaves everything else: the value in FormData, required, disabled, the label association, Space and the accessibility tree (role="switch" on a checkbox is the pattern the ARIA spec names). No hidden input, no custom element.',
+    'The thumb is a pseudo-element of the input translated by track width minus its own, on the preset curve: under snap or lively that curve is a sampled spring, so the thumb overshoots and settles; under ui it eases. The track colour crosses on the fast token, so it has changed before the thumb arrives.',
+    'Right to left, the thumb starts at the right end and on moves it left: its offsets are logical, and the travel flips under a dir="rtl" ancestor. The selector reads the attribute because Chrome has :dir() only from 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 a right-to-left page is set back.',
+    'WebKit\'s switch attribute is set as well, so a browser that wants to render it natively may, but the stylesheet never depends on it; appearance: none wins in every engine.',
+    'Windows high contrast (forced-colors) gets its own rules: a ButtonText stroke for the track, a filled dot, Highlight when on. A control drawn with appearance: none is invisible there without them.',
+    'Focus is the ring the platform draws on :focus-visible, on the ink colour, offset from the track. Disabled halves the opacity and drops the transition.',
+  ],
+  related: ['check-draw', 'price-switch', 'theme-toggle'],
+  intents: ['toggle switch', 'animated switch', 'checkbox as switch', 'ios style toggle', 'switch with spring', 'settings toggle'],
+  replaces: ['Switch (Motion Primitives)', 'Switch (shadcn / Radix)', 'Toggle (Tailwind Plus)'],
+  fixture: { props: { name: 'ma-fixture', label: 'Fixture content for Switch' }, expect: 'Fixture content for Switch' },
+} satisfies ComponentMeta;

package/src/components/Tabs.astro

@@ -0,0 +1,194 @@
+---
+/**
+ * Tabs — a sliding indicator between tabs, zero JS.
+ *
+ * Tabs are radio inputs (arrow keys, focus, one selected: native). :has()
+ * turns the checked index into a custom property; the indicator translates
+ * by it on the active preset's curve and the matching panel is shown with a
+ * @starting-style entrance. Up to eight tabs. `direction` lays the panels
+ * out as one horizontal track that translates by the same index, so the
+ * panel slides the way you moved — 3 → 1 comes in from the left — with no
+ * knowledge of the previous tab; the track is as tall as its tallest panel
+ * and the panels off-screen are visibility: hidden once the slide ends.
+ * Right to left, tab 1 sits on the right and both movements run the other
+ * way. A panel is its tab's `body` (an HTML string) or, for components and
+ * images, the static slot `panel-1` … `panel-8`, which wins over the body.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Tab {
+  label: string;
+  /** HTML string. The slot `panel-<n>` (n from 1) wins over it. */
+  body?: 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;
+  /** Index selected on load. */
+  active?: number;
+  /** Panels slide sideways in the direction of the change instead of fading in place. */
+  direction?: boolean;
+}
+
+const { tabs, id, label, active = 0, direction = false, class: className, style, ...rest } = Astro.props;
+const list = tabs.slice(0, 8);
+// the caller's style joins the tab count instead of replacing it (the columns and the indicator's width read it)
+const vars = [`--ma-tabs-n:${list.length}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-tabs', className]} data-direction={direction ? '' : undefined} style={vars} {...rest}>
+  <div class="ma-tabs__list" role="radiogroup" aria-label={label}>
+    {
+      list.map((t, i) => (
+        <>
+          <input type="radio" name={id} id={`${id}-${i}`} class="ma-tabs__input" checked={i === active} />
+          <label for={`${id}-${i}`} class="ma-tabs__tab">{t.label}</label>
+        </>
+      ))
+    }
+    <span class="ma-tabs__indicator" aria-hidden="true"></span>
+  </div>
+  <div class="ma-tabs__panels">
+    {/* slot names are static (a name built in the map is not a slot Astro can fill): eight lines, one per tab */}
+    {list.map((t, i) => (
+      <div class="ma-tabs__panel">
+        {i === 0 && <slot name="panel-1"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 1 && <slot name="panel-2"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 2 && <slot name="panel-3"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 3 && <slot name="panel-4"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 4 && <slot name="panel-5"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 5 && <slot name="panel-6"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 6 && <slot name="panel-7"><Fragment set:html={t.body ?? ''} /></slot>}
+        {i === 7 && <slot name="panel-8"><Fragment set:html={t.body ?? ''} /></slot>}
+      </div>
+    ))}
+  </div>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-tabs__list) {
+      position: relative;
+      display: grid;
+      grid-template-columns: repeat(var(--ma-tabs-n, 2), 1fr);
+      border-bottom: 1px solid var(--ma-edge);
+    }
+    :where(.ma-tabs__input) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    :where(.ma-tabs__tab) {
+      padding: 0.625rem 0.75rem;
+      text-align: center;
+      cursor: pointer;
+      opacity: var(--ma-dim, 0.7);
+      font-weight: 500;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-tabs__tab:hover),
+    :where(.ma-tabs__input:checked + .ma-tabs__tab) {
+      opacity: 1;
+    }
+    :where(.ma-tabs__input:focus-visible + .ma-tabs__tab) {
+      outline: 2px solid currentColor;
+      outline-offset: -2px;
+      border-radius: 0.375rem;
+    }
+    :where(.ma-tabs__indicator) {
+      position: absolute;
+      inset-inline-start: 0;
+      bottom: -1px;
+      width: calc(100% / var(--ma-tabs-n, 2));
+      height: 2px;
+      background: currentColor;
+      translate: calc(var(--ma-tab, 0) * 100% * var(--ma-tabs-dir, 1)) 0;
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    /* Right to left the first tab is on the right, so the indicator (and the direction track) translate the other
+       way. [dir] and not :dir(): Chrome has :dir() only from 120, and a build that targets older engines 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-tabs, .ma-tabs[dir='rtl']) { --ma-tabs-dir: -1; }
+    :where([dir='rtl'] [dir='ltr'] .ma-tabs, [dir='rtl'] .ma-tabs[dir='ltr']) { --ma-tabs-dir: 1; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(2):checked)) { --ma-tab: 1; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(3):checked)) { --ma-tab: 2; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(4):checked)) { --ma-tab: 3; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(5):checked)) { --ma-tab: 4; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(6):checked)) { --ma-tab: 5; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(7):checked)) { --ma-tab: 6; }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(8):checked)) { --ma-tab: 7; }
+    :where(.ma-tabs__panel) {
+      display: none;
+      padding-top: 1rem;
+      opacity: 1;
+      translate: 0 0;
+      transition: opacity var(--ma-duration) var(--ma-ease), translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(1):checked) .ma-tabs__panel:nth-child(1)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(2):checked) .ma-tabs__panel:nth-child(2)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(3):checked) .ma-tabs__panel:nth-child(3)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(4):checked) .ma-tabs__panel:nth-child(4)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(5):checked) .ma-tabs__panel:nth-child(5)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(6):checked) .ma-tabs__panel:nth-child(6)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(7):checked) .ma-tabs__panel:nth-child(7)),
+    :where(.ma-tabs:has(.ma-tabs__input:nth-of-type(8):checked) .ma-tabs__panel:nth-child(8)) {
+      display: block;
+    }
+    @starting-style {
+      :where(.ma-tabs__panel) {
+        opacity: 0;
+        translate: 0 var(--ma-travel-hover, 4px);
+      }
+    }
+    /* direction: every panel is laid out in one row of equal columns; the row translates by the checked index,
+       so the slide goes the way the selection moved. Off-screen panels hide once the slide has ended (visibility
+       interpolates as visible for the whole transition) so focus never lands in them. The clip sits on the root:
+       a row that clips itself and then translates carries its clip along, and every panel after the first was cut
+       away. */
+    :where(.ma-tabs[data-direction]) {
+      overflow-x: clip;
+    }
+    :where(.ma-tabs[data-direction] .ma-tabs__panels) {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 100%;
+      translate: calc(var(--ma-tab, 0) * -100% * var(--ma-tabs-dir, 1)) 0;
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-tabs[data-direction] .ma-tabs__panel) {
+      display: block;
+      visibility: hidden;
+      opacity: 0.4;
+      translate: 0 0;
+      transition:
+        visibility var(--ma-duration),
+        opacity var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(1):checked) .ma-tabs__panel:nth-child(1)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(2):checked) .ma-tabs__panel:nth-child(2)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(3):checked) .ma-tabs__panel:nth-child(3)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(4):checked) .ma-tabs__panel:nth-child(4)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(5):checked) .ma-tabs__panel:nth-child(5)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(6):checked) .ma-tabs__panel:nth-child(6)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(7):checked) .ma-tabs__panel:nth-child(7)),
+    :where(.ma-tabs[data-direction]:has(.ma-tabs__input:nth-of-type(8):checked) .ma-tabs__panel:nth-child(8)) {
+      visibility: visible;
+      opacity: 1;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-tabs__indicator),
+      :where(.ma-tabs__panel),
+      :where(.ma-tabs[data-direction] .ma-tabs__panels) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/Tabs.meta.ts

@@ -0,0 +1,47 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Tabs',
+  slug: 'tabs',
+  title: 'Tabs',
+  description: 'Tabs with an indicator that slides to the selected one and panels that fade in. Zero JavaScript: the tabs are radio inputs, so keyboard and selection are native, and :has() turns the checked index into the indicator\'s position.',
+  summary: 'Tabs with an indicator that slides to the selected tab and panels that fade in, keyboard included.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'widely', needs: ['has', 'starting-style'], fallback: 'panels switch without the fade (or the slide)' },
+  readout: '<Tabs direction>',
+  usage: `<Tabs\n  id="install"\n  tabs={[\n    { label: 'npm', body: '<pre>npx astro add moonarc</pre>' },\n    { label: 'pnpm', body: '<pre>pnpm astro add moonarc</pre>' },\n    { label: 'copy', body: '<pre>npx shadcn@latest add …</pre>' },\n  ]}\n/>\n\n<!-- panels slide the way you moved -->\n<Tabs id="features" direction tabs={features} />\n\n<!-- a panel that holds components: the slot of that tab -->\n<Tabs id="shots" label="Screens" tabs={[{ label: 'Board' }, { label: 'Inbox' }]}>\n  <Image slot="panel-1" src={board} alt="The board with three columns" />\n  <BrowserFrame slot="panel-2" url="app.example.com/inbox" src={inbox} alt="The inbox" />\n</Tabs>`,
+  props: [
+    { name: 'tabs', type: '{ label: string; body?: string }[]', description: 'Up to eight tabs; body is an HTML string. For a component, an optimised image or anything else that is not a string, leave body out and fill the slot panel-1 … panel-8 instead: a slot wins over the body.' },
+    { 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"); read before the first tab.' },
+    { name: 'active', type: 'number', default: '0', description: 'Index selected on load.' },
+    { name: 'direction', type: 'boolean', default: 'false', description: 'Panels slide sideways in the direction of the change (3 → 1 comes in from the left, and from the right under dir="rtl") instead of fading in place. The panels sit in one track as tall as the tallest of them.' },
+  ],
+  reducedMotion: 'The indicator jumps; panels switch instantly.',
+  clientRouter: 'CSS-only; the selection lives in the radio inputs and resets with the page.',
+  craft: [
+    'Radios, not buttons with aria-selected: arrow keys, focus and exactly-one-selected are free. The group says so with role="radiogroup": a tablist promises aria-selected and roving focus that only a script can keep, and a screen reader would announce a tab it then cannot find.',
+    'Equal-width columns make the indicator a translate of whole widths: one custom property, no measuring. Under dir="rtl" the first tab is on the right and the translate changes sign; the switch reads the dir attribute, because Chrome has :dir() only from 120 and a build that targets older engines rewrites it into a guess from lang.',
+    'The indicator moves on the preset spring; the incoming panel travels 4 px (--ma-travel-hover), enough to read as arriving, too little to read as a slide.',
+    'Inputs are visually clipped and stay focusable; display: none would remove them from the tab order.',
+    'A panel is an HTML string or a named slot, panel-1 to panel-8. The slots are written out one per tab, because a slot name built in a loop is not one Astro can fill; so an astro:assets Image or a BrowserFrame goes in a panel with no string in between.',
+    'direction needs no memory of the previous tab: the panels are one horizontal track translated by the checked index, so the slide is always toward the selection. The clip sits on the component because a track that clipped itself would carry the clip along as it moved. Panels off screen turn visibility: hidden when the slide ends (visibility interpolates as visible for the whole transition), so Tab never lands in a hidden panel.',
+  ],
+  related: ['accordion', 'carousel', 'popover'],
+  intents: ['tabs', 'animated tab indicator', 'sliding underline tabs', 'tabs without javascript', 'segmented control'],
+  replaces: ['Tabs (Radix / shadcn)', 'Tabs (Aceternity)', 'AnimatedTabs'],
+  fixture: {
+    props: { id: 'ma-fixture-tabs', tabs: [{ label: 'Fixture content for Tabs', body: '<p>One</p>' }, { label: 'Two', body: '<p>Two</p>' }] },
+    expect: 'Fixture content for Tabs',
+    // the slots: an image in panel 1 and a BrowserFrame in panel 2, no body; 0 B of JavaScript either way
+    variants: {
+      slots: {
+        props: { direction: true, tabs: [{ label: 'Fixture content for Tabs' }, { label: 'Two' }] },
+        slot: '<img slot="panel-1" src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2245%22/%3E" width="80" height="45" alt="A slotted image" /><BrowserFrame slot="panel-2" url="https://example.com/panel"><p>A slotted frame</p></BrowserFrame>',
+        expect: 'A slotted frame',
+      },
+    },
+  },
+} satisfies ComponentMeta;

package/src/components/TextRoll.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * TextRoll — a label rolls up into a copy of itself on hover, one letter
+ * after another. Two copies of the text are stacked in one grid cell and
+ * clipped; each character translates by its own height on a per-index
+ * delay, so the roll runs left to right. Zero JS. Hover on the element or
+ * on the link or button that contains it.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** The text. */
+  text: string;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Delay between neighbouring characters in ms. Unset: the preset's --ma-stagger-tight. */
+  step?: number;
+  /** Per-character duration in ms. Unset: the preset's --ma-duration. */
+  duration?: number;
+}
+
+const { text, as: Tag = 'span', step, duration, class: className, style, ...rest } = Astro.props;
+// graphemes, not code points: an emoji with a skin tone or a letter with a combining accent rolls as one character
+const chars = Array.from(new Intl.Segmenter().segment(text), (g) => g.segment);
+const vars = [step !== undefined && `--ma-roll-step:${step}ms`, duration !== undefined && `--ma-roll-dur:${duration}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+// dir="auto": the characters are inline-blocks, which bidi orders by the page's direction, so Latin text on a
+// right-to-left page rolled back to front. The element takes its direction from its own text instead.
+---
+
+<Tag class:list={['ma-roll', className]} dir="auto" style={vars || undefined} {...rest}>
+  <span class="ma-roll__line" aria-hidden="true">{chars.map((c, i) => <span class="ma-roll__char" style={`--ma-i:${i}`}>{c}</span>)}</span>
+  <span class="ma-roll__line ma-roll__line--next" aria-hidden="true">{chars.map((c, i) => <span class="ma-roll__char" style={`--ma-i:${i}`}>{c}</span>)}</span>
+  <span class="ma-sr">{text}</span>
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-roll) {
+      display: inline-grid;
+      overflow: clip;
+      line-height: 1.15;
+      vertical-align: bottom;
+    }
+    :where(.ma-roll__line) {
+      grid-area: 1 / 1;
+      white-space: pre;
+    }
+    :where(.ma-roll__char) {
+      display: inline-block;
+      transition: translate var(--ma-roll-dur, var(--ma-duration)) var(--ma-ease);
+      transition-delay: calc(var(--ma-i, 0) * var(--ma-roll-step, var(--ma-stagger-tight)));
+    }
+    :where(.ma-roll__line--next .ma-roll__char) {
+      translate: 0 100%;
+    }
+    @media (hover: hover) {
+      :where(.ma-roll:hover .ma-roll__line .ma-roll__char),
+      :where(:is(a, button, label):hover .ma-roll .ma-roll__line .ma-roll__char) {
+        translate: 0 -100%;
+      }
+      :where(.ma-roll:hover .ma-roll__line--next .ma-roll__char),
+      :where(:is(a, button, label):hover .ma-roll .ma-roll__line--next .ma-roll__char) {
+        translate: 0 0;
+      }
+    }
+    :where(:is(a, button):focus-visible .ma-roll .ma-roll__line .ma-roll__char) {
+      translate: 0 -100%;
+    }
+    :where(:is(a, button):focus-visible .ma-roll .ma-roll__line--next .ma-roll__char) {
+      translate: 0 0;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-roll__char) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/TextRoll.meta.ts

@@ -0,0 +1,36 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'TextRoll',
+  slug: 'text-roll',
+  title: 'Text Roll',
+  description:
+    'A label rolls upward into a copy of itself on hover, letter by letter from the left, and rolls back when the pointer leaves. Two copies in one clipped cell, one translate per character on a per-index delay. Pure CSS; works from the link or button around it.',
+  summary: 'A text roll hover effect: the label rolls up into a copy of itself letter by letter, and back when you leave.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['hover'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<TextRoll text="Get started">',
+  usage: `<a href="/setup/"><TextRoll text="Get started" /> →</a>\n<nav>{links.map((l) => <a href={l.href}><TextRoll text={l.label} step={20} /></a>)}</nav>`,
+  props: [
+    { name: 'text', type: 'string', description: 'The text; rendered twice, so it must be a plain string.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'step', type: 'number', default: 'preset (40)', description: 'Delay between neighbouring characters in ms. 15–30 reads as a ripple, 40+ as a wave.' },
+    { name: 'duration', type: 'number', default: 'preset (ui: 450)', description: 'Per-character duration in ms; unset, the active preset\'s.' },
+  ],
+  reducedMotion: 'The roll is removed; the label is static.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'The second copy is the same text, so the roll never changes what is read: it is a hover acknowledgement, not a reveal. That is why it can be fast.',
+    'Per-character delay of one stagger step, left to right, on the preset spring: the roll reads as one gesture running through the word.',
+    'Hover is read from the containing link or button too, so the whole target triggers it.',
+    'Each character is inline-block and translates by its own height inside a clipped grid cell: no measuring, no line-height dependency.',
+    'A character is a grapheme (Intl.Segmenter), so an emoji with a skin tone or a letter with a combining accent counts as one. The inline-block characters would follow the page\'s direction, so the element takes dir="auto" and Latin text on a right-to-left page still runs left to right.',
+  ],
+  related: ['underline-hover', 'bubble-text', 'rotating-text'],
+  intents: ['text roll hover', 'rolling link text', 'hover text flip up', 'letter roll animation', 'text roll motion primitives'],
+  replaces: ['TextRoll (Motion Primitives)', 'link hover roll (Skiper, motion.dev)'],
+  // a letter with a combining accent rolls as one character (a grapheme): the é below is e + U+0301, two code points
+  fixture: { props: { text: 'Fixture content for TextRoll café' }, expect: 'style="--ma-i:32">é</span>' },
+} satisfies ComponentMeta;