@classic-homes/theme-svelte 1.2.2 → 1.3.0

package/dist/lib/components/media/internal/MediaControls.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+  /**
+   * MediaControls - Shared control bar for the Video and Audio players (internal)
+   *
+   * Features:
+   * - Play/pause, seek bar, elapsed and total time
+   * - Mute toggle with a volume slider that expands on hover or keyboard focus
+   * - Playback speed cycling, captions toggle, picture-in-picture, fullscreen
+   * - Every control carries a state-aware accessible name
+   *
+   * Not exported from the package — use `Video` or `Audio` instead.
+   */
+  import { Slider as SliderPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { MediaPlayerApi } from '../../../composables/useMediaPlayer.svelte.js';
+  import { cn } from '../../../utils.js';
+  import { formatDuration } from '../../../utils/media.js';
+  import Icon from '../../Icon.svelte';
+  import MediaScrubber from './MediaScrubber.svelte';
+
+  /** Speeds cycled through by the playback-rate button */
+  const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2] as const;
+
+  interface Props {
+    /** Player API driving the controls */
+    player: MediaPlayerApi;
+    /** `video` overlays a translucent bar; `audio` renders a solid inline bar */
+    variant?: 'video' | 'audio';
+    /** Show the mute button and volume slider */
+    showVolume?: boolean;
+    /** Show the playback-speed button */
+    showRate?: boolean;
+    /** Show the captions button (also requires at least one text track) */
+    showCaptions?: boolean;
+    /** Show the picture-in-picture button (video only, where supported) */
+    showPictureInPicture?: boolean;
+    /** Show the fullscreen button (video only) */
+    showFullscreen?: boolean;
+    /** Element made fullscreen — normally the player container, not the media element */
+    fullscreenTarget?: HTMLElement | null;
+    /**
+     * Override for the play/pause button, so the player can do extra work on
+     * play — releasing a held-back stream loader, for instance.
+     */
+    onTogglePlay?: () => void;
+    /** Extra controls rendered before the trailing buttons */
+    extraControls?: Snippet;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    player,
+    variant = 'video',
+    showVolume = true,
+    showRate = true,
+    showCaptions = true,
+    showPictureInPicture = variant === 'video',
+    showFullscreen = variant === 'video',
+    fullscreenTarget = null,
+    onTogglePlay,
+    extraControls,
+    class: className,
+  }: Props = $props();
+
+  // `currentColor` cannot take an opacity modifier, so hover and track shading
+  // are resolved per variant instead of inherited from the text colour.
+  const isLight = $derived(variant === 'video');
+
+  const buttonClass = $derived(
+    cn(
+      'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      isLight
+        ? 'hover:bg-white/20 focus-visible:ring-white focus-visible:ring-offset-transparent'
+        : 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-offset-background'
+    )
+  );
+
+  const volumeTrackClass = $derived(isLight ? 'bg-white/30' : 'bg-foreground/20');
+  const volumeFillClass = $derived(isLight ? 'bg-white' : 'bg-primary');
+
+  const hasCaptions = $derived(player.textTracks.length > 0);
+  const captionsOn = $derived(player.activeTextTrack !== null);
+  const volumeValue = $derived(player.muted ? 0 : Math.round(player.volume * 100));
+
+  const volumeIcon = $derived(
+    player.muted || player.volume === 0 ? ('volume-x' as const) : ('volume' as const)
+  );
+
+  function cycleRate() {
+    const currentIndex = PLAYBACK_RATES.indexOf(
+      player.playbackRate as (typeof PLAYBACK_RATES)[number]
+    );
+    const next = PLAYBACK_RATES[(currentIndex + 1) % PLAYBACK_RATES.length];
+    player.setPlaybackRate(next);
+  }
+
+  /**
+   * True only while the viewer is actually dragging or keying the volume thumb.
+   *
+   * The slider is controlled by the player's volume, and Bits UI emits
+   * `onValueChange` for programmatic updates as well as real input. Acting on
+   * every change would echo the player's own state back into it — muting, for
+   * instance, pushes 0 into the slider, which would then set the real volume
+   * to 0 and leave unmuting silent.
+   */
+  let adjustingVolume = $state(false);
+
+  function beginVolumeAdjust() {
+    adjustingVolume = true;
+  }
+
+  function endVolumeAdjust() {
+    adjustingVolume = false;
+  }
+
+  const VOLUME_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+
+  function handleVolumeKeyDown(event: KeyboardEvent) {
+    if (VOLUME_KEYS.includes(event.key)) beginVolumeAdjust();
+  }
+
+  $effect(() => {
+    if (!adjustingVolume) return;
+    window.addEventListener('pointerup', endVolumeAdjust);
+    window.addEventListener('pointercancel', endVolumeAdjust);
+    window.addEventListener('keyup', endVolumeAdjust);
+    return () => {
+      window.removeEventListener('pointerup', endVolumeAdjust);
+      window.removeEventListener('pointercancel', endVolumeAdjust);
+      window.removeEventListener('keyup', endVolumeAdjust);
+    };
+  });
+
+  function handleVolumeChange(next: number) {
+    if (!adjustingVolume) return;
+    player.setVolume(next / 100);
+  }
+</script>
+
+<div
+  class={cn(
+    'flex w-full flex-col gap-1 px-3 py-2 text-sm',
+    variant === 'video'
+      ? 'bg-gradient-to-t from-black/80 to-transparent pt-8 text-white'
+      : 'text-foreground',
+    className
+  )}
+>
+  <MediaScrubber
+    currentTime={player.currentTime}
+    duration={player.duration}
+    buffered={player.buffered}
+    onSeek={(seconds) => player.seek(seconds)}
+    label="Seek"
+    tone={isLight ? 'light' : 'default'}
+  />
+
+  <div class="flex items-center gap-1">
+    <button
+      type="button"
+      class={buttonClass}
+      onclick={() => (onTogglePlay ? onTogglePlay() : player.toggle())}
+      aria-label={player.playing ? 'Pause' : 'Play'}
+    >
+      <Icon name={player.playing ? 'pause' : 'play'} size={20} />
+    </button>
+
+    <span class="ml-1 shrink-0 select-none text-xs tabular-nums" aria-hidden="true">
+      {formatDuration(player.currentTime)} / {formatDuration(player.duration)}
+    </span>
+
+    <div class="flex-1"></div>
+
+    {#if extraControls}
+      {@render extraControls()}
+    {/if}
+
+    {#if showVolume}
+      <!-- Grouped so the slider expands on hover and stays open while focused. -->
+      <div class="group/volume flex items-center">
+        <button
+          type="button"
+          class={buttonClass}
+          onclick={() => player.toggleMute()}
+          aria-label={player.muted ? 'Unmute' : 'Mute'}
+        >
+          <Icon name={volumeIcon} size={20} />
+        </button>
+
+        <!--
+          Capture-phase handlers sit here rather than on the slider: Bits UI
+          acts on the input before a bubbling listener would run, and its
+          `mergeProps` does not forward `on*capture` props to the DOM. This
+          wrapper holds only the slider, so the mute button beside it cannot
+          open the gate and let a mute echo zero the volume.
+        -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="w-0 overflow-hidden opacity-0 transition-all duration-200 group-focus-within/volume:w-20 group-focus-within/volume:opacity-100 group-hover/volume:w-20 group-hover/volume:opacity-100"
+          onpointerdowncapture={beginVolumeAdjust}
+          onkeydowncapture={handleVolumeKeyDown}
+        >
+          <SliderPrimitive.Root
+            type="single"
+            value={volumeValue}
+            min={0}
+            max={100}
+            step={5}
+            onValueChange={handleVolumeChange}
+            class={cn(
+              'relative mx-2 flex h-1.5 w-16 touch-none select-none items-center rounded-full',
+              volumeTrackClass
+            )}
+          >
+            <SliderPrimitive.Range class={cn('absolute h-full rounded-full', volumeFillClass)} />
+            <SliderPrimitive.Thumb
+              index={0}
+              aria-label="Volume"
+              aria-valuetext="{volumeValue} percent"
+              class={cn(
+                'block h-3 w-3 rounded-full shadow outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+                volumeFillClass,
+                isLight
+                  ? 'focus-visible:ring-white focus-visible:ring-offset-transparent'
+                  : 'focus-visible:ring-ring focus-visible:ring-offset-background'
+              )}
+            />
+          </SliderPrimitive.Root>
+        </div>
+      </div>
+    {/if}
+
+    {#if showRate}
+      <button
+        type="button"
+        class={cn(buttonClass, 'w-auto px-2 text-xs font-semibold tabular-nums')}
+        onclick={cycleRate}
+        aria-label="Playback speed, currently {player.playbackRate}×. Activate to change."
+      >
+        {player.playbackRate}×
+      </button>
+    {/if}
+
+    {#if showCaptions && hasCaptions}
+      <button
+        type="button"
+        class={cn(
+          buttonClass,
+          'w-auto px-2 text-xs font-semibold',
+          captionsOn && (isLight ? 'bg-white/25' : 'bg-accent text-accent-foreground')
+        )}
+        onclick={() => player.toggleCaptions()}
+        aria-pressed={captionsOn}
+        aria-label="Captions"
+      >
+        CC
+      </button>
+    {/if}
+
+    {#if showPictureInPicture}
+      <button
+        type="button"
+        class={buttonClass}
+        onclick={() => player.togglePictureInPicture()}
+        aria-label={player.pip ? 'Exit picture in picture' : 'Picture in picture'}
+      >
+        <Icon name="minimize" size={18} />
+      </button>
+    {/if}
+
+    {#if showFullscreen}
+      <button
+        type="button"
+        class={buttonClass}
+        onclick={() => player.toggleFullscreen(fullscreenTarget)}
+        aria-label={player.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+      >
+        <Icon name={player.fullscreen ? 'minimize' : 'maximize'} size={20} />
+      </button>
+    {/if}
+  </div>
+</div>

package/dist/lib/components/media/internal/MediaControls.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { MediaPlayerApi } from '../../../composables/useMediaPlayer.svelte.js';
+interface Props {
+    /** Player API driving the controls */
+    player: MediaPlayerApi;
+    /** `video` overlays a translucent bar; `audio` renders a solid inline bar */
+    variant?: 'video' | 'audio';
+    /** Show the mute button and volume slider */
+    showVolume?: boolean;
+    /** Show the playback-speed button */
+    showRate?: boolean;
+    /** Show the captions button (also requires at least one text track) */
+    showCaptions?: boolean;
+    /** Show the picture-in-picture button (video only, where supported) */
+    showPictureInPicture?: boolean;
+    /** Show the fullscreen button (video only) */
+    showFullscreen?: boolean;
+    /** Element made fullscreen — normally the player container, not the media element */
+    fullscreenTarget?: HTMLElement | null;
+    /**
+     * Override for the play/pause button, so the player can do extra work on
+     * play — releasing a held-back stream loader, for instance.
+     */
+    onTogglePlay?: () => void;
+    /** Extra controls rendered before the trailing buttons */
+    extraControls?: Snippet;
+    /** Additional classes */
+    class?: string;
+}
+declare const MediaControls: import("svelte").Component<Props, {}, "">;
+type MediaControls = ReturnType<typeof MediaControls>;
+export default MediaControls;

package/dist/lib/components/media/internal/MediaScrubber.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  /**
+   * MediaScrubber - Seek bar for the Video and Audio players (internal)
+   *
+   * Features:
+   * - Buffered ranges rendered behind the played range
+   * - Hover and focus preview showing the timestamp under the pointer
+   * - Keyboard seeking inherited from the Bits UI slider primitive
+   * - `aria-valuetext` announces spoken timestamps, never raw seconds
+   *
+   * Not exported from the package — use `Video` or `Audio` instead.
+   */
+  import { Slider as SliderPrimitive } from 'bits-ui';
+  import type { MediaTimeRange } from '../../../composables/useMediaPlayer.svelte.js';
+  import { cn } from '../../../utils.js';
+  import { clamp, formatDuration, formatDurationSpoken } from '../../../utils/media.js';
+
+  interface Props {
+    /** Current playhead position in seconds */
+    currentTime: number;
+    /** Total duration in seconds; `0` while unknown */
+    duration: number;
+    /** Buffered ranges, drawn behind the played range */
+    buffered?: MediaTimeRange[];
+    /** Called continuously while dragging */
+    onSeek: (seconds: number) => void;
+    /** Called once when the drag is released */
+    onSeekCommit?: (seconds: number) => void;
+    /** Disable interaction (no duration yet, or an errored source) */
+    disabled?: boolean;
+    /** Accessible name for the seek bar */
+    label?: string;
+    /**
+     * `light` renders for a dark backdrop (the video overlay); `default`
+     * renders against the page background (the audio bar).
+     */
+    tone?: 'default' | 'light';
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    currentTime,
+    duration,
+    buffered = [],
+    onSeek,
+    onSeekCommit,
+    disabled = false,
+    label = 'Seek',
+    tone = 'default',
+    class: className,
+  }: Props = $props();
+
+  // `currentColor` cannot carry an opacity modifier, so the neutral track and
+  // buffered shading are resolved per tone rather than inherited from text.
+  const trackClass = $derived(tone === 'light' ? 'bg-white/30' : 'bg-foreground/20');
+  const bufferedClass = $derived(tone === 'light' ? 'bg-white/40' : 'bg-foreground/30');
+  const tooltipClass = $derived(
+    tone === 'light' ? 'bg-white text-neutral-900' : 'bg-foreground text-background'
+  );
+
+  let trackElement = $state<HTMLElement | null>(null);
+  let hoverTime = $state<number | null>(null);
+
+  /**
+   * True only while the viewer is actually dragging or keying the thumb.
+   *
+   * The slider is controlled: its value follows the playhead. Bits UI emits
+   * `onValueChange` for those programmatic updates as well as for real input,
+   * so seeking on every change would feed the playhead straight back in as a
+   * seek — pinning playback at the first step and starving the element into a
+   * permanent buffering loop. Only a genuine interaction may seek.
+   */
+  let scrubbing = $state(false);
+
+  // Bound in the capture phase on the wrapper, not on the slider itself: Bits
+  // UI acts on the key before a bubbling listener would run, and its
+  // `mergeProps` does not forward `on*capture` props through to the DOM.
+  function beginScrub() {
+    if (!interactive) return;
+    scrubbing = true;
+  }
+
+  function endScrub() {
+    scrubbing = false;
+  }
+
+  /** Keys Bits UI's slider acts on; anything else must not start a scrub. */
+  const SCRUB_KEYS = [
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+  ];
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (SCRUB_KEYS.includes(event.key)) beginScrub();
+  }
+
+  // A drag very often ends outside the slider, so the release is watched on
+  // the window rather than the element.
+  $effect(() => {
+    if (!scrubbing) return;
+    window.addEventListener('pointerup', endScrub);
+    window.addEventListener('pointercancel', endScrub);
+    window.addEventListener('keyup', endScrub);
+    return () => {
+      window.removeEventListener('pointerup', endScrub);
+      window.removeEventListener('pointercancel', endScrub);
+      window.removeEventListener('keyup', endScrub);
+    };
+  });
+
+  function handleValueChange(next: number) {
+    if (!scrubbing) return;
+    onSeek(next);
+  }
+
+  function handleValueCommit(next: number) {
+    if (!scrubbing) return;
+    onSeekCommit?.(next);
+  }
+
+  // A zero max makes the slider maths collapse, so hold it at 1 until the
+  // real duration arrives and disable interaction in the meantime.
+  const max = $derived(duration > 0 ? duration : 1);
+  const interactive = $derived(!disabled && duration > 0);
+  const value = $derived(clamp(currentTime, 0, max));
+
+  const valueText = $derived(
+    `${formatDurationSpoken(currentTime)} of ${formatDurationSpoken(duration)}`
+  );
+
+  const hoverPercent = $derived(hoverTime === null ? 0 : (hoverTime / max) * 100);
+
+  function handlePointerMove(event: PointerEvent) {
+    if (!trackElement || !interactive) return;
+    const rect = trackElement.getBoundingClientRect();
+    if (rect.width === 0) return;
+    hoverTime = clamp((event.clientX - rect.left) / rect.width, 0, 1) * duration;
+  }
+
+  function handlePointerLeave() {
+    hoverTime = null;
+  }
+</script>
+
+<!--
+  The pointer handlers only drive the decorative hover timestamp; all real
+  interaction lives on the slider thumb inside, which carries the ARIA.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class={cn('group/scrubber relative flex w-full items-center', className)}
+  bind:this={trackElement}
+  onpointermove={handlePointerMove}
+  onpointerleave={handlePointerLeave}
+  onpointerdowncapture={beginScrub}
+  onkeydowncapture={handleKeyDown}
+>
+  {#if hoverTime !== null}
+    <!-- Timestamp preview. Decorative: the value is already announced via aria-valuetext. -->
+    <div
+      class={cn(
+        'pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 rounded px-1.5 py-0.5 text-xs font-medium tabular-nums shadow-sm',
+        tooltipClass
+      )}
+      style="left: {hoverPercent}%"
+      aria-hidden="true"
+    >
+      {formatDuration(hoverTime)}
+    </div>
+  {/if}
+
+  <SliderPrimitive.Root
+    type="single"
+    {value}
+    min={0}
+    {max}
+    step={0.1}
+    disabled={!interactive}
+    onValueChange={handleValueChange}
+    onValueCommit={handleValueCommit}
+    class={cn(
+      'relative flex h-1.5 w-full touch-none select-none items-center rounded-full transition-[height] group-hover/scrubber:h-2.5 data-[disabled]:opacity-50',
+      trackClass
+    )}
+  >
+    {#each buffered as range (range.start)}
+      <span
+        class={cn('absolute h-full rounded-full', bufferedClass)}
+        style="left: {(range.start / max) * 100}%; width: {((range.end - range.start) / max) *
+          100}%"
+        aria-hidden="true"
+      ></span>
+    {/each}
+
+    <SliderPrimitive.Range class="absolute h-full rounded-full bg-primary" />
+
+    <SliderPrimitive.Thumb
+      index={0}
+      aria-label={label}
+      aria-valuetext={valueText}
+      class="block h-3.5 w-3.5 rounded-full bg-primary opacity-0 shadow ring-offset-background transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group-hover/scrubber:opacity-100 data-[disabled]:pointer-events-none"
+    />
+  </SliderPrimitive.Root>
+</div>

package/dist/lib/components/media/internal/MediaScrubber.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { MediaTimeRange } from '../../../composables/useMediaPlayer.svelte.js';
+interface Props {
+    /** Current playhead position in seconds */
+    currentTime: number;
+    /** Total duration in seconds; `0` while unknown */
+    duration: number;
+    /** Buffered ranges, drawn behind the played range */
+    buffered?: MediaTimeRange[];
+    /** Called continuously while dragging */
+    onSeek: (seconds: number) => void;
+    /** Called once when the drag is released */
+    onSeekCommit?: (seconds: number) => void;
+    /** Disable interaction (no duration yet, or an errored source) */
+    disabled?: boolean;
+    /** Accessible name for the seek bar */
+    label?: string;
+    /**
+     * `light` renders for a dark backdrop (the video overlay); `default`
+     * renders against the page background (the audio bar).
+     */
+    tone?: 'default' | 'light';
+    /** Additional classes */
+    class?: string;
+}
+declare const MediaScrubber: import("svelte").Component<Props, {}, "">;
+type MediaScrubber = ReturnType<typeof MediaScrubber>;
+export default MediaScrubber;

package/dist/lib/components/media/internal/MediaTile.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  /**
+   * MediaTile - Thumbnail button used by MediaGrid, MediaCarousel, and the
+   * lightbox thumbnail strip (internal)
+   *
+   * Features:
+   * - Renders a real `<button>` with an accessible name derived from the item
+   * - Play affordance and duration badge for time-based media
+   * - Icon placeholder when the item has no thumbnail (audio without artwork)
+   *
+   * Not exported from the package.
+   */
+  import type { IconName } from '../../Icon.svelte';
+  import type { MediaAspectRatio, MediaItem } from '../../../types/components.js';
+  import { cn } from '../../../utils.js';
+  import {
+    formatDuration,
+    getMediaLabel,
+    getMediaThumbnail,
+    isSpatialMedia,
+    isTimeBasedMedia,
+    resolveAspectRatio,
+  } from '../../../utils/media.js';
+  import Icon from '../../Icon.svelte';
+  import Image from '../Image.svelte';
+
+  interface Props {
+    /** Item to represent */
+    item: MediaItem;
+    /** Zero-based position, used for the fallback accessible name */
+    index: number;
+    /** Aspect ratio of the tile. Omit to let the thumbnail set its own height. */
+    ratio?: MediaAspectRatio | number;
+    /** Marks the tile as the current item (carousel dots, thumbnail strips) */
+    selected?: boolean;
+    /** Participates in a roving tabindex container */
+    roving?: boolean;
+    /** Click and keyboard activation handler */
+    onselect?: (index: number) => void;
+    /** Additional classes */
+    class?: string;
+    /** Any other attribute is forwarded to the button (tabindex, data-*, …) */
+    [key: string]: unknown;
+  }
+
+  let {
+    item,
+    index,
+    ratio,
+    selected = false,
+    roving = false,
+    onselect,
+    class: className,
+    ...restProps
+  }: Props = $props();
+
+  const thumbnail = $derived(getMediaThumbnail(item));
+  const label = $derived(getMediaLabel(item, index));
+  const timeBased = $derived(isTimeBasedMedia(item));
+  /** A 3D tour opens rather than plays, so it gets its own affordance. */
+  const spatial = $derived(isSpatialMedia(item));
+
+  const duration = $derived(
+    item.kind === 'video' || item.kind === 'audio' ? item.duration : undefined
+  );
+
+  const placeholderIcon = $derived<IconName>(
+    spatial ? 'box' : item.kind === 'audio' ? 'music' : item.kind === 'image' ? 'image' : 'video'
+  );
+</script>
+
+<button
+  type="button"
+  data-roving-tabindex-item={roving ? '' : undefined}
+  aria-current={selected ? 'true' : undefined}
+  class={cn(
+    'group/tile relative block w-full overflow-hidden rounded-md bg-muted outline-none',
+    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    selected && 'ring-2 ring-primary ring-offset-2 ring-offset-background',
+    className
+  )}
+  onclick={() => onselect?.(index)}
+  {...restProps}
+>
+  {#if thumbnail}
+    <Image
+      src={thumbnail}
+      alt=""
+      {ratio}
+      fit="cover"
+      class="h-full w-full rounded-none"
+      showSkeleton
+    />
+  {:else}
+    <div
+      class={cn(
+        'flex w-full items-center justify-center bg-muted text-muted-foreground',
+        ratio === undefined && 'aspect-square'
+      )}
+      style={ratio === undefined ? undefined : `aspect-ratio: ${resolveAspectRatio(ratio)}`}
+    >
+      <Icon name={placeholderIcon} size={28} />
+    </div>
+  {/if}
+
+  {#if timeBased || spatial}
+    <span
+      class="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 transition-opacity group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100"
+      aria-hidden="true"
+    >
+      <span
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/65 text-white shadow"
+      >
+        <Icon name={spatial ? 'box' : 'play'} size={20} />
+      </span>
+    </span>
+  {/if}
+
+  {#if duration !== undefined}
+    <span
+      class="pointer-events-none absolute bottom-1 right-1 rounded bg-black/75 px-1.5 py-0.5 text-[0.6875rem] font-medium tabular-nums text-white"
+      aria-hidden="true"
+    >
+      {formatDuration(duration)}
+    </span>
+  {/if}
+
+  <span class="sr-only">{label}</span>
+</button>