@moonarc/core 0.1.0

package/src/components/PillNav.astro

@@ -0,0 +1,170 @@
+---
+/**
+ * PillNav — a floating pill of links whose active pill glides to the page
+ * you chose, zero JS.
+ *
+ * The active pill is decided on the server (`current`, or the request path:
+ * an exact match is the page, the longest prefix is the section, and no
+ * match marks nothing) and carries a view-transition-name, so under
+ * <ClientRouter /> the browser
+ * itself slides it from the old link to the new one across the swap — no
+ * script measures anything. A second, faint pill sits under whichever link
+ * is hovered or focused through anchor positioning (the hovered link names
+ * the anchor; the pill follows). Without anchor positioning there is no
+ * hover pill; without a router the active pill moves at once.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Item {
+  href: string;
+  label: string;
+}
+
+interface Props extends HTMLAttributes<'nav'> {
+  items: Item[];
+  /** href of the active item. Unset: the request path (exact, then the longest prefix). */
+  current?: string;
+  /** Suffix for the view-transition-name, unique per page; two PillNavs on one page need two. */
+  name?: string;
+  /** Pill colour and its text; default ink on panel. */
+  color?: string;
+  textColor?: string;
+  /** Accessible name of the nav. */
+  label?: string;
+}
+
+const { items, current, name = 'ma-pillnav', color, textColor, label = 'Primary', class: className, style, ...rest } = Astro.props;
+const path = Astro.url.pathname;
+// the page itself (aria-current="page"), else the section it sits in (aria-current="true"); no match marks nothing, so "/"
+// is never claimed as the page you are on when it is not
+const exact = current ?? items.find((i) => i.href === path)?.href;
+const active = exact ?? items.filter((i) => i.href !== '/' && path.startsWith(i.href)).sort((a, b) => b.href.length - a.href.length)[0]?.href;
+const vars = [color && `--ma-pillnav-bg:${color}`, textColor && `--ma-pillnav-fg:${textColor}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<nav class:list={['ma-pillnav', className]} aria-label={label} style={vars || undefined} {...rest}>
+  <ul class="ma-pillnav__list">
+    {
+      items.map((it) => (
+        <li class="ma-pillnav__item">
+          <a href={it.href} class="ma-pillnav__link" aria-current={it.href === active ? (exact ? 'page' : 'true') : undefined}>
+            {it.href === active && <span class="ma-pillnav__pill" style={`view-transition-name:${name};view-transition-class:ma-pillnav`} aria-hidden="true" />}
+            <span class="ma-pillnav__label">{it.label}</span>
+          </a>
+        </li>
+      ))
+    }
+    <li class="ma-pillnav__hover" aria-hidden="true"></li>
+  </ul>
+  <slot />
+</nav>
+
+<style is:global>
+  @layer components {
+    :where(.ma-pillnav) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.25rem;
+      border: 1px solid var(--ma-edge);
+      border-radius: 999px;
+      background: var(--ma-panel);
+      backdrop-filter: blur(12px);
+      box-shadow: 0 12px 32px -20px rgb(0 0 0 / 0.45);
+    }
+    :where(.ma-pillnav__list) {
+      position: relative;
+      display: flex;
+      gap: 0.125rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    :where(.ma-pillnav__link) {
+      position: relative;
+      isolation: isolate;
+      display: inline-flex;
+      align-items: center;
+      padding: 0.45em 1em;
+      border-radius: 999px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.2;
+      color: inherit;
+      text-decoration: none;
+      white-space: nowrap;
+      opacity: 0.7;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out), color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    /* the hovered (or focused) link is the anchor; the hover pill reads it */
+    :where(.ma-pillnav__link:is(:hover, :focus-visible)) {
+      opacity: 1;
+      anchor-name: --ma-pillnav-h;
+    }
+    :where(.ma-pillnav__link:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-pillnav__link[aria-current]) {
+      opacity: 1;
+      color: var(--ma-pillnav-fg, var(--ma-panel));
+    }
+    /* the active pill: one element with a view-transition-name — the router slides it to the next page's active link */
+    :where(.ma-pillnav__pill) {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      background: var(--ma-pillnav-bg, var(--ma-ink));
+    }
+    :where(.ma-pillnav__label) {
+      position: relative;
+    }
+    /* the hover pill: anchored to whichever link is hovered; it fades where the anchor is and leaves when nothing is */
+    :where(.ma-pillnav__hover) {
+      position: absolute;
+      position-anchor: --ma-pillnav-h;
+      top: anchor(top);
+      left: anchor(left);
+      width: anchor-size(width);
+      height: anchor-size(height);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--ma-ink) 8%, transparent);
+      opacity: 0;
+      scale: 0.9;
+      pointer-events: none;
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        scale var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-pillnav__list:has(.ma-pillnav__link:is(:hover, :focus-visible):not([aria-current])) .ma-pillnav__hover) {
+      opacity: 1;
+      scale: 1;
+    }
+    @supports not (anchor-name: --a) {
+      :where(.ma-pillnav__hover) {
+        display: none;
+      }
+    }
+    /* the slide, on the tokens (view-transition-class: every PillNav on the site shares it) */
+    :where(:root)::view-transition-group(.ma-pillnav) {
+      animation-duration: var(--ma-duration);
+      animation-timing-function: var(--ma-ease);
+    }
+    :where(:root)::view-transition-old(.ma-pillnav),
+    :where(:root)::view-transition-new(.ma-pillnav) {
+      animation-duration: var(--ma-duration-fast);
+      animation-timing-function: var(--ma-ease-out);
+      block-size: 100%;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(:root)::view-transition-group(.ma-pillnav) {
+        animation-duration: 0s;
+      }
+      :where(.ma-pillnav__hover) {
+        transition: none;
+        scale: 1;
+      }
+    }
+  }
+</style>

package/src/components/PillNav.meta.ts

@@ -0,0 +1,37 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'PillNav',
+  slug: 'pill-nav',
+  title: 'Pill Nav',
+  description: 'A floating pill of links whose active pill glides to the page you chose. Zero JavaScript: the server marks the current link, the pill carries a view-transition-name, and under ClientRouter the browser slides it across the swap; a faint pill follows hover and focus through anchor positioning.',
+  summary: "A floating navigation pill whose active marker glides to the chosen page across Astro's router.",
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click', 'hover'],
+  support: { baseline: 'newly', needs: ['view-transitions', 'vt-class', 'anchor', 'has'], fallback: 'without anchor positioning there is no hover pill; without view transitions, or without ClientRouter, the active pill moves at once; without view-transition-class it slides on the browser\'s default timing instead of the preset' },
+  readout: '<PillNav current="/work/">',
+  usage: `<PillNav\n  items={[\n    { href: '/', label: 'Home' },\n    { href: '/work/', label: 'Work' },\n    { href: '/about/', label: 'About' },\n    { href: '/contact/', label: 'Contact' },\n  ]}\n/>\n\n<!-- with a theme toggle at the end -->\n<PillNav items={items} current="/work/"><ThemeToggle /></PillNav>`,
+  props: [
+    { name: 'items', type: '{ href: string; label: string }[]', description: 'The links.' },
+    { name: 'current', type: 'string', description: 'href of the active item, marked aria-current="page". Unset: the request path; an exact match is the page, else the longest prefix is the section (aria-current="true"), and a path that matches nothing marks no item.' },
+    { name: 'name', type: 'string', default: "'ma-pillnav'", description: 'Suffix of the view-transition-name; two PillNavs on one page need two names.' },
+    { name: 'color', type: 'string', description: 'Pill colour; default the ink token.' },
+    { name: 'textColor', type: 'string', description: 'Text on the pill; default the panel token.' },
+    { name: 'label', type: 'string', default: "'Primary'", description: 'Accessible name of the nav.' },
+  ],
+  reducedMotion: 'The active pill jumps to the new link (the group animation is 0 s); the hover pill appears without the scale.',
+  clientRouter: 'The pill is a named element, so the router morphs it from the old page to the new one. Without the router each page renders the pill in place.',
+  craft: [
+    'The server decides the active link, so the HTML is the end state and the pill never flashes from the first link to the right one.',
+    'One view-transition-name on the pill, and a view-transition-class shared by every PillNav, so the slide runs on the preset curve and duration, the same tokens as the Tabs indicator.',
+    'The hover pill is anchor-positioned: the hovered link names the anchor, the pill reads its box. It fades in where the anchor is; between two links it moves at once rather than gliding, because anchor() values are the same computed value on every link.',
+    'aria-current on the active link is both the accessibility and the styling hook; there is no class to keep in sync. It says "page" only for the page itself: inside a section it says "true", and on a page no link matches it is absent, so Home is never announced as the page you are on when it is not.',
+    'The hover pill is the list\'s last <li>, aria-hidden, so the list stays valid HTML and screen readers count only the links.',
+    'Inside the pill the link isolates its stacking context, so the pill can sit at z-index -1 without falling behind the nav background.',
+  ],
+  related: ['tabs', 'dock', 'theme-toggle'],
+  intents: ['pill navigation', 'floating nav pill', 'sliding active indicator nav', 'nav with animated indicator', 'navbar pill astro', 'tab bar that slides between pages'],
+  replaces: ['PillNav (React Bits)', 'FloatingNav (Aceternity)', 'Tabs with layoutId (Framer Motion)', 'NavigationMenu indicator (shadcn / Radix)'],
+  fixture: { props: { items: [{ href: '/', label: 'Fixture content for PillNav' }, { href: '/two/', label: 'Two' }], current: '/' }, expect: 'Fixture content for PillNav' },
+} satisfies ComponentMeta;

package/src/components/Popover.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * Popover — a popover anchored to its trigger, zero JS.
+ *
+ * The popover attribute gives open/close, light dismiss, Escape and the top
+ * layer. Anchor positioning places it beside the trigger and flips it when
+ * there is no room; @starting-style animates it in and allow-discrete out.
+ * Browsers without anchor positioning show it centred at the bottom of the
+ * viewport, still fully functional.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Popover id; the trigger points at it. */
+  id: string;
+  /** Trigger label; or use the `trigger` slot. */
+  label?: string;
+  /** position-area value: top, bottom, left, right, or any two-keyword form. */
+  placement?: string;
+  /** Gap from the trigger, any CSS length. */
+  gap?: string;
+}
+
+const { id, label = 'Open', placement = 'bottom', gap = '0.5rem', class: className, style, ...rest } = Astro.props;
+const anchor = `--ma-pop-${id}`;
+const inline = [`position-anchor:${anchor}`, `--ma-pop-area:${placement}`, `--ma-pop-gap:${gap}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+const triggerAttrs = { popovertarget: id, style: `anchor-name:${anchor}` };
+const popAttrs = { popover: 'auto' };
+---
+
+{Astro.slots.has('trigger') ? <slot name="trigger" /> : <button type="button" class="ma-popover__trigger" {...triggerAttrs}>{label}</button>}
+<div id={id} class:list={['ma-popover', className]} style={inline} {...popAttrs} {...rest}>
+  <slot />
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-popover) {
+      position: fixed;
+      inset: auto;
+      position-area: var(--ma-pop-area, bottom);
+      position-try-fallbacks: flip-block, flip-inline;
+      margin: var(--ma-pop-gap, 0.5rem);
+      /* two hooks for a component that builds on Popover (MegaMenu): its own width and padding reach the popover even
+         where this rule comes later in the page's CSS than its own */
+      max-width: var(--ma-pop-max, min(20rem, calc(100vw - 2rem)));
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.75rem;
+      padding: var(--ma-pop-pad, 0.875rem 1rem);
+      background: var(--ma-panel);
+      color: inherit;
+      box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.35);
+      opacity: 0;
+      scale: 0.96;
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        scale var(--ma-duration-fast) var(--ma-ease-out),
+        display var(--ma-duration-fast) allow-discrete,
+        overlay var(--ma-duration-fast) allow-discrete;
+    }
+    :where(.ma-popover:popover-open) {
+      opacity: 1;
+      scale: 1;
+      transition-duration: var(--ma-duration);
+      transition-timing-function: var(--ma-ease);
+    }
+    @starting-style {
+      :where(.ma-popover:popover-open) {
+        opacity: 0;
+        scale: 0.96;
+      }
+    }
+    :where(.ma-popover)::backdrop {
+      background: transparent;
+    }
+    :where(.ma-popover__trigger) {
+      cursor: pointer;
+    }
+    /* no anchor positioning: a small sheet at the bottom of the viewport */
+    @supports not (position-area: bottom) {
+      :where(.ma-popover) {
+        inset: auto 0 1.5rem;
+        margin-inline: auto;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-popover),
+      :where(.ma-popover:popover-open) {
+        scale: 1;
+        transition-duration: var(--ma-duration-fast);
+        transition-timing-function: linear;
+      }
+    }
+  }
+</style>

