@contentrain/astro-kit 0.39.0 → 0.40.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: image, video (played only on request) or text-card slides | Embla |
+| `slider` | Carousel on a scroll-snap row: image, video (a file played only on request, or a YouTube/Vimeo link loaded only on click) 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 |
@@ -33,7 +33,7 @@ They read its design tokens and pass its gates: `astro check` with the
 | `breadcrumb` | Ancestors, then the current page, optional JSON-LD | none |
 | `band` | The styled fallback section: heading, lead, image, a grid of items (figure, title, detail, text, points, link) and buttons, in the measured frame | none |
 | `dialog` | A popup the visitor opens: a button and a modal `<dialog>` with text, buttons and a `form` slot; never opens by itself | a few lines, no dependency |
-| `behavior` | A behavior island: a source widget no component carries (slider, tabs, accordion, counter, toggle, filter, in-page dialog, anchor links, image lightbox), kept as its own markup and wired by one vanilla module; static and readable without it | `_shared/behaviors.ts`, no dependency |
+| `behavior` | A behavior island: a source widget no component carries (slider, tabs, accordion, counter, toggle, filter, in-page dialog, anchor links, image lightbox, a video player kept as a poster link that plays in place on click), kept as its own markup and wired by one vanilla module; static and readable without it | `_shared/behaviors.ts`, no dependency |
 
 Each component lives in `components/<id>/`:
 

package/catalog.json

@@ -455,6 +455,8 @@
       "shared": [
         "Section.astro",
         "behaviors.ts",
+        "embed-frame.ts",
+        "embed-target.ts",
         "measured.ts",
         "safe-url.ts",
         "types.ts"
@@ -2226,6 +2228,8 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "embed-frame.ts",
+        "embed-target.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2323,8 +2327,7 @@
       },
       "a11y": "The poster is one link named '<action>: <title>' that opens the provider's page without script. With script, Enter or a click puts the iframe in its place with the title as its accessible name and moves focus into it. Modified clicks (new tab) keep the link behaviour. The play icon is decorative.",
       "files": [
-        "Embed.astro",
-        "embed.ts"
+        "Embed.astro"
       ]
     },
     {
@@ -5733,7 +5736,7 @@
     {
       "id": "slider",
       "name": "Slider",
-      "description": "A carousel of images, videos or text cards, with optional title, text and button per slide. Without JavaScript it is a snapping horizontal scroller; Embla adds paging, arrows and dots.",
+      "description": "A carousel of images, videos (a file, or a YouTube/Vimeo link loaded only on click) or text cards, with optional title, text and button per slide. Without JavaScript it is a snapping horizontal scroller; Embla adds paging, arrows and dots.",
       "category": "section",
       "uses": [],
       "shared": [
@@ -5741,6 +5744,8 @@
         "KitImage.astro",
         "Section.astro",
         "SectionHeader.astro",
+        "embed-frame.ts",
+        "embed-target.ts",
         "image.ts",
         "measured.ts",
         "safe-url.ts",
@@ -5797,6 +5802,11 @@
                 "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",
@@ -5819,7 +5829,7 @@
               }
             }
           },
-          "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."
+          "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",
@@ -5847,6 +5857,11 @@
           "content": false,
           "description": "ui-strings slider.of."
         },
