ui-svelte 0.2.11 → 0.2.12

package/dist/overlay/css/drawer.css

@@ -7,7 +7,7 @@
 			@apply absolute inset-0 bg-overlay;
 		}
 		.drawer {
-			@apply absolute bg-surface flex flex-col;
+			@apply absolute flex flex-col;
 			@apply transition-all duration-300 ease-in-out;
 
 			&.is-start {
@@ -34,33 +34,68 @@
 				@apply transform translate-x-0! translate-y-0!;
 			}
 
-			&.is-ghost {
-				@apply bg-background text-on-background;
+			&.is-soft {
+				&.is-primary {
+					@apply bg-on-primary text-primary;
+				}
+				&.is-secondary {
+					@apply bg-on-secondary text-secondary;
+				}
+				&.is-muted {
+					@apply bg-muted text-on-muted;
+				}
+				&.is-success {
+					@apply bg-on-success text-success;
+				}
+				&.is-info {
+					@apply bg-on-info text-info;
+				}
+				&.is-warning {
+					@apply bg-on-warning text-warning;
+				}
+				&.is-danger {
+					@apply bg-on-danger text-danger;
+				}
+				&.is-default {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
-			&.is-surface {
-				@apply bg-surface text-on-surface;
-			}
-			&.is-primary {
-				@apply bg-on-primary text-primary;
-			}
-			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
-			}
-			&.is-muted {
-				@apply bg-muted text-on-muted;
-			}
-			&.is-primary.is-solid {
-				@apply bg-primary text-on-primary;
-			}
-			&.is-secondary.is-solid {
-				@apply bg-secondary text-on-secondary;
-			}
-			&.is-muted.is-solid {
-				@apply bg-on-muted text-muted;
+
+			&.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;
+				}
 			}
 
 			.drawer-header {
-				@apply row gap-3 p-3;
+				@apply row gap-3 p-3 pr-12;
 			}
 
 			.drawer-footer {
@@ -70,6 +105,10 @@
 			.drawer-body {
 				@apply flex min-h-0 flex-1 flex-col gap-3 p-3 overflow-auto;
 			}
+
+			.drawer-btn-close {
+				@apply absolute right-2 top-2;
+			}
 		}
 	}
 }

package/dist/overlay/css/dropdown.css

@@ -4,7 +4,7 @@
 	}
 	.dropdown-popover {
 		@apply overflow-y-auto flex flex-col gap-2 p-2 my-1;
-		@apply bg-background text-on-background rounded-ui;
+		@apply bg-background text-on-background rounded-box;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
 		@apply shadow shadow-muted;
 		position: fixed;

package/dist/overlay/css/hovercard.css

@@ -4,7 +4,7 @@
 	}
 	.hovercard-content {
 		@apply overflow-y-auto drop-shadow-sm flex flex-col gap-2 my-1;
-		@apply bg-background text-on-background border border-muted rounded-ui;
+		@apply bg-background text-on-background border border-muted rounded-box;
 		position: fixed;
 		z-index: 9999;
 	}

package/dist/overlay/css/modal.css

@@ -6,42 +6,42 @@
 			@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];
+			@apply relative flex flex-col rounded-box max-w-[95vw] max-h-[95vh];
 
-			&.is-ghost {
-				@apply bg-background text-on-background;
+			&.is-soft {
+				&.is-primary { @apply bg-on-primary text-primary; }
+				&.is-secondary { @apply bg-on-secondary text-secondary; }
+				&.is-muted { @apply bg-muted text-on-muted; }
+				&.is-success { @apply bg-on-success text-success; }
+				&.is-info { @apply bg-on-info text-info; }
+				&.is-warning { @apply bg-on-warning text-warning; }
+				&.is-danger { @apply bg-on-danger text-danger; }
+				&.is-default { @apply bg-background text-on-background; }
+				&.is-surface { @apply bg-surface text-on-surface; }
 			}
-			&.is-surface {
-				@apply bg-surface text-on-surface;
-			}
-			&.is-primary {
-				@apply bg-on-primary text-primary;
-			}
-			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
-			}
-			&.is-muted {
-				@apply bg-muted text-on-muted;
-			}
-			&.is-primary.is-solid {
-				@apply bg-primary text-on-primary;
-			}
-			&.is-secondary.is-solid {
-				@apply bg-secondary text-on-secondary;
-			}
-			&.is-muted.is-solid {
-				@apply bg-on-muted text-muted;
+
+			&.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; }
 			}
