sv5ui 1.8.0 → 2.0.0

package/dist/Alert/alert.types.d.ts

@@ -43,7 +43,7 @@ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'>
     color?: NonNullable<AlertVariantProps['color']>;
     /**
      * The visual style variant.
-     * @default 'soft'
+     * @default 'solid'
      */
     variant?: NonNullable<AlertVariantProps['variant']>;
     /**

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -46,9 +46,11 @@
         }
     })
 
-    const visibleAvatars = $derived(
-        !avatars ? [] : max && max > 0 ? avatars.slice(0, max) : avatars
-    )
+    const visibleAvatars = $derived.by(() => {
+        if (!avatars) return []
+        const shown = max && max > 0 ? avatars.slice(0, max) : avatars
+        return [...shown].reverse()
+    })
 
     const overflowCount = $derived(
         avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0

package/dist/Button/Button.svelte

@@ -76,13 +76,14 @@
     const isLeading = $derived((!!icon && !trailing) || (isLoading && !trailing) || !!leadingIcon)
     const isTrailing = $derived((!!icon && trailing) || (isLoading && trailing) || !!trailingIcon)
 
+    const spinLeading = $derived(isLoading && !trailing)
+    const spinTrailing = $derived(isLoading && trailing)
+
     const leadingIconName = $derived(
-        isLoading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing ? icon : undefined)
+        spinLeading ? loadingIcon : leadingIcon || (!trailing ? icon : undefined)
     )
     const trailingIconName = $derived(
-        isLoading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
+        spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
     )
 
     const resolvedColor = $derived(active && activeColor ? activeColor : color)
@@ -96,8 +97,8 @@
             block,
             square: isIconOnly,
             loading: isLoading,
-            leading: isLeading,
-            trailing: isTrailing
+            leading: spinLeading,
+            trailing: spinTrailing
         })
         return {
             base: slots.base({ class: [config.slots.base, fieldGroupClass, className, ui?.base] }),

package/dist/Button/button.types.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { ButtonVariantProps, ButtonSlots } from './button.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> & {
+export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> & 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.
      */
@@ -147,5 +147,5 @@ export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> &
     /**
      * Override styles for specific button slots.
      */
-    ui?: Partial<Record<ButtonSlots, ClassNameValue>>;
+    ui?: Partial<Record<Exclude<ButtonSlots, 'leadingAvatarSize'>, ClassNameValue>>;
 };

package/dist/Collapsible/collapsible.types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { CollapsibleRootPropsWithoutHTML } from 'bits-ui';
+import type { CollapsibleRootProps, CollapsibleRootPropsWithoutHTML } from 'bits-ui';
 import type { CollapsibleSlots } from './collapsible.variants.js';
 /**
  * Props for the Collapsible component.
@@ -21,7 +21,9 @@ import type { CollapsibleSlots } from './collapsible.variants.js';
  *
  * @see https://bits-ui.com/docs/components/collapsible
  */