+        "playLabel": {
+          "type": "string",
+          "content": false,
+          "description": "ui-strings embed.play."
+        },
         "loop": {
           "type": "boolean",
           "default": false,
@@ -6055,7 +6070,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: a video slide loads nothing until the reader plays it, never starts by itself, keeps its native controls with its caption under them, and pauses when its slide is paged away; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling.",
+      "a11y": "WAI-ARIA carousel pattern: a labelled region with aria-roledescription=carousel, slides as labelled groups ('Slide 2 of 5'), labelled previous/next buttons disabled at the ends, and dot buttons marking the current slide. The track and the buttons are tied by aria-controls, the row takes focus (arrow keys page it, polite live announcement). There is no autoplay, so nothing moves unasked: a video slide loads nothing until the reader plays it, never starts by itself, keeps its native controls with its caption under them, and pauses when its slide is paged away; a video link is a labelled poster link ('Play: title') to the video's page that becomes the player only on a click (no request to the provider before it; YouTube from youtube-nocookie.com, Vimeo with dnt), keeps the poster's box so nothing moves, takes focus, and goes back to its poster when its slide is paged away; with prefers-reduced-motion slides change without animation. Without JavaScript every slide is reachable by scrolling.",
       "files": [
         "Slider.astro",
         "SliderTrack.astro"
@@ -6065,6 +6080,7 @@
         "slides[].image": "slides[].image",
         "slides[].imageAlt": "slides[].image_alt",
         "slides[].video": "slides[].video",
+        "slides[].embed": "slides[].embed",
         "slides[].title": "slides[].title",
         "slides[].text": "slides[].text",
         "slides[].ctaLabel": "slides[].cta_label",
@@ -6586,6 +6602,8 @@
         "KitImage.astro",
         "Section.astro",
         "behaviors.ts",
+        "embed-frame.ts",
+        "embed-target.ts",
         "image.ts",
         "measured.ts",
         "safe-url.ts",

package/components/_shared/behaviors.ts

@@ -4,14 +4,18 @@
 //
 // Each island is a root the Behavior component prints: `data-cr-behavior` names the kind, and the item, title and
 // panel selectors come from the engine (`data-cr-items`, `data-cr-title`, `data-cr-panel`), never from the source
-// (the writer strips every `data-cr-*` the source markup carried before it wraps it). The module reads only ARIA,
-// `details`, `hidden` and those attributes.
+// (the engine's island pass strips every `data-cr-*` the source markup carried before it wraps it). The module reads only ARIA,
+// `details`, `hidden` and those attributes, plus `data-cr-video` on a link the engine wrote after that strip (a source
+// video player kept as a poster link to its page).
 //
 // Rules (t13's PR-E checklist §4): text goes in through `textContent` only, never `innerHTML` or its family; no
 // `eval`, `Function`, `fetch` or `location`; every selector is scoped to its island root and run in try/catch (a
 // selector the browser refuses leaves that island static); `init` is idempotent; anything that fails leaves the
 // island as it was printed: readable, every item in reading order. Reduced motion is honoured.
 
+import { playerFrame, plainClick } from './embed-frame'
+import { videoTarget } from './embed-target'
+
 type Kind = 'disclosure' | 'tablist' | 'carousel' | 'dialog' | 'countup' | 'toggle' | 'filter' | 'anchor' | 'lightbox'
 
 const KINDS: ReadonlySet<string> = new Set<Kind>(['disclosure', 'tablist', 'carousel', 'dialog', 'countup', 'toggle', 'filter', 'anchor', 'lightbox'])
@@ -232,6 +236,35 @@ function lightbox(root: HTMLElement): void {
   }
 }
 
+/**
+ * A source video player the engine kept as a link to its page (`<a href=watch-url data-cr-video="youtube:<id>">`, a
+ * poster image inside): a plain click plays it in place. Nothing loads before the click, and the player's address is
+ * built from the checked provider and id (embed-target.ts), never from the link's `href` or the attribute's text: an
+ * id the parser refuses leaves the link as it is, opening the provider's page. The player takes the link's own box,
+ * so nothing around it moves.
+ */
+function video(root: HTMLElement): void {
+  for (const link of within(root, 'a[href][data-cr-video]') as HTMLAnchorElement[]) {
+    // Only `youtube:<id>` / `vimeo:<id>`, the form the engine writes: never an address, so no text of the attribute can
+    // reach the frame. One inside a nested root came with that (spoofed) root's markup: never ours to wire.
+    const value = link.dataset.crVideo ?? ''
+    const found = /^(?:youtube|vimeo):[\w-]+$/.test(value) && link.parentElement?.closest('[data-cr-behavior]') === root ? videoTarget(value) : null
+    if (!found) continue
+    link.addEventListener('click', (event) => {
+      if (!plainClick(event)) return
+      // A poster's own box; a link with no picture (a title only) plays at 16:9, never as tall as one line of text.
+      const box = link.querySelector('img') ? link.getBoundingClientRect() : null
+      const name = link.getAttribute('aria-label') || link.textContent?.trim() || link.querySelector('img')?.alt || found.provider
+      const frame = playerFrame(found.src, name, 'cr-behavior-video')
+      if (!frame) return
+      event.preventDefault()
+      Object.assign(frame.style, { display: 'block', width: '100%', height: 'auto', border: '0', aspectRatio: box && box.width > 0 && box.height > 0 ? `${box.width} / ${box.height}` : '16 / 9' })
+      link.replaceWith(frame)
+      frame.focus()
+    })
+  }
+}
+
 const WIRE: Record<Kind, (root: HTMLElement) => void> = { disclosure, tablist, carousel, dialog, countup, toggle, filter, anchor, lightbox }
 
 /** Wires every island on the page once. Safe to call again (a view transition, a second script copy). */
@@ -247,6 +280,9 @@ export function initBehaviors(scope: ParentNode = document): void {
     catch {
       // Left as printed: the content is all there, it just does not move.
     }
+    // A video link plays in place in any island: a player sat in a tab, a slide or a panel as often as on its own.
+    try { video(root) }
+    catch { /* its links stay links */ }
     // 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') {

package/components/_shared/embed-frame.ts

@@ -0,0 +1,22 @@
+// The player a click on an embed poster becomes: one recipe for the kit Embed, a Slider slide and a behaviour
+// island's video link, so the frame's permissions are written once. The address is checked again at the click: what
+// the page carries (`data-embed-src`, which an edited page could change) goes through embed-target.ts once more, and
+// the frame loads the address that builds from a known provider, never the attribute's text.
+import { embedTarget } from './embed-target'
+
+/** An iframe for the player at `src`, named `title`, filling its positioned frame; none when `src` is no known player. */
+export function playerFrame(src: string | undefined, title: string, className = 'absolute inset-0 h-full w-full border-0'): HTMLIFrameElement | null {
+  const target = src ? embedTarget(src) : null
+  if (!target) return null
+  const frame = document.createElement('iframe')
+  frame.src = target.src
+  frame.title = title
+  frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write'
+  frame.allowFullscreen = true
+  frame.referrerPolicy = 'strict-origin-when-cross-origin'
+  frame.className = className
+  return frame
+}
+
+/** A plain left click: a modified one (new tab, new window) keeps the link's own behaviour. */
+export const plainClick = (event: MouseEvent): boolean => !event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey

package/components/{embed/embed.ts → _shared/embed-target.ts}

@@ -107,3 +107,33 @@ export function mapTarget(address: string): EmbedTarget | null {
   const query = encodeURIComponent(q)
   return { provider: 'google-maps', kind: 'map', src: `https://www.google.com/maps?q=${query}&output=embed`, href: `https://www.google.com/maps/search/?api=1&query=${query}` }
 }
+
+const VIDEO_PAGE: Record<string, (id: string) => string> = {
+  youtube: id => `https://www.youtube.com/watch?v=${encodeURIComponent(id)}`,
+  vimeo: id => `https://vimeo.com/${encodeURIComponent(id)}`,
+}
+
+/**
+ * A video to play in place: a video page or player URL, or `youtube:<id>` / `vimeo:<id>` (what the engine writes on a
+ * slide or an island link). Only a video comes back (never a map or a form); the id is checked by the same parser as a
+ * URL, so the player address is always built here, never taken from the content.
+ */
+export function videoTarget(value: string | undefined): EmbedTarget | null {
+  if (!value) return null
+  const short = /^(youtube|vimeo):([\w-]+)$/.exec(value.trim())
+  const target = embedTarget(short ? VIDEO_PAGE[short[1]!]!(short[2]!) : value)
+  return target?.kind === 'video' ? target : null
+}
+
+/** Hosts a video provider serves its players, thumbnails and streams from. */
+const VIDEO_HOST = /(?:^|\.)(?:youtube|youtube-nocookie|youtu|ytimg|googlevideo|ggpht|vimeo|vimeocdn|loom|wistia)\.(?:com|be|net)$/i
+
+/**
+ * An address on a video provider's own hosts (a YouTube thumbnail on i.ytimg.com, a Vimeo one on vimeocdn.com): never
+ * drawn as a poster, since loading it is a request to the provider before the reader asked for the video.
+ */
+export function onVideoHost(src: string | undefined): boolean {
+  if (!src) return false
+  try { return VIDEO_HOST.test(new URL(src, 'https://site.invalid').hostname) }
+  catch { return false }
+}

package/components/behavior/Behavior.astro

@@ -71,4 +71,12 @@ const NOSCRIPT = '<style>.cr-behavior dialog:not([open]){display:block;position:
   .cr-behavior-dialog { margin: auto; max-width: min(92vw, 40rem); max-height: 85dvh; border: 1px solid var(--color-line); border-radius: var(--radius-card, 0.75rem); padding: 1.5rem; }
   .cr-behavior-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
   .cr-behavior-lightbox img { display: block; max-width: 100%; max-height: 75dvh; margin-inline: auto; }
+  /* A source video player kept as a poster link (data-cr-video): a play button over it, drawn in CSS (nothing loads). */
+  .cr-behavior a[data-cr-video] { position: relative; display: block; }
+  .cr-behavior a[data-cr-video] img { display: block; width: 100%; height: auto; }
+  .cr-behavior a[data-cr-video]::before { content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; width: 4rem; height: 4rem; translate: -50% -50%; border-radius: 9999px; background: var(--color-accent); box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); }
+  .cr-behavior a[data-cr-video]::after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; translate: -35% -50%; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; border-left: 1.25rem solid var(--color-accent-ink, #fff); }
+  /* No poster (only the title): a 16:9 dark panel, the title along its foot, the button in its middle. */
+  .cr-behavior a[data-cr-video]:not(:has(img)) { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 1rem 1.25rem; border-radius: var(--radius-card, 0.75rem); background: var(--color-ink, #111827); color: var(--color-surface, #fff); font-weight: 600; text-decoration: none; }
+  .cr-behavior a[data-cr-video]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
 </style>

package/components/behavior/fixtures.json

@@ -50,5 +50,7 @@
       "tone": "accent",
       "html": "<h2><button aria-expanded=\"false\" aria-controls=\"cr-fx3-a\">Do you ship abroad?</button></h2><div id=\"cr-fx3-a\"><p>Yes, to the whole of Europe.</p></div><details><summary>Can I return an order?</summary><p>Within 30 days.</p></details>"
     }
-  }
+  },
+  {"name": "video-link", "props": {"kind": "anchor", "fact": "interactive:fx5", "html": "<h2>Studio tour</h2><p>A walk through the workshop.</p><a href=\"https://www.youtube.com/watch?v=aqz-KE-bpKQ\" target=\"_blank\" rel=\"noopener noreferrer\" data-cr-video=\"youtube:aqz-KE-bpKQ\"><img src=\"/kit-fixtures/photo-2.svg\" alt=\"\" loading=\"lazy\" width=\"1200\" height=\"800\"><span>Studio tour</span></a>"}},
+  {"name": "video-link-no-poster", "props": {"kind": "anchor", "fact": "interactive:fx6", "html": "<h2>Studio tour</h2><a href=\"https://vimeo.com/76979871\" target=\"_blank\" rel=\"noopener noreferrer\" data-cr-video=\"vimeo:76979871\"><span>Behind the scenes</span></a>"}}
 ]

