@contentrain/astro-kit 0.38.0 → 0.40.0

package/components/header/Header.astro

@@ -8,6 +8,7 @@ import type { ActionInput, ImageInput, NavItem } from '../_shared/types'
 import Nav from '../nav/Nav.astro'
 import SearchBox from '../search-box/SearchBox.astro'
 import { safeHref } from '../_shared/safe-url'
+import { brandColorValue } from './header'
 
 const header = tv({
   slots: {
@@ -50,6 +51,11 @@ interface Props {
   padBottom?: string | undefined
   /** The navigation in the site's link colour, as themes that colour every link do (Hello Elementor). */
   linkNav?: boolean | undefined
+  /**
+   * The site name's colour where the source theme's is not the header's text colour: `link` for the site's link colour
+   * (a title that is a link styled like every other), or a colour (`#hex`, `rgb()`, `hsl()`; anything else is ignored).
+   */
+  brandColor?: string | undefined
   logo?: ImageInput | undefined
   /** Show the site name next to the logo. */
   showName?: boolean | undefined
@@ -68,11 +74,12 @@ interface Props {
   menu?: 'flyout' | 'mega' | undefined
 }
 
-const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, logo, showName = true, homeHref = '/', items, action, search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.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 })
 const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
 const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
-const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`].filter(Boolean).join('; ') || undefined
+const brandColour = brandColorValue(brandColor)
+const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`, brandColour && `color: ${brandColour}`].filter(Boolean).join('; ') || undefined
 // A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
 // The search field sits in the bar from lg; at md the bar already holds the navigation, so the field keeps its own row.
 const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-nowrap' : undefined

package/components/header/header.ts

@@ -0,0 +1,13 @@
+// The header's site-name colour: the site's link colour, a colour the source theme gives the name, or nothing.
+
+/** A colour that may go into the brand's style attribute: hex, `rgb()`/`rgba()` or `hsl()`/`hsla()` of numbers. */
+const COLOR = /^(?:#[0-9a-f]{3,8}|(?:rgb|hsl)a?\([\d\s.,%/deg]+\))$/i
+
+/**
+ * The `color` value for the brand: `link` → the site's link colour (the accent where none is set), a colour as it is,
+ * anything else (a `;`, a `url()`, a name the plan never writes) → none, so the header keeps its text colour.
+ */
+export function brandColorValue(brandColor: string | undefined): string | undefined {
+  if (brandColor === 'link') return 'var(--color-link, var(--color-accent))'
+  return brandColor && COLOR.test(brandColor) ? brandColor : undefined
+}

package/components/header/meta.json

@@ -22,6 +22,7 @@
     "padTop": { "type": "string", "description": "Space inside the bar above its content where the source's header has its own (a CSS length)." },
     "padBottom": { "type": "string", "description": "Space inside the bar below its content where the source's header has its own (a CSS length)." },
     "linkNav": { "type": "boolean", "default": false, "description": "The navigation in the site's link colour, as themes that colour every link do." },
+    "brandColor": { "type": "string", "description": "The site name's colour where the source theme's is not the header's text colour: link for the site's link colour, or a colour (#hex, rgb(), hsl())." },
     "logo": { "type": "object", "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } }, "description": "Logo image (site.logo)." },
     "showName": { "type": "boolean", "default": true, "description": "Show the site name next to the logo." },
     "homeHref": { "type": "url", "default": "/", "description": "Where the brand links." },

package/components/slider/Slider.astro

@@ -1,5 +1,5 @@
 ---
-// A carousel of images 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
@@ -10,9 +10,13 @@ import type { ActionInput, MeasuredStyle } from '../_shared/types'
 import SliderTrack from './SliderTrack.astro'
 
 interface Slide {
-  /** The image's address (or, until 0.7, an `ImageInput`). */
-  image: ImageSource
+  /** The image's address (or, until 0.7, an `ImageInput`). Optional: a text card (a quote, a testimonial) is a slide too. */
+  image?: ImageSource | undefined
   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. */
@@ -37,6 +41,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

package/components/slider/SliderTrack.astro

@@ -1,5 +1,6 @@
 ---
-// A carousel of images with optional captions. Without JavaScript it is a
+// A carousel of images with optional captions, of videos (played only when the
+// 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
@@ -9,6 +10,8 @@ import Button from '../_shared/Button.astro'
 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'
 
@@ -19,6 +22,8 @@ const slider = tv({
     slide: 'relative min-w-0 shrink-0 snap-start overflow-hidden',
     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',
   },
   variants: {
     perView: {
@@ -41,9 +46,21 @@ const slider = tv({
 })
 
 interface Slide {
-  /** The image's address (or, until 0.7, an `ImageInput`). */
-  image: ImageSource
+  /** The image's address (or, until 0.7, an `ImageInput`). Optional: a text card (a quote, a testimonial) is a slide too. */
+  image?: ImageSource | undefined
   imageAlt?: string | undefined
+  /**
+   * A video file's address (mp4, webm). Drawn in place of the image, which becomes its poster; it loads nothing until
+   * 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. */
@@ -68,6 +85,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
@@ -80,20 +99,35 @@ 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
+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
+// 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 = imageOf(slide.image, slide.imageAlt)
+  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 ? [{ ...slide, image, action }] : []
-}) satisfies Array<{ image: ImageInput, 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 })
+// A video's caption is never laid over it: it would cover the player's controls.
+const below = slider({ perView: measuredRow ? '1' : perView, aspect, caption: 'below' })
 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.
 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 && !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}>
   <SectionHeader heading={heading} intro={intro} eyebrow={eyebrow} actions={actions} />
@@ -101,9 +135,22 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
     <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}`}>
-          <KitImage image={slide.image} sizes={sizes} priority={index === 0} class={slots.image()} />
+          {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={slots.caption()}>
+            <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.action && <Button action={slide.action} size="sm" class="mt-2" />}
@@ -113,21 +160,26 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
       ))}
     </div>
   </div>
-  {slides.length > 1 && (
-    <>
-      <button type="button" class:list={[arrow, 'start-6 md:start-10']} aria-label={prevLabel} aria-controls={trackId} data-prev>
-        <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg>
-      </button>
-      <button type="button" class:list={[arrow, 'end-6 md:end-10']} aria-label={nextLabel} aria-controls={trackId} data-next>
-        <svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg>
-      </button>
-      <div class="mt-4 hidden justify-center group-data-[ready]:flex" data-dots></div>
-    </>
-  )}
+  {slides.length > 1 && (cards
+    ? (
+      <div class="mt-4 hidden items-center justify-center gap-3 group-data-[ready]:flex">
+        <button type="button" class={under} aria-label={prevLabel} aria-controls={trackId} data-prev><svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg></button>
+        <div class="flex justify-center" data-dots></div>
+        <button type="button" class={under} aria-label={nextLabel} aria-controls={trackId} data-next><svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg></button>
+      </div>
+    )
+    : (
+      <>
+        <button type="button" class:list={[arrow, 'start-6 md:start-10']} aria-label={prevLabel} aria-controls={trackId} data-prev><svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg></button>
+        <button type="button" class:list={[arrow, 'end-6 md:end-10']} aria-label={nextLabel} aria-controls={trackId} data-next><svg aria-hidden="true" viewBox="0 0 24 24" class="size-5 rtl:-scale-x-100" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg></button>
+        <div class="mt-4 hidden justify-center group-data-[ready]:flex" data-dots></div>
+      </>
+    ))}
 </Root>
 
 <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]')
@@ -178,7 +230,31 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
       if (prev) prev.disabled = !embla.canScrollPrev()
       if (next) next.disabled = !embla.canScrollNext()
     }
-    embla.on('select', sync).on('reInit', () => { drawDots(); sync() })
+    // 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() }
+    // 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

@@ -2,5 +2,9 @@
   { "name": "single-wide-overlay", "props": { "label": "Featured work", "slides": [{ "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "Blue gradient", "width": 1200, "height": 800 }, "title": "Northwind Journal", "text": "A WordPress blog moved to Astro in an afternoon.", "action": { "label": "Read the case", "href": "/work/northwind/" } }, { "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "Green gradient", "width": 1200, "height": 800 }, "title": "Harbor & Co" }, { "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "Orange gradient", "width": 1200, "height": 800 }, "title": "Field Notes" }] } },
   { "name": "two-standard-below", "props": { "label": "Gallery", "perView": "2", "aspect": "standard", "caption": "below", "loop": true, "slides": [{ "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1200, "height": 800 }, "title": "Studio" }, { "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "", "width": 1200, "height": 800 }, "title": "Workshop" }, { "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "", "width": 1200, "height": 800 }, "title": "Garden" }] } },
   { "name": "three-square", "props": { "label": "Team", "perView": "3", "aspect": "square", "slides": [{ "image": { "src": "/kit-fixtures/avatar-1.svg", "alt": "Mira", "width": 96, "height": 96 } }, { "image": { "src": "/kit-fixtures/avatar-2.svg", "alt": "Jon", "width": 96, "height": 96 } }, { "image": { "src": "/kit-fixtures/avatar-3.svg", "alt": "Lea", "width": 96, "height": 96 } }, { "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "Studio", "width": 1200, "height": 800 } }] } },
-  { "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": "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": "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 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", "measured.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", "required": true, "description": "The slide image." }, "imageAlt": { "type": "string", "label": "Image description", "description": "What the image shows, for readers who cannot see 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, and an optional link (ctaLabel + ctaHref)." },
+    "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; 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/stats/Stats.astro

@@ -1,7 +1,10 @@
 ---
 // A row of figures, each with a short label, under an optional heading and
-// intro. Figures are static text: no counting animation.
+// intro. Figures are text: the final number is in the HTML. `motion: 'count'` (a source counter that counted up) makes
+// the list a count-up behaviour island: once in view each figure counts from 0 to it, never under reduced motion or
+// without IntersectionObserver, and only the figure's own digits change.
 import { tv } from 'tailwind-variants'
+import BehaviorScript from '../_shared/BehaviorScript.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
 import { imageOf, type ImageSource } from '../_shared/image'
@@ -84,13 +87,18 @@ interface Props {
   valueSize?: 'md' | 'lg' | 'xl' | 'display' | undefined
   labelSize?: 'sm' | 'base' | 'lg' | undefined
   order?: 'label-first' | 'value-first' | undefined
+  /** static: the figures as printed. count: they count up once in view, as the source's counter did. */
+  motion?: 'static' | 'count' | undefined
   tone?: Tone | undefined
   /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
   measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { heading, intro, items, layout, columns, style, align, valueSize, labelSize, order, tone, measured, id } = Astro.props
+const { heading, intro, items, layout, columns, style, align, valueSize, labelSize, order, motion, tone, measured, id } = Astro.props
+const count = motion === 'count'
+// A count-up island (behaviors.ts `countup`): the root names the kind, each figure's digits are their own span.
+const island = count ? { 'data-cr-behavior': 'countup', 'data-cr-items': '[data-kit-count]' } : {}
 const s = stats({ layout, columns, style, align, valueSize, labelSize, order, tone })
 const grid = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
 const headingId = heading && id ? `${id}-title` : undefined
@@ -107,22 +115,23 @@ const widthOf = (item: Item) => `--stat-chars:${(item.prefix ?? '').length + ite
     </header>
   )}
   {order === 'value-first' ? (
-    <ul class={s.list({ class: grid })} role="list">
+    <ul class={s.list({ class: grid })} role="list" {...island}>
       {items.map(item => (
         <li class={s.item()}>
-          <p class={s.value()} style={widthOf(item)}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{item.value}{item.suffix}</p>
+          <p class={s.value()} style={widthOf(item)}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{count ? <span data-kit-count>{item.value}</span> : item.value}{item.suffix}</p>
           <p class={s.label()}>{item.label}</p>
         </li>
       ))}
     </ul>
   ) : (
-    <dl class={s.list({ class: grid })}>
+    <dl class={s.list({ class: grid })} {...island}>
       {items.map(item => (
         <div class={s.item()}>
           <dt class={s.label()}>{item.label}</dt>
-          <dd class={s.value()} style={widthOf(item)}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{item.value}{item.suffix}</dd>
+          <dd class={s.value()} style={widthOf(item)}>{iconOf(item) && <KitImage image={iconOf(item)!} sizes="40px" class={s.icon()} />}{item.prefix}{count ? <span data-kit-count>{item.value}</span> : item.value}{item.suffix}</dd>
         </div>
       ))}
     </dl>
   )}
+  {count && <BehaviorScript />}
 </Section>

package/components/stats/fixtures.json

@@ -416,5 +416,30 @@
       "valueSize": "display",
       "align": "center"
     }
+  },
+  {
+    "name": "count-label-lg",
+    "props": {
+      "motion": "count",
+      "labelSize": "lg",
+      "heading": "Since 2019",
+      "items": [
+        {
+          "value": "1,200",
+          "prefix": "$",
+          "suffix": "+",
+          "label": "Shops launched"
+        },
+        {
+          "value": "99.9",
+          "suffix": "%",
+          "label": "Uptime"
+        },
+        {
+          "value": "11",
+          "label": "Countries shipped to"
+        }
+      ]
+    }
   }
 ]

