ui-svelte 0.2.10 → 0.2.12

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

@@ -3,7 +3,7 @@
 		@apply flex items-center gap-1;
 
 		.navmenu-item {
-			@apply relative flex items-center gap-2 rounded-ui px-4 py-2;
+			@apply relative flex items-center gap-2 rounded-box px-4 py-2;
 			@apply cursor-pointer select-none outline-none;
 			@apply transition-all duration-200;
 
@@ -13,35 +13,16 @@
 
 			.navmenu-label {
 				@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;
-				}
+				@apply transition-all duration-200;
 			}
 
 			.navmenu-arrow {
-				@apply h-4 w-4 transition-transform duration-200;
+				@apply h-4 w-4 transition-transform duration-300;
 
 				&.is-open {
 					@apply rotate-180;
 				}
 			}
-
-			&.is-active .navmenu-label {
-				@apply font-semibold;
-			}
 		}
 
 		&.is-sm {
@@ -105,6 +86,67 @@
 		}
 	}
 
+	.navmenu-popover {
+		@apply flex flex-col gap-2 p-2 my-1;
+		@apply bg-background text-on-background rounded-box;
+		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
+		@apply shadow-sm shadow-muted;
+		position: fixed;
+		z-index: 9999;
+		max-height: 80vh;
+		overflow-y: auto;
+
+		&.is-active {
+			@apply visible opacity-100;
+		}
+
+		&.is-megamenu {
+			@apply min-w-[600px] max-w-4xl;
+		}
+
+		.navmenu-popover-content {
+			@apply flex flex-col gap-1;
+		}
+
+		.navmenu-submenu-item {
+			@apply flex items-center gap-2 rounded-ui px-3 py-2;
+			@apply cursor-pointer select-none outline-none;
+			@apply transition-all duration-200;
+
+			&:hover {
+				@apply bg-muted/50;
+			}
+
+			.navmenu-submenu-icon {
+				@apply h-5 w-5 shrink-0;
+			}
+
+			.navmenu-submenu-content {
+				@apply flex flex-1 flex-col overflow-hidden;
+
+				.navmenu-submenu-label {
+					@apply font-medium text-sm;
+				}
+
+				.navmenu-submenu-description {
+					@apply text-xs text-on-muted/70;
+				}
+			}
+
+			&.is-active {
+				@apply bg-muted font-medium;
+			}
+		}
+
+		.navmenu-divider {
+			@apply my-1 h-px w-full bg-muted;
+		}
+
+		.navmenu-header {
+			@apply px-3 py-2 text-xs font-semibold uppercase tracking-wide;
+		}
+	}
+
 	.navmenu-popover.is-sm {
 		@apply gap-1 p-1.5;
 
@@ -183,141 +225,325 @@
 		}
 	}
 
-	.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;
-		position: fixed;
-		z-index: 9999;
-		max-height: 80vh;
-		overflow-y: auto;
+	.navmenu.is-ghost {
+		.navmenu-item {
+			.navmenu-label {
+				@apply font-normal;
+				/* Prevent width shift when font becomes bold */
+				display: inline-flex;
+				flex-direction: column;
 
-		&.is-active {
-			@apply visible opacity-100;
-		}
+				&::after {
+					content: attr(data-text);
+					@apply font-semibold;
+					height: 0;
+					visibility: hidden;
+					overflow: hidden;
+					user-select: none;
+					pointer-events: none;
+				}
+			}
 
-		&.is-megamenu {
-			@apply min-w-[600px] max-w-4xl;
-		}
+			&:hover .navmenu-label {
+				@apply font-semibold;
+			}
 
-		.navmenu-popover-content {
-			@apply flex flex-col gap-1;
+			&.is-active .navmenu-label {
+				@apply font-semibold;
+			}
 		}
 
-		.navmenu-submenu-item {
-			@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 font-light hover:font-medium;
-
-			.navmenu-submenu-icon {
-				@apply h-5 w-5 shrink-0;
+		&.is-primary {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-primary;
+				}
+				.navmenu-arrow {
+					@apply text-primary;
+				}
 			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-primary;
+				}
+				.navmenu-arrow {
+					@apply text-primary;
+				}
+			}
+		}
 
-			.navmenu-submenu-content {
-				@apply flex flex-1 flex-col overflow-hidden;
+		&.is-secondary {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-secondary;
+				}
+				.navmenu-arrow {
+					@apply text-secondary;
+				}
+			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-secondary;
+				}
+				.navmenu-arrow {
+					@apply text-secondary;
+				}
+			}
+		}
 