package/src/components/Popover.meta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Popover',
+  slug: 'popover',
+  title: 'Popover',
+  description: 'A popover that opens beside its trigger, flips when there is no room, closes on outside click or Escape, and animates in and out. Zero JavaScript: the popover attribute, anchor positioning and @starting-style do all of it.',
+  summary: 'A popover that opens beside its trigger, flips when there is no room, and animates in and out.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['popover', 'anchor', 'starting-style', 'allow-discrete'], fallback: 'without anchor positioning it opens as a small sheet at the bottom of the viewport' },
+  readout: '<Popover placement="bottom">',
+  usage: `<Popover id="help" label="What is measured?" placement="bottom">\n  <p>Raw bytes of JavaScript from a production build.</p>\n</Popover>`,
+  props: [
+    { name: 'id', type: 'string', description: 'Popover id; the trigger points at it.' },
+    { name: 'label', type: 'string', default: "'Open'", description: 'Trigger label. Use the trigger slot for custom markup (give it popovertarget={id} and style="anchor-name: --ma-pop-{id}").' },
+    { name: 'placement', type: 'string', default: "'bottom'", description: 'A position-area value: top, bottom, left, right, or two keywords such as "bottom span-right".' },
+    { name: 'gap', type: 'string', default: "'0.5rem'", description: 'Distance from the trigger.' },
+    { name: '--ma-pop-max', type: 'CSS length (custom property)', default: 'min(20rem, calc(100vw - 2rem))', description: 'The popover\'s max-width. Set it in a rule or style on the popover (a class passed to it) or an ancestor, for example for a menu panel wider than 20 rem.' },
+    { name: '--ma-pop-pad', type: 'CSS padding (custom property)', default: '0.875rem 1rem', description: 'The popover\'s padding. Set it in a rule or style on the popover (a class passed to it) or an ancestor.' },
+  ],
+  reducedMotion: 'A 150 ms crossfade, no scale.',
+  clientRouter: 'Native; nothing to rebind.',
+  craft: [
+    'position-try-fallbacks: flip-block, flip-inline. The browser flips it when it would overflow, which is the part libraries spend most of their bytes on.',
+    'Light dismiss, Escape and the top layer come from popover="auto"; none of it is re-implemented.',
+    'Enter on the preset curve, exit in 150 ms; the backdrop is transparent because a popover is not a modal.',
+  ],
+  related: ['dialog', 'accordion', 'tabs'],
+  intents: ['popover', 'tooltip popover', 'anchored popup', 'dropdown without javascript', 'popover api astro'],
+  replaces: ['Popover (Radix / shadcn)', 'Floating UI for simple popovers', 'HoverCard'],
+  fixture: { props: { id: 'ma-fixture-pop', label: 'Fixture content for Popover' }, expect: 'Fixture content for Popover' },
+} satisfies ComponentMeta;

