sv5ui 1.8.0 → 2.1.0

package/dist/Input/input.variants.d.ts

@@ -65,9 +65,6 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     trailing: {
         true: string;
     };
-    loading: {
-        true: string;
-    };
     highlight: {
         true: string;
     };
@@ -146,9 +143,6 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     trailing: {
         true: string;
     };
-    loading: {
-        true: string;
-    };
     highlight: {
         true: string;
     };
@@ -227,9 +221,6 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     trailing: {
         true: string;
     };
-    loading: {
-        true: string;
-    };
     highlight: {
         true: string;
     };
@@ -312,9 +303,6 @@ export declare const inputDefaults: {
         trailing: {
             true: string;
         };
-        loading: {
-            true: string;
-        };
         highlight: {
             true: string;
         };
@@ -393,9 +381,6 @@ export declare const inputDefaults: {
         trailing: {
             true: string;
         };
-        loading: {
-            true: string;
-        };
         highlight: {
             true: string;
         };

package/dist/Input/input.variants.js

@@ -81,9 +81,6 @@ export const inputVariants = tv({
         trailing: {
             true: ''
         },
-        loading: {
-            true: ''
-        },
         highlight: {
             true: ''
         }
@@ -376,23 +373,7 @@ export const inputVariants = tv({
         { trailing: true, size: 'sm', class: { base: 'pe-8' } },
         { trailing: true, size: 'md', class: { base: 'pe-9' } },
         { trailing: true, size: 'lg', class: { base: 'pe-10' } },
-        { trailing: true, size: 'xl', class: { base: 'pe-12' } },
-        // ========== LOADING ICON ANIMATION ==========
-        {
-            loading: true,
-            leading: true,
-            class: {
-                leadingIcon: 'animate-spin'
-            }
-        },
-        {
-            loading: true,
-            leading: false,
-            trailing: true,
-            class: {
-                trailingIcon: 'animate-spin'
-            }
-        }
+        { trailing: true, size: 'xl', class: { base: 'pe-12' } }
     ],
     defaultVariants: {
         variant: 'outline',

package/dist/Link/Link.svelte

@@ -51,6 +51,7 @@
 
 <script lang="ts">
     import { page } from '$app/state'
+    import { twMerge } from 'tailwind-merge'
     import { linkVariants, linkDefaults } from './link.variants.js'
     import { getComponentConfig } from '../config.js'
 
@@ -113,7 +114,7 @@
 
     const baseClass = $derived.by(() => {
         const stateClass = isActive ? activeClass : inactiveClass
-        if (raw) return [className, stateClass].filter(Boolean).join(' ')
+        if (raw) return twMerge(stateClass, className)
 
         const slots = linkVariants({ active: isActive, disabled, raw })
         return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] })
@@ -138,6 +139,7 @@
     <!-- eslint-disable svelte/no-navigation-without-resolve -->
     <a
         bind:this={ref}
+        {...restProps}
         href={disabled ? undefined : href}
         class={baseClass}
         target={resolvedTarget}
@@ -147,7 +149,6 @@
         aria-current={ariaCurrent}
         tabindex={disabled ? -1 : undefined}
         onclick={handleClick}
-        {...restProps}
     >
         <!-- eslint-enable svelte/no-navigation-without-resolve -->
         {@render children?.()}
@@ -155,12 +156,12 @@
 {:else}
     <button
         bind:this={ref}
+        {...restProps}
         type={type ?? 'button'}
         class={baseClass}
         {disabled}
         aria-current={ariaCurrent}
         onclick={handleClick}
-        {...restProps}
     >
         {@render children?.()}
     </button>

package/dist/Link/link.types.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 import type { LinkSlots } from './link.variants.js';
 import type { ClassNameValue } from 'tailwind-merge';
-export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & Pick<HTMLButtonAttributes, 'name' | 'value' | 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'popovertarget' | 'popovertargetaction'> & Pick<HTMLAnchorAttributes, 'download' | 'hreflang' | 'ping' | 'media' | 'referrerpolicy'> & {
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Modal/Modal.svelte

@@ -203,8 +203,10 @@
 
 <Dialog.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
     {#if children}
-        <Dialog.Trigger class={className as string}>
-            {@render children()}
+        <Dialog.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
         </Dialog.Trigger>
     {/if}
 

package/dist/Modal/ModalTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Modal from './Modal.svelte'
+</script>
+
+<Modal title="Trigger test" description="D">
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet body()}<p>Body</p>{/snippet}
+</Modal>

package/dist/Modal/ModalTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ModalTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ModalTriggerTestWrapper = InstanceType<typeof ModalTriggerTestWrapper>;
+export default ModalTriggerTestWrapper;

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

@@ -101,10 +101,20 @@ export interface ModalProps extends RootProps, ContentProps {
      */
     class?: ClassNameValue;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the modal.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the dialog's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     /**
      * Custom content slot that replaces the entire default layout
      * (header, body, footer). Title and description are rendered

package/dist/Pagination/Pagination.svelte

@@ -47,7 +47,8 @@
         nextSlot,
         lastSlot,
         ellipsisSlot,
-        itemSlot
+        itemSlot,
+        ...restProps
     }: Props = $props()
 
     if (page === undefined) {
@@ -94,6 +95,7 @@
 </script>
 
 <Pagination.Root
+    {...restProps}
     bind:ref
     count={total}
     perPage={itemsPerPage}
@@ -144,6 +146,7 @@
                                 square
                                 {size}
                                 class={classes.prev}
+                                aria-label="Previous page"
                             >
                                 {@render prevSlot({ page: page!, disabled: prevDisabled })}
                             </ButtonComponent>
@@ -156,6 +159,7 @@
                                 {size}
                                 icon={prevIcon}
                                 class={classes.prev}
+                                aria-label="Previous page"
                             />
                         {/if}
                     {/snippet}
@@ -196,6 +200,7 @@
                                 square
                                 {size}
                                 class={classes.next}
+                                aria-label="Next page"
                             >
                                 {@render nextSlot({ page: page!, disabled: nextDisabled })}
                             </ButtonComponent>
@@ -208,6 +213,7 @@
                                 {size}
                                 icon={nextIcon}
                                 class={classes.next}
+                                aria-label="Next page"
                             />
                         {/if}
                     {/snippet}

package/dist/Pagination/pagination.types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { PaginationRootProps } from 'bits-ui';
 import type { PaginationSlots, PaginationVariantProps } from './pagination.variants.js';
 import type { ButtonProps } from '../Button/button.types.js';
 /**
@@ -38,7 +39,9 @@ export interface PaginationItemSlotProps {
  *
  * @see https://bits-ui.com/docs/components/pagination
  */
-export interface PaginationProps {
+export interface PaginationProps extends Pick<PaginationRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Pagination/pagination.variants.d.ts

@@ -7,50 +7,30 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         sm: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         md: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         lg: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         xl: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
     };
     disabled: {
@@ -68,10 +48,6 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
     next: string;
     last: string;
     ellipsisIcon: string;
-    firstIcon: string;
-    prevIcon: string;
-    nextIcon: string;
-    lastIcon: string;
 }, undefined, {
     size: {
         xs: {
@@ -79,50 +55,30 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         sm: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         md: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         lg: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         xl: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
     };
     disabled: {
@@ -140,10 +96,6 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
     next: string;
     last: string;
     ellipsisIcon: string;
-    firstIcon: string;
-    prevIcon: string;
-    nextIcon: string;
-    lastIcon: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -151,50 +103,30 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         sm: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         md: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         lg: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
         xl: {
             list: string;
             item: string;
             ellipsis: string;
             ellipsisIcon: string;
-            firstIcon: string;
-            prevIcon: string;
-            nextIcon: string;
-            lastIcon: string;
         };
     };
     disabled: {
@@ -212,10 +144,6 @@ export declare const paginationVariants: import("tailwind-variants").TVReturnTyp
     next: string;
     last: string;
     ellipsisIcon: string;
-    firstIcon: string;
-    prevIcon: string;
-    nextIcon: string;
-    lastIcon: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PaginationVariantProps = VariantProps<typeof paginationVariants>;
 export type PaginationSlots = keyof ReturnType<typeof paginationVariants>;

package/dist/Pagination/pagination.variants.js

@@ -68,11 +68,7 @@ export const paginationVariants = tv({
         prev: '',
         next: '',
         last: '',
-        ellipsisIcon: navIcon,
-        firstIcon: navIcon,
-        prevIcon: navIcon,
-        nextIcon: navIcon,
-        lastIcon: navIcon
+        ellipsisIcon: navIcon
     },
     variants: {
         size: {
@@ -80,51 +76,31 @@ export const paginationVariants = tv({
                 list: 'gap-0.5',
                 item: 'size-7 text-xs',
                 ellipsis: 'size-7 text-xs',
-                ellipsisIcon: 'size-3',
-                firstIcon: 'size-3',
-                prevIcon: 'size-3',
-                nextIcon: 'size-3',
-                lastIcon: 'size-3'
+                ellipsisIcon: 'size-3'
             },
             sm: {
                 list: 'gap-0.5',
                 item: 'size-8 text-xs',
                 ellipsis: 'size-8 text-xs',
-                ellipsisIcon: 'size-3.5',
-                firstIcon: 'size-3.5',
-                prevIcon: 'size-3.5',
-                nextIcon: 'size-3.5',
-                lastIcon: 'size-3.5'
+                ellipsisIcon: 'size-3.5'
             },
             md: {
                 list: 'gap-1',
                 item: 'size-9 text-sm',
                 ellipsis: 'size-9 text-sm',
-                ellipsisIcon: 'size-4',
-                firstIcon: 'size-4',
-                prevIcon: 'size-4',
-                nextIcon: 'size-4',
-                lastIcon: 'size-4'
+                ellipsisIcon: 'size-4'
             },
             lg: {
                 list: 'gap-1',
                 item: 'size-10 text-sm',
                 ellipsis: 'size-10 text-sm',
-                ellipsisIcon: 'size-5',
-                firstIcon: 'size-5',
-                prevIcon: 'size-5',
-                nextIcon: 'size-5',
-                lastIcon: 'size-5'
+                ellipsisIcon: 'size-5'
             },
             xl: {
                 list: 'gap-1.5',
                 item: 'size-11 text-base',
                 ellipsis: 'size-11 text-base',
-                ellipsisIcon: 'size-5',
-                firstIcon: 'size-5',
-                prevIcon: 'size-5',
-                nextIcon: 'size-5',
-                lastIcon: 'size-5'
+                ellipsisIcon: 'size-5'
             }
         },
         disabled: {

package/dist/Popover/Popover.svelte

@@ -105,7 +105,7 @@
     {#if children}
         <Popover.Trigger>
             {#snippet child({ props })}
-                <span {...props} class={className as string}>
+                <span {...props} class={[className]}>
                     {@render children({ open })}
                 </span>
             {/snippet}

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

@@ -5,6 +5,8 @@ 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 {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the content DOM element.
      */

package/dist/Progress/Progress.svelte

@@ -80,6 +80,19 @@
         }
     })
 
+    const stepClasses = $derived.by(() => {
+        const make = (step: 'active' | 'first' | 'last' | 'other') =>
+            progressVariants({ size, orientation, inverted, step }).step({
+                class: [config.slots.step, ui?.step]
+            })
+        return {
+            active: make('active'),
+            first: make('first'),
+            last: make('last'),
+            other: make('other')
+        }
+    })
+
     const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
 </script>
 
@@ -108,12 +121,7 @@
     {#if hasSteps && Array.isArray(max)}
         <div class={classes.steps}>
             {#each max as step, index (index)}
-                {@const stepClass = progressVariants({
-                    size,
-                    orientation,
-                    inverted,
-                    step: stepVariant(index)
-                }).step({ class: [config.slots.step, ui?.step] })}
+                {@const stepClass = stepClasses[stepVariant(index)]}
                 <div class={stepClass}>
                     {#if stepSlot}
                         {@render stepSlot({ step, index })}

package/dist/RadioGroup/RadioGroup.svelte

@@ -54,6 +54,7 @@
     const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
     const resolvedName = $derived(name ?? formFieldContext?.name)
     const isDisabled = $derived(disabled || loading)
+    const legendId = $derived(`${resolvedId}-legend`)
 
     const ariaDescribedBy = $derived(
         !formFieldContext
@@ -186,13 +187,14 @@
         {orientation}
         aria-describedby={ariaDescribedBy}
         aria-invalid={hasError ? true : undefined}
+        aria-labelledby={legend && !legendSlot ? legendId : undefined}
         class={layoutClasses.fieldset}
     >
         {#if legend || legendSlot}
             {#if legendSlot}
                 {@render legendSlot({ legend })}
             {:else}
-                <span class={layoutClasses.legend}>{legend}</span>
+                <span id={legendId} class={layoutClasses.legend}>{legend}</span>
             {/if}
         {/if}
 

package/dist/Select/Select.svelte

@@ -67,7 +67,8 @@
         itemLabel: itemLabelSlot,
         itemTrailing,
         selected: selectedSlot,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
     // ---- Form context ----
@@ -371,6 +372,7 @@
         {/if}
 
         <Select.Trigger
+            {...restProps}
             id={resolvedId}
             name={resolvedName}
             aria-describedby={ariaDescribedBy}

package/dist/Select/select.types.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { SelectVariantProps, SelectSlots } from './select.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-import type { SelectRootPropsWithoutHTML, SelectContentPropsWithoutHTML } from 'bits-ui';
+import type { SelectRootPropsWithoutHTML, SelectContentPropsWithoutHTML, SelectTriggerProps } from 'bits-ui';
 /**
  * The value shape for the Select.
  * - When `multiple` is `false` (or omitted), the value is a single string (or undefined).
@@ -102,7 +102,10 @@ type ContentProps = Pick<SelectContentPropsWithoutHTML, 'side' | 'sideOffset' |
  *
  * @see https://bits-ui.com/docs/components/select
  */
-export interface SelectProps extends RootProps, ContentProps {
+type TriggerHTMLProps = Pick<SelectTriggerProps, 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'>;
+export interface SelectProps extends RootProps, ContentProps, TriggerHTMLProps {
+    /** Custom data attributes are forwarded to the trigger element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */
@@ -114,13 +117,6 @@ export interface SelectProps extends RootProps, ContentProps {
      * - When `multiple` is `true`, this is a `string[]`.
      */
     value?: string | string[];
-    /**
-     * The default selected value when uncontrolled.
-     *
-     * - When `multiple` is `false`/omitted, this is a `string`.
-     * - When `multiple` is `true`, this is a `string[]`.
-     */
-    defaultValue?: string | string[];
     /**
      * Whether multiple items can be selected at once.
      * When `true`, `value` becomes a `string[]` and the trigger displays