-				.navmenu-submenu-label {
-					@apply font-medium text-sm;
+		&.is-muted {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-on-muted;
+				}
+			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-on-muted;
 				}
+			}
+		}
 
-				.navmenu-submenu-description {
-					@apply text-xs text-on-muted/70;
+		&.is-success {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-success;
+				}
+				.navmenu-arrow {
+					@apply text-success;
+				}
+			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-success;
+				}
+				.navmenu-arrow {
+					@apply text-success;
 				}
 			}
+		}
 
-			&.is-active {
-				@apply font-medium;
+		&.is-info {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-info;
+				}
+				.navmenu-arrow {
+					@apply text-info;
+				}
+			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-info;
+				}
+				.navmenu-arrow {
+					@apply text-info;
+				}
 			}
 		}
 
-		.navmenu-divider {
-			@apply my-1 h-px w-full bg-muted;
+		&.is-warning {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-warning;
+				}
+				.navmenu-arrow {
+					@apply text-warning;
+				}
+			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-warning;
+				}
+				.navmenu-arrow {
+					@apply text-warning;
+				}
+			}
 		}
 
-		.navmenu-header {
-			@apply px-3 py-2 text-xs font-semibold uppercase tracking-wide;
+		&.is-danger {
+			.navmenu-item:hover {
+				.navmenu-label {
+					@apply text-danger;
+				}
+				.navmenu-arrow {
+					@apply text-danger;
+				}
+			}
+			.navmenu-item.is-active {
+				.navmenu-label {
+					@apply text-danger;
+				}
+				.navmenu-arrow {
+					@apply text-danger;
+				}
+			}
 		}
 	}
 
