ui-svelte 0.2.11 → 0.2.13

package/dist/index.css

@@ -4,11 +4,17 @@
 @import './css/utilities.css';
 @import './css/animations.css';
 @import './css/base.css';
+@import './css/decorations.css';
+@import './css/rich-text.css';
+@import './css/transitions.css';
+@import './css/typography.css';
 
 @import './control/css/btn.css';
+@import './control/css/image.css';
 @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';
@@ -28,25 +34,32 @@
 @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';
 @import './display/css/marquee.css';
 @import './display/css/section.css';
+@import './display/css/skeleton.css';
 @import './display/css/table.css';
+@import './display/css/map.css';
 
 @import './form/css/checkbox.css';
 @import './form/css/combo-box.css';
 @import './form/css/control.css';
 @import './form/css/csv-field.css';
 @import './form/css/date.css';
+@import './form/css/date-range.css';
+@import './form/css/drag-drop.css';
 @import './form/css/dropzone.css';
+@import './form/css/editor.css';
 @import './form/css/field.css';
 @import './form/css/image-cropper.css';
 @import './form/css/password.css';
 @import './form/css/radio-group.css';
 @import './form/css/slider.css';
 @import './form/css/select.css';
+@import './form/css/color-field.css';
 @import './form/css/textarea.css';
 @import './form/css/toggle.css';
 
@@ -60,10 +73,12 @@
 @import './navigation/css/nav-menu.css';
 @import './navigation/css/footer-nav.css';
 @import './navigation/css/footer-group.css';
+@import './navigation/css/pagination.css';
 @import './navigation/css/side-nav.css';
 @import './navigation/css/tabs.css';
 
 @import './overlay/css/modal.css';
+@import './overlay/css/command.css';
 @import './overlay/css/drawer.css';
 @import './overlay/css/dropdown.css';
 @import './overlay/css/hovercard.css';
@@ -71,68 +86,48 @@
 @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;
 	--radius-ui: 0.75rem;
 	--scrollbar-size: 6px;
-}
+}

package/dist/index.d.ts

@@ -6,6 +6,8 @@ import LineChart from './charts/LineChart.svelte';
 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';
@@ -18,25 +20,32 @@ import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
-import ChatBox from './display/ChatBox.svelte';
+import ChatBox, { type PromptMessage, type PromptState } 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, { type IconData } from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
+import Skeleton from './display/Skeleton.svelte';
+import Map, { type LatLng, type MapMarker, type RouteInfo } from './display/Map.svelte';
 import Table from './display/Table.svelte';
 import Checkbox from './form/Checkbox.svelte';
+import ColorField from './form/ColorField.svelte';
 import ComboBox from './form/ComboBox.svelte';
 import CsvField from './form/CsvField.svelte';
 import DateField from './form/DateField.svelte';
+import DateRange from './form/DateRange.svelte';
+import DragDrop, { type DragDropItem, type DragDropGroup } from './form/DragDrop.svelte';
 import Dropzone from './form/Dropzone.svelte';
+import Editor from './form/Editor.svelte';
 import ImageCropper from './form/ImageCropper.svelte';
 import TextField from './form/TextField.svelte';
-import PasswordStrength from './form/PasswordStrength.svelte';
+import PasswordField from './form/PasswordField.svelte';
 import PinField from './form/PinField.svelte';
 import RadioGroup from './form/RadioGroup.svelte';
 import PhoneField from './form/PhoneField.svelte';
@@ -53,6 +62,7 @@ import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
 import FooterNav from './navigation/FooterNav.svelte';
 import FooterGroup from './navigation/FooterGroup.svelte';
+import Pagination from './navigation/Pagination.svelte';
 import SideNav, { type SideNavItem, type SideNavSubItem } from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
@@ -76,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, 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, PasswordStrength, 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 };
+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

@@ -6,6 +6,8 @@ import LineChart from './charts/LineChart.svelte';
 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';
@@ -18,25 +20,32 @@ import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
-import ChatBox from './display/ChatBox.svelte';
+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';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
+import Skeleton from './display/Skeleton.svelte';
+import Map, {} from './display/Map.svelte';
 import Table from './display/Table.svelte';
 import Checkbox from './form/Checkbox.svelte';
+import ColorField from './form/ColorField.svelte';
 import ComboBox from './form/ComboBox.svelte';
 import CsvField from './form/CsvField.svelte';
 import DateField from './form/DateField.svelte';
+import DateRange from './form/DateRange.svelte';
+import DragDrop, {} from './form/DragDrop.svelte';
 import Dropzone from './form/Dropzone.svelte';
+import Editor from './form/Editor.svelte';
 import ImageCropper from './form/ImageCropper.svelte';
 import TextField from './form/TextField.svelte';
-import PasswordStrength from './form/PasswordStrength.svelte';
+import PasswordField from './form/PasswordField.svelte';
 import PinField from './form/PinField.svelte';
 import RadioGroup from './form/RadioGroup.svelte';
 import PhoneField from './form/PhoneField.svelte';
@@ -53,6 +62,7 @@ import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
 import FooterNav from './navigation/FooterNav.svelte';
 import FooterGroup from './navigation/FooterGroup.svelte';
+import Pagination from './navigation/Pagination.svelte';
 import SideNav, {} from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
