ui-svelte 0.2.3 → 0.2.5

package/dist/layout/AppBar.svelte

@@ -14,9 +14,20 @@
 		endClass?: string;
 		isBlurred?: boolean;
 		isBordered?: boolean;
+		borderOnScrollOnly?: boolean;
 		hideOnScroll?: boolean;
 		isSticky?: boolean;
 		isBoxed?: boolean;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'ghost';
 	};
 
 	const {
@@ -29,9 +40,11 @@
 		centerClass,
 		endClass,
 		isBordered,
+		borderOnScrollOnly = false,
 		isBlurred,
 		isSticky,
 		isBoxed,
+		variant = 'ghost',
 		hideOnScroll
 	}: Props = $props();
 
@@ -42,6 +55,18 @@
 
 	const scroll = useScroll();
 
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		ghost: 'is-ghost'
+	};
+
 	$effect(() => {
 		if (headerElement) {
 			headerHeight = headerElement.offsetHeight;
@@ -70,13 +95,15 @@
 	});
 
 	const shouldBlur = $derived(isBlurred && scroll.isScrolled);
+	const shouldShowBorder = $derived(isBordered && (!borderOnScrollOnly || scroll.isScrolled));
 </script>
 
 <header
 	bind:this={headerElement}
 	class={cn(
 		'appbar',
-		isBordered && 'is-bordered',
+		variantClasses[variant],
+		shouldShowBorder && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',
 		isSticky && 'is-sticky',

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

@@ -10,9 +10,11 @@ type Props = {
     endClass?: string;
     isBlurred?: boolean;
     isBordered?: boolean;
+    borderOnScrollOnly?: boolean;
     hideOnScroll?: boolean;
     isSticky?: 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

@@ -16,6 +16,16 @@
 		isBordered?: boolean;
 		isBoxed?: boolean;
 		hideOnScroll?: boolean;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'ghost';
 	};
 
 	const {
@@ -30,7 +40,8 @@
 		isBordered,
 		isBlurred,
 		isBoxed,
-		hideOnScroll
+		hideOnScroll,
+		variant = 'ghost'
 	}: Props = $props();
 
 	let footerElement = $state<HTMLElement | null>(null);
@@ -40,6 +51,18 @@
 
 	const scroll = useScroll();
 
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		ghost: 'is-ghost'
+	};
+
 	$effect(() => {
 		if (footerElement) {
 			footerHeight = footerElement.offsetHeight;
@@ -70,6 +93,7 @@
 	bind:this={footerElement}
 	class={cn(
 		'footer',
+		variantClasses[variant],
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',

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

@@ -12,6 +12,7 @@ type Props = {
     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/Sidebar.svelte

@@ -10,13 +10,43 @@
 		contentClass?: string;
 		headerClass?: string;
 		footerClass?: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'ghost';
 	};
 
-	const { children, header, footer, rootClass, contentClass, headerClass, footerClass }: Props =
-		$props();
+	const {
+		children,
+		header,
+		footer,
+		rootClass,
+		contentClass,
+		headerClass,
+		footerClass,
+		variant = 'ghost'
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		ghost: 'is-ghost'
+	};
 </script>
 
-<aside class={cn('sidebar', rootClass)}>
+<aside class={cn('sidebar', variantClasses[variant], rootClass)}>
 	{#if header}
 		<div class={cn('sidebar-header', headerClass)}>
 			{@render header()}

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

@@ -7,6 +7,7 @@ type Props = {
     contentClass?: string;
     headerClass?: string;
     footerClass?: string;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const Sidebar: import("svelte").Component<Props, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;

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

@@ -35,4 +35,67 @@
 			}
 		}
 	}
+	.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/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/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')}>
@@ -206,6 +199,7 @@
 	<div
 		class={cn(
 			'navmenu-popover',
+			sizeClasses[size],
 			openSubmenuIndex !== null && 'is-active',
 			position.isMegamenu && 'is-megamenu'
 		)}

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

@@ -1,6 +1,6 @@
 @layer components {
 	.footer-group {
-		@apply flex flex-col gap-4;
+		@apply flex flex-col gap-2;
 
 		.footer-group-title {
 			@apply text-base font-semibold;
@@ -12,16 +12,15 @@
 			@apply list-none p-0 m-0;
 
 			.footer-group-link {
-				@apply text-sm text-on-muted;
+				@apply text-sm;
 				@apply transition-colors duration-200;
 				@apply hover:underline;
-				@apply focus:outline-none;
 				@apply inline-flex items-center gap-1;
 			}
 		}
 
 		.footer-group-content {
-			@apply flex flex-col gap-3;
+			@apply flex flex-col gap-2;
 		}
 	}
 }