ui-svelte 0.2.11 → 0.2.12

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>

package/dist/navigation/NavMenu.svelte

@@ -1,33 +1,39 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import { ChevronDown24RegularIcon } from '../icons/index.js';
-	import { Icon } from '../index.js';
-	import { cn } from '../utils/class-names.js';
-	import type { Snippet } from 'svelte';
-	import { onMount } from 'svelte';
+<script lang="ts" module>
+	import type { IconData } from '../index.js';
 
-	type SubmenuItem = {
+	export type NavMenuSubItem = {
 		label: string;
 		description?: string;
 		href?: string;
-		onclick?: (item: SubmenuItem) => void;
+		onclick?: (item: NavMenuSubItem) => void;
+		icon?: IconData;
 	};
 
-	type MenuItem = {
+	export type NavMenuItem = {
 		label: string;
 		description?: string;
 		href?: string;
-		onclick?: (item: MenuItem) => void;
-		subitems?: SubmenuItem[];
+		onclick?: (item: NavMenuItem) => void;
+		subitems?: NavMenuSubItem[];
 		megamenu?: Snippet;
 		type?: 'item' | 'submenu' | 'megamenu';
+		icon?: IconData;
 	};
+</script>
+
+<script lang="ts">
+	import { page } from '$app/state';
+	import { ChevronDown24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
 
 	type Props = {
-		items: MenuItem[];
+		items: NavMenuItem[];
 		size?: 'sm' | 'md' | 'lg';
-		isSolid?: boolean;
-		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		variant?: 'solid' | 'soft' | 'ghost';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		class?: string;
 	};
 
@@ -35,8 +41,8 @@
 		items = [],
 		class: className,
 		size = 'md',
-		isSolid = false,
-		variant = 'muted'
+		variant = 'ghost',
+		color = 'muted'
 	}: Props = $props();
 
 	let openSubmenuIndex = $state<number | null>(null);
@@ -56,9 +62,13 @@
 		lg: 'is-lg'
 	};
 
-	const solidClass = $derived(isSolid ? 'is-filled' : 'is-default');
-
 	const variantClasses = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		ghost: 'is-ghost'
+	};
+
+	const colorClasses = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -77,7 +87,7 @@
 		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
 	}
 
-	function hasActiveSubmenu(subitems?: SubmenuItem[]): boolean {
+	function hasActiveSubmenu(subitems?: NavMenuSubItem[]): boolean {
 		if (!subitems) return false;
 		return subitems.some((item) => isItemActive(item.href));
 	}
@@ -164,7 +174,7 @@
 		document.removeEventListener('click', handleClickOutside);
 	}
 
-	function handleItemClick(item: MenuItem, index: number) {
+	function handleItemClick(item: NavMenuItem, index: number) {
 		if (item.subitems || item.megamenu) {
 			toggleSubmenu(index);
 		} else if (item.onclick) {
@@ -172,7 +182,7 @@
 		}
 	}
 
-	function handleSubmenuItemClick(item: SubmenuItem) {
+	function handleSubmenuItemClick(item: NavMenuSubItem) {
 		if (item.onclick) {
 			item.onclick(item);
 		}
@@ -185,10 +195,15 @@
 	});
 </script>
 
-<nav class={cn('navmenu', sizeClasses[size], solidClass, variantClasses[variant], className)}>
+<nav
+	class={cn('navmenu', sizeClasses[size], variantClasses[variant], colorClasses[color], className)}
+>
 	{#each items as item, index}
 		{#if item.href && !item.subitems && !item.megamenu}
 			<a href={item.href} class={cn('navmenu-item', isItemActive(item.href) && 'is-active')}>
+				{#if item.icon}
+					<Icon icon={item.icon} class="navmenu-icon" />
+				{/if}
 				<span class="navmenu-label" data-text={item.label}>{item.label}</span>
 			</a>
 		{:else}
@@ -202,6 +217,9 @@
 				bind:this={triggerElements[index]}
 				onclick={() => handleItemClick(item, index)}
 			>
+				{#if item.icon}
+					<Icon icon={item.icon} class="navmenu-icon" />
+				{/if}
 				<span class="navmenu-label" data-text={item.label}>{item.label}</span>
 				{#if item.subitems || item.megamenu}
 					<Icon
@@ -240,6 +258,9 @@
 								stopEventListeners();
 							}}
 						>
+							{#if subitem.icon}
+								<Icon icon={subitem.icon} class="navmenu-submenu-icon" />
+							{/if}
 							<div class="navmenu-submenu-content">
 								<div class="navmenu-submenu-label">{subitem.label}</div>
 								{#if subitem.description}
@@ -253,6 +274,9 @@
 							class="navmenu-submenu-item"
 							onclick={() => handleSubmenuItemClick(subitem)}
 						>
+							{#if subitem.icon}
+								<Icon icon={subitem.icon} class="navmenu-submenu-icon" />
+							{/if}
 							<div class="navmenu-submenu-content">
 								<div class="navmenu-submenu-label">{subitem.label}</div>
 								{#if subitem.description}

package/dist/navigation/NavMenu.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { IconData } from '../index.js';
+export type NavMenuSubItem = {
+    label: string;
+    description?: string;
+    href?: string;
+    onclick?: (item: NavMenuSubItem) => void;
+    icon?: IconData;
+};
+export type NavMenuItem = {
+    label: string;
+    description?: string;
+    href?: string;
+    onclick?: (item: NavMenuItem) => void;
+    subitems?: NavMenuSubItem[];
+    megamenu?: Snippet;
+    type?: 'item' | 'submenu' | 'megamenu';
+    icon?: IconData;
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    items: NavMenuItem[];
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'soft' | 'ghost';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    class?: string;
+};
+declare const NavMenu: import("svelte").Component<Props, {}, "">;
+type NavMenu = ReturnType<typeof NavMenu>;
+export default NavMenu;