@getvitops/emdash 1.0.0-alpha.0 → 2.0.0-alpha.0

package/src/astro/blocks/Cards.astro

@@ -0,0 +1,96 @@
+---
+/**
+ * Thin adapter over `@getvitops/astro`'s `<Cards />`, which emits `<wc-cards>` itself —
+ * so this must not add its own wrapper. With JS a card holding a link becomes clickable
+ * 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 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 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);
+const cards = rows<Record<string, unknown>>(value.cards)
+  .map((row) => ({
+    title: text(row.title),
+    body: text(row.body),
+    image: safeHref(row.image),
+    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 && (
+    <Grid style={`--subgrid-cols: ${columns}`}>
+      {cards.map((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 && <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. */}
+              {card.title && <span class="sr-only">: {card.title}</span>}
+            </a>
+          )}
+        </li>
+      ))}
+    </Grid>
+  )
+}

package/src/astro/blocks/Carousel.astro

@@ -3,14 +3,20 @@
  * Thin adapter over `@getvitops/astro`'s `<Carousel />`.
  *
  * The markup, the image priority matrix and the accessibility wiring all live
- * there — this only maps the block's newline-separated fields onto its `slides`
- * prop. Emitting the markup here too would be a second copy to keep in step, and
- * the one that drifts is always the one nobody is looking at.
+ * there — this only maps the block's fields onto its `slides` prop. Emitting the
+ * markup here too would be a second copy to keep in step, and the one that drifts
+ * is always the one nobody is looking at.
+ *
+ * `slides` (a repeater) is the editing surface. `images`/`alts` are the newline-
+ * separated fields every block saved before the repeater existed carries; they are
+ * still read when there are no `slides`, so existing content keeps rendering.
  */
 import Carousel from '@getvitops/astro/components/Carousel.astro';
-import { resolveBlockValue, splitLines } from './value.ts';
+import { resolveBlockValue, rows, safeHref, splitLines, text } from './value.ts';
 
 interface Value {
+  _key?: string;
+  slides?: unknown;
   images?: string;
   alts?: string;
   label?: string;
@@ -20,19 +26,30 @@ interface Value {
 }
 
 const value = resolveBlockValue<Value>(Astro.props);
-const images = splitLines(value.images);
-const alts = splitLines(value.alts);
+const fromRepeater = rows<{ src?: unknown; alt?: unknown }>(value.slides).flatMap((row) => {
+  const src = safeHref(row.src);
+  return src ? [{ src, alt: text(row.alt) }] : [];
+});
+const legacyAlts = splitLines(value.alts);
+const fromLegacy = splitLines(value.images).flatMap((raw, i) => {
+  const src = safeHref(raw);
+  return src ? [{ src, alt: legacyAlts[i] ?? '' }] : [];
+});
+const slides = fromRepeater.length > 0 ? fromRepeater : fromLegacy;
+// Two blocks with the same label would derive the same id; `_key` is unique per block.
+const id = value._key ? `carousel-${value._key.replace(/[^a-z0-9_-]/gi, '')}` : undefined;
 const autoplay = Number(value.autoplay) || 0;
 ---
 
 {
-  images.length > 0 && (
+  slides.length > 0 && (
     <Carousel
       label={value.label || 'Carousel'}
       autoplay={autoplay > 0 ? autoplay : undefined}
       loop={Boolean(value.loop)}
       aspect={value.aspect || '16 / 9'}
-      slides={images.map((src, i) => ({ src, alt: alts[i] ?? '' }))}
+      slides={slides}
+      id={id}
     />
   )
 }

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/Gallery.astro

@@ -0,0 +1,40 @@
+---
+/**
+ * Thin adapter over `@getvitops/astro`'s `<Gallery />` — a thumbnail grid whose dialog
+ * is a carousel. The `<wc-gallery>` tag, the no-JS `:target` dialog and the image
+ * pipeline all live there; this only maps the repeater rows onto `images`.
+ */
+import Gallery from '@getvitops/astro/components/Gallery.astro';
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+
+interface Value {
+  _key?: string;
+  label?: string;
+  images?: unknown;
+  aspect?: string;
+  loop?: boolean;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+// Two blocks with the same label would derive the same id; `_key` is unique per block.
+const id = value._key ? `gallery-${value._key.replace(/[^a-z0-9_-]/gi, '')}` : undefined;
+const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.images).flatMap(
+  (row) => {
+    const src = safeHref(row.src);
+    const caption = text(row.caption);
+    return src ? [{ src, alt: text(row.alt), ...(caption ? { caption } : {}) }] : [];
+  },
+);
+---
+
+{
+  images.length > 0 && (
+    <Gallery
+      label={text(value.label) || 'Gallery'}
+      images={images}
+      id={id}
+      aspect={text(value.aspect) || undefined}
+      loop={Boolean(value.loop)}
+    />
+  )
+}

package/src/astro/blocks/Hero.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * A page opener built from the layout primitives: `.centered` for a single column, `.split`
+ * 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 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;
+  secondaryLabel?: string;
+  secondaryHref?: string;
+  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);
+const secondaryLabel = text(value.secondaryLabel);
+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={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>
+      {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/ImageCompare.astro

@@ -1,5 +1,5 @@
 ---
-import { resolveBlockValue } from './value.ts';
+import { resolveBlockValue, safeHref } from './value.ts';
 
 interface Value {
   before?: string;
@@ -11,7 +11,10 @@ interface Value {
 }
 
 const value = resolveBlockValue<Value>(Astro.props);
-const { before, beforeAlt = '', beforeLabel = 'Before', after, afterAlt = '', afterLabel = 'After' } = value;
+const { beforeAlt = '', beforeLabel = 'Before', afterAlt = '', afterLabel = 'After' } = value;
+// A `javascript:`/`data:` src is dropped, so the block renders nothing rather than that image.
+const before = safeHref(value.before);
+const after = safeHref(value.after);
 ---
 
 {before && after && (

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>
+  )
+}