sv5ui 1.6.0 → 1.7.0

package/dist/Carousel/carousel.variants.js

@@ -0,0 +1,88 @@
+import { tv } from 'tailwind-variants';
+export const carouselVariants = tv({
+    slots: {
+        root: 'relative',
+        viewport: 'overflow-hidden',
+        container: 'flex',
+        slide: 'shrink-0 grow-0 basis-[calc(100%/var(--sv-slides))]',
+        arrow: 'absolute z-10 shadow-md',
+        arrowPrev: '',
+        arrowNext: '',
+        dots: 'flex items-center justify-center gap-2',
+        dot: [
+            'rounded-full bg-on-surface/30 transition-all',
+            'hover:bg-on-surface/50',
+            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+            'data-[selected]:bg-primary'
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                viewport: 'w-full',
+                container: 'flex-row touch-pan-y',
+                slide: 'min-w-0 h-auto',
+                dots: 'flex-row mt-4',
+                arrowPrev: 'left-2 top-1/2 -translate-y-1/2',
+                arrowNext: 'right-2 top-1/2 -translate-y-1/2'
+            },
+            vertical: {
+                root: 'h-full',
+                viewport: 'h-full w-full',
+                container: 'flex-col h-full touch-pan-x',
+                slide: 'min-h-0 w-auto',
+                dots: 'flex-col absolute right-2 top-1/2 -translate-y-1/2',
+                arrowPrev: 'top-2 left-1/2 -translate-x-1/2',
+                arrowNext: 'bottom-2 left-1/2 -translate-x-1/2'
+            }
+        },
+        size: {
+            xs: { dot: 'size-1.5' },
+            sm: { dot: 'size-2' },
+            md: { dot: 'size-2.5' },
+            lg: { dot: 'size-3' },
+            xl: { dot: 'size-3.5' }
+        },
+        color: {
+            primary: { dot: 'data-[selected]:bg-primary focus-visible:outline-primary' },
+            secondary: { dot: 'data-[selected]:bg-secondary focus-visible:outline-secondary' },
+            tertiary: { dot: 'data-[selected]:bg-tertiary focus-visible:outline-tertiary' },
+            success: { dot: 'data-[selected]:bg-success focus-visible:outline-success' },
+            warning: { dot: 'data-[selected]:bg-warning focus-visible:outline-warning' },
+            error: { dot: 'data-[selected]:bg-error focus-visible:outline-error' },
+            info: { dot: 'data-[selected]:bg-info focus-visible:outline-info' },
+            surface: {
+                dot: 'data-[selected]:bg-on-surface focus-visible:outline-on-surface'
+            }
+        },
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: '',
+            ghost: ''
+        }
+    },
+    compoundVariants: [
+        { orientation: 'horizontal', size: 'xs', class: { dot: 'data-[selected]:w-4' } },
+        { orientation: 'horizontal', size: 'sm', class: { dot: 'data-[selected]:w-5' } },
+        { orientation: 'horizontal', size: 'md', class: { dot: 'data-[selected]:w-6' } },
+        { orientation: 'horizontal', size: 'lg', class: { dot: 'data-[selected]:w-7' } },
+        { orientation: 'horizontal', size: 'xl', class: { dot: 'data-[selected]:w-8' } },
+        { orientation: 'vertical', size: 'xs', class: { dot: 'data-[selected]:h-4' } },
+        { orientation: 'vertical', size: 'sm', class: { dot: 'data-[selected]:h-5' } },
+        { orientation: 'vertical', size: 'md', class: { dot: 'data-[selected]:h-6' } },
+        { orientation: 'vertical', size: 'lg', class: { dot: 'data-[selected]:h-7' } },
+        { orientation: 'vertical', size: 'xl', class: { dot: 'data-[selected]:h-8' } }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        color: 'primary',
+        variant: 'soft'
+    }
+});
+export const carouselDefaults = {
+    defaultVariants: carouselVariants.defaultVariants,
+    slots: {}
+};

package/dist/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel.svelte';
+export type { CarouselProps, CarouselApi, CarouselAutoplayOptions, CarouselSlideSlotProps, CarouselDotSlotProps, CarouselArrowSlotProps } from './carousel.types.js';

package/dist/Carousel/index.js

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

