ui-svelte 0.2.2 → 0.2.4

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

@@ -9,4 +9,67 @@
 			@apply overflow-hidden;
 		}
 	}
+	.dock.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.dock.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.dock.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.dock.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.dock.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.dock.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.dock.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.dock.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.dock.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.dock.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.dock.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.dock.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.dock.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.dock.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.dock.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.dock.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }

package/dist/layout/css/footer.css

@@ -32,4 +32,67 @@
 			}
 		}
 	}
+	.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

@@ -14,4 +14,67 @@
 			@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;
+	}
+
+	.sidebar.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.sidebar.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.sidebar.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }

package/dist/navigation/FooterGroup.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type FooterLink = {
+		label: string;
+		href: string;
+		external?: boolean;
+	};
+
+	type Props = {
+		title?: string;
+		links?: FooterLink[];
+		children?: Snippet;
+		class?: string;
+	};
+
+	const { title, links = [], children, class: className }: Props = $props();
+</script>
+
+<div class={cn('footer-group', className)}>
+	{#if title}
+		<h3 class="footer-group-title">{title}</h3>
+	{/if}
+
+	{#if links.length > 0}
+		<ul class="footer-group-links">
+			{#each links as link}
+				<li>
+					<a
+						href={link.href}
+						class="footer-group-link"
+						target={link.external ? '_blank' : undefined}
+						rel={link.external ? 'noopener noreferrer' : undefined}
+					>
+						{link.label}
+						{#if link.external}
+							<span class="sr-only">(abre en nueva ventana)</span>
+						{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if children}
+		<div class="footer-group-content">
+			{@render children()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type FooterLink = {
+    label: string;
+    href: string;
+    external?: boolean;
+};
+type Props = {
+    title?: string;
+    links?: FooterLink[];
+    children?: Snippet;
+    class?: string;
+};
+declare const FooterGroup: import("svelte").Component<Props, {}, "">;
+type FooterGroup = ReturnType<typeof FooterGroup>;
+export default FooterGroup;

package/dist/{layout/FooterLinks.svelte → navigation/FooterNav.svelte}

@@ -19,9 +19,9 @@
 	}
 </script>
 
-<div class={cn('footer-links', className)}>
+<div class={cn('footer-nav', className)}>
 	{#each links as link}
-		<a href={link.href} class={cn('footer-link', isLinkActive(link.href) && 'is-active')}>
+		<a href={link.href} class={cn('footer-nav-link', isLinkActive(link.href) && 'is-active')}>
 			{link.label}
 		</a>
 	{/each}

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

@@ -0,0 +1,11 @@
+type FooterLink = {
+    label: string;
+    href: string;
+};
+type Props = {
+    links: FooterLink[];
+    class?: string;
+};
+declare const FooterNav: import("svelte").Component<Props, {}, "">;
+type FooterNav = ReturnType<typeof FooterNav>;
+export default FooterNav;

package/dist/navigation/NavMenu.svelte

@@ -25,12 +25,11 @@
 
 	type Props = {
 		items: MenuItem[];
-		variant?: 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
 	};
 
-	const { items = [], class: className, variant = 'primary', size = 'md' }: Props = $props();
+	const { items = [], class: className, size = 'md' }: Props = $props();
 
 	let openSubmenuIndex = $state<number | null>(null);
 	let triggerElements = $state<Record<number, HTMLElement>>({});
@@ -43,12 +42,6 @@
 		isMegamenu: false
 	});
 
-	const variantClasses = {
-		primary: 'navmenu-primary',
-		secondary: 'navmenu-secondary',
-		muted: 'navmenu-muted'
-	};
-
 	const sizeClasses = {
 		sm: 'is-sm',
 		md: 'is-md',
@@ -172,7 +165,7 @@
 	});
 </script>
 
-<nav class={cn('navmenu', variantClasses[variant], sizeClasses[size], className)}>
+<nav class={cn('navmenu', sizeClasses[size], 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')}>

package/dist/navigation/SideNav.svelte

@@ -31,7 +31,6 @@
 
 	type Props = {
 		items: SideNavItem[];
-		variant?: 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
 		isWide?: boolean;
@@ -42,7 +41,6 @@
 	const {
 		items = [],
 		class: className,
-		variant = 'primary',
 		size = 'md',
 		isWide,
 		isCompact,
@@ -70,12 +68,6 @@
 		isExpanded = !isCollapsible;
 	});
 
-	const variantClasses = {
-		primary: 'sidenav-primary',
-		secondary: 'sidenav-secondary',
-		muted: 'sidenav-muted'
-	};
-
 	const sizeClasses = {
 		sm: 'is-sm',
 		md: 'is-md',
@@ -119,7 +111,6 @@
 <nav
 	class={cn(
 		'sidenav',
-		variantClasses[variant],
 		sizeClasses[size],
 		isCompact && 'is-compact',
 		isCollapsible && 'is-collapsible',

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

@@ -21,7 +21,6 @@ import { type IconData } from '../index.js';
 import type { Snippet } from 'svelte';
 type Props = {
     items: SideNavItem[];
-    variant?: 'primary' | 'secondary' | 'muted';
     size?: 'sm' | 'md' | 'lg';
     class?: string;
     isWide?: boolean;

package/dist/navigation/css/footer-group.css

@@ -0,0 +1,26 @@
+@layer components {
+	.footer-group {
+		@apply flex flex-col gap-2;
+
+		.footer-group-title {
+			@apply text-base font-semibold;
+			@apply mb-2;
+		}
+
+		.footer-group-links {
+			@apply flex flex-col gap-2;
+			@apply list-none p-0 m-0;
+
+			.footer-group-link {
+				@apply text-sm;
+				@apply transition-colors duration-200;
+				@apply hover:underline;
+				@apply inline-flex items-center gap-1;
+			}
+		}
+
+		.footer-group-content {
+			@apply flex flex-col gap-2;
+		}
+	}
+}

package/dist/{layout/css/footer-links.css → navigation/css/footer-nav.css}

@@ -1,11 +1,11 @@
 @layer components {
-	.footer-links {
+	.footer-nav {
 		@apply column md:row items-start md:items-center gap-3 md:gap-6;
 
-		.footer-link {
+		.footer-nav-link {
 			@apply text-sm opacity-70;
 			@apply transition-all duration-200;
-			@apply hover:opacity-100;
+			@apply hover:underline;
 			@apply focus:outline-none;
 			@apply cursor-pointer select-none;
 

package/dist/navigation/css/nav-menu.css

@@ -1,19 +1,19 @@
 @layer components {
 	.navmenu {
-		@apply flex items-center gap-1 text-on-background;
+		@apply flex items-center gap-1;
 
 		.navmenu-item {
 			@apply relative flex items-center gap-2 rounded-ui px-4 py-2;
 			@apply cursor-pointer select-none outline-none;
 			@apply transition-all duration-200;
-			@apply hover:bg-muted;
 
 			.navmenu-icon {
 				@apply h-5 w-5 shrink-0;
 			}
 
 			.navmenu-label {
-				@apply font-medium text-sm whitespace-nowrap;
+				@apply text-sm whitespace-nowrap;
+				@apply font-light hover:font-semibold;
 			}
 
 			.navmenu-arrow {
@@ -24,8 +24,8 @@
 				}
 			}
 
-			&.is-active {
-				@apply bg-muted;
+			&.is-active .navmenu-label {
+				@apply font-semibold;
 			}
 		}
 
@@ -76,43 +76,13 @@
 				}
 			}
 		}
-
-		&.navmenu-primary {
-			.navmenu-item.is-active {
-				@apply bg-on-primary text-primary;
-
-				.navmenu-icon {
-					@apply text-primary;
-				}
-			}
-		}
-
-		&.navmenu-secondary {
-			.navmenu-item.is-active {
-				@apply bg-on-secondary text-secondary;
-
-				.navmenu-icon {
-					@apply text-secondary;
-				}
-			}
-		}
-
-		&.navmenu-muted {
-			.navmenu-item.is-active {
-				@apply bg-muted text-on-muted;
-
-				.navmenu-icon {
-					@apply text-on-muted;
-				}
-			}
-		}
 	}
 
 	.navmenu-popover {
 		@apply flex flex-col gap-2 p-2 my-1;
 		@apply bg-background text-on-background rounded-ui;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
-		@apply shadow-sm shadow-muted border border-muted;
+		@apply shadow-sm shadow-muted;
 		position: fixed;
 		z-index: 9999;
 		max-height: 80vh;
@@ -134,7 +104,7 @@
 			@apply flex items-center gap-2 rounded-ui px-3 py-2;
 			@apply cursor-pointer select-none outline-none;
 			@apply transition-all duration-200;
-			@apply hover:bg-muted;
+			@apply font-light hover:font-medium;
 
 			.navmenu-submenu-icon {
 				@apply h-5 w-5 shrink-0;
@@ -153,7 +123,7 @@
 			}
 
 			&.is-active {
-				@apply bg-muted;
+				@apply font-medium;
 			}
 		}
 
@@ -162,7 +132,7 @@
 		}
 
 		.navmenu-header {
-			@apply px-3 py-2 text-xs font-semibold text-on-muted/70 uppercase tracking-wide;
+			@apply px-3 py-2 text-xs font-semibold uppercase tracking-wide;
 		}
 	}
 }