@contentrain/astro-kit 0.40.0 → 0.42.0

package/components/band/Band.astro

@@ -9,6 +9,8 @@ import Section, { type Tone } from '../_shared/Section.astro'
 import { measuredGrid } from '../_shared/measured'
 import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted } from '../_shared/muted'
 
 const band = tv({
   slots: {
@@ -16,16 +18,16 @@ const band = tv({
     copy: 'flex max-w-3xl flex-col gap-4',
     eyebrow: 'text-sm font-semibold tracking-wide text-accent-text uppercase',
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
-    lead: 'text-lg text-pretty opacity-85',
+    lead: `text-lg text-pretty ${muted}`,
     media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     list: 'grid items-start gap-6 md:gap-8',
     item: 'relative flex flex-col gap-3 rounded-[var(--radius-card)]',
     itemMedia: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     itemTitle: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
     itemValue: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight',
-    itemMeta: 'text-sm opacity-75',
-    itemText: 'opacity-80',
-    itemPoints: 'flex list-disc flex-col gap-1 ps-5 opacity-80',
+    itemMeta: `text-sm ${muted}`,
+    itemText: muted,
+    itemPoints: `flex list-disc flex-col gap-1 ps-5 ${muted}`,
     actions: 'flex flex-wrap gap-3',
   },
   variants: {
@@ -42,7 +44,7 @@ const band = tv({
       center: { copy: 'mx-auto items-center text-center', actions: 'justify-center', item: 'items-center text-center' },
     },
     // Accent backgrounds have the least contrast headroom: text on them is never dimmed.
-    tone: { default: {}, muted: {}, inverse: {}, accent: { lead: 'opacity-100', itemText: 'opacity-100', itemMeta: 'opacity-100', itemPoints: 'opacity-100', eyebrow: 'text-current' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'text-current' } },
   },
   defaultVariants: { layout: 'stack', columns: '3', align: 'start', tone: 'default' },
 })
@@ -89,10 +91,11 @@ const aligned = align ?? (measured?.align === 'center' ? 'center' : undefined)
 const s = band({ layout: media ? layout : 'stack', columns, align: aligned, tone })
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 const ItemHeading = `h${heading ? headingLevel + 1 : headingLevel}` as 'h2' | 'h3' | 'h4'
-const headingId = heading ? (id ? `${id}-title` : `band-${heading.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`) : undefined
+// Two bands with the same heading on one page get two ids (`band-<heading>`, then `band-<heading>-2`).
+const headingId = heading ? (id ? `${id}-title` : instanceId(Astro.locals, undefined, `band-${heading.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`)) : undefined
 const hasCopy = Boolean(heading || eyebrow || lead || actions.length)
 ---
-<Section tone={tone} id={id} aria-labelledby={headingId} measured={measured}>
+<Section kit="band" tone={tone} id={id} aria-labelledby={headingId} measured={measured}>
   <div class="flex flex-col gap-10">
     {(hasCopy || media) && (
       <div class={s.grid()}>

package/components/band/meta.json

@@ -8,7 +8,9 @@
     "Button.astro",
     "KitImage.astro",
     "Section.astro",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],

package/components/behavior/Behavior.astro

@@ -9,6 +9,7 @@
 // nothing hidden. Only a page that has an island loads the module (Astro bundles a component's script once, for the
 // pages that use it).
 import Section from '../_shared/Section.astro'
+import { instanceId } from '../_shared/instance-id'
 import type { MeasuredStyle } from '../_shared/types'
 
 interface Props {
@@ -29,9 +30,13 @@ interface Props {
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   /** The source section's measured style (`MeasuredStyle`). */
   measured?: MeasuredStyle | undefined
+  /** Section id, unique per page; without one `behavior`, `behavior-2`, … in render order. */
+  id?: string | undefined
 }
 
-const { kind, html, items, title, panel, fact, previousLabel, nextLabel, closeLabel, tone, measured } = Astro.props
+const { kind, html, items, title, panel, fact, previousLabel, nextLabel, closeLabel, tone, measured, id: givenId } = Astro.props
+// Every section has an id, so a theme or a design layer can address this one: the page's, or `behavior`, `behavior-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'behavior')
 // Selectors and ids go into attributes only, never into markup or a script; an empty one is left out.
 const attr = (value: string | undefined): string | undefined => (value && value.length <= 300 ? value : undefined)
 const factId = fact && /^[\w:.-]{1,120}$/.test(fact) ? fact : undefined
@@ -39,7 +44,7 @@ const factId = fact && /^[\w:.-]{1,120}$/.test(fact) ? fact : undefined
 const NOSCRIPT = '<style>.cr-behavior dialog:not([open]){display:block;position:static;margin:0;max-width:none}</style>'
 ---
 {html && (
-  <Section tone={tone} measured={measured}>
+  <Section kit="behavior" tone={tone} id={id} measured={measured}>
     <div
       class="cr-behavior"
       data-cr-behavior={kind}

package/components/behavior/fixtures.json

@@ -39,7 +39,7 @@
       "kind": "disclosure",
       "fact": "interactive:fx3",
       "tone": "inverse",
-      "html": "<h2><button aria-expanded=\"false\" aria-controls=\"cr-fx3-a\">Do you ship abroad?</button></h2><div id=\"cr-fx3-a\"><p>Yes, to the whole of Europe.</p></div><details><summary>Can I return an order?</summary><p>Within 30 days.</p></details>"
+      "html": "<h2><button aria-expanded=\"false\" aria-controls=\"cr-fx5-a\">Do you ship abroad?</button></h2><div id=\"cr-fx5-a\"><p>Yes, to the whole of Europe.</p></div><details><summary>Can I return an order?</summary><p>Within 30 days.</p></details>"
     }
   },
   {
@@ -48,7 +48,7 @@
       "kind": "disclosure",
       "fact": "interactive:fx3",
       "tone": "accent",
-      "html": "<h2><button aria-expanded=\"false\" aria-controls=\"cr-fx3-a\">Do you ship abroad?</button></h2><div id=\"cr-fx3-a\"><p>Yes, to the whole of Europe.</p></div><details><summary>Can I return an order?</summary><p>Within 30 days.</p></details>"
+      "html": "<h2><button aria-expanded=\"false\" aria-controls=\"cr-fx6-a\">Do you ship abroad?</button></h2><div id=\"cr-fx6-a\"><p>Yes, to the whole of Europe.</p></div><details><summary>Can I return an order?</summary><p>Within 30 days.</p></details>"
     }
   },
   {"name": "video-link", "props": {"kind": "anchor", "fact": "interactive:fx5", "html": "<h2>Studio tour</h2><p>A walk through the workshop.</p><a href=\"https://www.youtube.com/watch?v=aqz-KE-bpKQ\" target=\"_blank\" rel=\"noopener noreferrer\" data-cr-video=\"youtube:aqz-KE-bpKQ\"><img src=\"/kit-fixtures/photo-2.svg\" alt=\"\" loading=\"lazy\" width=\"1200\" height=\"800\"><span>Studio tour</span></a>"}},

package/components/behavior/meta.json

@@ -9,7 +9,9 @@
     "behaviors.ts",
     "embed-frame.ts",
     "embed-target.ts",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -195,6 +197,11 @@
           "description": "The section's minimum height."
         }
       }
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section. Without one, `behavior`, `behavior-2`, … in render order, so every section on a page has its own."
     }
   },
   "slots": {},

