ferst-core 0.7.6 → 0.7.8

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>

package/components/recipes/Table.astro

@@ -9,7 +9,7 @@ import Heading from '../blocks/Heading.astro';
 
 import { inlineMarkdown } from '../../lib/inline-markdown';
 import { filledColumns } from '../../lib/table';
-import { proseParts } from '../../lib/prose';
+import ProseParts from '../ProseParts.astro';
 interface Props {
   title?: string;
   intro?: string;
@@ -25,7 +25,7 @@ const keep = filledColumns(columns, rows);
   {(title || intro) && (
     <div class="b-table__head">
       {title && <Heading text={title} level={2} />}
-      {intro && proseParts(intro).map((part) => part.kind === 'p' ? <p class="b-table__intro" set:html={part.html} /> : <ul class="b-table__intro">{part.items.map((x) => <li set:html={x} />)}</ul>)}
+      {intro && <ProseParts text={intro} class="b-table__intro" />}
     </div>
   )}
   <div class="b-table__scroll">
@@ -58,7 +58,7 @@ const keep = filledColumns(columns, rows);
     flex-direction: column;
     gap: 0.6rem;
   }
-  .b-table__intro {
+  :global(.b-table__intro) {
     margin: 0;
     color: var(--muted);
     max-width: var(--max);

package/components/recipes/Tabs.astro

@@ -1,134 +1,138 @@
----
-/** Tabs — a Level-2 recipe: labelled panels, one open at a time. Progressive:
- *  the first panel is visible with no JavaScript; a small script adds selection,
- *  ARIA state and arrow-key navigation. Composes the Heading primitive. */
-import Heading from '../blocks/Heading.astro';
-
-import { inlineMarkdown } from '../../lib/inline-markdown';
-interface Item { label: string; heading?: string; text?: string; image?: { src: string; alt?: string } }
-interface Props {
-  title?: string;
-  items?: Item[];
-}
-const { title, items = [] } = Astro.props;
-const uid = 'tabs-' + Math.random().toString(36).slice(2, 9);
----
-
-<section class="b-tabs">
-  {title && <Heading text={title} level={2} align="center" />}
-  <div class="b-tabs__inner">
-    <div class="b-tabs__list" role="tablist" aria-label={title ?? 'Tabs'}>
-      {items.map((item, i) => (
-        <button
-          type="button"
-          role="tab"
-          id={`${uid}-tab-${i}`}
-          aria-controls={`${uid}-panel-${i}`}
-          aria-selected={i === 0 ? 'true' : 'false'}
-          tabindex={i === 0 ? 0 : -1}
-          class="b-tabs__tab"
-        >
-          {item.label}
-        </button>
-      ))}
-    </div>
-    {items.map((item, i) => (
-      <div
-        role="tabpanel"
-        id={`${uid}-panel-${i}`}
-        aria-labelledby={`${uid}-tab-${i}`}
-        class="b-tabs__panel"
-        hidden={i !== 0}
-        tabindex="0"
-      >
-        {item.image && (
-          <img class="b-tabs__img" src={item.image.src} alt={item.image.alt ?? ''} loading="lazy" decoding="async" />
-        )}
-        <div class="b-tabs__copy">
-          {item.heading && <h3 class="b-tabs__heading">{item.heading}</h3>}
-          {item.text && <p class="b-tabs__text" set:html={inlineMarkdown(item.text)} />}
-        </div>
-      </div>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-tabs {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    max-width: 60rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-tabs__list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    border-bottom: 1px solid var(--border);
-  }
-  .b-tabs__tab {
-    appearance: none;
-    background: none;
-    border: none;
-    border-bottom: 2px solid transparent;
-    margin-bottom: -1px;
-    padding: 0.7rem 1rem;
-    font-family: var(--font-heading);
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: var(--muted);
-    cursor: pointer;
-    transition: color 0.15s, border-color 0.15s;
-  }
-  .b-tabs__tab:hover { color: var(--fg); }
-  .b-tabs__tab[aria-selected='true'] { color: var(--gold); border-bottom-color: var(--gold); }
-  .b-tabs__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
-  .b-tabs__panel {
-    display: grid;
-    gap: 1.25rem;
-  }
-  /* A class `display` beats the UA `[hidden]{display:none}` (equal specificity,
-     author origin wins), so make the hidden state explicit — for the first paint
-     and every JS toggle. */
-  .b-tabs__panel[hidden] {
-    display: none;
-  }
-  @media (min-width: 48em) {
-    .b-tabs__panel:has(.b-tabs__img) { grid-template-columns: 1fr 1fr; align-items: center; }
-  }
-  .b-tabs__panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }
-  .b-tabs__img { width: 100%; height: auto; border-radius: var(--radius); }
-  .b-tabs__heading { margin: 0 0 0.5rem; color: var(--fg); }
-  .b-tabs__text { margin: 0; color: var(--muted); line-height: 1.65; }
-</style>
-
-<script>
-  // Wire every tabs group on the page: selection, ARIA state, arrow-key nav.
-  document.querySelectorAll<HTMLElement>('.b-tabs').forEach((root) => {
-    const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
-    const panels = Array.from(root.querySelectorAll<HTMLElement>('[role="tabpanel"]'));
-    if (!tabs.length) return;
-
-    function select(index: number, focus = true) {
-      tabs.forEach((tab, i) => {
-        const on = i === index;
-        tab.setAttribute('aria-selected', on ? 'true' : 'false');
-        tab.tabIndex = on ? 0 : -1;
-        panels[i]?.toggleAttribute('hidden', !on);
-      });
-      if (focus) tabs[index]?.focus();
-    }
-
-    tabs.forEach((tab, i) => {
-      tab.addEventListener('click', () => select(i, false));
-      tab.addEventListener('keydown', (e) => {
-        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); select((i + 1) % tabs.length); }
-        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); select((i - 1 + tabs.length) % tabs.length); }
-        else if (e.key === 'Home') { e.preventDefault(); select(0); }
-        else if (e.key === 'End') { e.preventDefault(); select(tabs.length - 1); }
-      });
-    });
-  });
-</script>
+---
+/** Tabs — a Level-2 recipe: labelled panels, one open at a time. Progressive:
+ *  the first panel is visible with no JavaScript; a small script adds selection,
+ *  ARIA state and arrow-key navigation. Composes the Heading primitive. */
+import Heading from '../blocks/Heading.astro';
+
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Item { label: string; heading?: string; text?: string; image?: { src: string; alt?: string } }
+interface Props {
+  title?: string;
+  items?: Item[];
+}
+const { title, 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';
+const uid = 'tabs-' + Math.random().toString(36).slice(2, 9);
+---
+
+<section class="b-tabs">
+  {title && <Heading text={title} level={2} align={headAlign} />}
+  <div class="b-tabs__inner">
+    <div class="b-tabs__list" role="tablist" aria-label={title ?? 'Tabs'}>
+      {items.map((item, i) => (
+        <button
+          type="button"
+          role="tab"
+          id={`${uid}-tab-${i}`}
+          aria-controls={`${uid}-panel-${i}`}
+          aria-selected={i === 0 ? 'true' : 'false'}
+          tabindex={i === 0 ? 0 : -1}
+          class="b-tabs__tab"
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+    {items.map((item, i) => (
+      <div
+        role="tabpanel"
+        id={`${uid}-panel-${i}`}
+        aria-labelledby={`${uid}-tab-${i}`}
+        class="b-tabs__panel"
+        hidden={i !== 0}
+        tabindex="0"
+      >
+        {item.image && (
+          <img class="b-tabs__img" src={item.image.src} alt={item.image.alt ?? ''} loading="lazy" decoding="async" />
+        )}
+        <div class="b-tabs__copy">
+          {item.heading && <h3 class="b-tabs__heading">{item.heading}</h3>}
+          {item.text && <p class="b-tabs__text" set:html={inlineMarkdown(item.text)} />}
+        </div>
+      </div>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-tabs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .b-tabs__tab {
+    appearance: none;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    padding: 0.7rem 1rem;
+    font-family: var(--font-heading);
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--muted);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .b-tabs__tab:hover { color: var(--fg); }
+  .b-tabs__tab[aria-selected='true'] { color: var(--gold); border-bottom-color: var(--gold); }
+  .b-tabs__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
+  .b-tabs__panel {
+    display: grid;
+    gap: 1.25rem;
+  }
+  /* A class `display` beats the UA `[hidden]{display:none}` (equal specificity,
+     author origin wins), so make the hidden state explicit — for the first paint
+     and every JS toggle. */
+  .b-tabs__panel[hidden] {
+    display: none;
+  }
+  @media (min-width: 48em) {
+    .b-tabs__panel:has(.b-tabs__img) { grid-template-columns: 1fr 1fr; align-items: center; }
+  }
+  .b-tabs__panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }
+  .b-tabs__img { width: 100%; height: auto; border-radius: var(--radius); }
+  .b-tabs__heading { margin: 0 0 0.5rem; color: var(--fg); }
+  .b-tabs__text { margin: 0; color: var(--muted); line-height: 1.65; }
+</style>
+
+<script>
+  // Wire every tabs group on the page: selection, ARIA state, arrow-key nav.
+  document.querySelectorAll<HTMLElement>('.b-tabs').forEach((root) => {
+    const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
+    const panels = Array.from(root.querySelectorAll<HTMLElement>('[role="tabpanel"]'));
+    if (!tabs.length) return;
+
+    function select(index: number, focus = true) {
+      tabs.forEach((tab, i) => {
+        const on = i === index;
+        tab.setAttribute('aria-selected', on ? 'true' : 'false');
+        tab.tabIndex = on ? 0 : -1;
+        panels[i]?.toggleAttribute('hidden', !on);
+      });
+      if (focus) tabs[index]?.focus();
+    }
+
+    tabs.forEach((tab, i) => {
+      tab.addEventListener('click', () => select(i, false));
+      tab.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); select((i + 1) % tabs.length); }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); select((i - 1 + tabs.length) % tabs.length); }
+        else if (e.key === 'Home') { e.preventDefault(); select(0); }
+        else if (e.key === 'End') { e.preventDefault(); select(tabs.length - 1); }
+      });
+    });
+  });
+</script>