@contentrain/astro-kit 0.39.0 → 0.41.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>/`:
 
@@ -81,6 +81,22 @@ The starter sets it to the accent; a site whose accent does not reach 4.5:1 on i
 surface sets a readable one. A dark section (`tone="inverse"`) reads
 `--color-accent-text-inverse` in its place.
 
+Quieter text (an intro, a caption, a role, a footer link) is a colour role, never
+opacity: dimmed text lays its colour over the band, and on a mid-tone band that falls
+under 4.5:1. It reads `--color-ink-muted` on a light band, `--color-ink-muted-inverse`
+on a dark one (the starter mixes the surface toward the ink; without it, the band's own
+text colour) and the fill's own ink on an accent or brand band. A light surface inside
+a band (a card, a form panel, a menu) is back on `--color-ink-muted`. The classes are
+in `_shared/muted.ts`.
+
+### Section hooks
+
+Every section component renders its root with an `id` and `data-kit-section="<component id>"`
+(`hero`, `card-grid`, `slider`, …), so a site's theme or a design layer can style one
+kind of section, or one section, without touching the component. The id is the one the
+page gives, or the component id counted per page (`hero`, then `hero-2`), the same on
+every build.
+
 A migrated site also carries its theme's type and shape, and components read
 these with a fallback to the kit's own values, so a site without them looks
 unchanged:

package/catalog.json

@@ -23,6 +23,7 @@
     "--radius-control",
     "--radius-image",
     "--spacing-gutter",
+    "--color-ink-muted-inverse",
     "--text-nav",
     "--text-footer",
     "--text-heading-1",
@@ -103,7 +104,9 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -455,7 +458,11 @@
       "shared": [
         "Section.astro",
         "behaviors.ts",
+        "embed-frame.ts",
+        "embed-target.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -641,6 +648,11 @@
               "description": "The section's minimum height."
             }
           }
+        },
+        "id": {
+          "type": "string",
+          "content": false,
+          "description": "Anchor id of the section. Without one, `behavior`, `behavior-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -740,7 +752,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -962,6 +976,11 @@
               "description": "The section's minimum height."
             }
           }
