@contentrain/astro-kit 0.37.0 → 0.39.0

package/README.md

@@ -25,7 +25,7 @@ They read its design tokens and pass its gates: `astro check` with the
 | `tabs` | Tabbed panels; readable as headed sections without JavaScript | Zag.js |
 | `testimonial` | Quotes with author and role | none |
 | `gallery` | Image grid with a popover lightbox | none |
-| `slider` | Carousel on a scroll-snap row | Embla |
+| `slider` | Carousel on a scroll-snap row: image, video (played only on request) or text-card slides | Embla |
 | `contact-form` | Contentrain Studio form in a section | Studio runtime |
 | `newsletter` | Sign-up posting straight to the list provider (Mailchimp, Kit, MailerLite, Brevo, Buttondown) | none |
 | `embed` | Video, map or player loaded on click; a provider link until then (YouTube via nocookie) | a few lines, no dependency |

package/catalog.json

@@ -1315,6 +1315,7 @@
         "embed"
       ],
       "shared": [
+        "KitImage.astro",
         "Section.astro",
         "measured.ts",
         "safe-url.ts",
@@ -1416,6 +1417,11 @@
                 "type": "url",
                 "label": "Link",
                 "description": "A tel:, mailto: or map link for it."
+              },
+              "iconImage": {
+                "type": "image",
+                "label": "Icon image",
+                "description": "The detail's own icon as an image file (the old site's map marker or phone, moved as an svg), drawn before it."
               }
             }
           },
@@ -1617,6 +1623,7 @@
         "details[].label": "details[].label",
         "details[].value": "details[].value",
         "details[].href": "details[].href",
+        "details[].iconImage": "details[].icon_image",
         "hours": "hours",
         "socials": "socials",
         "socials[].label": "socials[].label",
@@ -1948,10 +1955,11 @@
             "primary",
             "secondary",
             "ghost",
-            "link"
+            "link",
+            "none"
           ],
           "default": "primary",