-export interface CollapsibleProps extends Pick<CollapsibleRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete' | 'disabled'> {
+export interface CollapsibleProps extends Pick<CollapsibleRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete' | 'disabled'>, Pick<CollapsibleRootProps, '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}`]: unknown;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Drawer/Drawer.svelte

@@ -44,7 +44,8 @@
         titleSlot,
         descriptionSlot,
         body: bodySlot,
-        footer: footerSlot
+        footer: footerSlot,
+        ...rest
     }: Props = $props()
 
     const hasTitle = $derived(!!title || !!titleSlot)
@@ -81,6 +82,7 @@
 
     const rootProps = $derived.by(() => {
         const base = {
+            ...rest,
             open,
             onOpenChange: handleOpenChange,
             direction,

package/dist/DropdownMenu/DropdownMenu.svelte

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

package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import DropdownMenu from './DropdownMenu.svelte'
+    import type { DropdownMenuItem } from './dropdown-menu.types.js'
+
+    let { items = [] }: { items?: DropdownMenuItem[] } = $props()
+</script>
+
+<DropdownMenu {items}>
+    {#snippet children({ open, props })}
+        <button data-testid="trigger" data-open={open} {...props}>Open</button>
+    {/snippet}
+</DropdownMenu>

package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownMenuItem } from './dropdown-menu.types.js';
+type $$ComponentProps = {
+    items?: DropdownMenuItem[];
+};
+declare const DropdownMenuTriggerTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropdownMenuTriggerTestWrapper = ReturnType<typeof DropdownMenuTriggerTestWrapper>;
+export default DropdownMenuTriggerTestWrapper;

package/dist/DropdownMenu/dropdown-menu.types.d.ts

@@ -129,10 +129,6 @@ export type DropdownMenuItem = DropdownMenuItemAction | DropdownMenuItemCheckbox
  * Configuration for a radio group within the dropdown menu.
  */
 export interface DropdownMenuRadioGroup {
-    /**
-     * Unique identifier for the radio group.
-     */
-    name: string;
     /**
      * Currently selected value in the group.
      */
@@ -178,8 +174,9 @@ export interface DropdownMenuProps extends RootProps, ContentProps {
      */
     items?: DropdownMenuItem[];
     /**
-     * Radio groups configuration for managing radio item selections.
-     * @example [{ name: 'theme', value: 'dark', onValueChange: (v) => theme = v }]
+     * Radio group configuration for managing radio item selections.
+     * Only the first entry is used — all `type: 'radio'` items belong to it.
+     * @example [{ value: 'dark', onValueChange: (v) => theme = v }]
      */
     radioGroups?: DropdownMenuRadioGroup[];
     /**
@@ -214,7 +211,9 @@ export interface DropdownMenuProps extends RootProps, ContentProps {
      */
     size?: NonNullable<DropdownMenuVariantProps['size']>;
     /**
-     * Additional CSS class for the trigger wrapper.
+     * Additional CSS class for the dropdown content.
+     * Applied only when no trigger `children` are provided (style your own
+     * trigger element directly otherwise).
      */
     class?: ClassNameValue;
     /**
@@ -222,11 +221,20 @@ export interface DropdownMenuProps extends RootProps, ContentProps {
      */
     ui?: Partial<Record<DropdownMenuSlots, ClassNameValue>>;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the dropdown.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the trigger's ARIA and event handlers land
+     * on the real control.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ open, props })}
+     *   <Button {...props}>{open ? 'Close' : 'Open'}</Button>
+     * {/snippet}
+     * ```
      */
     children?: Snippet<[{
         open: boolean;
+        props: Record<string, unknown>;
     }]>;
     /**
      * Custom content to render at the top of the dropdown menu.

package/dist/Icon/icon.types.d.ts

@@ -1,6 +1,9 @@
 import type { IconProps as IconifyProps } from '@iconify/svelte';
+import type { SVGAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
-export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'> {
+export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'>, Pick<SVGAttributes<SVGSVGElement>, 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the rendered `<svg>`. */
+    [key: `data-${string}`]: unknown;
     /**
      * Icon name in Iconify format: "collection:icon-name"
      * @example "lucide:home", "mdi:account", "heroicons:star"

package/dist/Input/Input.svelte

@@ -94,19 +94,14 @@
     const resolvedId = $derived(id ?? formFieldContext?.ariaId)
     const resolvedName = $derived(name ?? formFieldContext?.name)
 
-    const isLeading = $derived(
-        (!!icon && !trailing) || (loading && !trailing) || !!leadingIcon || !!avatar
-    )
-    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
+    const loadingLeading = $derived(loading && !trailing)
+    const loadingTrailing = $derived(loading && trailing)
 
-    const leadingIconName = $derived(
-        loading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing && !avatar ? icon : undefined)
-    )
-    const trailingIconName = $derived(
-        loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
-    )
+    const isLeading = $derived((!!icon && !trailing) || !!leadingIcon || !!avatar || loadingLeading)
+    const isTrailing = $derived((!!icon && trailing) || !!trailingIcon || loadingTrailing)
+
+    const leadingIconName = $derived(leadingIcon || (!!icon && !trailing ? icon : undefined))
+    const trailingIconName = $derived(trailingIcon || (!!icon && trailing ? icon : undefined))
 
     const ariaDescribedBy = $derived(
         !formFieldContext
@@ -123,7 +118,6 @@
             size: resolvedSize,
             leading: isLeading,
             trailing: isTrailing,
-            loading,
             highlight: resolvedHighlight
         })
     )
@@ -154,14 +148,20 @@
         <span class={classes.leading}>
             {@render leadingSlot()}
         </span>
-    {:else if isLeading && leadingIconName}
+    {:else if loadingLeading}
         <span class={classes.leading}>
-            <Icon name={leadingIconName} class={classes.leadingIcon} />
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.leadingIcon} />
+            </span>
         </span>
     {:else if avatar}
         <span class={classes.leading}>
             <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
         </span>
+    {:else if leadingIconName}
+        <span class={classes.leading}>
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        </span>
     {/if}
 
     <input
@@ -185,7 +185,13 @@
         <span class={classes.trailing}>
             {@render trailingSlot()}
         </span>
-    {:else if isTrailing && trailingIconName}
+    {:else if loadingTrailing}
+        <span class={classes.trailing}>
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.trailingIcon} />
+            </span>
+        </span>
+    {:else if trailingIconName}
         <span class={classes.trailing}>
             <Icon name={trailingIconName} class={classes.trailingIcon} />
         </span>

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/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}`]: unknown;
     /**
      * Bindable reference to the root DOM element.
      */