@loidolt/theme-svelte 0.5.0 → 0.7.0

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

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Orientation } from '../types.js';
+declare function $$render<V extends number | number[] = number>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        /** A number for one thumb, an array for a range — one thumb per entry. */
+        value?: V;
+        min?: number;
+        max?: number;
+        /** The increment, or an explicit list of the only values allowed. */
+        step?: number | number[];
+        orientation?: Orientation;
+        disabled?: boolean;
+        /** Accessible name. With two or more thumbs each is named from it by `thumbLabel`. */
+        label: string;
+        thumbLabel?: (index: number, count: number) => string;
+        /** Spoken (`aria-valuetext`) and shown for each value — add units here: `(v) => \`${v} mm\``. */
+        formatValue?: (value: number) => string;
+        /** Show the formatted value beside the track. */
+        showValue?: boolean;
+        /** Mark every step along the track. Sensible only for a coarse `step`. */
+        ticks?: boolean;
+        /** Submits each value as a hidden input under this name. */
+        name?: string;
+        /** Every change, while dragging too. */
+        onValueChange?: (value: V) => void;
+        /** Only when the user lets go or finishes a key press — the moment to save. */
+        onValueCommit?: (value: V) => void;
+        /** Rendered after the track, e.g. min/max captions. */
+        children?: Snippet;
+        class?: string;
+        ref?: HTMLDivElement | null;
+    };
+    exports: {};
+    bindings: "value" | "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends number | number[] = number> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends number | number[] = number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends number | number[] = number>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Slider: $$IsomorphicComponent;
+type Slider<V extends number | number[] = number> = InstanceType<typeof Slider<V>>;
+export default Slider;

package/dist/components/Spinner.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { ControlSize } from '../types.js';
   import { cx } from '../utils.js';
 
   interface Props extends HTMLAttributes<HTMLSpanElement> {
     /** Accessible name. Pass `undefined` when an adjacent label already announces the wait. */
     label?: string;
+    /** Omit to follow the surrounding font size, which suits a spinner inside a button. */
+    size?: ControlSize;
     class?: string;
     ref?: HTMLSpanElement | null;
   }
 
-  let { label = 'Loading', class: className, ref = $bindable(null), ...rest }: Props = $props();
+  let {
+    label = 'Loading',
+    size,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
 </script>
 
 <span
   bind:this={ref}
-  class={cx('ldt-spinner', className)}
+  class={cx('ldt-spinner', size && `ldt-spinner--${size}`, className)}
   role={label ? 'status' : undefined}
   aria-label={label}
   aria-hidden={label ? undefined : 'true'}

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

@@ -1,7 +1,10 @@
 import type { HTMLAttributes } from 'svelte/elements';
+import type { ControlSize } from '../types.js';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     /** Accessible name. Pass `undefined` when an adjacent label already announces the wait. */
     label?: string;
+    /** Omit to follow the surrounding font size, which suits a spinner inside a button. */
+    size?: ControlSize;
     class?: string;
     ref?: HTMLSpanElement | null;
 }

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

