@noxlovette/material 0.1.3 → 0.1.4

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -33,7 +33,6 @@ on screen until confirmed, dismissed, or a required action has been taken.
     disabled = false,
     class: className,
     contentProps,
-    onconfirm,
     ...rootRest
   }: DialogueProps = $props();
 
@@ -64,13 +63,6 @@ on screen until confirmed, dismissed, or a required action has been taken.
             method="POST"
             action={confirmAction}
             use:enhance
-            onsubmit={(e: any) => {
-              if (onconfirm) {
-                e.preventDefault();
-                onconfirm();
-                open = false;
-              }
-            }}
             {...props}
             class={inner({ class: className })}
             style:min-width={minWidth}
@@ -107,15 +99,12 @@ on screen until confirmed, dismissed, or a required action has been taken.
               >
                 {cancelText}
               </Button>
-              <Button
-                type="submit"
-                {disabled}
-                {loading}
-                variant="filled"
-                data-cy="dialogue-confirm"
-              >
-                {confirmText}
-              </Button>
+
+              <Dialog.Close>
+                <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
+                  {confirmText}
+                </Button>
+              </Dialog.Close>
             </div>
           </form>
         {/if}

package/dist/components/snackbar/Snackbar.svelte

@@ -13,7 +13,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
   import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
 
   let {
-    message,
+    message = $bindable(''),
     fixed = true,
     static: isStatic = false,
     label,
@@ -23,23 +23,30 @@ Snackbars provide brief messages about app processes at the bottom of the screen
   }: SnackBarProps = $props();
 
   let dismissed = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
 
   $effect(() => {
-    if (!message) return;
-    if (isStatic) return;
-    const t = setTimeout(() => {
-      dismissed = true;
-      message = '';
-    }, 5000);
-    return () => clearTimeout(t);
-  });
-
-  $effect(() => {
-    if (!message) {
+    if (message) {
       dismissed = false;
-      return;
+      if (timeoutId) clearTimeout(timeoutId);
+
+      if (!isStatic) {
+        timeoutId = setTimeout(() => {
+          dismissed = true;
+          // Clear message if it's a string to allow re-triggering.
+          // If it's a snippet, we just let it be dismissed.
+          if (typeof message === 'string') {
+            message = '';
+          }
+        }, 4000);
+      }
+    } else {
+      dismissed = true;
     }
-    dismissed = false;
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
   });
 
   const {
@@ -88,7 +95,9 @@ Snackbars provide brief messages about app processes at the bottom of the screen
           class="relative rounded-full p-1"
           onclick={() => {
             dismissed = true;
-            message = '';
+            if (typeof message === 'string') {
+              message = '';
+            }
           }}
           aria-label="Dismiss snackbar"
           data-cy="notification-dismiss"

package/dist/components/snackbar/Snackbar.svelte.d.ts

@@ -4,6 +4,6 @@ import type { SnackBarProps } from './types.js';
  *
  * @see https://m3.material.io/components/snackbars/overview
  */
-declare const Snackbar: import("svelte").Component<SnackBarProps, {}, "">;
+declare const Snackbar: import("svelte").Component<SnackBarProps, {}, "message">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "license": "MIT",
   "repository": {