sv5ui 1.1.3 → 1.2.0

package/dist/Pagination/pagination.variants.js

@@ -1,12 +1,57 @@
 import { tv } from 'tailwind-variants';
-const navButton = [
-    'inline-flex items-center justify-center rounded-md',
-    'cursor-pointer select-none transition-colors',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-    'disabled:cursor-not-allowed disabled:opacity-50',
-    'hover:bg-surface-container-high text-on-surface-variant'
-];
 const navIcon = 'shrink-0';
+export const activeVariantColorClasses = {
+    solid: {
+        primary: 'data-[selected]:bg-primary data-[selected]:text-on-primary data-[selected]:hover:bg-primary/90',
+        secondary: 'data-[selected]:bg-secondary data-[selected]:text-on-secondary data-[selected]:hover:bg-secondary/90',
+        tertiary: 'data-[selected]:bg-tertiary data-[selected]:text-on-tertiary data-[selected]:hover:bg-tertiary/90',
+        success: 'data-[selected]:bg-success data-[selected]:text-on-success data-[selected]:hover:bg-success/90',
+        warning: 'data-[selected]:bg-warning data-[selected]:text-on-warning data-[selected]:hover:bg-warning/90',
+        error: 'data-[selected]:bg-error data-[selected]:text-on-error data-[selected]:hover:bg-error/90',
+        info: 'data-[selected]:bg-info data-[selected]:text-on-info data-[selected]:hover:bg-info/90',
+        surface: 'data-[selected]:bg-surface-container-highest data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/90'
+    },
+    outline: {
+        primary: 'data-[selected]:ring-2 data-[selected]:ring-primary data-[selected]:text-primary data-[selected]:hover:bg-primary/10',
+        secondary: 'data-[selected]:ring-2 data-[selected]:ring-secondary data-[selected]:text-secondary data-[selected]:hover:bg-secondary/10',
+        tertiary: 'data-[selected]:ring-2 data-[selected]:ring-tertiary data-[selected]:text-tertiary data-[selected]:hover:bg-tertiary/10',
+        success: 'data-[selected]:ring-2 data-[selected]:ring-success data-[selected]:text-success data-[selected]:hover:bg-success/10',
+        warning: 'data-[selected]:ring-2 data-[selected]:ring-warning data-[selected]:text-warning data-[selected]:hover:bg-warning/10',
+        error: 'data-[selected]:ring-2 data-[selected]:ring-error data-[selected]:text-error data-[selected]:hover:bg-error/10',
+        info: 'data-[selected]:ring-2 data-[selected]:ring-info data-[selected]:text-info data-[selected]:hover:bg-info/10',
+        surface: 'data-[selected]:ring-2 data-[selected]:ring-outline-variant data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest'
+    },
+    soft: {
+        primary: 'data-[selected]:bg-primary-container data-[selected]:text-on-primary-container data-[selected]:hover:bg-primary-container/90',
+        secondary: 'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container data-[selected]:hover:bg-secondary-container/90',
+        tertiary: 'data-[selected]:bg-tertiary-container data-[selected]:text-on-tertiary-container data-[selected]:hover:bg-tertiary-container/90',
+        success: 'data-[selected]:bg-success-container data-[selected]:text-on-success-container data-[selected]:hover:bg-success-container/90',
+        warning: 'data-[selected]:bg-warning-container data-[selected]:text-on-warning-container data-[selected]:hover:bg-warning-container/90',
+        error: 'data-[selected]:bg-error-container data-[selected]:text-on-error-container data-[selected]:hover:bg-error-container/90',
+        info: 'data-[selected]:bg-info-container data-[selected]:text-on-info-container data-[selected]:hover:bg-info-container/90',
+        surface: 'data-[selected]:bg-surface-container-highest data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/90'
+    },
+    subtle: {
+        primary: 'data-[selected]:bg-primary-container/50 data-[selected]:text-primary data-[selected]:hover:bg-primary-container/70',
+        secondary: 'data-[selected]:bg-secondary-container/50 data-[selected]:text-secondary data-[selected]:hover:bg-secondary-container/70',
+        tertiary: 'data-[selected]:bg-tertiary-container/50 data-[selected]:text-tertiary data-[selected]:hover:bg-tertiary-container/70',
+        success: 'data-[selected]:bg-success-container/50 data-[selected]:text-success data-[selected]:hover:bg-success-container/70',
+        warning: 'data-[selected]:bg-warning-container/50 data-[selected]:text-warning data-[selected]:hover:bg-warning-container/70',
+        error: 'data-[selected]:bg-error-container/50 data-[selected]:text-error data-[selected]:hover:bg-error-container/70',
+        info: 'data-[selected]:bg-info-container/50 data-[selected]:text-info data-[selected]:hover:bg-info-container/70',
+        surface: 'data-[selected]:bg-surface-container-highest/50 data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/70'
+    },
+    ghost: {
+        primary: 'data-[selected]:text-primary data-[selected]:hover:bg-primary/10',
+        secondary: 'data-[selected]:text-secondary data-[selected]:hover:bg-secondary/10',
+        tertiary: 'data-[selected]:text-tertiary data-[selected]:hover:bg-tertiary/10',
+        success: 'data-[selected]:text-success data-[selected]:hover:bg-success/10',
+        warning: 'data-[selected]:text-warning data-[selected]:hover:bg-warning/10',
+        error: 'data-[selected]:text-error data-[selected]:hover:bg-error/10',
+        info: 'data-[selected]:text-info data-[selected]:hover:bg-info/10',
+        surface: 'data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest'
+    }
+};
 export const paginationVariants = tv({
     slots: {
         root: '',
@@ -19,10 +64,10 @@ export const paginationVariants = tv({
             'hover:bg-surface-container-high text-on-surface'
         ],
         ellipsis: 'inline-flex items-center justify-center pointer-events-none text-on-surface-variant',
-        first: navButton,
-        prev: navButton,
-        next: navButton,
-        last: navButton,
+        first: '',
+        prev: '',
+        next: '',
+        last: '',
         ellipsisIcon: navIcon,
         firstIcon: navIcon,
         prevIcon: navIcon,
@@ -30,41 +75,11 @@ export const paginationVariants = tv({
         lastIcon: navIcon
     },
     variants: {
-        activeColor: {
-            primary: {
-                item: 'data-[selected]:bg-primary data-[selected]:text-on-primary data-[selected]:hover:bg-primary/90'
-            },
-            secondary: {
-                item: 'data-[selected]:bg-secondary data-[selected]:text-on-secondary data-[selected]:hover:bg-secondary/90'
-            },
-            tertiary: {
-                item: 'data-[selected]:bg-tertiary data-[selected]:text-on-tertiary data-[selected]:hover:bg-tertiary/90'
-            },
-            success: {
-                item: 'data-[selected]:bg-success data-[selected]:text-on-success data-[selected]:hover:bg-success/90'
-            },
-            warning: {
-                item: 'data-[selected]:bg-warning data-[selected]:text-on-warning data-[selected]:hover:bg-warning/90'
-            },
-            error: {
-                item: 'data-[selected]:bg-error data-[selected]:text-on-error data-[selected]:hover:bg-error/90'
-            },
-            info: {
-                item: 'data-[selected]:bg-info data-[selected]:text-on-info data-[selected]:hover:bg-info/90'
-            },
-            surface: {
-                item: 'data-[selected]:bg-surface-container-highest data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/90'
-            }
-        },
         size: {
             xs: {
                 list: 'gap-0.5',
                 item: 'size-7 text-xs',
                 ellipsis: 'size-7 text-xs',
-                first: 'size-7',
-                prev: 'size-7',
-                next: 'size-7',
-                last: 'size-7',
                 ellipsisIcon: 'size-3',
                 firstIcon: 'size-3',
                 prevIcon: 'size-3',
@@ -75,10 +90,6 @@ export const paginationVariants = tv({
                 list: 'gap-0.5',
                 item: 'size-8 text-xs',
                 ellipsis: 'size-8 text-xs',
-                first: 'size-8',
-                prev: 'size-8',
-                next: 'size-8',
-                last: 'size-8',
                 ellipsisIcon: 'size-3.5',
                 firstIcon: 'size-3.5',
                 prevIcon: 'size-3.5',
@@ -89,10 +100,6 @@ export const paginationVariants = tv({
                 list: 'gap-1',
                 item: 'size-9 text-sm',
                 ellipsis: 'size-9 text-sm',
-                first: 'size-9',
-                prev: 'size-9',
-                next: 'size-9',
-                last: 'size-9',
                 ellipsisIcon: 'size-4',
                 firstIcon: 'size-4',
                 prevIcon: 'size-4',
@@ -103,10 +110,6 @@ export const paginationVariants = tv({
                 list: 'gap-1',
                 item: 'size-10 text-sm',
                 ellipsis: 'size-10 text-sm',
-                first: 'size-10',
-                prev: 'size-10',
-                next: 'size-10',
-                last: 'size-10',
                 ellipsisIcon: 'size-5',
                 firstIcon: 'size-5',
                 prevIcon: 'size-5',
@@ -117,10 +120,6 @@ export const paginationVariants = tv({
                 list: 'gap-1.5',
                 item: 'size-11 text-base',
                 ellipsis: 'size-11 text-base',
-                first: 'size-11',
-                prev: 'size-11',
-                next: 'size-11',
-                last: 'size-11',
                 ellipsisIcon: 'size-5',
                 firstIcon: 'size-5',
                 prevIcon: 'size-5',
@@ -135,11 +134,16 @@ export const paginationVariants = tv({
         }
     },
     defaultVariants: {
-        activeColor: 'primary',
         size: 'md'
     }
 });
 export const paginationDefaults = {
-    defaultVariants: paginationVariants.defaultVariants,
+    defaultVariants: {
+        ...paginationVariants.defaultVariants,
+        variant: 'ghost',
+        color: 'surface',
+        activeColor: 'primary',
+        activeVariant: 'solid'
+    },
     slots: {}
 };

package/dist/Popover/Popover.svelte

@@ -12,10 +12,11 @@
     const config = getComponentConfig('popover', popoverDefaults)
 
     let {
+        ref = $bindable(null),
         open = $bindable(false),
         onOpenChange,
         onOpenChangeComplete,
-        side = config.defaultVariants.side ?? 'bottom',
+        side = 'bottom',
         sideOffset = 8,
         align = 'center',
         alignOffset = 0,
@@ -38,12 +39,11 @@
         ui,
         class: className,
         children,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
-    const showArrow = $derived(!!arrow)
-
-    const variantSlots = $derived(popoverVariants({ side, transition }))
+    const variantSlots = $derived(popoverVariants({ transition }))
     const classes = $derived({
         content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
         arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
@@ -61,15 +61,11 @@
     function close() {
         open = false
     }
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
 </script>
 
 {#snippet popoverContentEl()}
     <Popover.Content
+        bind:ref
         {side}
         {sideOffset}
         {align}
@@ -89,12 +85,13 @@
         {onInteractOutside}
         {forceMount}
         class={[classes.content, !children ? className : undefined]}
+        {...restProps}
     >
         {#if contentSlot}
             {@render contentSlot({ open, close })}
         {/if}
 
-        {#if showArrow}
+        {#if arrow}
             <Popover.Arrow
                 width={arrowProps.width}
                 height={arrowProps.height}
@@ -104,7 +101,7 @@
     </Popover.Content>
 {/snippet}
 
-<Popover.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
+<Popover.Root bind:open {onOpenChange} {onOpenChangeComplete}>
     {#if children}
         <Popover.Trigger>
             {#snippet child({ props })}

package/dist/Popover/Popover.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { PopoverProps } from './popover.types.js';
 export type Props = PopoverProps;
 import { Popover } from 'bits-ui';
-declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "ref" | "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/Popover/popover.types.d.ts

@@ -5,6 +5,10 @@ import type { PopoverRootPropsWithoutHTML, PopoverContentPropsWithoutHTML, Popov
 type RootProps = Pick<PopoverRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete'>;
 type ContentProps = Pick<PopoverContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'trapFocus' | 'preventScroll' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount'>;
 export interface PopoverProps extends RootProps, ContentProps {
+    /**
+     * Bindable reference to the content DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Display an arrow alongside the popover.
      * Can be a boolean or arrow props for customization.

package/dist/Popover/popover.variants.d.ts

@@ -1,68 +1,26 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
     content: string[];
     arrow: string;
 }, undefined, {
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
     content: string[];
     arrow: string;
 }, import("tailwind-variants").TVReturnType<{
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
@@ -73,46 +31,18 @@ export type PopoverVariantProps = VariantProps<typeof popoverVariants>;
 export type PopoverSlots = keyof ReturnType<typeof popoverVariants>;
 export declare const popoverDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
-        side: {
-            top: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-        };
         transition: {
             true: {
-                content: string;
+                content: string[];
             };
         };
     }, {
         content: string[];
         arrow: string;
     }, {
-        side: {
-            top: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-        };
         transition: {
             true: {
-                content: string;
+                content: string[];
             };
         };
     }, {

package/dist/Popover/popover.variants.js

@@ -10,28 +10,18 @@ export const popoverVariants = tv({
         arrow: ''
     },
     variants: {
-        side: {
-            top: {
-                content: 'data-[state=open]:animate-[slide-in-from-bottom_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-top_100ms_ease-in_reverse]'
-            },
-            right: {
-                content: 'data-[state=open]:animate-[slide-in-from-left_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-right_100ms_ease-in_reverse]'
-            },
-            bottom: {
-                content: 'data-[state=open]:animate-[slide-in-from-top_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-bottom_100ms_ease-in_reverse]'
-            },
-            left: {
-                content: 'data-[state=open]:animate-[slide-in-from-right_150ms_ease-out] data-[state=closed]:animate-[slide-in-from-left_100ms_ease-in_reverse]'
-            }
-        },
         transition: {
             true: {
-                content: 'data-[state=open]:animate-[fade-in_150ms_ease-out,scale-in_150ms_ease-out] data-[state=closed]:animate-[fade-out_100ms_ease-in,scale-out_100ms_ease-in]'
+                content: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    'data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2',
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2'
+                ]
             }
         }
     },
     defaultVariants: {
-        side: 'bottom',
         transition: true
     }
 });

package/dist/Progress/Progress.svelte

@@ -24,30 +24,51 @@
         ui,
         class: className,
         statusSlot,
+        stepSlot,
         ...restProps
     }: Props = $props()
 
-    const maxValue = $derived(Array.isArray(max) ? max.length - 1 : max)
-    const percent = $derived(
-        value !== null ? Math.round((Math.min(value, maxValue) / maxValue) * 100) : 0
-    )
     const isIndeterminate = $derived(value === null)
-    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
+    const hasSteps = $derived(Array.isArray(max))
+
+    const realMax = $derived.by(() => {
+        if (isIndeterminate || !max) return undefined
+        if (Array.isArray(max)) return max.length - 1
+        return Number(max)
+    })
+
+    const percent = $derived.by(() => {
+        if (isIndeterminate) return undefined
+        if (value! < 0) return 0
+        if (value! > (realMax ?? 100)) return 100
+        return Math.round((value! / (realMax ?? 100)) * 100)
+    })
 
     const indicatorStyle = $derived.by(() => {
-        if (isIndeterminate) return ''
+        if (percent === undefined) return ''
         const offset = 100 - percent
-        if (orientation === 'horizontal') {
-            return inverted
-                ? `transform: translateX(${offset}%);`
-                : `transform: translateX(-${offset}%);`
+        if (orientation === 'vertical') {
+            return `transform: translateY(${inverted ? '' : '-'}${offset}%);`
         }
-        // Vertical: fill from bottom to top (positive Y = down)
-        return inverted
-            ? `transform: translateY(-${offset}%);`
-            : `transform: translateY(${offset}%);`
+        return `transform: translateX(${inverted ? '' : '-'}${offset}%);`
     })
 
+    const statusStyle = $derived.by(() => {
+        const val = `${Math.max(percent ?? 0, 0)}%`
+        return orientation === 'vertical' ? `height: ${val};` : `width: ${val};`
+    })
+
+    function stepVariant(index: number): 'active' | 'first' | 'last' | 'other' {
+        const isActive = index === Number(value)
+        const isFirst = index === 0
+        const isLast = index === realMax
+
+        if (isActive && !isFirst) return 'active'
+        if (isFirst && isActive) return 'first'
+        if (isLast && isActive) return 'last'
+        return 'other'
+    }
+
     const classes = $derived.by(() => {
         const slots = progressVariants({ animation, color, size, orientation, inverted })
         return {
@@ -55,24 +76,25 @@
             base: slots.base({ class: [config.slots.base, ui?.base] }),
             indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
             status: slots.status({ class: [config.slots.status, ui?.status] }),
-            stepsBase: slots.steps({ class: [config.slots.steps, ui?.steps] }),
-            stepActive: progressVariants({ size, step: 'active' }).steps(),
-            stepOther: progressVariants({ size, step: 'other' }).steps()
+            steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
         }
     })
+
+    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
 </script>
 
 <Progress.Root
     bind:ref
     value={value ?? undefined}
-    max={maxValue}
+    max={realMax}
     class={classes.root}
+    data-orientation={orientation}
     {...restProps}
 >
-    {#if status && !Array.isArray(max)}
-        <div class={classes.status} style={isIndeterminate ? '' : `width: ${percent}%;`}>
+    {#if !isIndeterminate && status}
+        <div class={classes.status} style={statusStyle}>
             {#if statusSlot}
-                {@render statusSlot({ percent })}
+                {@render statusSlot({ percent: percent ?? 0 })}
             {:else}
                 {percent}%
             {/if}
@@ -83,16 +105,22 @@
         <div class={classes.indicator} data-state={state} style={indicatorStyle}></div>
     </div>
 
-    {#if Array.isArray(max)}
-        <div class={classes.stepsBase}>
+    {#if hasSteps && Array.isArray(max)}
+        <div class={classes.steps}>
             {#each max as step, index (index)}
-                <span
-                    class={value !== null && index <= value
-                        ? classes.stepActive
-                        : classes.stepOther}
-                >
-                    {step}
-                </span>
+                {@const stepClass = progressVariants({
+                    size,
+                    orientation,
+                    inverted,
+                    step: stepVariant(index)
+                }).step({ class: [config.slots.step, ui?.step] })}
+                <div class={stepClass}>
+                    {#if stepSlot}
+                        {@render stepSlot({ step, index })}
+                    {:else}
+                        {step}
+                    {/if}
+                </div>
             {/each}
         </div>
     {/if}

package/dist/Progress/progress.types.d.ts

@@ -46,7 +46,7 @@ export type ProgressProps = Omit<Progress.RootProps, 'max'> & {
     animation?: NonNullable<ProgressVariantProps['animation']>;
     /**
      * Override styles for specific progress slots.
-     * Available slots: root, base, indicator, status, steps.
+     * Available slots: root, base, indicator, status, steps, step.
      */
     ui?: Partial<Record<ProgressSlots, ClassNameValue>>;
     /**
@@ -60,4 +60,12 @@ export type ProgressProps = Omit<Progress.RootProps, 'max'> & {
     statusSlot?: Snippet<[{
         percent: number;
     }]>;
+    /**
+     * Custom content rendered for each step label.
+     * Takes precedence over the default step text.
+     */
+    stepSlot?: Snippet<[{
+        step: string;
+        index: number;
+    }]>;
 };