ui-svelte 0.2.4 → 0.2.6

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

@@ -12,8 +12,23 @@
 			}
 
 			.navmenu-label {
-				@apply text-sm whitespace-nowrap;
+				@apply text-base whitespace-nowrap;
 				@apply font-light hover:font-semibold;
+				/* Prevent layout shift on font-weight change */
+				display: inline-flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+
+				&::after {
+					content: attr(data-text);
+					@apply font-semibold;
+					height: 0;
+					visibility: hidden;
+					overflow: hidden;
+					user-select: none;
+					pointer-events: none;
+				}
 			}
 
 			.navmenu-arrow {
@@ -33,7 +48,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 +68,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,19 +88,101 @@
 			@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-popover.is-sm {
+		@apply gap-1 p-1.5;
+
+		.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-header {
+			@apply px-2 py-1.5 text-[10px];
+		}
+	}
+
+	.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-header {
+			@apply px-3 py-2 text-xs;
+		}
+	}
+
+	.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;
@@ -135,4 +240,84 @@
 			@apply px-3 py-2 text-xs font-semibold uppercase tracking-wide;
 		}
 	}
-}
+
+	/* Filled state style - hover/active with background colors */
+	.navmenu.is-filled .navmenu-item {
+		.navmenu-label {
+			@apply font-normal hover:font-normal;
+		}
+
+		&:hover {
+			@apply bg-muted/50;
+		}
+
+		&.is-active {
+			@apply bg-muted;
+
+			.navmenu-label {
+				@apply font-normal;
+			}
+		}
+	}
+
+	/* Variant colors for filled style */
+	.navmenu.is-filled.is-primary {
+		.navmenu-item:hover {
+			@apply bg-primary/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-primary text-on-primary;
+		}
+	}
+
+	.navmenu.is-filled.is-secondary {
+		.navmenu-item:hover {
+			@apply bg-secondary/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-secondary text-on-secondary;
+		}
+	}
+
+	.navmenu.is-filled.is-success {
+		.navmenu-item:hover {
+			@apply bg-success/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-success text-on-success;
+		}
+	}
+
+	.navmenu.is-filled.is-info {
+		.navmenu-item:hover {
+			@apply bg-info/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-info text-on-info;
+		}
+	}
+
+	.navmenu.is-filled.is-warning {
+		.navmenu-item:hover {
+			@apply bg-warning/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-warning text-on-warning;
+		}
+	}
+
+	.navmenu.is-filled.is-danger {
+		.navmenu-item:hover {
+			@apply bg-danger/20;
+		}
+
+		.navmenu-item.is-active {
+			@apply bg-danger text-on-danger;
+		}
+	}
+}

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

@@ -300,4 +300,84 @@
 			}
 		}
 	}
+
+	/* Solid state style - hover/active with background colors */
+	.sidenav.is-solid .sidenav-item {
+		.sidenav-content .sidenav-label {
+			@apply font-normal hover:font-normal;
+		}
+
+		&:hover {
+			@apply bg-muted/50;
+		}
+
+		&.is-active {
+			@apply bg-muted;
+
+			.sidenav-content .sidenav-label {
+				@apply font-normal;
+			}
+		}
+	}
+
+	/* Variant colors for solid style */
+	.sidenav.is-solid.is-primary {
+		.sidenav-item:hover {
+			@apply bg-primary/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-primary text-on-primary;
+		}
+	}
+
+	.sidenav.is-solid.is-secondary {
+		.sidenav-item:hover {
+			@apply bg-secondary/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-secondary text-on-secondary;
+		}
+	}
+
+	.sidenav.is-solid.is-success {
+		.sidenav-item:hover {
+			@apply bg-success/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-success text-on-success;
+		}
+	}
+
+	.sidenav.is-solid.is-info {
+		.sidenav-item:hover {
+			@apply bg-info/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-info text-on-info;
+		}
+	}
+
+	.sidenav.is-solid.is-warning {
+		.sidenav-item:hover {
+			@apply bg-warning/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-warning text-on-warning;
+		}
+	}
+
+	.sidenav.is-solid.is-danger {
+		.sidenav-item:hover {
+			@apply bg-danger/20;
+		}
+
+		.sidenav-item.is-active {
+			@apply bg-danger text-on-danger;
+		}
+	}
 }

package/dist/navigation/css/tabs.css

@@ -2,19 +2,19 @@
 	.tabs {
 		@apply flex relative;
 		&.is-top {
-			@apply flex-col;
+			@apply flex-col gap-2;
 		}
 		&.is-bottom {
-			@apply flex-col-reverse;
+			@apply flex-col-reverse gap-2;
 		}
 		&.is-start {
-			@apply flex-row h-fit gap-1;
+			@apply flex-row h-fit gap-2;
 			.tabs-list {
 				@apply flex-col;
 			}
 		}
 		&.is-end {
-			@apply flex-row-reverse h-fit gap-1;
+			@apply flex-row-reverse h-fit gap-2;
 			.tabs-list {
 				@apply flex-col;
 			}

package/dist/utils/popover.js

@@ -1,17 +1,17 @@
 export const popover = (node) => {
     const targetEl = document.body;
-    const hadScroll = document.documentElement.scrollHeight > window.innerHeight;
     node.id = 'popover';
     targetEl?.appendChild(node);
-    if (hadScroll) {
-        targetEl.classList.add('had-scroll');
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
     }
+    document.body.style.overflow = 'hidden';
     return {
         destroy() {
-            if (hadScroll) {
-                targetEl.classList.remove('had-scroll');
-            }
             node.remove();
+            document.body.style.overflow = '';
+            document.body.style.paddingRight = '';
         }
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.4",
+	"version": "0.2.6",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"
@@ -66,4 +66,4 @@
 	"svelte": "./dist/index.js",
 	"type": "module",
 	"types": "./dist/index.d.ts"
-}
+}