@spaethtech/svelte-ui 0.13.0 → 0.14.0

package/.claude/skills/svelte-ui/SKILL.md

@@ -152,8 +152,13 @@ Mount `<Toaster />` once at the app root, then push from anywhere with `toast.su
 All from `@spaethtech/svelte-ui` (see the shipped `docs/components.md` + `docs/usage.md` for props +
 examples):
 
-- **Form:** `Button` `ButtonDropdown` `Input` `Select` `Slider` `List` `TextArea` `Checkbox` `Toggle`
-  `Radio` `Rating` · **`Slider`** (draggable number/range; `range` dual-thumb, `min`/`max`/`step`,
+- **Form:** `Button` `ButtonDropdown` `Input` `Select` `Combobox` `Slider` `List` `TextArea` `Checkbox`
+  `Toggle` `Radio` `Rating` · **`Combobox`** (free-text autocomplete — arbitrary value + suggestions,
+  client `options` or async `suggest`; vs `Select` which is a closed choice. Composes Input + Popup.) ·
+  **`TokenInput`** (multi-value entry — Enter/comma adds a removable `Chip` token, Backspace-on-empty
+  removes; `bind:values`, `max`, `allowDuplicates`; FieldChrome.) · **`FileUpload`** (drag-drop + click
+  dropzone; `bind:files`, `accept`/`multiple`/`maxSize`, image thumbnails, `progress` map → `Progress`
+  bar; FieldChrome.) · **`Slider`** (draggable number/range; `range` dual-thumb, `min`/`max`/`step`,
   `showValue`/`format`; FieldChrome + `variant`/`size`; keyboard + `role="slider"`) · **`FieldGroup`**
   (fieldset wrapper for radio/checkbox/toggle sets) · **`ButtonGroup`**
   (joined row/`col` of `<Button>`s as one unit — an action toolbar or a **controlled** segmented
@@ -166,6 +171,8 @@ examples):
   `percent`/`stepper`/`clamp`/`liveFormat`) `PhoneInput` (stores E.164; dep-free, inject
   `parse`/`format` for per-country)
 - **Date / time:** `DatePicker` `Calendar` `TimePicker` `TimeSpinner` `TimeRangeInput` `DateTimeInput`
+  · **`DateRangePicker`** (start–end range + presets rail; `bind:start`/`bind:end` ISO; composes
+  `Calendar mode="range"` + `Input` + `Popup`. `DatePicker range` is the bare, preset-less variant.)
 - **Data:** `DataTable` `Query` — driven by the headless layer at **`@spaethtech/svelte-ui/data`**
   (query-language parser/AST, `createGrid`, `DataGrid<T>`, `DataSet`). · **`Pagination`** (standalone
   pager: numbered buttons + ellipsis, prev/next/first/last, `bind:page`/`bind:perPage`, `total`,
@@ -195,6 +202,9 @@ examples):
 - **Layout:** `Card` `CardHeader` `CardBody` `CardFooter` · **`Grid`** (auto-placed equal-cell grid;
   `columns` + `gap`) · **`Divider`** (thin `role="separator"` rule; `orientation` h/v, optional inline
   `label`+`labelAlign`; `--ui-border-color`)
+- **Flow:** **`Stepper`** (linear multi-step indicator — `steps` of `StepItem` {`label`,`description`,
+  `icon`}, `bind:current`, `orientation` h/v, `onstep` clickable; done/current/upcoming markers +
+  connectors. Panels + Next/Back are the consumer's.)
 - **Disclosure:** **`Disclosure`** (one expand/collapse section; `title`/`header`, `bind:open`, panel
   stays mounted so state is preserved) · **`Accordion`** (coordinated group — `multiple` single/multi,
   `bind:value`; children are `<Disclosure value="…">`, no per-item `bind:open`)

package/dist/components/Combobox/Combobox.svelte

@@ -0,0 +1,205 @@
+<!--
+/**
+ * Combobox — a free-text autocomplete field: an `<Input>` with a suggestion `listbox`. Unlike Select
+ * (closed choice), the value is arbitrary text and options are suggestions. ARIA combobox pattern.
+ * Composes Input (FieldChrome + frame + anchor + trailing actions) + Popup. See Combobox.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Input from "../Input.svelte";
+  import Popup from "../Popup.svelte";
+  import IconChevronDown from "~icons/mdi/chevron-down";
+  import type { Variant } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import type { Responsive } from "../../types/responsive.js";
+
+  let {
+    value = $bindable(""),
+    options = [],
+    suggest,
+    minChars = 1,
+    debounceMs = 200,
+    maxResults,
+    onselect,
+    variant = "secondary",
+    size = "md",
+    disabled = false,
+    placeholder,
+    icon,
+    label = null,
+    aside,
+    error = null,
+    description = null,
+    id,
+    required = false,
+    class: cls = "",
+  }: {
+    value?: string;
+    options?: string[];
+    suggest?: (query: string) => Promise<string[]>;
+    minChars?: number;
+    debounceMs?: number;
+    maxResults?: number;
+    onselect?: (value: string) => void;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    placeholder?: string;
+    icon?: Snippet;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+  } = $props();
+
+  const baseId = $props.id();
+  const listId = `${baseId}-listbox`;
+  const optId = (i: number) => `${baseId}-opt-${i}`;
+
+  let open = $state(false);
+  let highlight = $state(-1);
+  let fieldEl = $state<HTMLDivElement>();
+  let inputEl = $state<HTMLInputElement>();
+  let asyncResults = $state<string[]>([]);
+
+  // Suggestions: async `suggest` (debounced) or client-side substring filter of `options`.
+  const filtered = $derived.by(() => {
+    let out: string[];
+    if (suggest) {
+      out = asyncResults;
+    } else {
+      const q = value.trim().toLowerCase();
+      out = q ? options.filter((o) => o.toLowerCase().includes(q)) : options;
+    }
+    return maxResults != null ? out.slice(0, maxResults) : out;
+  });
+
+  // Debounced async fetch — re-runs as `value` changes; gated by `minChars`.
+  $effect(() => {
+    if (!suggest) return;
+    const q = value;
+    if (q.trim().length < minChars) {
+      asyncResults = [];
+      return;
+    }
+    const t = setTimeout(() => {
+      suggest(q)
+        .then((r) => (asyncResults = r))
+        .catch(() => (asyncResults = []));
+    }, debounceMs);
+    return () => clearTimeout(t);
+  });
+
+  const canOpen = $derived(open && !disabled && filtered.length > 0);
+
+  function choose(v: string) {
+    value = v;
+    open = false;
+    highlight = -1;
+    onselect?.(v);
+    inputEl?.focus();
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    const n = filtered.length;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        open = true;
+        if (n) highlight = (highlight + 1) % n;
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        open = true;
+        if (n) highlight = (highlight - 1 + n) % n;
+        break;
+      case "Enter":
+        if (canOpen && highlight >= 0) {
+          e.preventDefault();
+          choose(filtered[highlight]);
+        }
+        break;
+      case "Escape":
+        open = false;
+        highlight = -1;
+        break;
+      case "Tab":
+        open = false;
+        break;
+    }
+  }
+</script>
+
+<Input
+  bind:value
+  bind:element={inputEl}
+  bind:fieldElement={fieldEl}
+  {variant}
+  {size}
+  {disabled}
+  {placeholder}
+  {icon}
+  {label}
+  {aside}
+  {error}
+  {description}
+  {id}
+  {required}
+  class={cls}
+  role="combobox"
+  aria-autocomplete="list"
+  aria-expanded={canOpen}
+  aria-controls={listId}
+  aria-activedescendant={canOpen && highlight >= 0 ? optId(highlight) : undefined}
+  autocomplete="off"
+  {onkeydown}
+  onfocus={() => (open = true)}
+  onblur={() => (open = false)}
+  oninput={() => {
+    open = true;
+    highlight = -1;
+  }}
+>
+  {#snippet actions()}
+    <span
+      class="inline-flex items-center justify-center opacity-60 transition-transform duration-150 {canOpen
+        ? 'rotate-180'
+        : ''} [&_svg]:w-4 [&_svg]:h-4"
+      aria-hidden="true"
+    >
+      <IconChevronDown />
+    </span>
+  {/snippet}
+</Input>
+
+<Popup anchor={fieldEl} open={canOpen} side="bottom" align="start" matchWidth lightDismiss={false}>
+  <ul
+    id={listId}
+    role="listbox"
+    class="max-h-64 overflow-y-auto rounded-md border shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:var(--ui-border-color)] py-1"
+  >
+    {#each filtered as opt, i (opt + i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <li
+        id={optId(i)}
+        role="option"
+        aria-selected={i === highlight}
+        class="cursor-pointer px-3 py-1.5 text-sm {i === highlight
+          ? '[background-color:var(--ui-color-hover)]'
+          : ''} hover:[background-color:var(--ui-color-hover)]"
+        onpointerdown={(e) => {
+          e.preventDefault(); // keep input focused so the click lands before blur closes the list
+          choose(opt);
+        }}
+        onpointerenter={() => (highlight = i)}
+      >
+        {opt}
+      </li>
+    {/each}
+  </ul>
+</Popup>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import type { Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    value?: string;
+    options?: string[];
+    suggest?: (query: string) => Promise<string[]>;
+    minChars?: number;
+    debounceMs?: number;
+    maxResults?: number;
+    onselect?: (value: string) => void;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    placeholder?: string;
+    icon?: Snippet;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+};
+declare const Combobox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

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

@@ -0,0 +1 @@
+export { default as Combobox } from "./Combobox.svelte";

package/dist/components/Combobox/index.js

@@ -0,0 +1 @@
+export { default as Combobox } from "./Combobox.svelte";

package/dist/components/DateRangePicker/DateRangePicker.svelte

@@ -0,0 +1,157 @@
+<!--
+/**
+ * DateRangePicker — a start–end range picker with a presets rail. Composes the existing `Calendar`
+ * (mode="range") inside an `Input`-framed trigger + `Popup`, exposing ergonomic bind:start / bind:end
+ * (ISO). See DateRangePicker.spec.md.
+ */
+-->
+<script lang="ts" module>
+  export type RangePreset = { label: string; start: string; end: string };
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Input from "../Input.svelte";
+  import Popup from "../Popup.svelte";
+  import Button from "../Button.svelte";
+  import Calendar from "../Calendar.svelte";
+  import IconCalendar from "~icons/mdi/calendar-outline";
+  import type { Variant } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import type { Responsive } from "../../types/responsive.js";
+
+  // Local ISO (avoids the UTC shift of toISOString near midnight).
+  const iso = (d: Date) =>
+    `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  function defaultPresets(): RangePreset[] {
+    const t = new Date();
+    t.setHours(0, 0, 0, 0);
+    const shift = (n: number) => {
+      const d = new Date(t);
+      d.setDate(d.getDate() + n);
+      return iso(d);
+    };
+    const today = iso(t);
+    const monthStart = iso(new Date(t.getFullYear(), t.getMonth(), 1));
+    return [
+      { label: "Today", start: today, end: today },
+      { label: "Yesterday", start: shift(-1), end: shift(-1) },
+      { label: "Last 7 days", start: shift(-6), end: today },
+      { label: "Last 30 days", start: shift(-29), end: today },
+      { label: "This month", start: monthStart, end: today },
+    ];
+  }
+
+  let {
+    start = $bindable(""),
+    end = $bindable(""),
+    min,
+    max,
+    presets,
+    variant = "secondary",
+    size = "md",
+    disabled = false,
+    placeholder = "Select dates",
+    format,
+    label = null,
+    aside,
+    error = null,
+    description = null,
+    id,
+    required = false,
+    class: cls = "",
+  }: {
+    start?: string;
+    end?: string;
+    min?: string;
+    max?: string;
+    presets?: RangePreset[];
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    placeholder?: string;
+    format?: (iso: string) => string;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+  } = $props();
+
+  const rail = $derived(presets ?? defaultPresets());
+  let open = $state(false);
+  let fieldEl = $state<HTMLDivElement>();
+
+  const fmt = (i: string): string => {
+    if (format) return format(i);
+    const [y, m, d] = i.split("-").map(Number);
+    return new Date(y, m - 1, d).toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+  const display = $derived(
+    start && end
+      ? `${fmt(start)} – ${fmt(end)}`
+      : start
+        ? `${fmt(start)} – …`
+        : "",
+  );
+
+  function applyPreset(p: RangePreset) {
+    start = p.start;
+    end = p.end;
+    open = false;
+  }
+</script>
+
+<Input
+  value={display}
+  readonly
+  {variant}
+  {size}
+  {disabled}
+  {placeholder}
+  {label}
+  {aside}
+  {error}
+  {description}
+  {id}
+  {required}
+  class={cls}
+  icon={calIcon}
+  bind:fieldElement={fieldEl}
+  onclick={() => (disabled ? null : (open = !open))}
+/>
+
+{#snippet calIcon()}<IconCalendar />{/snippet}
+
+<Popup anchor={fieldEl} bind:open side="bottom" align="start" lightDismiss>
+  <div
+    class="flex overflow-hidden rounded-md border shadow-lg [background-color:var(--ui-color-background)] [border-color:var(--ui-border-color)]"
+  >
+    {#if rail.length}
+      <div class="flex flex-col gap-0.5 border-r p-2 [border-color:var(--ui-border-color)]">
+        {#each rail as p (p.label)}
+          <Button text={p.label} variant="ghost" size="sm" onclick={() => applyPreset(p)} />
+        {/each}
+      </div>
+    {/if}
+    <div class="p-2">
+      <Calendar
+        mode="range"
+        bind:start
+        bind:end
+        {min}
+        {max}
+        {variant}
+        onrange={(r) => {
+          if (r.start && r.end) open = false;
+        }}
+      />
+    </div>
+  </div>
+</Popup>

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

@@ -0,0 +1,31 @@
+export type RangePreset = {
+    label: string;
+    start: string;
+    end: string;
+};
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import type { Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    start?: string;
+    end?: string;
+    min?: string;
+    max?: string;
+    presets?: RangePreset[];
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    placeholder?: string;
+    format?: (iso: string) => string;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+};
+declare const DateRangePicker: import("svelte").Component<$$ComponentProps, {}, "start" | "end">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from "./DateRangePicker.svelte";
+export type { RangePreset } from "./DateRangePicker.svelte";

package/dist/components/DateRangePicker/index.js

@@ -0,0 +1 @@
+export { default as DateRangePicker } from "./DateRangePicker.svelte";

package/dist/components/FileUpload/FileUpload.svelte

@@ -0,0 +1,212 @@
+<!--
+/**
+ * FileUpload — a drag-and-drop + click file field. A dropzone that accepts dropped files or opens the
+ * native picker, then lists them with size, an image thumbnail, a remove ×, and an optional Progress
+ * bar (driven by the consumer's upload). Manages selection (bind:files); the upload is the consumer's.
+ * Wears FieldChrome; composes Button + Progress. See FileUpload.spec.md.
+ */
+-->
+<script lang="ts">
+  import { onDestroy, untrack } from "svelte";
+  import type { Snippet } from "svelte";
+  import FieldChrome, { nextFieldId } from "../FieldChrome.svelte";
+  import Button from "../Button.svelte";
+  import Progress from "../Progress/Progress.svelte";
+  import IconUpload from "~icons/mdi/cloud-upload-outline";
+  import IconFile from "~icons/mdi/file-outline";
+  import IconClose from "~icons/mdi/close";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    files = $bindable([]),
+    accept,
+    multiple = false,
+    maxSize,
+    progress,
+    disabled = false,
+    onfiles,
+    variant = "primary",
+    size = "md",
+    label = null,
+    aside,
+    error = null,
+    description = null,
+    id,
+    required = false,
+    class: cls = "",
+  }: {
+    files?: File[];
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    progress?: Record<string, number>;
+    disabled?: boolean;
+    onfiles?: (files: File[]) => void;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+  } = $props();
+
+  const controlId = id ?? nextFieldId();
+  let inputEl = $state<HTMLInputElement>();
+  let dragActive = $state(false);
+  let reject = $state("");
+
+  const humanSize = (n: number): string =>
+    n < 1024
+      ? `${n} B`
+      : n < 1024 * 1024
+        ? `${(n / 1024).toFixed(1)} KB`
+        : `${(n / 1024 / 1024).toFixed(1)} MB`;
+
+  // Image thumbnails via object URLs, revoked when a file leaves / on unmount.
+  let urls = $state<Map<File, string>>(new Map());
+  // Depend ONLY on `files`; read/write `urls` untracked so the effect doesn't retrigger itself.
+  $effect(() => {
+    const cur = files;
+    untrack(() => {
+      const prev = urls;
+      const next = new Map<File, string>();
+      for (const f of cur) {
+        if (f.type.startsWith("image/")) next.set(f, prev.get(f) ?? URL.createObjectURL(f));
+      }
+      for (const [f, u] of prev) if (!next.has(f)) URL.revokeObjectURL(u);
+      urls = next;
+    });
+  });
+  onDestroy(() => {
+    for (const u of urls.values()) URL.revokeObjectURL(u);
+  });
+
+  function add(list: FileList | File[]) {
+    if (disabled) return;
+    reject = "";
+    let out = multiple ? [...files] : [];
+    for (const f of Array.from(list)) {
+      if (maxSize != null && f.size > maxSize) {
+        reject = `"${f.name}" exceeds ${humanSize(maxSize)}.`;
+        continue;
+      }
+      if (out.some((e) => e.name === f.name && e.size === f.size)) continue;
+      out.push(f);
+      if (!multiple) break;
+    }
+    files = out;
+    onfiles?.(files);
+  }
+  function removeAt(i: number) {
+    files = files.filter((_, j) => j !== i);
+    onfiles?.(files);
+  }
+  function openPicker() {
+    if (!disabled) inputEl?.click();
+  }
+
+  const padMap: Record<Size, string> = { sm: "p-4 text-xs", md: "p-6 text-sm", lg: "p-8 text-base" };
+</script>
+
+<FieldChrome {label} {aside} error={error ?? (reject || null)} {description} {required} {controlId} {size} class={cls}>
+  {#snippet control({ describedBy })}
+    <div class="flex flex-col gap-2">
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <div
+        role="button"
+        tabindex={disabled ? -1 : 0}
+        aria-label="Upload files: drag and drop or activate to browse"
+        aria-describedby={describedBy}
+        class="flex flex-col items-center justify-center gap-2 rounded-[var(--ui-border-radius)] border-2 border-dashed text-center transition-colors {responsiveClasses(
+          size,
+          padMap,
+        )} {disabled
+          ? 'opacity-50 pointer-events-none'
+          : 'cursor-pointer hover:[background-color:var(--ui-color-surface)]'}"
+        style="border-color: {dragActive
+          ? `var(${variantToken[variant]})`
+          : 'var(--ui-border-color)'};{dragActive ? ' background-color: var(--ui-color-surface);' : ''}"
+        ondragover={(e) => {
+          e.preventDefault();
+          if (!disabled) dragActive = true;
+        }}
+        ondragleave={() => (dragActive = false)}
+        ondrop={(e) => {
+          e.preventDefault();
+          dragActive = false;
+          if (e.dataTransfer?.files.length) add(e.dataTransfer.files);
+        }}
+        onclick={openPicker}
+        onkeydown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        }}
+      >
+        <span class="[&_svg]:w-8 [&_svg]:h-8 [color:var(--ui-color-secondary)]"><IconUpload /></span>
+        <div>
+          <span class="font-medium [color:var(--ui-color-text)]">Drop files here</span>
+          <span class="[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]"> or</span>
+        </div>
+        <Button text="Browse" {variant} {size} onclick={openPicker} />
+      </div>
+
+      <input
+        bind:this={inputEl}
+        id={controlId}
+        type="file"
+        {accept}
+        {multiple}
+        {disabled}
+        class="sr-only"
+        onchange={(e) => {
+          const t = e.currentTarget;
+          if (t.files?.length) add(t.files);
+          t.value = ""; // allow re-selecting the same file
+        }}
+      />
+
+      {#if files.length}
+        <ul class="flex flex-col gap-2">
+          {#each files as file, i (file.name + file.size)}
+            <li
+              class="flex items-center gap-3 rounded-[var(--ui-border-radius)] border p-2 [border-color:var(--ui-border-color)]"
+            >
+              {#if urls.get(file)}
+                <img src={urls.get(file)} alt={file.name} class="w-10 h-10 rounded object-cover shrink-0" />
+              {:else}
+                <span class="inline-flex w-10 h-10 items-center justify-center shrink-0 [&_svg]:w-6 [&_svg]:h-6 [color:var(--ui-color-secondary)]"><IconFile /></span>
+              {/if}
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm [color:var(--ui-color-text)]">{file.name}</div>
+                <div class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_55%,transparent)]">
+                  {humanSize(file.size)}
+                </div>
+                {#if progress && progress[file.name] != null}
+                  <div class="mt-1"><Progress value={progress[file.name]} {variant} size="sm" /></div>
+                {/if}
+              </div>
+              <Button
+                title="Remove {file.name}"
+                aria-label="Remove {file.name}"
+                variant="ghost"
+                size="sm"
+                icon={removeIcon}
+                onclick={() => removeAt(i)}
+              />
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/snippet}
+</FieldChrome>
+
+{#snippet removeIcon()}<IconClose />{/snippet}