ui-svelte 0.2.12 → 0.2.13

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

@@ -1,5 +1,12 @@
 @layer components {
 	.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;
 
@@ -14,27 +21,27 @@
 
 		&.is-soft {
 			&.is-primary {
-				@apply bg-on-primary text-primary;
+				@apply bg-soft-primary text-primary;
 			}
 			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
+				@apply bg-soft-secondary text-secondary;
 			}
 			&.is-muted {
-				@apply bg-muted text-on-muted;
+				@apply bg-soft-muted text-on-muted;
 			}
 			&.is-success {
-				@apply bg-on-success text-success;
+				@apply bg-soft-success text-success;
 			}
 			&.is-info {
-				@apply bg-on-info text-info;
+				@apply bg-soft-info text-info;
 			}
 			&.is-warning {
-				@apply bg-on-warning text-warning;
+				@apply bg-soft-warning text-warning;
 			}
 			&.is-danger {
-				@apply bg-on-danger text-danger;
+				@apply bg-soft-danger text-danger;
 			}
-			&.is-default {
+			&.is-background {
 				@apply bg-background text-on-background;
 			}
 			&.is-surface {
@@ -117,7 +124,9 @@
 			}
 
 			.bottomnav-icon-wrapper {
-				@apply relative inline-flex;
+				@apply relative inline-flex items-center justify-center;
+				@apply transition-all duration-300;
+				border-radius: var(--bn-pill-radius);
 			}
 
 			.bottomnav-icon {
@@ -151,19 +160,20 @@
 				}
 
 				.bottomnav-icon-wrapper {
-					@apply w-12 h-12 -mt-6;
+					width: var(--bn-fab-size);
+					height: var(--bn-fab-size);
+					margin-top: var(--bn-fab-offset);
 					@apply flex items-center justify-center;
-					@apply bg-primary text-on-primary;
 					@apply rounded-full shadow-lg;
 					@apply transition-all duration-300;
 				}
 
 				.bottomnav-icon {
-					@apply h-6 w-6 text-on-primary;
+					@apply h-6 w-6;
 				}
 
 				&:hover .bottomnav-icon-wrapper {
-					@apply shadow-xl shadow-primary/30;
+					@apply shadow-xl;
 					transform: translateY(-2px);
 				}
 
@@ -171,6 +181,34 @@
 					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;
+				}
 			}
 		}
 
@@ -192,28 +230,30 @@
 
 		&.active-pill {
 			.bottomnav-item {
-				@apply relative isolate;
+				.bottomnav-icon-wrapper {
+					padding: var(--bn-pill-padding-y) var(--bn-pill-padding-x);
+				}
 
-				&::before {
-					content: '';
-					@apply absolute inset-x-2 top-1 bottom-1;
-					@apply rounded-xl;
-					@apply bg-transparent;
-					@apply transition-all duration-300;
-					z-index: -1;
+				.bottomnav-badge {
+					@apply -top-1 -right-1;
 				}
 
-				&.is-active:not(.is-fab)::before {
-					@apply bg-current/10;
+				&.is-active:not(.is-fab) .bottomnav-icon-wrapper {
+					@apply bg-current/15;
 				}
 			}
 
-			&.is-solid .bottomnav-item.is-active:not(.is-fab)::before {
+			&.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;
 
@@ -224,14 +264,13 @@
 				.bottomnav-label {
 					@apply text-[10px];
 				}
-
-				&.is-fab .bottomnav-icon-wrapper {
-					@apply w-10 h-10 -mt-5;
-				}
 			}
 		}
 
 		&.is-md {
+			--bn-fab-size: 3rem;
+			--bn-fab-offset: -1.5rem;
+
 			.bottomnav-item {
 				@apply gap-1 py-3 px-2;
 
@@ -246,6 +285,11 @@
 		}
 
 		&.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;
 
@@ -257,12 +301,8 @@
 					@apply text-sm;
 				}
 
-				&.is-fab .bottomnav-icon-wrapper {
-					@apply w-14 h-14 -mt-7;
-
-					.bottomnav-icon {
-						@apply h-7 w-7;
-					}
+				&.is-fab .bottomnav-icon {
+					@apply h-7 w-7;
 				}
 			}
 		}

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

@@ -229,7 +229,6 @@
 		.navmenu-item {
 			.navmenu-label {
 				@apply font-normal;
-				/* Prevent width shift when font becomes bold */
 				display: inline-flex;
 				flex-direction: column;
 
@@ -390,64 +389,64 @@
 
 		&.is-primary {
 			.navmenu-item:hover {
-				@apply bg-on-primary/50;
+				@apply bg-soft-primary/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-on-primary text-primary;
+				@apply bg-soft-primary text-primary;
 			}
 		}
 
 		&.is-secondary {
 			.navmenu-item:hover {
-				@apply bg-on-secondary/50;
+				@apply bg-soft-secondary/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-on-secondary text-secondary;
+				@apply bg-soft-secondary text-secondary;
 			}
 		}
 
 		&.is-muted {
 			.navmenu-item:hover {
-				@apply bg-muted/50;
+				@apply bg-soft-muted/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-muted;
+				@apply bg-soft-muted text-on-muted;
 			}
 		}
 
 		&.is-success {
 			.navmenu-item:hover {
-				@apply bg-on-success/50;
+				@apply bg-soft-success/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-on-success text-success;
+				@apply bg-soft-success text-success;
 			}
 		}
 
 		&.is-info {
 			.navmenu-item:hover {
-				@apply bg-on-info/50;
+				@apply bg-soft-info/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-on-info text-info;
+				@apply bg-soft-info text-info;
 			}
 		}
 
 		&.is-warning {
 			.navmenu-item:hover {
-				@apply bg-on-warning/50;
+				@apply bg-soft-warning/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-on-warning text-warning;
+				@apply bg-soft-warning text-warning;
 			}
 		}
 
 		&.is-danger {
 			.navmenu-item:hover {
-				@apply bg-on-danger/50;
+				@apply bg-soft-danger/50;
 			}
 			.navmenu-item.is-active {
-				@apply bg-on-danger text-danger;
+				@apply bg-soft-danger text-danger;
 			}
 		}
 	}

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

@@ -323,7 +323,6 @@
 		.sidenav-item {
 			.sidenav-content .sidenav-label {
 				@apply font-normal;
-				/* Prevent width shift when font becomes bold */
 				display: inline-flex;
 				flex-direction: column;
 
@@ -553,10 +552,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-on-primary/50;
+				@apply bg-soft-primary/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-on-primary text-primary;
+				@apply bg-soft-primary text-primary;
 			}
 		}
 
@@ -571,10 +570,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-on-secondary/50;
+				@apply bg-soft-secondary/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-on-secondary text-secondary;
+				@apply bg-soft-secondary text-secondary;
 			}
 		}
 
