ferst-core 0.7.0 → 0.7.4

package/components/recipes/ContactCard.astro

@@ -1,170 +1,172 @@
----
-/**
- * ContactCard — a Level-2 recipe: a rich, branded "get in touch" band. A display-
- * type title + subtitle on the left, the contact channels as tappable tiles on the
- * right, and a closing note across the bottom. For a contact or find-us page — the
- * polished alternative to a plain notice box.
- *
- * Fully THEME-ADAPTIVE (composes in light AND dark): the panel is `--bg-section`
- * with a soft `--gold` corner wash for brand presence, text is `--fg`/`--accent`/
- * `--muted`, tiles are `--bg-surface` recesses, icons + hovers use `--gold`. Every
- * one of those tokens flips per theme, so the band re-composes correctly in each
- * mode (never the old always-dark band) and a CMS colour change recolours it.
- * Contrast-safe: brand gold is used only decoratively (wash, rule, icons, hovers),
- * never as body/label text — those use the ink/text tokens that meet AA on the
- * panel in both themes. Whole tile links when `href` is set.
- */
-import Icon from '../Icon.astro';
-import { isIconKey } from '../../lib/icons';
-
-interface Item {
-  icon?: string;
-  value: string;
-  href?: string;
-}
-interface Props {
-  eyebrow?: string;
-  title: string;
-  subtitle?: string;
-  note?: string;
-  items?: Item[];
-}
-const { eyebrow, title, subtitle, note, items = [] } = Astro.props;
-const rel = (href?: string) => (href && /^https?:\/\//.test(href) ? 'noopener' : undefined);
-const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank' : undefined);
----
-
-<section class="b-contact">
-  <div class="b-contact__panel">
-    <div class="b-contact__head">
-      {eyebrow && <p class="b-contact__eyebrow">{eyebrow}</p>}
-      <h2 class="b-contact__title">{title}</h2>
-      {subtitle && <p class="b-contact__subtitle">{subtitle}</p>}
-    </div>
-
-    {items.length > 0 && (
-      <ul class="b-contact__items">
-        {items.map((item) => {
-          const inner = (
-            <>
-              {item.icon && isIconKey(item.icon) && (
-                <span class="b-contact__icon" aria-hidden="true"><Icon name={item.icon} size={18} /></span>
-              )}
-              <span class="b-contact__value">{item.value}</span>
-            </>
-          );
-          return (
-            <li>
-              {item.href ? (
-                <a class="b-contact__item" href={item.href} target={target(item.href)} rel={rel(item.href)}>{inner}</a>
-              ) : (
-                <div class="b-contact__item">{inner}</div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    )}
-
-    {note && <p class="b-contact__note">{note}</p>}
-  </div>
-</section>
-
-<style>
-  .b-contact {
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  /* Adaptive panel: a section surface that flips light↔dark with the theme, lifted
-     off the page by a border + shadow, with a soft brand-gold wash for presence. */
-  .b-contact__panel {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem 2.5rem;
-    padding: clamp(1.75rem, 4vw, 3rem);
-    border-radius: var(--radius);
-    background: var(--bg-section);
-    color: var(--fg);
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-md);
-  }
-  /* Brand wash — a gold glow in the top-right, behind the content (z-index below the
-     panel's own children via isolation). Adds brand presence in both themes without
-     tinting the text ground, so contrast is never at risk. */
-  .b-contact__panel::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: radial-gradient(115% 130% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
-    pointer-events: none;
-  }
-  @media (min-width: 48rem) {
-    .b-contact__panel { grid-template-columns: 1.2fr 1fr; align-items: center; }
-  }
-  .b-contact__head { display: flex; flex-direction: column; gap: 0.5rem; }
-  .b-contact__eyebrow {
-    margin: 0;
-    display: inline-flex; align-items: center; gap: 0.6rem;
-    font-family: var(--font-heading);
-    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
-    color: var(--accent);
-  }
-  /* Short gold rule carries the brand into the eyebrow without colouring the text. */
-  .b-contact__eyebrow::before {
-    content: ''; flex: 0 0 auto; width: 1.5rem; height: 2px; border-radius: 2px;
-    background: var(--gold);
-  }
-  .b-contact__title {
-    margin: 0;
-    font-family: var(--font-display, var(--font-heading));
-    font-size: clamp(1.9rem, 4vw, 2.8rem);
-    line-height: 1.05;
-    text-wrap: balance;
-    color: var(--fg);
-  }
-  .b-contact__subtitle {
-    margin: 0.15rem 0 0;
-    font-family: var(--font-heading);
-    font-weight: 600;
-    color: var(--accent);
-  }
-  .b-contact__items {
-    list-style: none;
-    margin: 0; padding: 0;
-    display: flex; flex-direction: column; gap: 0.6rem;
-  }
-  .b-contact__item {
-    display: flex; align-items: center; gap: 0.75rem;
-    padding: 0.7rem 1rem;
-    border-radius: var(--radius-sm);
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    color: var(--fg);
-    font-family: var(--font-heading);
-    font-weight: 600;
-    font-size: 0.95rem;
-    text-decoration: none;
-    transition: border-color 0.15s ease, background 0.15s ease;
-  }
-  a.b-contact__item:hover {
-    border-color: var(--gold);
-    background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface));
-  }
-  a.b-contact__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
-  .b-contact__icon { display: inline-flex; color: var(--gold); flex: 0 0 auto; }
-  .b-contact__value { min-width: 0; overflow-wrap: anywhere; }
-  .b-contact__note {
-    grid-column: 1 / -1;
-    margin: 0;
-    padding-top: 1.25rem;
-    border-top: 1px solid var(--border);
-    color: var(--muted);
-    font-size: 0.9rem;
-    line-height: 1.6;
-  }
-</style>
+---
+/**
+ * ContactCard — a Level-2 recipe: a rich, branded "get in touch" band. A display-
+ * type title + subtitle on the left, the contact channels as tappable tiles on the
+ * right, and a closing note across the bottom. For a contact or find-us page — the
+ * polished alternative to a plain notice box.
+ *
+ * Fully THEME-ADAPTIVE (composes in light AND dark): the panel is `--bg-section`
+ * with a soft `--gold` corner wash for brand presence, text is `--fg`/`--accent`/
+ * `--muted`, tiles are `--bg-surface` recesses, icons + hovers use `--gold`. Every
+ * one of those tokens flips per theme, so the band re-composes correctly in each
+ * mode (never the old always-dark band) and a CMS colour change recolours it.
+ * Contrast-safe: brand gold is used only decoratively (wash, rule, icons, hovers),
+ * never as body/label text — those use the ink/text tokens that meet AA on the
+ * panel in both themes. Whole tile links when `href` is set.
+ */
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+import { inlineMarkdown, textWithBreaks } from '../../lib/inline-markdown';
+
+interface Item {
+  icon?: string;
+  value: string;
+  href?: string;
+}
+interface Props {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  note?: string;
+  items?: Item[];
+}
+const { eyebrow, title, subtitle, note, items = [] } = Astro.props;
+const rel = (href?: string) => (href && /^https?:\/\//.test(href) ? 'noopener' : undefined);
+const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank' : undefined);
+---
+
+<section class="b-contact">
+  <div class="b-contact__panel">
+    <div class="b-contact__head">
+      {eyebrow && <p class="b-contact__eyebrow">{eyebrow}</p>}
+      <h2 class="b-contact__title">{title}</h2>
+      {subtitle && <p class="b-contact__subtitle" set:html={inlineMarkdown(subtitle)} />}
+    </div>
+
+    {items.length > 0 && (
+      <ul class="b-contact__items">
+        {items.map((item) => {
+          const inner = (
+            <>
+              {item.icon && isIconKey(item.icon) && (
+                <span class="b-contact__icon" aria-hidden="true"><Icon name={item.icon} size={18} /></span>
+              )}
+              {/* A linked item holds plain text (no nested links); an unlinked one may carry links. */}
+              <span class="b-contact__value" set:html={item.href ? textWithBreaks(item.value) : inlineMarkdown(item.value)} />
+            </>
+          );
+          return (
+            <li>
+              {item.href ? (
+                <a class="b-contact__item" href={item.href} target={target(item.href)} rel={rel(item.href)}>{inner}</a>
+              ) : (
+                <div class="b-contact__item">{inner}</div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    )}
+
+    {note && <p class="b-contact__note" set:html={inlineMarkdown(note)} />}
+  </div>
+</section>
+
+<style>
+  .b-contact {
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  /* Adaptive panel: a section surface that flips light↔dark with the theme, lifted
+     off the page by a border + shadow, with a soft brand-gold wash for presence. */
+  .b-contact__panel {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem 2.5rem;
+    padding: clamp(1.75rem, 4vw, 3rem);
+    border-radius: var(--radius);
+    background: var(--bg-section);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+  }
+  /* Brand wash — a gold glow in the top-right, behind the content (z-index below the
+     panel's own children via isolation). Adds brand presence in both themes without
+     tinting the text ground, so contrast is never at risk. */
+  .b-contact__panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: radial-gradient(115% 130% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
+    pointer-events: none;
+  }
+  @media (min-width: 48rem) {
+    .b-contact__panel { grid-template-columns: 1.2fr 1fr; align-items: center; }
+  }
+  .b-contact__head { display: flex; flex-direction: column; gap: 0.5rem; }
+  .b-contact__eyebrow {
+    margin: 0;
+    display: inline-flex; align-items: center; gap: 0.6rem;
+    font-family: var(--font-heading);
+    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--accent);
+  }
+  /* Short gold rule carries the brand into the eyebrow without colouring the text. */
+  .b-contact__eyebrow::before {
+    content: ''; flex: 0 0 auto; width: 1.5rem; height: 2px; border-radius: 2px;
+    background: var(--gold);
+  }
+  .b-contact__title {
+    margin: 0;
+    font-family: var(--font-display, var(--font-heading));
+    font-size: clamp(1.9rem, 4vw, 2.8rem);
+    line-height: 1.05;
+    text-wrap: balance;
+    color: var(--fg);
+  }
+  .b-contact__subtitle {
+    margin: 0.15rem 0 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    color: var(--accent);
+  }
+  .b-contact__items {
+    list-style: none;
+    margin: 0; padding: 0;
+    display: flex; flex-direction: column; gap: 0.6rem;
+  }
+  .b-contact__item {
+    display: flex; align-items: center; gap: 0.75rem;
+    padding: 0.7rem 1rem;
+    border-radius: var(--radius-sm);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--fg);
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.95rem;
+    text-decoration: none;
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+  a.b-contact__item:hover {
+    border-color: var(--gold);
+    background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface));
+  }
+  a.b-contact__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+  .b-contact__icon { display: inline-flex; color: var(--gold); flex: 0 0 auto; }
+  .b-contact__value { min-width: 0; overflow-wrap: anywhere; }
+  .b-contact__note {
+    grid-column: 1 / -1;
+    margin: 0;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+</style>

package/components/recipes/Document.astro

@@ -0,0 +1,152 @@
+---
+/**
+ * Document — a policy or legal text as ONE block. Sections are numbered automatically,
+ * a contents list links to each (beside the text, sticky, on wide screens), and an
+ * optional "last updated" line sits at the top. Section bodies take prose formatting
+ * (links, bold, lists); `items` add a list. Print-friendly: the contents list is
+ * dropped on paper.
+ */
+import { proseParts } from '../../lib/prose';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+import { longDate } from '../../lib/documents';
+
+interface Section { title: string; body?: string; items?: string[] }
+interface Props {
+  intro?: string;
+  updated?: string;
+  numbered?: boolean;
+  toc?: boolean;
+  sections: Section[];
+}
+const { intro, updated, numbered = true, toc = true, sections = [] } = Astro.props;
+const updatedLabel = longDate(updated);
+const showToc = toc && sections.length > 1;
+---
+
+<section class="b-doc" data-toc={showToc ? 'true' : undefined}>
+  {showToc && (
+    <nav class="b-doc__toc" aria-label="Contents">
+      <p class="b-doc__toc-title">Contents</p>
+      <ol>
+        {sections.map((s, i) => (
+          <li><a href={`#clause-${i + 1}`}>{numbered && <span class="b-doc__toc-num">{i + 1}.</span>} {s.title}</a></li>
+        ))}
+      </ol>
+    </nav>
+  )}
+  <div class="b-doc__body">
+    {updatedLabel && <p class="b-doc__updated">Last updated {updatedLabel}</p>}
+    {intro && <p class="b-doc__intro" set:html={inlineMarkdown(intro)} />}
+    {sections.map((s, i) => (
+      <section class="b-doc__clause" id={`clause-${i + 1}`}>
+        <h2>{numbered && <span class="b-doc__num">{i + 1}.</span>} {s.title}</h2>
+        {proseParts(s.body).map((part) =>
+          part.kind === 'p' ? <p set:html={part.html} />
+          : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
+          : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
+        )}
+        {s.items && s.items.length > 0 && <ul>{s.items.map((x) => <li set:html={inlineMarkdown(x)} />)}</ul>}
+      </section>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-doc {
+    display: grid;
+    gap: 2rem;
+    width: 100%;
+    max-width: 64rem;
+  }
+  @media (min-width: 64em) {
+    .b-doc[data-toc] {
+      grid-template-columns: 15rem minmax(0, 1fr);
+      align-items: start;
+    }
+    .b-doc__toc {
+      position: sticky;
+      top: 6rem;
+    }
+  }
+  .b-doc__toc {
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    padding: 1rem 1.1rem;
+  }
+  .b-doc__toc-title {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .b-doc__toc ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.35rem;
+    font-size: 0.9375rem;
+  }
+  .b-doc__toc a {
+    color: var(--fg);
+    text-decoration: none;
+  }
+  .b-doc__toc a:hover {
+    color: var(--gold);
+    text-decoration: underline;
+  }
+  .b-doc__toc-num {
+    color: var(--muted);
+    font-variant-numeric: tabular-nums;
+  }
+  .b-doc__body {
+    max-width: var(--max);
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+  }
+  .b-doc__updated {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+  .b-doc__intro {
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.6;
+    color: var(--muted);
+  }
+  .b-doc__clause {
+    scroll-margin-top: 6rem;
+  }
+  .b-doc__clause h2 {
+    margin: 0 0 0.6rem;
+    font-size: 1.25rem;
+  }
+  .b-doc__num {
+    color: var(--gold);
+    font-variant-numeric: tabular-nums;
+  }
+  .b-doc__clause p,
+  .b-doc__clause ul,
+  .b-doc__clause ol {
+    margin: 0 0 0.75rem;
+    line-height: 1.7;
+  }
+  .b-doc__clause ul,
+  .b-doc__clause ol {
+    padding-inline-start: 1.4em;
+  }
+  .b-doc__clause :global(a) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  @media print {
+    .b-doc__toc { display: none; }
+    .b-doc[data-toc] { grid-template-columns: 1fr; }
+  }
+</style>