@getvitops/emdash 1.0.0 → 2.0.0-alpha.0

package/src/astro/blocks/Cards.astro

@@ -5,15 +5,30 @@
  * as a whole while its text stays selectable; without JS the stretched link does the
  * same job. The card CSS is the framework's `.card` pattern.
  *
- * The title is a styled paragraph rather than a fixed heading element: the block can
- * sit at any depth in a document, and a hard-coded `<h3>` would skip or repeat levels.
+ * **The title is a real heading** at the editor's `level` (default `h3`), in the `heading`
+ * type role. It used to be `<p class="font-heading">`: the wrong size for a card in most
+ * type scales AND no heading in the outline (UPSTREAM 19). The level is a field because the
+ * block can sit at any depth, and a hard-coded one would skip or repeat levels.
+ *
+ * `variant: panel` is the tinted service-panel card — a tone, a checklist and a button.
+ * A panel's whole-card link is dropped (it holds its own button), so it renders as
+ * `<Subgrid>` markup rather than a `<Cards>` that would try to forward clicks.
+ *
+ * The body may carry `[text](url)` inline links; see `linkRuns()`.
  */
 import Cards from '@getvitops/astro/components/Cards.astro';
-import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+import Subgrid from '@getvitops/astro/components/Subgrid.astro';
+import RichText from './RichText.astro';
+import { joinStyle, resolveTone } from './tone.ts';
+import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
 
 interface Value {
   cards?: unknown;
   columns?: string | number;
+  variant?: string;
+  level?: string | number;
+  tone?: string;
+  color?: string;
 }
 
 const value = resolveBlockValue<Value>(Astro.props);
@@ -25,20 +40,49 @@ const cards = rows<Record<string, unknown>>(value.cards)
     imageAlt: text(row.imageAlt),
     href: safeHref(row.href),
     linkLabel: text(row.linkLabel) || 'Read more',
+    checklist: lines(row.checklist),
+    ctaLabel: text(row.ctaLabel),
+    ctaHref: safeHref(row.ctaHref),
   }))
   .filter((card) => card.title || card.body || card.image);
 const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)));
+const panel = value.variant === 'panel';
+const Heading = headingTag(value.level, 3);
+const tone = resolveTone(value.tone, value.color);
+const Grid = panel ? Subgrid : Cards;
 ---
 
 {
   cards.length > 0 && (
-    <Cards style={`--subgrid-cols: ${columns}`}>
+    <Grid style={`--subgrid-cols: ${columns}`}>
       {cards.map((card) => (
-        <li class="card subgrid-card">
+        <li
+          class:list={['card', 'subgrid-card', panel && tone.className]}
+          style={panel ? joinStyle(tone.style) : undefined}
+        >
           {card.image && <img src={card.image} alt={card.imageAlt} loading="lazy" />}
-          {card.title && <p class="font-heading">{card.title}</p>}
-          {card.body && <p>{card.body}</p>}
-          {card.href && (
+          {card.title && <Heading class="font-heading">{card.title}</Heading>}
+          {card.body && (
+            <p>
+              <RichText text={card.body} />
+            </p>
+          )}
+          {panel && card.checklist.length > 0 && (
+            <ul class="rhythm" role="list">
+              {card.checklist.map((item) => (
+                <li>{item}</li>
+              ))}
+            </ul>
+          )}
+          {panel && card.ctaLabel && card.ctaHref && (
+            <p class="subgrid-card__footer">
+              <a class="cta" href={card.ctaHref}>
+                {card.ctaLabel}
+                <span class="sr-only">: {card.title}</span>
+              </a>
+            </p>
+          )}
+          {!panel && card.href && (
             <a class="link stretched-link" href={card.href}>
               {card.linkLabel}
               {/* "Read more" alone is meaningless in a list of links; name the card for AT. */}
@@ -47,6 +91,6 @@ const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)))
           )}
         </li>
       ))}
-    </Cards>
+    </Grid>
   )
 }

