@cogenta/theme-entreprise 1.1.2

package/src/render/blocks/accordion.ts

@@ -0,0 +1,60 @@
+import type { AccordionBlock, AccordionItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). Reuses `faq`'s zero-JS `<details>`/`<summary>`
+ * mechanics — expanding, keyboard operation and the expanded state
+ * announced to assistive technology all come from the browser — but with a
+ * markup vocabulary and class names of its own (`cg-panels`, not
+ * `cg-faq`) so the two blocks can diverge visually later without one
+ * depending on the other: "accordion" and "frequently asked question" are
+ * different editorial intents even where the underlying question/answer
+ * shape coincides.
+ *
+ * Where `faq` numbers its rows, this one reads as a stack of bordered
+ * panels with a rotating chevron mark, closer to a features/specification
+ * accordion than a support page.
+ */
+function renderItem(item: AccordionItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-panels__item' },
+    h(
+      'details',
+      { class: 'cg-panels__details' },
+      h(
+        'summary',
+        { class: 'cg-panels__question' },
+        h('span', { class: 'cg-panels__question-text' }, item.question),
+        h('span', { class: 'cg-panels__chevron', 'aria-hidden': 'true' }),
+      ),
+      h('div', { class: 'cg-panels__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderAccordion(block: AccordionBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-panels', 'data-block': 'accordion' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('accordion') ?? 'h2',
+          { class: 'cg-panels__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-panels__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}

package/src/render/blocks/collection-list.ts

@@ -0,0 +1,122 @@
+import type { CollectionListBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  buildCollectionListQuery,
+  type ContentEntry,
+  entryDate,
+  entryExcerpt,
+  entryHref,
+  entryImage,
+  entryTitle,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  nestedHeadingTag,
+  type RenderContext,
+  renderImageSource,
+} from '@cogenta/theme-kit'
+
+/**
+ * The only block of the seventeen that reads data at render time — contract B
+ * marks it `runtime: 'server'` for that reason. The read is *not* done
+ * here: `query` builds the request from the block's own fields
+ * (`@cogenta/theme-kit`'s `buildCollectionListQuery`, shared across every
+ * theme), the caller awaits `ctx.content.list(...)` before rendering
+ * starts, and this function stays a pure function of the entries handed to
+ * it.
+ */
+export { buildCollectionListQuery as query }
+
+/**
+ * A card in every layout: a 16:9 cover on top (`entryImage`, the same
+ * `coverImage`/`cover`/… convention every entry-carrying block on this site
+ * reads), then title and excerpt below it — the "services/insights card"
+ * register a B2B site's listing pages use, replacing the previous ledger
+ * row (a date rail beside plain text, no visual at all). An entry with no
+ * image still renders a complete card; the cover slot is simply absent
+ * rather than a placeholder box standing in for one.
+ */
+function renderCover(entry: ContentEntry, ctx: RenderContext): HtmlElement | null {
+  const cover = entryImage(entry, ctx)
+  if (cover === undefined) return null
+  return h(
+    'span',
+    { class: 'cg-list__cover' },
+    renderImageSource(cover, { className: 'cg-list__cover-image', loading: 'lazy' }),
+  )
+}
+
+function renderEntry(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const date = entryDate(entry)
+  const excerpt = entryExcerpt(entry)
+  return h(
+    'li',
+    { class: 'cg-list__row' },
+    renderCover(entry, ctx),
+    h(
+      'div',
+      { class: 'cg-list__body' },
+      heading(
+        tag,
+        { class: 'cg-list__title' },
+        h('a', { class: 'cg-list__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
+      ),
+      excerpt === undefined ? null : h('p', { class: 'cg-list__excerpt' }, excerpt),
+      date === undefined
+        ? null
+        : h(
+            'time',
+            { class: 'cg-list__date', datetime: date },
+            new Intl.DateTimeFormat(ctx.locale, { month: 'short', day: '2-digit' }).format(
+              new Date(date),
+            ),
+          ),
+    ),
+  )
+}
+
+export function renderCollectionList(
+  block: CollectionListBlock,
+  ctx: RenderContext,
+  entries: readonly ContentEntry[],
+): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const entryTag = nestedHeadingTag('collectionList', hasTitle)
+  const items =
+    entries.length === 0
+      ? h('p', { class: 'cg-list__empty' }, ctx.t('collection.empty'))
+      : h(
+          'ul',
+          { class: 'cg-list__items' },
+          entries.map((entry) => renderEntry(entry, ctx, entryTag)),
+        )
+
+  return h(
+    'section',
+    {
+      class: 'cg-list',
+      'data-block': 'collectionList',
+      'data-layout': block.layout,
+    },
+    hasTitle
+      ? heading(
+          blockHeadingTag('collectionList') ?? 'h2',
+          { class: 'cg-list__title-heading', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-list__viewport',
+            role: 'region',
+            'aria-label': block.title ?? ctx.t('collection.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/cta.ts

@@ -0,0 +1,48 @@
+import type { CtaBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * A full-width flat band, not a garish sales strip: the ask on the left and
+ * the action on the right, separated by a vertical rule on wide screens —
+ * the layout a serious B2B site uses for "talk to us", never centred copy
+ * stacked above a button. `.cg-banner__inner` re-centres the ask/action
+ * pair to the page's own measure while the flat tinted fill itself goes
+ * edge to edge (`blocks.css`).
+ */
+export function renderCta(block: CtaBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-banner', 'data-block': 'cta' },
+    h(
+      'div',
+      { class: 'cg-banner__inner' },
+      h(
+        'div',
+        { class: 'cg-banner__content' },
+        heading(
+          blockHeadingTag('cta') ?? 'h2',
+          { class: 'cg-banner__title', 'data-field': 'title' },
+          block.title,
+        ),
+        block.text === undefined
+          ? null
+          : h('p', { class: 'cg-banner__text', 'data-field': 'text' }, block.text),
+      ),
+      h(
+        'div',
+        { class: 'cg-banner__actions' },
+        // `actions` is required and non-empty for a `cta`, so the list is
+        // always rendered; the null branch stays reachable only through
+        // invalid data.
+        actionList(ctx, block.actions, block.title),
+      ),
+    ),
+  )
+}

package/src/render/blocks/embed.ts

@@ -0,0 +1,115 @@
+import type { EmbedBlock } from '@cogenta/blocks'
+import { aspectRatio, type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * Nothing here contacts a third party before the visitor has consented.
+ *
+ * When `consentRequired` is true the block renders a self-contained card and
+ * an outbound link — no `<iframe>`, no `<script>`, no preconnect, no poster
+ * image fetched from the provider. An embed that "only" loads a thumbnail
+ * has already handed the visitor's IP address and a cookie to the provider,
+ * which is the exact transfer consent was supposed to gate.
+ *
+ * The theme ships no consent *button*, because it ships no JavaScript:
+ * granting consent is a site-wide decision that belongs to the consent
+ * layer, not to a block. Until that layer exists, the card is the honest
+ * rendering — it says what would be loaded and lets the visitor go there
+ * deliberately. The card is framed the same way `mediaFigure` and `gallery`
+ * are (a thin bordered plate with a small provider tag), so the three read
+ * as one family of "media placeholder" treatments.
+ */
+
+/** `null` means "this provider has no embeddable frame we trust". */
+function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string | null {
+  const url = URL.parse(rawUrl)
+  if (url === null) return null
+  const segments = url.pathname.split('/').filter((segment) => segment !== '')
+
+  switch (provider) {
+    case 'youtube': {
+      // `youtube-nocookie.com` is the privacy-preserving host, and the only
+      // one this theme will point an iframe at.
+      const id = url.hostname.endsWith('youtu.be')
+        ? segments[0]
+        : (url.searchParams.get('v') ?? segments[1])
+      return id === undefined || id === null ? null : `https://www.youtube-nocookie.com/embed/${id}`
+    }
+    case 'vimeo': {
+      const id = segments.find((segment) => /^\d+$/.test(segment))
+      return id === undefined ? null : `https://player.vimeo.com/video/${id}`
+    }
+    case 'dailymotion': {
+      const id = url.hostname.endsWith('dai.ly') ? segments[0] : segments[segments.length - 1]
+      return id === undefined ? null : `https://geo.dailymotion.com/player.html?video=${id}`
+    }
+    case 'spotify': {
+      const [kind, id] = segments
+      return kind === undefined || id === undefined
+        ? null
+        : `https://open.spotify.com/embed/${kind}/${id}`
+    }
+    case 'soundcloud':
+      return `https://w.soundcloud.com/player/?url=${encodeURIComponent(rawUrl)}`
+    default:
+      // bluesky, mastodon, other: a post embed is a script tag, which this
+      // theme does not load. The link card is the rendering.
+      return null
+  }
+}
+
+function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-embed__placeholder' },
+    h('p', { class: 'cg-embed__provider', 'aria-hidden': 'true' }, block.provider),
+    h('p', { class: 'cg-embed__notice' }, reason),
+    h(
+      'a',
+      {
+        class: 'cg-embed__link',
+        href: ctx.link(block.url),
+        rel: 'noopener noreferrer nofollow',
+      },
+      ctx.t('embed.open', { provider: block.provider }),
+    ),
+  )
+}
+
+export function renderEmbed(block: EmbedBlock, ctx: RenderContext): HtmlElement {
+  const source = block.consentRequired ? null : frameSource(block.provider, block.url)
+  // Video providers are 16:9 unless the editor framed them otherwise;
+  // without a ratio the frame would collapse and shift the layout as it
+  // loads.
+  const ratio = aspectRatio(block.ratio) ?? '16 / 9'
+
+  return h(
+    'div',
+    {
+      class: 'cg-embed',
+      'data-block': 'embed',
+      'data-provider': block.provider,
+      'data-consent': block.consentRequired ? 'required' : 'not-required',
+      style: `--cg-ratio:${ratio}`,
+    },
+    source === null
+      ? consentCard(
+          block,
+          ctx,
+          block.consentRequired
+            ? ctx.t('embed.consentRequired', { provider: block.provider })
+            : ctx.t('embed.unsupported', { provider: block.provider }),
+        )
+      : h('iframe', {
+          class: 'cg-embed__frame',
+          src: source,
+          // An iframe with no accessible name is announced as "frame" and
+          // nothing else. WCAG 4.1.2, and the single most common embed
+          // defect.
+          title: ctx.t('embed.title', { provider: block.provider }),
+          loading: 'lazy',
+          referrerpolicy: 'strict-origin-when-cross-origin',
+          allow: 'accelerometer; clipboard-write; encrypted-media; picture-in-picture; fullscreen',
+          allowfullscreen: true,
+        }),
+  )
+}

package/src/render/blocks/faq.ts

@@ -0,0 +1,61 @@
+import type { FaqBlock, FaqItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  type RenderContext,
+  renderRichText,
+} from '@cogenta/theme-kit'
+
+/**
+ * `<details>`/`<summary>` rather than a scripted accordion: expanding,
+ * keyboard operation, and the expanded state announced to assistive
+ * technology all come from the browser, at zero bytes of JavaScript.
+ *
+ * Each row carries a numeral (`01`, `02`, …) ahead of the question — the
+ * same indexing language `featureGrid` uses — and the disclosure affordance
+ * is a plus/minus mark drawn from two CSS borders, not an icon font.
+ *
+ * The question is plain text inside `<summary>`, never a heading: a heading
+ * nested in a `<summary>` renders inconsistently across screen readers, and
+ * the questions are already reachable as a list under the block's own
+ * heading.
+ */
+function renderItem(item: FaqItem, ctx: RenderContext, index: number): HtmlElement {
+  const number = String(index + 1).padStart(2, '0')
+  return h(
+    'li',
+    { class: 'cg-faq__item' },
+    h(
+      'details',
+      { class: 'cg-faq__details' },
+      h(
+        'summary',
+        { class: 'cg-faq__question' },
+        h('span', { class: 'cg-faq__index', 'aria-hidden': 'true' }, number),
+        h('span', { class: 'cg-faq__question-text' }, item.question),
+      ),
+      h('div', { class: 'cg-faq__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-faq', 'data-block': 'faq' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('faq') ?? 'h2',
+          { class: 'cg-faq__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-faq__items' },
+      block.items.map((item, index) => renderItem(item, ctx, index)),
+    ),
+  )
+}

package/src/render/blocks/feature-grid.ts

@@ -0,0 +1,73 @@
+import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  href,
+  nestedHeadingTag,
+  type RenderContext,
+  renderIcon,
+} from '@cogenta/theme-kit'
+
+/**
+ * This theme's "our services" section — a card grid, each card led by a
+ * real inline glyph (`renderIcon`) inside a flat, accent-tinted square, the
+ * B2B "capability card" register a consultancy or software vendor's
+ * services page uses, replacing the numbered ledger rows this block used to
+ * render (a plain list read as a table of contents, not as a services
+ * pitch a visitor scans in one pass).
+ *
+ * Capped at three columns on a wide screen — a six-item grid staying 3×2
+ * rather than drifting to four columns plus two orphans, the same
+ * discipline `theme-saas`'s own `featureGrid` holds.
+ *
+ * As in every other theme, the item's title carries the link so the link's
+ * accessible name is the feature's own name (WCAG 2.4.4) — the block has no
+ * separate label field to write a "learn more" with anyway.
+ */
+function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  const title =
+    item.link === undefined
+      ? heading(tag, { class: 'cg-service__title' }, item.title)
+      : heading(
+          tag,
+          { class: 'cg-service__title' },
+          h('a', { class: 'cg-service__link', href: href(ctx, item.link) }, item.title),
+        )
+  return h(
+    'li',
+    { class: 'cg-service' },
+    item.icon === undefined
+      ? null
+      : h(
+          'span',
+          { class: 'cg-service__icon', 'data-icon': item.icon, 'aria-hidden': 'true' },
+          renderIcon(item.icon),
+        ),
+    title,
+    item.text === undefined ? null : h('p', { class: 'cg-service__text' }, item.text),
+  )
+}
+
+export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
+  return h(
+    'section',
+    { class: 'cg-services', 'data-block': 'featureGrid' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('featureGrid') ?? 'h2',
+          { class: 'cg-services__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-services__items' },
+      block.items.map((item) => renderItem(item, ctx, itemTag)),
+    ),
+  )
+}

package/src/render/blocks/gallery.ts

@@ -0,0 +1,48 @@
+import type { GalleryBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * Ships **no JavaScript**. A scroll-snapping list gives touch swiping,
+ * trackpad scrolling and — because the list is focusable and labelled —
+ * arrow-key scrolling, with none of the failure modes of a scripted
+ * carousel: no auto-advance to fight (WCAG 2.2.2), no focus stolen from an
+ * off-screen slide, and it still works before any styling loads.
+ *
+ * Each tile is a thin-bordered plate rather than a shadowed, fully-rounded
+ * card — consistent with the framed treatment `mediaFigure` and `embed`
+ * use, so a page mixing all three reads as one system.
+ */
+export function renderGallery(block: GalleryBlock, ctx: RenderContext): HtmlElement {
+  const items = h(
+    'ul',
+    { class: 'cg-gallery__items' },
+    block.items.map((item) =>
+      h(
+        'li',
+        { class: 'cg-gallery__item' },
+        image(ctx, item.media, { sizes: '(min-width: 48rem) 22rem, 60vw' }),
+      ),
+    ),
+  )
+
+  return h(
+    'section',
+    {
+      class: 'cg-gallery',
+      'data-block': 'gallery',
+      'data-layout': block.layout,
+    },
+    block.layout === 'carousel'
+      ? h(
+          'div',
+          {
+            class: 'cg-gallery__viewport',
+            role: 'region',
+            'aria-label': ctx.t('gallery.carousel'),
+            tabindex: '0',
+          },
+          items,
+        )
+      : items,
+  )
+}

package/src/render/blocks/hero.ts

@@ -0,0 +1,60 @@
+import type { HeroBlock } from '@cogenta/blocks'
+import {
+  actionList,
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * The hero carries the page's `h1` (contract B: `headingLevel: 'h1'`), so
+ * `renderPage` relies on it to avoid emitting a second one.
+ *
+ * Structurally distinct from a centred/split "marketing" hero: the eyebrow,
+ * title, subtitle and actions sit in a single left-aligned column with a
+ * vertical accent rule (`cg-hero__mark`) standing beside the copy — the
+ * "confident report cover" read the aesthetic direction asks for — while the
+ * media sits in its own bordered frame with corner marks, never behind a
+ * decorative gradient wash.
+ */
+export function renderHero(block: HeroBlock, ctx: RenderContext): HtmlElement {
+  const tag = blockHeadingTag('hero') ?? 'h1'
+  return h(
+    'section',
+    { class: 'cg-hero', 'data-block': 'hero' },
+    h(
+      'div',
+      { class: 'cg-hero__intro' },
+      h('span', { class: 'cg-hero__mark', 'aria-hidden': 'true' }),
+      h(
+        'div',
+        { class: 'cg-hero__copy' },
+        block.eyebrow === undefined
+          ? null
+          : h('p', { class: 'cg-hero__eyebrow', 'data-field': 'eyebrow' }, block.eyebrow),
+        heading(tag, { class: 'cg-hero__title', 'data-field': 'title' }, block.title),
+        block.subtitle === undefined
+          ? null
+          : h('p', { class: 'cg-hero__subtitle', 'data-field': 'subtitle' }, block.subtitle),
+        actionList(ctx, block.actions, ctx.t('hero.actions')),
+      ),
+    ),
+    block.media === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-hero__frame' },
+          // The only image above the fold by construction, so the only one
+          // that must not be lazy — a lazy-loaded LCP element is a measured
+          // Lighthouse regression, not a theoretical one.
+          image(ctx, block.media, {
+            className: 'cg-hero__media',
+            loading: 'eager',
+            sizes: '(min-width: 64rem) 46vw, 100vw',
+          }),
+        ),
+  )
+}

package/src/render/blocks/logo-strip.ts

@@ -0,0 +1,36 @@
+import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+
+/**
+ * `blocks@2.0` (RFC 0001). The lighter-weight "as seen in" / social-proof row
+ * next to `logos`: no per-logo name or link, so no accessible-name field to
+ * require — each image's own alt text (set once, in the media library)
+ * names it, exactly as `logos` already falls back to when a link is absent.
+ *
+ * Unlike `logos`'s held-back-until-hovered grayscale treatment, this strip
+ * renders every mark at full colour and even weight in a single row — the
+ * quieter, denser "as seen in" convention, distinct from the client-cards
+ * feel `logos` is built for.
+ */
+function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-logo-band__item' },
+    image(ctx, item.media, { className: 'cg-logo-band__image', variant: { fit: 'contain' } }),
+  )
+}
+
+export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'figure',
+    { class: 'cg-logo-band', 'data-block': 'logoStrip' },
+    h(
+      'ul',
+      { class: 'cg-logo-band__items' },
+      block.logos.map((item) => renderItem(item, ctx)),
+    ),
+    block.caption === undefined
+      ? null
+      : h('figcaption', { class: 'cg-logo-band__caption', 'data-field': 'caption' }, block.caption),
+  )
+}

package/src/render/blocks/logos.ts

@@ -0,0 +1,60 @@
+import type { LogoItem, LogosBlock } from '@cogenta/blocks'
+import {
+  blockHeadingTag,
+  type HtmlElement,
+  h,
+  heading,
+  image,
+  type RenderContext,
+} from '@cogenta/theme-kit'
+
+/**
+ * A "trusted by" client strip. Contract B says the organisation's name **is**
+ * the accessible name of the link, so the logo image carries it as `alt`
+ * text when the media entity has none, and no visually hidden duplicate is
+ * added: a link whose only content is an image with `alt` text is already
+ * named.
+ *
+ * The restrained, grayscale-leaning treatment (`filter: grayscale()` in the
+ * stylesheet) is the "held back until hovered" client-logo language the
+ * aesthetic direction calls for — a `filter`, never `grayscale` baked into
+ * the media itself, since the underlying asset still arrives as a real
+ * `<img>` from `image()`.
+ */
+function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
+  const logo = image(ctx, item.media, {
+    className: 'cg-clients__logo',
+    altFrom: item.name,
+    variant: { fit: 'contain' },
+  })
+  return h(
+    'li',
+    { class: 'cg-clients__item' },
+    item.url === undefined
+      ? logo
+      : h(
+          'a',
+          { class: 'cg-clients__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
+          logo,
+        ),
+  )
+}
+
+export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-clients', 'data-block': 'logos' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('logos') ?? 'h2',
+          { class: 'cg-clients__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-clients__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}