-			.modal-content {
-				@apply px-4 md:px-6 overflow-hidden overflow-y-auto;
+
+			.modal-body {
+				@apply column gap-4 md:gap-6 p-4 md:p-6 overflow-hidden overflow-y-auto;
 			}
 
 			.modal-header {
-				@apply grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 md:px-6;
+				@apply w-full flex justify-between items-center px-4 pt-4 gap-4 md:px-6 md:pt-6 md:gap-6;
 			}
 
 			.modal-footer {
-				@apply [.border-t]:pt-4 md:[.border-t]:pt-6 flex items-center px-4 md:px-6;
+				@apply w-full flex justify-between items-center px-4 pb-4 gap-4 md:px-6 md:pb-6 md:gap-6;
 			}
 		}
 		.modal-btn-close {

package/dist/overlay/css/toast.css

@@ -23,7 +23,7 @@
 	}
 
 	.toast {
-		@apply absolute inset-x-0 flex items-center gap-3 p-4 pointer-events-auto rounded-ui;
+		@apply absolute inset-x-0 flex items-center gap-3 p-4 pointer-events-auto rounded-box;
 		@apply transition-all duration-300 ease-out shadow-sm;
 
 		transform: translateY(calc((var(--toast-total) - var(--toast-index) - 1) * -8px))
@@ -31,36 +31,24 @@
 		opacity: calc(1 - (var(--toast-total) - var(--toast-index) - 1) * 0.2);
 		z-index: calc(50 + var(--toast-index));
 
-		&.is-success {
-			@apply bg-on-success text-success;
-
-			&.is-solid {
-				@apply bg-success text-on-success;
-			}
-		}
-
-		&.is-danger {
-			@apply bg-on-danger text-danger;
-
-			&.is-solid {
-				@apply bg-danger text-on-danger;
-			}
+		&.is-soft {
+			&.is-primary { @apply bg-on-primary text-primary; }
+			&.is-secondary { @apply bg-on-secondary text-secondary; }
+			&.is-muted { @apply bg-muted text-on-muted; }
+			&.is-success { @apply bg-on-success text-success; }
+			&.is-info { @apply bg-on-info text-info; }
+			&.is-warning { @apply bg-on-warning text-warning; }
+			&.is-danger { @apply bg-on-danger text-danger; }
 		}
 
-		&.is-warning {
-			@apply bg-on-warning text-warning;
-
-			&.is-solid {
-				@apply bg-warning text-on-warning;
-			}
-		}
-
-		&.is-info {
-			@apply bg-on-info text-info;
-
-			&.is-solid {
-				@apply bg-info text-on-info;
-			}
+		&.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; }
 		}
 
 		.toast-icon {

package/dist/overlay/css/tooltip.css

@@ -1,89 +1,106 @@
 @layer components {
+
 	.tooltip {
 		@apply relative w-fit;
 	}
 
 	.tooltip-popover {
 		@apply flex items-center gap-2 px-3 py-2;
-		@apply rounded-ui text-sm;
+		@apply rounded-box text-sm;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
 		@apply shadow shadow-muted;
 		@apply whitespace-nowrap;
 		position: fixed;
 		z-index: 9999;
 		pointer-events: none;
-	}
-
-	.tooltip-popover.is-active {
-		@apply visible opacity-100;
-	}
-
-	.tooltip-popover.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.tooltip-popover.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
 
-	.tooltip-popover.is-secondary {
-		@apply bg-on-secondary text-secondary;
+		&.is-active {
+			@apply visible opacity-100;
+		}
 	}
 
-	.tooltip-popover.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.tooltip-popover.is-muted {
-		@apply bg-muted text-on-muted;
-	}
-
-	.tooltip-popover.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
-	}
 
 	.tooltip-arrow {
 		@apply absolute w-2 h-2 rotate-45;
-		position: absolute;
-	}
-
-	.tooltip-arrow.is-primary {
-		@apply bg-on-primary;
-	}
-
-	.tooltip-arrow.is-solid.is-primary {
-		@apply bg-primary;
-	}
-
-	.tooltip-arrow.is-secondary {
-		@apply bg-on-secondary;
-	}
-
-	.tooltip-arrow.is-solid.is-secondary {
-		@apply bg-secondary;
-	}
-
-	.tooltip-arrow.is-muted {
-		@apply bg-muted;
-	}
-
-	.tooltip-arrow.is-solid.is-muted {
-		@apply bg-on-muted;
-	}
-
-	.tooltip-popover.position-top .tooltip-arrow {
-		@apply -bottom-1 left-1/2 -translate-x-1/2;
-	}
-
-	.tooltip-popover.position-bottom .tooltip-arrow {
-		@apply -top-1 left-1/2 -translate-x-1/2;
-	}
-
-	.tooltip-popover.position-start .tooltip-arrow {
-		@apply -right-1 top-1/2 -translate-y-1/2;
 	}
 
-	.tooltip-popover.position-end .tooltip-arrow {
-		@apply -left-1 top-1/2 -translate-y-1/2;
+	.tooltip-popover {
+		&.position-top .tooltip-arrow {
+			@apply -bottom-1 left-1/2 -translate-x-1/2;
+		}
+
+		&.position-bottom .tooltip-arrow {
+			@apply -top-1 left-1/2 -translate-x-1/2;
+		}
+
+		&.position-start .tooltip-arrow {
+			@apply -right-1 top-1/2 -translate-y-1/2;
+		}
+
+		&.position-end .tooltip-arrow {
+			@apply -left-1 top-1/2 -translate-y-1/2;
+		}
+	}
+
+	.tooltip-popover.is-soft {
+		&.is-primary {
+			@apply bg-on-primary text-primary;
+			& .tooltip-arrow { @apply bg-on-primary; }
+		}
+		&.is-secondary {
+			@apply bg-on-secondary text-secondary;
+			& .tooltip-arrow { @apply bg-on-secondary; }
+		}
+		&.is-muted {
+			@apply bg-muted text-on-muted;
+			& .tooltip-arrow { @apply bg-muted; }
+		}
+		&.is-success {
+			@apply bg-on-success text-success;
+			& .tooltip-arrow { @apply bg-on-success; }
+		}
+		&.is-info {
+			@apply bg-on-info text-info;
+			& .tooltip-arrow { @apply bg-on-info; }
+		}
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+			& .tooltip-arrow { @apply bg-on-warning; }
+		}
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+			& .tooltip-arrow { @apply bg-on-danger; }
+		}
+	}
+
+	.tooltip-popover.is-solid {
+		&.is-primary {
+			@apply bg-primary text-on-primary;
+			& .tooltip-arrow { @apply bg-primary; }
+		}
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary;
+			& .tooltip-arrow { @apply bg-secondary; }
+		}
+		&.is-muted {
+			@apply bg-on-muted text-muted;
+			& .tooltip-arrow { @apply bg-on-muted; }
+		}
+		&.is-success {
+			@apply bg-success text-on-success;
+			& .tooltip-arrow { @apply bg-success; }
+		}
+		&.is-info {
+			@apply bg-info text-on-info;
+			& .tooltip-arrow { @apply bg-info; }
+		}
+		&.is-warning {
+			@apply bg-warning text-on-warning;
+			& .tooltip-arrow { @apply bg-warning; }
+		}
+		&.is-danger {
+			@apply bg-danger text-on-danger;
+			& .tooltip-arrow { @apply bg-danger; }
+		}
 	}
 }