package/components/stats/meta.json

@@ -1,12 +1,16 @@
 {
   "id": "stats",
   "name": "Stats",
-  "description": "A row of figures with a short label each (years in business, clients, uptime), with an optional heading and intro. The counter/number section of a landing page; numbers are static text, not animated.",
+  "description": "A row of figures with a short label each (years in business, clients, uptime), with an optional heading and intro. The counter/number section of a landing page; numbers are text (the final value in the HTML); motion \"count\" counts them up once in view, as a source counter did.",
   "category": "section",
   "uses": [],
   "shared": [
+    "BehaviorScript.astro",
     "KitImage.astro",
     "Section.astro",
+    "behaviors.ts",
+    "embed-frame.ts",
+    "embed-target.ts",
     "image.ts",
     "measured.ts",
     "safe-url.ts",
@@ -85,6 +89,14 @@
       ],
       "default": "label-first",
       "description": "Which the page's text reads first, as the source does: label-first (an Elementor counter) or value-first (a Gutenberg figure heading over its label). The figure is drawn on top either way."
+    },
+    "motion": {
+      "options": [
+        "static",
+        "count"
+      ],
+      "default": "static",
+      "description": "static: the figures as printed. count: each counts up from 0 to its value once in view (a source counter that animated); the final number is in the HTML, nothing moves under reduced motion or without IntersectionObserver."
     }
   },
   "props": {
@@ -253,7 +265,7 @@
     }
   },
   "slots": {},