-          "description": "How the opening button looks: a filled or outlined button, or a text link."
+          "description": "How the opening button looks: a filled or outlined button, or a text link. none: no button of its own and no section band; opened by a link to #<id> or a commandfor button elsewhere on the page, or an address ending in #<id> (a popup drawn over the page, its opener in the content)."
         },
         "size": {
           "options": [
@@ -3461,6 +3469,10 @@
           "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": {
@@ -3590,7 +3602,8 @@
       },
       "a11y": "One <header> landmark; the brand link is named by the site name when only the logo shows. Navigation as in nav.",
       "files": [
-        "Header.astro"
+        "Header.astro",
+        "header.ts"
       ]
     },
     {
@@ -5720,7 +5733,7 @@
     {
       "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 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": [
@@ -5772,14 +5785,18 @@
               "image": {
                 "type": "image",
                 "label": "Image",
-                "required": true,
-                "description": "The slide 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",
@@ -5802,7 +5819,7 @@
               }
             }
           },
-          "description": "Slides: the image's address and text, and an optional link (ctaLabel + ctaHref)."
+          "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."
         },
         "label": {
           "type": "string",
@@ -6038,7 +6055,7 @@
           "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; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling.",
       "files": [
         "Slider.astro",
         "SliderTrack.astro"
@@ -6047,6 +6064,7 @@
         "slides": "slides",
         "slides[].image": "slides[].image",
         "slides[].imageAlt": "slides[].image_alt",
+        "slides[].video": "slides[].video",
         "slides[].title": "slides[].title",
         "slides[].text": "slides[].text",
         "slides[].ctaLabel": "slides[].cta_label",
@@ -6560,12 +6578,14 @@
     {
       "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",
         "image.ts",
         "measured.ts",
         "safe-url.ts",
@@ -6644,6 +6664,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": {
@@ -6812,7 +6840,7 @@
         }
       },
       "slots": {},
-      "js": "none",
+      "js": "vanilla",
       "dependencies": {},
       "sources": {
         "gutenberg": [

package/components/_shared/BehaviorScript.astro

@@ -0,0 +1,11 @@
+---
+// The behaviour islands' module for a kit component that is its own island (a Stats section set to count up), rendered
+// only where that component asks for it: a page without one ships no script. Same module and init as Behavior.astro.
+---
+<script>
+  import { initBehaviors } from './behaviors'
+
+  initBehaviors()
+  // With Astro's client router a page arrives without a reload: wire its islands too (ready roots are skipped).
+  document.addEventListener('astro:page-load', () => initBehaviors())
+</script>

package/components/_shared/behaviors.ts

@@ -103,7 +103,17 @@ function carousel(root: HTMLElement): void {
 function dialog(root: HTMLElement): void {
   for (const opener of within(root, '[aria-haspopup="dialog"][aria-controls]')) {
     const content = target(root, opener.getAttribute('aria-controls'))
-    if (!content || content.closest('dialog')) continue
+    if (!content) continue
+    // The source's own closed <dialog> (the island pass keeps it closed, its openers named by aria-controls): opened as it
+    // is, with a close button where it has none. One inside another dialog is that dialog's content, not ours to open.
+    if (content instanceof HTMLDialogElement) {
+      if (content.parentElement?.closest('dialog')) continue
+      if (!content.querySelector('form[method="dialog"], .cr-behavior-control')) content.append(control(root.dataset.crClose ?? 'Close', () => content.close()))
+      opener.addEventListener('click', (event) => { event.preventDefault(); if (!content.open) content.showModal() })
+      content.addEventListener('click', (event) => { if (event.target === content) content.close() })
+      continue
+    }
+    if (content.closest('dialog')) continue
     const box = document.createElement('dialog')
     box.className = 'cr-behavior-dialog'
     content.before(box)
@@ -231,12 +241,17 @@ export function initBehaviors(scope: ParentNode = document): void {
     // A root inside another root is not ours: the component prints one root per island, so a nested one came with the
     // markup (a spoofed island the writer's pass would strip). Never wired, so its selectors never run.
     if (root.dataset.crReady !== undefined || !KINDS.has(kind) || root.parentElement?.closest('[data-cr-behavior]')) continue
-    try {
-      WIRE[kind as Kind](root)
-      root.dataset.crReady = ''
-    }
+    // Marked first: a wiring that fails part-way is never run again over what it already wired.
+    root.dataset.crReady = ''
+    try { WIRE[kind as Kind](root) }
     catch {
       // Left as printed: the content is all there, it just does not move.
     }
+    // A dialog opener inside an island of another kind (a popup button in a tab): opened too, never left dead, even
+    // where the island's own wiring failed.
+    if (kind !== 'dialog') {
+      try { dialog(root) }
+      catch { /* its dialogs stay as printed */ }
+    }
   }
 }

package/components/behavior/Behavior.astro

@@ -35,6 +35,8 @@ const { kind, html, items, title, panel, fact, previousLabel, nextLabel, closeLa
 // Selectors and ids go into attributes only, never into markup or a script; an empty one is left out.
 const attr = (value: string | undefined): string | undefined => (value && value.length <= 300 ? value : undefined)
 const factId = fact && /^[\w:.-]{1,120}$/.test(fact) ? fact : undefined
+// Scripting off: a dialog the island holds closed is laid out in place, so its content is never hidden. A fixed sheet.
+const NOSCRIPT = '<style>.cr-behavior dialog:not([open]){display:block;position:static;margin:0;max-width:none}</style>'
 ---
 {html && (
   <Section tone={tone} measured={measured}>
@@ -50,6 +52,7 @@ const factId = fact && /^[\w:.-]{1,120}$/.test(fact) ? fact : undefined
       data-cr-close={closeLabel}
       set:html={html}
     />
+    <noscript set:html={NOSCRIPT} />
   </Section>
 )}
 

package/components/contact-form/ContactForm.astro

@@ -10,6 +10,7 @@
 // that posts to their form service, an address to write to, or a link to the
 // form on WordPress.
 import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
 import type { MeasuredStyle } from '../_shared/types'
 import Embed from '../embed/Embed.astro'
@@ -24,6 +25,8 @@ export interface ContactDetail {
   value: string
   /** `mailto:`, `tel:` or a map link. */
   href?: string | undefined
+  /** The detail's own icon as an image file (the old site's map marker or phone, moved as an svg), drawn before it. */
+  iconImage?: string | undefined
 }
 
 const contact = tv({
@@ -35,6 +38,7 @@ const contact = tv({
     details: 'mt-2 flex flex-col gap-4',
     term: 'text-sm font-semibold opacity-75',
     value: 'text-current',
+    mark: 'mr-2 inline-flex size-5 shrink-0 align-[-0.25em]',
     formColumn: 'flex flex-col gap-4',
     formHeading: 'text-xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-2xl',
     form: 'rounded-card',
@@ -128,7 +132,7 @@ const FormHeading = heading ? 'h3' : 'h2'
                 {details.map(detail => (
                   <div class={detailsStyle === 'cards' ? s.card() : undefined}>
                     <dt class={s.term()}>{detail.label}</dt>
-                    <dd class={s.value()}>{detail.href ? <a href={safeHref(detail.href)} class={LINK}>{detail.value}</a> : detail.value}</dd>
+                    <dd class={s.value()}>{detail.iconImage && <span class={s.mark()} aria-hidden="true"><KitImage image={{ src: detail.iconImage, alt: '' }} class="size-5 object-contain" /></span>}{detail.href ? <a href={safeHref(detail.href)} class={LINK}>{detail.value}</a> : detail.value}</dd>
                   </div>
                 ))}
               </dl>
@@ -137,6 +141,7 @@ const FormHeading = heading ? 'h3' : 'h2'
               <ul class={s.details()}>
                 {details.map(detail => (
                   <li class={s.value({ class: detailsStyle === 'cards' ? s.card() : undefined })}>
+                    {detail.iconImage && <span class={s.mark()} aria-hidden="true"><KitImage image={{ src: detail.iconImage, alt: '' }} class="size-5 object-contain" /></span>}
                     {detail.label && <span class={s.term()}>{detail.label}: </span>}
                     {detail.href ? <a href={safeHref(detail.href)} class={LINK}>{detail.value}</a> : detail.value}
                   </li>

package/components/contact-form/fixtures.json

@@ -177,5 +177,30 @@
         "title": "Our studio"
       }
     }
+  },
+  {
+    "name": "detail-icon-images",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Contact",
+      "intro": "Tell us what you make and when you want to launch.",
+      "layout": "stacked",
+      "align": "start",
+      "details": [
+        {
+          "value": "Studio 4, Harbour Lane",
+          "iconImage": "/kit-fixtures/icon-1.svg"
+        },
+        {
+          "value": "hello@northwind.example",
+          "href": "mailto:hello@northwind.example",
+          "iconImage": "/kit-fixtures/icon-1.svg"
+        },
+        {
+          "value": "+351 21 000 0000",
+          "href": "tel:+351210000000"
+        }
+      ]
+    }
   }
 ]

package/components/contact-form/meta.json

@@ -7,6 +7,7 @@
     "embed"
   ],
   "shared": [
+    "KitImage.astro",
     "Section.astro",
     "measured.ts",
     "safe-url.ts",
@@ -108,6 +109,11 @@
             "type": "url",
             "label": "Link",
             "description": "A tel:, mailto: or map link for it."
+          },
+          "iconImage": {
+            "type": "image",
+            "label": "Icon image",
+            "description": "The detail's own icon as an image file (the old site's map marker or phone, moved as an svg), drawn before it."
           }
         }
       },

package/components/dialog/Dialog.astro

@@ -9,6 +9,11 @@
 // opens it with no script where Invoker Commands exist (`command`/`commandfor`); a small script covers browsers
 // without them and closes it on a click outside. With scripting off altogether, the dialog's content is laid out in
 // the section itself, under where the button was: nothing is hidden and nothing blocks the page.
+//
+// `triggerStyle: 'none'`: the dialog has no button of its own and no section band. It is opened from elsewhere on the
+// page, as the source popup was: a link to `#<id>` (the migrated popup opener), a `commandfor` button, or an address
+// that ends in `#<id>`. Used where the popup is drawn over the page (the starter's overlays, after the footer). With
+// scripting off its content sits there as a plain block, and the `#<id>` link jumps to it.
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import Section from '../_shared/Section.astro'
@@ -35,6 +40,7 @@ const dialog = tv({
       secondary: { trigger: 'bg-ink text-surface hover:bg-accent hover:text-accent-ink' },
       ghost: { trigger: 'border border-current bg-transparent text-current hover:bg-ink/5' },
       link: { trigger: 'bg-transparent p-0 text-[color:var(--color-link,var(--color-accent))] underline underline-offset-4' },
+      none: {},
     },
     size: { sm: { box: '[--dialog-width:28rem]' }, md: { box: '[--dialog-width:40rem]' }, lg: { box: '[--dialog-width:56rem]' } },
     // Where the button sits in the section.
@@ -54,7 +60,8 @@ interface Props {
   actions?: ActionInput[] | undefined
   /** Accessible name of the close button (ui-strings dialog.close). */
   closeLabel?: string | undefined
-  triggerStyle?: 'primary' | 'secondary' | 'ghost' | 'link' | undefined
+  /** `none`: no button of its own; opened by a link to `#<id>` or a `commandfor` button elsewhere on the page. */
+  triggerStyle?: 'primary' | 'secondary' | 'ghost' | 'link' | 'none' | undefined
   size?: 'sm' | 'md' | 'lg' | undefined
   align?: 'start' | 'center' | 'end' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
@@ -81,16 +88,20 @@ const align = given ?? measured?.align
 const onAccent = tone === 'accent' && !measured?.bg?.image
 const s = dialog({ triggerStyle: onAccent && (triggerStyle ?? 'primary') === 'primary' ? 'secondary' : triggerStyle, size, align })
 const headingId = `${id}-title`
+// Opened only from elsewhere: no button, no band of its own (the page's opener carries the source's label).
+const external = triggerStyle === 'none'
+const Frame = external ? Fragment : Section
+const frame = external ? {} : { measured, tone, spacing: 'md' as const, id: `${id}-section` }
 // Invoker Commands attributes are not in Astro's button types.
 const invoker = { command: 'show-modal', commandfor: id }
 // Scripting off: the content takes the button's place in the section, as a plain block, and the close button goes
 // (it can only close an open dialog). Styles scoped by the dialog's id (a checked token, nothing from content); the selectors win over the UA sheet by specificity.
 const noscript = `<style>[data-kit-dialog="${id}"]>[data-kit-dialog-open],#${id} form[method=dialog]{display:none}#${id}:not([open]){display:block;position:static;margin:0;width:100%;max-width:none;max-height:none;box-shadow:none}</style>`
 ---
-<Section measured={measured} tone={tone} spacing="md" id={`${id}-section`}>
-  <div class={s.root()} data-kit-dialog={id} data-kit-trigger={trigger} data-cr-fact={factId}>
+<Frame {...frame}>
+  <div class={external ? undefined : s.root()} data-kit-dialog={id} data-kit-external={external || undefined} data-kit-trigger={trigger} data-cr-fact={factId}>
     <noscript set:html={noscript} />
-    <button type="button" class={s.trigger()} data-kit-dialog-open aria-haspopup="dialog" {...invoker}>{triggerLabel}</button>
+    {!external && <button type="button" class={s.trigger()} data-kit-dialog-open aria-haspopup="dialog" {...invoker}>{triggerLabel}</button>}
     <dialog id={id} class={s.box()} open={open || undefined} aria-labelledby={heading ? headingId : undefined} aria-label={heading ? undefined : triggerLabel}>
       <div class={s.inner()}>
         {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
@@ -106,7 +117,7 @@ const noscript = `<style>[data-kit-dialog="${id}"]>[data-kit-dialog-open],#${id}
       </form>
     </dialog>
   </div>
-</Section>
+</Frame>
 
 <script>
   // Browsers without Invoker Commands: the button opens the dialog here. Everywhere, a click on the backdrop closes it.
@@ -114,9 +125,22 @@ const noscript = `<style>[data-kit-dialog="${id}"]>[data-kit-dialog-open],#${id}
   for (const root of document.querySelectorAll<HTMLElement>('[data-kit-dialog]')) {
     const dialog = root.querySelector('dialog')
     const open = root.querySelector<HTMLButtonElement>('[data-kit-dialog-open]')
-    if (!dialog || !open || root.dataset.ready !== undefined) continue
+    if (!dialog || (!open && root.dataset.kitExternal === undefined) || root.dataset.ready !== undefined) continue
     root.dataset.ready = ''
-    if (!invokers) open.addEventListener('click', () => { if (!dialog.open) dialog.showModal() })
+    const show = () => { if (!dialog.open) dialog.showModal() }
+    if (open && !invokers) open.addEventListener('click', show)
+    // Opened from elsewhere (`triggerStyle: 'none'`): a link to `#<id>` anywhere on the page, a `commandfor` button where
+    // the browser has no Invoker Commands, and an address that arrives with `#<id>`. Ids are plain tokens (checked above).
+    if (root.dataset.kitExternal !== undefined) {
+      for (const link of document.querySelectorAll<HTMLAnchorElement>(`a[href="#${dialog.id}"]`)) {
+        link.setAttribute('aria-haspopup', 'dialog')
+        link.addEventListener('click', (event) => { event.preventDefault(); show() })
+      }
+      if (!invokers) for (const button of document.querySelectorAll<HTMLButtonElement>(`button[commandfor="${dialog.id}"]`)) button.addEventListener('click', show)
+      const fromHash = () => { if (location.hash === `#${dialog.id}`) show() }
+      fromHash()
+      addEventListener('hashchange', fromHash)
+    }
     // The inner box fills the dialog and owns the scrollbar, so a click whose target is the dialog itself landed on the backdrop.
     dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close() })
   }

package/components/dialog/fixtures.json

@@ -80,5 +80,24 @@
       "open": true,
       "tone": "accent"
     }
+  },
+  {
+    "name": "external-open",
+    "props": {
+      "id": "fx-dialog-ext",
+      "triggerLabel": "Sign up now",
+      "triggerStyle": "none",
+      "open": true,
+      "heading": "Get the monthly guide",
+      "html": "<p>One email a month: what we built, what we learned.</p>",
+      "actions": [
+        {
+          "label": "Read past issues",
+          "href": "/journal/"
+        }
+      ],
+      "closeLabel": "Close",
+      "trigger": "click"
+    }
   }
 ]

package/components/dialog/meta.json

@@ -19,10 +19,11 @@
         "primary",
         "secondary",
         "ghost",
-        "link"
+        "link",
+        "none"
       ],
       "default": "primary",
-      "description": "How the opening button looks: a filled or outlined button, or a text link."
+      "description": "How the opening button looks: a filled or outlined button, or a text link. none: no button of its own and no section band; opened by a link to #<id> or a commandfor button elsewhere on the page, or an address ending in #<id> (a popup drawn over the page, its opener in the content)."
     },
     "size": {
       "options": [

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 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,11 @@ 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
   title?: string | undefined
   text?: string | undefined
   /** The slide's link, flat so a page stays within Contentrain's nesting depth. */

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), 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,7 @@ 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 { measuredSlides } from '../_shared/measured'
 import { type ActionInput, type ImageInput, type MeasuredStyle } from '../_shared/types'
 
@@ -19,6 +21,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 +45,14 @@ 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
   title?: string | undefined
   text?: string | undefined
   /** The slide's link, flat so a page stays within Contentrain's nesting depth. */
@@ -81,19 +90,28 @@ interface Props {
 }
 
 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
+// 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 image = slide.image === undefined ? undefined : imageOf(slide.image, slide.imageAlt)
+  const video = 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 || slide.title || slide.text || action ? [{ ...slide, image, video, action }] : []
+}) satisfies Array<{ image: ImageInput | undefined, video: string | 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)
+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 +119,11 @@ 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.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 ? 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,17 +133,21 @@ 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>
@@ -178,7 +202,9 @@ 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() }
+    embla.on('select', () => { pause(); sync() }).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,8 @@
   { "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." }] } }
 ]

package/components/slider/meta.json

@@ -1,7 +1,7 @@
 {
   "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 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"],
@@ -11,7 +11,7 @@
     "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." }, "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." },
     "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." },
@@ -34,5 +34,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; 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,14 @@
 {
   "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",
     "image.ts",
     "measured.ts",
     "safe-url.ts",
@@ -85,6 +87,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 +263,7 @@
     }
   },
   "slots": {},
-  "js": "none",
+  "js": "vanilla",
   "dependencies": {},
   "sources": {
     "gutenberg": [

package/mapping/divi.json

@@ -423,7 +423,8 @@
       "id": "stats.counter",
       "component": "stats",
       "variant": {
-        "order": "value-first"
+        "order": "value-first",
+        "motion": "count"
       },
       "slots": {
         "intro": {

package/mapping/elementor.json

@@ -897,7 +897,8 @@
       "id": "stats.counter",
       "component": "stats",
       "variant": {
-        "labelSize": "lg"
+        "labelSize": "lg",
+        "motion": "count"
       },
       "slots": {
         "title": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",
@@ -42,10 +42,11 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.63.1"
+    "@contentrain/types": "1.64.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
+    "happy-dom": "^20.14.5",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.63.0",
     "pngjs": "^7.0.0",