package/dist/stores/theme.svelte.js

@@ -30,7 +30,7 @@ const initializeTheme = () => {
     }
 };
 initializeTheme();
-const toggleTheme = () => {
+const switchTheme = () => {
     themeState = themeState === 'light' ? 'dark' : 'light';
     isDark = themeState === 'dark';
     const htmlElement = document.documentElement;
@@ -44,6 +44,31 @@ const toggleTheme = () => {
         localStorage.setItem(THEME_STORAGE_KEY, themeState);
     }
 };
+const toggleTheme = () => {
+    if (!document.startViewTransition) {
+        switchTheme();
+    }
+    else {
+        document.documentElement.classList.add('theme-transitioning');
+        const transition = document.startViewTransition(() => {
+            themeState = themeState === 'light' ? 'dark' : 'light';
+            isDark = themeState === 'dark';
+            const htmlElement = document.documentElement;
+            if (isDark) {
+                htmlElement.classList.add(DARK_CLASS);
+            }
+            else {
+                htmlElement.classList.remove(DARK_CLASS);
+            }
+            if (typeof window !== 'undefined') {
+                localStorage.setItem(THEME_STORAGE_KEY, themeState);
+            }
+        });
+        transition.finished.finally(() => {
+            document.documentElement.classList.remove('theme-transitioning');
+        });
+    }
+};
 export const theme = {
     get state() {
         return themeState;

package/dist/stores/toast.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { IconName } from '../types.js';
+import type { IconData } from "../index.js";
 export interface ToastMessage {
     id: string;
-    icon?: IconName;
+    icon?: IconData;
     title?: string;
     description: string;
     duration?: number;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    isSolid?: boolean;
-    status: 'success' | 'danger' | 'info' | 'warning';
+    variant?: 'solid' | 'soft';
+    color: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 }
 export declare const toast: {
     readonly messages: ToastMessage[];

package/dist/stores/toast.svelte.js

@@ -8,11 +8,11 @@ const toastShow = (message) => {
         id,
         title: message.title,
         description: message.description,
-        status: message.status || 'info',
+        color: message.color || 'info',
         duration: message.duration || 0,
         icon: message.icon,
         position: message.position,
-        isSolid: message.isSolid
+        variant: message.variant || 'soft'
     };
     toastMessages = [...toastMessages, newMessage];
     if (newMessage.duration && newMessage.duration > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.11",
+	"version": "0.2.12",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"