svelte-comp 1.2.7 → 1.3.5

package/dist/lib/DatePicker.svelte

@@ -37,10 +37,10 @@
    * @note Preview card includes `aria-live="polite"` to announce updated dates.
    */
   import type { HTMLAttributes } from "svelte/elements";
-  import Button from "./Button.svelte";
-  import Calendar from "./Calendar.svelte";
-  import { cx, formatDate, uid } from "../utils";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Button from "./Button.svelte";
+  import Calendar from "./Calendar.svelte";
+  import { cx, formatDate, uid } from "../utils";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     value?: string | null;
@@ -58,7 +58,7 @@
 
   let {
     value = $bindable<string | null>(null),
-    min = "1926-01-01",
+    min = "1926-01-01",
     max,
     label,
     placeholder,
@@ -71,166 +71,166 @@
     ...rest
   }: Props = $props();
 
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("datePicker", langKey));
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("datePicker", langKey));
 
   const labelFinal = $derived(label ?? L.text);
   const placeholderFinal = $derived(placeholder ?? L.placeholder);
 
-  const base = "inline-block w-full";
-  const pickerClass = $derived(cx(base, externalClass));
-
-  const hasValue = $derived(Boolean(value));
-  const formattedValue = $derived(formatDate(value, locale, formatOptions));
-
-  let open = $state(false);
-  const panelId = uid("calendar-");
-  const panelWidth = 240;
-
-  let triggerEl = $state<HTMLDivElement | null>(null);
-  let panelEl = $state<HTMLDivElement | null>(null);
-  let panelTop = $state(0);
-  let panelLeft = $state(0);
-
-  const panelStyle = $derived(
-    `position:fixed; top:${panelTop}px; left:${panelLeft}px; width:${panelWidth}px;`
-  );
-
-  function togglePanel() {
-    if (disabled) return;
-    open = !open;
-  }
-
-  function handleSelect(nextValue: string | null) {
-    value = nextValue;
-    onChange?.(nextValue);
-    open = false;
-  }
-
-  function clearSelection() {
-    if (!clearable) return;
-    value = null;
-    onChange?.(null);
-  }
-
-  $effect(() => {
-    const currentTrigger = triggerEl;
-    const currentPanel = panelEl;
-    if (!open || !currentTrigger) return;
-
-    const updatePosition = () => {
-      const triggerRect = currentTrigger.getBoundingClientRect();
-      const panelHeight =
-        currentPanel?.getBoundingClientRect().height ?? 0;
-      const spaceBelow = window.innerHeight - triggerRect.bottom;
-      const spaceAbove = triggerRect.top;
-      const shouldFlip = spaceBelow < panelHeight && spaceAbove > spaceBelow;
-
-      panelTop = shouldFlip
-        ? Math.max(0, triggerRect.top - panelHeight - 8)
-        : triggerRect.bottom + 8;
-
-      const viewportLeft = window.scrollX;
-      const viewportRight = window.scrollX + window.innerWidth;
-      const targetLeft = triggerRect.left + window.scrollX;
-      const maxLeft = viewportRight - panelWidth;
-      panelLeft = Math.max(viewportLeft, Math.min(targetLeft, maxLeft));
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        open = false;
-      }
-    };
-
-    const onClickOutside = (event: MouseEvent) => {
-      if (
-        currentTrigger &&
-        currentPanel &&
-        !currentTrigger.contains(event.target as Node) &&
-        !currentPanel.contains(event.target as Node)
-      ) {
-        open = false;
-      }
-    };
-
-    queueMicrotask(updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    window.addEventListener("keydown", onKeyDown);
-    document.addEventListener("mousedown", onClickOutside);
-
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onClickOutside);
-    };
-  });
-</script>
-
-<div class={pickerClass} {...rest}>
-  <div class="text-md font-medium mb-2 [color:var(--color-text-default)]">
-    {labelFinal}:
-  </div>
-  <div class="inline-flex flex-wrap items-center gap-x-3 gap-y-2">
-    <div bind:this={triggerEl}>
-      <Button
-        onClick={togglePanel}
-        {disabled}
-        sz="xs"
-        aria-expanded={open}
-        aria-controls={open ? panelId : undefined}
-      >
-        {L.date}
-      </Button>
-    </div>
-
-    {#if clearable}
-      <Button
-        onClick={clearSelection}
-        variant="danger"
-        disabled={!hasValue || disabled}
-        sz="xs"
-      >
-        {L.clear}
-      </Button>
-    {/if}
-
-    {#if open}
-      <div
-        role="presentation"
-        tabindex="-1"
-        class="fixed inset-0 z-[var(--z-overlay)]"
-      ></div>
-
-      <div
-        bind:this={panelEl}
-        id={panelId}
-        role="dialog"
-        aria-label={labelFinal}
-        class="z-[var(--z-modal)] p-3 border border-[var(--border-color-default)] rounded-[var(--radius-md)] bg-[var(--color-bg-surface)] shadow-[0_2px_6px_var(--shadow-color)]"
-        style={panelStyle}
-      >
-        <Calendar
-          value={value}
-          {min}
-          {max}
-          {locale}
-          onChange={handleSelect}
-          showOutsideDays
-          class="max-w-full"
-        />
-      </div>
-    {/if}
-  </div>
-
-  <div
-    class="mt-3 p-4 bg-[var(--color-bg-surface)] text-center"
-    aria-live="polite"
-  >
+  const base = "inline-block w-full";
+  const pickerClass = $derived(cx(base, externalClass));
+
+  const hasValue = $derived(Boolean(value));
+  const formattedValue = $derived(formatDate(value, locale, formatOptions));
+
+  let open = $state(false);
+  const panelId = uid("calendar-");
+  const panelSize = 240;
+
+  let triggerEl = $state<HTMLDivElement | null>(null);
+  let panelEl = $state<HTMLDivElement | null>(null);
+  let panelTop = $state(0);
+  let panelLeft = $state(0);
+
+  const panelStyle = $derived(
+    `position:fixed; top:${panelTop}px; left:${panelLeft}px; width:${panelSize}px; height:${panelSize}px;`
+  );
+
+  function togglePanel() {
+    if (disabled) return;
+    open = !open;
+  }
+
+  function handleSelect(nextValue: string | null) {
+    value = nextValue;
+    onChange?.(nextValue);
+    open = false;
+  }
+
+  function clearSelection() {
+    if (!clearable) return;
+    value = null;
+    onChange?.(null);
+  }
+
+  $effect(() => {
+    const currentTrigger = triggerEl;
+    const currentPanel = panelEl;
+    if (!open || !currentTrigger) return;
+
+    const updatePosition = () => {
+      const triggerRect = currentTrigger.getBoundingClientRect();
+      const panelHeight =
+        currentPanel?.getBoundingClientRect().height ?? 0;
+      const spaceBelow = window.innerHeight - triggerRect.bottom;
+      const spaceAbove = triggerRect.top;
+      const shouldFlip = spaceBelow < panelHeight && spaceAbove > spaceBelow;
+
+      panelTop = shouldFlip
+        ? Math.max(0, triggerRect.top - panelHeight - 8)
+        : triggerRect.bottom + 8;
+
+      const viewportLeft = window.scrollX;
+      const viewportRight = window.scrollX + window.innerWidth;
+      const targetLeft = triggerRect.left + window.scrollX;
+      const maxLeft = viewportRight - panelSize;
+      panelLeft = Math.max(viewportLeft, Math.min(targetLeft, maxLeft));
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        open = false;
+      }
+    };
+
+    const onClickOutside = (event: MouseEvent) => {
+      if (
+        currentTrigger &&
+        currentPanel &&
+        !currentTrigger.contains(event.target as Node) &&
+        !currentPanel.contains(event.target as Node)
+      ) {
+        open = false;
+      }
+    };
+
+    queueMicrotask(updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onClickOutside);
+
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onClickOutside);
+    };
+  });
+</script>
+
+<div class={pickerClass} {...rest}>
+  <div class="text-md font-medium mb-2 [color:var(--color-text-default)]">
+    {labelFinal}:
+  </div>
+  <div class="inline-flex flex-wrap items-center gap-x-3 gap-y-2">
+    <div bind:this={triggerEl}>
+      <Button
+        onClick={togglePanel}
+        {disabled}
+        sz="xs"
+        aria-expanded={open}
+        aria-controls={open ? panelId : undefined}
+      >
+        {L.date}
+      </Button>
+    </div>
+
+    {#if clearable}
+      <Button
+        onClick={clearSelection}
+        variant="danger"
+        disabled={!hasValue || disabled}
+        sz="xs"
+      >
+        {L.clear}
+      </Button>
+    {/if}
+
+    {#if open}
+      <div
+        role="presentation"
+        tabindex="-1"
+        class="fixed inset-0 z-[var(--z-overlay)]"
+      ></div>
+
+      <div
+        bind:this={panelEl}
+        id={panelId}
+        role="dialog"
+        aria-label={labelFinal}
+        class="z-[var(--z-modal)] p-3 border border-[var(--border-color-default)] rounded-[var(--radius-md)] bg-[var(--color-bg-surface)] shadow-[0_2px_6px_var(--shadow-color)]"
+        style={panelStyle}
+      >
+        <Calendar
+          value={value}
+          {min}
+          {max}
+          {locale}
+          onChange={handleSelect}
+          showOutsideDays
+          class="w-full h-full"
+        />
+      </div>
+    {/if}
+  </div>
+
+  <div
+    class="mt-3 p-4 bg-[var(--color-bg-surface)] text-center"
+    aria-live="polite"
+  >
     <p class="text-xs uppercase tracking-wide [color:var(--color-text-muted)]">
       {L.selectedDate}
     </p>

package/dist/lib/Dialog.svelte

@@ -42,10 +42,10 @@
    * @note `sz` adjusts both dialog padding and text sizes to match the rest of the system tokens.
    */
   import type { Snippet } from "svelte";
-  import Button from "./Button.svelte";
-  import { type SizeKey, TEXT } from "./types";
-  import { cx, focusFirstInteractive, trapFocus } from "../utils";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Button from "./Button.svelte";
+  import { type SizeKey, TEXT } from "./types";
+  import { cx, focusFirstInteractive, trapFocus } from "../utils";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = {
     open?: boolean;
@@ -73,9 +73,9 @@
     children,
   }: Props = $props();
 
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("dialog", langKey));
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("dialog", langKey));
 
   let panelEl = $state<HTMLDivElement | null>(null);
   let releaseFocus: (() => void) | null = null;
