@contentrain/astro-kit 0.39.0 → 0.41.0

package/components/_shared/embed-frame.ts

@@ -0,0 +1,22 @@
+// The player a click on an embed poster becomes: one recipe for the kit Embed, a Slider slide and a behaviour
+// island's video link, so the frame's permissions are written once. The address is checked again at the click: what
+// the page carries (`data-embed-src`, which an edited page could change) goes through embed-target.ts once more, and
+// the frame loads the address that builds from a known provider, never the attribute's text.
+import { embedTarget } from './embed-target'
+
+/** An iframe for the player at `src`, named `title`, filling its positioned frame; none when `src` is no known player. */
+export function playerFrame(src: string | undefined, title: string, className = 'absolute inset-0 h-full w-full border-0'): HTMLIFrameElement | null {
+  const target = src ? embedTarget(src) : null
+  if (!target) return null
+  const frame = document.createElement('iframe')
+  frame.src = target.src
+  frame.title = title
+  frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write'
+  frame.allowFullscreen = true
+  frame.referrerPolicy = 'strict-origin-when-cross-origin'
+  frame.className = className
+  return frame
+}
+
+/** A plain left click: a modified one (new tab, new window) keeps the link's own behaviour. */
+export const plainClick = (event: MouseEvent): boolean => !event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey

package/components/{embed/embed.ts → _shared/embed-target.ts}

@@ -107,3 +107,33 @@ export function mapTarget(address: string): EmbedTarget | null {
   const query = encodeURIComponent(q)
   return { provider: 'google-maps', kind: 'map', src: `https://www.google.com/maps?q=${query}&output=embed`, href: `https://www.google.com/maps/search/?api=1&query=${query}` }
 }
+
+const VIDEO_PAGE: Record<string, (id: string) => string> = {
+  youtube: id => `https://www.youtube.com/watch?v=${encodeURIComponent(id)}`,
+  vimeo: id => `https://vimeo.com/${encodeURIComponent(id)}`,
+}
+
+/**
+ * A video to play in place: a video page or player URL, or `youtube:<id>` / `vimeo:<id>` (what the engine writes on a
+ * slide or an island link). Only a video comes back (never a map or a form); the id is checked by the same parser as a
+ * URL, so the player address is always built here, never taken from the content.
+ */
+export function videoTarget(value: string | undefined): EmbedTarget | null {
+  if (!value) return null
+  const short = /^(youtube|vimeo):([\w-]+)$/.exec(value.trim())
+  const target = embedTarget(short ? VIDEO_PAGE[short[1]!]!(short[2]!) : value)
+  return target?.kind === 'video' ? target : null
+}
+
+/** Hosts a video provider serves its players, thumbnails and streams from. */
+const VIDEO_HOST = /(?:^|\.)(?:youtube|youtube-nocookie|youtu|ytimg|googlevideo|ggpht|vimeo|vimeocdn|loom|wistia)\.(?:com|be|net)$/i
+
+/**
+ * An address on a video provider's own hosts (a YouTube thumbnail on i.ytimg.com, a Vimeo one on vimeocdn.com): never
+ * drawn as a poster, since loading it is a request to the provider before the reader asked for the video.
+ */
+export function onVideoHost(src: string | undefined): boolean {
+  if (!src) return false
+  try { return VIDEO_HOST.test(new URL(src, 'https://site.invalid').hostname) }
+  catch { return false }
+}

package/components/_shared/instance-id.ts

@@ -0,0 +1,24 @@
+// A component's id when the page gives none. Its tabs, lightboxes, labels and buttons point at elements by id
+// (`aria-controls`, `popovertarget`, `for`), so two instances on one page that both took the same default (two galleries,
+// two FAQs, two newsletters) would point into each other: a click in the second opened the first one's image. Each
+// default is taken once per page instead: `gallery`, then `gallery-2`, `gallery-3`, in the order the page renders
+// them, the same on every build. An id the page gives is kept as it is, and a default steps around it.
+
+const taken = new WeakMap<object, Set<string>>()
+
+/** `given` when set, else `base`, `base-2`, … — the first one not yet used on this page (`page` = `Astro.locals`). */
+export function instanceId(page: object, given: string | undefined, base: string): string {
+  let ids = taken.get(page)
+  if (!ids) {
+    ids = new Set()
+    taken.set(page, ids)
+  }
+  if (given) {
+    ids.add(given)
+    return given
+  }
+  let id = base
+  for (let n = 2; ids.has(id); n++) id = `${base}-${n}`
+  ids.add(id)
+  return id
+}

package/components/_shared/muted.ts

@@ -0,0 +1,19 @@
+// Quieter text (an intro, a caption, a role, a footer link) in a colour role, never a dimmed ink: opacity lays the
+// text over whatever is behind it, and on a mid-tone band that falls under 4.5:1. The role is the one made for the
+// band the text sits on. A band sets `--kit-muted` (dark: `--color-ink-muted-inverse`, a fill: its own ink), a light
+// surface inside it (a card, a form panel, a drawer) clears it again, and without either it is `--color-ink-muted`.
+
+/** Quieter text: the band's muted role. */
+export const muted = 'text-[color:var(--kit-muted,var(--color-ink-muted))]'
+
+/** On a dark band: the muted role made for it, or the band's own text where the site's theme has none. */
+export const mutedInverse = '[--kit-muted:var(--color-ink-muted-inverse,var(--color-surface))]'
+
+/** On the accent fill: no muted role is made for it, so quieter text there is the fill's own ink. */
+export const mutedAccent = '[--kit-muted:var(--color-accent-ink)]'
+
+/** On the brand fill: the fill's own ink, as on the accent. */
+export const mutedBrand = '[--kit-muted:var(--color-brand-ink)]'
+
+/** A light surface inside a band (a card, a form panel, a drawer): back to the page's muted role. */
+export const mutedReset = '[--kit-muted:initial]'

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}
@@ -71,4 +76,12 @@ const NOSCRIPT = '<style>.cr-behavior dialog:not([open]){display:block;position:
   .cr-behavior-dialog { margin: auto; max-width: min(92vw, 40rem); max-height: 85dvh; border: 1px solid var(--color-line); border-radius: var(--radius-card, 0.75rem); padding: 1.5rem; }
   .cr-behavior-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
   .cr-behavior-lightbox img { display: block; max-width: 100%; max-height: 75dvh; margin-inline: auto; }