-	/* Filled state style - hover/active with background colors */
-	.navmenu.is-filled .navmenu-item {
-		.navmenu-label {
-			@apply font-normal hover:font-normal;
+	.navmenu.is-soft {
+		.navmenu-item {
+			.navmenu-label {
+				@apply font-normal;
+			}
 		}
 
-		&:hover {
-			@apply bg-muted/50;
+		&.is-primary {
+			.navmenu-item:hover {
+				@apply bg-on-primary/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-on-primary text-primary;
+			}
 		}
 
-		&.is-active {
-			@apply bg-muted;
+		&.is-secondary {
+			.navmenu-item:hover {
+				@apply bg-on-secondary/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-on-secondary text-secondary;
+			}
+		}
 
-			.navmenu-label {
-				@apply font-normal;
+		&.is-muted {
+			.navmenu-item:hover {
+				@apply bg-muted/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-muted;
 			}
 		}
-	}
 
-	/* Variant colors for filled style */
-	.navmenu.is-filled.is-primary {
-		.navmenu-item:hover {
-			@apply bg-primary/20;
+		&.is-success {
+			.navmenu-item:hover {
+				@apply bg-on-success/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-on-success text-success;
+			}
 		}
 
-		.navmenu-item.is-active {
-			@apply bg-primary text-on-primary;
+		&.is-info {
+			.navmenu-item:hover {
+				@apply bg-on-info/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-on-info text-info;
+			}
 		}
-	}
 
-	.navmenu.is-filled.is-secondary {
-		.navmenu-item:hover {
-			@apply bg-secondary/20;
+		&.is-warning {
+			.navmenu-item:hover {
+				@apply bg-on-warning/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-on-warning text-warning;
+			}
 		}
 
-		.navmenu-item.is-active {
-			@apply bg-secondary text-on-secondary;
+		&.is-danger {
+			.navmenu-item:hover {
+				@apply bg-on-danger/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-on-danger text-danger;
+			}
 		}
 	}
 
-	.navmenu.is-filled.is-success {
-		.navmenu-item:hover {
-			@apply bg-success/20;
+	.navmenu.is-solid {
+		.navmenu-item {
+			.navmenu-label {
+				@apply font-normal;
+			}
 		}
 
-		.navmenu-item.is-active {
-			@apply bg-success text-on-success;
+		&.is-primary {
+			.navmenu-item:hover {
+				@apply bg-primary/20;
+			}
+			.navmenu-item.is-active {
+				@apply bg-primary text-on-primary;
+
+				.navmenu-arrow {
+					@apply text-on-primary;
+				}
+			}
 		}
-	}
 
-	.navmenu.is-filled.is-info {
-		.navmenu-item:hover {
-			@apply bg-info/20;
+		&.is-secondary {
+			.navmenu-item:hover {
+				@apply bg-secondary/20;
+			}
+			.navmenu-item.is-active {
+				@apply bg-secondary text-on-secondary;
+
+				.navmenu-arrow {
+					@apply text-on-secondary;
+				}
+			}
 		}
 
-		.navmenu-item.is-active {
-			@apply bg-info text-on-info;
+		&.is-muted {
+			.navmenu-item:hover {
+				@apply bg-muted/50;
+			}
+			.navmenu-item.is-active {
+				@apply bg-muted;
+			}
 		}
-	}
 
-	.navmenu.is-filled.is-warning {
-		.navmenu-item:hover {
-			@apply bg-warning/20;
+		&.is-success {
+			.navmenu-item:hover {
+				@apply bg-success/20;
+			}
+			.navmenu-item.is-active {
+				@apply bg-success text-on-success;
+
+				.navmenu-arrow {
+					@apply text-on-success;
+				}
+			}
 		}
 
-		.navmenu-item.is-active {
-			@apply bg-warning text-on-warning;
+		&.is-info {
+			.navmenu-item:hover {
+				@apply bg-info/20;
+			}
+			.navmenu-item.is-active {
+				@apply bg-info text-on-info;
+
+				.navmenu-arrow {
+					@apply text-on-info;
+				}
+			}
 		}
-	}
 
-	.navmenu.is-filled.is-danger {
-		.navmenu-item:hover {
-			@apply bg-danger/20;
+		&.is-warning {
+			.navmenu-item:hover {
+				@apply bg-warning/20;
+			}
+			.navmenu-item.is-active {
+				@apply bg-warning text-on-warning;
+
+				.navmenu-arrow {
+					@apply text-on-warning;
+				}
+			}
 		}
 
-		.navmenu-item.is-active {
-			@apply bg-danger text-on-danger;
+		&.is-danger {
+			.navmenu-item:hover {
+				@apply bg-danger/20;
+			}
+			.navmenu-item.is-active {
+				@apply bg-danger text-on-danger;
+
+				.navmenu-arrow {
+					@apply text-on-danger;
+				}
+			}
 		}
 	}
-}
+}

package/dist/navigation/css/pagination.css

@@ -0,0 +1,74 @@
+@layer components {
+
+	.pagination-container {
+		@apply flex w-full py-2 items-center gap-4;
+		&.is-start {
+			@apply justify-start;
+		}
+		&.is-center {
+			@apply justify-center;
+		}
+		&.is-end {
+			@apply justify-end;
+		}
+
+	}
+
+	.pagination {
+		@apply flex items-center gap-1;
+	}
+
+	.pagination-ellipsis {
+		@apply flex items-center justify-center min-w-9 h-9 text-sm opacity-60;
+	}
+
+	.pagination-btn {
+		@apply min-w-9;
+
+		&.pagination-page {
+			@apply font-medium;
+		}
+	}
+
+	.pagination.is-primary {
+		.pagination-ellipsis {
+			@apply text-primary;
+		}
+	}
+
+	.pagination.is-secondary {
+		.pagination-ellipsis {
+			@apply text-secondary;
+		}
+	}
+
+	.pagination.is-muted {
+		.pagination-ellipsis {
+			@apply text-on-muted;
+		}
+	}
+
+	.pagination.is-success {
+		.pagination-ellipsis {
+			@apply text-success;
+		}
+	}
+
+	.pagination.is-info {
+		.pagination-ellipsis {
+			@apply text-info;
+		}
+	}
+
+	.pagination.is-danger {
+		.pagination-ellipsis {
+			@apply text-danger;
+		}
+	}
+
+	.pagination.is-warning {
+		.pagination-ellipsis {
+			@apply text-warning;
+		}
+	}
+}