ui-svelte 0.2.11 → 0.2.13

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-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-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-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-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/layout/css/sidebar.css

@@ -13,68 +13,129 @@
 		.sidebar-body {
 			@apply relative flex min-h-0 w-full flex-col gap-3 p-3 overflow-hidden hover:overflow-y-auto;
 		}
-	}
-	.sidebar.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.sidebar.is-primary.is-solid {
-		@apply bg-primary text-on-primary;
-	}
-
-	.sidebar.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.sidebar.is-secondary.is-solid {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.sidebar.is-success {
-		@apply bg-on-success text-success;
-	}
-
-	.sidebar.is-success.is-solid {
-		@apply bg-success text-on-success;
-	}
-
-	.sidebar.is-info {
-		@apply bg-on-info text-info;
-	}
-
-	.sidebar.is-info.is-solid {
-		@apply bg-info text-on-info;
-	}
 
-	.sidebar.is-warning {
-		@apply bg-on-warning text-warning;
-	}
-
-	.sidebar.is-warning.is-solid {
-		@apply bg-warning text-on-warning;
-	}
-
-	.sidebar.is-danger {
-		@apply bg-on-danger text-danger;
-	}
-
-	.sidebar.is-danger.is-solid {
-		@apply bg-danger text-on-danger;
-	}
-
-	.sidebar.is-muted {
-		@apply bg-muted text-on-muted;
-	}
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
+		}
 
-	.sidebar.is-muted.is-solid {
-		@apply bg-on-muted text-muted;
-	}
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.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;
+			}
+		}
 
-	.sidebar.is-ghost {
-		@apply bg-background text-on-background;
-	}
+		&.is-outlined {
+			@apply border;
+
+			&.is-primary {
+				@apply border-primary text-primary;
+			}
+			&.is-secondary {
+				@apply border-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply border-muted text-on-muted;
+			}
+			&.is-background {
+				@apply border-on-background text-on-background;
+			}
+			&.is-surface {
+				@apply border-on-surface text-on-surface;
+			}
+			&.is-success {
+				@apply border-success text-success;
+			}
+			&.is-info {
+				@apply border-info text-info;
+			}
+			&.is-warning {
+				@apply border-warning text-warning;
+			}
+			&.is-danger {
+				@apply border-danger text-danger;
+			}
+		}
 
-	.sidebar.is-surface {
-		@apply bg-surface text-on-surface;
+		&.is-ghost {
+			@apply bg-transparent;
+
+			&.is-primary {
+				@apply text-primary;
+			}
+			&.is-secondary {
+				@apply text-secondary;
+			}
+			&.is-muted {
+				@apply text-on-muted;
+			}
+			&.is-background {
+				@apply text-on-background;
+			}
+			&.is-surface {
+				@apply text-on-surface;
+			}
+			&.is-success {
+				@apply text-success;
+			}
+			&.is-info {
+				@apply text-info;
+			}
+			&.is-warning {
+				@apply text-warning;
+			}
+			&.is-danger {
+				@apply text-danger;
+			}
+		}
 	}
 }

package/dist/navigation/BottomNav.svelte

@@ -14,29 +14,62 @@
 		isActive?: boolean;
 	};
 
+	type Color =
+		| 'primary'
+		| 'secondary'
+		| 'muted'
+		| 'success'
+		| 'info'
+		| 'warning'
+		| 'danger'
+		| 'surface'
+		| 'background';
+
 	type Props = {
 		items: BottomNavItem[];
-		variant?: 'primary' | 'secondary' | 'ghost' | 'line';
+		color?: Color;
+		fabColor?: Color;
+		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 = 'surface',
+		fabColor = 'primary',
+		variant = 'solid',
+		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',
+		background: 'is-background'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		blur: 'is-blur'
+	};
+
+	const activeStyles = {
+		line: 'active-line',
+		pill: 'active-pill'
 	};
 
 	const sizeClasses = {
@@ -45,13 +78,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,17 +96,24 @@
 <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
 	)}
 >
 	{#each items as item}
 		{@const active = isItemActive(item)}
-		{@const itemClass = cn('bottomnav-item', active && 'is-active', item.isFab && 'is-fab')}
+		{@const itemClass = cn(
+			'bottomnav-item',
+			active && 'is-active',
+			item.isFab && 'is-fab',
+			item.isFab && colors[fabColor]
+		)}
 
 		{#if item.href}
 			<a href={item.href} class={itemClass}>

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>