+  /* A source video player kept as a poster link (data-cr-video): a play button over it, drawn in CSS (nothing loads). */
+  .cr-behavior a[data-cr-video] { position: relative; display: block; }
+  .cr-behavior a[data-cr-video] img { display: block; width: 100%; height: auto; }
+  .cr-behavior a[data-cr-video]::before { content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; width: 4rem; height: 4rem; translate: -50% -50%; border-radius: 9999px; background: var(--color-accent); box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); }
+  .cr-behavior a[data-cr-video]::after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; translate: -35% -50%; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; border-left: 1.25rem solid var(--color-accent-ink, #fff); }
+  /* No poster (only the title): a 16:9 dark panel, the title along its foot, the button in its middle. */
+  .cr-behavior a[data-cr-video]:not(:has(img)) { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 1rem 1.25rem; border-radius: var(--radius-card, 0.75rem); background: var(--color-ink, #111827); color: var(--color-surface, #fff); font-weight: 600; text-decoration: none; }
+  .cr-behavior a[data-cr-video]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
 </style>

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,9 @@
       "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>"}},
+  {"name": "video-link-no-poster", "props": {"kind": "anchor", "fact": "interactive:fx6", "html": "<h2>Studio tour</h2><a href=\"https://vimeo.com/76979871\" target=\"_blank\" rel=\"noopener noreferrer\" data-cr-video=\"vimeo:76979871\"><span>Behind the scenes</span></a>"}}
 ]

package/components/behavior/meta.json

@@ -7,7 +7,11 @@
   "shared": [
     "Section.astro",
     "behaviors.ts",
+    "embed-frame.ts",
+    "embed-target.ts",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -193,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,7 +28,7 @@ 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' } },
   },
@@ -59,22 +61,24 @@ interface Props {
   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 } = 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
 ---
-<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) })}>
@@ -88,7 +92,7 @@ const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-
             ? <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.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>
     ))}

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"
   ],
@@ -230,6 +232,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",

package/components/dialog/Dialog.astro

@@ -19,6 +19,8 @@ import Button from '../_shared/Button.astro'
 import Section from '../_shared/Section.astro'
 import type { ActionInput, MeasuredStyle } from '../_shared/types'
 import Prose from '../prose/Prose.astro'
+import { instanceId } from '../_shared/instance-id'
+import { mutedReset } from '../_shared/muted'
 
 const dialog = tv({
   slots: {
@@ -28,7 +30,7 @@ const dialog = tv({
     // modal (the `open` preview prop) it is a block in the flow under the button, not a box over it. The inner box
     // scrolls, not the dialog: a click on the scrollbar then never lands on the dialog itself (the backdrop test). The
     // display is set only when open (`open:flex`): an author `display` would override the UA's `display: none` when closed.
-    box: 'm-auto w-[min(92vw,var(--dialog-width))] max-h-[85dvh] flex-col open:flex rounded-card border border-line bg-surface p-0 text-ink shadow-xl backdrop:bg-ink/50 [&[open]:not(:modal)]:relative [&[open]:not(:modal)]:m-0 [&[open]:not(:modal)]:basis-full',
+    box: `m-auto w-[min(92vw,var(--dialog-width))] max-h-[85dvh] flex-col open:flex rounded-card border border-line bg-surface p-0 text-ink shadow-xl backdrop:bg-ink/50 [&[open]:not(:modal)]:relative [&[open]:not(:modal)]:m-0 [&[open]:not(:modal)]:basis-full ${mutedReset}`,
     inner: 'flex min-h-0 flex-col gap-4 overflow-y-auto p-6 md:p-8',
     heading: 'pe-10 text-xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-2xl',
     actions: 'flex flex-wrap gap-3',
@@ -78,10 +80,11 @@ interface Props {
   fact?: string | undefined
 }
 
-const { id: givenId = 'dialog', triggerLabel, heading, html, actions = [], closeLabel = 'Close', triggerStyle, size, align: given, tone, measured, open = false, trigger, fact } = Astro.props
+const { id: givenId, triggerLabel, heading, html, actions = [], closeLabel = 'Close', triggerStyle, size, align: given, tone, measured, open = false, trigger, fact } = Astro.props
 const factId = fact && /^[\w:.-]{1,120}$/.test(fact) ? fact : undefined
 // The id goes into attributes and into the scripting-off style sheet, so it is a plain token or the default.
-const id = /^[A-Za-z][\w-]*$/.test(givenId) ? givenId : 'dialog'
+// Two dialogs without one of their own never share it (each opener would open the first).
+const id = instanceId(Astro.locals, givenId && /^[A-Za-z][\w-]*$/.test(givenId) ? givenId : undefined, 'dialog')
 const align = given ?? measured?.align
 // On the accent band the primary button (accent) would vanish: drawn as the secondary style there, as in Cta. The
 // dialog's own actions sit on the dialog's surface, not the band, so they keep their styles.