ui-svelte 0.2.11 → 0.2.13

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

@@ -1,258 +1,320 @@
 @layer components {
-    .bottomnav {
-        @apply flex items-center justify-around;
-        @apply bg-background text-on-background;
-        @apply border-t border-muted;
-        @apply shadow-lg;
-
-        &.is-fixed {
-            @apply fixed bottom-0 left-0 right-0 z-50;
-            padding-bottom: env(safe-area-inset-bottom);
-        }
-
-        .bottomnav-item {
-            @apply flex flex-col items-center justify-center gap-1;
-            @apply flex-1 py-3 px-2;
-            @apply cursor-pointer select-none outline-none;
-            @apply transition-all duration-200;
-            @apply relative;
-
-            .bottomnav-icon-wrapper {
-                @apply relative inline-flex;
-            }
-
-            .bottomnav-icon {
-                @apply h-6 w-6 shrink-0;
-                @apply transition-all duration-200;
-            }
-
-            .bottomnav-label {
-                @apply text-xs font-medium whitespace-nowrap;
-                @apply transition-all duration-200;
-            }
-
-            .bottomnav-badge {
-                @apply absolute -top-1.5 -right-2;
-                @apply min-w-4 h-4 px-1;
-                @apply flex items-center justify-center;
-                @apply text-[10px] font-bold;
-                @apply bg-danger text-on-danger;
-                @apply rounded-full;
-            }
-
-            &:hover {
-                @apply bg-muted/50;
-            }
-
-            /* FAB Style */
-            &.is-fab {
-                @apply flex-none;
-
-                &:hover {
-                    @apply bg-transparent;
-                }
-
-                .bottomnav-icon-wrapper {
-                    @apply w-12 h-12 -mt-6;
-                    @apply flex items-center justify-center;
-                    @apply bg-primary text-on-primary;
-                    @apply rounded-full shadow-lg;
-                    @apply transition-all duration-200;
-                }
-
-                .bottomnav-icon {
-                    @apply h-6 w-6 text-on-primary;
-                }
-
-                &:hover .bottomnav-icon-wrapper {
-                    @apply shadow-xl shadow-primary/30;
-                    transform: translateY(-2px);
-                }
-
-                &:active .bottomnav-icon-wrapper {
-                    transform: translateY(0);
-                    @apply shadow-md;
-                }
-            }
-        }
-
-        /* Size Variants */
-        &.is-sm {
-            .bottomnav-item {
-                @apply gap-0.5 py-2 px-1;
-
-                .bottomnav-icon {
-                    @apply h-5 w-5;
-                }
-
-                .bottomnav-label {
-                    @apply text-[10px];
-                }
-
-                &.is-fab .bottomnav-icon-wrapper {
-                    @apply w-10 h-10 -mt-5;
-                }
-            }
-        }
-
-        &.is-md {
-            .bottomnav-item {
-                @apply gap-1 py-3 px-2;
-
-                .bottomnav-icon {
-                    @apply h-6 w-6;
-                }
-
-                .bottomnav-label {
-                    @apply text-xs;
-                }
-            }
-        }
-
-        &.is-lg {
-            .bottomnav-item {
-                @apply gap-1.5 py-4 px-3;
-
-                .bottomnav-icon {
-                    @apply h-7 w-7;
-                }
-
-                .bottomnav-label {
-                    @apply text-sm;
-                }
-
-                &.is-fab .bottomnav-icon-wrapper {
-                    @apply w-14 h-14 -mt-7;
-
-                    .bottomnav-icon {
-                        @apply h-7 w-7;
-                    }
-                }
-            }
-        }
-
-        &.is-icon-only {
-            .bottomnav-item {
-                @apply gap-0;
-
-                .bottomnav-icon {
-                    @apply h-7 w-7;
-                }
-            }
-        }
-
-        /* Variant: Primary */
-        &.is-primary {
-            .bottomnav-item.is-active {
-                @apply text-primary;
-
-                .bottomnav-icon {
-                    @apply text-primary;
-                }
-
-                .bottomnav-label {
-                    @apply text-primary;
-                }
-            }
-
-            .bottomnav-item.is-fab .bottomnav-icon-wrapper {
-                @apply bg-primary;
-            }
-        }
-
-        /* Variant: Secondary */
-        &.is-secondary {
-            .bottomnav-item.is-active {
-                @apply text-secondary;
-
-                .bottomnav-icon {
-                    @apply text-secondary;
-                }
-
-                .bottomnav-label {
-                    @apply text-secondary;
-                }
-            }
-
-            .bottomnav-item.is-fab .bottomnav-icon-wrapper {
-                @apply bg-secondary;
-            }
-        }
-
-        /* Variant: Ghost - just color change, no indicator */
-        &.is-ghost {
-            .bottomnav-item.is-active {
-                @apply text-on-surface;
-
-                .bottomnav-icon {
-                    @apply text-on-surface;
-                }
-
-                .bottomnav-label {
-                    @apply text-on-surface font-semibold;
-                }
-            }
-        }
-
-        /* Variant: Line - underline indicator */
-        &.is-line {
-            .bottomnav-item {
-                &::after {
-                    content: '';
-                    @apply absolute bottom-0 left-1/2 -translate-x-1/2;
-                    @apply w-0 h-0.5 rounded-full;
-                    @apply bg-primary;
-                    @apply transition-all duration-200;
-                }
-
-                &.is-active {
-                    @apply text-primary;
-
-                    .bottomnav-icon {
-                        @apply text-primary;
-                    }
-
-                    .bottomnav-label {
-                        @apply text-primary;
-                    }
-
-                    &::after {
-                        @apply w-8;
-                    }
-                }
-            }
-        }
-
-        /* Solid modifier - adds background pill on active */
-        &.is-solid {
-            .bottomnav-item {
-                @apply relative isolate;
-
-                &::before {
-                    content: '';
-                    @apply absolute inset-x-2 top-1 bottom-1;
-                    @apply rounded-xl;
-                    @apply bg-transparent;
-                    @apply transition-all duration-200;
-                    z-index: -1;
-                }
-            }
-
-            &.is-primary .bottomnav-item.is-active:not(.is-fab)::before {
-                @apply bg-primary/10;
-            }
-
-            &.is-secondary .bottomnav-item.is-active:not(.is-fab)::before {
-                @apply bg-secondary/10;
-            }
-
-            &.is-ghost .bottomnav-item.is-active:not(.is-fab)::before {
-                @apply bg-muted;
-            }
-
-            &.is-line .bottomnav-item.is-active:not(.is-fab)::before {
-                @apply bg-primary/10;
-            }
-        }
-    }
-}
+	.bottomnav {
+		--bn-pill-radius: 9999px;
+		--bn-pill-padding-x: 1rem;
+		--bn-pill-padding-y: 0.25rem;
+		--bn-pill-opacity: 0.15;
+		--bn-fab-size: 3rem;
+		--bn-fab-offset: -1.5rem;
+
+		@apply flex items-center justify-around;
+		@apply shadow-lg;
+
+		&.is-fixed {
+			@apply fixed bottom-0 left-0 right-0 z-50;
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+
+		&.is-bordered {
+			@apply border-t border-muted;
+		}
+
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+		}
+
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted text-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
+			&.is-default {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+		}
+
+		&.is-blur {
+			@apply backdrop-blur-lg;
+
+			&.is-primary {
+				@apply bg-on-primary/80 text-primary;
+			}
+			&.is-secondary {
+				@apply bg-on-secondary/80 text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted/80 text-on-muted;
+			}
+			&.is-success {
+				@apply bg-on-success/80 text-success;
+			}
+			&.is-info {
+				@apply bg-on-info/80 text-info;
+			}
+			&.is-warning {
+				@apply bg-on-warning/80 text-warning;
+			}
+			&.is-danger {
+				@apply bg-on-danger/80 text-danger;
+			}
+			&.is-default {
+				@apply bg-background/80 text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface/80 text-on-surface;
+			}
+		}
+
+		.bottomnav-item {
+			@apply flex flex-col items-center justify-center gap-1;
+			@apply flex-1 py-3 px-2;
+			@apply cursor-pointer select-none outline-none;
+			@apply transition-all duration-300;
+			@apply relative;
+			@apply text-current opacity-60;
+
+			&.is-active {
+				@apply opacity-100;
+			}
+
+			.bottomnav-icon-wrapper {
+				@apply relative inline-flex items-center justify-center;
+				@apply transition-all duration-300;
+				border-radius: var(--bn-pill-radius);
+			}
+
+			.bottomnav-icon {
+				@apply h-6 w-6 shrink-0;
+				@apply transition-all duration-300;
+			}
+
+			.bottomnav-label {
+				@apply text-xs font-medium whitespace-nowrap;
+				@apply transition-all duration-300;
+			}
+
+			.bottomnav-badge {
+				@apply absolute -top-1.5 -right-2;
+				@apply min-w-4 h-4 px-1;
+				@apply flex items-center justify-center;
+				@apply text-[10px] font-bold;
+				@apply bg-danger text-on-danger;
+				@apply rounded-full;
+			}
+
+			&:hover {
+				@apply opacity-80;
+			}
+
+			&.is-fab {
+				@apply flex-none opacity-100;
+
+				&:hover {
+					@apply bg-transparent;
+				}
+
+				.bottomnav-icon-wrapper {
+					width: var(--bn-fab-size);
+					height: var(--bn-fab-size);
+					margin-top: var(--bn-fab-offset);
+					@apply flex items-center justify-center;
+					@apply rounded-full shadow-lg;
+					@apply transition-all duration-300;
+				}
+
+				.bottomnav-icon {
+					@apply h-6 w-6;
+				}
+
+				&:hover .bottomnav-icon-wrapper {
+					@apply shadow-xl;
+					transform: translateY(-2px);
+				}
+
+				&:active .bottomnav-icon-wrapper {
+					transform: translateY(0);
+					@apply shadow-md;
+				}
+
+				&.is-primary .bottomnav-icon-wrapper {
+					@apply bg-primary text-on-primary shadow-primary/30;
+				}
+				&.is-secondary .bottomnav-icon-wrapper {
+					@apply bg-secondary text-on-secondary shadow-secondary/30;
+				}
+				&.is-muted .bottomnav-icon-wrapper {
+					@apply bg-muted text-on-muted shadow-muted/30;
+				}
+				&.is-success .bottomnav-icon-wrapper {
+					@apply bg-success text-on-success shadow-success/30;
+				}
+				&.is-info .bottomnav-icon-wrapper {
+					@apply bg-info text-on-info shadow-info/30;
+				}
+				&.is-warning .bottomnav-icon-wrapper {
+					@apply bg-warning text-on-warning shadow-warning/30;
+				}
+				&.is-danger .bottomnav-icon-wrapper {
+					@apply bg-danger text-on-danger shadow-danger/30;
+				}
+				&.is-surface .bottomnav-icon-wrapper {
+					@apply bg-surface text-on-surface shadow-black/10;
+				}
+				&.is-background .bottomnav-icon-wrapper {
+					@apply bg-background text-on-background shadow-black/10;
+				}
+			}
+		}
+
+		&.active-line {
+			.bottomnav-item {
+				&::after {
+					content: '';
+					@apply absolute bottom-0 left-1/2 -translate-x-1/2;
+					@apply w-0 h-0.5 rounded-full;
+					@apply bg-current;
+					@apply transition-all duration-300;
+				}
+
+				&.is-active::after {
+					@apply w-8;
+				}
+			}
+		}
+
+		&.active-pill {
+			.bottomnav-item {
+				.bottomnav-icon-wrapper {
+					padding: var(--bn-pill-padding-y) var(--bn-pill-padding-x);
+				}
+
+				.bottomnav-badge {
+					@apply -top-1 -right-1;
+				}
+
+				&.is-active:not(.is-fab) .bottomnav-icon-wrapper {
+					@apply bg-current/15;
+				}
+			}
+
+			&.is-solid .bottomnav-item.is-active:not(.is-fab) .bottomnav-icon-wrapper {
+				@apply bg-white/20;
+			}
+		}
+
+		&.is-sm {
+			--bn-fab-size: 2.5rem;
+			--bn-fab-offset: -1.25rem;
+			--bn-pill-padding-x: 0.75rem;
+			--bn-pill-padding-y: 0.125rem;
+
+			.bottomnav-item {
+				@apply gap-0.5 py-2 px-1;
+
+				.bottomnav-icon {
+					@apply h-5 w-5;
+				}
+
+				.bottomnav-label {
+					@apply text-[10px];
+				}
+			}
+		}
+
+		&.is-md {
+			--bn-fab-size: 3rem;
+			--bn-fab-offset: -1.5rem;
+
+			.bottomnav-item {
+				@apply gap-1 py-3 px-2;
+
+				.bottomnav-icon {
+					@apply h-6 w-6;
+				}
+
+				.bottomnav-label {
+					@apply text-xs;
+				}
+			}
+		}
+
+		&.is-lg {
+			--bn-fab-size: 3.5rem;
+			--bn-fab-offset: -1.75rem;
+			--bn-pill-padding-x: 1.25rem;
+			--bn-pill-padding-y: 0.375rem;
+
+			.bottomnav-item {
+				@apply gap-1.5 py-4 px-3;
+
+				.bottomnav-icon {
+					@apply h-7 w-7;
+				}
+
+				.bottomnav-label {
+					@apply text-sm;
+				}
+
+				&.is-fab .bottomnav-icon {
+					@apply h-7 w-7;
+				}
+			}
+		}
+
+		&.is-icon-only {
+			.bottomnav-item {
+				@apply gap-0;
+
+				.bottomnav-icon {
+					@apply h-7 w-7;
+				}
+			}
+		}
+	}
+}

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

@@ -13,7 +13,7 @@
 
 			.footer-group-link {
 				@apply text-sm;
-				@apply transition-colors duration-200;
+				@apply transition-colors duration-300;
 				@apply hover:underline;
 				@apply inline-flex items-center gap-1;
 			}

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

@@ -4,7 +4,7 @@
 
 		.footer-nav-link {
 			@apply text-sm opacity-70;
-			@apply transition-all duration-200;
+			@apply transition-all duration-300;
 			@apply hover:underline;
 			@apply focus:outline-none;
 			@apply cursor-pointer select-none;