-  "js": "none",
+  "js": "vanilla",
   "dependencies": {},
   "sources": {
     "gutenberg": [

package/mapping/classic.json

@@ -102,7 +102,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": "rs-slide, .tp-revslider-slidesli",
@@ -120,7 +121,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".slides > li",
@@ -138,7 +140,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".n2-ss-slide",
@@ -431,7 +434,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".swiper-slide:not(.swiper-slide-duplicate)",
@@ -450,7 +454,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".slick-slide:not(.slick-cloned)",
@@ -469,7 +474,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".splide__slide:not(.splide__slide--clone)",
@@ -488,7 +494,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".owl-item:not(.cloned)",

package/mapping/divi.json

@@ -124,7 +124,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".et_pb_slide",
@@ -145,7 +146,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "each": ".et_pb_slide",
@@ -167,7 +169,8 @@
         "prevLabel": "ui:slider.prev",
         "nextLabel": "ui:slider.next",
         "slideLabel": "ui:slider.slide",
-        "ofLabel": "ui:slider.of"
+        "ofLabel": "ui:slider.of",
+        "playLabel": "ui:embed.play"
       },
       "into": "slides",
       "item": {
@@ -423,7 +426,8 @@
       "id": "stats.counter",
       "component": "stats",
       "variant": {
-        "order": "value-first"
+        "order": "value-first",
+        "motion": "count"
       },
       "slots": {
         "intro": {