ui-svelte 0.2.3 → 0.2.4

package/dist/control/Audio.svelte

@@ -194,18 +194,14 @@
 		aria-valuemin="0"
 		aria-valuemax="100"
 	>
-		{#if isAnalyzing}
-			<div class="media-loading">Analizando...</div>
-		{:else}
-			<div class="media-bars">
-				{#each waveformData as height, i}
-					{@const progress = duration > 0 ? currentTime / duration : 0}
-					{@const barPosition = (i + 0.5) / waveformData.length}
-					{@const isPlayed = barPosition <= progress}
-					<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
-				{/each}
-			</div>
-		{/if}
+		<div class="media-bars">
+			{#each waveformData as height, i}
+				{@const progress = duration > 0 ? currentTime / duration : 0}
+				{@const barPosition = (i + 0.5) / waveformData.length}
+				{@const isPlayed = barPosition <= progress}
+				<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
+			{/each}
+		</div>
 	</div>
 
 	<span class="media-time">{duration > 0 ? formatTime(duration - currentTime) : '0:00'}</span>

package/dist/control/css/btn.css

@@ -194,7 +194,7 @@
 	}
 
 	.btn-close {
-		@apply absolute right-1 top-1;
+		@apply absolute right-2 top-2;
 	}
 	.btn-close-icon {
 		@apply h-4 w-4 cursor-pointer;

package/dist/display/css/card.css

@@ -72,16 +72,6 @@
 		@apply bg-surface text-on-surface;
 	}
 
-	.card.is-surface.has-divider {
-		.card-header {
-			@apply border-on-surface;
-		}
-
-		.card-footer {
-			@apply border-on-surface;
-		}
-	}
-
 	.card.is-ghost {
 		@apply bg-transparent;
 	}

package/dist/layout/AppBar.svelte

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

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

@@ -10,9 +10,11 @@ type Props = {
     endClass?: string;
     isBlurred?: boolean;
     isBordered?: boolean;
+    borderOnScrollOnly?: boolean;
     hideOnScroll?: boolean;
     isSticky?: boolean;
     isBoxed?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const AppBar: import("svelte").Component<Props, {}, "">;
 type AppBar = ReturnType<typeof AppBar>;

package/dist/layout/Footer.svelte

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

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

@@ -12,6 +12,7 @@ type Props = {
     isBordered?: boolean;
     isBoxed?: boolean;
     hideOnScroll?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'ghost';
 };
 declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/layout/Sidebar.svelte

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

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

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

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

@@ -35,4 +35,67 @@
 			}
 		}
 	}
+	.appbar.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.appbar.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.appbar.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.appbar.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.appbar.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.appbar.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.appbar.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.appbar.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.appbar.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.appbar.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.appbar.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.appbar.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.appbar.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.appbar.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.appbar.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.appbar.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }

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

@@ -9,4 +9,67 @@
 			@apply overflow-hidden;
 		}
 	}
+	.dock.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.dock.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.dock.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.dock.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.dock.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.dock.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.dock.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.dock.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.dock.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.dock.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.dock.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.dock.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.dock.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.dock.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.dock.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.dock.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }

package/dist/layout/css/footer.css

@@ -32,4 +32,67 @@
 			}
 		}
 	}
+	.footer.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.footer.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.footer.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.footer.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.footer.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.footer.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.footer.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.footer.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.footer.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.footer.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.footer.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.footer.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.footer.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.footer.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.footer.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.footer.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }

package/dist/layout/css/sidebar.css

@@ -14,4 +14,67 @@
 			@apply relative flex min-h-0 w-full flex-col gap-3 p-3 overflow-hidden hover:overflow-y-auto;
 		}
 	}
+	.sidebar.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.sidebar.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.sidebar.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.sidebar.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.sidebar.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.sidebar.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.sidebar.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.sidebar.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.sidebar.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.sidebar.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.sidebar.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.sidebar.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.sidebar.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.sidebar.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.sidebar.is-ghost {
+		@apply bg-background text-on-background;
+	}
+
+	.sidebar.is-surface {
+		@apply bg-surface text-on-surface;
+	}
 }

package/dist/navigation/NavMenu.svelte

@@ -25,12 +25,11 @@
 
 	type Props = {
 		items: MenuItem[];
-		variant?: 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
 	};
 
-	const { items = [], class: className, variant = 'primary', size = 'md' }: Props = $props();
+	const { items = [], class: className, size = 'md' }: Props = $props();
 
 	let openSubmenuIndex = $state<number | null>(null);
 	let triggerElements = $state<Record<number, HTMLElement>>({});
@@ -43,12 +42,6 @@
 		isMegamenu: false
 	});
 