package/src/components/PriceSwitch.astro

@@ -0,0 +1,251 @@
+---
+/**
+ * PriceSwitch — monthly or yearly; the prices roll. Two native radios and
+ * :has(): the checked one sets --ma-nf-value on every plan, so each
+ * NumberFlow rolls to the other price, the period label swaps, and the
+ * "save" badge enters through @starting-style. Zero JS. The server HTML
+ * carries both prices as text for assistive tech; where the engine cannot
+ * roll the digits (no round() / mod()), that text is the visible price.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import NumberFlow from './NumberFlow.astro';
+
+interface Plan {
+  name?: string;
+  monthly: number;
+  yearly: number;
+  note?: string;
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Radio group name and id prefix; unique per page. */
+  id: string;
+  /** Plans to price. One plan can also be given as monthly + yearly. */
+  plans?: Plan[];
+  monthly?: number;
+  yearly?: number;
+  /** Currency symbol before the number. */
+  currency?: string;
+  /** Period labels after the number. */
+  periods?: [string, string];
+  /** Toggle labels. */
+  labels?: [string, string];
+  /** Badge shown on the yearly option once it is chosen. */
+  save?: string;
+  /** Accessible name of the radio group. */
+  groupLabel?: string;
+}
+
+const { id, plans, monthly, yearly: yearlyPrice, currency = '$', periods = ['/mo', '/yr'], labels = ['Monthly', 'Yearly'], save, groupLabel = 'Billing period', class: className, ...rest } = Astro.props;
+const list: Plan[] = plans ?? [{ monthly: monthly ?? 0, yearly: yearlyPrice ?? 0 }];
+const digits = Math.max(...list.map((p) => String(Math.floor(Math.max(p.monthly, p.yearly))).length));
+const decimals = list.some((p) => !Number.isInteger(p.monthly) || !Number.isInteger(p.yearly)) ? 2 : 0;
+const fmt = (n: number) => `${currency}${n.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}`;
+---
+
+<div class:list={['ma-price', className]} {...rest}>
+  <div class="ma-price__toggle" role="radiogroup" aria-label={groupLabel}>
+    <input type="radio" class="ma-price__input" name={id} id={`${id}-m`} checked />
+    <label for={`${id}-m`} class="ma-price__opt">{labels[0]}</label>
+    <input type="radio" class="ma-price__input" name={id} id={`${id}-y`} />
+    <label for={`${id}-y`} class="ma-price__opt">{labels[1]}{save && <span class="ma-price__save">{save}</span>}</label>
+    <span class="ma-price__thumb" aria-hidden="true"></span>
+  </div>
+  <div class="ma-price__plans">
+    {list.map((p) => (
+      <div class="ma-price__plan" style={`--ma-price-monthly:${p.monthly};--ma-price-yearly:${p.yearly}`}>
+        {p.name && <p class="ma-price__name">{p.name}</p>}
+        <p class="ma-price__amount">
+          <span class="ma-price__sr">{fmt(p.monthly)}{periods[0]}</span>
+          <span class="ma-price__sr ma-price__sr--y">{fmt(p.yearly)}{periods[1]}</span>
+          <span class="ma-price__currency" aria-hidden="true">{currency}</span>
+          <NumberFlow value={p.monthly} digits={digits} decimals={decimals} class="ma-price__number" aria-hidden="true" />
+          <span class="ma-price__period" aria-hidden="true"><span class="ma-price__per">{periods[0]}</span><span class="ma-price__per ma-price__per--y">{periods[1]}</span></span>
+        </p>
+        {p.note && <p class="ma-price__note">{p.note}</p>}
+      </div>
+    ))}
+  </div>
+  <slot />
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-price__toggle) {
+      position: relative;
+      display: inline-grid;
+      grid-template-columns: 1fr 1fr;
+      padding: 0.2em;
+      border: 1px solid var(--ma-edge);
+      border-radius: 999px;
+    }
+    :where(.ma-price__input) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    :where(.ma-price__opt) {
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5em;
+      padding: 0.45em 1.1em;
+      border-radius: 999px;
+      cursor: pointer;
+      font-weight: 500;
+      opacity: var(--ma-dim, 0.7);
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-price__input:checked + .ma-price__opt) {
+      opacity: 1;
+    }
+    :where(.ma-price__input:focus-visible + .ma-price__opt) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-price__thumb) {
+      position: absolute;
+      inset: 0.2em auto 0.2em 0.2em;
+      width: calc(50% - 0.2em);
+      border-radius: 999px;
+      background: var(--ma-edge);
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__thumb) {
+      translate: 100% 0;
+    }
+    /* the badge enters when yearly is chosen */
+    :where(.ma-price__save) {
+      display: none;
+      padding: 0.1em 0.55em;
+      border-radius: 999px;
+      font-size: 0.75em;
+      background: var(--ma-ink);
+      color: var(--ma-panel);
+      transition:
+        opacity var(--ma-duration) var(--ma-ease),
+        scale var(--ma-duration) var(--ma-ease),
+        display var(--ma-duration) allow-discrete;
+    }
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__save) {
+      display: inline-block;
+    }
+    @starting-style {
+      :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__save) {
+        opacity: 0;
+        scale: 0.6;
+      }
+    }
+    :where(.ma-price__plans) {
+      display: grid;
+      gap: 1.5em;
+      grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
+      margin-top: 1.25em;
+    }
+    /* the price every NumberFlow in a plan shows */
+    :where(.ma-price__plan) {
+      --ma-nf-value: var(--ma-price-monthly);
+    }
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__plan) {
+      --ma-nf-value: var(--ma-price-yearly);
+    }
+    :where(.ma-price__name) {
+      margin: 0 0 0.35em;
+      font-size: 0.875em;
+      opacity: 0.7;
+    }
+    :where(.ma-price__amount) {
+      display: flex;
+      align-items: baseline;
+      gap: 0.1em;
+      margin: 0;
+      font-size: 2.25em;
+      font-weight: 600;
+      letter-spacing: -0.03em;
+      line-height: 1;
+    }
+    :where(.ma-price__currency) {
+      font-size: 0.6em;
+      align-self: flex-start;
+      margin-top: 0.15em;
+    }
+    :where(.ma-price__period) {
+      display: inline-grid;
+      margin-left: 0.2em;
+      font-size: 0.4em;
+      font-weight: 400;
+      letter-spacing: 0;
+      opacity: 0.7;
+    }
+    :where(.ma-price__per) {
+      grid-area: 1 / 1;
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-price__per--y) {
+      opacity: 0;
+      translate: 0 var(--ma-travel-hover);
+    }
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__per) {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--ma-travel-hover));
+    }
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__per--y) {
+      opacity: 1;
+      translate: 0 0;
+    }
+    :where(.ma-price__note) {
+      margin: 0.5em 0 0;
+      font-size: 0.875em;
+      opacity: 0.7;
+    }
+    /* the current price as text, for assistive tech */
+    :where(.ma-price__sr) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    :where(.ma-price__sr--y),
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__sr:not(.ma-price__sr--y)) {
+      display: none;
+    }
+    :where(.ma-price:has(.ma-price__input:nth-of-type(2):checked) .ma-price__sr--y) {
+      display: block;
+    }
+    /* NumberFlow's digits need round() and mod() (the same test as its own). An engine with :has() and without them
+       (Chrome 105 to 124) kept the monthly digits while the period swapped to /yr: there the price is the text itself */
+    @supports not (translate: calc(mod(round(down, 7, 1), 10) * 1em)) {
+      :where(.ma-price__currency),
+      :where(.ma-price__period) {
+        display: none;
+      }
+      /* one class of weight: the number is also NumberFlow's root, whose own display rule may come later in the page */
+      :where(.ma-price__amount) .ma-price__number {
+        display: none;
+      }
+      :where(.ma-price__sr) {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip-path: none;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-price__thumb),
+      :where(.ma-price__save),
+      :where(.ma-price__per) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/PriceSwitch.meta.ts

@@ -0,0 +1,41 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'PriceSwitch',
+  slug: 'price-switch',
+  title: 'Price Switch',
+  description:
+    'A monthly / yearly toggle whose prices roll to the other amount instead of swapping. The thumb slides, the period label changes places, and a "save" badge appears on the yearly option. Two native radios, :has() and NumberFlow. Zero JavaScript; both prices are in the HTML as text for assistive tech.',
+  summary: 'A monthly and yearly price toggle whose prices roll to the other amount, with a save badge on the yearly option.',
+  category: 'data',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['has', 'css-math', 'starting-style', 'allow-discrete'], fallback: 'without round() and mod() the price is plain text that changes in place with the period; without @starting-style the badge appears without its entrance' },
+  readout: '<PriceSwitch monthly={12} yearly={115}>',
+  usage: `<PriceSwitch id="billing" plans={[\n  { name: 'Solo', monthly: 12, yearly: 115, note: 'one site' },\n  { name: 'Team', monthly: 48, yearly: 460, note: 'up to ten' },\n]} save="2 months free" />`,
+  props: [
+    { name: 'id', type: 'string', description: 'Radio group name and id prefix; unique per page.' },
+    { name: 'plans', type: '{ name?, monthly, yearly, note? }[]', description: 'Plans to price side by side. Omit it for a single price from monthly and yearly.' },
+    { name: 'monthly', type: 'number', description: 'Monthly price of the single plan.' },
+    { name: 'yearly', type: 'number', description: 'Yearly price of the single plan.' },
+    { name: 'currency', type: 'string', default: "'$'", description: 'Symbol before the number.' },
+    { name: 'periods', type: '[string, string]', default: "['/mo', '/yr']", description: 'Period labels after the number.' },
+    { name: 'labels', type: '[string, string]', default: "['Monthly', 'Yearly']", description: 'Toggle labels.' },
+    { name: 'save', type: 'string', description: 'Badge shown on the yearly option once it is chosen, e.g. "save 20%".' },
+    { name: 'groupLabel', type: 'string', default: "'Billing period'", description: 'Accessible name of the radio group, for a page in another language.' },
+  ],
+  reducedMotion: 'Prices, thumb and labels change in place; the badge appears without scaling in.',
+  clientRouter: 'CSS-only; nothing to rebind. The radio state is the page\'s own.',
+  craft: [
+    'The toggle is two radios: keyboard, focus ring and one-of-two are the browser\'s. :has() on the wrapper turns the checked one into --ma-nf-value on every plan, and NumberFlow does the rest.',
+    'Prices roll rather than swap, so the eye sees how far apart the two amounts are; a swap hides that.',
+    'The badge waits until yearly is chosen and enters through @starting-style: information arrives at the moment it becomes true, not as a permanent nag beside the label.',
+    'The period label crosses the thumb\'s direction (/mo leaves upward while /yr arrives from below), the same enter/exit asymmetry as everything else here.',
+    'Both prices exist as visually hidden text and the one for the chosen period is the only one not display: none, so a screen reader hears the right amount while the rolling digits stay aria-hidden.',
+    'The digits need round() and mod() (NumberFlow). In an engine with :has() and without them (Chrome 105 to 124) the rolling number, the symbol and the period are hidden and that same text is the visible price, so the amount and the period always agree.',
+  ],
+  related: ['number-flow', 'tabs', 'count-up'],
+  intents: ['pricing toggle monthly yearly', 'price switch animation', 'billing period toggle', 'animated pricing switch', 'pricing table toggle astro'],
+  replaces: ['pricing toggles (motion.dev, Tailwind Plus)', 'framer-motion price flips'],
+  fixture: { props: { id: 'fixture', monthly: 12, yearly: 115 }, expect: 'class="ma-price"' },
+} satisfies ComponentMeta;