ui-svelte 0.2.12 → 0.2.14

package/dist/hooks/use-search.svelte.js

@@ -45,7 +45,6 @@ export const useSearch = (config) => {
                     (option.description && option.description.toLowerCase().includes(lowerSearch)));
             });
         }
-        // Client-side pagination
         if (enablePagination) {
             const start = 0;
             const end = (currentPage + 1) * pageSize;
@@ -96,7 +95,6 @@ export const useSearch = (config) => {
             else {
                 options = searchResponse.options;
             }
-            // Determinar si hay más resultados
             if (searchResponse.hasMore !== undefined) {
                 hasMore = searchResponse.hasMore;
             }
@@ -105,7 +103,6 @@ export const useSearch = (config) => {
                 hasMore = options.length < searchResponse.total;
             }
             else {
-                // Si no hay info de total, asumimos que hay más si recibimos pageSize resultados
                 hasMore = searchResponse.options.length >= pageSize;
             }
             config.onSuccess?.(searchResponse);

package/dist/icons/index.d.ts

@@ -1,3 +1,7 @@
+export declare const Add24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
 export declare const ArrowDown24RegularIcon: {
     body: string;
     viewbox: string;

package/dist/icons/index.js

@@ -1,3 +1,7 @@
+export const Add24RegularIcon = {
+    body: '<path fill="currentColor" d="M11.75 3a.75.75 0 0 1 .75.75v7.5h7.5a.75.75 0 0 1 0 1.5h-7.5v7.5a.75.75 0 0 1-1.5 0v-7.5h-7.5a.75.75 0 0 1 0-1.5h7.5v-7.5a.75.75 0 0 1 .75-.75"/>',
+    viewbox: '0 0 24 24'
+};
 export const ArrowDown24RegularIcon = {
     body: '<path fill="currentColor" d="M19.79 13.267a.75.75 0 0 0-1.086-1.034l-5.954 6.251V3.75a.75.75 0 1 0-1.5 0v14.734l-5.955-6.251a.75.75 0 1 0-1.086 1.034l7.067 7.42c.16.168.366.268.58.3a.8.8 0 0 0 .29-.001a1 1 0 0 0 .578-.3z"/>',
     viewbox: '0 0 24 24'

package/dist/index.css

@@ -14,6 +14,7 @@
 @import './control/css/media.css';
 @import './control/css/video.css';
 @import './control/css/toggle-group.css';
+@import './control/css/fab.css';
 
 @import './charts/css/arc-chart.css';
 @import './charts/css/area-chart.css';
@@ -33,6 +34,7 @@
 @import './display/css/chip.css';
 @import './display/css/code.css';
 @import './display/css/collapsible.css';
+@import './display/css/countdown.css';
 @import './display/css/divider.css';
 @import './display/css/empty.css';
 @import './display/css/item.css';
@@ -84,67 +86,45 @@
 @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-on-dark: var(--on-dark, oklch(97% 0.01 90));
+	--color-on-light: var(--on-light, oklch(25% 0.01 30));
 
-	--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-primary: var(--primary, oklch(75% 0.15 145));
+	--color-soft-primary: var(--soft-primary, oklch(95% 0.05 145));
+	--color-on-primary: var(--on-primary, var(--on-light));
 
-	--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  */
-
-	/* 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-secondary: var(--secondary, oklch(28.42% 0.0467 259.99));
+	--color-soft-secondary: var(--soft-secondary, oklch(92% 0.005 30));
+	--color-on-secondary: var(--on-secondary, var(--on-dark));
 
-	--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-muted: var(--muted, oklch(87.2% 0.01 258.338));
+	--color-soft-muted: var(--soft-muted, oklch(92% 0.005 30));
+	--color-on-muted: var(--on-muted, var(--on-light));
 
-	/* 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-background: var(--background, oklch(96% 0.005 85));
+	--color-on-background: var(--on-background, var(--on-light));
 
-	--color-overlay: var(--overlay, oklch(0 0 0 / 60%));
-	/* black/60  */
-	--color-on-overlay: var(--on-overlay, oklch(1 0 0));
-	/* white  */
+	--color-surface: var(--surface, oklch(98% 0.003 85));
+	--color-on-surface: var(--on-surface, var(--on-light));
 
 	--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-soft-success: var(--soft-success, oklch(95% 0.06 149.214));
+	--color-on-success: var(--on-success, var(--on-dark));
 
 	--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-soft-info: var(--soft-info, oklch(95% 0.05 241.966));
+	--color-on-info: var(--on-info, var(--on-dark));
 
 	--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-soft-warning: var(--soft-warning, oklch(96% 0.05 75.834));
+	--color-on-warning: var(--on-warning, var(--on-dark));
 
 	--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-soft-danger: var(--soft-danger, oklch(95% 0.07 27.325));
+	--color-on-danger: var(--on-danger, var(--on-dark));
+
+	--color-overlay: var(--overlay, oklch(0 0 0 / 60%));
+	--color-on-overlay: var(--on-overlay, var(--on-dark));
 
 	--radius-avatar: calc(infinity * 1px);
 	--radius-box: 0.75rem;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import PieChart from './charts/PieChart.svelte';
 import Audio from './control/Audio.svelte';
 import Button from './control/Button.svelte';
 import Image from './control/Image.svelte';
+import Fab, { type FabAction } from './control/Fab.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
@@ -23,6 +24,7 @@ import ChatBox, { type PromptMessage, type PromptState } from './display/ChatBox
 import Chip from './display/Chip.svelte';
 import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
+import Countdown from './display/Countdown.svelte';
 import Divider from './display/Divider.svelte';
 import Empty from './display/Empty.svelte';
 import Icon, { type IconData } from './display/Icon.svelte';
@@ -84,5 +86,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, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, 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, DragDropItem, DragDropGroup, PromptMessage, PromptState, LatLng, MapMarker, RouteInfo };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Countdown, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Fab, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, 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, DragDropItem, DragDropGroup, PromptMessage, PromptState, LatLng, MapMarker, RouteInfo, FabAction };

package/dist/index.js

@@ -7,6 +7,7 @@ import PieChart from './charts/PieChart.svelte';
 import Audio from './control/Audio.svelte';
 import Button from './control/Button.svelte';
 import Image from './control/Image.svelte';
+import Fab, {} from './control/Fab.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
@@ -23,6 +24,7 @@ import ChatBox, {} from './display/ChatBox.svelte';
 import Chip from './display/Chip.svelte';
 import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
+import Countdown from './display/Countdown.svelte';
 import Divider from './display/Divider.svelte';
 import Empty from './display/Empty.svelte';
 import Icon, {} from './display/Icon.svelte';
@@ -84,4 +86,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, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, 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 { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Countdown, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Fab, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, 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/layout/Provider.svelte

@@ -54,19 +54,19 @@
 	<script>
 		let themeState = 'light';
 
-		if (typeof window !== 'undefined' && localStorage) {
+		if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') {
 			const storedTheme = localStorage.getItem('theme-preference');
 			if (storedTheme) {
 				themeState = storedTheme;
 			} else {
 				const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-				themeState = prefersDark ? '' : 'light';
+				themeState = prefersDark ? 'dark' : 'light';
 				localStorage.setItem('theme-preference', themeState);
 			}
-		}
 
-		if (themeState === 'dark') {
-			document.documentElement.classList.add('dark');
+			if (themeState === 'dark' && typeof document !== 'undefined') {
+				document.documentElement.classList.add('dark');
+			}
 		}
 	</script>
 </svelte:head>

package/dist/layout/Sidebar.svelte

@@ -6,11 +6,7 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		rootClass?: string;
-		contentClass?: string;
-		headerClass?: string;
-		footerClass?: string;
-		variant?:
+		color?:
 			| 'primary'
 			| 'secondary'
 			| 'muted'
@@ -19,7 +15,12 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'ghost';
+			| 'background';
+		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
+		rootClass?: string;
+		contentClass?: string;
+		headerClass?: string;
+		footerClass?: string;
 	};
 
 	const {
@@ -30,10 +31,11 @@
 		contentClass,
 		headerClass,
 		footerClass,
+		color = 'surface',
 		variant = 'ghost'
 	}: Props = $props();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -42,11 +44,18 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
+		background: 'is-background'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft',
+		outlined: 'is-outlined',
 		ghost: 'is-ghost'
 	};
 </script>
 
-<aside class={cn('sidebar', variantClasses[variant], rootClass)}>
+<aside class={cn('sidebar', colors[color], variants[variant], rootClass)}>
 	{#if header}
 		<div class={cn('sidebar-header', headerClass)}>
 			{@render header()}

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

@@ -3,11 +3,12 @@ type Props = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
+    variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     rootClass?: string;
     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

@@ -1,6 +1,7 @@
 @layer components {
 	.appbar {
 		@apply w-full z-30 transition-all duration-300;
+		padding-top: env(safe-area-inset-top, 0px);
 
 		&.is-sticky {
 			@apply fixed top-0;
@@ -37,25 +38,25 @@
 
 		&.is-soft {
 			&.is-primary {
-				@apply bg-on-primary text-primary;
+				@apply bg-soft-primary text-primary;
 			}
 			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
+				@apply bg-soft-secondary text-secondary;
 			}
 			&.is-muted {
-				@apply bg-muted text-on-muted;
+				@apply bg-soft-muted text-on-muted;
 			}
 			&.is-success {
-				@apply bg-on-success text-success;
+				@apply bg-soft-success text-success;
 			}
 			&.is-info {
-				@apply bg-on-info text-info;
+				@apply bg-soft-info text-info;
 			}
 			&.is-warning {
-				@apply bg-on-warning text-warning;
+				@apply bg-soft-warning text-warning;
 			}
 			&.is-danger {
-				@apply bg-on-danger text-danger;
+				@apply bg-soft-danger text-danger;
 			}
 			&.is-default {
 				@apply bg-background text-on-background;

package/dist/layout/css/footer.css

@@ -17,25 +17,25 @@
 
 		&.is-soft {
 			&.is-primary {
-				@apply bg-on-primary text-primary;
+				@apply bg-soft-primary text-primary;
 			}
 			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
+				@apply bg-soft-secondary text-secondary;
 			}
 			&.is-muted {
-				@apply bg-muted text-on-muted;
+				@apply bg-soft-muted text-on-muted;
 			}
 			&.is-success {
-				@apply bg-on-success text-success;
+				@apply bg-soft-success text-success;
 			}
 			&.is-info {
-				@apply bg-on-info text-info;
+				@apply bg-soft-info text-info;
 			}
 			&.is-warning {
-				@apply bg-on-warning text-warning;
+				@apply bg-soft-warning text-warning;
 			}
 			&.is-danger {
-				@apply bg-on-danger text-danger;
+				@apply bg-soft-danger text-danger;
 			}
 			&.is-default {
 				@apply bg-background text-on-background;

package/dist/layout/css/sidebar.css

@@ -13,68 +13,129 @@
 		.sidebar-body {
 			@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;
-	}
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
+		}
 
-	.sidebar.is-muted.is-solid {
-		@apply bg-on-muted text-muted;
-	}
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.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;
+			}
+		}
 
-	.sidebar.is-ghost {
-		@apply bg-background text-on-background;
-	}
+		&.is-outlined {
+			@apply border;
+
+			&.is-primary {
+				@apply border-primary text-primary;
+			}
+			&.is-secondary {
+				@apply border-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply border-muted text-on-muted;
+			}
+			&.is-background {
+				@apply border-on-background text-on-background;
+			}
+			&.is-surface {
+				@apply border-on-surface text-on-surface;
+			}
+			&.is-success {
+				@apply border-success text-success;
+			}
+			&.is-info {
+				@apply border-info text-info;
+			}
+			&.is-warning {
+				@apply border-warning text-warning;
+			}
+			&.is-danger {
+				@apply border-danger text-danger;
+			}
+		}
 
-	.sidebar.is-surface {
-		@apply bg-surface text-on-surface;
+		&.is-ghost {
+			@apply bg-transparent;
+
+			&.is-primary {
+				@apply text-primary;
+			}
+			&.is-secondary {
+				@apply text-secondary;
+			}
+			&.is-muted {
+				@apply text-on-muted;
+			}
+			&.is-background {
+				@apply text-on-background;
+			}
+			&.is-surface {
+				@apply text-on-surface;
+			}
+			&.is-success {
+				@apply text-success;
+			}
+			&.is-info {
+				@apply text-info;
+			}
+			&.is-warning {
+				@apply text-warning;
+			}
+			&.is-danger {
+				@apply text-danger;
+			}
+		}
 	}
 }

package/dist/navigation/BottomNav.svelte

@@ -14,18 +14,21 @@
 		isActive?: boolean;
 	};
 
+	type Color =
+		| 'primary'
+		| 'secondary'
+		| 'muted'
+		| 'success'
+		| 'info'
+		| 'warning'
+		| 'danger'
+		| 'surface'
+		| 'background';
+
 	type Props = {
 		items: BottomNavItem[];
-		color?:
-			| 'primary'
-			| 'secondary'
-			| 'muted'
-			| 'success'
-			| 'info'
-			| 'warning'
-			| 'danger'
-			| 'surface'
-			| 'default';
+		color?: Color;
+		fabColor?: Color;
 		variant?: 'solid' | 'soft' | 'blur';
 		activeStyle?: 'line' | 'pill';
 		size?: 'sm' | 'md' | 'lg';
@@ -37,8 +40,9 @@
 	const {
 		items = [],
 		class: className,
-		color = 'primary',
-		variant = 'soft',
+		color = 'surface',
+		fabColor = 'primary',
+		variant = 'solid',
 		activeStyle = 'line',
 		size = 'md',
 		isBlock = false,
@@ -54,7 +58,7 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {
@@ -104,7 +108,12 @@
 >
 	{#each items as item}
 		{@const active = isItemActive(item)}
-		{@const itemClass = cn('bottomnav-item', active && 'is-active', item.isFab && 'is-fab')}
+		{@const itemClass = cn(
+			'bottomnav-item',
+			active && 'is-active',
+			item.isFab && 'is-fab',
+			item.isFab && colors[fabColor]
+		)}
 
 		{#if item.href}
 			<a href={item.href} class={itemClass}>