@contentrain/astro-kit 0.39.0 → 0.41.0

package/components/dialog/meta.json

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

package/components/embed/Embed.astro

@@ -8,7 +8,7 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import type { ImageInput } from '../_shared/types'
-import { embedTarget, mapTarget } from './embed'
+import { embedTarget, mapTarget } from '../_shared/embed-target'
 
 const embed = tv({
   slots: {
@@ -84,20 +84,17 @@ const linkUrl = url && /^https?:\/\//i.test(url) ? url : undefined
   )}
 
 <script>
+  import { playerFrame, plainClick } from '../_shared/embed-frame'
+
   // Click (or Enter) on the poster: the player replaces it, focused, so keyboard and screen-reader users land in it.
   // A modified click (new tab, new window) keeps the link's own behaviour.
   document.addEventListener('click', (event) => {
-    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+    if (!plainClick(event)) return
     const link = (event.target as Element | null)?.closest<HTMLAnchorElement>('[data-kit-embed] a[data-embed-src]')
-    if (!link?.dataset.embedSrc) return
+    // An address that is no known player stays what it is: a link.
+    const frame = link && playerFrame(link.dataset.embedSrc, link.dataset.embedTitle ?? '')
+    if (!link || !frame) return
     event.preventDefault()
-    const frame = document.createElement('iframe')
-    frame.src = link.dataset.embedSrc
-    frame.title = link.dataset.embedTitle ?? ''
-    frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write'
-    frame.allowFullscreen = true
-    frame.referrerPolicy = 'strict-origin-when-cross-origin'
-    frame.className = 'absolute inset-0 h-full w-full border-0'
     link.replaceWith(frame)
     frame.focus()
   })

package/components/embed/meta.json

@@ -4,7 +4,7 @@
   "description": "A video, map or player from another site (YouTube, Vimeo, Google Maps, OpenStreetMap, Spotify, SoundCloud, Calendly, Typeform, Google Forms, Loom, Wistia), loaded only on click: until then a poster link to the provider's page, with no iframe, no third-party request and no cookie (YouTube through youtube-nocookie.com). Unknown providers are never framed; they stay a plain link.",
   "category": "content",
   "uses": [],
-  "shared": ["KitImage.astro", "safe-url.ts", "types.ts"],
+  "shared": ["KitImage.astro", "embed-frame.ts", "embed-target.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "aspect": { "options": ["auto", "video", "portrait", "square", "map"], "default": "auto", "description": "auto: 16:9 for videos, 9:16 for YouTube Shorts, 4:3 (16:9 wide) for maps, a fixed strip for audio players. The others force a ratio." },
     "width": { "options": ["prose", "page"], "default": "prose", "description": "prose: as wide as the reading column. page: the full page frame." }

package/components/faq/Faq.astro

@@ -7,6 +7,8 @@ import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
 import { measuredColumns } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
+import { instanceId } from '../_shared/instance-id'
+import { muted } from '../_shared/muted'
 
 export interface FaqItem {
   question: string
@@ -19,7 +21,7 @@ const faq = tv({
     root: '',
     head: 'mb-8 flex flex-col gap-3',
     heading: 'text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
-    intro: 'max-w-2xl text-lg opacity-80',
+    intro: `max-w-2xl text-lg ${muted}`,
     list: 'flex flex-col',
     item: 'group',
     question: '',
@@ -37,7 +39,7 @@ const faq = tv({
     columns: { '1': {}, '2': { list: 'lg:block lg:columns-2 lg:gap-x-12', item: 'break-inside-avoid' } },
     // The marker in each question's row: a plus that turns into a cross, or a chevron that turns over.
     icon: { plus: {}, chevron: { marker: 'group-open:rotate-180' } },
-    numbered: { true: { list: '[counter-reset:faq]', item: '[counter-increment:faq]', question: 'before:me-4 before:tabular-nums before:opacity-60 before:content-[counter(faq,decimal-leading-zero)]' }, false: {} },
+    numbered: { true: { list: '[counter-reset:faq]', item: '[counter-increment:faq]', question: 'before:me-4 before:tabular-nums before:text-[color:var(--kit-muted,var(--color-ink-muted))] before:content-[counter(faq,decimal-leading-zero)]' }, false: {} },
     style: {
       lines: { list: 'divide-y divide-line border-y border-line' },
       cards: { list: 'gap-3', item: 'rounded-card border border-line px-5', summary: 'py-5' },
@@ -84,7 +86,9 @@ interface Props {
   id?: string | undefined
 }
 
-const { items, heading, intro, layout, columns, icon, numbered = false, style, questionStyle, exclusive = false, openFirst = false, schema = false, tone, measured, id = 'faq' } = Astro.props
+const { items, heading, intro, layout, columns, icon, numbered = false, style, questionStyle, exclusive = false, openFirst = false, schema = false, tone, 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, 'faq')
 const s = faq({ layout, columns, icon, numbered, style, questionStyle: style === 'plain' ? 'heading' : questionStyle, tone })
 // Two columns and the split layout need the page's width; one column reads in the narrow one.
 const measuredCols = measuredColumns(measured)
@@ -103,7 +107,7 @@ const structured = schema && items.length > 0
   : null
 ---
 {items.length > 0 && (
-  <Section measured={measured} tone={tone} spacing="md" width={wide ? 'page' : 'prose'} id={id} aria-labelledby={headingId}>
+  <Section kit="faq" measured={measured} tone={tone} spacing="md" width={wide ? 'page' : 'prose'} id={id} aria-labelledby={headingId}>
     <div class={s.root()}>
       {(heading || intro) && (
         <header class={s.head()}>

package/components/faq/meta.json

@@ -4,7 +4,7 @@
   "description": "Questions and answers as native <details> disclosures (no script), in lines or cards; optionally one open at a time, and optionally with FAQPage structured data for search engines and AI answers.",
   "category": "section",
   "uses": [],
-  "shared": ["Section.astro", "measured.ts", "safe-url.ts", "types.ts"],
+  "shared": ["Section.astro", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["single", "split"], "default": "single", "description": "single: the heading above one column. split: the heading and introduction stay in a left column beside the list; stacks on a phone." },
     "columns": { "options": ["1", "2"], "default": "1", "description": "Columns of questions on wide screens." },

package/components/feature-list/FeatureList.astro

@@ -4,8 +4,10 @@
 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 { muted } from '../_shared/muted'
 
 const list = tv({
   slots: {
@@ -13,7 +15,7 @@ const list = tv({
     item: 'flex gap-4',
     mark: 'flex size-6 shrink-0 items-center justify-center text-accent-text',
     title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
-    text: 'mt-1 opacity-80',
+    text: `mt-1 ${muted}`,
   },
   variants: {
     columns: {
@@ -28,7 +30,7 @@ const list = tv({
       list: { grid: 'flex flex-col gap-3', item: 'items-center gap-3', mark: 'size-5', title: 'text-[length:var(--text-body,1rem)] leading-normal [font-weight:inherit] text-pretty', text: 'mt-0' },
     },
     // On accent the mark takes the ink colour, and text is never dimmed.
-    tone: { default: {}, muted: {}, inverse: {}, accent: { mark: 'text-current', text: 'opacity-100' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: { mark: 'text-current' } },
     // A list inside another section's column: one column, tighter, no section around it.
     bare: { true: { grid: 'sm:grid-cols-1 gap-y-5' }, false: {} },
   },
@@ -73,9 +75,11 @@ interface Props {
   measured?: MeasuredStyle | undefined
 }
 
-const { heading, intro, items, columns, style = 'icon', tone, bare = false, titleLevel = 3, id, measured } = Astro.props
+const { heading, intro, items, columns, style = 'icon', tone, bare = false, titleLevel = 3, id: givenId, measured } = Astro.props
+// Every section has an id, so a theme or a design layer can address this one: the page's, or `feature-list`, `feature-list-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'feature-list')
 const s = list({ columns, style, tone, bare })
-const headingId = heading && id ? `${id}-title` : undefined
+const headingId = heading ? `${id}-title` : undefined
 const pathOf = (item: Item) => (style !== 'check' && item.icon && icons[item.icon]) || icons.check
 // The feature's own image icon, where the style shows each feature's own mark.
 const imageOf = (item: Item) => (style !== 'check' && item.iconImage) || undefined
@@ -101,11 +105,11 @@ const Title = style === 'list' ? 'span' : bare ? `h${titleLevel}` as 'h3' : head
     </ul>
   )
   : (
-<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
+<Section kit="feature-list" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {(heading || intro) && (
     <header class="mb-10 flex max-w-2xl flex-col gap-3">
       {heading && <h2 id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{heading}</h2>}
-      {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']} data-kit-text>{intro}</p>}
+      {intro && <p class:list={['text-lg', muted]} data-kit-text>{intro}</p>}
     </header>
   )}
   <ul class={s.grid({ class: measuredGrid(measured) })}>

package/components/feature-list/meta.json

@@ -7,7 +7,9 @@
   "shared": [
     "KitImage.astro",
     "Section.astro",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -219,7 +221,7 @@
     "id": {
       "type": "string",
       "content": false,
-      "description": "Anchor id of the section; the heading gets `<id>-title`."
+      "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `feature-list`, `feature-list-2`, … in render order, so every section on a page has its own."
     }
   },
   "slots": {},

package/components/footer/Footer.astro

@@ -5,13 +5,14 @@ import { tv } from 'tailwind-variants'
 import type { LinkInput } from '../_shared/types'
 import { contactKeys, footerLinkSizeClasses, footerVars, type ContactInput } from './footer'
 import { safeHref } from '../_shared/safe-url'
+import { muted as quiet, mutedInverse } from '../_shared/muted'
 
 const footer = tv({
   slots: {
     root: 'mt-auto',
     inner: 'container-page py-10 text-sm',
-    muted: 'opacity-75',
-    link: 'text-current no-underline opacity-75 hover:opacity-100 hover:underline',
+    muted: quiet,
+    link: `no-underline ${quiet} hover:text-current hover:underline`,
   },
   variants: {
     layout: {
@@ -21,7 +22,7 @@ const footer = tv({
     tone: {
       default: { root: 'bg-surface text-ink' },
       muted: { root: 'bg-surface-muted text-ink' },
-      inverse: { root: 'bg-ink text-surface' },
+      inverse: { root: `bg-ink text-surface ${mutedInverse}` },
     },
     // The border on the footer's top side: the default tone's own unless `border` says otherwise.
     border: { on: { root: 'border-t border-line' }, off: {} },

package/components/footer/meta.json

@@ -5,6 +5,7 @@
   "category": "chrome",
   "uses": [],
   "shared": [
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],

package/components/gallery/Gallery.astro

@@ -12,6 +12,8 @@ import type { MeasuredStyle } from '../_shared/types'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { type ImageInput } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted } from '../_shared/muted'
 
 export interface GalleryItem {
   /** The image's address (or, until 0.7, an `ImageInput`). */
@@ -29,7 +31,7 @@ const gallery = tv({
     item: 'm-0',
     frame: 'group relative block w-full cursor-zoom-in overflow-hidden rounded-[var(--radius-image,var(--radius-card))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
     thumb: 'h-full w-full object-cover transition-transform duration-300 hover:scale-[1.02]',
-    caption: 'mt-2 text-sm opacity-75',
+    caption: `mt-2 text-sm ${muted}`,
     viewer: 'm-auto max-h-[92vh] max-w-[92vw] bg-transparent p-0 backdrop:bg-ink/85',
   },
   variants: {
@@ -85,14 +87,16 @@ interface Props {
   id?: string | undefined
 }
 
-const { items: given, heading, layout, columns, aspect, gap, captionStyle, hoverEffect, enlargeLabel = 'Enlarge', regionLabel = 'Images', open = 'popover', closeLabel = 'Close', tone, measured, id = 'gallery' } = Astro.props
+const { items: given, heading, layout, columns, aspect, gap, captionStyle, hoverEffect, enlargeLabel = 'Enlarge', regionLabel = 'Images', open = 'popover', closeLabel = 'Close', tone, 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, 'gallery')
 const items = given.flatMap(item => { const image = imageOf(item.image, item.imageAlt); return image ? [{ ...item, image, full: imageOf(item.full, item.imageAlt) }] : [] }) satisfies Array<{ image: ImageInput, caption?: string | undefined }>
 const s = gallery({ layout, columns, open, aspect, gap, captionStyle, hoverEffect })
 const headingId = heading ? `${id}-title` : undefined
 const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 25vw, 50vw' : '(min-width: 768px) 33vw, 50vw'
 ---
 {items.length > 0 && (
-  <Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <Section kit="gallery" measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
     {/* A scrolling strip is a labelled, focusable region so the keyboard can scroll it. */}
     <div tabindex={layout === 'row' ? 0 : undefined} role={layout === 'row' ? 'region' : undefined} aria-label={layout === 'row' ? heading ?? regionLabel : undefined}>
@@ -107,7 +111,7 @@ const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 2
                 : open === 'link'
                   ? <a href={safeHref(item.image.src)} class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
                   : <div class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></div>}
-              {item.caption && <figcaption class={s.caption({ class: tone === 'accent' ? 'opacity-100' : undefined })}>{item.caption}</figcaption>}
+              {item.caption && <figcaption class={s.caption()}>{item.caption}</figcaption>}
             </figure>
             {open === 'popover' && (
               <div id={viewer} popover class={s.viewer()}>

package/components/gallery/meta.json

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

package/components/header/Header.astro

@@ -7,8 +7,10 @@ import KitImage from '../_shared/KitImage.astro'
 import type { ActionInput, ImageInput, NavItem } from '../_shared/types'
 import Nav from '../nav/Nav.astro'
 import SearchBox from '../search-box/SearchBox.astro'
+import { instanceId } from '../_shared/instance-id'
 import { safeHref } from '../_shared/safe-url'
 import { brandColorValue } from './header'
+import { muted, mutedInverse } from '../_shared/muted'
 
 const header = tv({
   slots: {
@@ -24,8 +26,8 @@ const header = tv({
     },
     tone: {
       default: { root: 'bg-surface text-ink' },
-      inverse: { root: 'bg-ink text-surface' },
-      transparent: { root: 'absolute inset-x-0 top-0 bg-transparent text-surface' },
+      inverse: { root: `bg-ink text-surface ${mutedInverse}` },
+      transparent: { root: `absolute inset-x-0 top-0 bg-transparent text-surface ${mutedInverse}` },
     },
     position: { static: {}, sticky: { root: 'sticky top-0' } },
     bordered: { true: {}, false: {} },
@@ -76,6 +78,8 @@ interface Props {
 
 const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, brandColor, logo, showName = true, homeHref = '/', items, action, search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position, bordered })
+// The header's search field: `header-search` on a page, a second header's its own (its label points at its own input).
+const searchId = search ? instanceId(Astro.locals, undefined, 'header-search') : undefined
 const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
 const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
 const brandColour = brandColorValue(brandColor)
@@ -93,7 +97,7 @@ const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-
             {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
             {showName && <span>{siteName}</span>}
           </a>
-          <p class="opacity-75" data-kit-tagline>{tagline}</p>
+          <p class={muted} data-kit-tagline>{tagline}</p>
         </div>
       )
       : (
@@ -104,7 +108,7 @@ const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-
       )}
     {search && (
       <div class="order-last basis-full lg:order-none lg:ms-auto lg:basis-auto">
-        <SearchBox action={search.action} label={search.label} placeholder={search.placeholder} submitLabel={search.submitLabel} size="sm" id="header-search" />
+        <SearchBox action={search.action} label={search.label} placeholder={search.placeholder} submitLabel={search.submitLabel} size="sm" id={searchId} />
       </div>
     )}
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ms-auto']}>

package/components/header/meta.json

@@ -4,7 +4,7 @@
   "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
   "category": "chrome",
   "uses": ["nav", "search-box"],
-  "shared": ["Button.astro", "KitImage.astro", "safe-url.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "instance-id.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["split", "centered", "brand-left"], "default": "split", "description": "split: brand left, navigation right. centered: brand above centred navigation. brand-left: navigation right after the brand." },
     "tone": { "options": ["default", "inverse", "transparent"], "default": "default", "description": "Surface with a bottom border, dark (ink) background, or transparent over the hero that follows." },

package/components/hero/Hero.astro

@@ -5,17 +5,19 @@ 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 { measuredFrame } from '../_shared/measured'
 import { coverHeight as heightOf, headingStyle as styleOf } from './hero'
+import { muted, mutedInverse } from '../_shared/muted'
 
 const hero = tv({
   slots: {
     grid: 'grid items-center gap-10',
     copy: 'flex flex-col gap-5',
-    eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
+    eyebrow: `text-sm font-semibold tracking-wide uppercase ${muted}`,
     heading: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-5xl lg:text-6xl',
-    lead: 'max-w-2xl text-lg text-pretty opacity-85 md:text-xl',
+    lead: `max-w-2xl text-lg text-pretty ${muted} md:text-xl`,
     // A hero's short promise list ("Fast, easy and painless"), each with its icon when it has one.
     points: 'flex flex-wrap gap-x-6 gap-y-2 text-base font-medium md:text-lg',
     point: 'flex items-center gap-2',
@@ -29,7 +31,7 @@ const hero = tv({
       cover: { grid: 'relative z-10 min-h-[28rem] md:min-h-[36rem]', copy: 'max-w-3xl' },
     },
     // 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: {}, muted: {}, inverse: {}, accent: { eyebrow: 'opacity-100', lead: 'opacity-100' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: {} },
     // Where a cover sets its text over the image. WordPress covers centre it unless told otherwise.
     align: { start: {}, center: {} },
     // The lead's own alignment: `start` keeps it at the start edge, across the column, under a centred heading
@@ -89,10 +91,12 @@ interface Props {
 }
 
 
-const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id, minHeight, headingScale, headingSize, measured } = Astro.props
+const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id: givenId, minHeight, headingScale, headingSize, measured } = Astro.props
+// Every section has an id, so a theme or a design layer can address this one: the page's, or `hero`, `hero-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'hero')
 const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize })
 const Heading = level === 1 ? 'h1' : 'h2'
-const headingId = id ? `${id}-title` : undefined
+const headingId = `${id}-title`
 const cover = layout === 'cover' && image
 const coverHeight = cover ? heightOf(minHeight) : undefined
 const headingStyle = styleOf(headingScale, level, headingSize)
@@ -102,8 +106,8 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
 ---
 {cover && width === 'content'
   ? (
-    <Section measured={sectionMeasured} tone="none" spacing="sm" width="prose" id={id} aria-labelledby={headingId}>
-      <div class="relative isolate overflow-hidden bg-ink text-surface">
+    <Section kit="hero" measured={sectionMeasured} tone="none" spacing="sm" width="prose" id={id} aria-labelledby={headingId}>
+      <div class={`relative isolate overflow-hidden bg-ink text-surface ${mutedInverse}`}>
         <KitImage image={image} priority sizes="(min-width: 768px) 46rem, 100vw" class="absolute inset-0 -z-10 h-full w-full object-cover" />
         <div class:list={['absolute inset-0 -z-10', !scrim && 'bg-ink/60']} style={scrim ? `background: ${scrim}` : undefined} aria-hidden="true" />
         <div class="px-6 py-10 md:px-10">
@@ -122,7 +126,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
   )
   : cover
   ? (
-    <Section measured={sectionMeasured} tone="inverse" spacing="none" width="none" id={id} aria-labelledby={headingId} class="relative isolate overflow-hidden">
+    <Section kit="hero" measured={sectionMeasured} tone="inverse" spacing="none" width="none" id={id} aria-labelledby={headingId} class="relative isolate overflow-hidden">
       <KitImage image={image} priority sizes="100vw" class="absolute inset-0 -z-10 h-full w-full object-cover" />
       <div class:list={['absolute inset-0 -z-10', !scrim && 'bg-ink/60']} style={scrim ? `background: ${scrim}` : undefined} aria-hidden="true" />
       <div class:list={['container-page', measured?.padY === undefined && 'py-16 md:py-28']}>
@@ -139,7 +143,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
     </Section>
   )
   : (
-    <Section measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId}>
+    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId}>
       {/* Without an image a split has nothing beside the text: the text takes the whole row, not half of it. */}
       <div class={s.grid({ class: image ? undefined : 'md:grid-cols-1' })}>
         <div class={s.copy()}>

package/components/hero/meta.json

@@ -8,7 +8,9 @@
     "Button.astro",
     "KitImage.astro",
     "Section.astro",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -198,7 +200,7 @@
     "id": {
       "type": "string",
       "content": false,
-      "description": "Anchor id of the section; the heading gets `<id>-title`."
+      "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `hero`, `hero-2`, … in render order, so every section on a page has its own."
     },
     "minHeight": {
       "type": "integer",

package/components/language-switcher/LanguageSwitcher.astro

@@ -5,13 +5,14 @@
 // equivalent in each language); a link without one is not drawn.
 import { tv } from 'tailwind-variants'
 import { safeHref } from '../_shared/safe-url'
+import { muted, mutedReset } from '../_shared/muted'
 
 const switcher = tv({
   slots: {
     list: 'flex flex-wrap items-center gap-x-4 gap-y-1',
-    link: 'text-current no-underline opacity-80 hover:opacity-100 hover:underline aria-[current=true]:font-semibold aria-[current=true]:opacity-100',
+    link: `no-underline ${muted} hover:text-current hover:underline aria-[current=true]:font-semibold aria-[current=true]:text-current`,
     summary: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent [&::-webkit-details-marker]:hidden',
-    panel: 'absolute z-30 mt-1 flex min-w-40 flex-col gap-1 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg',
+    panel: `absolute z-30 mt-1 flex min-w-40 flex-col gap-1 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg ${mutedReset}`,
   },
   variants: {
     layout: { list: {}, menu: {} },

package/components/language-switcher/meta.json

@@ -4,7 +4,7 @@
   "description": "Links to the same page in the site's other languages, each with hreflang and its own lang; the current one is marked aria-current. A plain list or a native <details> menu; no JavaScript. The addresses are the page's equivalents in each language, supplied by the caller.",
   "category": "chrome",
   "uses": [],
-  "shared": ["safe-url.ts"],
+  "shared": ["muted.ts", "safe-url.ts"],
   "variants": {
     "layout": {
       "options": [

package/components/logo-cloud/LogoCloud.astro

@@ -5,14 +5,16 @@
 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 { imageOf, type ImageSource } from '../_shared/image'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { muted } from '../_shared/muted'
 
 const cloud = tv({
   slots: {
-    heading: 'mb-8 text-sm font-semibold tracking-wide uppercase opacity-80',
+    heading: `mb-8 text-sm font-semibold tracking-wide uppercase ${muted}`,
     list: 'grid grid-cols-2 items-center gap-x-8 gap-y-10 sm:grid-cols-3',
     item: 'flex items-center justify-center',
     logo: 'h-10 w-auto max-w-full object-contain transition duration-200',
@@ -46,7 +48,7 @@ const cloud = tv({
       'mono-light': { logo: 'brightness-0 invert' },
     },
     align: { center: { heading: 'text-center' }, start: { heading: 'text-start' } },
-    tone: { default: {}, muted: {}, inverse: {}, accent: { heading: 'opacity-100' } },
+    tone: { default: {}, muted: {}, inverse: {}, accent: {} },
   },
   compoundVariants: [
     { layout: 'row', align: 'center', class: { list: 'justify-center' } },
@@ -78,11 +80,13 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, items, layout, columns, logoHeight, style, align, tone, measured, id } = Astro.props
+const { heading, items, layout, columns, logoHeight, 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 `logo-cloud`, `logo-cloud-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'logo-cloud')
 const s = cloud({ layout, columns, logoHeight, style, align, tone })
 // Measured columns and gap shape the grid layout only; a row or a strip keeps its own flow.
 const grid = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
-const headingId = heading && id ? `${id}-title` : undefined
+const headingId = heading ? `${id}-title` : undefined
 const marquee = layout === 'marquee'
 // A linked logo with no name is read as the site it goes to, never as a made-up word.
 const hostOf = (href: string) => {
@@ -95,7 +99,7 @@ const shown = items.flatMap((item) => {
 // About four seconds a logo: the strip reads at a pace, whatever its length.
 const duration = `${Math.max(20, shown.length * 4)}s`
 ---
-<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
+<Section kit="logo-cloud" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
   <div class:list={[marquee && 'kit-marquee overflow-hidden']} style={marquee ? `--kit-marquee-duration:${duration}` : undefined}>
     <ul class={s.list({ class: grid })}>

package/components/logo-cloud/meta.json

@@ -8,7 +8,9 @@
     "KitImage.astro",
     "Section.astro",
     "image.ts",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -217,7 +219,7 @@
     "id": {
       "type": "string",
       "content": false,
-      "description": "Anchor id of the section; the heading gets `<id>-title`."
+      "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `logo-cloud`, `logo-cloud-2`, … in render order, so every section on a page has its own."
     }
   },
   "slots": {},

package/components/nav/Nav.astro

@@ -8,13 +8,15 @@ import { tv } from 'tailwind-variants'
 import NavTree from './NavTree.astro'
 import type { NavItem } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted, mutedReset } from '../_shared/muted'
 
 const nav = tv({
   slots: {
     list: 'hidden items-center md:flex',
     link: 'no-underline aria-[current=page]:font-semibold',
     // hidden, not invisible: a closed submenu takes no space, so one under the last item cannot widen the page.
-    sub: 'absolute top-full z-30 hidden min-w-48 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg group-hover:block group-focus-within:block group-data-[closed]:hidden!',
+    sub: `absolute top-full z-30 hidden min-w-48 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg group-hover:block group-focus-within:block group-data-[closed]:hidden! ${mutedReset}`,
     toggle: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 md:hidden [&::-webkit-details-marker]:hidden',
   },
   variants: {
@@ -23,10 +25,10 @@ const nav = tv({
     // flyout: a list under the item. mega: a wide panel, one column per child with the grandchildren listed under it.
     menu: { flyout: {}, mega: { sub: 'w-max max-w-[min(64rem,90vw)] p-5' } },
     density: { compact: { list: 'gap-5 text-sm' }, comfortable: { list: 'gap-8 text-base' } },
-    // current: the surrounding text, dimmed until hovered. link: the site's link colour at full strength, as themes that
+    // current: the surrounding text's muted role until hovered. link: the site's link colour at full strength, as themes that
     // colour every link draw their menu; the toggle keeps the surrounding text.
     color: {
-      current: { link: 'text-current opacity-80 hover:opacity-100 aria-[current=page]:opacity-100' },
+      current: { link: `${muted} hover:text-current aria-[current=page]:text-current` },
       link: { link: 'text-[color:var(--color-link,var(--color-accent))]' },
     },
   },
@@ -52,7 +54,9 @@ interface Props {
   part?: string | undefined
 }
 
-const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', menu, align, density, color, id = 'site-nav', part } = Astro.props
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', menu, align, density, color, id: givenId, part } = 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, 'site-nav')
 const { list, link, sub, toggle } = nav({ menu, align, density, color })
 const current = Astro.url.pathname
 const drawer = `${id}-drawer`
@@ -99,7 +103,7 @@ const real = (href: string | undefined) => !!href && href !== '#'
             <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
             {menuLabel}
           </button>
-          <div id={drawer} popover class="m-0 ms-auto h-dvh max-h-none w-80 max-w-[85vw] border-s border-line bg-surface p-6 text-ink shadow-xl backdrop:bg-ink/40">
+          <div id={drawer} popover class={`m-0 ms-auto h-dvh max-h-none w-80 max-w-[85vw] border-s border-line bg-surface p-6 text-ink shadow-xl backdrop:bg-ink/40 ${mutedReset}`}>
             <button type="button" popovertarget={drawer} popovertargetaction="hide" class="mb-6 ms-auto flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-surface-muted">
               <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
               {closeLabel}
@@ -123,7 +127,7 @@ const real = (href: string | undefined) => !!href && href !== '#'
             <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
             {menuLabel}
           </summary>
-          <ul class="absolute end-0 z-30 mt-2 flex w-64 flex-col gap-1 rounded-lg border border-line bg-surface p-3 text-ink shadow-lg">
+          <ul class={`absolute end-0 z-30 mt-2 flex w-64 flex-col gap-1 rounded-lg border border-line bg-surface p-3 text-ink shadow-lg ${mutedReset}`}>
             {items.map(item => (
               <li>
                 {real(item.href)

package/components/nav/meta.json

@@ -5,6 +5,8 @@
   "category": "chrome",
   "uses": [],
   "shared": [
+    "instance-id.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],