@@ -586,10 +585,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-muted/50;
+				@apply bg-soft-muted/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-muted;
+				@apply bg-soft-muted text-on-muted;
 			}
 		}
 
@@ -604,10 +603,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-on-success/50;
+				@apply bg-soft-success/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-on-success text-success;
+				@apply bg-soft-success text-success;
 			}
 		}
 
@@ -622,10 +621,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-on-info/50;
+				@apply bg-soft-info/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-on-info text-info;
+				@apply bg-soft-info text-info;
 			}
 		}
 
@@ -640,10 +639,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-on-warning/50;
+				@apply bg-soft-warning/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-on-warning text-warning;
+				@apply bg-soft-warning text-warning;
 			}
 		}
 
@@ -658,10 +657,10 @@
 				}
 			}
 			.sidenav-item:hover {
-				@apply bg-on-danger/50;
+				@apply bg-soft-danger/50;
 			}
 			.sidenav-item.is-active {
-				@apply bg-on-danger text-danger;
+				@apply bg-soft-danger text-danger;
 			}
 		}
 	}

package/dist/overlay/AlertDialog.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Button from '../control/Button.svelte';
+	import Modal from './Modal.svelte';
+
+	type Props = {
+		open: boolean;
+		title?: string;
+		description?: string;
+		confirmText?: string;
+		cancelText?: string;
+		onconfirm?: () => void;
+		oncancel?: () => void;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		isLoading?: boolean;
+		rootClass?: string;
+	};
+
+	let {
+		open = $bindable(false),
+		title = 'Are you sure?',
+		description = 'This action cannot be undone.',
+		confirmText = 'Confirm',
+		cancelText = 'Cancel',
+		onconfirm,
+		oncancel,
+		color = 'danger',
+		isLoading = false,
+		rootClass
+	}: Props = $props();
+
+	function handleConfirm() {
+		onconfirm?.();
+	}
+
+	function handleCancel() {
+		open = false;
+		oncancel?.();
+	}
+</script>
+
+<Modal bind:open hideCloseButton disableOverlayClose {rootClass}>
+	{#snippet header()}
+		<h3 class="alert-dialog-title">{title}</h3>
+	{/snippet}
+
+	<p class="alert-dialog-description">{description}</p>
+
+	{#snippet footer()}
+		<div class="alert-dialog-actions">
+			<Button variant="outlined" color="muted" onclick={handleCancel} isDisabled={isLoading}>
+				{cancelText}
+			</Button>
+			<Button {color} onclick={handleConfirm} {isLoading}>
+				{confirmText}
+			</Button>
+		</div>
+	{/snippet}
+</Modal>

package/dist/overlay/AlertDialog.svelte.d.ts

@@ -1,26 +1,15 @@
-export default AlertDialog;
-type AlertDialog = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Props = {
+    open: boolean;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    isLoading?: boolean;
+    rootClass?: string;
 };
-declare const AlertDialog: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;