@cogenta/theme-portfolio 1.1.2 → 1.3.3

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

@@ -1,134 +1,100 @@
 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'
+import { section, sectionHead } from '../layout.js'
+import { renderIndexRow, renderWorkCard, workFromEntry } from '../work.js'
+
+export { buildCollectionListQuery as query }
 
 /**
- * The only block of the seventeen that reads data at render time — contract
- * B marks it `runtime: 'server'` for that reason.
+ * A listing of work, in one of three forms taken from the layout the editor
+ * chose in contract B, never from a setting this theme invents:
  *
- * The read is *not* done here. `query` builds the request
- * (`@cogenta/theme-kit`'s `buildCollectionListQuery`, shared across every
- * theme since it derives purely from the block's own fields), the caller
- * awaits `ctx.content.list(...)` before rendering starts, and this function
- * stays a pure function of the entries it is handed.
+ * - `grid` is **the work grid**: an asymmetric sequence on twelve columns,
+ *   six places long. A large image across seven columns with a smaller one
+ *   across four, dropped lower, beside it; a full-width image; the pair again
+ *   mirrored; a full-width image. Every cover keeps the same 3:2 shape, so
+ *   the asymmetry comes from the columns and the drop, never from cropping
+ *   one project differently from the next. The pattern lives in `work.css`,
+ *   keyed on each item's `data-place`.
+ * - `list` is **the index**: one ruled row per project, title, client,
+ *   discipline and year in columns.
+ * - `carousel` is **a strip**: cards side by side at one width, scrolling on
+ *   any screen, a focusable and labelled region. No script.
  *
- * `list` keeps this theme's original register — a numbered mono index, the
- * title set at feature-headline scale, the date pushed to the far edge —
- * unchanged since L23. `grid`/`carousel` (`theme@1.4`) retile the same
- * entries into full-bleed project cards instead: a cover (`entryImage`,
- * 4:3), the title in display type, and — read straight off the raw
- * `ContentEntry` this block's entries already are, never invented — the
- * entry's own `role`/`year` fields as a meta line when a collection happens
- * to declare them (the `portfolio` blueprint's `project` does; any other
- * collection simply shows no meta line).
+ * An empty list keeps its label and says so in one line.
  */
-export { buildCollectionListQuery as query }
 