-	const variantClasses = {
-		primary: 'navmenu-primary',
-		secondary: 'navmenu-secondary',
-		muted: 'navmenu-muted'
-	};
-
 	const sizeClasses = {
 		sm: 'is-sm',
 		md: 'is-md',
@@ -172,7 +165,7 @@
 	});
 </script>
 
-<nav class={cn('navmenu', variantClasses[variant], sizeClasses[size], className)}>
+<nav class={cn('navmenu', sizeClasses[size], className)}>
 	{#each items as item, index}
 		{#if item.href && !item.subitems && !item.megamenu}
 			<a href={item.href} class={cn('navmenu-item', isItemActive(item.href) && 'is-active')}>

package/dist/navigation/SideNav.svelte

@@ -31,7 +31,6 @@
 
 	type Props = {
 		items: SideNavItem[];
-		variant?: 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
 		isWide?: boolean;
@@ -42,7 +41,6 @@
 	const {
 		items = [],
 		class: className,
-		variant = 'primary',
 		size = 'md',
 		isWide,
 		isCompact,
@@ -70,12 +68,6 @@
 		isExpanded = !isCollapsible;
 	});
 
-	const variantClasses = {
-		primary: 'sidenav-primary',
-		secondary: 'sidenav-secondary',
-		muted: 'sidenav-muted'
-	};
-
 	const sizeClasses = {
 		sm: 'is-sm',
 		md: 'is-md',
@@ -119,7 +111,6 @@
 <nav
 	class={cn(
 		'sidenav',
-		variantClasses[variant],
 		sizeClasses[size],
 		isCompact && 'is-compact',
 		isCollapsible && 'is-collapsible',

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

@@ -21,7 +21,6 @@ import { type IconData } from '../index.js';
 import type { Snippet } from 'svelte';
 type Props = {
     items: SideNavItem[];
-    variant?: 'primary' | 'secondary' | 'muted';
     size?: 'sm' | 'md' | 'lg';
     class?: string;
     isWide?: boolean;

package/dist/navigation/css/footer-group.css

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

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

@@ -1,19 +1,19 @@
 @layer components {
 	.navmenu {
-		@apply flex items-center gap-1 text-on-background;
+		@apply flex items-center gap-1;
 
 		.navmenu-item {
 			@apply relative flex items-center gap-2 rounded-ui px-4 py-2;
 			@apply cursor-pointer select-none outline-none;
 			@apply transition-all duration-200;
-			@apply hover:bg-muted;
 
 			.navmenu-icon {
 				@apply h-5 w-5 shrink-0;
 			}
 
 			.navmenu-label {
-				@apply font-medium text-sm whitespace-nowrap;
+				@apply text-sm whitespace-nowrap;
+				@apply font-light hover:font-semibold;
 			}
 
 			.navmenu-arrow {
@@ -24,8 +24,8 @@
 				}
 			}
 
-			&.is-active {
-				@apply bg-muted;
+			&.is-active .navmenu-label {
+				@apply font-semibold;
 			}
 		}
 
@@ -76,43 +76,13 @@
 				}
 			}
 		}
-
-		&.navmenu-primary {
-			.navmenu-item.is-active {
-				@apply bg-on-primary text-primary;
-
-				.navmenu-icon {
-					@apply text-primary;
-				}
-			}
-		}
-
-		&.navmenu-secondary {
-			.navmenu-item.is-active {
-				@apply bg-on-secondary text-secondary;
-
-				.navmenu-icon {
-					@apply text-secondary;
-				}
-			}
-		}
-
-		&.navmenu-muted {
-			.navmenu-item.is-active {
-				@apply bg-muted text-on-muted;
-
-				.navmenu-icon {
-					@apply text-on-muted;
-				}
-			}
-		}
 	}
 
 	.navmenu-popover {
 		@apply flex flex-col gap-2 p-2 my-1;
 		@apply bg-background text-on-background rounded-ui;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
-		@apply shadow-sm shadow-muted border border-muted;
+		@apply shadow-sm shadow-muted;
 		position: fixed;
 		z-index: 9999;
 		max-height: 80vh;
@@ -134,7 +104,7 @@
 			@apply flex items-center gap-2 rounded-ui px-3 py-2;
 			@apply cursor-pointer select-none outline-none;
 			@apply transition-all duration-200;
-			@apply hover:bg-muted;
+			@apply font-light hover:font-medium;
 
 			.navmenu-submenu-icon {
 				@apply h-5 w-5 shrink-0;
@@ -153,7 +123,7 @@
 			}
 
 			&.is-active {
-				@apply bg-muted;
+				@apply font-medium;
 			}
 		}
 
@@ -162,7 +132,7 @@
 		}
 
 		.navmenu-header {
-			@apply px-3 py-2 text-xs font-semibold text-on-muted/70 uppercase tracking-wide;
+			@apply px-3 py-2 text-xs font-semibold uppercase tracking-wide;
 		}
 	}
 }

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

@@ -1,38 +1,38 @@
 @layer components {
 	.sidenav {
-		@apply flex w-full min-w-0 flex-col gap-0.5 text-on-muted;
+		@apply flex w-full min-w-0 flex-col gap-0.5;
 
 		.sidenav-divider {
 			@apply my-2 h-px w-full bg-muted;
 		}
 
 		.sidenav-header {
-			@apply flex items-center gap-2 px-3 py-3 text-sm font-bold text-on-surface;
+			@apply flex items-center gap-2 px-3 py-3;
 			@apply mt-4 mb-1 first:mt-0;
 			@apply justify-start;
 
 			.icon {
-				@apply h-5 w-5 shrink-0 text-on-surface;
+				@apply shrink-0;
 			}
 
 			.sidenav-header-content {
 				@apply flex flex-1 flex-col overflow-hidden;
 
 				.sidenav-header-label {
-					@apply truncate font-bold uppercase text-xs tracking-wider text-left;
+					@apply text-sm truncate font-semibold tracking-wide text-left;
+					@apply opacity-75;
 				}
 
 				.sidenav-header-description {
-					@apply truncate text-xs font-normal text-on-muted/70 text-left;
+					@apply truncate font-light text-left;
 				}
 			}
 
-			&.sidenav-header-link {
-				@apply cursor-pointer rounded-ui outline-none;
-				@apply hover:bg-muted/50;
+			&.sidenav-header-link .sidenav-header-content {
+				@apply cursor-pointer;
 
-				&.is-active {
-					@apply bg-muted;
+				.sidenav-header-label {
+					@apply font-bold;
 				}
 			}
 
@@ -40,7 +40,7 @@
 				@apply flex shrink-0 items-center justify-center ml-auto;
 
 				.sidenav-arrow {
-					@apply h-4 w-4 transition-transform duration-200;
+					@apply transition-transform duration-200;
 
 					&.is-open {
 						@apply rotate-90;
@@ -52,7 +52,6 @@
 		.sidenav-item {
 			@apply relative flex w-fit items-center gap-2 rounded-ui px-3 py-2;
 			@apply cursor-pointer select-none outline-none;
-			@apply hover:bg-muted;
 
 			&.is-wide {
 				@apply w-full;
@@ -60,21 +59,17 @@
 
 			.sidenav-icon-wrapper {
 				@apply flex shrink-0 items-center justify-center;
-
-				.sidenav-icon {
-					@apply h-5 w-5;
-				}
 			}
 
 			.sidenav-content {
 				@apply flex flex-1 flex-col overflow-hidden;
 
 				.sidenav-label {
-					@apply truncate font-medium text-sm;
+					@apply truncate font-light hover:font-semibold;
 				}
 
 				.sidenav-description {
-					@apply truncate text-xs text-on-muted/70;
+					@apply truncate font-light;
 				}
 			}
 
@@ -82,7 +77,7 @@
 				@apply flex shrink-0 items-center;
 
 				.sidenav-status {
-					@apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium;
+					@apply rounded-full bg-muted px-2 py-0.5 font-medium;
 				}
 			}
 
@@ -90,7 +85,7 @@
 				@apply flex shrink-0 items-center justify-center;
 
 				.sidenav-arrow {
-					@apply h-4 w-4 transition-transform duration-200;
+					@apply transition-transform duration-200;
 
 					&.is-open {
 						@apply rotate-90;
@@ -99,56 +94,156 @@
 			}
 		}
 
+		.sidenav-item.is-active .sidenav-label {
+			@apply font-semibold;
+		}
+
 		&.is-sm {
 			.sidenav-item {
-				@apply gap-1.5 px-2 py-1.5 text-xs;
+				@apply gap-1.5 px-2 py-1.5;
 
 				.sidenav-icon-wrapper .sidenav-icon {
 					@apply h-4 w-4;
 				}
+
+				.sidenav-content {
+					.sidenav-label {
+						@apply text-xs;
+					}
+
+					.sidenav-description {
+						@apply text-[10px];
+					}
+				}
+
+				.sidenav-status-wrapper .sidenav-status {
+					@apply text-[10px];
+				}
+
+				.sidenav-arrow-wrapper .sidenav-arrow {
+					@apply h-3 w-3;
+				}
 			}
 
 			.sidenav-header {
-				@apply gap-1.5 px-2 py-1.5 text-xs;
+				@apply gap-1.5 px-2 py-1.5;
 
-				.sidenav-header-icon {
+				.icon {
 					@apply h-4 w-4;
 				}
+
+				.sidenav-header-content {
+					.sidenav-header-label {
+						@apply text-xs;
+					}
+
+					.sidenav-header-description {
+						@apply text-[10px];
+					}
+				}
+
+				.sidenav-arrow-wrapper .sidenav-arrow {
+					@apply h-3 w-3;
+				}
 			}
 		}
 
 		&.is-md {
 			.sidenav-item {
-				@apply gap-2 px-3 py-2 text-sm;
+				@apply gap-2 px-3 py-2;
 
 				.sidenav-icon-wrapper .sidenav-icon {
 					@apply h-5 w-5;
 				}
+
+				.sidenav-content {
+					.sidenav-label {
+						@apply text-sm;
+					}
+
+					.sidenav-description {
+						@apply text-xs;
+					}
+				}
+
+				.sidenav-status-wrapper .sidenav-status {
+					@apply text-xs;
+				}
+
+				.sidenav-arrow-wrapper .sidenav-arrow {
+					@apply h-4 w-4;
+				}
 			}
 
 			.sidenav-header {
-				@apply gap-2 px-3 py-2 text-sm;
+				@apply gap-2 px-3 py-2;
 
-				.sidenav-header-icon {
+				.icon {
 					@apply h-5 w-5;
 				}
+
+				.sidenav-header-content {
+					.sidenav-header-label {
+						@apply text-sm;
+					}
+
+					.sidenav-header-description {
+						@apply text-xs;
+					}
+				}
+
+				.sidenav-arrow-wrapper .sidenav-arrow {
+					@apply h-4 w-4;
+				}
 			}
 		}
 
 		&.is-lg {
 			.sidenav-item {
-				@apply gap-3 px-4 py-3 text-base;
+				@apply gap-3 px-4 py-3;
 
 				.sidenav-icon-wrapper .sidenav-icon {
-					@apply h-6 w-6;
+					@apply h-7 w-7;
+				}
+
+				.sidenav-content {
+					.sidenav-label {
+						@apply text-base;
+					}
+
+					.sidenav-description {
+						@apply text-sm;
+					}
+				}
+
+				.sidenav-status-wrapper .sidenav-status {
+					@apply text-sm;
+				}
+
+				.sidenav-arrow-wrapper .sidenav-arrow {
+					@apply h-5 w-5;
 				}
 			}
 
 			.sidenav-header {
-				@apply gap-3 px-4 py-3 text-base;
+				@apply gap-3 px-4 py-3;
+
+				.icon {
+					@apply h-7 w-7;
+				}
+
+				.sidenav-header-content {
+					.sidenav-header-label {
+						@apply text-base;
+					}
+
+					.sidenav-header-description {
+						@apply text-sm;
+					}
+				}
 
-				.sidenav-header-icon {
-					@apply h-6 w-6;
+				.sidenav-arrow-wrapper .sidenav-arrow {
+					@apply h-5 w-5;
 				}
 			}
 		}
@@ -191,51 +286,17 @@
 			}
 		}
 
-		&.sidenav-primary {
-			.sidenav-item.is-active {
-				@apply bg-on-primary text-primary;
-
-				.sidenav-icon {
-					@apply text-primary;
-				}
-			}
-		}
-
-		&.sidenav-secondary {
-			.sidenav-item.is-active {
-				@apply bg-on-secondary text-secondary;
-
-				.sidenav-icon {
-					@apply text-secondary;
-				}
-			}
-		}
-
-		&.sidenav-muted {
-			.sidenav-item.is-active {
-				@apply bg-muted text-on-muted;
-
-				.sidenav-icon {
-					@apply text-on-muted;
-				}
-			}
-		}
-
 		.sidenav-submenu-wrapper {
 			@apply flex flex-col gap-0.5;
 
 			.sidenav-submenu-trigger {
 				@apply w-full cursor-pointer rounded-ui outline-none;
-				@apply hover:bg-muted/50;
+				@apply hover:font-semibold;
 				@apply justify-start;
 			}
 
 			.sidenav-submenu-content {
 				@apply ml-5 flex flex-col gap-0.5 border-l border-muted pl-2;
-
-				.sidenav-subitem {
-					@apply text-sm;
-				}
 			}
 		}
 	}

package/dist/overlay/css/modal.css

@@ -6,7 +6,7 @@
 			@apply absolute inset-0 bg-overlay;
 		}
 		.modal {
-			@apply relative flex flex-col gap-4 md:gap-6 rounded-ui py-4 md:py-6 max-w-[95vw] max-h-[95vh] overflow-hidden overflow-y-auto;
+			@apply relative flex flex-col gap-4 md:gap-6 rounded-ui py-4 md:py-6 max-w-[95vw] max-h-[95vh];
 
 			&.is-ghost {
 				@apply bg-background text-on-background;
@@ -33,7 +33,7 @@
 				@apply bg-on-muted text-muted;
 			}
 			.modal-content {
-				@apply px-4 md:px-6;
+				@apply px-4 md:px-6 overflow-hidden overflow-y-auto;
 			}
 
 			.modal-header {

package/package.json

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