ui-svelte 0.2.3 → 0.2.5

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-base 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;
 			}
 		}
 
@@ -33,7 +33,11 @@
 			@apply gap-0.5;
 
 			.navmenu-item {
-				@apply gap-1.5 px-3 py-1.5 text-xs;
+				@apply gap-1.5 px-3 py-1.5;
+
+				.navmenu-label {
+					@apply text-xs;
+				}
 
 				.navmenu-icon {
 					@apply h-4 w-4;
@@ -49,7 +53,11 @@
 			@apply gap-1;
 
 			.navmenu-item {
-				@apply gap-2 px-4 py-2 text-sm;
+				@apply gap-2 px-4 py-2;
+
+				.navmenu-label {
+					@apply text-sm;
+				}
 
 				.navmenu-icon {
 					@apply h-5 w-5;
@@ -65,54 +73,106 @@
 			@apply gap-1.5;
 
 			.navmenu-item {
-				@apply gap-2.5 px-5 py-2.5 text-base;
+				@apply gap-3 px-6 py-3;
+
+				.navmenu-label {
+					@apply text-lg;
+				}
 
 				.navmenu-icon {
-					@apply h-6 w-6;
+					@apply h-7 w-7;
 				}
 
 				.navmenu-arrow {
-					@apply h-5 w-5;
+					@apply h-6 w-6;
 				}
 			}
 		}
+	}
 
-		&.navmenu-primary {
-			.navmenu-item.is-active {
-				@apply bg-on-primary text-primary;
+	.navmenu-popover.is-sm {
+		@apply gap-1 p-1.5;
 
-				.navmenu-icon {
-					@apply text-primary;
+		.navmenu-submenu-item {
+			@apply gap-1.5 px-2 py-1.5;
+
+			.navmenu-submenu-icon {
+				@apply h-4 w-4;
+			}
+
+			.navmenu-submenu-content {
+				.navmenu-submenu-label {
+					@apply text-xs;
+				}
+
+				.navmenu-submenu-description {
+					@apply text-[10px];
 				}
 			}
 		}
 
-		&.navmenu-secondary {
-			.navmenu-item.is-active {
-				@apply bg-on-secondary text-secondary;
+		.navmenu-header {
+			@apply px-2 py-1.5 text-[10px];
+		}
+	}
 
-				.navmenu-icon {
-					@apply text-secondary;
+	.navmenu-popover.is-md {
+		@apply gap-2 p-2;
+
+		.navmenu-submenu-item {
+			@apply gap-2 px-3 py-2;
+
+			.navmenu-submenu-icon {
+				@apply h-5 w-5;
+			}
+
+			.navmenu-submenu-content {
+				.navmenu-submenu-label {
+					@apply text-sm;
+				}
+
+				.navmenu-submenu-description {
+					@apply text-xs;
 				}
 			}
 		}
 
-		&.navmenu-muted {
-			.navmenu-item.is-active {
-				@apply bg-muted text-on-muted;
+		.navmenu-header {
+			@apply px-3 py-2 text-xs;
+		}
+	}
 
-				.navmenu-icon {
-					@apply text-on-muted;
+	.navmenu-popover.is-lg {
+		@apply gap-3 p-4;
+
+		.navmenu-submenu-item {
+			@apply gap-3 px-5 py-3;
+
+			.navmenu-submenu-icon {
+				@apply h-7 w-7;
+			}
+
+			.navmenu-submenu-content {
+				.navmenu-submenu-label {
+					@apply text-lg;
+				}
+
+				.navmenu-submenu-description {
+					@apply text-base;
 				}
 			}
 		}
+
+		.navmenu-header {
+			@apply px-5 py-3 text-base;
+		}
 	}
 
 	.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 +194,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 +213,7 @@
 			}
 
 			&.is-active {
-				@apply bg-muted;
+				@apply font-medium;
 			}
 		}
 
@@ -162,7 +222,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.5",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"
@@ -66,4 +66,4 @@
 	"svelte": "./dist/index.js",
 	"type": "module",
 	"types": "./dist/index.d.ts"
-}
+}