package/src/astro/blocks/Embed.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * A video or map that loads only after the visitor allows it.
+ *
+ * The consent gate's rule (AGENTS.md, "The consent gate"): never give a gated element a
+ * live address. The iframe is emitted with NO `src`; the address rides on
+ * `data-consent-src`, which the consent runtime (`@getvitops/core/consent`) assigns once the
+ * category is granted — and, because the element reaches its loading strategy, raises the
+ * banner for that category rather than waiting for something else to ask. Until then the
+ * page issues no request to the provider. With no JS the gate never runs, so the
+ * placeholder's plain link to the same content is what the visitor gets.
+ *
+ * A `title` is required (WCAG 4.1.2 names the frame); without one, or with an address the
+ * provider rules in `embed.ts` refuse, the block renders nothing rather than an unnamed or
+ * unsafe frame. Only categories the consent store defines are accepted.
+ */
+import { resolveEmbed } from './embed.ts';
+import { resolveBlockValue, text } from './value.ts';
+
+interface Value {
+  provider?: string;
+  url?: string;
+  title?: string;
+  category?: string;
+  ratio?: string;
+}
+
+const CATEGORIES = new Set(['marketing', 'preferences', 'analytics']);
+
+const value = resolveBlockValue<Value>(Astro.props);
+const title = text(value.title);
+const embed = resolveEmbed(value.provider, value.url);
+const category = CATEGORIES.has(text(value.category)) ? text(value.category) : 'marketing';
+// A ratio lands in a style attribute: digits, slash and spaces only.
+const ratio = /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(text(value.ratio)) ? text(value.ratio) : null;
+---
+
+{
+  title && embed && (
+    <div class="embed" style={ratio ? `--embed-ratio: ${ratio}` : undefined}>
+      <iframe
+        class="embed__frame"
+        title={title}
+        data-consent={category}
+        data-consent-src={embed.src}
+        loading="lazy"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allow="fullscreen; picture-in-picture"
+      />
+      <div class="embed__placeholder">
+        <p class="font-heading">{title}</p>
+        <p>
+          This content is provided by {embed.provider}. It loads once you allow {category} cookies.
+        </p>
+        <p class="cluster">
+          <button type="button" class="btn" data-consent-open>
+            Cookie settings
+          </button>
+          <a class="link" href={embed.openUrl} rel="noopener noreferrer">
+            Open on {embed.provider}
+            <span class="sr-only">: {title}</span>
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/astro/blocks/Entries.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * Thin adapter over `@getvitops/astro`'s `<Entries />`, which emits `<wc-entries>` itself —
+ * so this must not add its own wrapper. Stacked heading + `<dl>` pairs with no JS, a table
+ * with it. The editor writes each row's details as `Term | Value` lines.
+ */
+import Entries from '@getvitops/astro/components/Entries.astro';
+import { headingTag, pairs, resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  entries?: unknown;
+  level?: string | number;
+  breakpoint?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const entries = rows<Record<string, unknown>>(value.entries)
+  .map((row) => ({
+    heading: text(row.heading),
+    pairs: pairs(row.pairs).filter((pair) => pair.term),
+  }))
+  .filter((entry) => entry.heading && entry.pairs.length > 0);
+const level = Number(headingTag(value.level, 3).slice(1)) as 2 | 3 | 4 | 5 | 6;
+// A breakpoint lands in an attribute the element parses as a CSS length; keep it to one.
+const breakpoint = /^\d+(\.\d+)?(rem|em|px|ch)$/.test(text(value.breakpoint))
+  ? text(value.breakpoint)
+  : undefined;
+---
+
+{entries.length > 0 && <Entries entries={entries} level={level} breakpoint={breakpoint} />}

package/src/astro/blocks/Form.astro

@@ -0,0 +1,194 @@
+---
+/**
+ * A contact / enquiry form that posts to the site's conversion endpoint.
+ *
+ * Tier 1 first: a real `<form method="post">` of real `<label>`s, styled by the framework's
+ * `forms.css` vocabulary, that works with no JavaScript. It posts to `createConversionRoute()`
+ * (default `/api/track`, which the emdash template ships), which applies the honeypot, origin,
+ * size and rate checks, verifies Turnstile, then writes the CRM and emails the notification.
+ * The block itself decides none of that: it only emits markup the route understands.
+ *
+ * The no-JS round trip. The route answers a form post with a 303 back to the `_next` hidden
+ * field (this page's path, a same-site path only) plus `?sent=1#form-sent` or
+ * `?error=1#form-error`. The page is prerendered and cannot know which happened, so both
+ * messages are always in the markup and `.form-notice--target:not(:target)` hides whichever the
+ * URL fragment does not name. They carry `tabindex="-1"` so following the fragment moves focus
+ * to the message. One form per page: the fragment ids are fixed.
+ *
+ * Spam protection, in layers: a honeypot field named per the route's default, the route's own
+ * origin/rate/size checks, and Cloudflare Turnstile when `site.security.turnstile.siteKey`
+ * exists (the siteKey comes from the build's `virtual:getvitops/head`). Turnstile is emitted as
+ * `<wc-turnstile>`, which loads Cloudflare's script only on first interaction with the form.
+ * Its slotted paragraph is the no-JS explanation. With no site key there is no widget and no
+ * third-party reference at all.
+ *
+ * Field names go through `form.ts`, which keeps them clear of the names the route reserves
+ * (`phone`, `event`, the honeypots), and a phone field submits as `tel`.
+ */
+import head from 'virtual:getvitops/head';
+import { resolveTone, joinStyle } from './tone.ts';
+import { HONEYPOT_NAME, resolveFields, safeAction, safeNext } from './form.ts';
+import { headingTag, resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  heading?: string;
+  level?: string | number;
+  intro?: string;
+  fields?: unknown;
+  submitLabel?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  noJsMessage?: string;
+  action?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const fields = resolveFields(rows(value.fields));
+const heading = text(value.heading);
+const intro = text(value.intro);
+const Heading = headingTag(value.level, 2);
+const submitLabel = text(value.submitLabel) || 'Send';
+const successMessage = text(value.successMessage) || 'Thanks. Your message has been sent.';
+const errorMessage =
+  text(value.errorMessage) ||
+  'Sorry, your message could not be sent. Please try again, or contact us another way.';
+const noJsMessage =
+  text(value.noJsMessage) ||
+  'The spam check on this form needs JavaScript. If it is turned off, please contact us by email or phone instead.';
+const action = safeAction(value.action);
+const next = safeNext(Astro.url.pathname) ?? '/';
+const siteKey = typeof head?.turnstileSiteKey === 'string' ? head.turnstileSiteKey : null;
+const tone = resolveTone(value.tone, value.color);
+const successTone = resolveTone('success', '');
+const errorTone = resolveTone('danger', '');
+const hasForm = fields.length > 0;
+---
+
+{
+  hasForm && (
+    <div class:list={['form-block', 'rhythm', tone.className]} style={joinStyle(tone.style)}>
+      {heading && <Heading class="font-heading">{heading}</Heading>}
+      {intro && <p>{intro}</p>}
+
+      <div
+        id="form-sent"
+        class:list={['callout', 'form-notice--target', successTone.className]}
+        style={joinStyle(successTone.style)}
+        role="status"
+        tabindex="-1"
+      >
+        <div class="callout__body">
+          <p class="callout__text">{successMessage}</p>
+        </div>
+      </div>
+      <div
+        id="form-error"
+        class:list={['callout', 'form-notice--target', errorTone.className]}
+        style={joinStyle(errorTone.style)}
+        role="alert"
+        tabindex="-1"
+      >
+        <div class="callout__body">
+          <p class="callout__text">{errorMessage}</p>
+        </div>
+      </div>
+
+      <form method="post" action={action} class="rhythm">
+        <input type="hidden" name="_next" value={next} />
+        {fields.map((f) => {
+          const describedby = f.help ? `${f.id}-help` : undefined;
+          const requiredMark = f.required ? { required: true, 'aria-required': 'true' } : {};
+          return f.type === 'checkbox' ? (
+            <div class="form-group">
+              <label class="custom-check">
+                <input
+                  type="checkbox"
+                  id={f.id}
+                  name={f.name}
+                  value="yes"
+                  aria-describedby={describedby}
+                  {...requiredMark}
+                />
+                <span class="custom-check__box">
+                  <span class="custom-check__indicator custom-check__indicator--check" />
+                </span>
+                <span>{f.label}</span>
+              </label>
+              {f.help && (
+                <p id={`${f.id}-help`} class="form-group__helper">
+                  {f.help}
+                </p>
+              )}
+            </div>
+          ) : (
+            <div class="form-group">
+              <label class="form-group__label" for={f.id}>
+                {f.label}
+                {!f.required && <span class="form-group__optional">(optional)</span>}
+              </label>
+              {f.type === 'textarea' ? (
+                <textarea
+                  id={f.id}
+                  name={f.name}
+                  rows="5"
+                  placeholder={f.placeholder || undefined}
+                  aria-describedby={describedby}
+                  {...requiredMark}
+                />
+              ) : f.type === 'select' ? (
+                <div class="custom-select">
+                  <select id={f.id} name={f.name} aria-describedby={describedby} {...requiredMark}>
+                    <option value="">Choose one</option>
+                    {f.options.map((o) => (
+                      <option value={o}>{o}</option>
+                    ))}
+                  </select>
+                </div>
+              ) : (
+                <input
+                  type={f.type}
+                  id={f.id}
+                  name={f.name}
+                  placeholder={f.placeholder || undefined}
+                  autocomplete={f.autocomplete}
+                  aria-describedby={describedby}
+                  {...requiredMark}
+                />
+              )}
+              {f.help && (
+                <p id={`${f.id}-help`} class="form-group__helper">
+                  {f.help}
+                </p>
+              )}
+            </div>
+          );
+        })}
+
+        {/* Honeypot: named per createConversionRoute's default list. Positioned off-screen rather than
+            display:none (which simple bots skip), and hidden from assistive tech and the tab order. */}
+        <div class="sr-only" aria-hidden="true">
+          <label>
+            Leave this field empty
+            <input type="text" name={HONEYPOT_NAME} tabindex="-1" autocomplete="off" />
+          </label>
+        </div>
+
+        {siteKey && (
+          <wc-turnstile sitekey={siteKey}>
+            <p class="form-group__helper" data-turnstile-fallback>
+              {noJsMessage}
+            </p>
+          </wc-turnstile>
+        )}
+
+        <p>
+          <button type="submit" class="cta">
+            {submitLabel}
+          </button>
+        </p>
+      </form>
+    </div>
+  )
+}

package/src/astro/blocks/Hero.astro

@@ -1,15 +1,27 @@
 ---
 /**
  * A page opener built from the layout primitives: `.centered` for a single column, `.split`
- * for text beside an image. The heading is a real `<h1>` only when the editor chooses nothing
- * else — a page has one, and EmDash renders the page title elsewhere, so this uses `<h2>`.
+ * for text beside an image. The heading defaults to `<h2>` — a page has one `<h1>`, and
+ * EmDash renders the page title elsewhere — and an editor can change the level. Words wrapped
+ * in `*stars*` render as `<em class="accent">` (accent marks, no raw HTML in the field).
+ * An optional row of option cards sits under the buttons, as the framework's `.card` list.
  * Flat fields, because a block cannot contain other blocks.
  */
-import { resolveBlockValue, safeHref, text } from './value.ts';
+import RichText from './RichText.astro';
+import { joinStyle, resolveTone } from './tone.ts';
+import {
+  accentRuns,
+  headingTag,
+  resolveBlockValue,
+  rows,
+  safeHref,
+  text,
+} from './value.ts';
 
 interface Value {
   eyebrow?: string;
   heading?: string;
+  level?: string | number;
   body?: string;
   primaryLabel?: string;
   primaryHref?: string;
@@ -18,11 +30,16 @@ interface Value {
   image?: string;
   imageAlt?: string;
   layout?: string;
+  tone?: string;
+  color?: string;
+  cards?: unknown;
 }
 
 const value = resolveBlockValue<Value>(Astro.props);
 const eyebrow = text(value.eyebrow);
 const heading = text(value.heading);
+const headingRuns = accentRuns(heading);
+const Heading = headingTag(value.level, 2);
 const body = text(value.body);
 const primaryLabel = text(value.primaryLabel);
 const primaryHref = safeHref(value.primaryHref);
@@ -31,31 +48,68 @@ const secondaryHref = safeHref(value.secondaryHref);
 const image = safeHref(value.image);
 const imageAlt = text(value.imageAlt);
 const split = value.layout === 'split' && Boolean(image);
+const tone = resolveTone(value.tone, value.color);
+const cards = rows<Record<string, unknown>>(value.cards)
+  .map((row) => ({
+    title: text(row.title),
+    body: text(row.body),
+    href: safeHref(row.href),
+    linkLabel: text(row.linkLabel) || 'Learn more',
+  }))
+  .filter((card) => card.title || card.body);
 ---
 
 {
   (heading || body) && (
-    <section class={split ? 'split split-1-2' : 'centered'}>
-      <div class="rhythm">
-        {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}
-        {heading && <h2 class="font-display">{heading}</h2>}
-        {body && <p class="font-lead">{body}</p>}
-        {(primaryLabel && primaryHref) || (secondaryLabel && secondaryHref) ? (
-          <p class="cluster">
-            {primaryLabel && primaryHref && (
-              <a class="cta" href={primaryHref}>
-                {primaryLabel}
-              </a>
-            )}
-            {secondaryLabel && secondaryHref && (
-              <a class="link" href={secondaryHref}>
-                {secondaryLabel}
-              </a>
-            )}
-          </p>
-        ) : null}
+    <section class={tone.style ? tone.className : undefined} style={joinStyle(tone.style)}>
+      <div class={split ? 'split split-1-2' : 'centered'}>
+        <div class="rhythm">
+          {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}
+          {heading && (
+            <Heading class="font-display">
+              {headingRuns.map((run) =>
+                run.accent ? <em class="accent">{run.text}</em> : run.text,
+              )}
+            </Heading>
+          )}
+          {body && <p class="font-lead">{body}</p>}
+          {(primaryLabel && primaryHref) || (secondaryLabel && secondaryHref) ? (
+            <p class="cluster">
+              {primaryLabel && primaryHref && (
+                <a class="cta" href={primaryHref}>
+                  {primaryLabel}
+                </a>
+              )}
+              {secondaryLabel && secondaryHref && (
+                <a class="link" href={secondaryHref}>
+                  {secondaryLabel}
+                </a>
+              )}
+            </p>
+          ) : null}
+        </div>
+        {split && <img src={image} alt={imageAlt} loading="eager" />}
       </div>
-      {split && <img src={image} alt={imageAlt} loading="eager" />}
+      {cards.length > 0 && (
+        <ul class="subgrid centered" role="list" style={`--subgrid-cols: ${Math.min(4, cards.length)}`}>
+          {cards.map((card) => (
+            <li class="card subgrid-card">
+              {card.title && <h3 class="font-heading">{card.title}</h3>}
+              {card.body && (
+                <p>
+                  <RichText text={card.body} />
+                </p>
+              )}
+              {card.href && (
+                <a class="link stretched-link" href={card.href}>
+                  {card.linkLabel}
+                  {card.title && <span class="sr-only">: {card.title}</span>}
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
     </section>
   )
 }

package/src/astro/blocks/Logos.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * A still row of partner/client marks on the framework's `.logos` pattern. `vitops.marquee`
+ * is the scrolling version; this one holds still. A list, so the count is announced, and
+ * each mark is an image with the editor's name as its alt text — a logo with no alt is a
+ * link or a fact the page silently drops.
+ */
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+
+interface Value {
+  label?: string;
+  logos?: unknown;
+  grayscale?: boolean;
+  size?: string;
+}
+
+const HEIGHTS: Record<string, string> = { sm: '1.75rem', md: '2.5rem', lg: '3.5rem' };
+
+const value = resolveBlockValue<Value>(Astro.props);
+const label = text(value.label) || 'Partners';
+const logos = rows<Record<string, unknown>>(value.logos)
+  .map((row) => ({ image: safeHref(row.image), alt: text(row.alt), href: safeHref(row.href) }))
+  .filter((logo) => logo.image);
+const height = HEIGHTS[text(value.size)];
+---
+
+{
+  logos.length > 0 && (
+    <ul
+      class:list={['logos', value.grayscale && 'logos--grayscale']}
+      role="list"
+      aria-label={label}
+      style={height ? `--logos-height: ${height}` : undefined}
+    >
+      {logos.map((logo) => (
+        <li class="logos__item">
+          {logo.href ? (
+            <a href={logo.href}>
+              <img src={logo.image} alt={logo.alt} loading="lazy" />
+            </a>
+          ) : (
+            <img src={logo.image} alt={logo.alt} loading="lazy" />
+          )}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/astro/blocks/Nav.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * An EmDash menu inside page content — a site map, a section's link list, a set of footer-style
+ * columns. **Not the site header:** that is `<SiteNav>` in the layout, which owns the drawer,
+ * the dropdowns and the breakpoints. The `sitenav` variant exists for the rare page that wants
+ * that navbar in the body, and renders `<SiteNav>` itself rather than a copy of it.
+ *
+ * Tier-3, no runtime JS. The menu is fetched with EmDash's `getMenu()` at render time (so at
+ * build time on a prerendered page). **A missing menu, an empty one, or a name that is not a
+ * slug renders nothing** — never an error; a deleted menu must not take the page down.
+ *
+ * Accessibility: a `<nav>` landmark with a name that is unique on the page — the header is
+ * "Primary" and the footer "Site map" / "Legal", so `navLabel()` never hands this block one of
+ * those — and `aria-current="page"` on the current item. An optional visible heading is a real
+ * heading at the editor's `level` (default `h2`), kept outside the `<nav>` so the landmark's
+ * name is the `aria-label`, not a duplicate of the heading text.
+ *
+ * The menu-tree helpers (`trimDepth`, `isCurrent`, `linkRel`) are `@getvitops/astro`'s
+ * `sitenav.ts`; only the selection rules live in `nav.ts`.
+ */
+import { getMenu } from 'emdash';
+import SiteNav from '@getvitops/astro/components/SiteNav.astro';
+import { menuItems, trimDepth } from '@getvitops/astro/components/sitenav.ts';
+import NavTree from './NavTree.astro';
+import { menuName, navDepth, navId, navLabel, navVariant } from './nav.ts';
+import { joinStyle, resolveTone } from './tone.ts';
+import { headingTag, resolveBlockValue, text } from './value.ts';
+
+interface Value {
+  _key?: string;
+  menu?: string;
+  label?: string;
+  heading?: string;
+  level?: string | number;
+  variant?: string;
+  depth?: string | number;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const name = menuName(value.menu);
+let menu: Awaited<ReturnType<typeof getMenu>> = null;
+if (name) {
+  try {
+    menu = await getMenu(name);
+  } catch {
+    // No database or request context: the same quiet nothing as a missing menu.
+    menu = null;
+  }
+}
+
+const variant = navVariant(value.variant);
+const depth = navDepth(value.depth);
+const items = menuItems(menu);
+const label = navLabel(value.label, value.heading, menu?.label, name ?? '');
+const heading = text(value.heading);
+const Heading = headingTag(value.level, 2);
+const tone = resolveTone(value.tone, value.color);
+const toned = Boolean(value.tone || value.color);
+const trimmed = trimDepth(items, depth);
+const current = Astro.url.pathname;
+---
+
+{
+  items.length > 0 && (
+    <div
+      class:list={['navblock', toned && tone.className]}
+      style={toned ? joinStyle(tone.style) : undefined}
+    >
+      {heading && <Heading class="font-heading">{heading}</Heading>}
+      {variant === 'sitenav' ? (
+        <SiteNav primary={trimmed} label={label} depth={depth} id={navId(value._key, name ?? '')} />
+      ) : (
+        <nav aria-label={label}>
+          <NavTree
+            items={trimmed}
+            current={current}
+            modifiers={variant === 'list' ? [] : [`navlist--${variant}`]}
+          />
+        </nav>
+      )}
+    </div>
+  )
+}