@@ -98,7 +98,7 @@
   }
 
   const panelBase =
-    "fusion-dialog bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-lg min-w-80 max-w-md w-full border border-[var(--border-color-default)]";
+    "fusion-dialog bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-[0_8px_24px_var(--shadow-color)] min-w-0 max-w-[min(100%,28rem)] max-h-[calc(100svh-var(--spacing-lg)*2)] overflow-auto w-full border border-[var(--border-color-default)]";
 
   const paddingBySize: Record<SizeKey, string> = {
     xs: "p-[var(--spacing-sm)]",
@@ -164,7 +164,7 @@
 {#if open}
   {#if modal}
     <div
-      class="fixed inset-0 z-[var(--z-modal)] bg-oklch(0_0_0/var(--opacity-overlay)) flex items-center justify-center p-4"
+      class="fixed inset-0 z-[var(--z-modal)] bg-[oklch(0_0_0/var(--opacity-overlay))] flex items-center justify-center p-[var(--spacing-md)]"
       role="presentation"
       tabindex="-1"
       onkeydown={handleKeydown}
@@ -195,7 +195,7 @@
     </div>
   {:else}
     <div
-      class="fixed top-4 right-4 z-[var(--z-modal)]"
+      class="fixed top-[var(--spacing-md)] right-[var(--spacing-md)] z-[var(--z-modal)] max-w-[calc(100vw-var(--spacing-md)*2)]"
       role="dialog"
       aria-modal="false"
       aria-label={title}

package/dist/lib/Field.svelte

@@ -86,7 +86,7 @@
   }: Props = $props();
 
   const base =
-    "w-full outline-none transition-colors duration-[var(--transition-fast)] ease-[var(--timing-default)] box-border rounded-[var(--radius-md)] border focus:border-[var(--border-color-focus)] focus:ring-2 focus:ring-[var(--border-color-focus)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
+    "w-full outline-none transition-colors duration-[var(--transition-fast)] ease-[var(--timing-default)] box-border rounded-[var(--radius-md)] border focus:border-[var(--border-color-focus)] focus:ring-2 focus:ring-[var(--border-color-focus)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed [@media(pointer:coarse)]:min-h-11";
 
   const sizes: Record<SizeKey, string> = {
     xs: "px-2 h-6",

package/dist/lib/FilePicker.svelte

@@ -18,6 +18,10 @@
    * @prop clearable {boolean} - Shows a clear button to reset selection
    * @default true
    *
+   * @prop maxBytes {number} - Maximum allowed file size in bytes
+   *
+   * @prop onError {(error: string) => void} - Fired when selected files are rejected
+   *
    * @prop placeholder {string} - Placeholder text for the drop zone
    *
    * @prop value {FileList | null} - Controlled selected files (bindable)
@@ -25,21 +29,19 @@
    *
    * @prop onFilesSelected {(files: FileList | null) => void} - Fired when files are chosen
    *
-   * @prop onError {(error: string) => void} - Fired on validation errors
-   *
    * @prop class {string} - Additional classes for the wrapper
    * @default ""
    *
    * @note The entire area is clickable and supports drag-and-drop.
    * @note After a selection, the underlying input resets its value, so choosing the same file twice still triggers updates.
-   * @note `accept` does not apply to dropped files, only to the picker UI; validate files inside `onFilesSelected`.
+   * @note `accept` and `maxBytes` are enforced for both input and dropped files.
    * @note When `clearable=true`, the user can clear selected files and the callback receives `null`.
    * @note When `disabled=true`, clicks, drag events, focus, and keyboard input are blocked.
    */
   import type { HTMLAttributes } from "svelte/elements";
-  import Button from "./Button.svelte";
-  import { cx, formatFileSize } from "../utils";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Button from "./Button.svelte";
+  import { cx, formatFileSize } from "../utils";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     accept?: string;
@@ -49,79 +51,74 @@
     clearable?: boolean;
     placeholder?: string;
     value?: FileList | null;
+    maxBytes?: number;
     onFilesSelected?: (files: FileList | null) => void;
     onError?: (error: string) => void;
     class?: string;
   };
 
-  let {
-    accept = "*/*",
-    multiple = false,
-    label,
-    disabled = false,
-    clearable = true,
-    placeholder,
-    value = $bindable<FileList | null>(null),
-    onFilesSelected,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("filePicker", langKey));
+  let {
+    accept = "*/*",
+    multiple = false,
+    label,
+    disabled = false,
+    clearable = true,
+    placeholder,
+    value = $bindable<FileList | null>(null),
+    maxBytes = Number.POSITIVE_INFINITY,
+    onFilesSelected,
+    onError,
+    class: externalClass = "",
+    ...rest
+  }: Props = $props();
+
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("filePicker", langKey));
 
   const labelFinal = $derived(label ?? L.text);
   const placeholderFinal = $derived(placeholder ?? L.placeholder);
 
-  let inputEl: HTMLInputElement;
-  let isDragOver = $state(false);
+  let inputEl: HTMLInputElement;
+  let isDragOver = $state(false);
 
   const base = "inline-block w-full";
   const pickerClass = $derived(cx(base, externalClass));
 
-  const hasValue = $derived(Boolean(value && value.length > 0));
-  const fileNames = $derived(
-    value
-      ? Array.from(value)
-          .map((file) => file.name)
-          .join(", ")
-      : ""
-  );
-  const totalBytes = $derived(
-    value ? Array.from(value).reduce((acc, file) => acc + file.size, 0) : 0
-  );
+  const hasValue = $derived(Boolean(value && value.length > 0));
+  const fileNames = $derived(
+    value
+      ? Array.from(value)
+          .map((file) => file.name)
+          .join(", ")
+      : ""
+  );
+  const totalBytes = $derived(
+    value ? Array.from(value).reduce((acc, file) => acc + file.size, 0) : 0
+  );
 
   function handleButtonClick() {
     if (disabled) return;
     inputEl?.click();
   }
 
-  function handleFileChange(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const files = target.files;
-    value = files;
-    if (files && files.length > 0) {
-      onFilesSelected?.(files);
-    }
-    if (inputEl) {
-      inputEl.value = "";
-    }
-  }
+  function handleFileChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    selectFiles(target.files);
+    if (inputEl) {
+      inputEl.value = "";
+    }
+  }
 
   function handleDrop(event: DragEvent) {
     event.preventDefault();
     isDragOver = false;
-    if (disabled) return;
-    const files = event.dataTransfer?.files;
-    value = files || null;
-    if (files && files.length > 0) {
-      onFilesSelected?.(files);
-    }
-    if (inputEl) {
-      inputEl.value = "";
-    }
-  }
+    if (disabled) return;
+    selectFiles(event.dataTransfer?.files ?? null);
+    if (inputEl) {
+      inputEl.value = "";
+    }
+  }
 
   function handleDragOver(event: DragEvent) {
     event.preventDefault();
@@ -147,14 +144,70 @@
     }
   }
 
