@contentrain/astro-kit 0.38.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 | 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"
@@ -1955,10 +1957,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": [
@@ -2225,6 +2228,8 @@
       "uses": [],
       "shared": [
         "KitImage.astro",
+        "embed-frame.ts",
+        "embed-target.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2322,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"
       ]
     },
     {
@@ -3468,6 +3472,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": {
@@ -3597,7 +3605,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"
       ]
     },
     {
@@ -5727,7 +5736,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 (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": [
@@ -5735,6 +5744,8 @@
         "KitImage.astro",
         "Section.astro",
         "SectionHeader.astro",
+        "embed-frame.ts",
+        "embed-target.ts",
         "image.ts",
         "measured.ts",
         "safe-url.ts",
@@ -5779,14 +5790,23 @@
               "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."
+              },
+              "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",
@@ -5809,7 +5829,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 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",
@@ -5837,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,
@@ -6045,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; 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"
@@ -6054,6 +6079,8 @@
         "slides": "slides",
         "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",
@@ -6567,12 +6594,16 @@
     {
       "id": "stats",
       "name": "Stats",
-      "description": "A row of figures with a short label each (years in business, clients, uptime), with an optional heading and intro. The counter/number section of a landing page; numbers are static text, not animated.",
+      "description": "A row of figures with a short label each (years in business, clients, uptime), with an optional heading and intro. The counter/number section of a landing page; numbers are text (the final value in the HTML); motion \"count\" counts them up once in view, as a source counter did.",
       "category": "section",
       "uses": [],
       "shared": [
+        "BehaviorScript.astro",
         "KitImage.astro",
         "Section.astro",
+        "behaviors.ts",
+        "embed-frame.ts",
+        "embed-target.ts",
         "image.ts",
         "measured.ts",
         "safe-url.ts",
@@ -6651,6 +6682,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": {
@@ -6819,7 +6858,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

@@ -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'])
@@ -103,7 +107,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)
@@ -222,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). */
@@ -231,12 +274,20 @@ 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 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') {
+      try { dialog(root) }
+      catch { /* its dialogs stay as printed */ }
+    }
   }
 }

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

@@ -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>
 )}
 
@@ -68,4 +71,12 @@ const factId = fact && /^[\w:.-]{1,120}$/.test(fact) ? fact : undefined
   .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/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/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." }