ui-svelte 0.2.4 → 0.2.6

package/dist/index.css

@@ -8,6 +8,7 @@
 @import './control/css/btn.css';
 @import './control/css/media.css';
 @import './control/css/video.css';
+@import './control/css/toggle-group.css';
 
 @import './charts/css/arc-chart.css';
 @import './charts/css/area-chart.css';
@@ -19,6 +20,7 @@
 @import './display/css/accordion.css';
 @import './display/css/alert.css';
 @import './display/css/avatar.css';
+@import './display/css/avatar-group.css';
 @import './display/css/badge.css';
 @import './display/css/carousel.css';
 @import './display/css/card.css';
@@ -69,48 +71,68 @@
 @import './overlay/css/tooltip.css';
 
 @theme {
-	--color-primary: var(--primary, oklch(54.6% 0.245 262.881)); /* blue-600 */
-	--color-on-primary: var(--on-primary, oklch(93.2% 0.032 255.585)); /* blue-100 */
+	--color-primary: var(--primary, oklch(54.6% 0.245 262.881));
+	/* blue-600 */
+	--color-on-primary: var(--on-primary, oklch(93.2% 0.032 255.585));
+	/* blue-100 */
 
-	--color-secondary: var(--secondary, oklch(0.592 0.249 0.584)); /* pink-600  */
-	--color-on-secondary: var(--on-secondary, oklch(0.948 0.028 342.258)); /* pink-100 */
+	--color-secondary: var(--secondary, oklch(0.592 0.249 0.584));
+	/* pink-600  */
+	--color-on-secondary: var(--on-secondary, oklch(0.948 0.028 342.258));
+	/* pink-100 */
 
-	--color-muted: var(--muted, oklch(87.2% 0.01 258.338)); /* gray-300  */
-	--color-on-muted: var(--on-muted, oklch(27.8% 0.033 256.848)); /* gray-700  */
+	--color-muted: var(--muted, oklch(87.2% 0.01 258.338));
+	/* gray-300  */
+	--color-on-muted: var(--on-muted, oklch(27.8% 0.033 256.848));
+	/* gray-700  */
 
 	/* dark */
 	/*--color-muted: var(--muted, oklch(37.3% 0.034 259.733)); /* gray-700  */
 	/*--color-on-muted: var(--on-muted, oklch(87.2% 0.01 258.338)); /* gray-300  */
 
-	--color-background: var(--background, oklch(98.5% 0.002 247.839)); /* gray-50  */
-	--color-on-background: var(--on-background, oklch(21% 0.034 264.665)); /* gray-900  */
+	--color-background: var(--background, oklch(98.5% 0.002 247.839));
+	/* gray-50  */
+	--color-on-background: var(--on-background, oklch(21% 0.034 264.665));
+	/* gray-900  */
 
 	/* dark */
 	/*--color-background: var(--background, oklch(13% 0.028 261.692)); /* gray-950  */
 	/*--color-on-background: var(--on-background, oklch(96.7% 0.003 264.542)); /* gray-100  */
 
-	--color-surface: var(--surface, oklch(96.7% 0.003 264.542)); /* gray-100  */
-	--color-on-surface: var(--on-surface, oklch(27.9% 0.041 260.031)); /* gray-800  */
+	--color-surface: var(--surface, oklch(96.7% 0.003 264.542));
+	/* gray-100  */
+	--color-on-surface: var(--on-surface, oklch(27.9% 0.041 260.031));
+	/* gray-800  */
 
 	/* dark */
 	/*--color-surface: var(--surface, oklch(21% 0.034 264.665)); /* gray-900  */
 	/*--color-on-surface: var(--on-surface, oklch(92.8% 0.006 264.531)); /* gray-200  */
 
-	--color-overlay: var(--overlay, oklch(0 0 0 / 60%)); /* black/60  */
-	--color-on-overlay: var(--on-overlay, oklch(1 0 0)); /* white  */
+	--color-overlay: var(--overlay, oklch(0 0 0 / 60%));
+	/* black/60  */
+	--color-on-overlay: var(--on-overlay, oklch(1 0 0));
+	/* white  */
 
-	--color-success: var(--success, oklch(62.7% 0.194 149.214)); /* green-600  */
-	--color-on-success: var(--on-success, oklch(96.2% 0.044 156.743)); /* green-100  */
+	--color-success: var(--success, oklch(62.7% 0.194 149.214));
+	/* green-600  */
+	--color-on-success: var(--on-success, oklch(96.2% 0.044 156.743));
+	/* green-100  */
 
-	--color-info: var(--info, oklch(58.8% 0.158 241.966)); /* sky-600  */
-	--color-on-info: var(--on-info, oklch(95.1% 0.026 236.824)); /* sky-100  */
+	--color-info: var(--info, oklch(58.8% 0.158 241.966));
+	/* sky-600  */
+	--color-on-info: var(--on-info, oklch(95.1% 0.026 236.824));
+	/* sky-100  */
 
-	--color-warning: var(--warning, oklch(68.1% 0.162 75.834)); /* yellow-600  */
-	--color-on-warning: var(--on-warning, oklch(97.3% 0.071 103.193)); /* yellow-100  */
+	--color-warning: var(--warning, oklch(68.1% 0.162 75.834));
+	/* yellow-600  */
+	--color-on-warning: var(--on-warning, oklch(97.3% 0.071 103.193));
+	/* yellow-100  */
 
-	--color-danger: var(--danger, oklch(57.7% 0.245 27.325)); /* red-600  */
-	--color-on-danger: var(--on-danger, oklch(93.6% 0.032 17.717)); /* red-100  */
+	--color-danger: var(--danger, oklch(57.7% 0.245 27.325));
+	/* red-600  */
+	--color-on-danger: var(--on-danger, oklch(93.6% 0.032 17.717));
+	/* red-100  */
 
 	--radius-ui: 0.75rem;
 	--scrollbar-size: 6px;
-}
+}

package/dist/index.d.ts

@@ -9,10 +9,12 @@ import Button from './control/Button.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
+import ToggleGroup from './control/ToggleGroup.svelte';
 import Video from './control/Video.svelte';
 import Accordion from './display/Accordion.svelte';
 import Alert from './display/Alert.svelte';
 import Avatar from './display/Avatar.svelte';
+import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
@@ -74,5 +76,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
 export type { IconData, SideNavItem, SideNavSubItem };

package/dist/index.js

@@ -9,10 +9,12 @@ import Button from './control/Button.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
+import ToggleGroup from './control/ToggleGroup.svelte';
 import Video from './control/Video.svelte';
 import Accordion from './display/Accordion.svelte';
 import Alert from './display/Alert.svelte';
 import Avatar from './display/Avatar.svelte';
+import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
@@ -74,4 +76,4 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };

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

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;
+            }
+        }
     }
 }