-  function clearSelection() {
-    if (!clearable) return;
-    value = null;
-    if (inputEl) {
-      inputEl.value = "";
-    }
-    onFilesSelected?.(null);
-  }
+  function clearSelection() {
+    if (!clearable) return;
+    value = null;
+    if (inputEl) {
+      inputEl.value = "";
+    }
+    onFilesSelected?.(null);
+  }
+
+  function selectFiles(files: FileList | null) {
+    const acceptedFiles = filterFiles(files);
+    value = acceptedFiles;
+    if (acceptedFiles && acceptedFiles.length > 0) {
+      onFilesSelected?.(acceptedFiles);
+    }
+  }
+
+  function filterFiles(files: FileList | null) {
+    if (!files || files.length === 0) return null;
+
+    const selected = Array.from(files);
+    const accepted = selected.filter(isAllowedFile);
+
+    if (accepted.length !== selected.length) {
+      onError?.("Some files were rejected by type or size constraints.");
+    }
+
+    if (accepted.length === 0) return null;
+    if (accepted.length === selected.length) return files;
+
+    return toFileList(accepted);
+  }
+
+  function isAllowedFile(file: File) {
+    if (Number.isFinite(maxBytes) && file.size > maxBytes) return false;
+    return matchesAccept(file, accept);
+  }
+
+  function matchesAccept(file: File, acceptValue: string) {
+    const rules = acceptValue
+      .split(",")
+      .map((rule) => rule.trim().toLowerCase())
+      .filter(Boolean);
+
+    if (rules.length === 0 || rules.includes("*/*")) return true;
+
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+
+    return rules.some((rule) => {
+      if (rule.startsWith(".")) return fileName.endsWith(rule);
+      if (rule.endsWith("/*")) return fileType.startsWith(rule.slice(0, -1));
+      return fileType === rule;
+    });
+  }
+
+  function toFileList(files: File[]) {
+    if (typeof DataTransfer === "undefined") return null;
+    const transfer = new DataTransfer();
+    for (const file of files) {
+      transfer.items.add(file);
+    }
+    return transfer.files;
+  }
 </script>
 
 <div class={pickerClass} {...rest}>