package/dist/FileUpload/FileUpload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { FileUploadProps } from './file-upload.types.js'
+    import type { FileUploadProps, FileUploadRejection } from './file-upload.types.js'
 
     export type Props = FileUploadProps
 </script>
@@ -12,6 +12,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Button from '../Button/Button.svelte'
     import Modal from '../Modal/Modal.svelte'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('fileUpload', fileUploadDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -22,6 +23,9 @@
         onValueChange,
         multiple = false,
         accept,
+        maxSize,
+        maxFiles,
+        onReject,
         dropzone = true,
         interactive = true,
         label = 'Drop files here or click to upload',
@@ -39,6 +43,7 @@
         required = false,
         fileIcon = icons.file,
         imagePreview = true,
+        id,
         name,
         leadingSlot,
         labelSlot,
@@ -59,6 +64,9 @@
     let previewOpen = $state(false)
     let previewFile = $state<File | null>(null)
 
+    const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
     // Stable file identity key with separator to avoid collisions
     const fileKey = (f: File) => `${f.name}:${f.size}:${f.lastModified}`
 
@@ -67,8 +75,23 @@
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const urlCache = new Map<string, string>()
 
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedHighlight = $derived(highlight || hasError)
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
     const isDisabled = $derived(disabled || loading)
     const isDragging = $derived(dragCounter > 0)
+    const isFull = $derived(maxFiles !== undefined && value.length >= maxFiles)
     const showFilesInside = $derived(
         layout === 'grid' && !multiple && value.length > 0 && preview && variant === 'area'
     )
@@ -76,13 +99,13 @@
     // Pass booleans directly so compound variants with `false` values match correctly
     const slots = $derived(
         fileUploadVariants({
-            color,
+            color: hasError ? 'error' : color,
             size,
             variant,
             layout,
             dropzone,
             interactive: interactive && !isDisabled,
-            highlight,
+            highlight: resolvedHighlight,
             multiple,
             disabled: isDisabled
         })
@@ -150,17 +173,53 @@
             })
     }
 
+    function validateIngress(file: File): FileUploadRejection['reason'] | null {
+        if (accept && !isFileAccepted(file)) return 'accept'
+        if (maxSize !== undefined && file.size > maxSize) return 'maxSize'
+        return null
+    }
+
+    function applyMaxFiles(candidates: File[]): {
+        accepted: File[]
+        rejected: FileUploadRejection[]
+    } {
+        if (maxFiles === undefined) return { accepted: candidates, rejected: [] }
+        const remaining = Math.max(0, maxFiles - value.length)
+        if (candidates.length <= remaining) return { accepted: candidates, rejected: [] }
+        return {
+            accepted: candidates.slice(0, remaining),
+            rejected: candidates.slice(remaining).map((file) => ({ file, reason: 'maxFiles' }))
+        }
+    }
+
     function addFiles(newFiles: File[]) {
         if (isDisabled) return
-        const filtered = accept ? newFiles.filter(isFileAccepted) : newFiles
-        if (!filtered.length) return
+
+        const rejected: FileUploadRejection[] = []
+        const passed: File[] = []
+        for (const file of newFiles) {
+            const reason = validateIngress(file)
+            if (reason) rejected.push({ file, reason })
+            else passed.push(file)
+        }
+
+        let accepted: File[]
         if (!multiple) {
-            value = [filtered[0]]
+            accepted = passed.slice(0, 1)
         } else {
             const existing = new Set(value.map(fileKey))
-            value = [...value, ...filtered.filter((f) => !existing.has(fileKey(f)))]
+            const deduped = passed.filter((f) => !existing.has(fileKey(f)))
+            const result = applyMaxFiles(deduped)
+            accepted = result.accepted
+            rejected.push(...result.rejected)
         }
-        onValueChange?.(value)
+
+        if (accepted.length) {
+            value = multiple ? [...value, ...accepted] : accepted
+            onValueChange?.(value)
+            emit.onChange()
+        }
+        if (rejected.length) onReject?.(rejected)
     }
 
     function removeFile(index: number) {
@@ -176,6 +235,7 @@
         }
         value = value.filter((_, i) => i !== index)
         onValueChange?.(value)
+        emit.onChange()
     }
 
     export function clearAll() {
@@ -185,6 +245,7 @@
         urlCache.clear()
         value = []
         onValueChange?.(value)
+        emit.onChange()
     }
 
     function handleInputChange(e: Event) {
@@ -254,13 +315,13 @@
     }
 </script>
 
