ui-svelte 0.2.5 → 0.2.6

package/dist/css/base.css

@@ -4,13 +4,6 @@
 		@apply bg-background text-on-background;
 	}
 
-	body:has(#popover) {
-		overflow: hidden !important;
-	}
-
-	body:has(#popover).had-scroll {
-		padding-right: var(--scrollbar-size, 6px) !important;
-	}
 
 	::-webkit-scrollbar {
 		width: var(--scrollbar-size, 6px);
@@ -40,7 +33,6 @@
 		}
 	}
 
-	/* Base headings - responsive typography without margins */
 	h1 {
 		@apply font-extrabold tracking-tight;
 		@apply text-[1.875rem] md:text-4xl lg:text-5xl;
@@ -77,7 +69,6 @@
 		@apply leading-4 md:leading-5 lg:leading-6;
 	}
 
-	/* Text formatting */
 	strong {
 		@apply font-semibold;
 	}
@@ -86,7 +77,6 @@
 		@apply italic;
 	}
 
-	/* Utility classes */
 	.snippet {
 		@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
 		@apply px-[0.3rem] py-[0.2rem];
@@ -123,7 +113,6 @@
 		@apply text-lg md:text-xl lg:text-2xl;
 	}
 
-	/* Blockquote - keeping minimal spacing */
 	blockquote {
 		@apply border-l-2 border-muted italic;
 		@apply pl-4 md:pl-5 lg:pl-6;
@@ -136,11 +125,9 @@
 	}
 
 	.prose {
-		/* Base font size and line height - responsive */
 		@apply text-sm md:text-base lg:text-lg;
 		@apply leading-6 md:leading-7 lg:leading-8;
 
-		/* Headings */
 		h1 {
 			@apply scroll-m-20 font-extrabold tracking-tight;
 			@apply text-[1.875rem] md:text-4xl lg:text-5xl;
@@ -188,27 +175,23 @@
 			@apply mt-3 md:mt-3 lg:mt-4 mb-1.5;
 		}
 
-		/* Reset margins after headings */
 		h2 + *,
 		h3 + *,
 		h4 + * {
 			@apply mt-0;
 		}
 
-		/* Paragraphs */
 		p {
 			@apply text-on-muted;
 			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
 		}
 
-		/* Lead paragraph */
 		[class~='lead'] {
 			@apply text-base md:text-lg lg:text-xl;
 			@apply leading-7 md:leading-8 lg:leading-8;
 			@apply mt-4 md:mt-6 lg:mt-6 mb-4 md:mb-6 lg:mb-6;
 		}
 
-		/* Lists */
 		ul,
 		ol {
 			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
@@ -264,13 +247,11 @@
 			@apply pl-5.5 md:pl-6.5 lg:pl-6.5;
 		}
 
-		/* Links */
 		a {
 			@apply font-medium text-primary underline underline-offset-4;
 			@apply hover:text-primary/80 transition-colors;
 		}
 
-		/* Inline code */
 		code {
 			@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
 			@apply px-[0.3rem] py-[0.2rem];
@@ -285,7 +266,6 @@
 			@apply text-base md:text-[1.125rem] lg:text-[1.3125rem];
 		}
 
-		/* Code blocks */
 		pre {
 			@apply overflow-x-auto rounded-lg bg-muted text-on-muted;
 			@apply mt-5 md:mt-6 lg:mt-8 mb-5 md:mb-6 lg:mb-8;
@@ -299,14 +279,12 @@
 			}
 		}
 
-		/* Blockquotes */
 		blockquote {
 			@apply border-l-4 border-muted italic text-on-muted;
 			@apply mt-6 md:mt-8 lg:mt-10 mb-6 md:mb-8 lg:mb-10;
 			@apply pl-5 md:pl-5 lg:pl-6;
 		}
 
-		/* Horizontal rules */
 		hr {
 			@apply border-muted;
 			@apply my-10 md:my-12 lg:my-12;
@@ -316,7 +294,6 @@
 			@apply mt-0;
 		}
 
-		/* Images and media */
 		img,
 		video,
 		picture {
@@ -328,7 +305,6 @@
 			@apply mt-0 mb-0;
 		}
 
-		/* Figures */
 		figure {
 			@apply mt-6 md:mt-8 lg:mt-8 mb-6 md:mb-8 lg:mb-8;
 		}
@@ -343,7 +319,6 @@
 			@apply mt-2 md:mt-3 lg:mt-3;
 		}
 