-function rawText(entry: ContentEntry, field: string): string | undefined {
-  const value = entry[field]
-  return typeof value === 'string' && value.trim() !== '' ? value : undefined
+const PLACES = 6
+
+function sizesFor(place: number): string {
+  if (place === 3 || place === 0) return '(min-width: 64rem) 92rem, 100vw'
+  if (place === 1 || place === 5) return '(min-width: 64rem) 54rem, 100vw'
+  return '(min-width: 64rem) 30rem, 100vw'
 }
 
-/** `role`/`year`, read straight off the entry — the "raw field" meta line a grid card shows when the collection behind it has them. */
-function renderCardMeta(entry: ContentEntry): HtmlElement | null {
-  const role = rawText(entry, 'role')
-  const year = rawText(entry, 'year')
-  if (role === undefined && year === undefined) return null
+function grid(entries: readonly ContentEntry[], ctx: RenderContext, titled: boolean): HtmlElement {
+  const tag = nestedHeadingTag('collectionList', titled)
   return h(
-    'p',
-    { class: 'cg-collection__meta' },
-    role === undefined ? null : h('span', { class: 'cg-collection__meta-role' }, role),
-    year === undefined ? null : h('span', { class: 'cg-collection__meta-year' }, year),
+    'ul',
+    { class: 'cg-grid', 'data-count': String(entries.length) },
+    entries.map((entry, index) => {
+      const place = (index + 1) % PLACES
+      return h(
+        'li',
+        { class: 'cg-grid__item', 'data-place': String(place === 0 ? PLACES : place) },
+        renderWorkCard(workFromEntry(entry, ctx), {
+          tag,
+          sizes: sizesFor(place),
+          loading: index < 2 ? 'eager' : 'lazy',
+        }),
+      )
+    }),
   )
 }
 
-function renderCard(
-  entry: ContentEntry,
-  ctx: RenderContext,
-  tag: HeadingTag,
-  index: number,
-): HtmlElement {
-  const cover = entryImage(entry, ctx, { width: 900, height: 675, fit: 'cover' })
+function index(entries: readonly ContentEntry[], ctx: RenderContext, titled: boolean): HtmlElement {
+  const tag = nestedHeadingTag('collectionList', titled)
   return h(
-    'li',
-    { class: 'cg-entry cg-entry--card' },
-    h(
-      'article',
-      { class: 'cg-entry__body' },
-      h(
-        'a',
-        { class: 'cg-entry__cover-link', href: entryHref(entry, ctx), tabindex: -1 },
-        cover === undefined
-          ? h('span', { class: 'cg-entry__cover-empty', 'aria-hidden': 'true' })
-          : renderImageSource(cover, {
-              className: 'cg-entry__cover',
-              sizes: '(min-width: 80rem) 50vw, 100vw',
-            }),
-      ),
-      h(
-        'span',
-        { class: 'cg-entry__index', 'aria-hidden': 'true' },
-        String(index + 1).padStart(2, '0'),
-      ),
-      heading(
-        tag,
-        { class: 'cg-entry__title' },
-        h('a', { class: 'cg-entry__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
-      ),
-      renderCardMeta(entry),
-    ),
+    'ol',
+    { class: 'cg-index', 'data-count': String(entries.length) },
+    entries.map((entry) => renderIndexRow(workFromEntry(entry, ctx), tag)),
   )
 }
 
-function renderRow(
-  entry: ContentEntry,
+function strip(
+  entries: readonly ContentEntry[],
   ctx: RenderContext,
-  tag: HeadingTag,
-  index: number,
+  block: CollectionListBlock,
 ): HtmlElement {
-  const date = entryDate(entry)
-  const excerpt = entryExcerpt(entry)
+  const tag = nestedHeadingTag('collectionList', block.title !== undefined)
   return h(
-    'li',
-    { class: 'cg-entry' },
+    'div',
+    {
+      class: 'cg-strip',
+      role: 'region',
+      'aria-label': block.title ?? ctx.t('collection.carousel'),
+      tabindex: '0',
+    },
     h(
-      'article',
-      { class: 'cg-entry__body' },
-      h(
-        'span',
-        { class: 'cg-entry__index', 'aria-hidden': 'true' },
-        String(index + 1).padStart(2, '0'),
+      'ul',
+      { class: 'cg-strip__items', 'data-count': String(entries.length) },
+      entries.map((entry) =>
+        h(
+          'li',
+          { class: 'cg-strip__item' },
+          renderWorkCard(workFromEntry(entry, ctx), {
+            tag,
+            sizes: '(min-width: 64rem) 34rem, 80vw',
+          }),
+        ),
       ),
-      heading(
-        tag,
-        { class: 'cg-entry__title' },
-        h('a', { class: 'cg-entry__link', href: entryHref(entry, ctx) }, entryTitle(entry, ctx)),
-      ),
-      date === undefined
-        ? null
-        : h(
-            'time',
-            { class: 'cg-entry__date', datetime: date },
-            // Formatted in the rendered locale rather than left as an ISO
-            // string: the machine-readable form is already in `datetime`.
-            new Intl.DateTimeFormat(ctx.locale, { dateStyle: 'long' }).format(new Date(date)),
-          ),
-      excerpt === undefined ? null : h('p', { class: 'cg-entry__excerpt' }, excerpt),
     ),
   )
 }
@@ -138,44 +104,24 @@ export function renderCollectionList(
   ctx: RenderContext,
   entries: readonly ContentEntry[],
 ): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const entryTag = nestedHeadingTag('collectionList', hasTitle)
-  const isTiled = block.layout === 'grid' || block.layout === 'carousel'
-  const renderItem = isTiled ? renderCard : renderRow
-  const items =
+  const titled = block.title !== undefined
+  const form = block.layout === 'list' ? 'index' : block.layout === 'carousel' ? 'strip' : 'grid'
+  const body =
     entries.length === 0
-      ? h('p', { class: 'cg-collection__empty' }, ctx.t('collection.empty'))
-      : h(
-          'ol',
-          { class: 'cg-collection__items' },
-          entries.map((entry, index) => renderItem(entry, ctx, entryTag, index)),
-        )
+      ? h('p', { class: 'cg-empty' }, ctx.t('collection.empty'))
+      : form === 'index'
+        ? index(entries, ctx, titled)
+        : form === 'strip'
+          ? strip(entries, ctx, block)
+          : grid(entries, ctx, titled)
 
-  return h(
+  return section(
     'section',
-    {
-      class: 'cg-block cg-collection',
-      'data-block': 'collectionList',
-      'data-layout': block.layout,
-    },
-    hasTitle
-      ? heading(
-          blockHeadingTag('collectionList') ?? 'h2',
-          { class: 'cg-collection__title', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
-    block.layout === 'carousel'
-      ? h(
-          'div',
-          {
-            class: 'cg-collection__viewport',
-            role: 'region',
-            'aria-label': block.title ?? ctx.t('collection.carousel'),
-            tabindex: '0',
-          },
-          items,
-        )
-      : items,
+    'collectionList',
+    'cg-collection',
+    { 'data-form': form, 'data-collection': block.collection },
+    'div',
+    sectionHead('collectionList', block.title),
+    body,
   )
 }

package/src/render/blocks/cta.ts

@@ -1,5 +1,6 @@
 import type { CtaBlock } from '@cogenta/blocks'
 import {
+  actionLink,
   actionList,
   blockHeadingTag,
   type HtmlElement,
@@ -7,31 +8,42 @@ import {
   heading,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * The one panel on the page that inverts the palette — ink background, paper
- * text — so it reads as a full stop rather than another section. The title
- * is set at the same display scale as the hero: a call to action on a
- * portfolio site is a second headline, not a footnote.
+ * The invitation to get in touch, set the way a studio sets its contact
+ * line: a short title and a sentence, then the first action as a very large
+ * link in the display width, underlined in the one signal colour. Any further
+ * action follows as ordinary underlined words. No box, no band, no button.
  */
 export function renderCta(block: CtaBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  const [first, ...rest] = block.actions
+  const lead =
+    first === undefined
+      ? null
+      : (() => {
+          const link = actionLink(ctx, first)
+          return { ...link, attrs: { ...link.attrs, class: 'cg-action cg-contact__link' } }
+        })()
+  return section(
     'section',
-    { class: 'cg-block cg-cta', 'data-block': 'cta' },
+    'cta',
+    'cg-contact',
+    {},
+    'div',
     h(
       'div',
-      { class: 'cg-cta__frame' },
+      { class: 'cg-contact__copy' },
       heading(
         blockHeadingTag('cta') ?? 'h2',
-        { class: 'cg-cta__title', 'data-field': 'title' },
+        { class: 'cg-contact__title', 'data-field': 'title' },
         block.title,
       ),
       block.text === undefined
         ? null
-        : h('p', { class: 'cg-cta__text', 'data-field': 'text' }, block.text),
-      // `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),
+        : h('p', { class: 'cg-contact__text', 'data-field': 'text' }, block.text),
     ),
+    lead === null ? null : h('p', { class: 'cg-contact__lead' }, lead),
+    actionList(ctx, rest, block.title),
   )
 }

package/src/render/blocks/embed.ts

@@ -1,23 +1,17 @@
 import type { EmbedBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * Nothing here contacts a third party before the visitor has consented.
+ * A film or a recording from a third party, the size a project image would
+ * be: columns 3 to 10 at the block's ratio.
  *
- * When `consentRequired` is true the block renders a self-contained card and
- * an outbound link — no `<iframe>`, no script tag, 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. The card carries a bracketed provider tag in the
- * mono register — `[ youtube ]` — the theme's own visual shorthand for
- * "something external belongs here".
+ * Nothing here contacts a third party before the visitor consents: when
+ * `consentRequired` is set, or the provider has no cookie-free frame source,
+ * a notice renders in the frame's place instead of an `<iframe>`, holding the
+ * same shape: a hairline frame, a small label, one sentence and one arrow
+ * link. No preconnect, no thumbnail fetched from the provider.
  */
-
-/** `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
@@ -25,8 +19,6 @@ function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string |
 
   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])
@@ -49,22 +41,20 @@ function frameSource(provider: EmbedBlock['provider'], rawUrl: string): string |
     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 {
+function notice(block: EmbedBlock, ctx: RenderContext, reason: string): HtmlElement {
   return h(
     'div',
-    { class: 'cg-embed__placeholder' },
-    h('span', { class: 'cg-embed__tag' }, `[ ${block.provider} ]`),
-    h('p', { class: 'cg-embed__notice' }, reason),
+    { class: 'cg-embed__notice' },
+    h('p', { class: 'cg-embed__label' }, ctx.t('embed.label')),
+    h('p', { class: 'cg-embed__reason' }, reason),
     h(
       'a',
       {
-        class: 'cg-embed__link',
+        class: 'cg-arrow-link cg-embed__link',
         href: ctx.link(block.url),
         rel: 'noopener noreferrer nofollow',
       },
@@ -75,37 +65,39 @@ function consentCard(block: EmbedBlock, ctx: RenderContext, reason: string): Htm
 
 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(
+  return section(
     'div',
+    'embed',
+    'cg-embed',
     {
-      class: 'cg-block 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,
-        }),
+    'div',
+    h(
+      'div',
+      { class: 'cg-embed__frame' },
+      source === null
+        ? notice(
+            block,
+            ctx,
+            block.consentRequired
+              ? ctx.t('embed.consentRequired', { provider: block.provider })
+              : ctx.t('embed.unsupported', { provider: block.provider }),
+          )
+        : h('iframe', {
+            class: 'cg-embed__player',
+            src: source,
+            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

@@ -1,54 +1,45 @@
 import type { FaqBlock, FaqItem } from '@cogenta/blocks'
 import {
-  blockHeadingTag,
+  type HeadingTag,
   type HtmlElement,
   h,
   heading,
+  nestedHeadingTag,
   type RenderContext,
   renderRichText,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `<details>`/`<summary>` rather than a scripted accordion: expanding,
- * keyboard operation, the expanded state announced to assistive technology
- * and in-page search all come from the browser, at zero bytes of
- * JavaScript.
- *
- * The question is plain text inside `<summary>`, not a heading: a heading
- * nested in a summary is rendered inconsistently across screen readers, and
- * the questions are already reachable as a list under the block's own
- * heading. A CSS-drawn plus mark (rotated to a cross on `[open]`) replaces
- * the native marker rather than a chevron — the theme's own vocabulary of
- * shapes, kept purely visual.
+ * Questions a client asks before a project starts, set open: the label in
+ * the first three columns, and from the fourth each question in the display
+ * width with its answer beside it on a wide screen, divided by hairlines.
+ * Nothing is hidden behind a disclosure: a short set of answers is read
+ * whole. (`accordion` is the collapsible form of the same content.)
  */
-function renderItem(item: FaqItem, ctx: RenderContext): HtmlElement {
+function renderItem(item: FaqItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
   return h(
-    'li',
-    { class: 'cg-faq__item' },
-    h(
-      'details',
-      { class: 'cg-faq__details' },
-      h('summary', { class: 'cg-faq__question' }, h('span', {}, item.question)),
-      h('div', { class: 'cg-faq__answer' }, renderRichText(ctx, item.answer)),
-    ),
+    'div',
+    { class: 'cg-answers__item' },
+    heading(tag, { class: 'cg-answers__question' }, item.question),
+    h('div', { class: 'cg-answers__answer' }, renderRichText(ctx, item.answer)),
   )
 }
 
 export function renderFaq(block: FaqBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  const titled = block.title !== undefined
+  const tag = nestedHeadingTag('faq', titled)
+  return section(
     'section',
-    { class: 'cg-block cg-faq', 'data-block': 'faq' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('faq') ?? 'h2',
-          { class: 'cg-faq__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'faq',
+    'cg-answers cg-split',
+    { 'data-titled': titled ? 'true' : 'false' },
+    'div',
+    sectionHead('faq', block.title),
     h(
-      'ul',
-      { class: 'cg-faq__items' },
-      block.items.map((item) => renderItem(item, ctx)),
+      'div',
+      { class: 'cg-answers__items' },
+      block.items.map((item) => renderItem(item, ctx, tag)),
     ),
   )
 }

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

@@ -1,6 +1,5 @@
 import type { FeatureGridBlock, FeatureItem } from '@cogenta/blocks'
 import {
-  blockHeadingTag,
   type HeadingTag,
   type HtmlElement,
   h,
@@ -8,61 +7,59 @@ import {
   href,
   nestedHeadingTag,
   type RenderContext,
-  renderIcon,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * The item's title is the link, so the link's accessible name is the
- * feature's name — a bare "learn more" repeated across a grid is the
- * classic failure of WCAG 2.4.4, and the block carries no label field to
- * write one anyway.
+ * Services, disciplines, principles or clients, set as a typographic list
+ * rather than as cards with icons. Two forms, chosen from the data itself:
  *
- * `icon` names a symbol (`renderIcon`, `theme@1.4`) — drawn small and
- * accent-coloured, decorative (`aria-hidden`, the title already carries the
- * accessible name) — sitting *above* the running index numeral this theme
- * has always drawn from a CSS counter, never replacing it: the numeral is
- * this theme's own editorial device, the icon is the shared vocabulary's.
- * An item with no icon, or one whose name this theme does not recognise,
- * keeps exactly the pre-1.4 numeral-only card.
+ * - **rows**, when any item carries a sentence: each item a ruled row, its
+ *   name in the display width on the left and the sentence beside it. A
+ *   linked item links its name, drawn as an arrow link.
+ * - **names**, when no item does: a list of names in columns, the way a
+ *   studio lists its clients.
+ *
+ * An item's `icon` is not drawn: a studio's list of services is words, and a
+ * pictogram beside each would be decoration. The value stays in the content
+ * for a theme that wants it.
  */
-function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
-  const title =
+function renderItem(
+  item: FeatureItem,
+  ctx: RenderContext,
+  tag: HeadingTag,
+  form: 'rows' | 'names',
+): HtmlElement {
+  const name =
     item.link === undefined
-      ? heading(tag, { class: 'cg-feature__title' }, item.title)
-      : heading(
-          tag,
-          { class: 'cg-feature__title' },
-          h('a', { class: 'cg-feature__link', href: href(ctx, item.link) }, item.title),
-        )
-  const icon =
-    item.icon === undefined ? null : renderIcon(item.icon, { className: 'cg-feature__icon' })
+      ? item.title
+      : h('a', { class: 'cg-arrow-link cg-list__link', href: href(ctx, item.link) }, item.title)
+  // A name in a list of names is an item, not a section of the page: only a
+  // row with its own sentence earns a heading in the outline.
+  if (form === 'names') return h('li', { class: 'cg-list__item cg-list__name' }, name)
   return h(
     'li',
-    { class: 'cg-feature', 'data-icon': item.icon },
-    icon,
-    h('span', { class: 'cg-feature__index', 'aria-hidden': 'true' }),
-    title,
-    item.text === undefined ? null : h('p', { class: 'cg-feature__text' }, item.text),
+    { class: 'cg-list__item' },
+    heading(tag, { class: 'cg-list__name' }, name),
+    item.text === undefined ? null : h('p', { class: 'cg-list__text' }, item.text),
   )
 }
 
 export function renderFeatureGrid(block: FeatureGridBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const itemTag = nestedHeadingTag('featureGrid', hasTitle)
-  return h(
+  const titled = block.title !== undefined
+  const tag = nestedHeadingTag('featureGrid', titled)
+  const form = block.items.some((item) => item.text !== undefined) ? 'rows' : 'names'
+  return section(
     'section',
-    { class: 'cg-block cg-features', 'data-block': 'featureGrid' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('featureGrid') ?? 'h2',
-          { class: 'cg-features__title', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'featureGrid',
+    'cg-list cg-split',
+    { 'data-form': form, 'data-titled': titled ? 'true' : 'false' },
+    'div',
+    sectionHead('featureGrid', block.title),
     h(
       'ul',
-      { class: 'cg-features__items' },
-      block.items.map((item) => renderItem(item, ctx, itemTag)),
+      { class: 'cg-list__items', 'data-count': String(block.items.length) },
+      block.items.map((item) => renderItem(item, ctx, tag, form)),
     ),
   )
 }