@moonarc/core 0.1.0

package/src/components/CopyButton.astro

@@ -0,0 +1,189 @@
+---
+/**
+ * CopyButton — click copies, the icon turns into a check, the label says so,
+ * and both come back. The one thing that needs a script is the clipboard
+ * (navigator.clipboard.writeText): the button carries the value or a
+ * selector for the element whose text to copy, and the script writes one
+ * attribute, data-state, and one line of status text. The icon is
+ * AnimatedIcons reading that attribute;
+ * the label faces are CSS. A refused clipboard (permission, insecure
+ * context) is said out loud — "Copy failed" — not swallowed. The done and
+ * error faces hold for the ambient duration token, then return to idle.
+ * Two nodes, not one: the button, named by its visible face only, and right
+ * after it a visually hidden role="status" span the script writes the done
+ * or error label into — the announcement, which a face that only changes
+ * opacity never was.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import AnimatedIcons from './AnimatedIcons.astro';
+
+interface Props extends HTMLAttributes<'button'> {
+  /** Text to copy. */
+  value?: string;
+  /** Or: selector of the element whose textContent to copy. */
+  target?: string;
+  label?: string;
+  doneLabel?: string;
+  errorLabel?: string;
+  /** Icon only; the label stays as the accessible name. */
+  compact?: boolean;
+}
+
+const { value, target, label = 'Copy', doneLabel = 'Copied', errorLabel = 'Copy failed', compact = false, class: className, ...rest } = Astro.props;
+// unique per render: two CopyButtons on a page (CodeTabs renders one per panel) each announce into their own node
+const statusId = `ma-copy-status-${Math.random().toString(36).slice(2, 7)}`;
+---
+
+<button
+  class:list={['ma-copy', compact && 'ma-copy--compact', className]}
+  type="button"
+  data-ma-copy={statusId}
+  data-value={value}
+  data-target={target}
+  data-state="idle"
+  aria-label={compact ? label : undefined}
+  {...rest}
+>
+  <AnimatedIcons icon="copy" />
+  <span class="ma-copy__label" aria-hidden={compact ? 'true' : undefined}>
+    <span class="ma-copy__face" data-face="idle">{label}</span>
+    <span class="ma-copy__face" data-face="done">{doneLabel}</span>
+    <span class="ma-copy__face" data-face="error">{errorLabel}</span>
+  </span>
+</button>
+<span class="ma-sr" role="status" id={statusId}></span>
+
+<style is:global>
+  @layer components {
+    :where(.ma-copy) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5em;
+      padding: 0.45em 0.8em;
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.5em;
+      background: var(--ma-panel);
+      color: var(--ma-ink);
+      font: inherit;
+      font-size: 0.875em;
+      line-height: 1.2;
+      white-space: nowrap;
+      cursor: copy;
+      transition:
+        border-color var(--ma-duration-fast) var(--ma-ease-out),
+        color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-copy:hover) {
+      border-color: color-mix(in srgb, var(--ma-ink) 40%, transparent);
+    }
+    :where(.ma-copy:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-copy--compact) {
+      padding: 0.45em;
+    }
+    :where(.ma-copy--compact .ma-copy__label) {
+      display: none;
+    }
+    :where(.ma-copy__label) {
+      display: inline-grid;
+    }
+    /* inactive faces leave the accessibility tree, so the button is named by the one that shows. visibility transitions
+       with the fade: a face that arrives is visible at once, one that leaves stays until it has faded. It runs on
+       ease-out, not the preset curve — an overshooting spring would flip it hidden and back mid-fade. Hidden faces keep
+       their grid cell, so the width stays. */
+    :where(.ma-copy__face) {
+      grid-area: 1 / 1;
+      opacity: 0;
+      visibility: hidden;
+      translate: 0 var(--ma-travel-hover);
+      transition:
+        opacity var(--ma-duration) var(--ma-ease),
+        translate var(--ma-duration) var(--ma-ease),
+        visibility var(--ma-duration) var(--ma-ease-out);
+    }
+    :where(.ma-copy[data-state='idle'] [data-face='idle']),
+    :where(.ma-copy[data-state='done'] [data-face='done']),
+    :where(.ma-copy[data-state='error'] [data-face='error']) {
+      opacity: 1;
+      visibility: visible;
+      translate: 0 0;
+    }
+    /* the state tints are hooks: on a coloured ground a caller points --ma-copy-done / --ma-copy-error at a colour that
+       keeps 4.5 : 1 there (the words carry the state either way) */
+    :where(.ma-copy[data-state='done']) {
+      color: var(--ma-copy-done, color-mix(in srgb, var(--ma-ink) 55%, #3a9a5b));
+    }
+    :where(.ma-copy[data-state='error']) {
+      color: var(--ma-copy-error, color-mix(in srgb, var(--ma-ink) 50%, #d64a2e));
+    }
+    /* JavaScript off: nothing can reach the clipboard, so the button would do nothing. The text it copies is still on the
+       page to select */
+    @media (scripting: none) {
+      :where(.ma-copy) {
+        display: none;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-copy__face) {
+        transition: none;
+        translate: 0 0;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount } from '../lib/runtime';
+
+  onMount<HTMLButtonElement>('[data-ma-copy]', (btn, { signal }) => {
+    let timer: number | undefined;
+    // data-ma-copy holds the id of this instance's status node, the sibling rendered after the button
+    const status = document.getElementById(btn.dataset.maCopy!);
+    // the hold time is the ambient duration token, read from the element so a preset or an override applies
+    const hold = () => {
+      const v = getComputedStyle(btn).getPropertyValue('--ma-dur-ambient').trim();
+      const n = parseFloat(v);
+      return n ? (v.endsWith('ms') ? n : n * 1000) : 1400;
+    };
+    const say = (text: string) => {
+      if (!status) return;
+      if (text && status.textContent === text) {
+        // the same text again is no change to assistive tech: empty the node, let a frame render it empty, then write
+        status.textContent = '';
+        requestAnimationFrame(() => requestAnimationFrame(() => (status.textContent = text)));
+      } else status.textContent = text;
+    };
+    // back to idle, and the status empties: a later copy is a change again, and no stale "Copied" is left to browse to
+    const idle = () => {
+      btn.dataset.state = 'idle';
+      say('');
+    };
+    const settle = (state: 'done' | 'error') => {
+      btn.dataset.state = state;
+      say(btn.querySelector(`[data-face='${state}']`)!.textContent!);
+      clearTimeout(timer);
+      timer = window.setTimeout(idle, hold());
+    };
+    btn.addEventListener(
+      'click',
+      async () => {
+        const text = btn.dataset.value ?? (btn.dataset.target ? document.querySelector(btn.dataset.target)?.textContent : '') ?? '';
+        try {
+          await navigator.clipboard.writeText(text);
+          settle('done');
+        } catch {
+          settle('error');
+        }
+      },
+      { signal },
+    );
+    // torn down before a swap: a button that survives it (transition:persist) goes back to idle rather than keeping the
+    // "Copied" whose reset timer this just cleared
+    signal.addEventListener('abort', () => {
+      clearTimeout(timer);
+      idle();
+    });
+  });
+</script>

package/src/components/CopyButton.meta.ts

@@ -0,0 +1,41 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'CopyButton',
+  slug: 'copy-button',
+  title: 'Copy Button',
+  description: 'A button that copies text to the clipboard: the icon turns into a check, the label says "Copied", and both come back after the ambient duration. The clipboard write is the only script; it sets one attribute, data-state, and writes the outcome into a visually hidden status node rendered after the button, so a screen reader hears it; the icon (AnimatedIcons) and the label faces are CSS. When the clipboard refuses, the button says and announces "Copy failed".',
+  summary: 'A copy-to-clipboard button whose icon turns into a check and whose label says Copied, read out to screen readers.',
+  category: 'ui',
+  tier: 'B',
+  trigger: ['click'],
+  support: { baseline: 'widely', needs: ['clipboard'], fallback: 'the error face, because the clipboard API needs a secure context' },
+  readout: '<CopyButton value="npx astro add moonarc">',
+  usage: `<CopyButton value="npx astro add moonarc" />\n<pre id="snippet">pnpm add @moonarc/core</pre>\n<CopyButton target="#snippet" compact />`,
+  props: [
+    { name: 'value', type: 'string', description: 'Text to copy.' },
+    { name: 'target', type: 'string', description: 'Or a selector; the element\'s textContent is copied.' },
+    { name: 'label', type: 'string', default: "'Copy'", description: 'Idle label; the accessible name in compact mode.' },
+    { name: 'doneLabel', type: 'string', default: "'Copied'", description: 'Shown after a successful write.' },
+    { name: 'errorLabel', type: 'string', default: "'Copy failed'", description: 'Shown when the clipboard refuses.' },
+    { name: 'compact', type: 'boolean', default: 'false', description: 'Icon only; the label stays as aria-label, and the status node still announces done and failed.' },
+    { name: '--ma-copy-done', type: 'CSS colour (custom property)', default: '55 % ink, 45 % green (srgb)', description: 'The button\'s colour (label, icon, focus ring) while it says it copied. Set it in a rule or style on the button or any ancestor that knows its ground. Use a colour that keeps 4.5 : 1 against it, for example the ground\'s own text colour on a coloured panel, where the green mix falls short. The words say the state either way.' },
+    { name: '--ma-copy-error', type: 'CSS colour (custom property)', default: '50 % ink, 50 % red (srgb)', description: 'The same for the failed state.' },
+  ],
+  reducedMotion: 'The faces switch at once and the check is drawn without its stroke animation.',
+  clientRouter: 'Bound through the shared runtime: the listener is attached after every navigation and aborted before the swap. The abort clears a pending reset and puts the button back to idle, so one kept across the swap by transition:persist does not stay on "Copied".',
+  craft: [
+    'The hold time is the ambient duration token, read from the element at click time. It is long enough to be read and short enough that a second copy is not blocked by the first.',
+    'The icon needs no script of its own: AnimatedIcons reads data-state="done" on the button.',
+    'Failure is a visible state: a page served over http, or a browser that asks, gets "Copy failed" and the text stays selectable.',
+    'With JavaScript off the button is display: none (@media (scripting: none)): it could only be a button that does nothing, and the text it would copy is still on the page to select. Engines without the scripting media feature keep showing it.',
+    'Faces stack in one grid cell and cross-fade with a 4 px rise, so the button never changes width when the label does.',
+    'The button is named by the face that shows: inactive faces are visibility: hidden, which takes them out of the accessibility tree but not out of their grid cell. visibility transitions with the fade on ease-out, so an arriving face counts at once and a leaving one until it has faded; an overshooting preset curve would flip it mid-fade.',
+    'The outcome is announced by a role="status" span (.ma-sr) rendered after the button, not aria-live on the button: a live button whose faces only change opacity announces nothing. The script writes the done or error label into it, empties it when the button returns to idle, and empties it for a frame before writing the same label again, so a second copy is heard too.',
+    'The component renders two nodes: the button, then its status span. class and every other attribute go to the button. The span is absolutely positioned and clipped, so flex and grid gaps do not see it, but child selectors do. The button is no longer :last-child (a Tailwind space-x-* parent gives it a trailing margin), and a + sibling rule after the button meets the span first. Wrap the component in an element of its own to place it, as CodeTabs does.',
+  ],
+  related: ['animated-icons', 'code-tabs', 'stateful-button'],
+  intents: ['copy to clipboard button', 'copy button with check icon', 'copy code button', 'clipboard button astro', 'copied feedback'],
+  replaces: ['CopyButton (Magic UI)', 'CopyButton (Cult UI)', 'copy button (shadcn examples)'],
+  fixture: { props: { value: 'x', label: 'Fixture content for CopyButton' }, expect: 'Fixture content for CopyButton' },
+} satisfies ComponentMeta;

package/src/components/CountUp.astro

@@ -0,0 +1,134 @@
+---
+/**
+ * CountUp — a number counts from zero to its value when it scrolls into view.
+ * Zero script of its own: it composes Reveal for the trigger, and the digits
+ * are CSS counters driven by a registered custom property transitioning
+ * from 0 to the target. Thousands are separate counters so the separator is
+ * real text; the server HTML already holds the final number.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+import Reveal from './Reveal.astro';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** Target value. */
+  to: number;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Duration in ms. */
+  duration?: number;
+  /** Decimal places, 0–4. */
+  decimals?: number;
+  /** Thousands separator. */
+  separator?: string;
+  /** Decimal mark. */
+  decimal?: string;
+  /** Text before the number. */
+  prefix?: string;
+  /** Text after the number. */
+  suffix?: string;
+  /** Delay in ms before counting starts. */
+  delay?: number;
+}
+
+const { to, as = 'span', duration = 1400, decimals = 0, separator = ',', decimal = '.', prefix = '', suffix = '', delay, class: className, style, ...rest } = Astro.props;
+
+const places = Math.max(0, Math.min(decimals, 4));
+const negative = to < 0;
+const fixed = Math.abs(to).toFixed(places);
+const [intPart, fracPart] = fixed.split('.');
+const groups: number[] = [];
+for (let i = intPart!.length; i > 0; i -= 3) groups.unshift(Number(intPart!.slice(Math.max(0, i - 3), i)));
+const label = `${prefix}${negative ? '-' : ''}${groups.map((g, i) => (i === 0 ? String(g) : String(g).padStart(3, '0'))).join(separator)}${fracPart ? decimal + fracPart : ''}${suffix}`;
+---
+
+<Reveal
+  as={as}
+  from="none"
+  duration={400}
+  delay={delay}
+  class={['ma-count', className].filter(Boolean).join(' ')}
+  style={[`--ma-count-dur:${duration}ms`, delay ? `--ma-count-delay:${delay}ms` : '', typeof style === 'string' ? style : ''].filter(Boolean).join(';')}
+  {...rest}
+>
+  <span class="ma-count__value" aria-hidden="true">
+    {prefix}{negative && '-'}
+    {groups.map((g, i) => (
+      <>
+        {i > 0 && separator}
+        <i class="ma-count__n" data-pad={i > 0 ? '' : undefined} style={`--ma-count-to:${g}`}></i>
+      </>
+    ))}
+    {fracPart && (
+      <>
+        {decimal}
+        <i class="ma-count__n" data-pad={String(places)} style={`--ma-count-to:${Number(fracPart)}`}></i>
+      </>
+    )}
+    {suffix}
+  </span>
+  <span class="ma-sr">{label}</span>
+</Reveal>
+
+<style is:global>
+  @property --ma-count-n {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @layer components {
+    @counter-style ma-pad2 {
+      system: extends decimal;
+      pad: 2 '0';
+    }
+    @counter-style ma-pad3 {
+      system: extends decimal;
+      pad: 3 '0';
+    }
+    @counter-style ma-pad4 {
+      system: extends decimal;
+      pad: 4 '0';
+    }
+    :where(.ma-count__value) {
+      font-variant-numeric: tabular-nums;
+    }
+    /* the count waits for the delay too: Reveal's delay holds back only the fade, so a number with a delay (StatsRow
+       staggers its stats) had mostly counted before it showed */
+    :where(.ma-count__n) {
+      font-style: inherit;
+      --ma-count-n: var(--ma-count-to);
+      transition: --ma-count-n var(--ma-count-dur, 1400ms) var(--ma-ease-out) var(--ma-count-delay, 0ms);
+    }
+    /* the counter is reset on the pseudo-element that prints it: reset on the <i>, WebKit printed the first group's value
+       in every later group ("2,002" for 2,847, "1.1" for 1.9). --ma-count-n is registered with inherits: false, so the
+       pseudo-element takes it explicitly */
+    :where(.ma-count__n)::before {
+      --ma-count-n: inherit;
+      counter-reset: ma-n var(--ma-count-n);
+      content: counter(ma-n);
+    }
+    :where(.ma-count__n[data-pad=''])::before,
+    :where(.ma-count__n[data-pad='3'])::before {
+      content: counter(ma-n, ma-pad3);
+    }
+    :where(.ma-count__n[data-pad='2'])::before {
+      content: counter(ma-n, ma-pad2);
+    }
+    :where(.ma-count__n[data-pad='4'])::before {
+      content: counter(ma-n, ma-pad4);
+    }
+    :where(.ma-count__n[data-pad='1'])::before {
+      content: counter(ma-n);
+    }
+    /* Under the JS gate the digits start at zero and transition to the value once Reveal marks the wrapper in view. */
+    :where([data-ma-js] .ma-count:not(.ma-in) .ma-count__n) {
+      --ma-count-n: 0;
+      transition: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-count__n) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/CountUp.meta.ts

@@ -0,0 +1,40 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'CountUp',
+  slug: 'count-up',
+  title: 'Count Up',
+  description:
+    'Counts a number up from zero to its value when it scrolls into view, with thousands separators, decimals, prefix and suffix. No script of its own: Reveal supplies the trigger, and the digits are CSS counters driven by a custom property transitioning from 0 to the target. The server HTML already shows the final number.',
+  summary: 'A number that counts up from zero when it scrolls into view, with separators, decimals, a prefix and a suffix.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['scroll'],
+  support: { baseline: 'newly', needs: ['property', 'counter-style'], fallback: 'the final number, shown at once' },
+  readout: '<CountUp to={2847}>',
+  usage: `<CountUp to={2847} />\n<CountUp to={99.5} decimals={1} suffix="%" duration={1800} />\n<CountUp to={1200000} prefix="$" as="strong" />`,
+  props: [
+    { name: 'to', type: 'number', description: 'Target value. Negative numbers keep their sign.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'duration', type: 'number', default: '1400', description: 'Duration in ms. Ease-out, so most of the change happens early.' },
+    { name: 'decimals', type: 'number', default: '0', description: 'Decimal places, 0–4.' },
+    { name: 'separator', type: 'string', default: "','", description: 'Thousands separator.' },
+    { name: 'decimal', type: 'string', default: "'.'", description: 'Decimal mark.' },
+    { name: 'prefix', type: 'string', description: 'Text before the number, e.g. $.' },
+    { name: 'suffix', type: 'string', description: 'Text after the number, e.g. %.' },
+    { name: 'delay', type: 'number', default: '0', description: 'Delay in ms before the number fades in and starts counting.' },
+  ],
+  reducedMotion: 'The final number appears without counting.',
+  clientRouter: 'Inherits Reveal: rebinds after every navigation, so the count replays on a fresh page.',
+  craft: [
+    'Each thousands group is its own counter, and every group runs on the same duration and ease-out curve, so the whole number follows that curve.',
+    'Groups after the first are padded to three digits with @counter-style, so 1,005 never renders as 1,5.',
+    'Ease-out: a count that lands slowly reads as arriving; one that lands fast reads as a glitch.',
+    'A visually hidden span (.ma-sr) carries the final formatted value; the animated counters are aria-hidden.',
+    'Tabular figures so the number does not jitter sideways while counting.',
+  ],
+  related: ['reveal', 'progress'],
+  intents: ['count up', 'animated number', 'number counter on scroll', 'statistics counter', 'countup astro'],
+  replaces: ['CountUp (React Bits)', 'NumberTicker (Magic UI)', 'react-countup'],
+  fixture: { props: { to: 2847 }, expect: 'ma-sr">2,847</span>' },
+} satisfies ComponentMeta;

package/src/components/CountdownFlip.astro

@@ -0,0 +1,244 @@
+---
+/**
+ * CountdownFlip — a flip clock counting down to a date. The one thing CSS
+ * cannot do is know the time, so one timer a second, set to the next whole
+ * second, writes the numbers and nothing else; the flip is CSS — the old top
+ * half folds down over the hinge, the new bottom half unfolds beneath it.
+ * The timer stops while the tab is hidden. The server renders the time left
+ * at build as the no-JS fallback, or the done state when the target has
+ * already passed.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+type Unit = 'days' | 'hours' | 'minutes' | 'seconds';
+/** A label, or a [one, other] pair: the card shows `other`; the spoken name says `one` when the number is exactly 1. */
+type Label = string | readonly [one: string, other: string];
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Target: an ISO date string or a timestamp in ms. */
+  to: string | number;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Units to show, in order. */
+  units?: Unit[];
+  /** Labels under the cards; default the unit names. A [one, other] pair gives the spoken name its singular ("1 day"). */
+  labels?: Partial<Record<Unit, Label>>;
+  /** Text shown once the countdown reaches zero, and the timer's accessible name from then on. */
+  done?: string;
+}
+
+const { to, as: Tag = 'div', units = ['days', 'hours', 'minutes', 'seconds'], labels = {}, done, class: className, ...rest } = Astro.props;
+const target = typeof to === 'number' ? to : Date.parse(to);
+const left = Math.max(0, Math.floor((target - Date.now()) / 1000));
+// the target passed before the build: the page ships finished, script or not
+const over = left === 0;
+const value: Record<Unit, number> = { days: Math.floor(left / 86400), hours: Math.floor(left / 3600) % 24, minutes: Math.floor(left / 60) % 60, seconds: left % 60 };
+const text = (u: Unit) => (u === 'days' && value[u] > 99 ? String(value[u]) : String(value[u]).padStart(2, '0'));
+const forms = (u: Unit): readonly [string, string] => {
+  const l = labels[u];
+  return typeof l === 'string' ? [l, l] : (l ?? [u.slice(0, -1), u]);
+};
+const spoken = over && done ? done : units.map((u) => `${value[u]} ${forms(u)[value[u] === 1 ? 0 : 1]}`).join(', ');
+---
+
+<Tag class:list={['ma-cd', className]} data-ma-cd data-to={new Date(target).toISOString()} data-done={over ? '' : undefined} role="timer" aria-label={spoken} {...rest}>
+  {units.map((u) => {
+    const [one, other] = forms(u);
+    return (
+      <span class="ma-cd__unit">
+        <span class="ma-cd__card" data-unit={u} data-one={one === other ? undefined : one} aria-hidden="true">
+          <b class="ma-cd__top">{text(u)}</b>
+          <b class="ma-cd__bot">{text(u)}</b>
+          <b class="ma-cd__flap-a">{text(u)}</b>
+          <b class="ma-cd__flap-b">{text(u)}</b>
+        </span>
+        <span class="ma-cd__label" aria-hidden="true">{other}</span>
+      </span>
+    );
+  })}
+  {done && <span class="ma-cd__done" hidden={!over} aria-hidden="true">{done}</span>}
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-cd) {
+      display: inline-flex;
+      gap: 0.5em;
+      font-variant-numeric: tabular-nums;
+    }
+    :where(.ma-cd__unit) {
+      display: grid;
+      gap: 0.35em;
+      justify-items: center;
+    }
+    :where(.ma-cd__card) {
+      position: relative;
+      display: grid;
+      /* two digits fit 1.75em; a third (more than 99 days) widens the card through the padded digits instead of clipping */
+      min-width: 1.75em;
+      height: 1.5em;
+      line-height: 1.5em;
+      font-weight: 600;
+      text-align: center;
+      perspective: 8em;
+    }
+    :where(.ma-cd__card)::after {
+      content: '';
+      position: absolute;
+      inset: 50% 0 auto 0;
+      height: 1px;
+      background: var(--ma-glow);
+    }
+    :where(.ma-cd__top),
+    :where(.ma-cd__bot),
+    :where(.ma-cd__flap-a),
+    :where(.ma-cd__flap-b) {
+      grid-area: 1 / 1;
+      padding-inline: 0.2em;
+      font-weight: inherit;
+      border-radius: 0.15em;
+      background: var(--ma-edge);
+    }
+    :where(.ma-cd__top),
+    :where(.ma-cd__flap-a) {
+      clip-path: inset(0 0 50% 0);
+    }
+    :where(.ma-cd__bot),
+    :where(.ma-cd__flap-b) {
+      clip-path: inset(50% 0 0 0);
+    }
+    /* the flaps exist for a flip only: at rest each half shows one layer, so a translucent card (--ma-edge is a tint by
+       default) is one tint deep in both halves and no digit shows through another */
+    :where(.ma-cd__flap-a),
+    :where(.ma-cd__flap-b) {
+      transform-origin: 50% 50%;
+      backface-visibility: hidden;
+      visibility: hidden;
+    }
+    /* set by the script every second: the old top folds down, then the new bottom unfolds. The layers are tints, not
+       opaque cards, so a flap covers nothing: the new top waits under the falling flap until it is edge-on, and the old
+       bottom goes when the new one starts to unfold and stays gone (the flap is the bottom half from then on) */
+    :where(.ma-cd__card[data-flip] .ma-cd__flap-a) {
+      visibility: visible;
+      animation: ma-cd-fold calc(var(--ma-duration) / 2) var(--ma-ease-in) both;
+    }
+    :where(.ma-cd__card[data-flip] .ma-cd__flap-b) {
+      visibility: visible;
+      animation: ma-cd-unfold calc(var(--ma-duration) / 2) var(--ma-ease-out) calc(var(--ma-duration) / 2) both;
+    }
+    :where(.ma-cd__card[data-flip] .ma-cd__top) {
+      animation: ma-cd-hide calc(var(--ma-duration) / 2);
+    }
+    :where(.ma-cd__card[data-flip] .ma-cd__bot) {
+      animation: ma-cd-hide calc(var(--ma-duration) / 2) calc(var(--ma-duration) / 2) forwards;
+    }
+    :where(.ma-cd__label) {
+      font-size: 0.5em;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      opacity: var(--ma-dim, 0.7);
+    }
+    /* finished: the cards step back to secondary text, no further (the labels already sit at --ma-dim) */
+    :where(.ma-cd[data-done] .ma-cd__card) {
+      opacity: var(--ma-dim, 0.7);
+    }
+    :where(.ma-cd__done) {
+      align-self: center;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-cd__card[data-flip] .ma-cd__flap-a),
+      :where(.ma-cd__card[data-flip] .ma-cd__flap-b),
+      :where(.ma-cd__card[data-flip] .ma-cd__top),
+      :where(.ma-cd__card[data-flip] .ma-cd__bot) {
+        animation: none;
+      }
+    }
+  }
+
+  /* a constant: hidden for as long as it runs (visibility between hidden and visible would step to visible at once) */
+  @keyframes ma-cd-hide {
+    from,
+    to {
+      visibility: hidden;
+    }
+  }
+  @keyframes ma-cd-fold {
+    from {
+      transform: rotateX(0);
+    }
+    to {
+      transform: rotateX(-90deg);
+    }
+  }
+  @keyframes ma-cd-unfold {
+    from {
+      transform: rotateX(90deg);
+    }
+    to {
+      transform: rotateX(0);
+    }
+  }
+</style>
+
+<script>
+  import { onMount, prefersReducedMotion } from '../lib/runtime';
+
+  type Unit = 'days' | 'hours' | 'minutes' | 'seconds';
+
+  onMount<HTMLElement>('[data-ma-cd]', (el, { signal }) => {
+    const target = Date.parse(el.dataset.to ?? '');
+    const cards = Array.from(el.querySelectorAll<HTMLElement>('.ma-cd__card'));
+    const done = el.querySelector<HTMLElement>('.ma-cd__done');
+    let timer: number | undefined;
+
+    const tick = () => {
+      const left = Math.max(0, Math.floor((target - Date.now()) / 1000));
+      const value: Record<Unit, number> = { days: Math.floor(left / 86400), hours: Math.floor(left / 3600) % 24, minutes: Math.floor(left / 60) % 60, seconds: left % 60 };
+      const reduce = prefersReducedMotion();
+      const spoken: string[] = [];
+      for (const card of cards) {
+        const unit = card.dataset.unit as Unit;
+        const n = value[unit];
+        const text = unit === 'days' && n > 99 ? String(n) : String(n).padStart(2, '0');
+        const [top, bot, a, b] = Array.from(card.children) as HTMLElement[];
+        // the label under the card is the `other` form; the `one` form rides on the card when it differs
+        spoken.push(`${n} ${(n === 1 && card.dataset.one) || (card.nextElementSibling?.textContent ?? unit)}`);
+        if (top!.textContent === text) continue;
+        if (reduce) {
+          top!.textContent = bot!.textContent = a!.textContent = b!.textContent = text;
+          continue;
+        }
+        // the old value stays on the bottom half and the falling flap; the new one is under the flap and on the rising half
+        bot!.textContent = a!.textContent = top!.textContent;
+        top!.textContent = b!.textContent = text;
+        card.removeAttribute('data-flip');
+        void card.offsetWidth; // restart the flap animations
+        card.setAttribute('data-flip', '');
+      }
+      const over = left <= 0;
+      el.setAttribute('aria-label', over && done ? done.textContent! : spoken.join(', '));
+      if (over) {
+        stop();
+        el.dataset.done = '';
+        if (done) done.hidden = false;
+      }
+    };
+    const stop = () => {
+      clearTimeout(timer);
+      timer = undefined;
+    };
+    // each tick is timed to the next whole second left, plus a margin for a timer that fires early. A flat 1000 ms
+    // interval kept the phase of the moment it started: the card turned up to a second late, and when that phase sat on
+    // a boundary, timer jitter skipped a second or showed one twice. An invalid target waits a second, never 0 ms. Armed
+    // before the tick, so the tick that reaches zero clears it through stop()
+    const start = () => {
+      stop();
+      timer = window.setTimeout(start, ((target - Date.now()) % 1000 || 1000) + 20);
+      tick();
+    };
+    // no ticking in a hidden tab; catch up when it is shown again
+    document.addEventListener('visibilitychange', () => (document.hidden ? stop() : start()), { signal });
+    signal.addEventListener('abort', stop);
+    start();
+  });
+</script>