@contentrain/astro-kit 0.40.0 → 0.41.0

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"
   ],

package/components/newsletter/Newsletter.astro

@@ -13,19 +13,21 @@ import Section from '../_shared/Section.astro'
 import type { MeasuredStyle } from '../_shared/types'
 import { newsletterForm } from './newsletter'
 import { safeUrl } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted } from '../_shared/muted'
 
 const newsletter = tv({
   slots: {
     box: 'flex flex-col gap-6',
     copy: '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-xl text-pretty opacity-85',
+    intro: `max-w-xl text-pretty ${muted}`,
     form: 'flex flex-col gap-3',
     field: 'flex min-w-0 flex-col gap-1.5',
     label: 'text-sm font-semibold',
     input: 'min-h-11 w-full rounded-[var(--radius-control,var(--radius-md))] border border-line bg-surface px-3 py-2 text-base text-ink placeholder:text-ink-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
     submit: 'inline-flex min-h-11 items-center justify-center rounded-[var(--radius-control,var(--radius-md))] px-5 py-2.5 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 bg-accent text-accent-ink hover:bg-ink hover:text-surface',
-    note: 'text-sm opacity-75',
+    note: `text-sm ${muted}`,
   },
   variants: {
     layout: {
@@ -37,7 +39,7 @@ const newsletter = tv({
       default: {},
       muted: {},
       inverse: { submit: 'hover:bg-surface hover:text-ink' },
-      accent: { intro: 'opacity-100', note: 'opacity-100', submit: 'bg-ink text-surface hover:bg-surface hover:text-ink' },
+      accent: { submit: 'bg-ink text-surface hover:bg-surface hover:text-ink' },
     },
   },
   defaultVariants: { layout: 'inline', tone: 'muted' },
@@ -73,9 +75,11 @@ interface Props {
 const {
   action, provider = 'mailchimp', emailName, askName = false, heading, intro, note,
   emailLabel = 'Email address', nameLabel = 'First name', submitLabel = 'Subscribe', newTab = true,
-  layout, tone = 'muted', id = 'newsletter',
+  layout, tone = 'muted', 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, 'newsletter')
 const form = newsletterForm(provider, action, { email: emailName }, Astro.site)
 const s = newsletter({ layout, tone })
 const headingId = heading ? `${id}-title` : undefined
@@ -83,7 +87,7 @@ const headingId = heading ? `${id}-title` : undefined
 const formRel: Record<string, string> = newTab ? { rel: 'noopener noreferrer' } : {}
 ---
 {form && (
-  <Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <Section kit="newsletter" measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     <div class={s.box()}>
       {(heading || intro) && (
         <div class={s.copy()}>

package/components/newsletter/meta.json

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

package/components/post-list/PostList.astro

@@ -10,6 +10,8 @@ import type { MeasuredStyle } from '../_shared/types'
 import PostCard from '../post-card/PostCard.astro'
 import type { ImageInput, LinkInput } from '../_shared/types'
 import { safeHref } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
+import { muted } from '../_shared/muted'
 
 export interface PostItem {
   title: string
@@ -25,7 +27,7 @@ const list = tv({
   slots: {
     header: 'mb-10 flex max-w-2xl flex-col gap-3',
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
-    intro: 'text-lg opacity-80',
+    intro: `text-lg ${muted}`,
     items: 'grid gap-8',
     more: 'mt-10',
   },
@@ -74,7 +76,9 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, intro, posts, layout = 'grid', columns, showImage = true, showExcerpt = true, showAuthor = true, showCategory = true, excerptLines, locale, timeZone, surface, moreHref, moreLabel, tone, measured, id = 'posts' } = Astro.props
+const { heading, intro, posts, layout = 'grid', columns, showImage = true, showExcerpt = true, showAuthor = true, showCategory = true, excerptLines, locale, timeZone, surface, moreHref, moreLabel, 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, 'posts')
 const s = list({ layout, columns })
 const headingId = heading ? `${id}-title` : undefined
 // Cards sit one heading level under the section's; with no section heading they are the page's h2s.
@@ -84,7 +88,7 @@ const sizes = layout === 'list' || layout === 'compact' ? '256px' : columns ===
 const cardLayout = (i: number) => layout === 'compact' ? 'minimal' : layout === 'list' || (layout === 'featured' && i === 0) ? 'horizontal' : 'vertical'
 ---
 {posts.length > 0 && (
-  <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
+  <Section kit="post-list" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
     {(heading || intro) && (
       <header class={s.header()}>
         {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}

package/components/post-list/meta.json

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

package/components/pricing/Pricing.astro

@@ -8,15 +8,17 @@
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.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 { renderMarkdown } from '../../../lib/markdown'
+import { muted, mutedReset } from '../_shared/muted'
 
 const pricing = tv({
   slots: {
     header: 'mx-auto mb-10 flex max-w-2xl flex-col items-center gap-3 text-center',
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
-    intro: 'text-lg opacity-80',
+    intro: `text-lg ${muted}`,
     list: 'grid items-stretch gap-6 sm:grid-cols-2',
     toggle: 'mx-auto mb-8 flex w-fit rounded-full border border-line p-1',
     toggleOption: 'rounded-full px-4 py-1.5 text-sm font-medium has-[:checked]:bg-accent has-[:checked]:text-accent-ink has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent',
@@ -24,13 +26,13 @@ const pricing = tv({
     table: 'w-full min-w-[32rem] border-collapse text-start',
     cell: 'border-b border-line px-4 py-3 text-center align-top',
     rowHead: 'border-b border-line px-4 py-3 text-start font-normal',
-    plan: 'relative flex flex-col gap-5 rounded-card border border-line bg-surface p-6 text-ink md:p-8',
+    plan: `relative flex flex-col gap-5 rounded-card border border-line bg-surface p-6 text-ink md:p-8 ${mutedReset}`,
     badge: 'absolute -top-3 start-6 rounded-full bg-accent px-3 py-1 text-xs font-semibold text-accent-ink',
     name: 'text-lg [font-weight:var(--font-weight-heading,600)]',
     price: 'flex items-baseline gap-1',
     amount: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight',
-    period: 'text-sm opacity-75',
-    description: 'text-pretty opacity-80',
+    period: `text-sm ${muted}`,
+    description: `text-pretty ${muted}`,
     features: 'prose-site prose max-w-none text-current prose-ul:ps-5 prose-li:my-1',
     action: 'mt-auto pt-2',
   },
@@ -47,7 +49,7 @@ const pricing = tv({
       plain: {},
     },
     compact: { true: { list: 'gap-4', plan: 'gap-3 p-4 md:p-5', amount: 'text-3xl' }, false: {} },
-    tone: { default: {}, muted: { plan: 'border-transparent' }, inverse: { plan: 'border-transparent' }, accent: { intro: 'opacity-100', plan: 'border-transparent', badge: 'bg-ink text-surface' } },
+    tone: { default: {}, muted: { plan: 'border-transparent' }, inverse: { plan: 'border-transparent' }, accent: { plan: 'border-transparent', badge: 'bg-ink text-surface' } },
   },
   defaultVariants: { columns: '3', featureStyle: 'plain', compact: false, tone: 'default' },
 })
@@ -95,22 +97,24 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, intro, plans, featuredLabel = 'Most popular', columns, layout = 'cards', featureStyle, compact, billingToggle = 'none', billingMainLabel = 'Monthly', billingAltLabel = 'Yearly', billingLegend = 'Billing period', includedLabel = 'Included', notIncludedLabel = 'Not included', tone, measured, id } = Astro.props
+const { heading, intro, plans, featuredLabel = 'Most popular', columns, layout = 'cards', featureStyle, compact, billingToggle = 'none', billingMainLabel = 'Monthly', billingAltLabel = 'Yearly', billingLegend = 'Billing period', includedLabel = 'Included', notIncludedLabel = 'Not included', 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 `pricing`, `pricing-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'pricing')
 const s = pricing({ columns, featureStyle, compact: compact ?? false, tone })
-// The radio group's name must be unique on the page: the section's id, or a hash of its plans when it has none.
-const group = id ?? `pricing-${[...JSON.stringify(plans)].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7).toString(36)}`
+// The radio group's name must be unique on the page: the section's id is.
+const group = id
 const toggled = billingToggle === 'radio' && plans.some(plan => plan.priceAlt)
 // The cards' list items, as plain strings, for the table's feature rows (the markdown list's `- ` / `* ` lines).
 const itemsOf = (md?: string) => (md ?? '').split('\n').flatMap((line) => { const m = /^\s*[-*]\s+(.*\S)/.exec(line); return m ? [m[1]!.replace(/[*_`]/g, '')] : [] })
 const rows = layout === 'table' ? [...new Set(plans.flatMap(plan => itemsOf(plan.features)))] : []
 const included = plans.map(plan => new Set(itemsOf(plan.features)))
-const headingId = heading && id ? `${id}-title` : undefined
+const headingId = heading ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
 const PlanHeading = heading ? 'h3' : 'h2'
 const features = await Promise.all(plans.map(plan => renderMarkdown(plan.features)))
 ---
 {plans.length > 0 && (
-  <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
+  <Section kit="pricing" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
     {(heading || intro) && (
       <header class={s.header()}>
         {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
@@ -128,7 +132,7 @@ const features = await Promise.all(plans.map(plan => renderMarkdown(plan.feature
                 <th scope="col" class={s.cell({ class: plan.featured ? 'bg-surface-muted' : undefined })}>
                   <span class="block text-lg [font-weight:var(--font-weight-heading,600)]">{plan.name}</span>
                   <span class="block text-2xl [font-weight:var(--font-weight-heading,700)]">{plan.price}</span>
-                  {plan.period && <span class="block text-sm opacity-75">{plan.period}</span>}
+                  {plan.period && <span class:list={['block text-sm', muted]}>{plan.period}</span>}
                   {(plan.badge ?? (plan.featured ? featuredLabel : undefined)) && <span class="mt-1 inline-block rounded-full bg-accent px-3 py-0.5 text-xs font-semibold text-accent-ink">{plan.badge ?? featuredLabel}</span>}
                 </th>
               ))}

package/components/pricing/meta.json

@@ -7,7 +7,9 @@
   "shared": [
     "Button.astro",
     "Section.astro",
+    "instance-id.ts",
     "measured.ts",
+    "muted.ts",
     "safe-url.ts",
     "types.ts"
   ],
@@ -145,7 +147,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, `pricing`, `pricing-2`, … in render order, so every section on a page has its own."
     },
     "compact": {
       "type": "boolean",

package/components/search-box/SearchBox.astro

@@ -4,6 +4,7 @@
 // assistive technology unless `labelStyle` shows it.
 import { tv } from 'tailwind-variants'
 import { safeUrl } from '../_shared/safe-url'
+import { instanceId } from '../_shared/instance-id'
 
 const search = tv({
   slots: {
@@ -37,7 +38,9 @@ interface Props {
   id?: string | undefined
 }
 
-const { action = '/search', label = 'Search', placeholder, submitLabel = label, size, width, button, labelStyle, id = 'site-search' } = Astro.props
+const { action = '/search', label = 'Search', placeholder, submitLabel = label, size, width, button, labelStyle, 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, 'site-search')
 const s = search({ size, width, button, labelStyle })
 ---
 <form role="search" method="get" action={safeUrl(action)} class={s.form()} data-cr-part="search-box">

package/components/search-box/meta.json

@@ -4,7 +4,7 @@
   "description": "A search field that sends the visitor to the site's search page (`/search?q=…`): a plain GET form with a labelled role=search landmark, no JavaScript. For a header slot or inline in a page.",
   "category": "chrome",
   "uses": [],
-  "shared": ["safe-url.ts"],
+  "shared": ["instance-id.ts", "safe-url.ts"],
   "variants": {
     "size": {
       "options": [

package/components/slider/Slider.astro

@@ -8,6 +8,7 @@ import Section from '../_shared/Section.astro'
 import type { ImageSource } from '../_shared/image'
 import type { ActionInput, MeasuredStyle } from '../_shared/types'
 import SliderTrack from './SliderTrack.astro'
+import { instanceId } from '../_shared/instance-id'
 
 interface Slide {
   /** The image's address (or, until 0.7, an `ImageInput`). Optional: a text card (a quote, a testimonial) is a slide too. */
@@ -54,7 +55,9 @@ interface Props {
 }
 
 const props = Astro.props
+// The section and its track share one id (the track is `<id>-track`), taken once here so the track keeps it.
+const id = props.measured ? instanceId(Astro.locals, props.id, 'slider') : undefined
 ---
 {props.measured
-  ? <Section measured={props.measured} tone="none" spacing="sm" id={props.id}><SliderTrack {...props} id={props.id ?? 'slider'} framed={false} /></Section>
+  ? <Section kit="slider" measured={props.measured} tone="none" spacing="sm" id={id}><SliderTrack {...props} id={id} framed={false} /></Section>
   : <SliderTrack {...props} />}