@@ -2,7 +2,7 @@ import { Tabs as TabsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { NavItem, Orientation } from '../types.js';
 declare function $$render<T extends string = string>(): {
-    props: Omit<TabsPrimitive.RootProps, "children" | "class" | "value" | "onValueChange" | "ref" | "child" | "orientation"> & {
+    props: Omit<TabsPrimitive.RootProps, "orientation" | "value" | "children" | "class" | "onValueChange" | "ref" | "child"> & {
         /** Defaults to the first tab, so a panel is always rendered. */
         value?: T;
         tabs: NavItem<T>[];

package/dist/components/Thumbnail.svelte

@@ -1,19 +1,32 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
+  import { aspectRatio } from '@loidolt/theme-tokens';
+  import type { AspectRatioName } from '../media-utils.js';
   import { cx } from '../utils.js';
 
   interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     src?: string;
     /** Required whenever `src` is set — decorative images should say so with `alt=""`. */
     alt?: string;
-    /** CSS aspect-ratio value: `'4/3'`, `'1/1'`, or a number. */
-    ratio?: string | number;
+    /** Candidate sources for responsive images, with `sizes`. */
+    srcset?: string;
+    sizes?: string;
+    /** A named frame (`photo`, `video`, `square`…), a CSS aspect-ratio value, or a number. */
+    ratio?: AspectRatioName | string | number;
     fit?: 'contain' | 'cover';
     /** `sunken` recesses into the page; `paper` stays white in every theme for artwork. */
     surface?: 'sunken' | 'paper';
+    /** `lazy` (the default) waits until the image nears the viewport. */
+    loading?: 'lazy' | 'eager';
+    /** Shown if the image fails to load. Defaults to an empty frame. */
+    fallback?: Snippet;
+    /** Content over the image — a badge, a duration, a selection mark. */
+    overlay?: Snippet;
     /** Alternative to `src` — inline SVG, canvas, anything that fills the frame. */
     children?: Snippet;
+    onload?: (event: Event) => void;
+    onerror?: (event: Event) => void;
     class?: string;
     ref?: HTMLElement | null;
   }
@@ -21,14 +34,33 @@
   let {
     src,
     alt = '',
+    srcset,
+    sizes,
     ratio = '4/3',
     fit = 'contain',
     surface = 'sunken',
+    loading = 'lazy',
+    fallback,
+    overlay,
     children,
+    onload,
+    onerror,
     class: className,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  const frame = $derived(
+    typeof ratio === 'string' && ratio in aspectRatio
+      ? aspectRatio[ratio as AspectRatioName]
+      : ratio
+  );
+
+  // Resets to `loading` whenever `src` changes; the image's own events move it on.
+  let status = $derived.by<'loading' | 'loaded' | 'error'>(() => {
+    void src;
+    return 'loading';
+  });
 </script>
 
 <figure
@@ -39,13 +71,27 @@
     fit === 'cover' && 'ldt-thumbnail--cover',
     className
   )}
-  style={`--ldt-thumbnail-ratio: ${ratio};`}
+  style={`--ldt-thumbnail-ratio: ${frame};`}
+  data-status={src && !children ? status : undefined}
   {...rest}
 >
-  {#if children}{@render children()}{:else if src}<img
+  {#if children}{@render children()}{:else if src && status === 'error'}{#if fallback}{@render fallback()}{:else}<span
+        class="ldt-sr-only">{alt}</span
+      >{/if}{:else if src}<img
       class="ldt-thumbnail__image"
       {src}
       {alt}
-      loading="lazy"
-    />{/if}
+      {srcset}
+      {sizes}
+      {loading}
+      decoding="async"
+      onload={(event) => {
+        status = 'loaded';
+        onload?.(event);
+      }}
+      onerror={(event) => {
+        status = 'error';
+        onerror?.(event);
+      }}
+    />{/if}{#if overlay}<div class="ldt-thumbnail__overlay">{@render overlay()}</div>{/if}
 </figure>

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

@@ -1,16 +1,28 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { AspectRatioName } from '../media-utils.js';
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     src?: string;
     /** Required whenever `src` is set — decorative images should say so with `alt=""`. */
     alt?: string;
-    /** CSS aspect-ratio value: `'4/3'`, `'1/1'`, or a number. */
-    ratio?: string | number;
+    /** Candidate sources for responsive images, with `sizes`. */
+    srcset?: string;
+    sizes?: string;
+    /** A named frame (`photo`, `video`, `square`…), a CSS aspect-ratio value, or a number. */
+    ratio?: AspectRatioName | string | number;
     fit?: 'contain' | 'cover';
     /** `sunken` recesses into the page; `paper` stays white in every theme for artwork. */
     surface?: 'sunken' | 'paper';
+    /** `lazy` (the default) waits until the image nears the viewport. */
+    loading?: 'lazy' | 'eager';
+    /** Shown if the image fails to load. Defaults to an empty frame. */
+    fallback?: Snippet;
+    /** Content over the image — a badge, a duration, a selection mark. */
+    overlay?: Snippet;
     /** Alternative to `src` — inline SVG, canvas, anything that fills the frame. */
     children?: Snippet;
+    onload?: (event: Event) => void;
+    onerror?: (event: Event) => void;
     class?: string;
     ref?: HTMLElement | null;
 }

package/dist/components/Toast.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
+  import Button from './Button.svelte';
   import IconButton from './IconButton.svelte';
+  import type { ToastAction } from '../toaster.svelte.js';
   import type { StatusVariant } from '../types.js';
   import { cx } from '../utils.js';
 
@@ -11,6 +13,15 @@
     variant?: StatusVariant;
     dismissLabel?: string;
     onDismiss?: () => void;
+    /** One follow-up button, e.g. Undo. Runs `onAction`, then dismisses unless told not to. */
+    action?: ToastAction;
+    /** Custom action area, in place of `action`. */
+    actions?: Snippet;
+    /**
+     * Read by `createToaster`, not the component. Declared so `{...toast}` from a toaster's queue
+     * does not leak it onto the element as an attribute.
+     */
+    duration?: number;
     class?: string;
     children?: Snippet;
     ref?: HTMLDivElement | null;
@@ -22,6 +33,10 @@
     variant,
     dismissLabel = 'Dismiss notification',
     onDismiss,
+    action,
+    actions,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- read by the toaster, never rendered
+    duration: _duration,
     class: className,
     children,
     ref = $bindable(null),
@@ -44,6 +59,15 @@
       {description}
     </p>{/if}{#if children}<div class="ldt-toast__description">
       {@render children()}
+    </div>{/if}{#if actions || action}<div class="ldt-toast__actions">
+      {#if actions}{@render actions()}{:else if action}<Button
+          size="sm"
+          variant="quiet"
+          onclick={() => {
+            action.onAction();
+            if (action.dismiss !== false) onDismiss?.();
+          }}>{action.label}</Button
+        >{/if}
     </div>{/if}{#if onDismiss}<IconButton
       class="ldt-toast__dismiss"
       size="sm"

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { ToastAction } from '../toaster.svelte.js';
 import type { StatusVariant } from '../types.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
@@ -7,6 +8,15 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     variant?: StatusVariant;
     dismissLabel?: string;
     onDismiss?: () => void;
+    /** One follow-up button, e.g. Undo. Runs `onAction`, then dismisses unless told not to. */
+    action?: ToastAction;
+    /** Custom action area, in place of `action`. */
+    actions?: Snippet;
+    /**
+     * Read by `createToaster`, not the component. Declared so `{...toast}` from a toaster's queue
+     * does not leak it onto the element as an attribute.
+     */
+    duration?: number;
     class?: string;
     children?: Snippet;
     ref?: HTMLDivElement | null;

package/dist/components/ToastViewport.svelte

@@ -7,6 +7,9 @@
     label?: string;
     /** `polite` for routine updates; `assertive` interrupts and should be rare. */
     politeness?: 'polite' | 'assertive';
+    /** Which corner or edge the stack sits against. Top positions stack newest-last as well. */
+    position?:
+      'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center';
     class?: string;
     children: Snippet;
     ref?: HTMLDivElement | null;
@@ -15,6 +18,7 @@
   let {
     label = 'Notifications',
     politeness = 'polite',
+    position = 'bottom-end',
     class: className,
     children,
     ref = $bindable(null),
@@ -28,7 +32,11 @@
 -->
 <div
   bind:this={ref}
-  class={cx('ldt-toast-viewport', className)}
+  class={cx(
+    'ldt-toast-viewport',
+    position !== 'bottom-end' && `ldt-toast-viewport--${position}`,
+    className
+  )}
   aria-label={label}
   aria-live={politeness}
   aria-relevant="additions text"

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

@@ -4,6 +4,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     /** `polite` for routine updates; `assertive` interrupts and should be rare. */
     politeness?: 'polite' | 'assertive';
+    /** Which corner or edge the stack sits against. Top positions stack newest-last as well. */
+    position?: 'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center';
     class?: string;
     children: Snippet;
     ref?: HTMLDivElement | null;

package/dist/components/Toolbar.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { rovingFocus } from '../attachments.js';
+  import type { Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name, e.g. "Sheet list tools". */
+    label: string;
+    /** Leading controls — search, filters, a result count. */
+    children?: Snippet;
+    /** Controls pushed to the far end — view toggles, a sort menu. */
+    end?: Snippet;
+    orientation?: Orientation;
+    /**
+     * Make it an ARIA `toolbar`: one tab stop, arrow keys between the controls marked
+     * `data-roving-item`. Leave it off (a labelled `group`, Tab between controls) when the bar
+     * holds a text field or a control that owns its own arrow keys, like a `ToggleGroup`.
+     */
+    roving?: boolean;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    label,
+    children,
+    end,
+    orientation = 'horizontal',
+    roving = false,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-toolbar', orientation === 'vertical' && 'ldt-toolbar--vertical', className)}
+  role={roving ? 'toolbar' : 'group'}
+  aria-label={label}
+  aria-orientation={roving ? orientation : undefined}
+  {@attach roving ? rovingFocus({ orientation }) : undefined}
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+  {#if end}<div class="ldt-toolbar__end">{@render end()}</div>{/if}
+</div>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Orientation } from '../types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name, e.g. "Sheet list tools". */
+    label: string;
+    /** Leading controls — search, filters, a result count. */
+    children?: Snippet;
+    /** Controls pushed to the far end — view toggles, a sort menu. */
+    end?: Snippet;
+    orientation?: Orientation;
+    /**
+     * Make it an ARIA `toolbar`: one tab stop, arrow keys between the controls marked
+     * `data-roving-item`. Leave it off (a labelled `group`, Tab between controls) when the bar
+     * holds a text field or a control that owns its own arrow keys, like a `ToggleGroup`.
+     */
+    roving?: boolean;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "ref">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/Tooltip.svelte

@@ -21,6 +21,8 @@
     side?: Placement;
     align?: Alignment;
     sideOffset?: number;
+    /** Point the tooltip at its trigger — worth it when the trigger is small or crowded. */
+    arrow?: boolean;
     /** Ignored when an ancestor `TooltipProvider` is present. */
     delayDuration?: number;
     /** `class` lands on the portaled Content element. */
@@ -39,6 +41,7 @@
     side = 'top',
     align = 'center',
     sideOffset = 6,
+    arrow = false,
     delayDuration = 350,
     class: className,
     onOpenChange,
@@ -65,7 +68,12 @@
         {align}
         {sideOffset}
         class={cx('ldt-tooltip', className)}
-        {...rest}>{content}</TooltipPrimitive.Content
+        {...rest}
+        >{content}{#if arrow}<TooltipPrimitive.Arrow
+            class="ldt-tooltip__arrow"
+            width={10}
+            height={5}
+          />{/if}</TooltipPrimitive.Content
       ></TooltipPrimitive.Portal
     >
   </TooltipPrimitive.Root>

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

@@ -16,6 +16,8 @@ type Props = Omit<TooltipContentProps, 'children' | 'class' | 'child'> & {
     side?: Placement;
     align?: Alignment;
     sideOffset?: number;
+    /** Point the tooltip at its trigger — worth it when the trigger is small or crowded. */
+    arrow?: boolean;
     /** Ignored when an ancestor `TooltipProvider` is present. */
     delayDuration?: number;
     /** `class` lands on the portaled Content element. */

package/dist/components/VideoPlayer.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HlsLoader } from '../hls.js';
+  import { createHlsSource } from '../hls.svelte.js';
+  import { defaultMediaLabels, type MediaPlayerLabels } from '../internal/media/labels.js';
+  import { mediaKeydown } from '../internal/media/keys.js';
+  import MediaControls from '../internal/media/MediaControls.svelte';
+  import { createMediaPlayer } from '../media-player.svelte.js';
+  import {
+    isHlsSource,
+    resolveAspectRatio,
+    toMediaSources,
+    type AspectRatioName,
+    type MediaSourceEntry,
+    type MediaTextTrack,
+  } from '../media-utils.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A URL, or several sources for the browser to choose from. `.m3u8` plays as HLS. */
+    src: string | MediaSourceEntry[];
+    /** Names the player for assistive tech. */
+    label: string;
+    poster?: string;
+    /** Captions and subtitles. Provide captions for any video with speech (WCAG 1.2.2). */
+    tracks?: MediaTextTrack[];
+    ratio?: AspectRatioName | number | string;
+    fit?: 'contain' | 'cover';
+    /** Browsers only autoplay muted media; `autoplay` implies `muted`. */
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    /** `custom` draws this library's controls; `native` uses the browser's; `none` hides both. */
+    controls?: 'custom' | 'native' | 'none';
+    /** hls.js loader for this player, in place of the one given to `setHlsLoader()`. */
+    hlsLoader?: HlsLoader;
+    hlsConfig?: Record<string, unknown>;
+    /** Content layered over the video, e.g. a title card. */
+    overlay?: Snippet;
+    labels?: Partial<MediaPlayerLabels>;
+    onEnded?: () => void;
+    onTimeUpdate?: (seconds: number) => void;
+    class?: string;
+    ref?: HTMLDivElement | null;
+    /** The `<video>` element. */
+    mediaRef?: HTMLVideoElement | null;
+  }
+
+  let {
+    src,
+    label,
+    poster,
+    tracks = [],
+    ratio = 'video',
+    fit = 'contain',
+    autoplay = false,
+    muted = false,
+    loop = false,
+    preload = 'metadata',
+    controls = 'custom',
+    hlsLoader,
+    hlsConfig,
+    overlay,
+    labels,
+    onEnded,
+    onTimeUpdate,
+    class: className,
+    ref = $bindable(null),
+    mediaRef = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const text = $derived({ ...defaultMediaLabels, ...labels });
+  const sources = $derived(toMediaSources(src));
+  const stream = $derived(sources.find((source) => isHlsSource(source)));
+  const player = createMediaPlayer({
+    onEnded: () => onEnded?.(),
+    onTimeUpdate: (seconds) => onTimeUpdate?.(seconds),
+  });
+  const hls = createHlsSource({
+    get loader() {
+      return hlsLoader;
+    },
+    get config() {
+      return hlsConfig;
+    },
+  });
+  const failed = $derived(
+    Boolean(player.error) || hls.status === 'unsupported' || hls.status === 'error'
+  );
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-media-player', 'ldt-media-player--video', className)}
+  style:--ldt-aspect-ratio={resolveAspectRatio(ratio)}
+  data-playing={player.playing ? '' : undefined}
+  role="group"
+  aria-label={label}
+  onkeydown={controls === 'custom' ? mediaKeydown(player, () => ref) : undefined}
+  {...rest}
+>
+  <video
+    bind:this={mediaRef}
+    class="ldt-media-player__media"
+    style:object-fit={fit}
+    {poster}
+    {preload}
+    {autoplay}
+    muted={muted || autoplay}
+    {loop}
+    playsinline
+    controls={controls === 'native'}
+    crossorigin={tracks.length ? 'anonymous' : undefined}
+    {@attach player.attach}
+    {@attach stream ? hls.source(stream.src) : undefined}
+    onclick={controls === 'custom' ? () => player.toggle() : undefined}
+  >
+    {#if !stream}{#each sources as source (source.src)}<source
+          src={source.src}
+          type={source.type}
+        />{/each}{/if}
+    {#each tracks as track (track.src)}<track
+        src={track.src}
+        kind={track.kind ?? 'captions'}
+        srclang={track.srclang}
+        label={track.label}
+        default={track.default}
+      />{/each}
+  </video>
+  {#if overlay}<div class="ldt-media-player__overlay">{@render overlay()}</div>{/if}
+  {#if failed}<p class="ldt-media-player__error" role="alert">{text.error}</p>{/if}
+  {#if controls === 'custom'}<MediaControls {player} labels={text} video container={ref} />{/if}
+</div>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HlsLoader } from '../hls.js';
+import { type MediaPlayerLabels } from '../internal/media/labels.js';
+import { type AspectRatioName, type MediaSourceEntry, type MediaTextTrack } from '../media-utils.js';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A URL, or several sources for the browser to choose from. `.m3u8` plays as HLS. */
+    src: string | MediaSourceEntry[];
+    /** Names the player for assistive tech. */
+    label: string;
+    poster?: string;
+    /** Captions and subtitles. Provide captions for any video with speech (WCAG 1.2.2). */
+    tracks?: MediaTextTrack[];
+    ratio?: AspectRatioName | number | string;
+    fit?: 'contain' | 'cover';
+    /** Browsers only autoplay muted media; `autoplay` implies `muted`. */
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    /** `custom` draws this library's controls; `native` uses the browser's; `none` hides both. */
+    controls?: 'custom' | 'native' | 'none';
+    /** hls.js loader for this player, in place of the one given to `setHlsLoader()`. */
+    hlsLoader?: HlsLoader;
+    hlsConfig?: Record<string, unknown>;
+    /** Content layered over the video, e.g. a title card. */
+    overlay?: Snippet;
+    labels?: Partial<MediaPlayerLabels>;
+    onEnded?: () => void;
+    onTimeUpdate?: (seconds: number) => void;
+    class?: string;
+    ref?: HTMLDivElement | null;
+    /** The `<video>` element. */
+    mediaRef?: HTMLVideoElement | null;
+}
+declare const VideoPlayer: import("svelte").Component<Props, {}, "ref" | "mediaRef">;
+type VideoPlayer = ReturnType<typeof VideoPlayer>;
+export default VideoPlayer;