@@ -76,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, 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, PasswordStrength, 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 { 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/AppBar.svelte

@@ -12,15 +12,7 @@
 		startClass?: string;
 		centerClass?: string;
 		endClass?: string;
-		isBlurred?: boolean;
-		isBordered?: boolean;
-		borderOnScrollOnly?: boolean;
-		hideOnScroll?: boolean;
-		solidOnScroll?: boolean;
-		isSticky?: boolean;
-		isFloating?: boolean;
-		isBoxed?: boolean;
-		variant?:
+		color?:
 			| 'primary'
 			| 'secondary'
 			| 'muted'
@@ -29,7 +21,16 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'ghost';
+			| 'default';
+		variant?: 'solid' | 'soft';
+		isBlurred?: boolean;
+		isBordered?: boolean;
+		borderOnScrollOnly?: boolean;
+		hideOnScroll?: boolean;
+		solidOnScroll?: boolean;
+		isSticky?: boolean;
+		isFloating?: boolean;
+		isBoxed?: boolean;
 	};
 
 	const {
@@ -41,12 +42,13 @@
 		startClass,
 		centerClass,
 		endClass,
+		color = 'default',
+		variant = 'soft',
 		isBordered,
 		borderOnScrollOnly = false,
 		isBlurred,
 		isSticky,
 		isBoxed,
-		variant = 'ghost',
 		hideOnScroll,
 		solidOnScroll = false,
 		isFloating = false
@@ -59,7 +61,7 @@
 
 	const scroll = useScroll();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -68,7 +70,12 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		ghost: 'is-ghost'
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
 	$effect(() => {
@@ -108,7 +115,8 @@
 	bind:this={headerElement}
 	class={cn(
 		'appbar',
-		variantClasses[variant],
+		colors[color],
+		variants[variant],
 		shouldShowBorder && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',

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

@@ -8,6 +8,8 @@ type Props = {
     startClass?: string;
     centerClass?: string;
     endClass?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft';
     isBlurred?: boolean;
     isBordered?: boolean;
     borderOnScrollOnly?: boolean;
@@ -16,7 +18,6 @@ type Props = {
     isSticky?: boolean;
     isFloating?: 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

@@ -12,11 +12,7 @@
 		startClass?: string;
 		centerClass?: string;
 		endClass?: string;
-		isBlurred?: boolean;
-		isBordered?: boolean;
-		isBoxed?: boolean;
-		hideOnScroll?: boolean;
-		variant?:
+		color?:
 			| 'primary'
 			| 'secondary'
 			| 'muted'
@@ -25,7 +21,12 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'ghost';
+			| 'default';
+		variant?: 'solid' | 'soft';
+		isBlurred?: boolean;
+		isBordered?: boolean;
+		isBoxed?: boolean;
+		hideOnScroll?: boolean;
 	};
 
 	const {
@@ -37,11 +38,12 @@
 		startClass,
 		centerClass,
 		endClass,
+		color = 'default',
+		variant = 'soft',
 		isBordered,
 		isBlurred,
 		isBoxed,
-		hideOnScroll,
-		variant = 'ghost'
+		hideOnScroll
 	}: Props = $props();
 
 	let footerElement = $state<HTMLElement | null>(null);
@@ -51,7 +53,7 @@
 
 	const scroll = useScroll();
 
-	const variantClasses = {
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -60,7 +62,12 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		ghost: 'is-ghost'
+		default: 'is-default'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
 	};
 
 	$effect(() => {
@@ -93,7 +100,8 @@
 	bind:this={footerElement}
 	class={cn(
 		'footer',
-		variantClasses[variant],
+		colors[color],
+		variants[variant],
 		isBordered && 'is-bordered',
 		shouldBlur && 'is-blurred',
 		isHidden && 'is-hidden',

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

@@ -8,11 +8,12 @@ type Props = {
     startClass?: string;
     centerClass?: string;
     endClass?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    variant?: 'solid' | 'soft';
     isBlurred?: boolean;
     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/Provider.svelte

@@ -5,22 +5,45 @@
 
 	type Props = {
 		children: Snippet;
-		toastSolid?: boolean;
+		toastVariant?: 'solid' | 'soft';
 		toastIcon?: boolean;
 		toastPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		themeTransition?: 'circle' | 'slide' | 'fade' | 'vertical' | 'none';
+		pageTransition?: 'fade' | 'slide' | 'scale' | 'none';
 	};
 
-	const { children, toastSolid, toastPosition, toastIcon }: Props = $props();
+	const {
+		children,
+		toastVariant,
+		toastPosition,
+		toastIcon,
+		themeTransition = 'circle',
+		pageTransition = 'fade'
+	}: Props = $props();
 
 	onNavigate((navigation) => {
+		if (pageTransition === 'none') return;
 		if (!document.startViewTransition) return;
 		return new Promise((resolve) => {
-			document.startViewTransition(async () => {
+			document.documentElement.classList.add('page-transitioning');
+			document.documentElement.setAttribute('data-page-transition', pageTransition);
+
+			const transition = document.startViewTransition(async () => {
 				resolve();
 				await navigation.complete;
 			});
+
+			transition.finished.finally(() => {
+				document.documentElement.classList.remove('page-transitioning');
+				document.documentElement.removeAttribute('data-page-transition');
+			});
 		});
 	});
+	$effect(() => {
+		if (typeof document !== 'undefined') {
+			document.documentElement.setAttribute('data-theme-transition', themeTransition);
+		}
+	});
 </script>
 
 <svelte:head>
@@ -31,22 +54,22 @@
 	<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>
 
 {@render children()}
-<Toast position={toastPosition} showIcon={toastIcon} isSolid={toastSolid} />
+<Toast position={toastPosition} showIcon={toastIcon} variant={toastVariant} />

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

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
-    toastSolid?: boolean;
+    toastVariant?: 'solid' | 'soft';
     toastIcon?: boolean;
     toastPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    themeTransition?: 'circle' | 'slide' | 'fade' | 'vertical' | 'none';
+    pageTransition?: 'fade' | 'slide' | 'scale' | 'none';
 };
 declare const Provider: import("svelte").Component<Props, {}, "">;
 type Provider = ReturnType<typeof Provider>;

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