sv5ui 1.7.0 → 2.0.0

package/dist/Banner/banner.variants.js

@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants';
+export const bannerVariants = tv({
+    slots: {
+        root: 'relative z-30 w-full transition-colors',
+        container: 'flex items-center justify-between gap-3 min-h-12 px-4 py-2',
+        left: 'hidden lg:flex lg:flex-1 lg:items-center',
+        center: 'flex items-center gap-2 min-w-0',
+        right: 'flex items-center justify-end gap-2 lg:flex-1',
+        icon: 'size-5 shrink-0 pointer-events-none',
+        title: 'text-sm font-medium truncate',
+        actions: [
+            'flex items-center gap-2 ms-2',
+            '[&_button]:text-inherit [&_button]:border-current/30 [&_button]:hover:bg-current/10'
+        ],
+        close: 'shrink-0 text-inherit hover:bg-current/10'
+    },
+    variants: {
+        color: {
+            primary: {
+                root: 'bg-primary text-on-primary',
+                icon: 'text-on-primary',
+                title: 'text-on-primary'
+            },
+            secondary: {
+                root: 'bg-secondary text-on-secondary',
+                icon: 'text-on-secondary',
+                title: 'text-on-secondary'
+            },
+            tertiary: {
+                root: 'bg-tertiary text-on-tertiary',
+                icon: 'text-on-tertiary',
+                title: 'text-on-tertiary'
+            },
+            success: {
+                root: 'bg-success text-on-success',
+                icon: 'text-on-success',
+                title: 'text-on-success'
+            },
+            warning: {
+                root: 'bg-warning text-on-warning',
+                icon: 'text-on-warning',
+                title: 'text-on-warning'
+            },
+            error: {
+                root: 'bg-error text-on-error',
+                icon: 'text-on-error',
+                title: 'text-on-error'
+            },
+            info: {
+                root: 'bg-info text-on-info',
+                icon: 'text-on-info',
+                title: 'text-on-info'
+            },
+            surface: {
+                root: 'bg-inverse-surface text-inverse-on-surface',
+                icon: 'text-inverse-on-surface',
+                title: 'text-inverse-on-surface'
+            }
+        },
+        to: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        // -------------------------------------------------------------------
+        // Hover effects when banner is clickable (`to` is set)
+        // -------------------------------------------------------------------
+        { color: 'primary', to: true, class: { root: 'hover:bg-primary/90' } },
+        { color: 'secondary', to: true, class: { root: 'hover:bg-secondary/90' } },
+        { color: 'tertiary', to: true, class: { root: 'hover:bg-tertiary/90' } },
+        { color: 'success', to: true, class: { root: 'hover:bg-success/90' } },
+        { color: 'warning', to: true, class: { root: 'hover:bg-warning/90' } },
+        { color: 'error', to: true, class: { root: 'hover:bg-error/90' } },
+        { color: 'info', to: true, class: { root: 'hover:bg-info/90' } },
+        { color: 'surface', to: true, class: { root: 'hover:bg-inverse-surface/90' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        to: false
+    }
+});
+export const bannerDefaults = {
+    defaultVariants: bannerVariants.defaultVariants,
+    slots: {}
+};

package/dist/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Banner } from './Banner.svelte';
+export type { BannerProps } from './banner.types.js';

package/dist/Banner/index.js

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

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.