-<div {...restProps} bind:this={ref} class={classes.root}>
+<div {...restProps} bind:this={ref} class={classes.root} data-full={isFull ? '' : undefined}>
     <!-- Hidden file input — uses auto-generated id internally -->
     <input
         bind:this={inputRef}
         type="file"
         id={autoId}
-        {name}
+        name={resolvedName}
         {accept}
         {multiple}
         {required}
@@ -275,18 +336,23 @@
         <!-- Area / Dropzone -->
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
+            id={resolvedId}
             class={classes.base}
             data-dragging={isDragging ? '' : undefined}
             role={interactive ? 'button' : undefined}
             tabindex={interactive && !isDisabled ? 0 : undefined}
             aria-disabled={isDisabled || undefined}
             aria-label={interactive ? label : undefined}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            aria-describedby={ariaDescribedBy}
             onclick={handleAreaClick}
             ondragenter={handleDragEnter}
             ondragover={handleDragOver}
             ondragleave={handleDragLeave}
             ondrop={handleDrop}
             onkeydown={handleKeydown}
+            onfocus={() => emit.onFocus()}
+            onblur={() => emit.onBlur()}
         >
             {#if showFilesInside}
                 <!-- Grid single: file fills the area as overlay -->
@@ -390,6 +456,7 @@
     {:else}
         <!-- Button variant -->
         <Button
+            id={resolvedId}
             {color}
             {size}
             disabled={isDisabled}
@@ -397,7 +464,11 @@
             {loadingIcon}
             leadingIcon={loading ? undefined : icon}
             {label}
+            aria-invalid={resolvedHighlight ? true : undefined}
+            aria-describedby={ariaDescribedBy}
             onclick={handleAreaClick}
+            onfocus={() => emit.onFocus()}
+            onblur={() => emit.onBlur()}
         />
     {/if}
 

package/dist/FileUpload/file-upload.types.d.ts

@@ -2,6 +2,21 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { FileUploadVariantProps, FileUploadSlots } from './file-upload.variants.js';
+/**
+ * Reason a file was rejected by FileUpload.
+ *
+ * - `accept`: file did not match the `accept` MIME/extension filter
+ * - `maxSize`: file exceeded the `maxSize` byte limit
+ * - `maxFiles`: file would have pushed the selection past `maxFiles`
+ */
+export type FileUploadRejectionReason = 'accept' | 'maxSize' | 'maxFiles';
+/**
+ * A single rejected file along with the reason it was rejected.
+ */
+export interface FileUploadRejection {
+    file: File;
+    reason: FileUploadRejectionReason;
+}
 export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'children'> & {
     /**
      * Bindable reference to the root DOM element.
@@ -25,6 +40,30 @@ export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'child
      * Accepted file types as MIME types or extensions (e.g. "image/*,.pdf").
      */
     accept?: string;
+    /**
+     * Maximum allowed size per file, in bytes. Files exceeding this are
+     * rejected and reported through `onReject`.
+     *
+     * @example
+     * ```svelte
+     * <FileUpload maxSize={5 * 1024 * 1024} /> <!-- 5 MB -->
+     * ```
+     */
+    maxSize?: number;
+    /**
+     * Maximum number of files that can be selected. When the current
+     * selection plus the incoming files would exceed this, the excess
+     * files are rejected and reported through `onReject`. The root element
+     * exposes a `data-full` attribute when the limit is reached, so the
+     * upload area can be styled accordingly.
+     */
+    maxFiles?: number;
+    /**
+     * Called when one or more incoming files are rejected by `accept`,
+     * `maxSize`, or `maxFiles`. Receives the full rejection list for a
+     * single user action (one drop or one input change).
+     */
+    onReject?: (rejected: FileUploadRejection[]) => void;
     /**
      * Enable drag-and-drop file upload.
      * @default true

package/dist/FileUpload/index.d.ts

@@ -1,2 +1,2 @@
 export { default as FileUpload } from './FileUpload.svelte';
-export type { FileUploadProps } from './file-upload.types.js';
+export type { FileUploadProps, FileUploadRejection, FileUploadRejectionReason } from './file-upload.types.js';

package/dist/Modal/Modal.svelte

@@ -28,8 +28,9 @@
         description,
         overlay: showOverlay = config.defaultVariants.overlay ?? true,
         scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? true,
-        fullscreen = config.defaultVariants.fullscreen ?? false,
+        transition = config.defaultVariants.transition ?? 'scale',
+        size = config.defaultVariants.size ?? 'md',
+        fullscreen = false,
         portal = true,
         close: closeProp = true,
         dismissible = true,
@@ -46,6 +47,11 @@
         closeSlot
     }: Props = $props()
 
+    const resolvedSize = $derived(fullscreen ? 'full' : size)
+    const resolvedTransition = $derived(
+        transition === false ? 'none' : transition === true ? 'scale' : transition
+    )
+
     const showClose = $derived(!!closeProp)
     const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
 
@@ -57,7 +63,12 @@
     )
 
     const variantSlots = $derived(
-        modalVariants({ transition, fullscreen, overlay: showOverlay, scrollable })
+        modalVariants({
+            transition: resolvedTransition,
+            size: resolvedSize,
+            overlay: showOverlay,
+            scrollable
+        })
     )
 
     const classes = $derived({

package/dist/Modal/modal.types.d.ts

@@ -43,15 +43,26 @@ export interface ModalProps extends RootProps, ContentProps {
      */
     scrollable?: ModalVariantProps['scrollable'];
     /**
-     * Animate the modal on open and close.
-     * @default true
+     * Controls the entrance/exit animation.
+     * - `'none'` / `false`: no animation
+     * - `'fade'`: overlay + content fade
+     * - `'slide'`: overlay fade + content slide-in from top
+     * - `'scale'` / `true`: overlay fade + content scale-in (default)
+     * @default 'scale'
+     */
+    transition?: ModalVariantProps['transition'] | boolean;
+    /**
+     * Controls the modal width. The `'full'` value expands to fill the
+     * entire viewport (replaces the deprecated `fullscreen` prop).
+     * @default 'md'
      */
-    transition?: ModalVariantProps['transition'];
+    size?: ModalVariantProps['size'];
     /**
      * Expand the modal to fill the entire viewport.
+     * @deprecated Use `size="full"` instead. Retained as an alias for backward compatibility.
      * @default false
      */
-    fullscreen?: ModalVariantProps['fullscreen'];
+    fullscreen?: boolean;
     /**
      * Render the modal content in a portal appended to `<body>`.
      * @default true

package/dist/Modal/modal.variants.d.ts

@@ -1,16 +1,34 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+            content: string;
+        };
+        scale: {
             overlay: string;
             content: string;
         };
     };
-    fullscreen: {
-        true: {
+    size: {
+        sm: {
             content: string;
         };
-        false: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+        full: {
             content: string;
         };
     };
@@ -42,16 +60,34 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     close: string;
 }, undefined, {
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+            content: string;
+        };
+        scale: {
             overlay: string;
             content: string;
         };
     };
-    fullscreen: {
-        true: {
+    size: {
+        sm: {
             content: string;
         };
-        false: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+        full: {
             content: string;
         };
     };
@@ -83,16 +119,34 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+            content: string;
+        };
+        scale: {
             overlay: string;
             content: string;
         };
     };
-    fullscreen: {
-        true: {
+    size: {
+        sm: {
             content: string;
         };
-        false: {
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+        full: {
             content: string;
         };
     };
@@ -128,16 +182,34 @@ export type ModalSlots = keyof ReturnType<typeof modalVariants>;
 export declare const modalDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+                content: string;
+            };
+            scale: {
                 overlay: string;
                 content: string;
             };
         };
-        fullscreen: {
-            true: {
+        size: {
+            sm: {
                 content: string;
             };
-            false: {
+            md: {
+                content: string;
+            };
+            lg: {
+                content: string;
+            };
+            xl: {
+                content: string;
+            };
+            full: {
                 content: string;
             };
         };
@@ -169,16 +241,34 @@ export declare const modalDefaults: {
         close: string;
     }, {
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+                content: string;
+            };
+            scale: {
                 overlay: string;
                 content: string;
             };
         };
-        fullscreen: {
-            true: {
+        size: {
+            sm: {
                 content: string;
             };
-            false: {
+            md: {
+                content: string;
+            };
+            lg: {
+                content: string;
+            };
+            xl: {
+                content: string;
+            };
+            full: {
                 content: string;
             };
         };