@@ -188,7 +241,7 @@
     class="mt-2 p-4 border-2 border-dashed rounded-[var(--radius-md)] text-center transition-colors duration-200"
     class:border-[var(--color-primary)]={isDragOver && !disabled}
     class:border-[var(--border-color-default)]={!isDragOver || disabled}
-    class:bg-[var(--color-bg-hover)]={isDragOver && !disabled}
+    class:bg-[var(--color-bg-hover)]={isDragOver && !disabled}
     class:cursor-pointer={!disabled}
     class:opacity-[var(--opacity-disabled)]={disabled}
     class:cursor-not-allowed={disabled}
@@ -229,14 +282,14 @@
         {placeholderFinal}
       {/if}
     </p>
-    {#if hasValue && value}
-      <p class="text-sm mt-1 [color:var(--color-text-muted)]">
-        {L.fileCount.replace("{n}", String(value.length))}
-
-        {#if multiple && value.length > 1}
-          - {L.totalSize}: {formatFileSize(totalBytes)}
-        {/if}
-      </p>
-    {/if}
+    {#if hasValue && value}
+      <p class="text-sm mt-1 [color:var(--color-text-muted)]">
+        {L.fileCount.replace("{n}", String(value.length))}
+
+        {#if multiple && value.length > 1}
+          - {L.totalSize}: {formatFileSize(totalBytes)}
+        {/if}
+      </p>
+    {/if}
   </div>
 </div>