sv5ui-plus 5.0.4 → 5.0.6

package/dist/components/LocaleButton/LocaleButton.svelte

@@ -65,117 +65,113 @@ async function handleItemClick(event, item, close) {
 </script>
 
 <DropdownMenu
-    bind:open
-    {onOpenChange}
-    {side}
-    {sideOffset}
-    {align}
-    {alignOffset}
-    {avoidCollisions}
-    {collisionBoundary}
-    {collisionPadding}
-    {sticky}
-    {hideWhenDetached}
-    {onEscapeKeydown}
-    {onInteractOutside}
-    {onCloseAutoFocus}
-    {forceMount}
-    {loop}
-    {portal}
-    {arrow}
-    {size}
-    ui={fit ? { content: 'w-fit min-w-0' } : undefined}
+	bind:open
+	{onOpenChange}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{onEscapeKeydown}
+	{onInteractOutside}
+	{onCloseAutoFocus}
+	{forceMount}
+	{loop}
+	{portal}
+	{arrow}
+	{size}
+	ui={fit ? { content: "w-fit min-w-0" } : undefined}
 >
-    {#snippet children({ open: isOpen, props })}
-        <Button
-            {...props}
-            bind:ref
-            {variant}
-            {color}
-            {size}
-            {loading}
-            disabled={triggerDisabled}
-            {block}
-            {square}
-            class={classes.base}
-            aria-label={ariaLabel}
-            {...restProps}
-        >
-            {#if triggerContent}
-                {@render triggerContent({ open: isOpen, currentLocale })}
-            {:else}
-                {#if showIcon}
-                    <span class={classes.triggerIcon}>
-                        <Icon name={icon} />
-                    </span>
-                {/if}
-                <span class={classes.triggerLabel}>{triggerLabel}</span>
-                {#if showChevron}
-                    <span class={classes.triggerChevron}>
-                        <Icon name={chevronIcon} />
-                    </span>
-                {/if}
-            {/if}
-        </Button>
-    {/snippet}
+	{#snippet children({ open: isOpen, props })}
+		<Button
+			{...props}
+			bind:ref
+			{variant}
+			{color}
+			{size}
+			{loading}
+			disabled={triggerDisabled}
+			{block}
+			{square}
+			class={classes.base}
+			aria-label={ariaLabel}
+			{...restProps}
+		>
+			{#if triggerContent}
+				{@render triggerContent({ open: isOpen, currentLocale })}
+			{:else}
+				{#if showIcon}
+					<span class={classes.triggerIcon}>
+						<Icon name={icon} />
+					</span>
+				{/if}
+				<span class={classes.triggerLabel}>{triggerLabel}</span>
+				{#if showChevron}
+					<span class={classes.triggerChevron}>
+						<Icon name={chevronIcon} />
+					</span>
+				{/if}
+			{/if}
+		</Button>
+	{/snippet}
 
-    {#snippet content({ close })}
-        {#if menuSnippet}
-            {@render menuSnippet({ close })}
-        {:else}
-            <div class={classes.menu}>
-                {#if menuLabel}
-                    <p class={classes.menuLabel}>{menuLabel}</p>
-                {/if}
+	{#snippet content({ close })}
+		{#if menuSnippet}
+			{@render menuSnippet({ close })}
+		{:else}
+			<div class={classes.menu}>
+				{#if menuLabel}
+					<p class={classes.menuLabel}>{menuLabel}</p>
+				{/if}
 
-                {#each locales as item (item.code)}
-                    {@const current = isCurrentLocale(item)}
-                    {@const href = getResolvedHref(item)}
-                    {@const itemDisabled = isItemDisabled(item)}
+				{#each locales as item (item.code)}
+					{@const current = isCurrentLocale(item)}
+					{@const href = getResolvedHref(item)}
+					{@const itemDisabled = isItemDisabled(item)}
 
-                    {#if itemSnippet}
-                        {@render itemSnippet({ item, current, disabled: itemDisabled, close })}
-                    {:else}
-                        <Link
-                            href={href}
-                            hreflang={item.hreflang ?? item.code}
-                            raw
-                            role="menuitemradio"
-                            aria-checked={current}
-                            disabled={itemDisabled}
-                            class={[
-                                classes.item,
-                                current ? classes.itemCurrent : classes.itemIdle,
-                                item.class
-                            ]}
-                            onclick={(event) => handleItemClick(event, item, close)}
-                        >
-                            <span class={classes.itemLeading}>
-                                {#if item.icon}
-                                    <Icon name={item.icon} />
-                                {/if}
-                                <span class={classes.itemText}>
-                                    <span class={classes.itemLabel}>{item.label}</span>
-                                    {#if item.description}
-                                        <span class={classes.itemDescription}>{item.description}</span>
-                                    {/if}
-                                </span>
-                            </span>
+					{#if itemSnippet}
+						{@render itemSnippet({ item, current, disabled: itemDisabled, close })}
+					{:else}
+						<Link
+							{href}
+							hreflang={item.hreflang ?? item.code}
+							raw
+							role="menuitemradio"
+							aria-checked={current}
+							disabled={itemDisabled}
+							class={[classes.item, current ? classes.itemCurrent : classes.itemIdle, item.class]}
+							onclick={(event) => handleItemClick(event, item, close)}
+						>
+							<span class={classes.itemLeading}>
+								{#if item.icon}
+									<Icon name={item.icon} />
+								{/if}
+								<span class={classes.itemText}>
+									<span class={classes.itemLabel}>{item.label}</span>
+									{#if item.description}
+										<span class={classes.itemDescription}>{item.description}</span>
+									{/if}
+								</span>
+							</span>
 
-                            <span class="flex items-center gap-2">
-                                {#if showCode}
-                                    <span class={classes.itemCode}>{item.shortLabel ?? item.code}</span>
-                                {/if}
-                                {#if showIndicator && current}
-                                    <span class={classes.itemIndicator}>
-                                        <Icon name={icons.check} />
-                                    </span>
-                                {/if}
-                            </span>
-                        </Link>
-                    {/if}
-                {/each}
-            </div>
-        {/if}
-    {/snippet}
+							<span class="flex items-center gap-2">
+								{#if showCode}
+									<span class={classes.itemCode}>{item.shortLabel ?? item.code}</span>
+								{/if}
+								{#if showIndicator && current}
+									<span class={classes.itemIndicator}>
+										<Icon name={icons.check} />
+									</span>
+								{/if}
+							</span>
+						</Link>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	{/snippet}
 </DropdownMenu>

package/dist/components/LocaleButton/LocaleButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LocaleButtonProps } from './locale-button.types.js';
+import type { LocaleButtonProps } from "./locale-button.types.js";
 export type Props = LocaleButtonProps;
 declare const LocaleButton: import("svelte").Component<LocaleButtonProps, {}, "ref" | "open">;
 type LocaleButton = ReturnType<typeof LocaleButton>;

package/dist/components/LocaleButton/index.d.ts

@@ -1,2 +1,2 @@
-export { default as LocaleButton } from './LocaleButton.svelte';
-export type { LocaleButtonLocale, LocaleButtonProps } from './locale-button.types.js';
+export { default as LocaleButton } from "./LocaleButton.svelte";
+export type { LocaleButtonLocale, LocaleButtonProps } from "./locale-button.types.js";

package/dist/components/LocaleButton/index.js

@@ -1 +1 @@
-export { default as LocaleButton } from './LocaleButton.svelte';
+export { default as LocaleButton } from "./LocaleButton.svelte";

package/dist/components/LocaleButton/locale-button.types.d.ts

@@ -1,9 +1,9 @@
-import type { DropdownMenuContentPropsWithoutHTML, DropdownMenuRootPropsWithoutHTML } from 'bits-ui';
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ClassNameValue } from 'tailwind-merge';
-import type { ButtonProps } from 'sv5ui';
-import type { LocaleButtonSlots } from './locale-button.variants.js';
+import type { DropdownMenuContentPropsWithoutHTML, DropdownMenuRootPropsWithoutHTML } from "bits-ui";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ClassNameValue } from "tailwind-merge";
+import type { ButtonProps } from "sv5ui";
+import type { LocaleButtonSlots } from "./locale-button.variants.js";
 export type LocaleButtonLocale = {
     /**
      * Locale code used by your i18n layer, for example `en` or `th`.
@@ -43,9 +43,9 @@ export type LocaleButtonLocale = {
      */
     class?: ClassNameValue;
 };
-type RootProps = Pick<DropdownMenuRootPropsWithoutHTML, 'open' | 'onOpenChange'>;
-type ContentProps = Pick<DropdownMenuContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'onInteractOutside' | 'onCloseAutoFocus' | 'forceMount' | 'loop'>;
-export type LocaleButtonProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class' | 'color'> & RootProps & ContentProps & {
+type RootProps = Pick<DropdownMenuRootPropsWithoutHTML, "open" | "onOpenChange">;
+type ContentProps = Pick<DropdownMenuContentPropsWithoutHTML, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "sticky" | "hideWhenDetached" | "onEscapeKeydown" | "onInteractOutside" | "onCloseAutoFocus" | "forceMount" | "loop">;
+export type LocaleButtonProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class" | "color"> & RootProps & ContentProps & {
     /**
      * Bind a reference to the underlying trigger HTMLButtonElement.
      */
@@ -62,17 +62,17 @@ export type LocaleButtonProps = Omit<HTMLAttributes<HTMLElement>, 'children' | '
      * Controls the visual style of the trigger button.
      * @default 'outline'
      */
-    variant?: NonNullable<ButtonProps['variant']>;
+    variant?: NonNullable<ButtonProps["variant"]>;
     /**
      * Sets the color scheme of the trigger button.
      * @default 'surface'
      */
-    color?: NonNullable<ButtonProps['color']>;
+    color?: NonNullable<ButtonProps["color"]>;
     /**
      * Controls the trigger button size.
      * @default 'md'
      */
-    size?: NonNullable<ButtonProps['size']>;
+    size?: NonNullable<ButtonProps["size"]>;
     /**
      * Shrinks the dropdown menu width to fit its content (`w-fit min-w-0`).
      * @default false

package/dist/components/LocaleButton/locale-button.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from 'tailwind-variants';
-import type { ButtonProps } from 'sv5ui';
+import { type VariantProps } from "tailwind-variants";
+import type { ButtonProps } from "sv5ui";
 export declare const localeButtonVariants: import("tailwind-variants").TVReturnType<{
     fit: {
         true: {

package/dist/components/LocaleButton/locale-button.variants.js

@@ -1,98 +1,98 @@
-import { tv } from 'tailwind-variants';
+import { tv } from "tailwind-variants";
 export const localeButtonVariants = tv({
     slots: {
-        base: '',
-        triggerLabel: 'truncate',
-        triggerIcon: 'shrink-0',
-        triggerChevron: 'shrink-0 opacity-70',
-        menu: 'space-y-1 rounded-xl p-1',
-        menuLabel: 'font-semibold tracking-[0.14em] text-on-surface-variant uppercase',
+        base: "",
+        triggerLabel: "truncate",
+        triggerIcon: "shrink-0",
+        triggerChevron: "shrink-0 opacity-70",
+        menu: "space-y-1 rounded-xl p-1",
+        menuLabel: "font-semibold tracking-[0.14em] text-on-surface-variant uppercase",
         item: [
-            'flex w-full items-center justify-between text-left transition-colors',
-            'focus-visible:ring-primary/40 focus-visible:outline-none focus-visible:ring-2'
+            "flex w-full items-center justify-between text-left transition-colors",
+            "focus-visible:ring-primary/40 focus-visible:outline-none focus-visible:ring-2",
         ],
-        itemIdle: 'text-on-surface hover:bg-surface-container-high',
-        itemCurrent: 'bg-primary/10 text-primary',
-        itemLeading: 'flex min-w-0 items-start gap-2',
-        itemText: 'min-w-0 space-y-0.5',
-        itemLabel: 'truncate font-medium',
-        itemDescription: 'text-on-surface-variant',
-        itemCode: 'shrink-0 rounded-md bg-surface-container font-medium text-on-surface-variant uppercase',
-        itemIndicator: 'shrink-0 text-primary'
+        itemIdle: "text-on-surface hover:bg-surface-container-high",
+        itemCurrent: "bg-primary/10 text-primary",
+        itemLeading: "flex min-w-0 items-start gap-2",
+        itemText: "min-w-0 space-y-0.5",
+        itemLabel: "truncate font-medium",
+        itemDescription: "text-on-surface-variant",
+        itemCode: "shrink-0 rounded-md bg-surface-container font-medium text-on-surface-variant uppercase",
+        itemIndicator: "shrink-0 text-primary",
     },
     variants: {
         fit: {
             true: {
-                menu: 'w-fit min-w-0'
+                menu: "w-fit min-w-0",
             },
             false: {
-                menu: 'min-w-52'
-            }
+                menu: "min-w-52",
+            },
         },
         size: {
             xs: {
-                triggerIcon: 'size-3.5',
-                triggerChevron: 'size-3.5',
-                menuLabel: 'px-2 pt-1.5 pb-0.5 text-[10px]',
-                item: 'px-2 py-1 text-xs gap-1.5 rounded-md',
-                itemLabel: 'text-xs',
-                itemDescription: 'text-[10px]',
-                itemCode: 'px-1 py-0.5 text-[9px]',
-                itemIndicator: 'size-3'
+                triggerIcon: "size-3.5",
+                triggerChevron: "size-3.5",
+                menuLabel: "px-2 pt-1.5 pb-0.5 text-[10px]",
+                item: "px-2 py-1 text-xs gap-1.5 rounded-md",
+                itemLabel: "text-xs",
+                itemDescription: "text-[10px]",
+                itemCode: "px-1 py-0.5 text-[9px]",
+                itemIndicator: "size-3",
             },
             sm: {
-                triggerIcon: 'size-4',
-                triggerChevron: 'size-4',
-                menuLabel: 'px-2.5 pt-2 pb-0.5 text-[11px]',
-                item: 'px-2.5 py-1.5 text-xs gap-2 rounded-md',
-                itemLabel: 'text-xs',
-                itemDescription: 'text-[11px]',
-                itemCode: 'px-1 py-0.5 text-[10px]',
-                itemIndicator: 'size-3.5'
+                triggerIcon: "size-4",
+                triggerChevron: "size-4",
+                menuLabel: "px-2.5 pt-2 pb-0.5 text-[11px]",
+                item: "px-2.5 py-1.5 text-xs gap-2 rounded-md",
+                itemLabel: "text-xs",
+                itemDescription: "text-[11px]",
+                itemCode: "px-1 py-0.5 text-[10px]",
+                itemIndicator: "size-3.5",
             },
             md: {
-                triggerIcon: 'size-5',
-                triggerChevron: 'size-5',
-                menuLabel: 'px-3 pt-2 pb-1 text-xs',
-                item: 'px-3 py-2 text-sm gap-3 rounded-lg',
-                itemLabel: 'text-sm',
-                itemDescription: 'text-xs',
-                itemCode: 'px-1.5 py-0.5 text-[11px]',
-                itemIndicator: 'size-4'
+                triggerIcon: "size-5",
+                triggerChevron: "size-5",
+                menuLabel: "px-3 pt-2 pb-1 text-xs",
+                item: "px-3 py-2 text-sm gap-3 rounded-lg",
+                itemLabel: "text-sm",
+                itemDescription: "text-xs",
+                itemCode: "px-1.5 py-0.5 text-[11px]",
+                itemIndicator: "size-4",
             },
             lg: {
-                triggerIcon: 'size-5',
-                triggerChevron: 'size-5',
-                menuLabel: 'px-3.5 pt-2.5 pb-1 text-sm',
-                item: 'px-3.5 py-2.5 text-base gap-3.5 rounded-lg',
-                itemLabel: 'text-base',
-                itemDescription: 'text-xs',
-                itemCode: 'px-2 py-0.5 text-xs',
-                itemIndicator: 'size-5'
+                triggerIcon: "size-5",
+                triggerChevron: "size-5",
+                menuLabel: "px-3.5 pt-2.5 pb-1 text-sm",
+                item: "px-3.5 py-2.5 text-base gap-3.5 rounded-lg",
+                itemLabel: "text-base",
+                itemDescription: "text-xs",
+                itemCode: "px-2 py-0.5 text-xs",
+                itemIndicator: "size-5",
             },
             xl: {
-                triggerIcon: 'size-6',
-                triggerChevron: 'size-6',
-                menuLabel: 'px-4 pt-3 pb-1 text-sm',
-                item: 'px-4 py-3 text-lg gap-4 rounded-xl',
-                itemLabel: 'text-lg',
-                itemDescription: 'text-sm',
-                itemCode: 'px-2 py-1 text-sm',
-                itemIndicator: 'size-6'
-            }
-        }
+                triggerIcon: "size-6",
+                triggerChevron: "size-6",
+                menuLabel: "px-4 pt-3 pb-1 text-sm",
+                item: "px-4 py-3 text-lg gap-4 rounded-xl",
+                itemLabel: "text-lg",
+                itemDescription: "text-sm",
+                itemCode: "px-2 py-1 text-sm",
+                itemIndicator: "size-6",
+            },
+        },
     },
     defaultVariants: {
         fit: false,
-        size: 'md'
-    }
+        size: "md",
+    },
 });
 export const localeButtonDefaults = {
     defaultVariants: {
         ...localeButtonVariants.defaultVariants,
-        color: 'surface',
-        variant: 'outline',
-        size: 'md'
+        color: "surface",
+        variant: "outline",
+        size: "md",
     },
-    slots: {}
+    slots: {},
 };

package/dist/components/Marquee/Marquee.svelte

@@ -7,44 +7,44 @@ let styles = $derived(marqueeVariants({
 }));
 </script>
 
-<div 
-    class={twMerge(styles.root() as string, className)} 
-    style:--gap={gap}
-    style:--duration={duration}
-    {...restProps}
+<div
+	class={twMerge(styles.root() as string, className)}
+	style:--gap={gap}
+	style:--duration={duration}
+	{...restProps}
 >
-    {#each Array(Math.max(2, repeat)) as _}
-        <div class={styles.content() as string}>
-            {@render children?.()}
-        </div>
-    {/each}
+	{#each Array(Math.max(2, repeat)) as _}
+		<div class={styles.content() as string}>
+			{@render children?.()}
+		</div>
+	{/each}
 </div>
 
 <style>
-    /* Injected keyframes for marquee animation since it might not be in tailwind config */
-    :global(.animate-marquee) {
-        animation: marquee var(--duration) linear infinite;
-    }
-    
-    :global(.animate-marquee-vertical) {
-        animation: marquee-vertical var(--duration) linear infinite;
-    }
+	/* Injected keyframes for marquee animation since it might not be in tailwind config */
+	:global(.animate-marquee) {
+		animation: marquee var(--duration) linear infinite;
+	}
 
-    @keyframes marquee {
-        0% {
-            transform: translateX(0);
-        }
-        100% {
-            transform: translateX(calc(-100% - var(--gap)));
-        }
-    }
+	:global(.animate-marquee-vertical) {
+		animation: marquee-vertical var(--duration) linear infinite;
+	}
 
-    @keyframes marquee-vertical {
-        0% {
-            transform: translateY(0);
-        }
-        100% {
-            transform: translateY(calc(-100% - var(--gap)));
-        }
-    }
+	@keyframes marquee {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(calc(-100% - var(--gap)));
+		}
+	}
+
+	@keyframes marquee-vertical {
+		0% {
+			transform: translateY(0);
+		}
+		100% {
+			transform: translateY(calc(-100% - var(--gap)));
+		}
+	}
 </style>

package/dist/components/Marquee/Marquee.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MarqueeProps } from './marquee.types.js';
+import type { MarqueeProps } from "./marquee.types.js";
 declare const Marquee: import("svelte").Component<MarqueeProps, {}, "">;
 type Marquee = ReturnType<typeof Marquee>;
 export default Marquee;

package/dist/components/Marquee/index.d.ts

@@ -1,4 +1,4 @@
-import Marquee from './Marquee.svelte';
+import Marquee from "./Marquee.svelte";
 export { Marquee };
-export * from './marquee.types.js';
-export * from './marquee.variants.js';
+export * from "./marquee.types.js";
+export * from "./marquee.variants.js";

package/dist/components/Marquee/index.js

@@ -1,4 +1,4 @@
-import Marquee from './Marquee.svelte';
+import Marquee from "./Marquee.svelte";
 export { Marquee };
-export * from './marquee.types.js';
-export * from './marquee.variants.js';
+export * from "./marquee.types.js";
+export * from "./marquee.variants.js";

package/dist/components/Marquee/marquee.types.d.ts

@@ -1,12 +1,12 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { MarqueeVariantProps } from './marquee.variants.js';
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { MarqueeVariantProps } from "./marquee.variants.js";
 export interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Direction of the marquee animation.
      * @default 'left'
      */
-    direction?: MarqueeVariantProps['direction'];
+    direction?: MarqueeVariantProps["direction"];
     /**
      * Whether to pause the animation when hovered.
      * @default false

package/dist/components/Marquee/marquee.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const marqueeVariants: import("tailwind-variants").TVReturnType<{
     direction: {
         left: {