package/components/card-grid/CardGrid.astro

@@ -4,10 +4,12 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
+import { instanceId } from '../_shared/instance-id'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { safeHref } from '../_shared/safe-url'
+import { muted, mutedReset } from '../_shared/muted'
 
 const grid = tv({
   slots: {
@@ -15,7 +17,7 @@ const grid = tv({
     card: 'group relative flex flex-col gap-3 rounded-[var(--radius-card)]',
     media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
-    text: 'opacity-80',
+    text: muted,
   },
   variants: {
     columns: {
@@ -26,13 +28,36 @@ const grid = tv({
     style: {
       plain: {},
       bordered: { card: 'border border-line p-6', media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
-      elevated: { card: 'bg-surface p-6 text-ink shadow-md ring-1 ring-line/60', media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
+      elevated: { card: `bg-surface p-6 text-ink shadow-md ring-1 ring-line/60 ${mutedReset}`, media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
     },
     align: { start: { card: 'text-start' }, center: { card: 'items-center text-center' } },
   },
   defaultVariants: { columns: '3', style: 'plain', align: 'start' },
 })
 
+// `layout: 'rows'`: one item per row, its title, text and link on one axis (an image sits at the row's top, out of the
+// baseline: a head led by an icon too, else the icon's foot would be the baseline and push the text down by its
+// height), a hairline between rows and no card box.
+// With `index`, a numbered list whose numbers (01, 02, …) are drawn in the muted role, tabular; the list itself
+// carries the order for screen readers, so the drawn number is hidden from them.
+const rows = tv({
+  slots: {
+    list: 'flex flex-col divide-y divide-line border-y border-line',
+    row: 'group relative grid gap-x-8 gap-y-2 py-6 md:items-baseline',
+    number: `text-sm tabular-nums ${muted}`,
+    head: 'flex flex-col gap-2',
+    end: 'flex flex-col gap-3 md:items-end',
+    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))] md:w-48',
+    title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
+    text: muted,
+    link: 'font-medium text-accent-text underline-offset-4 hover:underline',
+  },
+  variants: {
+    index: { true: { row: 'md:grid-cols-[3rem_minmax(0,1fr)_minmax(0,2fr)_auto]' }, false: { row: 'md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]' } },
+  },
+  defaultVariants: { index: false },
+})
+
 interface Item {
   title: string
   text?: string | undefined
@@ -54,43 +79,78 @@ interface Props {
   /** Heading level of the section title; card titles are one level below, or at this level when there is no title. */
   headingLevel?: 2 | 3 | undefined
   columns?: '2' | '3' | '4' | undefined
+  /** `rows`: one item per row (title, text and link on one axis, a hairline between rows, no card box); `columns`, `style` and the measured columns do not apply. `grid` (absent): cards, as before. */
+  layout?: 'grid' | 'rows' | undefined
+  /** With `layout: 'rows'`: a numbered list, each row led by its number (01, 02, …) in the muted role. */
+  index?: boolean | undefined
   style?: 'plain' | 'bordered' | 'elevated' | undefined
   align?: 'start' | 'center' | undefined
   tone?: Tone | undefined
   /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
   measured?: MeasuredStyle | undefined
+  /** Section id, unique per page; without one `card-grid`, `card-grid-2`, … in render order. Its title is `<id>-title`. */
+  id?: string | undefined
 }
 
-const { title, intro, items, headingLevel = 2, columns, style, align, tone, measured } = Astro.props
+const { title, intro, items, headingLevel = 2, columns, style, align, tone, measured, id: givenId, layout, index = false } = Astro.props
+// Every section has an id, so a theme or a design layer can address this one: the page's, or `card-grid`, `card-grid-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'card-grid')
 const { list, card, media, title: cardTitle, text } = grid({ columns, style, align })
-// Accent backgrounds have the least contrast headroom: text on them is never dimmed.
-const dim = tone === 'accent' ? 'opacity-100' : undefined
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 // One level under the section title, or the title's level when there is none.
 const CardHeading = `h${title ? headingLevel + 1 : headingLevel}` as 'h2' | 'h3' | 'h4'
-const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}` : undefined
+const headingId = title ? `${id}-title` : undefined
+const r = rows({ index })
+const List = index ? 'ol' : 'ul'
+const number = (i: number) => String(i + 1).padStart(2, '0')
 ---
-<Section measured={measured} tone={tone} aria-labelledby={headingId}>
+<Section kit="card-grid" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {(title || intro) && (
     <header class:list={['mb-10 flex max-w-2xl flex-col gap-3', align === 'center' && 'mx-auto items-center text-center']}>
       {title && <Heading id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{title}</Heading>}
-      {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']}>{intro}</p>}
+      {intro && <p class:list={['text-lg', muted]}>{intro}</p>}
     </header>
   )}
-  <ul class={list({ class: measuredGrid(measured) })}>
-    {items.map(item => (
-      <li class={card()}>
-        {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
-        {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
-        {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
-        <CardHeading class={cardTitle()}>
-          {item.href && !item.linkLabel
-            ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
-            : item.title}
-        </CardHeading>
-        {item.text && <p class={text({ class: dim })} data-kit-text>{item.text}</p>}
-        {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
-      </li>
-    ))}
-  </ul>
+  {layout === 'rows' ? (
+    <List class={r.list()} role="list">
+      {items.map((item, i) => (
+        <li class={r.row()}>
+          {index && <span class={r.number()} aria-hidden="true">{number(i)}</span>}
+          <div class={r.head({ class: item.icon ? 'md:self-start' : undefined })}>
+            {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-8 w-8 object-contain" />}
+            {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
+            <CardHeading class={r.title()}>
+              {item.href && !item.linkLabel
+                ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
+                : item.title}
+            </CardHeading>
+          </div>
+          {item.text ? <p class={r.text()} data-kit-text>{item.text}</p> : <span aria-hidden="true" />}
+          {(imageOf(item.image, item.imageAlt) || (item.href && item.linkLabel)) && (
+            <div class={r.end({ class: imageOf(item.image, item.imageAlt) ? 'md:self-start' : undefined })}>
+              {imageOf(item.image, item.imageAlt) && <div class={r.media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 768px) 12rem, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+              {item.href && item.linkLabel && <a href={safeHref(item.href)} class={r.link()}>{item.linkLabel}</a>}
+            </div>
+          )}
+        </li>
+      ))}
+    </List>
+  ) : (
+    <ul class={list({ class: measuredGrid(measured) })}>
+      {items.map(item => (
+        <li class={card()}>
+          {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+          {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
+          {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
+          <CardHeading class={cardTitle()}>
+            {item.href && !item.linkLabel
+              ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
+              : item.title}
+          </CardHeading>
+          {item.text && <p class={text()} data-kit-text>{item.text}</p>}
+          {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
+        </li>
+      ))}
+    </ul>
+  )}
 </Section>

package/components/card-grid/fixtures.json

@@ -5,5 +5,8 @@
   { "name": "accent", "props": { "tone": "accent", "columns": "3", "items": [{ "title": "Fast", "text": "Static HTML, one stylesheet." }, { "title": "Editable", "text": "Content in Contentrain Studio." }, { "title": "Kept", "text": "Every address survives." }] } },
   {"name": "measured-columns", "props": {"title": "Services", "measured": {"containerPx": 1140, "padY": 80, "columns": {"390": 1, "768": 2, "1280": 4}, "gap": 30, "radius": 4, "bg": {"color": "#f4f1ea"}}, "items": [{"title": "Audits", "text": "Where a site loses readers."}, {"title": "Builds", "text": "Static and fast."}, {"title": "Hosting", "text": "Managed for you."}, {"title": "Care", "text": "Kept up to date."}]}},
   {"name": "icon-boxes", "props": {"columns": "3", "align": "center", "items": [{"title": "Design", "text": "Layouts built around your products.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Build", "text": "Fast pages that stay fast.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Grow", "text": "Monthly reports you can read in five minutes.", "icon": "/kit-fixtures/icon-1.svg"}]}},
-  {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}}
+  {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}},
+  {"name": "rows-index", "props": {"layout": "rows", "index": true, "title": "How it works", "intro": "Three steps, in this order.", "items": [{"title": "Discovery", "text": "We read every page of the site you have, and write down what it holds.", "href": "/how/discovery/"}, {"title": "An offer", "text": "One price for the whole move, with what it includes and what it leaves out.", "href": "/how/offer/"}, {"title": "The move", "text": "Content, addresses and forms carried over, each one checked against the original.", "href": "/how/move/"}]}},
+  {"name": "rows-links-muted", "props": {"layout": "rows", "tone": "muted", "title": "What we do", "items": [{"eyebrow": "Studio", "title": "Design systems", "text": "Tokens, components and documentation your team keeps using.", "href": "/services/design/", "linkLabel": "Read more", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}, {"eyebrow": "Studio", "title": "Migrations", "text": "WordPress to Astro without losing an address or a ranking.", "href": "/services/migrations/", "linkLabel": "Read more", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 1200, "height": 800}}, {"eyebrow": "Studio", "title": "Performance", "href": "/services/performance/", "linkLabel": "Read more"}]}},
+  {"name": "rows-icons", "props": {"layout": "rows", "title": "What the move keeps", "items": [{"icon": "/kit-fixtures/icon-1.svg", "title": "Addresses", "text": "Every old address answers, or sends the visitor to its new one.", "href": "/keeps/addresses/"}, {"icon": "/kit-fixtures/icon-1.svg", "eyebrow": "Forms", "title": "Contact forms", "text": "Each form posts where it did, with the same fields.", "href": "/keeps/forms/", "linkLabel": "How"}, {"title": "Rankings", "text": "Titles, descriptions and structured data carried over as they were."}]}}
 ]

package/components/card-grid/meta.json

@@ -8,7 +8,9 @@
     "KitImage.astro",
     "Section.astro",
     "image.ts",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -39,6 +41,14 @@
       "default": "start",
       "description": "Text alignment inside cards and of the header."
     },
+    "layout": {
+      "options": [
+        "grid",
+        "rows"
+      ],
+      "default": "grid",
+      "description": "Cards in a grid, or one item per row: title, text and link on one axis, a hairline between rows, no card box (columns and style do not apply)."
+    },
     "tone": {
       "options": [
         "default",
@@ -113,6 +123,12 @@
       },
       "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
     },
+    "index": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "With layout rows: a numbered list, each row led by its number (01, 02, …) in the muted role."
+    },
     "headingLevel": {
       "type": "integer",
       "min": 2,
@@ -230,6 +246,11 @@
           "description": "The section's minimum height."
         }
       }
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the title gets `<id>-title`. Without one, `card-grid`, `card-grid-2`, … in render order, so every section on a page has its own."
     }
   },
   "slots": {},

package/components/contact-details/ContactDetails.astro

@@ -8,12 +8,14 @@ import Section from '../_shared/Section.astro'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted } from '../_shared/muted'
 
 const details = tv({
   slots: {
     heading: 'mb-8 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
     list: 'grid gap-6',
-    term: 'text-sm font-semibold opacity-75',
+    term: `text-sm font-semibold ${muted}`,
     value: 'mt-1 not-italic whitespace-pre-line',
     link: 'underline decoration-line underline-offset-4 hover:decoration-current',
   },
@@ -50,9 +52,11 @@ interface Props {
 const {
   heading, email, phone, address, hours, mapUrl,
   emailLabel = 'Email', phoneLabel = 'Phone', addressLabel = 'Address', hoursLabel = 'Opening hours', mapLabel = 'View on the map',
-  layout, id = 'contact-details',
+  layout, id: givenId,
   measured,
 } = Astro.props
+// Two on one page never share an id: their labels and controls would point into each other.
+const id = instanceId(Astro.locals, givenId, 'contact-details')
 const s = details({ layout })
 const headingId = heading ? `${id}-title` : undefined
 // A dialler wants the number without spaces, dashes or brackets; the leading + stays.
@@ -60,7 +64,7 @@ const tel = phone ? `tel:${phone.replace(/[^\d+]/g, '')}` : undefined
 const shown = Boolean(email || phone || address || hours || mapUrl)
 ---
 {shown && (
-  <Section measured={measured} spacing="md" id={id} aria-labelledby={headingId}>
+  <Section kit="contact-details" measured={measured} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
     <dl class={s.list({ class: measuredGrid(measured) })}>
       {email && <div><dt class={s.term()}>{emailLabel}</dt><dd class={s.value()}><a href={`mailto:${email}`} class={s.link()}>{email}</a></dd></div>}

package/components/contact-details/meta.json

@@ -6,7 +6,9 @@
   "uses": [],
   "shared": [
     "Section.astro",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],

package/components/contact-form/ContactForm.astro

@@ -18,6 +18,8 @@ import StudioForm from '../../studio/StudioForm.astro'
 import { formHome } from '../../../lib/features'
 import { contactSectionBare } from './contact-form'
 import { safeHref } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted, mutedReset } from '../_shared/muted'
 
 export interface ContactDetail {
   /** What the detail is (Phone, Email); a source's icon list often has none. */
@@ -34,16 +36,16 @@ const contact = tv({
     grid: 'grid gap-10',
     copy: 'flex flex-col gap-4',
     heading: 'text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
-    intro: 'max-w-xl text-pretty opacity-85',
+    intro: `max-w-xl text-pretty ${muted}`,
     details: 'mt-2 flex flex-col gap-4',
-    term: 'text-sm font-semibold opacity-75',
+    term: `text-sm font-semibold ${muted}`,
     value: 'text-current',
     mark: 'mr-2 inline-flex size-5 shrink-0 align-[-0.25em]',
     formColumn: 'flex flex-col gap-4',
     formHeading: 'text-xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-2xl',
     form: 'rounded-card',
     card: 'flex flex-col gap-1 rounded-card border border-line p-4',
-    hours: 'mt-2 whitespace-pre-line text-sm opacity-85',
+    hours: `mt-2 whitespace-pre-line text-sm ${muted}`,
     socials: 'mt-2 flex flex-wrap gap-4 text-sm',
   },
   variants: {
@@ -65,7 +67,7 @@ const contact = tv({
     // Beside a form it then titles the form; without one it follows the details.
     headingPlace: { top: {}, after: {} },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
-    tone: { default: { form: 'border border-line bg-surface p-6 md:p-8' }, muted: { form: 'bg-surface p-6 text-ink md:p-8' }, inverse: { form: 'bg-surface p-6 text-ink md:p-8' }, accent: { form: 'bg-surface p-6 text-ink md:p-8', intro: 'opacity-100', term: 'opacity-100' } },
+    tone: { default: { form: 'border border-line bg-surface p-6 md:p-8' }, muted: { form: `bg-surface p-6 text-ink md:p-8 ${mutedReset}` }, inverse: { form: `bg-surface p-6 text-ink md:p-8 ${mutedReset}` }, accent: { form: `bg-surface p-6 text-ink md:p-8 ${mutedReset}` } },
   },
   compoundVariants: [
     { layout: 'stacked', align: 'center', class: { grid: 'mx-auto max-w-2xl' } },
@@ -100,7 +102,9 @@ interface Props {
   id?: string | undefined
 }
 
-const { model, heading, intro, formHeading, details = [], layout, detailsStyle, panel, hours, socials = [], map, align, tone, headingPlace = 'top', measured, id = 'contact' } = Astro.props
+const { model, heading, intro, formHeading, details = [], layout, detailsStyle, panel, hours, socials = [], map, align, tone, headingPlace = 'top', measured, id: givenId } = Astro.props
+// Two on one page never share an id: their labels and controls would point into each other.
+const id = instanceId(Astro.locals, givenId, 'contact')
 // Nothing to render (Studio not bound and no fallback): a split would leave an empty column — the details stand alone.
 const formShown = formHome(model) !== null
 const bare = contactSectionBare({ formShown, heading, intro, details })
@@ -120,7 +124,7 @@ const LINK = 'underline decoration-line underline-offset-4 hover:decoration-curr
 const FormHeading = heading ? 'h3' : 'h2'
 ---
 {!bare && (
-<Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+<Section kit="contact-form" measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
   <div class={s.grid()}>
     {!formOnly && (heading || intro || details.length > 0 || hours || socials.length > 0 || map) && !(headingInForm && !hours && socials.length === 0 && !map && !intro && details.length === 0) && (
       <div class={s.copy()}>
@@ -157,7 +161,7 @@ const FormHeading = heading ? 'h3' : 'h2'
         {map && (
           <div>
             <Embed address={map.address} url={map.url} title={map.title} aspect="map" width="page" />
-            {map.address && <p class="text-sm opacity-85">{map.address}</p>}
+            {map.address && <p class:list={['text-sm', muted]}>{map.address}</p>}
           </div>
         )}
         {!headingTop && headingInCopy && <h2 id={headingId} class={s.heading()}>{heading}</h2>}

package/components/contact-form/meta.json

@@ -9,7 +9,9 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],

package/components/cta/Cta.astro

@@ -5,21 +5,23 @@ import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import { instanceId } from '../_shared/instance-id'
 import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
+import { muted, mutedAccent, mutedBrand, mutedInverse } from '../_shared/muted'
 
 const cta = tv({
   slots: {
     box: 'flex flex-col gap-6',
     copy: 'flex flex-col gap-3',
-    eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
+    eyebrow: `text-sm font-semibold tracking-wide uppercase ${muted}`,
     // The text and buttons when a picture stands beside them.
     text: 'flex min-w-0 flex-1 flex-col gap-6',
     // The buttons with the small print under them.
     cta: 'flex flex-col gap-2 md:shrink-0',
-    note: 'text-sm opacity-75',
+    note: `text-sm ${muted}`,
     media: 'w-full max-w-sm shrink-0 overflow-hidden rounded-[var(--radius-image,var(--radius-card))] md:w-2/5',
     heading: 'text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
-    body: 'max-w-2xl text-pretty opacity-85',
+    body: `max-w-2xl text-pretty ${muted}`,
     actions: 'flex flex-wrap gap-3',
   },
   variants: {
@@ -41,7 +43,7 @@ const cta = tv({
     },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
     // none: no fill of its own — the page background and text colour show through.
-    tone: { default: {}, muted: {}, inverse: {}, accent: { body: 'opacity-100', eyebrow: 'opacity-100', note: 'opacity-100' }, brand: { body: 'opacity-100', eyebrow: 'opacity-100', note: 'opacity-100' }, none: {} },
+    tone: { default: {}, muted: {}, inverse: {}, accent: {}, brand: {}, none: {} },
     // The buttons' own alignment: `start` keeps them at the start edge under centred text (a WordPress buttons block
     // with no justification sits left in a group whose heading and paragraph are centred). The row is the text's
     // column, as WordPress's content width is, not the whole section. Only centred needs it: inline and stacked
@@ -52,9 +54,9 @@ const cta = tv({
     // A card carries the tone itself, on a plain section; a plain card still needs a surface to read as one.
     { frame: 'card', tone: 'default', class: { box: 'bg-surface-muted text-ink' } },
     { frame: 'card', tone: 'muted', class: { box: 'border-transparent bg-surface-muted text-ink' } },
-    { frame: 'card', tone: 'inverse', class: { box: 'border-transparent bg-ink text-surface' } },
-    { frame: 'card', tone: 'accent', class: { box: 'border-transparent bg-accent text-accent-ink' } },
-    { frame: 'card', tone: 'brand', class: { box: 'border-transparent bg-brand text-brand-ink' } },
+    { frame: 'card', tone: 'inverse', class: { box: `border-transparent bg-ink text-surface ${mutedInverse}` } },
+    { frame: 'card', tone: 'accent', class: { box: `border-transparent bg-accent text-accent-ink ${mutedAccent}` } },
+    { frame: 'card', tone: 'brand', class: { box: `border-transparent bg-brand text-brand-ink ${mutedBrand}` } },
     { layout: 'centered', actionsAlign: 'start', class: { actions: 'w-full max-w-2xl justify-start' } },
     { layout: 'centered', class: { cta: 'items-center' } },
   ],
@@ -87,19 +89,21 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, eyebrow, body, note, image, actions, layout, frame, size, align, mediaSide, tone = 'accent', actionsAlign, bgImage, bgOverlay, measured: given, id } = Astro.props
+const { heading, eyebrow, body, note, image, actions, layout, frame, size, align, mediaSide, tone = 'accent', actionsAlign, bgImage, bgOverlay, measured: given, id: givenId } = Astro.props
+// Every section has an id, so a theme or a design layer can address this one: the page's, or `cta`, `cta-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'cta')
 const s = cta({ layout, frame, size, align, mediaSide, tone, actionsAlign })
 // A background picture is the section's measured background: Section draws the image and its overlay, and the text
 // turns light so it reads on either.
 const measured: MeasuredStyle | undefined = bgImage
   ? { ...given, tone: 'dark', bg: { ...given?.bg, image: bgImage, overlay: bgOverlay ?? given?.bg?.overlay ?? 'rgba(0, 0, 0, 0.55)' } }
   : given
-const headingId = id ? `${id}-title` : undefined
+const headingId = `${id}-title`
 // On the accent background the primary button (accent) would vanish: it is drawn as the secondary style there.
 const onAccent = (action: ActionInput): ActionInput => ({ label: action.label, href: action.href, newTab: action.newTab, style: 'secondary' })
 const shown = actions.map(action => (tone === 'accent' && !bgImage && (action.style ?? 'primary') === 'primary' ? onAccent(action) : action))
 ---
-<Section measured={measured} tone={frame === 'card' ? 'default' : tone} spacing={size === 'lg' ? 'lg' : 'md'} id={id} aria-labelledby={headingId}>
+<Section kit="cta" measured={measured} tone={frame === 'card' ? 'default' : tone} spacing={size === 'lg' ? 'lg' : 'md'} id={id} aria-labelledby={headingId}>
   <div class:list={[s.box(), image && 'md:flex-row md:items-center md:justify-between md:gap-12']}>
     <div class={image ? s.text() : 'contents'}>
       <div class={s.copy()}>

package/components/cta/meta.json

@@ -4,7 +4,7 @@
   "description": "A call to action: a short heading, an optional line of text and one or two buttons — across the whole section, or as a card inside it.",
   "category": "section",
   "uses": [],
-  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "measured.ts", "safe-url.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["inline", "centered", "stacked"], "default": "inline", "description": "inline: text left, buttons right on wide screens. centered: everything centred. stacked: heading, text and buttons in one column at the start edge on every width." },
     "frame": { "options": ["full", "card"], "default": "full", "description": "full: the tone fills the section. card: a rounded box in a plain section carries the tone." },
@@ -24,7 +24,7 @@
     "bgOverlay": { "type": "string", "content": false, "description": "The colour laid over the background image (a hex or rgb colour); default black at 55 %." },
     "actions": { "type": "array", "label": "Buttons", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "label": "Label", "required": true, "description": "The button text." }, "href": { "type": "url", "label": "Link", "required": true, "description": "Where the button goes: a page on this site or a full address." }, "newTab": { "type": "boolean", "label": "Open in a new tab", "description": "Open the link in a new tab (an external site the reader should not leave for)." }, "style": { "type": "select", "label": "Style", "options": ["primary", "secondary", "ghost"], "description": "primary for the main action, secondary or ghost for the ones beside it." } } }, "description": "Buttons, in order; usually one." },
     "measured": { "type": "object", "content": false, "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.", "fields": { "containerPx": { "type": "integer", "min": 0, "max": 2560, "description": "The frame's content width." }, "padY": { "type": "integer", "min": 0, "max": 400, "description": "Top and bottom padding." }, "padX": { "type": "integer", "min": 0, "max": 200, "description": "The frame's side padding (gutter)." }, "bg": { "type": "object", "description": "The section's background.", "fields": { "color": { "type": "string", "description": "Fill colour: hex, rgb(a) or hsl(a)." }, "image": { "type": "string", "description": "Background image address (http(s) or root-relative), drawn behind the content." }, "overlay": { "type": "string", "description": "Colour or linear/radial gradient laid over the image or the fill." }, "size": { "type": "string", "description": "cover, contain or auto; anything else draws as cover." }, "position": { "type": "string", "description": "One or two of center/top/bottom/left/right or percentages." } } }, "columns": { "type": "object", "description": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.", "fields": { "390": { "type": "integer", "min": 1, "max": 6, "description": "Phone." }, "768": { "type": "integer", "min": 1, "max": 6, "description": "Tablet." }, "1280": { "type": "integer", "min": 1, "max": 6, "description": "Desktop." } } }, "gap": { "type": "integer", "min": 0, "max": 200, "description": "Gap between items." }, "tone": { "type": "select", "options": ["light", "dark"], "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides." }, "align": { "type": "select", "options": ["start", "center", "end"], "description": "Where the heading and lead sit; read by a component whose own align is not set." }, "radius": { "type": "integer", "min": 0, "max": 200, "description": "Card and item corner radius." }, "minHeight": { "type": "integer", "min": 0, "max": 2000, "description": "The section's minimum height." } } },
-    "id": { "type": "string", "content": false, "description": "Anchor id of the section; the heading gets `<id>-title`." }
+    "id": { "type": "string", "content": false, "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `cta`, `cta-2`, … in render order, so every section on a page has its own." }
   },
   "slots": {},
   "js": "none",