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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/emdash",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.2",
   "description": "EmDash CMS native plugin for the Vitops design system — Portable Text block types editors can insert from the admin, rendered with the design-system web components and CSS framework.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -31,15 +31,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/generator": "8.3.0-alpha.0",
-    "@getvitops/utils": "8.3.0-alpha.0"
+    "@getvitops/generator": "8.3.0-alpha.2",
+    "@getvitops/utils": "8.3.0-alpha.2"
   },
   "devDependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^7.0.0",
     "@emdash-cms/cloudflare": "^1.4.0",
-    "@getvitops/astro": "8.3.0-alpha.0",
-    "@getvitops/core": "8.3.0-alpha.0",
+    "@getvitops/astro": "8.3.0-alpha.2",
+    "@getvitops/core": "8.3.0-alpha.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "astro": "^7.4.4",

package/src/astro/Nothing.astro

@@ -0,0 +1,3 @@
+---
+/** Renders nothing. Stands in for a block that must not render in a given place. */
+---

package/src/astro/WidgetArea.astro

@@ -0,0 +1,113 @@
+---
+/**
+ * A widget area rendered in the framework's vocabulary, in place of `emdash/ui`'s
+ * `<WidgetArea>`: titles at a chosen heading level (the stock one is always `h3`), a menu as a
+ * labelled `<nav>` of `.link`s, content through `<PortableText>` so every `vitops_*` block
+ * works inside it. Renders nothing when the area is missing or empty.
+ *
+ * Two limits, both deliberate:
+ * - **No widget area inside a widget area.** A content widget that held a `vitops_widgetArea`
+ *   block could name its own area and recurse, and a request-scoped depth counter cannot be kept
+ *   honest while Astro streams children, so the block is simply not rendered in here.
+ * - **`component` widgets** (`core:recent-posts`, …) are EmDash's closed map and its renderer is
+ *   not exported, so an area that holds one is handed whole to the stock `<WidgetArea>`.
+ *
+ * Prerendered pages bake the area at build time: an edit in the admin shows after the next deploy.
+ */
+import { getMenu, getWidgetArea } from 'emdash';
+import Nothing from './Nothing.astro';
+import { unrenderedTypes } from './blocks/unrendered.ts';
+import { joinStyle, resolveTheme } from './blocks/tone.ts';
+import { headingTag, safeHref, text } from './blocks/value.ts';
+// Lazy for the same reason as `blocks/Section.astro`: a static `emdash/ui` import makes a cycle
+// through `virtual:emdash/block-components` and empties the plugin block map in a static build.
+const { PortableText, WidgetArea: StockWidgetArea } = await import('emdash/ui');
+
+interface Props {
+  /** The area's `name` as set under Widgets. */
+  name: string;
+  /** Level of each widget's title; default `3`. */
+  level?: number | string;
+  class?: string;
+  id?: string;
+  style?: string;
+  /** A backdrop for the area, from the site's colour roles: `surface`, `brand-primary:solid`, … */
+  theme?: string;
+}
+
+const { name, level, class: className, id, style, theme } = Astro.props;
+const themed = resolveTheme(theme);
+const area = name ? await getWidgetArea(name) : null;
+const widgets = area?.widgets ?? [];
+const delegated = widgets.some((w) => w.type === 'component');
+const Heading = headingTag(level, 3);
+const menus = Object.fromEntries(
+  await Promise.all(
+    widgets
+      .filter((w) => w.type === 'menu' && w.menuName)
+      .map(async (w) => [w.id, await getMenu(w.menuName!)] as const),
+  ),
+);
+/** A content widget with no text and no blocks is what the admin creates by default; showing its title alone is noise. */
+const hasBody = (content: unknown) =>
+  Array.isArray(content) &&
+  content.some(
+    (b: any) =>
+      b?._type !== 'block' ||
+      (Array.isArray(b.children) && b.children.some((c: any) => text(c?.text).trim())),
+  );
+const shown = widgets.filter(
+  (w) => w.type !== 'content' || hasBody(w.content),
+);
+const missing = [
+  ...new Set((await Promise.all(shown.map((w) => unrenderedTypes(w.content)))).flat()),
+];
+const inner = { type: { 'vitops_widgetArea': Nothing } };
+---
+
+{
+  shown.length > 0 && (
+    <div id={id} class:list={['widget-area', themed?.className, className]} style={joinStyle(themed?.style, style)} data-widget-area={area?.name}>
+      {delegated ? (
+        <StockWidgetArea name={name} />
+      ) : (
+        <>
+        {shown.map((widget) => (
+          <section class="widget" data-widget-type={widget.type}>
+            {text(widget.title) && widget.type !== 'menu' && (
+              <Heading class="widget__title font-heading">{widget.title}</Heading>
+            )}
+            {widget.type === 'content' && (
+              <div class="widget__content rhythm">
+                <PortableText value={widget.content} components={inner} />
+              </div>
+            )}
+            {widget.type === 'menu' && menus[widget.id] && (
+              <>
+                {text(widget.title) && <Heading class="widget__title font-heading">{widget.title}</Heading>}
+                <nav class="widget__menu" aria-label={text(widget.title) || area?.label}>
+                  <ul role="list">
+                    {menus[widget.id]!.items.map((item) => {
+                      const href = safeHref(item.url);
+                      return (
+                        href && (
+                          <li>
+                            <a class="link" href={href} title={item.titleAttr || undefined}>
+                              {item.label}
+                            </a>
+                          </li>
+                        )
+                      );
+                    })}
+                  </ul>
+                </nav>
+              </>
+            )}
+          </section>
+        ))}
+        {missing.map((type) => <template data-vitops-unrendered={type} />)}
+        </>
+      )}
+    </div>
+  )
+}