+        },
+        "id": {
+          "type": "string",
+          "content": false,
+          "description": "Anchor id of the section; the title gets `<id>-title`. Without one, `card-grid`, `card-grid-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -1085,7 +1104,9 @@
       "uses": [],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -1317,7 +1338,9 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -1644,7 +1667,9 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -1899,7 +1924,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `cta`, `cta-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -1945,7 +1970,9 @@
       "shared": [
         "Button.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2226,6 +2253,8 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "embed-frame.ts",
+        "embed-target.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2323,8 +2352,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"
       ]
     },
     {
@@ -2335,7 +2363,9 @@
       "uses": [],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2608,7 +2638,9 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2820,7 +2852,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `feature-list`, `feature-list-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -2868,6 +2900,7 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3090,7 +3123,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3386,6 +3421,8 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "instance-id.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3616,7 +3653,9 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3806,7 +3845,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `hero`, `hero-2`, … in render order, so every section on a page has its own."
         },
         "minHeight": {
           "type": "integer",
@@ -3973,6 +4012,7 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "muted.ts",
         "safe-url.ts"
       ],
       "variants": {
@@ -4054,7 +4094,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -4263,7 +4305,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `logo-cloud`, `logo-cloud-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -4309,6 +4351,8 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "instance-id.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -4434,7 +4478,9 @@
       "uses": [],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -4924,7 +4970,9 @@
       ],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -5244,7 +5292,9 @@
       "shared": [
         "Button.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -5382,7 +5432,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `pricing`, `pricing-2`, … in render order, so every section on a page has its own."
         },
         "compact": {
           "type": "boolean",
@@ -5657,6 +5707,7 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "instance-id.ts",
         "safe-url.ts"
       ],
       "variants": {
@@ -5733,7 +5784,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,8 +5792,12 @@
         "KitImage.astro",
         "Section.astro",
         "SectionHeader.astro",
+        "embed-frame.ts",
+        "embed-target.ts",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -5797,6 +5852,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 +5879,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 +5907,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 +6120,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 +6130,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",
@@ -6086,8 +6152,9 @@
       "category": "chrome",
       "uses": [],
       "shared": [
-        "social.ts",
-        "safe-url.ts"
+        "muted.ts",
+        "safe-url.ts",
+        "social.ts"
       ],
       "variants": {
         "display": {
@@ -6189,7 +6256,9 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6517,7 +6586,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `split`, `split-2`, … in render order, so every section on a page has its own."
         },
         "sticky": {
           "type": "boolean",
@@ -6586,8 +6655,12 @@
         "KitImage.astro",
         "Section.astro",
         "behaviors.ts",
+        "embed-frame.ts",
+        "embed-target.ts",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6836,7 +6909,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `stats`, `stats-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -6887,7 +6960,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6998,7 +7073,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `steps`, `steps-2`, … in render order, so every section on a page has its own."
         },
         "currentLabel": {
           "type": "string",
@@ -7167,7 +7242,9 @@
         "Button.astro",
         "Section.astro",
         "SectionHeader.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -7423,9 +7500,11 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
-        "social.ts",
+        "muted.ts",
         "safe-url.ts",
+        "social.ts",
         "types.ts"
       ],
       "variants": {
@@ -7546,7 +7625,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `team`, `team-2`, … in render order, so every section on a page has its own."
         },
         "bioClamp": {
           "type": "integer",
@@ -7730,7 +7809,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -7972,7 +8053,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `testimonial`, `testimonial-2`, … in render order, so every section on a page has its own."
         },
         "ratingLabel": {
           "type": "string",

package/components/_shared/Section.astro

@@ -4,6 +4,7 @@
 // their order.
 import { tv } from 'tailwind-variants'
 import { measuredFrame } from './measured'
+import { mutedAccent, mutedBrand, mutedInverse, mutedReset } from './muted'
 import { safeSrc } from './safe-url'
 import type { MeasuredStyle } from './types'
 
@@ -11,13 +12,14 @@ const section = tv({
   base: '',
   variants: {
     tone: {
-      default: 'bg-surface text-ink',
-      muted: 'bg-surface-muted text-ink',
-      // A dark band reads the accent's text colour made for it (`--color-accent-text-inverse`).
-      inverse: 'bg-ink text-surface [--color-accent-text:var(--color-accent-text-inverse)]',
-      accent: 'bg-accent text-accent-ink',
+      default: `bg-surface text-ink ${mutedReset}`,
+      muted: `bg-surface-muted text-ink ${mutedReset}`,
+      // A dark band reads the accent's text colour made for it (`--color-accent-text-inverse`), and its quieter text
+      // the muted role made for it (`muted.ts`).
+      inverse: `bg-ink text-surface [--color-accent-text:var(--color-accent-text-inverse)] ${mutedInverse}`,
+      accent: `bg-accent text-accent-ink ${mutedAccent}`,
       // The site's brand colour where it is not the accent (a band the source paints in the builder's own colour).
-      brand: 'bg-brand text-brand-ink',
+      brand: `bg-brand text-brand-ink ${mutedBrand}`,
       // No fill of its own: the page's background and text colour show through.
       none: '',
     },
@@ -42,15 +44,17 @@ interface Props {
   id?: string | undefined
   class?: string | undefined
   'aria-labelledby'?: string | undefined
+  /** The component this section is (`hero`, `card-grid`): `data-kit-section`'s value, the hook a theme or a design layer styles one kind of section by. */
+  kit?: string | undefined
   /** The source section's measured style (`MeasuredStyle`): frame width, padding, fill, image, columns, gap. Wins over `tone`. */
   measured?: MeasuredStyle | undefined
 }
 
-const { tone: given, spacing, width = 'page', as: Tag = 'section', id, class: className, 'aria-labelledby': labelledBy, measured } = Astro.props
+const { tone: given, spacing, width = 'page', as: Tag = 'section', id, class: className, 'aria-labelledby': labelledBy, kit, measured } = Astro.props
 const m = measuredFrame(measured)
 // A measured fill is the section's own colour, its text set by the measured tone; a tone alone picks the kit's band.
 const tone = m.color ? 'none' : m.tone === 'dark' ? 'inverse' : m.tone === 'light' ? 'default' : given
-const text = m.color ? (m.tone === 'dark' ? 'text-surface [--color-accent-text:var(--color-accent-text-inverse)]' : 'text-ink') : undefined
+const text = m.color ? (m.tone === 'dark' ? `text-surface [--color-accent-text:var(--color-accent-text-inverse)] ${mutedInverse}` : `text-ink ${mutedReset}`) : undefined
 const layered = m.image || m.overlay ? 'relative isolate overflow-hidden' : undefined
 const style = [m.color && `background-color: ${m.color}`, m.style].filter(Boolean).join('; ') || undefined
 // The reading column reads its own width token.
@@ -58,7 +62,7 @@ const frameStyle = width === 'prose' ? m.frameStyle?.replace('--container-page:'
 const backdrop = safeSrc(m.image?.src)
 const dataTone = m.color ? (m.tone === 'dark' ? 'inverse' : 'default') : tone ?? 'default'
 ---
-<Tag id={id} aria-labelledby={labelledBy} class={section({ tone, spacing, class: [text, layered, className].filter(Boolean).join(' ') || undefined })} style={style} data-tone={dataTone} data-kit-section data-kit-spacing={spacing ?? 'md'} data-kit-measured={measured ? '' : undefined}>
+<Tag id={id} aria-labelledby={labelledBy} class={section({ tone, spacing, class: [text, layered, className].filter(Boolean).join(' ') || undefined })} style={style} data-tone={dataTone} data-kit-section={kit ?? ''} data-kit-spacing={spacing ?? 'md'} data-kit-measured={measured ? '' : undefined}>
   {m.image && backdrop && <img src={backdrop} alt="" loading="lazy" decoding="async" class="absolute inset-0 -z-10 h-full w-full" style={`object-fit: ${m.image.fit}${m.image.position ? `; object-position: ${m.image.position}` : ''}`} />}
   {m.overlay && <div class="absolute inset-0 -z-10" style={`background: ${m.overlay}`} aria-hidden="true" />}
   {width === 'none' ? <slot /> : <div class={width === 'prose' ? 'container-prose' : 'container-page'} style={frameStyle}><slot /></div>}

package/components/_shared/SectionHeader.astro

@@ -3,6 +3,7 @@
 // section components that have no header of their own use it; with none of the four given it draws nothing.
 import Button from './Button.astro'
 import type { ActionInput } from './types'
+import { muted } from './muted'
 
 interface Props {
   heading?: string | undefined
@@ -19,9 +20,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
 ---
 {(heading || intro || eyebrow || actions.length > 0) && (
   <header class="mb-10 flex max-w-2xl flex-col gap-3">
-    {eyebrow && <p class="text-sm font-semibold tracking-wide uppercase opacity-80">{eyebrow}</p>}
+    {eyebrow && <p class:list={['text-sm font-semibold tracking-wide uppercase', muted]}>{eyebrow}</p>}
     {heading && <Heading id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{heading}</Heading>}
-    {intro && <p class="text-lg opacity-80" data-kit-text>{intro}</p>}
+    {intro && <p class:list={['text-lg', muted]} data-kit-text>{intro}</p>}
     {actions.length > 0 && <div class="mt-2 flex flex-wrap gap-3">{actions.map(action => <Button action={action} />)}</div>}
   </header>
 )}

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') {