ui-svelte 0.2.10 → 0.2.12

package/dist/layout/AppBar.svelte

@@ -12,15 +12,7 @@
 		startClass?: string;
 		centerClass?: string;
 		endClass?: string;
-		isBlurred?: boolean;
-		isBordered?: boolean;
-		borderOnScrollOnly?: boolean;
-		hideOnScroll?: boolean;
-		solidOnScroll?: boolean;
-		isSticky?: boolean;
-		isFloating?: boolean;
-		isBoxed?: boolean;
-		variant?:
+		color?:
 			| 'primary'
 			| 'secondary'
 			| 'muted'
@@ -29,7 +21,16 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'ghost';
+			| 'default';
+		variant?: 'solid' | 'soft';
+		isBlurred?: boolean;
+		isBordered?: boolean;
+		borderOnScrollOnly?: boolean;
+		hideOnScroll?: boolean;
+		solidOnScroll?: boolean;
+		isSticky?: boolean;
+		isFloating?: boolean;
+		isBoxed?: boolean;
 	};
 
 	const {
@@ -41,12 +42,13 @@
 		startClass,
 		centerClass,
 		endClass,
+		color = 'default',
+		variant = 'soft',
 		isBordered,
 		borderOnScrollOnly = false,
 		isBlurred,
 		isSticky,
 		isBoxed,
-		variant = 'ghost',
 		hideOnScroll,
 		solidOnScroll = false,
 		isFloating = false
@@ -59,7 +61,7 @@
 
 	const scroll = useScroll();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -68,7 +70,12 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		ghost: 'is-ghost'
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
 	$effect(() => {
@@ -108,7 +115,8 @@
 	bind:this={headerElement}
 	class={cn(
 		'appbar',
-		variantClasses[variant],
+		colors[color],
+		variants[variant],
 		shouldShowBorder && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',

package/dist/layout/AppBar.svelte.d.ts

@@ -8,6 +8,8 @@ type Props = {
     startClass?: string;
     centerClass?: string;
     endClass?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft';
     isBlurred?: boolean;
     isBordered?: boolean;
     borderOnScrollOnly?: boolean;
@@ -16,7 +18,6 @@ type Props = {
     isSticky?: boolean;
     isFloating?: boolean;
     isBoxed?: boolean;
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const AppBar: import("svelte").Component<Props, {}, "">;
 type AppBar = ReturnType<typeof AppBar>;

package/dist/layout/Footer.svelte

@@ -12,11 +12,7 @@
 		startClass?: string;
 		centerClass?: string;
 		endClass?: string;
-		isBlurred?: boolean;
-		isBordered?: boolean;
-		isBoxed?: boolean;
-		hideOnScroll?: boolean;
-		variant?:
+		color?:
 			| 'primary'
 			| 'secondary'
 			| 'muted'
@@ -25,7 +21,12 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'ghost';
+			| 'default';
+		variant?: 'solid' | 'soft';
+		isBlurred?: boolean;
+		isBordered?: boolean;
+		isBoxed?: boolean;
+		hideOnScroll?: boolean;
 	};
 
 	const {
@@ -37,11 +38,12 @@
 		startClass,
 		centerClass,
 		endClass,
+		color = 'default',
+		variant = 'soft',
 		isBordered,
 		isBlurred,
 		isBoxed,
-		hideOnScroll,
-		variant = 'ghost'
+		hideOnScroll
 	}: Props = $props();
 
 	let footerElement = $state<HTMLElement | null>(null);
@@ -51,7 +53,7 @@
 
 	const scroll = useScroll();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -60,7 +62,12 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		ghost: 'is-ghost'
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
 	$effect(() => {
@@ -93,7 +100,8 @@
 	bind:this={footerElement}
 	class={cn(
 		'footer',
-		variantClasses[variant],
+		colors[color],
+		variants[variant],
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',

package/dist/layout/Footer.svelte.d.ts

@@ -8,11 +8,12 @@ type Props = {
     startClass?: string;
     centerClass?: string;
     endClass?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft';
     isBlurred?: boolean;
     isBordered?: boolean;
     isBoxed?: boolean;
     hideOnScroll?: boolean;
-    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/layout/Provider.svelte

@@ -5,22 +5,45 @@
 
 	type Props = {
 		children: Snippet;
-		toastSolid?: boolean;
+		toastVariant?: 'solid' | 'soft';
 		toastIcon?: boolean;
 		toastPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		themeTransition?: 'circle' | 'slide' | 'fade' | 'vertical' | 'none';
+		pageTransition?: 'fade' | 'slide' | 'scale' | 'none';
 	};
 
-	const { children, toastSolid, toastPosition, toastIcon }: Props = $props();
+	const {
+		children,
+		toastVariant,
+		toastPosition,
+		toastIcon,
+		themeTransition = 'circle',
+		pageTransition = 'fade'
+	}: Props = $props();
 
 	onNavigate((navigation) => {
+		if (pageTransition === 'none') return;
 		if (!document.startViewTransition) return;
 		return new Promise((resolve) => {
-			document.startViewTransition(async () => {
+			document.documentElement.classList.add('page-transitioning');
+			document.documentElement.setAttribute('data-page-transition', pageTransition);
+
+			const transition = document.startViewTransition(async () => {
 				resolve();
 				await navigation.complete;
 			});
+
+			transition.finished.finally(() => {
+				document.documentElement.classList.remove('page-transitioning');
+				document.documentElement.removeAttribute('data-page-transition');
+			});
 		});
 	});
+	$effect(() => {
+		if (typeof document !== 'undefined') {
+			document.documentElement.setAttribute('data-theme-transition', themeTransition);
+		}
+	});
 </script>
 
 <svelte:head>
@@ -49,4 +72,4 @@
 </svelte:head>
 
 {@render children()}
-<Toast position={toastPosition} showIcon={toastIcon} isSolid={toastSolid} />
+<Toast position={toastPosition} showIcon={toastIcon} variant={toastVariant} />

package/dist/layout/Provider.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
-    toastSolid?: boolean;
+    toastVariant?: 'solid' | 'soft';
     toastIcon?: boolean;
     toastPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    themeTransition?: 'circle' | 'slide' | 'fade' | 'vertical' | 'none';
+    pageTransition?: 'fade' | 'slide' | 'scale' | 'none';
 };
 declare const Provider: import("svelte").Component<Props, {}, "">;
 type Provider = ReturnType<typeof Provider>;

package/dist/layout/css/app-bar.css

@@ -19,15 +19,15 @@
 		}
 
 		&.is-transparent {
-			@apply bg-transparent border-transparent shadow-none;
+			@apply bg-transparent! border-transparent shadow-none;
 		}
 
 		&.is-floating-enabled {
-			@apply left-1/2 -translate-x-1/2;
+			@apply fixed top-0 left-1/2 -translate-x-1/2;
 		}
 
 		&.is-floating {
-			@apply mt-4 w-[calc(100%-2rem)] rounded-ui shadow-md shadow-muted border border-muted;
+			@apply mt-4 w-[calc(100%-2rem)] rounded-box shadow-md shadow-muted border border-muted;
 		}
 
 		&.is-floating-enabled:not(.is-floating) {
@@ -35,6 +35,66 @@
 			@apply border-b border-muted;
 		}
 
+		&.is-soft {
+			&.is-primary {
+				@apply bg-on-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-on-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-on-success text-success;
+			}
+			&.is-info {
+				@apply bg-on-info text-info;
+			}
+			&.is-warning {
+				@apply bg-on-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-on-danger text-danger;
+			}
+			&.is-default {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+		}
+
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted text-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
+			&.is-default {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+		}
+
 		.appbar-content {
 			@apply flex flex-nowrap items-center justify-between relative;
 			@apply w-full px-2 h-full min-h-12;
@@ -52,67 +112,4 @@
 			}
 		}
 	}
-	.appbar.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.appbar.is-primary.is-solid {
-		@apply bg-primary text-on-primary;
-	}
-
-	.appbar.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.appbar.is-secondary.is-solid {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.appbar.is-success {
-		@apply bg-on-success text-success;
-	}
-
-	.appbar.is-success.is-solid {
-		@apply bg-success text-on-success;
-	}
-
-	.appbar.is-info {
-		@apply bg-on-info text-info;
-	}
-
-	.appbar.is-info.is-solid {
-		@apply bg-info text-on-info;
-	}
-
-	.appbar.is-warning {
-		@apply bg-on-warning text-warning;
-	}
-
-	.appbar.is-warning.is-solid {
-		@apply bg-warning text-on-warning;
-	}
-
-	.appbar.is-danger {
-		@apply bg-on-danger text-danger;
-	}
-
-	.appbar.is-danger.is-solid {
-		@apply bg-danger text-on-danger;
-	}
-
-	.appbar.is-muted {
-		@apply bg-muted text-on-muted;
-	}
-
-	.appbar.is-muted.is-solid {
-		@apply bg-on-muted text-muted;
-	}
-
-	.appbar.is-ghost {
-		@apply bg-background text-on-background;
-	}
-
-	.appbar.is-surface {
-		@apply bg-surface text-on-surface;
-	}
 }

package/dist/layout/css/footer.css

@@ -1,10 +1,10 @@
 @layer components {
 	.footer {
-		@apply w-full bg-background mt-auto;
+		@apply w-full mt-auto;
 		@apply transition-all duration-300 ease-in-out;
 
 		&.is-blurred {
-			@apply backdrop-blur-lg bg-transparent;
+			@apply backdrop-blur-lg;
 		}
 
 		&.is-bordered {
@@ -15,6 +15,66 @@
 			@apply translate-y-full;
 		}
 
+		&.is-soft {
+			&.is-primary {
+				@apply bg-on-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-on-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-on-success text-success;
+			}
+			&.is-info {
+				@apply bg-on-info text-info;
+			}
+			&.is-warning {
+				@apply bg-on-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-on-danger text-danger;
+			}
+			&.is-default {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+		}
+
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted text-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
+			&.is-default {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+		}
+
 		.footer-content {
 			@apply column md:row flex-nowrap items-center justify-between relative;
 			@apply w-full px-2 h-full min-h-12;
@@ -32,67 +92,4 @@
 			}
 		}
 	}
-	.footer.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.footer.is-primary.is-solid {
-		@apply bg-primary text-on-primary;
-	}
-
-	.footer.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.footer.is-secondary.is-solid {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.footer.is-success {
-		@apply bg-on-success text-success;
-	}
-
-	.footer.is-success.is-solid {
-		@apply bg-success text-on-success;
-	}
-
-	.footer.is-info {
-		@apply bg-on-info text-info;
-	}
-
-	.footer.is-info.is-solid {
-		@apply bg-info text-on-info;
-	}
-
-	.footer.is-warning {
-		@apply bg-on-warning text-warning;
-	}
-
-	.footer.is-warning.is-solid {
-		@apply bg-warning text-on-warning;
-	}
-
-	.footer.is-danger {
-		@apply bg-on-danger text-danger;
-	}
-
-	.footer.is-danger.is-solid {
-		@apply bg-danger text-on-danger;
-	}
-
-	.footer.is-muted {
-		@apply bg-muted text-on-muted;
-	}
-
-	.footer.is-muted.is-solid {
-		@apply bg-on-muted text-muted;
-	}
-
-	.footer.is-ghost {
-		@apply bg-background text-on-background;
-	}
-
-	.footer.is-surface {
-		@apply bg-surface text-on-surface;
-	}
 }

package/dist/navigation/BottomNav.svelte

@@ -16,27 +16,56 @@
 
 	type Props = {
 		items: BottomNavItem[];
-		variant?: 'primary' | 'secondary' | 'ghost' | 'line';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'default';
+		variant?: 'solid' | 'soft' | 'blur';
+		activeStyle?: 'line' | 'pill';
 		size?: 'sm' | 'md' | 'lg';
-		isSolid?: boolean;
 		isBlock?: boolean;
+		isBordered?: boolean;
 		class?: string;
 	};
 
 	const {
 		items = [],
 		class: className,
-		variant = 'primary',
+		color = 'primary',
+		variant = 'soft',
+		activeStyle = 'line',
 		size = 'md',
-		isSolid = false,
-		isBlock = false
+		isBlock = false,
+		isBordered = true
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		ghost: 'is-ghost',
-		line: 'is-line'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		blur: 'is-blur'
+	};
+
+	const activeStyles = {
+		line: 'active-line',
+		pill: 'active-pill'
 	};
 
 	const sizeClasses = {
@@ -45,13 +74,10 @@
 		lg: 'is-lg'
 	};
 
-	// Determine if any item has a label
 	const hasLabels = $derived(items.some((item) => item.label));
 
 	function isItemActive(item: BottomNavItem): boolean {
-		// If item has explicit isActive, use that
 		if (item.isActive !== undefined) return item.isActive;
-		// Otherwise check against current URL
 		if (!item.href) return false;
 		return page.url.pathname === item.href || page.url.pathname.startsWith(item.href + '/');
 	}
@@ -66,11 +92,13 @@
 <nav
 	class={cn(
 		'bottomnav',
-		variantClasses[variant],
+		colors[color],
+		variants[variant],
+		activeStyles[activeStyle],
 		sizeClasses[size],
-		isSolid && 'is-solid',
 		!hasLabels && 'is-icon-only',
 		!isBlock && 'is-fixed',
+		isBordered && 'is-bordered',
 		className
 	)}
 >

package/dist/navigation/FooterGroup.svelte

@@ -35,7 +35,7 @@
 					>
 						{link.label}
 						{#if link.external}
-							<span class="sr-only">(abre en nueva ventana)</span>
+							<span class="sr-only">(opens in new window)</span>
 						{/if}
 					</a>
 				</li>