package/src/astro/blocks/Accordion.astro

@@ -21,11 +21,12 @@ const items = rows<Record<string, unknown>>(value.items)
   }))
   .filter((item) => item.summary);
 const group = value.exclusive ? `accordion-${value._key ?? 'group'}` : undefined;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
-    <div class="accordion">
+    <div {...rootAttrs(value, ['accordion'])}>
       {items.map((item) => (
         <details name={group} open={item.open}>
           <summary>{item.summary}</summary>

package/src/astro/blocks/ActionLink.astro

@@ -51,12 +51,13 @@ const classes = [variant, role ? `${variant}-${role}` : null, newTab ? 'link--ex
 // Only render when there is somewhere to go and something to read — a bare icon
 // with no label would be an unlabelled link.
 const renderable = Boolean(label && href);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   renderable && (
     <a
-      class={classes}
+      {...rootAttrs(value, [classes])}
       href={href}
       {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
       {startIcon && (

package/src/astro/blocks/Badges.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * `vitops_badges` — a row of short labels on the framework's `.badge` (static) or `.tag`
+ * pattern. Each row may carry its own tone, falling back to the block's, which is what lets
+ * one block show a pine label beside an amber one. An icon is child order, not a modifier, and
+ * a row with a `href` becomes a link.
+ */
+import { resolveTone } from './tone.ts';
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+import { rootAttrs } from './attrs.ts';
+
+interface Props {
+  /** Base URL of the sprite. Matches VitopsEmdashOptions.wcBase. */
+  spriteBase?: string;
+}
+
+interface Value {
+  items?: unknown;
+  variant?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const { spriteBase = '/vitops' } = Astro.props as Props;
+const kind = text(value.variant) === 'tag' ? 'tag' : 'badge';
+const items = rows<Record<string, unknown>>(value.items)
+  .map((row) => {
+    const own = text(row.tone) || text(row.color);
+    const tone = own ? resolveTone(row.tone, row.color) : resolveTone(value.tone, value.color);
+    return {
+      label: text(row.label),
+      icon: /^[a-z0-9-]+$/.test(text(row.icon)) ? text(row.icon) : '',
+      href: safeHref(row.href),
+      tone,
+    };
+  })
+  .filter((item) => item.label);
+---
+
+  {
+    items.length > 0 && (
+      <ul {...rootAttrs(value, ['cluster'])} role="list">
+        {items.map((item) => {
+          const Tag = item.href ? 'a' : 'span';
+          return (
+            <li>
+              <Tag
+                class:list={[kind, item.tone.style && item.tone.className, item.href && 'link']}
+                href={item.href || undefined}
+                style={item.tone.style || undefined}
+              >
+                {item.icon && (
+                  <span class="icon" aria-hidden="true">
+                    <svg>
+                      <use href={`${spriteBase}/icons.svg#icon-${item.icon}`} />
+                    </svg>
+                  </span>
+                )}
+                {item.label}
+              </Tag>
+            </li>
+          );
+        })}
+      </ul>
+    )
+  }

package/src/astro/blocks/Banner.astro

@@ -10,10 +10,11 @@ interface Value {
 const value = resolveBlockValue<Value>(Astro.props);
 const { message, tone = 'info', dismissible = true } = value;
 const bannerClass = `banner bg-${tone}${dismissible ? ' banner--dismissible' : ''}`;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {message && dismissible && (
-  <wc-dismissable>
+  <wc-dismissable {...rootAttrs(value)}>
     <div class={bannerClass}>
       <div class="banner__content">{message}</div>
       <button class="banner__close" data-dismiss aria-label="Dismiss">✕</button>
@@ -21,7 +22,7 @@ const bannerClass = `banner bg-${tone}${dismissible ? ' banner--dismissible' : '
   </wc-dismissable>
 )}
 {message && !dismissible && (
-  <div class={bannerClass}>
+  <div {...rootAttrs(value, [bannerClass])}>
     <div class="banner__content">{message}</div>
   </div>
 )}

package/src/astro/blocks/Callout.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * A call-to-action band on the framework's `.callout` pattern. Not `vitops.banner`: that is
+ * A call-to-action band on the framework's `.callout` pattern. Not `vitops_banner`: that is
  * a dismissible announcement, this is content that stays. The heading is a real heading at
  * the editor's `level`; colour is the shared tone convention, tinted by default and filled
  * with the role's solid when `solid` is on.
@@ -33,18 +33,13 @@ const secondaryHref = safeHref(value.secondaryHref);
 const hasActions = Boolean((primaryLabel && primaryHref) || (secondaryLabel && secondaryHref));
 const Heading = headingTag(value.level, 2);
 const tone = resolveTone(value.tone, value.color);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (heading || body) && (
     <div
-      class:list={[
-        'callout',
-        tone.className,
-        value.solid && 'tone--solid',
-        value.align === 'center' && 'callout--center',
-      ]}
-      style={joinStyle(tone.style)}
+      {...rootAttrs(value, ['callout', tone.className, value.solid && 'tone--solid', value.align === 'center' && 'callout--center'], joinStyle(tone.style))}
     >
       <div class="callout__body">
         {heading && <Heading class="callout__title font-title">{heading}</Heading>}

package/src/astro/blocks/Cards.astro

@@ -19,7 +19,7 @@
 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 { joinStyle, resolveTone, rowTone } from './tone.ts';
 import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
 
 interface Value {
@@ -43,6 +43,7 @@ const cards = rows<Record<string, unknown>>(value.cards)
     checklist: lines(row.checklist),
     ctaLabel: text(row.ctaLabel),
     ctaHref: safeHref(row.ctaHref),
+    style: rowTone(row),
   }))
   .filter((card) => card.title || card.body || card.image);
 const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)));
@@ -50,18 +51,19 @@ const panel = value.variant === 'panel';
 const Heading = headingTag(value.level, 3);
 const tone = resolveTone(value.tone, value.color);
 const Grid = panel ? Subgrid : Cards;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   cards.length > 0 && (
-    <Grid style={`--subgrid-cols: ${columns}`}>
+    <Grid {...rootAttrs(value, [], `--subgrid-cols: ${columns}`)}>
       {cards.map((card) => (
         <li
           class:list={['card', 'subgrid-card', panel && tone.className]}
-          style={panel ? joinStyle(tone.style) : undefined}
+          style={panel ? joinStyle(tone.style, card.style) : card.style}
         >
           {card.image && <img src={card.image} alt={card.imageAlt} loading="lazy" />}
-          {card.title && <Heading class="font-heading">{card.title}</Heading>}
+          {card.title && <Heading class="card__title font-heading">{card.title}</Heading>}
           {card.body && (
             <p>
               <RichText text={card.body} />

package/src/astro/blocks/Carousel.astro

@@ -39,6 +39,7 @@ 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;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
@@ -50,6 +51,7 @@ const autoplay = Number(value.autoplay) || 0;
       aspect={value.aspect || '16 / 9'}
       slides={slides}
       id={id}
+      {...rootAttrs(value)}
     />
   )
 }

package/src/astro/blocks/CopyButton.astro

@@ -9,14 +9,15 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const { text, label = 'Copy', display = 'code-block' } = value;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {text && display === 'code-block' && (
-  <div class="copy">
+  <div {...rootAttrs(value, ['copy'])}>
     <pre><code>{text}</code></pre>
     <wc-copy value={text} label={label}>{label}</wc-copy>
   </div>
 )}
 {text && display === 'inline' && (
-  <wc-copy value={text} label={label}><code>{text}</code></wc-copy>
+  <wc-copy {...rootAttrs(value)} value={text} label={label}><code>{text}</code></wc-copy>
 )}

package/src/astro/blocks/Details.astro

@@ -9,10 +9,11 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const { summary, body, open = false } = value;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {summary && (
-  <details open={open}>
+  <details open={open} {...rootAttrs(value)}>
     <summary>{summary}</summary>
     <p>{body}</p>
   </details>

package/src/astro/blocks/Embed.astro

@@ -33,11 +33,12 @@ 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;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   title && embed && (
-    <div class="embed" style={ratio ? `--embed-ratio: ${ratio}` : undefined}>
+    <div {...rootAttrs(value, ['embed'], ratio ? `--embed-ratio: ${ratio}` : undefined)}>
       <iframe
         class="embed__frame"
         title={title}

package/src/astro/blocks/Entries.astro

@@ -25,6 +25,7 @@ const level = Number(headingTag(value.level, 3).slice(1)) as 2 | 3 | 4 | 5 | 6;
 const breakpoint = /^\d+(\.\d+)?(rem|em|px|ch)$/.test(text(value.breakpoint))
   ? text(value.breakpoint)
   : undefined;
+import { rootAttrs } from './attrs.ts';
 ---
 
-{entries.length > 0 && <Entries entries={entries} level={level} breakpoint={breakpoint} />}
+{entries.length > 0 && <Entries entries={entries} level={level} breakpoint={breakpoint} {...rootAttrs(value)} />}

package/src/astro/blocks/Form.astro

@@ -64,11 +64,12 @@ const tone = resolveTone(value.tone, value.color);
 const successTone = resolveTone('success', '');
 const errorTone = resolveTone('danger', '');
 const hasForm = fields.length > 0;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   hasForm && (
-    <div class:list={['form-block', 'rhythm', tone.className]} style={joinStyle(tone.style)}>
+    <div {...rootAttrs(value, ['form-block', 'rhythm', tone.className], joinStyle(tone.style))}>
       {heading && <Heading class="font-heading">{heading}</Heading>}
       {intro && <p>{intro}</p>}
 
@@ -122,6 +123,24 @@ const hasForm = fields.length > 0;
                 </p>
               )}
             </div>
+          ) : f.type === 'checkboxes' ? (
+            <fieldset class="form-group" aria-describedby={describedby}>
+              <legend class="form-group__label">{f.label}</legend>
+              {f.options.map((o) => (
+                <label class="custom-check">
+                  <input type="checkbox" name={f.name} value={o} />
+                  <span class="custom-check__box">
+                    <span class="custom-check__indicator custom-check__indicator--check" />
+                  </span>
+                  <span>{o}</span>
+                </label>
+              ))}
+              {f.help && (
+                <p id={`${f.id}-help`} class="form-group__helper">
+                  {f.help}
+                </p>
+              )}
+            </fieldset>
           ) : (
             <div class="form-group">
               <label class="form-group__label" for={f.id}>

package/src/astro/blocks/Gallery.astro

@@ -25,6 +25,7 @@ const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.i
     return src ? [{ src, alt: text(row.alt), ...(caption ? { caption } : {}) }] : [];
   },
 );
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
@@ -33,6 +34,7 @@ const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.i
       label={text(value.label) || 'Gallery'}
       images={images}
       id={id}
+      {...rootAttrs(value)}
       aspect={text(value.aspect) || undefined}
       loop={Boolean(value.loop)}
     />

package/src/astro/blocks/Hero.astro

@@ -8,10 +8,10 @@
  * Flat fields, because a block cannot contain other blocks.
  */
 import RichText from './RichText.astro';
-import { joinStyle, resolveTone } from './tone.ts';
+import { joinStyle, resolveTone, rowTone } from './tone.ts';
 import {
   accentRuns,
-  headingTag,
+  outlineTag,
   resolveBlockValue,
   rows,
   safeHref,
@@ -39,7 +39,9 @@ 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 Heading = outlineTag(value.level, 1);
+// A hero titled `h1` puts its option cards one level down, at `h2`.
+const CardHeading = Heading === 'h1' ? 'h2' : 'h3';
 const body = text(value.body);
 const primaryLabel = text(value.primaryLabel);
 const primaryHref = safeHref(value.primaryHref);
@@ -55,13 +57,18 @@ const cards = rows<Record<string, unknown>>(value.cards)
     body: text(row.body),
     href: safeHref(row.href),
     linkLabel: text(row.linkLabel) || 'Learn more',
+    eyebrow: text(row.eyebrow),
+    ctaLabel: text(row.ctaLabel),
+    ctaHref: safeHref(row.ctaHref),
+    style: rowTone(row),
   }))
   .filter((card) => card.title || card.body);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (heading || body) && (
-    <section class={tone.style ? tone.className : undefined} style={joinStyle(tone.style)}>
+    <section {...rootAttrs(value, [tone.style && tone.className], joinStyle(tone.style))}>
       <div class={split ? 'split split-1-2' : 'centered'}>
         <div class="rhythm">
           {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}
@@ -93,18 +100,27 @@ const cards = rows<Record<string, unknown>>(value.cards)
       {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>}
+            <li class:list={['card', 'subgrid-card', card.style && 'tone']} style={card.style}>
+              {card.eyebrow && <p class="font-eyebrow">{card.eyebrow}</p>}
+              {card.title && <CardHeading class="font-heading">{card.title}</CardHeading>}
               {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>
+              {card.ctaLabel && card.ctaHref ? (
+                <p class="subgrid-card__footer">
+                  <a class="cta" href={card.ctaHref}>
+                    {card.ctaLabel}
+                  </a>
+                </p>
+              ) : (
+                card.href && (
+                  <a class="link stretched-link" href={card.href}>
+                    {card.linkLabel}
+                    {card.title && <span class="sr-only">: {card.title}</span>}
+                  </a>
+                )
               )}
             </li>
           ))}

package/src/astro/blocks/ImageCompare.astro

@@ -15,10 +15,11 @@ const { beforeAlt = '', beforeLabel = 'Before', afterAlt = '', afterLabel = 'Aft
 // 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);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {before && after && (
-  <wc-image-compare before-label={beforeLabel} after-label={afterLabel}>
+  <wc-image-compare {...rootAttrs(value)} before-label={beforeLabel} after-label={afterLabel}>
     <img slot="before" src={before} alt={beforeAlt} loading="lazy" />
     <img slot="after" src={after} alt={afterAlt} loading="lazy" />
   </wc-image-compare>

package/src/astro/blocks/Logos.astro

@@ -1,9 +1,10 @@
 ---
 /**
- * A still row of partner/client marks on the framework's `.logos` pattern. `vitops.marquee`
+ * 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.
+ * link or a fact the page silently drops. An entry with a name and no image renders the name as
+ * text in the same list (`.logos__name`), for partners who have no wordmark.
  */
 import { resolveBlockValue, rows, safeHref, text } from './value.ts';
 
@@ -20,26 +21,28 @@ 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);
+  .filter((logo) => logo.image || logo.alt);
 const height = HEIGHTS[text(value.size)];
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   logos.length > 0 && (
     <ul
-      class:list={['logos', value.grayscale && 'logos--grayscale']}
+      {...rootAttrs(value, ['logos', value.grayscale && 'logos--grayscale'], height ? `--logos-height: ${height}` : undefined)}
       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" />
+              {logo.image ? <img src={logo.image} alt={logo.alt} loading="lazy" /> : <span class="logos__name font-heading">{logo.alt}</span>}
             </a>
-          ) : (
+          ) : logo.image ? (
             <img src={logo.image} alt={logo.alt} loading="lazy" />
+          ) : (
+            <span class="logos__name font-heading">{logo.alt}</span>
           )}
         </li>
       ))}

package/src/astro/blocks/Marquee.astro

@@ -21,11 +21,12 @@ const items = rows<Record<string, unknown>>(value.items)
     alt: text(row.alt),
   }))
   .filter((item) => item.text || item.image);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
-    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)}>
+    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)} {...rootAttrs(value)}>
       {items.map((item) =>
         item.image ? (
           <img src={item.image} alt={item.alt} loading="lazy" />

package/src/astro/blocks/Nav.astro

@@ -60,13 +60,13 @@ const tone = resolveTone(value.tone, value.color);
 const toned = Boolean(value.tone || value.color);
 const trimmed = trimDepth(items, depth);
 const current = Astro.url.pathname;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
     <div
-      class:list={['navblock', toned && tone.className]}
-      style={toned ? joinStyle(tone.style) : undefined}
+      {...rootAttrs(value, ['navblock', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
     >
       {heading && <Heading class="font-heading">{heading}</Heading>}
       {variant === 'sitenav' ? (

package/src/astro/blocks/NavTree.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * One `<ul class="navlist">` level of `vitops.nav`, recursing for sub-links. Internal — import
+ * One `<ul class="navlist">` level of `vitops_nav`, recursing for sub-links. Internal — import
  * `Nav.astro`. Plain nested lists, no disclosure widgets: a page-body menu is read, not
  * collapsed, so there is no state to manage and no runtime JS. The `.navlist` pattern is
  * `patterns/sitenav.css`'s (all formats).