@loidolt/theme-svelte 0.5.0 → 0.7.0

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

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HlsLoader } from '../hls.js';
+import { type MediaPlayerLabels } from '../internal/media/labels.js';
+import { type MediaSourceEntry } from '../media-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;
+}
+declare const AudioPlayer: import("svelte").Component<Props, {}, "ref" | "mediaRef">;
+type AudioPlayer = ReturnType<typeof AudioPlayer>;
+export default AudioPlayer;

package/dist/components/Avatar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive, type AvatarRootProps } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { ControlSize } from '../types.js';
+  import { cx } from '../utils.js';
+
+  type LoadingStatus = 'loading' | 'loaded' | 'error';
+
+  type Props = Omit<
+    AvatarRootProps,
+    'child' | 'children' | 'loadingStatus' | 'onLoadingStatusChange' | 'ref'
+  > & {
+    /** Image URL. Without one, or while it loads or after it fails, the fallback shows. */
+    src?: string;
+    /**
+     * Who this is. Names the avatar for assistive tech and supplies the fallback initials. Leave
+     * both `name` and `alt` unset when adjacent text already names the person — the avatar is
+     * then decorative.
+     */
+    name?: string;
+    /** Accessible name when it should differ from `name`. */
+    alt?: string;
+    /** Fallback text. Defaults to the first letters of the first and last word of `name`. */
+    initials?: string;
+    /** Custom fallback, e.g. a generic person glyph. Replaces the initials. */
+    fallback?: Snippet;
+    /** Matches the control heights, so an avatar sits level with buttons of the same size. */
+    size?: ControlSize;
+    /** Milliseconds before the fallback appears, so a fast image never flashes initials first. */
+    delayMs?: number;
+    loadingStatus?: LoadingStatus;
+    onLoadingStatusChange?: (status: LoadingStatus) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    src,
+    name,
+    alt,
+    initials,
+    fallback,
+    size = 'md',
+    delayMs = 0,
+    loadingStatus = $bindable('loading'),
+    onLoadingStatusChange,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const label = $derived(alt ?? name);
+  const letters = $derived(
+    initials ??
+      (name ?? '')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .filter((_, index, words) => index === 0 || index === words.length - 1)
+        .map((word) => word[0])
+        .join('')
+        .toLocaleUpperCase()
+  );
+</script>
+
+<!--
+  One accessible name on the root, whichever of image or initials is showing: otherwise the
+  announcement would change when the image finished loading, or vanish when it failed.
+-->
+<AvatarPrimitive.Root
+  bind:ref
+  bind:loadingStatus
+  {delayMs}
+  {onLoadingStatusChange}
+  class={cx('ldt-avatar', size !== 'md' && `ldt-avatar--${size}`, className)}
+  role={label ? 'img' : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : 'true'}
+  {...rest}
+>
+  {#if src}<AvatarPrimitive.Image class="ldt-avatar__image" {src} alt="" />{/if}
+  <AvatarPrimitive.Fallback class="ldt-avatar__fallback" aria-hidden="true">
+    {#if fallback}{@render fallback()}{:else}{letters}{/if}
+  </AvatarPrimitive.Fallback>
+</AvatarPrimitive.Root>

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

@@ -0,0 +1,31 @@
+import { type AvatarRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ControlSize } from '../types.js';
+type LoadingStatus = 'loading' | 'loaded' | 'error';
+type Props = Omit<AvatarRootProps, 'child' | 'children' | 'loadingStatus' | 'onLoadingStatusChange' | 'ref'> & {
+    /** Image URL. Without one, or while it loads or after it fails, the fallback shows. */
+    src?: string;
+    /**
+     * Who this is. Names the avatar for assistive tech and supplies the fallback initials. Leave
+     * both `name` and `alt` unset when adjacent text already names the person — the avatar is
+     * then decorative.
+     */
+    name?: string;
+    /** Accessible name when it should differ from `name`. */
+    alt?: string;
+    /** Fallback text. Defaults to the first letters of the first and last word of `name`. */
+    initials?: string;
+    /** Custom fallback, e.g. a generic person glyph. Replaces the initials. */
+    fallback?: Snippet;
+    /** Matches the control heights, so an avatar sits level with buttons of the same size. */
+    size?: ControlSize;
+    /** Milliseconds before the fallback appears, so a fast image never flashes initials first. */
+    delayMs?: number;
+    loadingStatus?: LoadingStatus;
+    onLoadingStatusChange?: (status: LoadingStatus) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "ref" | "loadingStatus">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Badge.svelte

@@ -7,19 +7,38 @@
   interface Props extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /** A leading dot in the badge's colour — a status marker that still reads in greyscale. */
+    dot?: boolean;
+    /** A number to show instead of `children`, e.g. unread items. Above `max` it reads `99+`. */
+    count?: number;
+    max?: number;
+    /**
+     * Visually hidden context read after the visible text, so "3" is heard as "3 unread
+     * messages". Needed whenever the number or word alone does not say what it counts.
+     */
+    label?: string;
+    /** Announce changes (`role="status"`) — for a count that updates while the user watches. */
+    live?: boolean;
     class?: string;
-    children: Snippet;
+    children?: Snippet;
     ref?: HTMLSpanElement | null;
   }
 
   let {
     variant = 'default',
     size = 'inline',
+    dot = false,
+    count,
+    max = 99,
+    label,
+    live = false,
     class: className,
     children,
     ref = $bindable(null),
     ...rest
   }: Props = $props();
+
+  const shown = $derived(count === undefined ? undefined : count > max ? `${max}+` : String(count));
 </script>
 
 <span
@@ -30,5 +49,12 @@
     size !== 'inline' && `ldt-badge--${size}`,
     className
   )}
-  {...rest}>{@render children()}</span
+  role={live ? 'status' : undefined}
+  aria-live={live ? 'polite' : undefined}
+  aria-atomic={live ? 'true' : undefined}
+  {...rest}
+  >{#if dot}<span class="ldt-badge__dot" aria-hidden="true"
+    ></span>{/if}{#if shown !== undefined}{shown}{:else if children}{@render children()}{/if}{#if label}<span
+      class="ldt-sr-only">{` ${label}`}</span
+    >{/if}</span
 >

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

@@ -4,8 +4,20 @@ import type { BadgeSize, BadgeVariant } from '../types.js';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /** A leading dot in the badge's colour — a status marker that still reads in greyscale. */
+    dot?: boolean;
+    /** A number to show instead of `children`, e.g. unread items. Above `max` it reads `99+`. */
+    count?: number;
+    max?: number;
+    /**
+     * Visually hidden context read after the visible text, so "3" is heard as "3 unread
+     * messages". Needed whenever the number or word alone does not say what it counts.
+     */
+    label?: string;
+    /** Announce changes (`role="status"`) — for a count that updates while the user watches. */
+    live?: boolean;
     class?: string;
-    children: Snippet;
+    children?: Snippet;
     ref?: HTMLSpanElement | null;
 }
 declare const Badge: import("svelte").Component<Props, {}, "ref">;

package/dist/components/Combobox.svelte

@@ -0,0 +1,180 @@
+<script lang="ts" generics="T extends string = string">
+  import { Combobox as ComboboxPrimitive, type ComboboxInputProps } from 'bits-ui';
+  import { untrack, type Snippet } from 'svelte';
+  import ListboxEntries from '../internal/ListboxEntries.svelte';
+  import {
+    filterEntries,
+    flattenOptions,
+    matchesQuery,
+    type OptionEntry,
+  } from '../internal/options.js';
+  import type { Option } from '../types.js';
+  import { cx } from '../utils.js';
+  import LiveRegion from './LiveRegion.svelte';
+
+  type Props = Omit<
+    ComboboxInputProps,
+    'value' | 'child' | 'children' | 'defaultValue' | 'clearOnDeselect' | 'oninput' | 'ref'
+  > & {
+    disabled?: boolean;
+    required?: boolean;
+    /** Submits the selected value with a form. */
+    name?: string;
+    /** The selected value, or `''` for none. */
+    value?: T | '';
+    /** Options, optionally in labelled groups. */
+    options: OptionEntry<T>[];
+    /** Accessible name when the combobox is not wrapped in a `Field` or `<label>`. */
+    label?: string;
+    /**
+     * How typing narrows the list. Defaults to a case- and accent-insensitive match on the label.
+     * Pass `false` when the options already come back filtered — from a server search driven by
+     * `onQueryChange`.
+     */
+    filter?: ((option: Option<T>, query: string) => boolean) | false;
+    /** The text typed so far. Bindable. */
+    query?: string;
+    /** Called with the typed text, after `queryDebounce` — the hook for a server-side search. */
+    onQueryChange?: (query: string) => void;
+    /** Milliseconds to wait after the last keystroke before calling `onQueryChange`. */
+    queryDebounce?: number;
+    /** Results are on their way; shown in place of the list and announced. */
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    /** What screen readers hear as the list narrows. */
+    resultsText?: (count: number) => string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: T | '') => void;
+    /** Choosing the selected option again clears it. */
+    allowDeselect?: boolean;
+    /** Draws the full box instead of the default underline. */
+    boxed?: boolean;
+    /** Accessible name of the button that opens the list. */
+    triggerLabel?: string;
+    /** Custom row content. The check mark for the selected row is still drawn. */
+    item?: Snippet<[Option<T>, { selected: boolean; highlighted: boolean }]>;
+    /** Lands on the wrapper; the rest props land on the text input. */
+    class?: string;
+    /** Class for the portaled list. */
+    contentClass?: string;
+    /** The text input. */
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    value = $bindable(''),
+    options,
+    label,
+    filter,
+    query = $bindable(''),
+    onQueryChange,
+    queryDebounce = 0,
+    loading = false,
+    loadingText = 'Loading…',
+    emptyText = 'No results',
+    resultsText = (count) => `${count} ${count === 1 ? 'result' : 'results'}`,
+    open = $bindable(false),
+    onOpenChange,
+    onValueChange,
+    allowDeselect = false,
+    boxed = false,
+    triggerLabel = 'Show options',
+    item,
+    disabled = false,
+    required = false,
+    name,
+    class: className,
+    contentClass,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const flat = $derived(flattenOptions(options));
+  const selected = $derived(flat.find((option) => option.value === value));
+  const visible = $derived(
+    filter === false || !query
+      ? options
+      : filterEntries(options, (option) => (filter ?? matchesQuery)(option, query))
+  );
+  const count = $derived(flattenOptions(visible).length);
+
+  // What the input shows. Bits owns it while the user types; closing snaps it back to the
+  // selection, so a half-typed query never masquerades as the value.
+  // Seeded from the selection so the server renders it too; effects never run during SSR.
+  let text = $state(untrack(() => selected?.label ?? ''));
+  $effect.pre(() => {
+    if (!open) text = selected?.label ?? '';
+  });
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  $effect(() => () => clearTimeout(timer));
+
+  function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+    query = event.currentTarget.value;
+    text = query;
+    if (!onQueryChange) return;
+    clearTimeout(timer);
+    const next = query;
+    if (queryDebounce > 0) timer = setTimeout(() => onQueryChange(next), queryDebounce);
+    else onQueryChange(next);
+  }
+
+  function handleOpenChange(next: boolean) {
+    if (!next) query = '';
+    onOpenChange?.(next);
+  }
+
+  function handleValueChange(next: string) {
+    const option = flat.find((one) => one.value === next);
+    text = option?.label ?? '';
+    onValueChange?.(next as T | '');
+  }
+
+  const announcement = $derived(
+    !open ? '' : loading ? loadingText : count === 0 ? emptyText : resultsText(count)
+  );
+</script>
+
+<ComboboxPrimitive.Root
+  type="single"
+  bind:value={() => value, (next) => (value = next as T | '')}
+  bind:open
+  inputValue={text}
+  items={flat}
+  {disabled}
+  {required}
+  {name}
+  {allowDeselect}
+  onOpenChange={handleOpenChange}
+  onValueChange={handleValueChange}
+>
+  <div class={cx('ldt-combobox', boxed && 'ldt-combobox--boxed', className)}>
+    <ComboboxPrimitive.Input
+      bind:ref
+      class="ldt-combobox__input"
+      aria-label={label}
+      autocomplete="off"
+      {...rest}
+      oninput={handleInput}
+    />
+    <ComboboxPrimitive.Trigger class="ldt-combobox__trigger" aria-label={triggerLabel}>
+      <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" focusable="false"
+        ><path d="M2 4.5 6 8.5l4-4" fill="none" stroke="currentColor" stroke-width="1.5" /></svg
+      >
+    </ComboboxPrimitive.Trigger>
+  </div>
+  <ComboboxPrimitive.Portal>
+    <ComboboxPrimitive.Content class={cx('ldt-listbox', contentClass)} sideOffset={4}>
+      {#if loading}
+        <div class="ldt-listbox__empty" aria-hidden="true">{loadingText}</div>
+      {:else if count === 0}
+        <div class="ldt-listbox__empty" aria-hidden="true">{emptyText}</div>
+      {:else}
+        <ListboxEntries entries={visible} {item} />
+      {/if}
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Portal>
+</ComboboxPrimitive.Root>
+<LiveRegion message={announcement} />

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

@@ -0,0 +1,77 @@
+import { Combobox as ComboboxPrimitive } from 'bits-ui';
+import { type Snippet } from 'svelte';
+import { type OptionEntry } from '../internal/options.js';
+import type { Option } from '../types.js';
+declare function $$render<T extends string = string>(): {
+    props: Omit<ComboboxPrimitive.InputProps, "value" | "children" | "oninput" | "ref" | "child" | "defaultValue" | "clearOnDeselect"> & {
+        disabled?: boolean;
+        required?: boolean;
+        /** Submits the selected value with a form. */
+        name?: string;
+        /** The selected value, or `''` for none. */
+        value?: T | "";
+        /** Options, optionally in labelled groups. */
+        options: OptionEntry<T>[];
+        /** Accessible name when the combobox is not wrapped in a `Field` or `<label>`. */
+        label?: string;
+        /**
+         * How typing narrows the list. Defaults to a case- and accent-insensitive match on the label.
+         * Pass `false` when the options already come back filtered — from a server search driven by
+         * `onQueryChange`.
+         */
+        filter?: ((option: Option<T>, query: string) => boolean) | false;
+        /** The text typed so far. Bindable. */
+        query?: string;
+        /** Called with the typed text, after `queryDebounce` — the hook for a server-side search. */
+        onQueryChange?: (query: string) => void;
+        /** Milliseconds to wait after the last keystroke before calling `onQueryChange`. */
+        queryDebounce?: number;
+        /** Results are on their way; shown in place of the list and announced. */
+        loading?: boolean;
+        loadingText?: string;
+        emptyText?: string;
+        /** What screen readers hear as the list narrows. */
+        resultsText?: (count: number) => string;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+        onValueChange?: (value: T | "") => void;
+        /** Choosing the selected option again clears it. */
+        allowDeselect?: boolean;
+        /** Draws the full box instead of the default underline. */
+        boxed?: boolean;
+        /** Accessible name of the button that opens the list. */
+        triggerLabel?: string;
+        /** Custom row content. The check mark for the selected row is still drawn. */
+        item?: Snippet<[Option<T>, {
+            selected: boolean;
+            highlighted: boolean;
+        }]>;
+        /** Lands on the wrapper; the rest props land on the text input. */
+        class?: string;
+        /** Class for the portaled list. */
+        contentClass?: string;
+        /** The text input. */
+        ref?: HTMLElement | null;
+    };
+    exports: {};
+    bindings: "value" | "ref" | "open" | "query";
+    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(): "value" | "ref" | "open" | "query";
+    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 Combobox: $$IsomorphicComponent;
+type Combobox<T extends string = string> = InstanceType<typeof Combobox<T>>;
+export default Combobox;