-		/* Tables */
 		table {
 			@apply w-full text-left;
 			@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
@@ -379,7 +354,6 @@
 			@apply pr-0;
 		}
 
-		/* Keyboard input */
 		kbd {
 			@apply font-mono font-semibold;
 			@apply rounded bg-muted text-on-muted;
@@ -388,7 +362,6 @@
 			@apply py-0.5 md:py-0.75 lg:py-1;
 		}
 
-		/* Text formatting */
 		strong {
 			@apply font-semibold;
 		}
@@ -397,7 +370,6 @@
 			@apply italic;
 		}
 
-		/* Reset first and last child margins */
 		> :first-child {
 			@apply mt-0;
 		}

package/dist/display/Code.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { codeToHtml } from 'shiki';
 	import { useClipboard } from '../hooks/use-clipboard.svelte.js';
-	import { IconButton } from '../index.js';
+	import { Chip, IconButton } from '../index.js';
 	import { Checkmark24RegularIcon, Copy24RegularIcon } from '../icons/index.js';
 	import { theme } from '../stores/theme.svelte.js';
 	import { cn } from '../utils/class-names.js';
@@ -57,16 +57,16 @@
 	onmouseleave={() => (hover = false)}
 >
 	{#if open}
-		{#if !hover && !hideLang}
+		{#if (!hover && !hideLang && !clipboard.copied) || (disableCopy && !hideLang)}
 			<div class="code-info">
-				<div class="code-lang">{lang}</div>
+				<Chip variant="muted">{lang}</Chip>
 			</div>
 		{/if}
-		{#if hover && !disableCopy}
+		{#if (hover && !disableCopy) || clipboard.copied || (!disableCopy && hideLang)}
 			<div class="code-info">
 				<IconButton
 					onclick={handleCopy}
-					variant="ghost"
+					variant="muted"
 					size="sm"
 					icon={clipboard.copied ? Checkmark24RegularIcon : Copy24RegularIcon}
 				/>

package/dist/display/css/badge.css

@@ -10,38 +10,41 @@
 	.badge-text {
 		@apply text-xs leading-none;
 	}
-	.is-top-left .badge-text {
+
+	/* Position styles */
+	.is-top-left .badge-content {
 		@apply top-0 left-0 translate-x-[-50%] translate-y-[-50%];
 	}
-	.is-top-right .badge-text {
+	.is-top-right .badge-content {
 		@apply top-0 right-0 translate-x-[50%] translate-y-[-50%];
 	}
-	.is-bottom-left .badge-text {
+	.is-bottom-left .badge-content {
 		@apply bottom-0 left-0 translate-x-[-50%] translate-y-[50%];
 	}
-	.is-bottom-right .badge-text {
+	.is-bottom-right .badge-content {
 		@apply bottom-0 right-0 translate-x-[50%] translate-y-[50%];
 	}
 
-	.is-primary .badge-text {
+	/* Variant styles */
+	.is-primary .badge-content {
 		@apply bg-primary text-on-primary;
 	}
-	.is-secondary .badge-text {
+	.is-secondary .badge-content {
 		@apply bg-secondary text-on-secondary;
 	}
-	.is-muted .badge-text {
+	.is-muted .badge-content {
 		@apply bg-muted text-on-muted;
 	}
-	.is-success .badge-text {
+	.is-success .badge-content {
 		@apply bg-success text-on-success;
 	}
-	.is-warning .badge-text {
+	.is-warning .badge-content {
 		@apply bg-warning text-on-warning;
 	}
-	.is-danger .badge-text {
+	.is-danger .badge-content {
 		@apply bg-danger text-on-danger;
 	}
-	.is-info .badge-text {
+	.is-info .badge-content {
 		@apply bg-info text-on-info;
 	}
 }

package/dist/navigation/BottomNav.svelte

@@ -9,13 +9,17 @@
 		icon: IconData;
 		href?: string;
 		onclick?: (item: BottomNavItem) => void;
+		badge?: string | number;
+		isFab?: boolean;
+		isActive?: boolean;
 	};
 
 	type Props = {
 		items: BottomNavItem[];
-		variant?: 'primary' | 'secondary' | 'muted';
+		variant?: 'primary' | 'secondary' | 'ghost' | 'line';
 		size?: 'sm' | 'md' | 'lg';
-		showLabels?: boolean;
+		isSolid?: boolean;
+		isBlock?: boolean;
 		class?: string;
 	};
 
@@ -24,13 +28,15 @@
 		class: className,
 		variant = 'primary',
 		size = 'md',
-		showLabels = true
+		isSolid = false,
+		isBlock = false
 	}: Props = $props();
 
 	const variantClasses = {
-		primary: 'bottomnav-primary',
-		secondary: 'bottomnav-secondary',
-		muted: 'bottomnav-muted'
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		ghost: 'is-ghost',
+		line: 'is-line'
 	};
 
 	const sizeClasses = {
@@ -39,9 +45,15 @@
 		lg: 'is-lg'
 	};
 
-	function isItemActive(href?: string): boolean {
-		if (!href) return false;
-		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	// 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 + '/');
 	}
 
 	function handleItemClick(item: BottomNavItem) {
@@ -56,22 +68,37 @@
 		'bottomnav',
 		variantClasses[variant],
 		sizeClasses[size],
-		!showLabels && 'is-icon-only',
+		isSolid && 'is-solid',
+		!hasLabels && 'is-icon-only',
+		!isBlock && 'is-fixed',
 		className
 	)}
 >
 	{#each items as item}
+		{@const active = isItemActive(item)}
+		{@const itemClass = cn('bottomnav-item', active && 'is-active', item.isFab && 'is-fab')}
+
 		{#if item.href}
-			<a href={item.href} class={cn('bottomnav-item', isItemActive(item.href) && 'is-active')}>
-				<Icon icon={item.icon} class="bottomnav-icon" />
-				{#if showLabels && item.label}
+			<a href={item.href} class={itemClass}>
+				<span class="bottomnav-icon-wrapper">
+					<Icon icon={item.icon} class="bottomnav-icon" />
+					{#if item.badge !== undefined}
+						<span class="bottomnav-badge">{item.badge}</span>
+					{/if}
+				</span>
+				{#if item.label}
 					<span class="bottomnav-label">{item.label}</span>
 				{/if}
 			</a>
 		{:else}
-			<button type="button" class="bottomnav-item" onclick={() => handleItemClick(item)}>
-				<Icon icon={item.icon} class="bottomnav-icon" />
-				{#if showLabels && item.label}
+			<button type="button" class={itemClass} onclick={() => handleItemClick(item)}>
+				<span class="bottomnav-icon-wrapper">
+					<Icon icon={item.icon} class="bottomnav-icon" />
+					{#if item.badge !== undefined}
+						<span class="bottomnav-badge">{item.badge}</span>
+					{/if}
+				</span>
+				{#if item.label}
 					<span class="bottomnav-label">{item.label}</span>
 				{/if}
 			</button>

package/dist/navigation/NavMenu.svelte

@@ -26,10 +26,18 @@
 	type Props = {
 		items: MenuItem[];
 		size?: 'sm' | 'md' | 'lg';
+		isSolid?: boolean;
+		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		class?: string;
 	};
 
-	const { items = [], class: className, size = 'md' }: Props = $props();
+	const {
+		items = [],
+		class: className,
+		size = 'md',
+		isSolid = false,
+		variant = 'muted'
+	}: Props = $props();
 
 	let openSubmenuIndex = $state<number | null>(null);
 	let triggerElements = $state<Record<number, HTMLElement>>({});
@@ -48,6 +56,18 @@
 		lg: 'is-lg'
 	};
 
+	const solidClass = $derived(isSolid ? 'is-filled' : 'is-default');
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
 	const style = $derived(
 		`top: ${position.top}px; left: ${position.left}px; ${position.width !== 'auto' ? `width: ${position.width}px;` : ''} transform-origin: ${position.isBottomHalf ? 'bottom' : 'top'} center;`
 	);
@@ -165,11 +185,11 @@
 	});
 </script>
 
-<nav class={cn('navmenu', sizeClasses[size], className)}>
+<nav class={cn('navmenu', sizeClasses[size], solidClass, variantClasses[variant], 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')}>
-				<span class="navmenu-label">{item.label}</span>
+				<span class="navmenu-label" data-text={item.label}>{item.label}</span>
 			</a>
 		{:else}
 			<button
@@ -182,7 +202,7 @@
 				bind:this={triggerElements[index]}
 				onclick={() => handleItemClick(item, index)}
 			>
-				<span class="navmenu-label">{item.label}</span>
+				<span class="navmenu-label" data-text={item.label}>{item.label}</span>
 				{#if item.subitems || item.megamenu}
 					<Icon
 						icon={ChevronDown24RegularIcon}

package/dist/navigation/SideNav.svelte

@@ -36,6 +36,8 @@
 		isWide?: boolean;
 		isCompact?: boolean;
 		isCollapsible?: boolean;
+		isSolid?: boolean;
+		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 	};
 
 	const {
@@ -44,7 +46,9 @@
 		size = 'md',
 		isWide,
 		isCompact,
-		isCollapsible
+		isCollapsible,
+		isSolid = false,
+		variant = 'muted'
 	}: Props = $props();
 
 	let openSubmenus = $state<Record<number, boolean>>({});
@@ -74,13 +78,25 @@
 		lg: 'is-lg'
 	};
 
+	const solidClass = $derived(isSolid ? 'is-solid' : '');
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
 	function toggleSubmenu(index: number) {
 		openSubmenus[index] = !openSubmenus[index];
 	}
 
 	function isItemActive(href?: string): boolean {
 		if (!href) return false;
-		return page.url.pathname.includes(href);
+		return page.url.pathname === href;
 	}
 
 	function toggleExpand() {
@@ -112,6 +128,8 @@
 	class={cn(
 		'sidenav',
 		sizeClasses[size],
+		solidClass,
+		isSolid && variantClasses[variant],
 		isCompact && 'is-compact',
 		isCollapsible && 'is-collapsible',
 		!isExpanded && 'is-collapsed',

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

@@ -26,6 +26,8 @@ type Props = {
     isWide?: boolean;
     isCompact?: boolean;
     isCollapsible?: boolean;
+    isSolid?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 };
 declare const SideNav: import("svelte").Component<Props, {}, "">;
 type SideNav = ReturnType<typeof SideNav>;

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

@@ -1,19 +1,26 @@
 @layer components {
     .bottomnav {
-        @apply fixed bottom-0 left-0 right-0 z-50;
         @apply flex items-center justify-around;
         @apply bg-background text-on-background;
         @apply border-t border-muted;
         @apply shadow-lg;
-        padding-bottom: env(safe-area-inset-bottom);
+
+        &.is-fixed {
+            @apply fixed bottom-0 left-0 right-0 z-50;
+            padding-bottom: env(safe-area-inset-bottom);
+        }
 
         .bottomnav-item {
             @apply flex flex-col items-center justify-center gap-1;
-            @apply flex-1 py-2 px-1;
+            @apply flex-1 py-3 px-2;
             @apply cursor-pointer select-none outline-none;
             @apply transition-all duration-200;
             @apply relative;
 
+            .bottomnav-icon-wrapper {
+                @apply relative inline-flex;
+            }
+
             .bottomnav-icon {
                 @apply h-6 w-6 shrink-0;
                 @apply transition-all duration-200;
@@ -24,22 +31,55 @@
                 @apply transition-all duration-200;
             }
 
+            .bottomnav-badge {
+                @apply absolute -top-1.5 -right-2;
+                @apply min-w-4 h-4 px-1;
+                @apply flex items-center justify-center;
+                @apply text-[10px] font-bold;
+                @apply bg-danger text-on-danger;
+                @apply rounded-full;
+            }
+
             &:hover {
                 @apply bg-muted/50;
             }
 
-            &.is-active {
-                @apply text-primary;
+            /* FAB Style */
+            &.is-fab {
+                @apply flex-none;
+
+                &:hover {
+                    @apply bg-transparent;
+                }
+
+                .bottomnav-icon-wrapper {
+                    @apply w-12 h-12 -mt-6;
+                    @apply flex items-center justify-center;
+                    @apply bg-primary text-on-primary;
+                    @apply rounded-full shadow-lg;
+                    @apply transition-all duration-200;
+                }
 
                 .bottomnav-icon {
-                    @apply text-primary;
+                    @apply h-6 w-6 text-on-primary;
+                }
+
+                &:hover .bottomnav-icon-wrapper {
+                    @apply shadow-xl shadow-primary/30;
+                    transform: translateY(-2px);
+                }
+
+                &:active .bottomnav-icon-wrapper {
+                    transform: translateY(0);
+                    @apply shadow-md;
                 }
             }
         }
 
+        /* Size Variants */
         &.is-sm {
             .bottomnav-item {
-                @apply gap-0.5 py-1.5;
+                @apply gap-0.5 py-2 px-1;
 
                 .bottomnav-icon {
                     @apply h-5 w-5;
@@ -48,12 +88,16 @@
                 .bottomnav-label {
                     @apply text-[10px];
                 }
+
+                &.is-fab .bottomnav-icon-wrapper {
+                    @apply w-10 h-10 -mt-5;
+                }
             }
         }
 
         &.is-md {
             .bottomnav-item {
-                @apply gap-1 py-2;
+                @apply gap-1 py-3 px-2;
 
                 .bottomnav-icon {
                     @apply h-6 w-6;
@@ -67,7 +111,7 @@
 
         &.is-lg {
             .bottomnav-item {
-                @apply gap-1.5 py-3;
+                @apply gap-1.5 py-4 px-3;
 
                 .bottomnav-icon {
                     @apply h-7 w-7;
@@ -76,6 +120,14 @@
                 .bottomnav-label {
                     @apply text-sm;
                 }
+
+                &.is-fab .bottomnav-icon-wrapper {
+                    @apply w-14 h-14 -mt-7;
+
+                    .bottomnav-icon {
+                        @apply h-7 w-7;
+                    }
+                }
             }
         }
 
@@ -89,7 +141,8 @@
             }
         }
 
-        &.bottomnav-primary {
+        /* Variant: Primary */
+        &.is-primary {
             .bottomnav-item.is-active {
                 @apply text-primary;
 
@@ -101,9 +154,14 @@
                     @apply text-primary;
                 }
             }
+
+            .bottomnav-item.is-fab .bottomnav-icon-wrapper {
+                @apply bg-primary;
+            }
         }
 
-        &.bottomnav-secondary {
+        /* Variant: Secondary */
+        &.is-secondary {
             .bottomnav-item.is-active {
                 @apply text-secondary;
 
@@ -115,20 +173,86 @@
                     @apply text-secondary;
                 }
             }
+
+            .bottomnav-item.is-fab .bottomnav-icon-wrapper {
+                @apply bg-secondary;
+            }
         }
 
-        &.bottomnav-muted {
+        /* Variant: Ghost - just color change, no indicator */
+        &.is-ghost {
             .bottomnav-item.is-active {
-                @apply bg-muted text-on-muted;
+                @apply text-on-surface;
 
                 .bottomnav-icon {
-                    @apply text-on-muted;
+                    @apply text-on-surface;
                 }
 
                 .bottomnav-label {
-                    @apply text-on-muted;
+                    @apply text-on-surface font-semibold;
                 }
             }
         }
+
+        /* Variant: Line - underline indicator */
+        &.is-line {
+            .bottomnav-item {
+                &::after {
+                    content: '';
+                    @apply absolute bottom-0 left-1/2 -translate-x-1/2;
+                    @apply w-0 h-0.5 rounded-full;
+                    @apply bg-primary;
+                    @apply transition-all duration-200;
+                }
+
+                &.is-active {
+                    @apply text-primary;
+
+                    .bottomnav-icon {
+                        @apply text-primary;
+                    }
+
+                    .bottomnav-label {
+                        @apply text-primary;
+                    }
+
+                    &::after {
+                        @apply w-8;
+                    }
+                }
+            }
+        }
+
+        /* Solid modifier - adds background pill on active */
+        &.is-solid {
+            .bottomnav-item {
+                @apply relative isolate;
+
+                &::before {
+                    content: '';
+                    @apply absolute inset-x-2 top-1 bottom-1;
+                    @apply rounded-xl;
+                    @apply bg-transparent;
+                    @apply transition-all duration-200;
+                    z-index: -1;
+                }
+            }
+
+            &.is-primary .bottomnav-item.is-active:not(.is-fab)::before {
+                @apply bg-primary/10;
+            }
+
+            &.is-secondary .bottomnav-item.is-active:not(.is-fab)::before {
+                @apply bg-secondary/10;
+            }
+
+            &.is-ghost .bottomnav-item.is-active:not(.is-fab)::before {
+                @apply bg-muted;
+            }
+
+            &.is-line .bottomnav-item.is-active:not(.is-fab)::before {
+                @apply bg-primary/10;
+            }
+        }
     }
 }

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

@@ -14,6 +14,21 @@
 			.navmenu-label {
 				@apply text-base whitespace-nowrap;
 				@apply font-light hover:font-semibold;
+				/* Prevent layout shift on font-weight change */
+				display: inline-flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+
+				&::after {
+					content: attr(data-text);
+					@apply font-semibold;
+					height: 0;
+					visibility: hidden;
+					overflow: hidden;
+					user-select: none;
+					pointer-events: none;
+				}
 			}
 
 			.navmenu-arrow {
@@ -225,4 +240,84 @@
 			@apply px-3 py-2 text-xs font-semibold uppercase tracking-wide;
 		}
 	}
+
+	/* Filled state style - hover/active with background colors */
+	.navmenu.is-filled .navmenu-item {
+		.navmenu-label {
+			@apply font-normal hover:font-normal;
+		}
+
+		&:hover {
+			@apply bg-muted/50;
+		}
+
+		&.is-active {
+			@apply bg-muted;
+
+			.navmenu-label {
+				@apply font-normal;
+			}
+		}
+	}
+
+	/* Variant colors for filled style */
+	.navmenu.is-filled.is-primary {
+		.navmenu-item:hover {
+			@apply bg-primary/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-primary text-on-primary;
+		}
+	}
+
+	.navmenu.is-filled.is-secondary {
+		.navmenu-item:hover {
+			@apply bg-secondary/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-secondary text-on-secondary;
+		}
+	}
+
+	.navmenu.is-filled.is-success {
+		.navmenu-item:hover {
+			@apply bg-success/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-success text-on-success;
+		}
+	}
+
+	.navmenu.is-filled.is-info {
+		.navmenu-item:hover {
+			@apply bg-info/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-info text-on-info;
+		}
+	}
+
+	.navmenu.is-filled.is-warning {
+		.navmenu-item:hover {
+			@apply bg-warning/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-warning text-on-warning;
+		}
+	}
+
+	.navmenu.is-filled.is-danger {
+		.navmenu-item:hover {
+			@apply bg-danger/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-danger text-on-danger;
+		}
+	}
 }

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

@@ -300,4 +300,84 @@
 			}
 		}
 	}
+
+	/* Solid state style - hover/active with background colors */
+	.sidenav.is-solid .sidenav-item {
+		.sidenav-content .sidenav-label {
+			@apply font-normal hover:font-normal;
+		}
+
+		&:hover {
+			@apply bg-muted/50;
+		}
+
+		&.is-active {
+			@apply bg-muted;
+
+			.sidenav-content .sidenav-label {
+				@apply font-normal;
+			}
+		}
+	}
+
+	/* Variant colors for solid style */
+	.sidenav.is-solid.is-primary {
+		.sidenav-item:hover {
+			@apply bg-primary/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-primary text-on-primary;
+		}
+	}
+
+	.sidenav.is-solid.is-secondary {
+		.sidenav-item:hover {
+			@apply bg-secondary/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-secondary text-on-secondary;
+		}
+	}
+
+	.sidenav.is-solid.is-success {
+		.sidenav-item:hover {
+			@apply bg-success/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-success text-on-success;
+		}
+	}
+
+	.sidenav.is-solid.is-info {
+		.sidenav-item:hover {
+			@apply bg-info/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-info text-on-info;
+		}
+	}
+
+	.sidenav.is-solid.is-warning {
+		.sidenav-item:hover {
+			@apply bg-warning/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-warning text-on-warning;
+		}
+	}
+
+	.sidenav.is-solid.is-danger {
+		.sidenav-item:hover {
+			@apply bg-danger/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-danger text-on-danger;
+		}
+	}
 }

package/dist/navigation/css/tabs.css

@@ -2,19 +2,19 @@
 	.tabs {
 		@apply flex relative;
 		&.is-top {
-			@apply flex-col;
+			@apply flex-col gap-2;
 		}
 		&.is-bottom {
-			@apply flex-col-reverse;
+			@apply flex-col-reverse gap-2;
 		}
 		&.is-start {
-			@apply flex-row h-fit gap-1;
+			@apply flex-row h-fit gap-2;
 			.tabs-list {
 				@apply flex-col;
 			}
 		}
 		&.is-end {
-			@apply flex-row-reverse h-fit gap-1;
+			@apply flex-row-reverse h-fit gap-2;
 			.tabs-list {
 				@apply flex-col;
 			}

package/dist/utils/popover.js

@@ -1,17 +1,17 @@
 export const popover = (node) => {
     const targetEl = document.body;
-    const hadScroll = document.documentElement.scrollHeight > window.innerHeight;
     node.id = 'popover';
     targetEl?.appendChild(node);
-    if (hadScroll) {
-        targetEl.classList.add('had-scroll');
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
     }
+    document.body.style.overflow = 'hidden';
     return {
         destroy() {
-            if (hadScroll) {
-                targetEl.classList.remove('had-scroll');
-            }
             node.remove();
+            document.body.style.overflow = '';
+            document.body.style.paddingRight = '';
         }
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"