ferst-core 0.7.7 → 0.7.9

package/components/recipes/Stats.astro

@@ -1,152 +1,155 @@
----
-/** Stats — a Level-2 recipe: a band of headline numbers over an optional
- *  heading/intro. Composes the Heading primitive; numbers use the brand accent.
- *
- *  Self-composing: the grid never reserves more columns than there are stats, so
- *  a single item centres as a feature instead of stranding an empty half-band
- *  (the "£10 pinned to one side" bug); each stat is a token-driven tile (radius/
- *  surface/stroke/shadow knobs, like every Card), so it reads as a designed unit
- *  at any count and in either theme. Labels are width-capped so a long caption
- *  wraps to a tidy block rather than a full-width line. */
-import Heading from '../blocks/Heading.astro';
-
-interface Item { value: string; label: string; description?: string }
-interface Props {
-  title?: string;
-  intro?: string;
-  background?: 'none' | 'muted' | 'accent';
-  columns?: 2 | 3 | 4;
-  items?: Item[];
-}
-const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.props;
-// Cap the column count at the item count — one stat should never sit in a
-// two-column grid (half empty). Falls back to 1 for an empty list.
-const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
----
-
-<section class="b-stats" data-bg={background}>
-  <div class="b-stats__inner">
-    {(title || intro) && (
-      <div class="b-stats__head">
-        {title && <Heading text={title} level={2} align="center" />}
-        {intro && <p class="b-stats__intro">{intro}</p>}
-      </div>
-    )}
-    <div class="b-stats__grid" data-cols={cols}>
-      {items.map((item) => (
-        <div class="b-stats__item ferst-tile">
-          <span class="b-stats__value">{item.value}</span>
-          {item.label && <span class="b-stats__label">{item.label}</span>}
-          {item.description && <span class="b-stats__desc">{item.description}</span>}
-        </div>
-      ))}
-    </div>
-  </div>
-</section>
-
-<style>
-  .b-stats { padding-block: clamp(2.5rem, 6vw, 4rem); }
-  .b-stats[data-bg='muted'] { background: var(--bg-section); }
-  .b-stats[data-bg='accent'] { background: var(--gold-light); }
-  .b-stats__inner {
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  }
-  .b-stats__head {
-    max-width: var(--max);
-    margin-inline: auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-stats__intro { margin: 0; color: var(--muted); line-height: 1.6; }
-  .b-stats__grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.25rem;
-    width: 100%;
-    margin-inline: auto;
-  }
-  @media (min-width: 40em) {
-    .b-stats__grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  }
-  @media (min-width: 60em) {
-    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-  }
-  /* A lone stat is a centred feature, not a full-width slab. */
-  .b-stats__grid[data-cols='1'] { max-width: 30rem; }
-  /* Token-driven tile: the same radius / surface / stroke / shadow knobs as every
-     Card, so it stays consistent and theme-correct. On the muted band the tile's
-     --bg-surface sits a step above --bg-section, giving depth in both themes. */
-  .b-stats__item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 0.5rem;
-    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
-    /* surface (bg/border/radius/shadow) comes from .ferst-tile */
-  }
-  .b-stats__value {
-    font-family: var(--font-heading);
-    font-weight: 700;
-    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
-    line-height: 1;
-    color: var(--gold);
-  }
-  .b-stats__label { font-weight: 600; color: var(--fg); line-height: 1.4; max-width: 30ch; }
-  .b-stats__desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; max-width: 32ch; }
-  /* One key figure: centred, not stranded at the start of a wide row. */
-  .b-stats__grid[data-cols='1'] {
-    max-width: 28rem;
-    margin-inline: auto;
-    text-align: center;
-    justify-items: center;
-  }
-</style>
-
-<script>
-  // Count-up: numbers tick from 0 to their value when they scroll into view.
-  // Progressive — the final value is server-rendered, so with no JS (or under
-  // reduced-motion) it just shows the number. Non-numeric values (One, Any…) are
-  // left untouched; a leading sign / trailing suffix (+, %, " day") is preserved.
-  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  const values = document.querySelectorAll<HTMLElement>('.b-stats__value');
-  if (!reduce && 'IntersectionObserver' in window && values.length) {
-    const parse = (t: string) => {
-      const m = t.match(/^(\D*)(\d[\d,]*(?:\.\d+)?)(.*)$/);
-      if (!m) return null;
-      const decimals = (m[2].split('.')[1] || '').length;
-      return { pre: m[1], num: parseFloat(m[2].replace(/,/g, '')), suf: m[3], decimals };
-    };
-    const fmt = (n: number, d: number) => (d > 0 ? n.toFixed(d) : Math.round(n).toLocaleString());
-    const run = (el: HTMLElement) => {
-      const final = (el.textContent || '').trim();
-      const p = parse(final);
-      if (!p) return;
-      const dur = 1100;
-      const t0 = performance.now();
-      const tick = (now: number) => {
-        const t = Math.min(1, (now - t0) / dur);
-        const eased = 1 - Math.pow(1 - t, 3);
-        el.textContent = p.pre + fmt(p.num * eased, p.decimals) + p.suf;
-        if (t < 1) requestAnimationFrame(tick);
-        else el.textContent = final;
-      };
-      requestAnimationFrame(tick);
-    };
-    const io = new IntersectionObserver(
-      (entries) => entries.forEach((e) => { if (e.isIntersecting) { run(e.target as HTMLElement); io.unobserve(e.target); } }),
-      { threshold: 0.4 }
-    );
-    values.forEach((v) => io.observe(v));
-  }
-</script>
+---
+/** Stats — a Level-2 recipe: a band of headline numbers over an optional
+ *  heading/intro. Composes the Heading primitive; numbers use the brand accent.
+ *
+ *  Self-composing: the grid never reserves more columns than there are stats, so
+ *  a single item centres as a feature instead of stranding an empty half-band
+ *  (the "£10 pinned to one side" bug); each stat is a token-driven tile (radius/
+ *  surface/stroke/shadow knobs, like every Card), so it reads as a designed unit
+ *  at any count and in either theme. Labels are width-capped so a long caption
+ *  wraps to a tidy block rather than a full-width line. */
+import Heading from '../blocks/Heading.astro';
+
+interface Item { value: string; label: string; description?: string }
+interface Props {
+  title?: string;
+  intro?: string;
+  background?: 'none' | 'muted' | 'accent';
+  columns?: 2 | 3 | 4;
+  items?: Item[];
+}
+const { title, intro, background = 'muted', columns = 3, items = [] } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
+// Cap the column count at the item count — one stat should never sit in a
+// two-column grid (half empty). Falls back to 1 for an empty list.
+const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2 | 3 | 4;
+---
+
+<section class="b-stats" data-bg={background}>
+  <div class="b-stats__inner">
+    {(title || intro) && (
+      <div class="b-stats__head" data-recipe-head data-content-align={headAlign}>
+        {title && <Heading text={title} level={2} />}
+        {intro && <p class="b-stats__intro">{intro}</p>}
+      </div>
+    )}
+    <div class="b-stats__grid" data-cols={cols}>
+      {items.map((item) => (
+        <div class="b-stats__item ferst-tile">
+          <span class="b-stats__value">{item.value}</span>
+          {item.label && <span class="b-stats__label">{item.label}</span>}
+          {item.description && <span class="b-stats__desc">{item.description}</span>}
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .b-stats { padding-block: clamp(2.5rem, 6vw, 4rem); }
+  .b-stats[data-bg='muted'] { background: var(--bg-section); }
+  .b-stats[data-bg='accent'] { background: var(--gold-light); }
+  .b-stats__inner {
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .b-stats__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-stats__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-stats__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
+    width: 100%;
+    margin-inline: auto;
+  }
+  @media (min-width: 40em) {
+    .b-stats__grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @media (min-width: 60em) {
+    .b-stats__grid[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .b-stats__grid[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  }
+  /* A lone stat is a centred feature, not a full-width slab. */
+  .b-stats__grid[data-cols='1'] { max-width: 30rem; }
+  /* Token-driven tile: the same radius / surface / stroke / shadow knobs as every
+     Card, so it stays consistent and theme-correct. On the muted band the tile's
+     --bg-surface sits a step above --bg-section, giving depth in both themes. */
+  .b-stats__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.5rem;
+    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
+    /* surface (bg/border/radius/shadow) comes from .ferst-tile */
+  }
+  .b-stats__value {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
+    line-height: 1;
+    color: var(--gold);
+  }
+  .b-stats__label { font-weight: 600; color: var(--fg); line-height: 1.4; max-width: 30ch; }
+  .b-stats__desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; max-width: 32ch; }
+  /* One key figure: centred, not stranded at the start of a wide row. */
+  .b-stats__grid[data-cols='1'] {
+    max-width: 28rem;
+    margin-inline: auto;
+    text-align: center;
+    justify-items: center;
+  }
+</style>
+
+<script>
+  // Count-up: numbers tick from 0 to their value when they scroll into view.
+  // Progressive — the final value is server-rendered, so with no JS (or under
+  // reduced-motion) it just shows the number. Non-numeric values (One, Any…) are
+  // left untouched; a leading sign / trailing suffix (+, %, " day") is preserved.
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const values = document.querySelectorAll<HTMLElement>('.b-stats__value');
+  if (!reduce && 'IntersectionObserver' in window && values.length) {
+    const parse = (t: string) => {
+      const m = t.match(/^(\D*)(\d[\d,]*(?:\.\d+)?)(.*)$/);
+      if (!m) return null;
+      const decimals = (m[2].split('.')[1] || '').length;
+      return { pre: m[1], num: parseFloat(m[2].replace(/,/g, '')), suf: m[3], decimals };
+    };
+    const fmt = (n: number, d: number) => (d > 0 ? n.toFixed(d) : Math.round(n).toLocaleString());
+    const run = (el: HTMLElement) => {
+      const final = (el.textContent || '').trim();
+      const p = parse(final);
+      if (!p) return;
+      const dur = 1100;
+      const t0 = performance.now();
+      const tick = (now: number) => {
+        const t = Math.min(1, (now - t0) / dur);
+        const eased = 1 - Math.pow(1 - t, 3);
+        el.textContent = p.pre + fmt(p.num * eased, p.decimals) + p.suf;
+        if (t < 1) requestAnimationFrame(tick);
+        else el.textContent = final;
+      };
+      requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(
+      (entries) => entries.forEach((e) => { if (e.isIntersecting) { run(e.target as HTMLElement); io.unobserve(e.target); } }),
+      { threshold: 0.4 }
+    );
+    values.forEach((v) => io.observe(v));
+  }
+</script>

package/components/recipes/Steps.astro

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