@loidolt/theme-svelte 0.4.0 → 0.6.0

package/dist/components/Lightbox.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import MediaStage from '../internal/media/MediaStage.svelte';
+  import { createMediaZoom } from '../media-zoom.svelte.js';
+  import { mediaKey, mediaLabel, mediaThumbnail, type MediaItem } from '../media-utils.js';
+  import type { TriggerChildProps } from '../types.js';
+  import { cx } from '../utils.js';
+  import Filmstrip from './Filmstrip.svelte';
+  import LiveRegion from './LiveRegion.svelte';
+  import Thumbnail from './Thumbnail.svelte';
+
+  interface Props {
+    items: MediaItem[];
+    open?: boolean;
+    /** The item showing, 0-based. */
+    index?: number;
+    /** Accessible name of the dialog. */
+    title?: string;
+    /** Wrap from the last item to the first. */
+    loop?: boolean;
+    showThumbnails?: boolean;
+    showCaption?: boolean;
+    showCounter?: boolean;
+    /** Let images be zoomed and panned: pinch, Ctrl + wheel, double-click, or + and −. */
+    zoomable?: boolean;
+    /** Offer a download link for images that set `download`. */
+    downloadable?: boolean;
+    /** Opens the lightbox. Leave it out to drive `open` yourself, as `MediaGrid` does. */
+    trigger?: Snippet;
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    closeLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    downloadLabel?: string;
+    thumbnailsLabel?: string;
+    counterText?: (position: number, count: number) => string;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number) => void;
+    /** Lands on the dialog content. */
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    items,
+    open = $bindable(false),
+    index = $bindable(0),
+    title = 'Media viewer',
+    loop = true,
+    showThumbnails = false,
+    showCaption = true,
+    showCounter = true,
+    zoomable = true,
+    downloadable = false,
+    trigger,
+    triggerChild,
+    triggerClass = 'ldt-button',
+    closeLabel = 'Close viewer',
+    previousLabel = 'Previous',
+    nextLabel = 'Next',
+    zoomInLabel = 'Zoom in',
+    zoomOutLabel = 'Zoom out',
+    downloadLabel = 'Download',
+    thumbnailsLabel = 'All items',
+    counterText = (position, count) => `${position} of ${count}`,
+    onOpenChange,
+    onIndexChange,
+    class: className,
+    ref = $bindable(null),
+  }: Props = $props();
+
+  const zoom = createMediaZoom();
+  const count = $derived(items.length);
+  const current = $derived(items[Math.min(Math.max(0, index), Math.max(0, count - 1))]);
+  const ids = $derived(items.map((item, position) => mediaKey(item, position)));
+  const canPrevious = $derived(loop ? count > 1 : index > 0);
+  const canNext = $derived(loop ? count > 1 : index < count - 1);
+  const isImage = $derived(current?.kind === 'image');
+
+  function go(next: number) {
+    if (count === 0) return;
+    const target = loop ? (next + count) % count : Math.min(Math.max(0, next), count - 1);
+    if (target === index) return;
+    zoom.reset();
+    index = target;
+    onIndexChange?.(target);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    // Keys aimed at a control inside the stage (a player's range, a select) stay with it.
+    if ((event.target as HTMLElement).matches('input, select, textarea')) return;
+    const handled = (() => {
+      if (event.key === 'ArrowRight') go(index + 1);
+      else if (event.key === 'ArrowLeft') go(index - 1);
+      else if (event.key === 'Home') go(0);
+      else if (event.key === 'End') go(count - 1);
+      else if (zoomable && isImage && (event.key === '+' || event.key === '=')) zoom.zoomIn();
+      else if (zoomable && isImage && event.key === '-') zoom.zoomOut();
+      else if (zoomable && isImage && event.key === '0') zoom.reset();
+      else return false;
+      return true;
+    })();
+    if (handled) event.preventDefault();
+  }
+
+  // Swipe to navigate when the image is not zoomed (a zoomed image pans instead).
+  let swipeStart: number | null = null;
+  const onPointerDown = (event: PointerEvent) => {
+    swipeStart = zoom.zoomed ? null : event.clientX;
+  };
+  const onPointerUp = (event: PointerEvent) => {
+    if (swipeStart === null) return;
+    const delta = event.clientX - swipeStart;
+    swipeStart = null;
+    if (Math.abs(delta) > 50) go(delta < 0 ? index + 1 : index - 1);
+  };
+
+  // Warm the neighbours, so moving on shows the next image at once.
+  $effect(() => {
+    if (!open || count < 2) return;
+    for (const offset of [-1, 1]) {
+      const neighbour = items[(index + offset + count) % count];
+      if (neighbour?.kind === 'image') new Image().src = neighbour.src;
+    }
+  });
+
+  function handleOpenChange(next: boolean) {
+    if (!next) zoom.reset();
+    onOpenChange?.(next);
+  }
+</script>
+
+<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  {#if triggerChild}<DialogPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</DialogPrimitive.Trigger
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClass}
+      >{@render trigger()}</DialogPrimitive.Trigger
+    >{/if}
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay class="ldt-overlay ldt-lightbox__overlay" />
+    <DialogPrimitive.Content
+      bind:ref
+      class={cx('ldt-lightbox', className)}
+      onkeydown={handleKeydown}
+    >
+      <DialogPrimitive.Title class="ldt-sr-only">{title}</DialogPrimitive.Title>
+      <div class="ldt-lightbox__bar">
+        {#if showCounter && count}<span class="ldt-lightbox__counter" aria-hidden="true"
+            >{counterText(index + 1, count)}</span
+          >{/if}
+        <div class="ldt-lightbox__tools">
+          {#if zoomable && isImage}
+            <button
+              type="button"
+              class="ldt-lightbox__control"
+              aria-label={zoomOutLabel}
+              disabled={zoom.scale <= 1}
+              onclick={zoom.zoomOut}>−</button
+            >
+            <button
+              type="button"
+              class="ldt-lightbox__control"
+              aria-label={zoomInLabel}
+              onclick={zoom.zoomIn}>+</button
+            >
+          {/if}
+          {#if downloadable && current?.kind === 'image' && current.download}<a
+              class="ldt-lightbox__control ldt-lightbox__download"
+              href={current.download}
+              download>{downloadLabel}</a
+            >{/if}
+          <DialogPrimitive.Close class="ldt-lightbox__control" aria-label={closeLabel}
+            >×</DialogPrimitive.Close
+          >
+        </div>
+      </div>
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="ldt-lightbox__stage"
+        data-zoomed={zoom.zoomed ? '' : undefined}
+        onpointerdown={onPointerDown}
+        onpointerup={onPointerUp}
+      >
+        {#if current}
+          {#key ids[index]}<MediaStage item={current} zoom={zoomable ? zoom : undefined} />{/key}
+        {/if}
+        {#if canPrevious}<button
+            type="button"
+            class="ldt-lightbox__control ldt-lightbox__nav ldt-lightbox__nav--previous"
+            aria-label={previousLabel}
+            onclick={() => go(index - 1)}
+            ><span aria-hidden="true" class="ldt-lightbox__chevron"></span></button
+          >{/if}
+        {#if canNext}<button
+            type="button"
+            class="ldt-lightbox__control ldt-lightbox__nav ldt-lightbox__nav--next"
+            aria-label={nextLabel}
+            onclick={() => go(index + 1)}
+            ><span aria-hidden="true" class="ldt-lightbox__chevron"></span></button
+          >{/if}
+      </div>
+      {#if showCaption && current?.caption}<p class="ldt-lightbox__caption">
+          {current.caption}
+        </p>{/if}
+      {#if showThumbnails && count > 1}
+        <Filmstrip
+          class="ldt-lightbox__strip"
+          orientation="horizontal"
+          label={thumbnailsLabel}
+          items={ids.map((id) => ({ id }))}
+          selectedId={ids[index]}
+          onSelect={(id) => go(ids.indexOf(id))}
+        >
+          {#snippet item(entry)}
+            {@const position = ids.indexOf(entry.id)}
+            <Thumbnail
+              src={mediaThumbnail(items[position])}
+              alt=""
+              ratio="square"
+              fit="cover"
+            /><span class="ldt-sr-only">{mediaLabel(items[position], position)}</span>
+          {/snippet}
+        </Filmstrip>
+      {/if}
+      <!-- The visible counter is hidden from assistive tech; this announces each move once. -->
+      <LiveRegion
+        message={count && current
+          ? `${mediaLabel(current, index)}, ${counterText(index + 1, count)}`
+          : ''}
+      />
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/dist/components/Lightbox.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+import { type MediaItem } from '../media-utils.js';
+import type { TriggerChildProps } from '../types.js';
+interface Props {
+    items: MediaItem[];
+    open?: boolean;
+    /** The item showing, 0-based. */
+    index?: number;
+    /** Accessible name of the dialog. */
+    title?: string;
+    /** Wrap from the last item to the first. */
+    loop?: boolean;
+    showThumbnails?: boolean;
+    showCaption?: boolean;
+    showCounter?: boolean;
+    /** Let images be zoomed and panned: pinch, Ctrl + wheel, double-click, or + and −. */
+    zoomable?: boolean;
+    /** Offer a download link for images that set `download`. */
+    downloadable?: boolean;
+    /** Opens the lightbox. Leave it out to drive `open` yourself, as `MediaGrid` does. */
+    trigger?: Snippet;
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    closeLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    downloadLabel?: string;
+    thumbnailsLabel?: string;
+    counterText?: (position: number, count: number) => string;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number) => void;
+    /** Lands on the dialog content. */
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Lightbox: import("svelte").Component<Props, {}, "ref" | "open" | "index">;
+type Lightbox = ReturnType<typeof Lightbox>;
+export default Lightbox;

package/dist/components/LiveRegion.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Politeness } from '../announcer.svelte.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Text to announce. Changing it is what triggers speech. */
+    message?: string;
+    /** `'polite'` waits for a pause (`role="status"`); `'assertive'` interrupts (`role="alert"`). */
+    politeness?: Politeness;
+    /** Read the whole region on every change, not only the changed part. */
+    atomic?: boolean;
+    /** Keep the region off-screen. Set `false` to also show the message visually. */
+    visuallyHidden?: boolean;
+    /** Rendered after `message`, for richer content. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    message = '',
+    politeness = 'polite',
+    atomic = true,
+    visuallyHidden = true,
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  Must already be in the document before its text changes: a region mounted together with its
+  message is silent in most screen readers. Render it once, unconditionally, and change the
+  message — `createAnnouncer()` does that bookkeeping.
+-->
+<div
+  bind:this={ref}
+  class={cx('ldt-live-region', visuallyHidden && 'ldt-sr-only', className)}
+  role={politeness === 'assertive' ? 'alert' : 'status'}
+  aria-live={politeness}
+  aria-atomic={atomic}
+  {...rest}
+>
+  {message}{#if children}{@render children()}{/if}
+</div>

package/dist/components/LiveRegion.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Politeness } from '../announcer.svelte.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Text to announce. Changing it is what triggers speech. */
+    message?: string;
+    /** `'polite'` waits for a pause (`role="status"`); `'assertive'` interrupts (`role="alert"`). */
+    politeness?: Politeness;
+    /** Read the whole region on every change, not only the changed part. */
+    atomic?: boolean;
+    /** Keep the region off-screen. Set `false` to also show the message visually. */
+    visuallyHidden?: boolean;
+    /** Rendered after `message`, for richer content. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const LiveRegion: import("svelte").Component<Props, {}, "ref">;
+type LiveRegion = ReturnType<typeof LiveRegion>;
+export default LiveRegion;

package/dist/components/MediaCarousel.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import MediaStage from '../internal/media/MediaStage.svelte';
+  import { createMediaQuery } from '../media.svelte.js';
+  import {
+    mediaKey,
+    mediaLabel,
+    mediaThumbnail,
+    resolveAspectRatio,
+    type AspectRatioName,
+    type MediaItem,
+  } from '../media-utils.js';
+  import { cx } from '../utils.js';
+  import Filmstrip from './Filmstrip.svelte';
+  import Thumbnail from './Thumbnail.svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: MediaItem[];
+    /** Accessible name of the carousel. */
+    label: string;
+    /** The slide showing, 0-based. */
+    index?: number;
+    loop?: boolean;
+    ratio?: AspectRatioName | number | string;
+    showThumbnails?: boolean;
+    showCaption?: boolean;
+    /**
+     * Advance on a timer. It pauses while the pointer or focus is inside, offers a visible
+     * pause button (WCAG 2.2.2), and starts paused for people who prefer reduced motion.
+     */
+    autoplay?: boolean;
+    /** Milliseconds per slide when autoplaying. */
+    interval?: number;
+    previousLabel?: string;
+    nextLabel?: string;
+    pauseLabel?: string;
+    playLabel?: string;
+    thumbnailsLabel?: string;
+    slideLabel?: (position: number, count: number) => string;
+    onIndexChange?: (index: number) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    items,
+    label,
+    index = $bindable(0),
+    loop = true,
+    ratio = 'video',
+    showThumbnails = false,
+    showCaption = true,
+    autoplay = false,
+    interval = 5000,
+    previousLabel = 'Previous slide',
+    nextLabel = 'Next slide',
+    pauseLabel = 'Pause slideshow',
+    playLabel = 'Start slideshow',
+    thumbnailsLabel = 'Slides',
+    slideLabel = (position, count) => `${position} of ${count}`,
+    onIndexChange,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const reducedMotion = createMediaQuery('(prefers-reduced-motion: reduce)');
+  const count = $derived(items.length);
+  const ids = $derived(items.map((item, position) => mediaKey(item, position)));
+  const canPrevious = $derived(loop ? count > 1 : index > 0);
+  const canNext = $derived(loop ? count > 1 : index < count - 1);
+
+  // `rotating` is the user's choice; `held` covers hover and focus, which pause without changing it.
+  let rotating = $derived(autoplay && !reducedMotion.matches);
+  let hovered = $state(false);
+  let focused = $state(false);
+  const running = $derived(rotating && !hovered && !focused && count > 1);
+
+  function go(next: number) {
+    if (count === 0) return;
+    const target = loop ? (next + count) % count : Math.min(Math.max(0, next), count - 1);
+    if (target === index) return;
+    index = target;
+    onIndexChange?.(target);
+  }
+
+  $effect(() => {
+    if (!running) return;
+    const timer = setInterval(() => go(index + 1), interval);
+    return () => clearInterval(timer);
+  });
+</script>
+
+<section
+  bind:this={ref}
+  class={cx('ldt-media-carousel', className)}
+  aria-roledescription="carousel"
+  aria-label={label}
+  onpointerenter={() => (hovered = true)}
+  onpointerleave={() => (hovered = false)}
+  onfocusin={() => (focused = true)}
+  onfocusout={(event) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) focused = false;
+  }}
+  {...rest}
+>
+  <div class="ldt-media-carousel__controls">
+    {#if autoplay}<button
+        type="button"
+        class="ldt-media-carousel__control"
+        aria-label={rotating ? pauseLabel : playLabel}
+        onclick={() => (rotating = !rotating)}
+        ><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false"
+          >{#if rotating}<path d="M4 3h3v10H4zM9 3h3v10H9z" fill="currentColor" />{:else}<path
+              d="M4 2.5v11l9-5.5z"
+              fill="currentColor"
+            />{/if}</svg
+        ></button
+      >{/if}
+    <button
+      type="button"
+      class="ldt-media-carousel__control"
+      aria-label={previousLabel}
+      disabled={!canPrevious}
+      onclick={() => go(index - 1)}
+      ><span class="ldt-media-carousel__chevron" aria-hidden="true"></span></button
+    >
+    <button
+      type="button"
+      class="ldt-media-carousel__control ldt-media-carousel__control--next"
+      aria-label={nextLabel}
+      disabled={!canNext}
+      onclick={() => go(index + 1)}
+      ><span class="ldt-media-carousel__chevron" aria-hidden="true"></span></button
+    >
+  </div>
+  <!--
+    Polite while the user drives it; silent while it rotates on its own, so a screen reader is
+    not interrupted every few seconds.
+  -->
+  <div
+    class="ldt-media-carousel__viewport"
+    style:--ldt-aspect-ratio={resolveAspectRatio(ratio)}
+    aria-live={running ? 'off' : 'polite'}
+  >
+    {#each items as item, position (ids[position])}
+      <div
+        class="ldt-media-carousel__slide"
+        role="group"
+        aria-roledescription="slide"
+        aria-label={`${slideLabel(position + 1, count)}: ${mediaLabel(item, position)}`}
+        hidden={position !== index}
+      >
+        {#if position === index}<MediaStage {item} fit="cover" />{/if}
+        {#if showCaption && item.caption}<p class="ldt-media-carousel__caption">
+            {item.caption}
+          </p>{/if}
+      </div>
+    {/each}
+  </div>
+  {#if showThumbnails && count > 1}
+    <Filmstrip
+      orientation="horizontal"
+      label={thumbnailsLabel}
+      items={ids.map((id) => ({ id }))}
+      selectedId={ids[index]}
+      onSelect={(id) => go(ids.indexOf(id))}
+    >
+      {#snippet item(entry)}
+        {@const position = ids.indexOf(entry.id)}
+        <Thumbnail src={mediaThumbnail(items[position])} alt="" ratio="square" fit="cover" /><span
+          class="ldt-sr-only">{mediaLabel(items[position], position)}</span
+        >
+      {/snippet}
+    </Filmstrip>
+  {/if}
+</section>

package/dist/components/MediaCarousel.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AspectRatioName, type MediaItem } from '../media-utils.js';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: MediaItem[];
+    /** Accessible name of the carousel. */
+    label: string;
+    /** The slide showing, 0-based. */
+    index?: number;
+    loop?: boolean;
+    ratio?: AspectRatioName | number | string;
+    showThumbnails?: boolean;
+    showCaption?: boolean;
+    /**
+     * Advance on a timer. It pauses while the pointer or focus is inside, offers a visible
+     * pause button (WCAG 2.2.2), and starts paused for people who prefer reduced motion.
+     */
+    autoplay?: boolean;
+    /** Milliseconds per slide when autoplaying. */
+    interval?: number;
+    previousLabel?: string;
+    nextLabel?: string;
+    pauseLabel?: string;
+    playLabel?: string;
+    thumbnailsLabel?: string;
+    slideLabel?: (position: number, count: number) => string;
+    onIndexChange?: (index: number) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const MediaCarousel: import("svelte").Component<Props, {}, "ref" | "index">;
+type MediaCarousel = ReturnType<typeof MediaCarousel>;
+export default MediaCarousel;

package/dist/components/MediaEmbed.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import {
+    buildEmbedSrc,
+    parseEmbedUrl,
+    resolveAspectRatio,
+    type AspectRatioName,
+    type EmbedProvider,
+  } from '../media-utils.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** A YouTube or Vimeo page, share or embed URL. */
+    url?: string;
+    /** Or name the video directly. */
+    provider?: EmbedProvider;
+    videoId?: string;
+    /** Required: names the iframe and the play button. */
+    title: string;
+    /**
+     * Still shown before the player loads. None is fetched from the provider by default — that
+     * request alone would tell them someone opened the page.
+     */
+    poster?: string;
+    /** No-tracking hosts: `youtube-nocookie.com`, Vimeo's `dnt=1`. */
+    privacy?: boolean;
+    /** Start offset in seconds. Read from the URL when it carries one. */
+    start?: number;
+    /**
+     * Load the provider's player straight away. By default a local facade stands in until the
+     * user presses play, so no third-party request happens before they choose to watch.
+     */
+    eager?: boolean;
+    ratio?: AspectRatioName | number | string;
+    playLabel?: (title: string) => string;
+    /** Shown when the URL is not a recognised YouTube or Vimeo link. */
+    unsupportedText?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    url,
+    provider,
+    videoId,
+    title,
+    poster,
+    privacy = true,
+    start,
+    eager = false,
+    ratio = 'video',
+    playLabel = (name) => `Play ${name}`,
+    unsupportedText = 'This video link is not supported.',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const parsed = $derived(
+    provider && videoId ? { provider, videoId, start: undefined } : url ? parseEmbedUrl(url) : null
+  );
+  let activated = $state(false);
+  const loaded = $derived(eager || activated);
+  const src = $derived(
+    parsed &&
+      buildEmbedSrc(parsed.provider, parsed.videoId, {
+        privacy,
+        autoplay: activated,
+        start: start ?? parsed.start,
+      })
+  );
+  let frame = $state<HTMLIFrameElement | null>(null);
+
+  function activate() {
+    activated = true;
+    // Keep keyboard users where the button was: on the player that replaced it.
+    queueMicrotask(() => frame?.focus());
+  }
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-media-embed', className)}
+  style:--ldt-aspect-ratio={resolveAspectRatio(ratio)}
+  {...rest}
+>
+  {#if !parsed}
+    <p class="ldt-media-embed__unsupported">{unsupportedText}</p>
+  {:else if loaded}
+    <iframe
+      bind:this={frame}
+      class="ldt-media-embed__frame"
+      {src}
+      {title}
+      loading="lazy"
+      allow="autoplay; encrypted-media; fullscreen; picture-in-picture; clipboard-write"
+      allowfullscreen
+      referrerpolicy="strict-origin-when-cross-origin"
+    ></iframe>
+  {:else}
+    <button
+      type="button"
+      class="ldt-media-embed__facade"
+      style:background-image={poster ? `url("${poster}")` : undefined}
+      aria-label={playLabel(title)}
+      onclick={activate}
+    >
+      <span class="ldt-media-embed__play" aria-hidden="true">
+        <svg viewBox="0 0 16 16" width="22" height="22" focusable="false"
+          ><path d="M4 2.5v11l9-5.5z" fill="currentColor" /></svg
+        >
+      </span>
+      <span class="ldt-media-embed__title" aria-hidden="true">{title}</span>
+    </button>
+  {/if}
+</div>