package/components/behavior/meta.json

@@ -7,6 +7,8 @@
   "shared": [
     "Section.astro",
     "behaviors.ts",
+    "embed-frame.ts",
+    "embed-target.ts",
     "measured.ts",
     "safe-url.ts",
     "types.ts"

package/components/embed/Embed.astro

@@ -8,7 +8,7 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import type { ImageInput } from '../_shared/types'
-import { embedTarget, mapTarget } from './embed'
+import { embedTarget, mapTarget } from '../_shared/embed-target'
 
 const embed = tv({
   slots: {
@@ -84,20 +84,17 @@ const linkUrl = url && /^https?:\/\//i.test(url) ? url : undefined
   )}
 
 <script>
+  import { playerFrame, plainClick } from '../_shared/embed-frame'
+
   // Click (or Enter) on the poster: the player replaces it, focused, so keyboard and screen-reader users land in it.
   // A modified click (new tab, new window) keeps the link's own behaviour.
   document.addEventListener('click', (event) => {
-    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+    if (!plainClick(event)) return
     const link = (event.target as Element | null)?.closest<HTMLAnchorElement>('[data-kit-embed] a[data-embed-src]')
-    if (!link?.dataset.embedSrc) return
+    // An address that is no known player stays what it is: a link.
+    const frame = link && playerFrame(link.dataset.embedSrc, link.dataset.embedTitle ?? '')
+    if (!link || !frame) return
     event.preventDefault()
-    const frame = document.createElement('iframe')
-    frame.src = link.dataset.embedSrc
-    frame.title = link.dataset.embedTitle ?? ''
-    frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write'
-    frame.allowFullscreen = true
-    frame.referrerPolicy = 'strict-origin-when-cross-origin'
-    frame.className = 'absolute inset-0 h-full w-full border-0'
     link.replaceWith(frame)
     frame.focus()
   })

package/components/embed/meta.json

@@ -4,7 +4,7 @@
   "description": "A video, map or player from another site (YouTube, Vimeo, Google Maps, OpenStreetMap, Spotify, SoundCloud, Calendly, Typeform, Google Forms, Loom, Wistia), loaded only on click: until then a poster link to the provider's page, with no iframe, no third-party request and no cookie (YouTube through youtube-nocookie.com). Unknown providers are never framed; they stay a plain link.",
   "category": "content",
   "uses": [],
-  "shared": ["KitImage.astro", "safe-url.ts", "types.ts"],
+  "shared": ["KitImage.astro", "embed-frame.ts", "embed-target.ts", "safe-url.ts", "types.ts"],
   "variants": {
     "aspect": { "options": ["auto", "video", "portrait", "square", "map"], "default": "auto", "description": "auto: 16:9 for videos, 9:16 for YouTube Shorts, 4:3 (16:9 wide) for maps, a fixed strip for audio players. The others force a ratio." },
     "width": { "options": ["prose", "page"], "default": "prose", "description": "prose: as wide as the reading column. page: the full page frame." }

package/components/slider/Slider.astro

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

package/components/slider/fixtures.json

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

package/components/slider/meta.json

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

package/components/stats/meta.json

@@ -9,6 +9,8 @@
     "KitImage.astro",
     "Section.astro",
     "behaviors.ts",
+    "embed-frame.ts",
+    "embed-target.ts",
     "image.ts",
     "measured.ts",
     "safe-url.ts",

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": {

package/mapping/elementor.json

@@ -174,7 +174,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)",
@@ -192,7 +193,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)",
@@ -209,7 +211,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)",
@@ -287,7 +290,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)",
@@ -306,7 +310,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": ".slider-wrapper[data-slider-options] > *",
@@ -326,7 +331,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": {
@@ -1172,7 +1178,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 .swiper-slide:not(.swiper-slide-duplicate)",

package/mapping/gutenberg.json

@@ -219,7 +219,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": "figure.wp-block-image",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.39.0",
+  "version": "0.40.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",