@contentrain/astro-kit 0.39.0 → 0.41.0

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

@@ -1,5 +1,5 @@
 ---
-// A carousel of images, videos or text cards, with optional captions. Without JavaScript it is a
+// A carousel of images, videos (a file, or a YouTube/Vimeo one loaded only on click) or text cards, with optional captions. Without JavaScript it is a
 // horizontally scrolling, snapping row — every slide is reachable. With it,
 // Embla turns the row into a paged carousel with previous/next buttons and
 // slide dots. The markup and the script are in SliderTrack.astro; given a
@@ -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. */
@@ -15,6 +16,8 @@ interface Slide {
   imageAlt?: string | undefined
   /** A video file's address (mp4, webm): drawn in place of the image (its poster), played only when the reader asks. */
   video?: string | undefined
+  /** A video on another site (its YouTube/Vimeo/Loom/Wistia page, or `youtube:<id>` / `vimeo:<id>`): a poster until the reader clicks it. */
+  embed?: string | undefined
   title?: string | undefined
   text?: string | undefined
   /** The slide's link, flat so a page stays within Contentrain's nesting depth. */
@@ -39,6 +42,8 @@ interface Props {
   slideLabel?: string | undefined
   /** Word between a slide number and the count ("of"). */
   ofLabel?: string | undefined
+  /** An embedded video's play button, before its name ("Play"). */
+  playLabel?: string | undefined
   loop?: boolean | undefined
   perView?: '1' | '2' | '3' | undefined
   aspect?: 'wide' | 'standard' | 'square' | undefined
@@ -50,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

@@ -1,6 +1,6 @@
 ---
 // A carousel of images with optional captions, of videos (played only when the
-// reader asks), or of text cards (a slide with no image: quotes, testimonials). Without JavaScript it is a
+// reader asks; a YouTube or Vimeo one only once the reader clicks its poster), or of text cards (a slide with no image: quotes, testimonials). Without JavaScript it is a
 // horizontally scrolling, snapping row — every slide is reachable. With it,
 // Embla turns the row into a paged carousel with previous/next buttons and
 // slide dots. Slider.astro frames it (the section's own look, when a measured
@@ -11,8 +11,11 @@ import KitImage from '../_shared/KitImage.astro'
 import SectionHeader from '../_shared/SectionHeader.astro'
 import { imageOf, type ImageSource } from '../_shared/image'
 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: {
@@ -22,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: {
@@ -38,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' },
@@ -53,6 +56,13 @@ interface Slide {
    * the reader plays it, never plays by itself, and pauses when its slide is paged away. The caption sits under it.
    */
   video?: string | undefined
+  /**
+   * A video on another site: its page (YouTube, Vimeo, Loom, Wistia) or `youtube:<id>` / `vimeo:<id>`. Drawn as its
+   * poster (the image, else a dark panel) with a play button; nothing from the provider loads until the reader clicks,
+   * and then the player takes the poster's place (YouTube from youtube-nocookie.com, Vimeo with dnt). Paged away, it
+   * goes back to its poster. Wins over `video`; an address that is not one of these videos is not drawn.
+   */
+  embed?: string | undefined
   title?: string | undefined
   text?: string | undefined
   /** The slide's link, flat so a page stays within Contentrain's nesting depth. */
@@ -77,6 +87,8 @@ interface Props {
   slideLabel?: string | undefined
   /** Word between a slide number and the count ("of"). */
   ofLabel?: string | undefined
+  /** An embedded video's play button, before its name ("Play"). */
+  playLabel?: string | undefined
   loop?: boolean | undefined
   perView?: '1' | '2' | '3' | undefined
   aspect?: 'wide' | 'standard' | 'square' | undefined
@@ -89,15 +101,21 @@ interface Props {
   framed?: boolean | undefined
 }
 
-const { slides: given, label, prevLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel = 'Slide', ofLabel = 'of', loop = false, perView = '1', aspect, caption, heading, intro, eyebrow, actions, measured, id = 'slider', framed = true } = Astro.props
-// A slide is drawn when it has something to show: an image, a video, or a text card (a title, a text or a link) where
+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) => {
-  const image = slide.image === undefined ? undefined : imageOf(slide.image, slide.imageAlt)
-  const video = safeSrc(slide.video) || undefined
+  const player = videoTarget(slide.embed) ?? undefined
+  // A video's poster is the site's own image: one on the provider's hosts (its thumbnail) would be a request to it
+  // before the reader asked, so the poster is a plain dark panel instead.
+  const picture = slide.image === undefined ? undefined : imageOf(slide.image, slide.imageAlt)
+  const image = player && onVideoHost(picture?.src) ? undefined : picture
+  const video = player ? undefined : safeSrc(slide.video) || undefined
   const action = slide.action ?? (slide.ctaLabel && slide.ctaHref ? { label: slide.ctaLabel, href: slide.ctaHref } : undefined)
-  return image || video || slide.title || slide.text || action ? [{ ...slide, image, video, action }] : []
-}) satisfies Array<{ image: ImageInput | undefined, video: string | undefined, action?: ActionInput | undefined }>
+  return image || video || player || slide.title || slide.text || action ? [{ ...slide, image, video, player, action }] : []
+}) satisfies Array<{ image: ImageInput | undefined, video: string | undefined, player: EmbedTarget | undefined, action?: ActionInput | undefined }>
 const measuredRow = measuredSlides(measured)
 // A measured row sets the slides in view itself, so the variant's own widths step aside.
 const slots = slider({ perView: measuredRow ? '1' : perView, aspect, caption })
@@ -106,26 +124,41 @@ 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
 // card (all of them, or mixed with pictures) has its arrows under the row, either side of the dots.
-const cards = slides.some(slide => !slide.image && !slide.video)
+const cards = slides.some(slide => !slide.image && !slide.video && !slide.player)
+// A video from another site is a link to its page, so without JavaScript it opens there; its frame keeps the image's
+// 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>
       {slides.map((slide, index) => (
         <div class={slots.slide({ class: measuredRow?.slide })} role="group" aria-roledescription="slide" aria-label={`${slideLabel} ${index + 1} ${ofLabel} ${slides.length}`}>
-          {slide.video
+          {slide.player
+            ? (
+              <div class={below.image({ class: 'relative overflow-hidden bg-ink' })} data-slide-player>
+                <a href={slide.player.href} class="group/play absolute inset-0 block focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-accent" data-embed-src={slide.player.src} data-embed-title={slide.title || slide.image?.alt || `${slideLabel} ${index + 1}`} aria-label={`${playLabel}: ${slide.title || slide.image?.alt || `${slideLabel} ${index + 1}`}`} rel="noopener">
+                  {slide.image && <KitImage image={{ ...slide.image, alt: '' }} sizes={sizes} priority={index === 0} class="absolute inset-0 h-full w-full object-cover opacity-85 transition-opacity group-hover/play:opacity-70" />}
+                  <span class="absolute top-1/2 left-1/2 grid size-16 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-accent text-accent-ink shadow-lg transition-transform group-hover/play:scale-105 group-focus-visible/play:scale-105" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" class="ms-1 size-7" fill="currentColor"><path d="M7 4.5v15a.5.5 0 0 0 .77.42l11.5-7.5a.5.5 0 0 0 0-.84L7.77 4.08A.5.5 0 0 0 7 4.5Z" /></svg>
+                  </span>
+                </a>
+              </div>
+            )
+            : slide.video
             ? <video class={below.image({ class: 'bg-ink' })} src={safeSrc(slide.video)} poster={safeSrc(slide.image?.src)} controls preload="none" playsinline aria-label={slide.title ? undefined : slide.image?.alt || `${slideLabel} ${index + 1}`} />
             : slide.image && <KitImage image={slide.image} sizes={sizes} priority={index === 0} class={slots.image()} />}
           {(slide.title || slide.text || slide.action) && (
-            <div class={slide.video ? below.caption() : slide.image ? slots.caption() : slots.card()}>
+            <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>
           )}
@@ -152,6 +185,7 @@ const under = 'flex size-11 shrink-0 items-center justify-center rounded-full bg
 
 <script>
   import EmblaCarousel from 'embla-carousel'
+  import { playerFrame, plainClick } from '../_shared/embed-frame'
 
   for (const root of document.querySelectorAll<HTMLElement>('[data-kit-slider]')) {
     const viewport = root.querySelector<HTMLElement>('[data-viewport]')
@@ -204,7 +238,29 @@ const under = 'flex size-11 shrink-0 items-center justify-center rounded-full bg
     }
     // A video paged out of view stops: nothing plays where the reader cannot see it.
     const pause = () => { for (const video of root.querySelectorAll('video')) if (!video.paused) video.pause() }
-    embla.on('select', () => { pause(); sync() }).on('reInit', () => { drawDots(); sync() })
+    // Another site's video: its poster link becomes the player on a plain click (a swipe that ends on it is not one:
+    // Embla cancels that click), and goes back to its poster when its slide is paged out of view, which stops it and
+    // ends the provider's session there.
+    const posters = new Map<HTMLIFrameElement, HTMLAnchorElement>()
+    viewport.addEventListener('click', (event) => {
+      if (!plainClick(event)) return
+      const link = (event.target as Element | null)?.closest<HTMLAnchorElement>('[data-slide-player] a[data-embed-src]')
+      const frame = link && playerFrame(link.dataset.embedSrc, link.dataset.embedTitle ?? '')
+      if (!link || !frame) return
+      event.preventDefault()
+      posters.set(frame, link)
+      link.replaceWith(frame)
+      frame.focus()
+    })
+    const unplay = () => {
+      const inView = new Set(embla.slidesInView().map(index => embla.slideNodes()[index]))
+      for (const [frame, link] of posters) {
+        if (inView.has(frame.closest<HTMLElement>('[aria-roledescription="slide"]') ?? undefined)) continue
+        frame.replaceWith(link)
+        posters.delete(frame)
+      }
+    }
+    embla.on('select', () => { pause(); sync() }).on('settle', unplay).on('reInit', () => { drawDots(); sync() })
     sync()
     // Set up before the layout was final, Embla measures once more when it is: the page loaded, its fonts in, the tab in
     // view. A background tab lays nothing out (ctrl/cmd-click), so its carousel had one snap and a dead "next" until then;

package/components/slider/fixtures.json

@@ -5,5 +5,6 @@
   { "name": "five-measured", "props": { "label": "Five slides", "id": "five", "eyebrow": "Recent work", "heading": "Five projects", "intro": "A few of the sites we moved this year.", "actions": [{ "label": "See all work", "href": "/work/" }], "slides": [{ "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "View 1", "width": 1200, "height": 800 }, "title": "Slide 1 title" }, { "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "View 2", "width": 1200, "height": 800 }, "title": "Slide 2 title" }, { "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "View 3", "width": 1200, "height": 800 }, "title": "Slide 3 title" }, { "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "View 4", "width": 1200, "height": 800 }, "title": "Slide 4 title" }, { "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "View 5", "width": 1200, "height": 800 }, "title": "Slide 5 title" }], "measured": { "padY": 24, "columns": { "390": 1, "768": 2, "1280": 3 }, "gap": 20 } } },
   { "name": "text-cards", "props": { "label": "What clients say", "perView": "3", "heading": "Testimonials", "slides": [{ "title": "Ada Lovelace", "text": "They moved our whole site in a week, and nothing broke." }, { "title": "Grace Hopper", "text": "Every page is ours to edit now, without a developer." }, { "title": "Alan Turing", "text": "The new site is faster, and it looks the same.", "ctaLabel": "Read the story", "ctaHref": "/stories/" }] } },
   { "name": "video-slides", "props": { "label": "Feature tour", "heading": "See it work", "slides": [{ "video": "/kit-fixtures/clip-1.mp4", "image": "/kit-fixtures/photo-1.svg", "imageAlt": "", "title": "Import" }, { "video": "/kit-fixtures/clip-2.mp4", "title": "Edit" }, { "video": "/kit-fixtures/clip-3.mp4", "image": "/kit-fixtures/photo-3.svg", "imageAlt": "", "title": "Publish", "text": "One click, and the site is live." }] } },
-  { "name": "mixed-cards", "props": { "label": "Stories", "slides": [{ "title": "Ada Lovelace", "text": "They moved our whole site in a week, and nothing broke." }, { "image": "/kit-fixtures/photo-2.svg", "imageAlt": "Green gradient", "title": "Harbor & Co" }, { "title": "Grace Hopper", "text": "Every page is ours to edit now, without a developer." }] } }
+  { "name": "mixed-cards", "props": { "label": "Stories", "slides": [{ "title": "Ada Lovelace", "text": "They moved our whole site in a week, and nothing broke." }, { "image": "/kit-fixtures/photo-2.svg", "imageAlt": "Green gradient", "title": "Harbor & Co" }, { "title": "Grace Hopper", "text": "Every page is ours to edit now, without a developer." }] } },
+  {"name": "video-embed", "props": {"label": "Studio videos", "id": "videos", "aspect": "standard", "perView": "2", "slides": [{"embed": "youtube:aqz-KE-bpKQ", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "Blue gradient", "width": 1200, "height": 800}, "title": "Studio tour"}, {"embed": "https://vimeo.com/76979871", "title": "Behind the scenes"}, {"embed": "youtube:aqz-KE-bpKQ", "image": "https://i.ytimg.com/vi/aqz-KE-bpKQ/hqdefault.jpg", "title": "A provider thumbnail is never loaded"}, {"image": {"src": "/kit-fixtures/photo-3.svg", "alt": "Orange gradient", "width": 1200, "height": 800}, "title": "Field Notes"}]}}
 ]

package/components/slider/meta.json

@@ -1,22 +1,23 @@
 {
   "id": "slider",
   "name": "Slider",
-  "description": "A carousel of images, videos 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.",
+  "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", "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." },
     "caption": { "options": ["below", "overlay"], "default": "overlay", "description": "Caption under the image, or over its lower edge on a gradient." }
   },
   "props": {
-    "slides": { "type": "array", "label": "Slides", "required": true, "items": { "type": "object", "fields": { "image": { "type": "image", "label": "Image", "description": "The slide image; a slide without one is a text card (a quote, a testimonial)." }, "imageAlt": { "type": "string", "label": "Image description", "description": "What the image shows, for readers who cannot see it." }, "video": { "type": "video", "label": "Video", "description": "A video file (mp4, webm) shown in place of the image, which is its poster. It plays only when the reader starts it." }, "title": { "type": "string", "label": "Title", "description": "Heading over the slide." }, "text": { "type": "text", "label": "Text", "description": "A line or two under the heading." }, "ctaLabel": { "type": "string", "label": "Button label", "description": "Button text; the slide has no button without it." }, "ctaHref": { "type": "url", "label": "Button link", "description": "Where the button goes." } } }, "description": "Slides: the image's address and text, an optional video (the image is its poster), and an optional link (ctaLabel + ctaHref). A slide with no image or video is a text card; one with none of them is not drawn." },
+    "slides": { "type": "array", "label": "Slides", "required": true, "items": { "type": "object", "fields": { "image": { "type": "image", "label": "Image", "description": "The slide image; a slide without one is a text card (a quote, a testimonial)." }, "imageAlt": { "type": "string", "label": "Image description", "description": "What the image shows, for readers who cannot see it." }, "video": { "type": "video", "label": "Video", "description": "A video file (mp4, webm) shown in place of the image, which is its poster. It plays only when the reader starts it." }, "embed": { "type": "url", "label": "Video link", "description": "A video on another site: its YouTube, Vimeo, Loom or Wistia page (or youtube:<id> / vimeo:<id>). Shown as the image with a play button; nothing from that site loads until the reader clicks it. Wins over Video." }, "title": { "type": "string", "label": "Title", "description": "Heading over the slide." }, "text": { "type": "text", "label": "Text", "description": "A line or two under the heading." }, "ctaLabel": { "type": "string", "label": "Button label", "description": "Button text; the slide has no button without it." }, "ctaHref": { "type": "url", "label": "Button link", "description": "Where the button goes." } } }, "description": "Slides: the image's address and text, an optional video file or video link (the image is its poster), and an optional link (ctaLabel + ctaHref). A slide with no image or video is a text card; one with none of them is not drawn." },
     "label": { "type": "string", "required": true, "content": false, "description": "Accessible name of the carousel." },
     "prevLabel": { "type": "string", "content": false, "description": "ui-strings slider.prev." },
     "nextLabel": { "type": "string", "content": false, "description": "ui-strings slider.next." },
     "slideLabel": { "type": "string", "content": false, "description": "ui-strings slider.slide." },
     "ofLabel": { "type": "string", "content": false, "description": "ui-strings slider.of." },
+    "playLabel": { "type": "string", "content": false, "description": "ui-strings embed.play." },
     "loop": { "type": "boolean", "default": false, "content": false, "description": "Wrap from the last slide to the first." },
     "id": { "type": "string", "default": "slider", "content": false, "description": "Unique on the page: names the track that the previous/next buttons control (aria-controls)." },
     "heading": {"type": "string", "label": "Heading", "description": "The section heading."},
@@ -34,5 +35,5 @@
     "divi": ["divi/et_pb_slider", "divi/et_pb_fullwidth_slider", "divi/et_pb_post_slider"],
     "classic": ["classic/revslider", "classic/metaslider", "classic/smart-slider", "classic/swiper", "classic/slick", "classic/splide", "classic/owl"]
   },
-  "a11y": "WAI-ARIA carousel pattern: a labelled region with aria-roledescription=carousel, slides as labelled groups ('Slide 2 of 5'), labelled previous/next buttons disabled at the ends, and dot buttons marking the current slide. The track and the buttons are tied by aria-controls, the row takes focus (arrow keys page it, polite live announcement). There is no autoplay, so nothing moves unasked: a video slide loads nothing until the reader plays it, never starts by itself, keeps its native controls with its caption under them, and pauses when its slide is paged away; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling."
+  "a11y": "WAI-ARIA carousel pattern: a labelled region with aria-roledescription=carousel, slides as labelled groups ('Slide 2 of 5'), labelled previous/next buttons disabled at the ends, and dot buttons marking the current slide. The track and the buttons are tied by aria-controls, the row takes focus (arrow keys page it, polite live announcement). There is no autoplay, so nothing moves unasked: a video slide loads nothing until the reader plays it, never starts by itself, keeps its native controls with its caption under them, and pauses when its slide is paged away; a video link is a labelled poster link ('Play: title') to the video's page that becomes the player only on a click (no request to the provider before it; YouTube from youtube-nocookie.com, Vimeo with dnt), keeps the poster's box so nothing moves, takes focus, and goes back to its poster when its slide is paged away; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling."
 }

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,15 @@ 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'
 
 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',
@@ -42,7 +44,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' },
 })
@@ -98,16 +100,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>}