@contentrain/astro-kit 0.40.0 → 0.42.0

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} />}

package/components/slider/SliderTrack.astro

@@ -14,6 +14,8 @@ import { safeSrc } from '../_shared/safe-url'
 import { onVideoHost, videoTarget, type EmbedTarget } from '../_shared/embed-target'
 import { measuredSlides } from '../_shared/measured'
 import { type ActionInput, type ImageInput, type MeasuredStyle } from '../_shared/types'
+import { instanceId } from '../_shared/instance-id'
+import { muted, mutedReset } from '../_shared/muted'
 
 const slider = tv({
   slots: {
@@ -23,7 +25,7 @@ const slider = tv({
     image: 'w-full object-cover',
     caption: 'flex flex-col items-start gap-2',
     // A slide with no image: its text as a card the height of the row, never laid over an image that is not there.
-    card: 'flex h-full flex-col items-start gap-2 rounded-[var(--radius-card)] bg-surface p-6 text-ink ring-1 ring-line/60',
+    card: `flex h-full flex-col items-start gap-2 rounded-[var(--radius-card)] bg-surface p-6 text-ink ring-1 ring-line/60 ${mutedReset}`,
   },
   variants: {
     perView: {
@@ -39,7 +41,7 @@ const slider = tv({
     caption: {
       below: { image: 'rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4' },
       // Over the image on wide screens; under it on phones, where the image is too short to hold text.
-      overlay: { image: 'rounded-[var(--radius-image,var(--radius-card))] md:rounded-none', slide: 'md:rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4 md:absolute md:inset-x-0 md:bottom-0 md:bg-gradient-to-t md:from-ink/80 md:to-transparent md:p-6 md:pt-16 md:text-surface' },
+      overlay: { image: 'rounded-[var(--radius-image,var(--radius-card))] md:rounded-none', slide: 'md:rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4 md:absolute md:inset-x-0 md:bottom-0 md:bg-gradient-to-t md:from-ink/80 md:to-transparent md:p-6 md:pt-16 md:text-surface md:[--kit-muted:var(--color-ink-muted-inverse,var(--color-surface))]' },
     },
   },
   defaultVariants: { perView: '1', aspect: 'wide', caption: 'overlay' },
@@ -99,7 +101,9 @@ interface Props {
   framed?: boolean | undefined
 }
 
-const { slides: given, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', playLabel = 'Play', loop = false, perView = '1', aspect, caption, heading, intro, eyebrow, actions, measured, id = 'slider', framed = true } = Astro.props
+const { slides: given, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', playLabel = 'Play', loop = false, perView = '1', aspect, caption, heading, intro, eyebrow, actions, measured, id: givenId, framed = true } = 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, 'slider')
 // A slide is drawn when it has something to show: an image, a video (a file or another site's), or a text card (a title, a text or a link) where
 // the source carousel moved quotes or testimonials. A slide with none of them is dropped.
 const slides = given.flatMap((slide) => {
@@ -120,6 +124,8 @@ const below = slider({ perView: measuredRow ? '1' : perView, aspect, caption: 'b
 const trackId = `${id}-track`
 const sizes = measuredRow ? '(min-width: 1216px) 1152px, 100vw' : perView === '1' ? '(min-width: 1216px) 1152px, 100vw' : perView === '2' ? '(min-width: 640px) 50vw, 85vw' : '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 85vw'
 // Arrows from sm up; on phones the carousel is swiped and the dots show the position.
+// Framed, the carousel is its own section: the same hooks as every other (`id`, `data-kit-section`), its padding its own,
+// so a theme's section spacing leaves it as it is.
 const Root = framed ? 'section' : 'div'
 const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-center justify-center rounded-full bg-surface/90 text-ink shadow-md ring-1 ring-line hover:bg-surface disabled:opacity-40 sm:group-data-[ready]:flex'
 // A text card has no picture for the arrows to sit on: over it they would cover its words. A carousel with any text
@@ -129,7 +135,7 @@ const cards = slides.some(slide => !slide.image && !slide.video && !slide.player
 // ratio, so the player that replaces the link moves nothing.
 const under = 'flex size-11 shrink-0 items-center justify-center rounded-full bg-surface text-ink ring-1 ring-line hover:bg-surface disabled:opacity-40'
 ---
-<Root class:list={['group relative', framed && 'container-page py-8']} role={framed ? undefined : 'region'} aria-roledescription="carousel" aria-label={label} data-kit-slider data-loop={loop ? '' : undefined} data-slide-label={slideLabel}>
+<Root id={framed ? id : undefined} class:list={['group relative', framed && 'container-page py-8']} data-kit-section={framed ? 'slider' : undefined} data-kit-spacing={framed ? 'none' : undefined} role={framed ? undefined : 'region'} aria-roledescription="carousel" aria-label={label} data-kit-slider data-loop={loop ? '' : undefined} data-slide-label={slideLabel}>
   <SectionHeader heading={heading} intro={intro} eyebrow={eyebrow} actions={actions} />
   <div class={slots.viewport()} data-viewport tabindex="0" role="group" aria-label={label}>
     <div class:list={['flex gap-4 [&>*]:shrink-0 group-data-[ready]:[&>*]:snap-align-none', measuredRow?.track]} id={trackId} data-container>
@@ -152,7 +158,7 @@ const under = 'flex size-11 shrink-0 items-center justify-center rounded-full bg
           {(slide.title || slide.text || slide.action) && (
             <div class={slide.video || slide.player ? below.caption() : slide.image ? slots.caption() : slots.card()}>
               {slide.title && <p class="text-xl [font-weight:var(--font-weight-heading,600)] text-balance">{slide.title}</p>}
-              {slide.text && <p class="opacity-85">{slide.text}</p>}
+              {slide.text && <p class={muted}>{slide.text}</p>}
               {slide.action && <Button action={slide.action} size="sm" class="mt-2" />}
             </div>
           )}

package/components/slider/meta.json

@@ -4,7 +4,7 @@
   "description": "A carousel of images, videos (a file, or a YouTube/Vimeo link loaded only on click) or text cards, with optional title, text and button per slide. Without JavaScript it is a snapping horizontal scroller; Embla adds paging, arrows and dots.",
   "category": "section",
   "uses": [],
-  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "SectionHeader.astro", "embed-frame.ts", "embed-target.ts", "image.ts", "measured.ts", "safe-url.ts", "types.ts"],
+  "shared": ["Button.astro", "KitImage.astro", "Section.astro", "SectionHeader.astro", "embed-frame.ts", "embed-target.ts", "image.ts", "instance-id.ts", "measured.ts", "muted.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "perView": { "options": ["1", "2", "3"], "default": "1", "description": "Slides visible at once on wide screens." },
     "aspect": { "options": ["wide", "standard", "square"], "default": "wide", "description": "Image aspect ratio: 21:9, 3:2 or 1:1." },

package/components/social-links/SocialLinks.astro

@@ -5,11 +5,12 @@
 import { tv } from 'tailwind-variants'
 import { addressLabel, NETWORK_MARKS, networkOf } from '../_shared/social'
 import { safeHref } from '../_shared/safe-url'
+import { muted } from '../_shared/muted'
 
 const social = tv({
   slots: {
     list: 'flex flex-wrap items-center',
-    link: 'inline-flex items-center justify-center gap-2 text-current no-underline opacity-85 hover:opacity-100 focus-visible:opacity-100',
+    link: `inline-flex items-center justify-center gap-2 no-underline ${muted} hover:text-current focus-visible:text-current`,
     mark: 'shrink-0',
   },
   variants: {

package/components/social-links/meta.json

@@ -5,8 +5,9 @@
   "category": "chrome",
   "uses": [],
   "shared": [
-    "social.ts",
-    "safe-url.ts"
+    "muted.ts",
+    "safe-url.ts",
+    "social.ts"
   ],
   "variants": {
     "display": {

package/components/split/Split.astro

@@ -9,13 +9,16 @@ import Embed from '../embed/Embed.astro'
 import FeatureList from '../feature-list/FeatureList.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 } from '../_shared/muted'
+import { BLEED } from '../_shared/bleed'
 
 const split = tv({
   slots: {
     grid: 'grid items-center gap-10 md:gap-16',
     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-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
     body: 'prose prose-site max-w-none text-pretty',
     actions: 'flex flex-wrap gap-3 pt-2',
@@ -33,6 +36,10 @@ const split = tv({
       none: { media: 'rounded-none' },
       rounded: { media: 'rounded-[var(--radius-image,var(--radius-card))]' },
       circle: { media: 'mx-auto aspect-square w-full max-w-lg rounded-full', image: 'h-full' },
+      // A fixed set of masks (never a value from content): an arch over the image, a cut corner, a soft blob.
+      arch: { media: 'rounded-t-full', image: 'h-full' },
+      chamfer: { media: '[clip-path:polygon(0_0,82%_0,100%_18%,100%_100%,0_100%)]' },
+      blob: { media: 'rounded-[38%_62%_55%_45%/48%_42%_58%_52%]' },
     },
     // edge: the image runs on to the viewport's edge on its side (wide screens).
     imageBleed: { none: {}, edge: { media: 'rounded-none' } },
@@ -42,7 +49,7 @@ const split = tv({
     sticky: { true: { media: 'md:sticky md:top-8 md:self-start' }, false: {} },
     align: { start: {}, center: { copy: 'items-center text-center', actions: 'justify-center' } },
     // 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' }, brand: { eyebrow: 'opacity-100' }, none: {} },
+    tone: { default: {}, muted: {}, inverse: {}, accent: {}, brand: {}, none: {} },
   },
   defaultVariants: { imageSide: 'end', ratio: '1:1', imageFit: 'contain', imageShape: 'rounded', imageBleed: 'none', stackOrder: 'text-first', sticky: false, align: 'start', tone: 'default' },
 })
@@ -53,11 +60,6 @@ const COLUMNS = {
   text: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[5fr_7fr]', '7:5': 'md:grid-cols-[7fr_5fr]' },
   image: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[7fr_5fr]', '7:5': 'md:grid-cols-[5fr_7fr]' },
 } as const
-// The viewport's edge, from the content's edge: what is left of the page's width, halved.
-const BLEED = {
-  end: 'md:-me-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
-  start: 'md:-ms-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
-} as const
 
 interface Feature {
   title: string
@@ -85,7 +87,8 @@ interface Props {
   imageSide?: 'start' | 'end' | undefined
   ratio?: '1:1' | '5:7' | '7:5' | undefined
   imageFit?: 'contain' | 'cover' | undefined
-  imageShape?: 'none' | 'rounded' | 'circle' | undefined
+  /** The image's outline: none, rounded (the default), a circle, or one of a fixed set of masks: an arch, a cut corner (`chamfer`), a soft `blob`. */
+  imageShape?: 'none' | 'rounded' | 'circle' | 'arch' | 'chamfer' | 'blob' | undefined
   imageBleed?: 'none' | 'edge' | undefined
   mediaKind?: 'image' | 'video' | undefined
   featureStyle?: 'check' | 'icon' | undefined
@@ -98,16 +101,18 @@ interface Props {
   id?: string | undefined
 }
 
-const { heading, headingLevel = 2, eyebrow, body, actions = [], image, features = [], videoUrl, playLabel, imageSide, ratio = '1:1', imageFit, imageShape, imageBleed, mediaKind, featureStyle = 'check', stackOrder, sticky = false, align, tone, measured, id } = Astro.props
+const { heading, headingLevel = 2, eyebrow, body, actions = [], image, features = [], videoUrl, playLabel, imageSide, ratio = '1:1', imageFit, imageShape, imageBleed, mediaKind, featureStyle = 'check', stackOrder, sticky = false, 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 `split`, `split-2`, … in render order.
+const id = instanceId(Astro.locals, givenId, 'split')
 const s = split({ imageSide, ratio, imageFit, imageShape, imageBleed, stackOrder, sticky, align, tone })
 const Heading = `h${headingLevel}` as 'h2'
 const columns = COLUMNS[imageSide === 'start' ? 'image' : 'text'][ratio]
 const bleed = imageBleed === 'edge' ? BLEED[imageSide === 'start' ? 'start' : 'end'] : undefined
 const video = mediaKind === 'video' && videoUrl
-const headingId = id && heading ? `${id}-title` : undefined
+const headingId = heading ? `${id}-title` : undefined
 const html = await renderMarkdown(body)
 ---
-<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId} class={bleed ? 'overflow-x-clip' : undefined}>
+<Section kit="split" measured={measured} tone={tone} id={id} aria-labelledby={headingId} class={bleed ? 'overflow-x-clip' : undefined}>
   <div class:list={[s.grid(), columns]}>
     <div class={s.copy()}>
       {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}

package/components/split/fixtures.json

@@ -10,5 +10,8 @@
   { "name": "bleed-edge-start-none", "props": { "heading": "From the other side", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "imageSide": "start", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "none" } },
   { "name": "video-sticky-check", "props": { "heading": "See how it works", "headingLevel": 3, "mediaKind": "video", "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "playLabel": "Play video", "sticky": true, "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "features": [{ "title": "Fast", "text": "Static pages, one stylesheet.", "icon": "bolt" }, { "title": "Safe", "text": "Your repository stays yours.", "icon": "shield" }], "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
   { "name": "measured-frame", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "measured": { "containerPx": 1000, "padY": 80, "bg": { "color": "#eef2ff" }, "tone": "light" } } },
-  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } }
+  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } },
+  {"name": "shape-arch", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "arch", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}},
+  {"name": "shape-chamfer", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "chamfer", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}},
+  {"name": "shape-blob", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "blob", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}}
 ]