@loidolt/theme-svelte 0.5.0 → 0.6.0

package/README.md

@@ -19,3 +19,14 @@ Then import components from the package barrel:
   import { Button, Field, Input } from '@loidolt/theme-svelte';
 </script>
 ```
+
+`hls.js` is an optional peer dependency, needed only to play HLS (`.m3u8`) streams outside
+Safari. Install it and register it once:
+
+```ts
+import { setHlsLoader } from '@loidolt/theme-svelte';
+
+setHlsLoader(() => import('hls.js').then((module) => module.default));
+```
+
+See the [design-system documentation](https://theme.loidolt.space) for every component.

package/dist/announcer.svelte.d.ts

@@ -0,0 +1,36 @@
+export type Politeness = 'polite' | 'assertive';
+export interface AnnouncerOptions {
+    /** Default politeness for `announce()`. `'assertive'` interrupts; keep it for errors. */
+    politeness?: Politeness;
+    /**
+     * Milliseconds before a message is cleared, so the region does not hold stale text a screen
+     * reader user might land on later. `0` keeps it. Defaults to 5000.
+     */
+    clearAfter?: number;
+}
+export interface Announcer {
+    /** The text to render inside a mounted `LiveRegion`. Reactive. */
+    readonly message: string;
+    readonly politeness: Politeness;
+    /** Speaks `message`. Repeating the same text is announced again, not swallowed. */
+    announce(message: string, options?: {
+        politeness?: Politeness;
+    }): void;
+    clear(): void;
+    /** Cancels any pending write or clear. Automatic for a component-scoped instance. */
+    destroy(): void;
+}
+/**
+ * State behind a `LiveRegion`: set a message, and it is spoken and then cleared.
+ *
+ * ```svelte
+ * const announcer = createAnnouncer();
+ * <LiveRegion message={announcer.message} politeness={announcer.politeness} />
+ * <button onclick={() => announcer.announce('Saved')}>Save</button>
+ * ```
+ *
+ * The region must already be in the document when the message changes — a region mounted
+ * together with its text is silent in most screen readers — so render `LiveRegion` once,
+ * unconditionally, and let this drive its contents.
+ */
+export declare function createAnnouncer(options?: AnnouncerOptions): Announcer;

package/dist/announcer.svelte.js

@@ -0,0 +1,73 @@
+import { onDestroy } from 'svelte';
+/** Milliseconds between emptying the region and writing the new message. */
+const WRITE_DELAY = 50;
+/**
+ * State behind a `LiveRegion`: set a message, and it is spoken and then cleared.
+ *
+ * ```svelte
+ * const announcer = createAnnouncer();
+ * <LiveRegion message={announcer.message} politeness={announcer.politeness} />
+ * <button onclick={() => announcer.announce('Saved')}>Save</button>
+ * ```
+ *
+ * The region must already be in the document when the message changes — a region mounted
+ * together with its text is silent in most screen readers — so render `LiveRegion` once,
+ * unconditionally, and let this drive its contents.
+ */
+export function createAnnouncer(options = {}) {
+    const { politeness: defaultPoliteness = 'polite', clearAfter = 5000 } = options;
+    if (!(Number.isFinite(clearAfter) && clearAfter >= 0)) {
+        throw new RangeError('createAnnouncer: `clearAfter` must be a non-negative number');
+    }
+    let message = $state('');
+    let politeness = $state(defaultPoliteness);
+    let clearTimer;
+    let pending = 0;
+    const cancel = () => {
+        clearTimeout(clearTimer);
+        clearTimer = undefined;
+    };
+    const announce = (text, opts = {}) => {
+        cancel();
+        politeness = opts.politeness ?? defaultPoliteness;
+        // Screen readers announce a *change*. Setting the same string again is no change, so empty
+        // the region first and write the text a moment later. The gap is a macrotask, not a
+        // microtask: both writes inside one task can reach assistive tech as a single, unchanged
+        // mutation.
+        message = '';
+        const token = ++pending;
+        setTimeout(() => {
+            if (token !== pending)
+                return;
+            message = text;
+            if (clearAfter > 0)
+                clearTimer = setTimeout(() => (message = ''), clearAfter);
+        }, WRITE_DELAY);
+    };
+    const clear = () => {
+        pending++;
+        cancel();
+        message = '';
+    };
+    const destroy = () => {
+        pending++;
+        cancel();
+    };
+    try {
+        onDestroy(destroy);
+    }
+    catch {
+        /* module scope: the caller owns `destroy()` */
+    }
+    return {
+        get message() {
+            return message;
+        },
+        get politeness() {
+            return politeness;
+        },
+        announce,
+        clear,
+        destroy,
+    };
+}

package/dist/attachments.d.ts

@@ -0,0 +1,83 @@
+import type { Attachment } from 'svelte/attachments';
+import type { Orientation } from './types.js';
+export interface EscapeKeyOptions {
+    /** Listen only while true. Defaults to `true`. */
+    enabled?: boolean;
+    preventDefault?: boolean;
+    /**
+     * Stop the event reaching outer Escape handlers, so only the innermost layer closes. Defaults
+     * to `false`.
+     */
+    stopPropagation?: boolean;
+    /**
+     * `'document'` (the default) hears Escape wherever focus is — right for a layer that owns the
+     * screen. `'node'` hears it only while focus is inside the element.
+     */
+    scope?: 'document' | 'node';
+}
+/** Calls `handler` when Escape is pressed. */
+export declare function escapeKey(handler: (event: KeyboardEvent) => void, options?: EscapeKeyOptions): Attachment<HTMLElement>;
+export interface ClickOutsideOptions {
+    enabled?: boolean;
+    /** Defaults to `['pointerdown']`, which covers mouse, pen and touch in one listener. */
+    events?: Array<'pointerdown' | 'mousedown' | 'touchstart' | 'click'>;
+    /**
+     * Presses on these count as inside — typically the trigger that opened the surface, so
+     * pressing it toggles rather than closing and instantly reopening.
+     */
+    ignore?: Array<Element | null | undefined>;
+}
+/** Calls `handler` when a press lands outside the element (and outside `ignore`). */
+export declare function clickOutside(handler: (event: Event) => void, options?: ClickOutsideOptions): Attachment<HTMLElement>;
+export interface AutofocusOptions {
+    enabled?: boolean;
+    /** Milliseconds to wait — for a surface that animates in. Defaults to the next frame. */
+    delay?: number;
+    preventScroll?: boolean;
+    /** Select an input's text as well as focusing it. */
+    select?: boolean;
+}
+/**
+ * Moves focus to the element once it mounts. Prefer it to the `autofocus` attribute, which
+ * browsers honour only on page load and which Svelte warns about for that reason.
+ */
+export declare function autofocus(options?: AutofocusOptions): Attachment<HTMLElement>;
+export interface RovingFocusOptions {
+    /**
+     * Which arrow keys move focus. `'both'` accepts all four, for a grid you walk in reading order.
+     * Defaults to `'horizontal'`.
+     */
+    orientation?: Orientation | 'both';
+    /** Wrap from the last item to the first and back. Defaults to `true`. */
+    loop?: boolean;
+    /** Which descendants take part. Defaults to `[data-roving-item]`. */
+    selector?: string;
+    /**
+     * Keep exactly one item in the tab order (`tabindex="0"`) and the rest at `-1`, so Tab enters
+     * and leaves the group in one step — the WAI-ARIA toolbar and grid pattern. Defaults to `true`.
+     */
+    manageTabIndex?: boolean;
+    onFocusChange?: (index: number, element: HTMLElement) => void;
+}
+/**
+ * Arrow-key, Home and End navigation between the matching descendants, with an optional roving
+ * tab stop. Items added or removed later are picked up on the next key press.
+ */
+export declare function rovingFocus(options?: RovingFocusOptions): Attachment<HTMLElement>;
+export interface FocusTrapOptions {
+    enabled?: boolean;
+    /** A selector inside the element, or an element, to focus first. Defaults to the first tabbable. */
+    initialFocus?: string | HTMLElement;
+    /**
+     * Where focus goes when the trap is released: `true` (the default) returns it to whatever had
+     * it before, an element sends it there, `false` leaves it alone.
+     */
+    returnFocus?: boolean | HTMLElement;
+    preventScroll?: boolean;
+}
+/**
+ * Keeps Tab and Shift+Tab inside the element while enabled, and restores focus when released.
+ * `Dialog`, `AlertDialog`, `Drawer` and the other Bits overlays already trap focus — this is for
+ * a modal surface you render yourself.
+ */
+export declare function focusTrap(options?: FocusTrapOptions): Attachment<HTMLElement>;

package/dist/attachments.js

@@ -0,0 +1,211 @@
+/** Calls `handler` when Escape is pressed. */
+export function escapeKey(handler, options = {}) {
+    const { enabled = true, preventDefault = false, stopPropagation = false, scope } = options;
+    return (node) => {
+        if (!enabled)
+            return;
+        const target = scope === 'node' ? node : node.ownerDocument;
+        const onKeydown = (event) => {
+            const key = event;
+            // An IME composition uses Escape to cancel the candidate, not the surface.
+            if (key.key !== 'Escape' || key.isComposing)
+                return;
+            if (preventDefault)
+                key.preventDefault();
+            if (stopPropagation)
+                key.stopPropagation();
+            handler(key);
+        };
+        target.addEventListener('keydown', onKeydown);
+        return () => target.removeEventListener('keydown', onKeydown);
+    };
+}
+/** Calls `handler` when a press lands outside the element (and outside `ignore`). */
+export function clickOutside(handler, options = {}) {
+    const { enabled = true, events = ['pointerdown'], ignore = [] } = options;
+    return (node) => {
+        if (!enabled)
+            return;
+        const doc = node.ownerDocument;
+        const onPress = (event) => {
+            // `composedPath` sees through shadow roots and survives the target being removed by an
+            // earlier handler in the same dispatch; `contains` on a detached target would not.
+            const path = event.composedPath();
+            if (path.includes(node) || ignore.some((element) => element && path.includes(element)))
+                return;
+            handler(event);
+        };
+        for (const type of events)
+            doc.addEventListener(type, onPress, true);
+        return () => {
+            for (const type of events)
+                doc.removeEventListener(type, onPress, true);
+        };
+    };
+}
+/**
+ * Moves focus to the element once it mounts. Prefer it to the `autofocus` attribute, which
+ * browsers honour only on page load and which Svelte warns about for that reason.
+ */
+export function autofocus(options = {}) {
+    const { enabled = true, delay, preventScroll = false, select = false } = options;
+    return (node) => {
+        if (!enabled)
+            return;
+        const run = () => {
+            node.focus({ preventScroll });
+            if (select && (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement))
+                node.select();
+        };
+        if (delay !== undefined) {
+            const timer = setTimeout(run, delay);
+            return () => clearTimeout(timer);
+        }
+        const frame = requestAnimationFrame(run);
+        return () => cancelAnimationFrame(frame);
+    };
+}
+const isUsable = (element) => !element.matches(':disabled, [aria-disabled="true"]') && !element.closest('[hidden], [inert]');
+/**
+ * Arrow-key, Home and End navigation between the matching descendants, with an optional roving
+ * tab stop. Items added or removed later are picked up on the next key press.
+ */
+export function rovingFocus(options = {}) {
+    const { orientation = 'horizontal', loop = true, selector = '[data-roving-item]', manageTabIndex = true, onFocusChange, } = options;
+    const next = new Set(orientation === 'vertical'
+        ? ['ArrowDown']
+        : orientation === 'horizontal'
+            ? ['ArrowRight']
+            : ['ArrowRight', 'ArrowDown']);
+    const previous = new Set(orientation === 'vertical'
+        ? ['ArrowUp']
+        : orientation === 'horizontal'
+            ? ['ArrowLeft']
+            : ['ArrowLeft', 'ArrowUp']);
+    return (node) => {
+        const items = () => [...node.querySelectorAll(selector)].filter((item) => isUsable(item));
+        const setTabStop = (active) => {
+            if (!manageTabIndex)
+                return;
+            for (const item of node.querySelectorAll(selector)) {
+                item.tabIndex = item === active ? 0 : -1;
+            }
+        };
+        const move = (target, index) => {
+            setTabStop(target);
+            target.focus();
+            onFocusChange?.(index, target);
+        };
+        // Start with one tab stop: the first item already marked current, else the first usable one.
+        const initial = items();
+        setTabStop(initial.find((item) => item.matches('[aria-current], [aria-selected="true"]')) ?? initial[0]);
+        const onKeydown = (event) => {
+            const list = items();
+            if (list.length === 0)
+                return;
+            const current = list.findIndex((item) => item === event.target || item.contains(event.target));
+            if (current === -1)
+                return;
+            let index;
+            if (next.has(event.key)) {
+                index = current + 1 < list.length ? current + 1 : loop ? 0 : current;
+            }
+            else if (previous.has(event.key)) {
+                index = current > 0 ? current - 1 : loop ? list.length - 1 : current;
+            }
+            else if (event.key === 'Home') {
+                index = 0;
+            }
+            else if (event.key === 'End') {
+                index = list.length - 1;
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            move(list[index], index);
+        };
+        // A click or programmatic focus moves the tab stop too, so Tab returns to the last item used.
+        const onFocusin = (event) => {
+            const item = items().find((one) => one === event.target);
+            if (item)
+                setTabStop(item);
+        };
+        node.addEventListener('keydown', onKeydown);
+        node.addEventListener('focusin', onFocusin);
+        return () => {
+            node.removeEventListener('keydown', onKeydown);
+            node.removeEventListener('focusin', onFocusin);
+        };
+    };
+}
+const TABBABLE = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+].join(',');
+const tabbables = (container) => [...container.querySelectorAll(TABBABLE)].filter((element) => element.tabIndex >= 0 &&
+    !element.closest('[hidden], [inert]') &&
+    getComputedStyle(element).visibility !== 'hidden' &&
+    getComputedStyle(element).display !== 'none');
+/**
+ * Keeps Tab and Shift+Tab inside the element while enabled, and restores focus when released.
+ * `Dialog`, `AlertDialog`, `Drawer` and the other Bits overlays already trap focus — this is for
+ * a modal surface you render yourself.
+ */
+export function focusTrap(options = {}) {
+    const { enabled = true, initialFocus, returnFocus = true, preventScroll = false } = options;
+    return (node) => {
+        if (!enabled)
+            return;
+        const doc = node.ownerDocument;
+        const previous = doc.activeElement;
+        const first = typeof initialFocus === 'string'
+            ? node.querySelector(initialFocus)
+            : (initialFocus ?? null);
+        const frame = requestAnimationFrame(() => {
+            if (node.contains(doc.activeElement))
+                return;
+            const target = first ?? tabbables(node)[0];
+            // With nothing tabbable inside, hold focus on the container itself so Tab has nowhere to go.
+            if (!target && !node.hasAttribute('tabindex'))
+                node.tabIndex = -1;
+            (target ?? node).focus({ preventScroll });
+        });
+        const onKeydown = (event) => {
+            if (event.key !== 'Tab')
+                return;
+            const list = tabbables(node);
+            if (list.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const active = doc.activeElement;
+            const [head, tail] = [list[0], list[list.length - 1]];
+            if (event.shiftKey && (active === head || !node.contains(active))) {
+                event.preventDefault();
+                tail.focus({ preventScroll });
+            }
+            else if (!event.shiftKey && (active === tail || !node.contains(active))) {
+                event.preventDefault();
+                head.focus({ preventScroll });
+            }
+        };
+        doc.addEventListener('keydown', onKeydown, true);
+        return () => {
+            cancelAnimationFrame(frame);
+            doc.removeEventListener('keydown', onKeydown, true);
+            const destination = returnFocus === true ? previous : returnFocus || null;
+            if (destination?.isConnected)
+                destination.focus({ preventScroll });
+        };
+    };
+}

package/dist/components/ActiveFilterChips.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" generics="T extends string = string">
+  import { tick, type Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Option } from '../types.js';
+  import { cx } from '../utils.js';
+  import Button from './Button.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** One chip per filter narrowing the results, labelled the way the user would say it. */
+    items: Option<T>[];
+    /** Clear one filter. Remove it from `items` in response. */
+    onRemove: (value: T) => void;
+    /** Clear every filter; shows a trailing "Clear all" when set. */
+    onClearAll?: () => void;
+    label?: string;
+    removeLabel?: (label: string) => string;
+    clearAllLabel?: string;
+    /** Notes after the chips, e.g. a filter that does not apply to this view. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    items,
+    onRemove,
+    onClearAll,
+    label = 'Active filters',
+    removeLabel = (text) => `Remove filter ${text}`,
+    clearAllLabel = 'Clear all',
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  async function remove(value: T, index: number) {
+    onRemove(value);
+    await tick();
+    // Focus stays in the group: the chip that took this one's place, else the one before it,
+    // else the group itself — never dropped to <body>.
+    const buttons = ref?.querySelectorAll<HTMLButtonElement>('.ldt-chip__remove') ?? [];
+    (buttons[index] ?? buttons[index - 1] ?? ref)?.focus();
+  }
+</script>
+
+{#if items.length || children}
+  <div
+    bind:this={ref}
+    class={cx('ldt-filter-chips', className)}
+    role="group"
+    aria-label={label}
+    tabindex="-1"
+    {...rest}
+  >
+    {#if items.length}
+      <ul class="ldt-filter-chips__list">
+        {#each items as item, index (item.value)}
+          <li class="ldt-chip">
+            <span>{item.label}</span>
+            <button
+              type="button"
+              class="ldt-chip__remove"
+              aria-label={removeLabel(item.label)}
+              disabled={item.disabled}
+              onclick={() => remove(item.value, index)}
+              ><svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" focusable="false"
+                ><path d="m2 2 6 6M8 2 2 8" stroke="currentColor" stroke-width="1.4" /></svg
+              ></button
+            >
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if children}{@render children()}{/if}
+    {#if onClearAll && items.length}<Button variant="text" size="sm" onclick={onClearAll}
+        >{clearAllLabel}</Button
+      >{/if}
+  </div>
+{/if}

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

@@ -0,0 +1,41 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Option } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: HTMLAttributes<HTMLDivElement> & {
+        /** One chip per filter narrowing the results, labelled the way the user would say it. */
+        items: Option<T>[];
+        /** Clear one filter. Remove it from `items` in response. */
+        onRemove: (value: T) => void;
+        /** Clear every filter; shows a trailing "Clear all" when set. */
+        onClearAll?: () => void;
+        label?: string;
+        removeLabel?: (label: string) => string;
+        clearAllLabel?: string;
+        /** Notes after the chips, e.g. a filter that does not apply to this view. */
+        children?: Snippet;
+        class?: string;
+        ref?: HTMLDivElement | null;
+    };
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ActiveFilterChips: $$IsomorphicComponent;
+type ActiveFilterChips<T extends string = string> = InstanceType<typeof ActiveFilterChips<T>>;
+export default ActiveFilterChips;

package/dist/components/AspectRatio.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { resolveAspectRatio, type AspectRatioName } from '../media-utils.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** A named frame (`video`, `photo`, `square`, `portrait`, `wide`), a number, or `'4 / 3'`. */
+    ratio?: AspectRatioName | number | string;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    ratio = 'video',
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!-- Native `aspect-ratio`: the box keeps its shape before anything inside it has loaded. -->
+<div
+  bind:this={ref}
+  class={cx('ldt-aspect-ratio', className)}
+  style:--ldt-aspect-ratio={resolveAspectRatio(ratio)}
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AspectRatioName } from '../media-utils.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** A named frame (`video`, `photo`, `square`, `portrait`, `wide`), a number, or `'4 / 3'`. */
+    ratio?: AspectRatioName | number | string;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const AspectRatio: import("svelte").Component<Props, {}, "ref">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/components/AudioPlayer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  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, toMediaSources, type MediaSourceEntry } from '../media-utils.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    src: string | MediaSourceEntry[];
+    /** The track or recording title; also names the player. */
+    title: string;
+    artist?: string;
+    /** Cover art. Decorative: the title already names the recording. */
+    artwork?: string;
+    loop?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    hlsLoader?: HlsLoader;
+    labels?: Partial<MediaPlayerLabels>;
+    onEnded?: () => void;
+    onTimeUpdate?: (seconds: number) => void;
+    class?: string;
+    ref?: HTMLDivElement | null;
+    mediaRef?: HTMLAudioElement | null;
+  }
+
+  let {
+    src,
+    title,
+    artist,
+    artwork,
+    loop = false,
+    preload = 'metadata',
+    hlsLoader,
+    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;
+    },
+  });
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-media-player', 'ldt-media-player--audio', className)}
+  data-playing={player.playing ? '' : undefined}
+  role="group"
+  aria-label={title}
+  onkeydown={mediaKeydown(player, () => null)}
+  {...rest}
+>
+  {#if artwork}<img class="ldt-media-player__artwork" src={artwork} alt="" />{/if}
+  <div class="ldt-media-player__meta">
+    <strong class="ldt-media-player__title">{title}</strong>
+    {#if artist}<span class="ldt-media-player__artist">{artist}</span>{/if}
+  </div>
+  <audio
+    bind:this={mediaRef}
+    {preload}
+    {loop}
+    {@attach player.attach}
+    {@attach stream ? hls.source(stream.src) : undefined}
+  >
+    {#if !stream}{#each sources as source (source.src)}<source
+          src={source.src}
+          type={source.type}
+        />{/each}{/if}
+  </audio>
+  {#if player.error || hls.status === 'unsupported' || hls.status === 'error'}<p
+      class="ldt-media-player__error"
+      role="alert"
+    >
+      {text.error}
+    </p>{/if}
+  <MediaControls {player} labels={text} />
+</div>