m3-svelte 5.9.1 → 5.11.0

package/package/buttons/Button.svelte

@@ -14,54 +14,27 @@
     children: Snippet;
   } & ActionProps;
 
-  let props: Props = $props();
-</script>
-
-{#if "for" in props}
-  {@const {
+  let {
     variant = "filled",
-    for: forItem,
     square = false,
     iconType = "none",
     children,
-    ...extra
-  } = props}
-  <label
-    for={forItem}
-    class="m3-container m3-font-label-large {variant} icon-{iconType}"
-    class:square
-    {...extra}
-  >
+    ...props
+  }: Props = $props();
+</script>
+
+{#if "for" in props}
+  <label class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
     <Layer />
     {@render children()}
   </label>
 {:else if "href" in props}
-  {@const {
-    variant = "filled",
-    href,
-    square = false,
-    iconType = "none",
-    children,
-    ...extra
-  } = props}
-  <a
-    {href}
-    class="m3-container m3-font-label-large {variant} icon-{iconType}"
-    class:square
-    {...extra}
-  >
+  <a class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
     <Layer />
     {@render children()}
   </a>
 {:else if "summary" in props}
-  {@const {
-    variant = "filled",
-    square = false,
-    iconType = "none",
-    children,
-    summary: _,
-    ...extra
-  } = props}
+  {@const { summary: _, ...extra } = props}
   <summary
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
@@ -71,12 +44,11 @@
     {@render children()}
   </summary>
 {:else}
-  {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
-    type={"onclick" in extra ? "button" : "submit"}
+    type={"onclick" in props ? "button" : "submit"}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
-    {...extra}
+    {...props}
   >
     <Layer />
     {@render children()}

package/package/containers/Card.svelte

@@ -5,20 +5,22 @@
 
   type ActionProps = ButtonAttrs | DivAttrs;
 
-  let props: {
+  let {
+    variant,
+    children,
+    ...extra
+  }: {
     variant: "elevated" | "filled" | "outlined";
     children: Snippet;
   } & ActionProps = $props();
 </script>
 
-{#if "onclick" in props}
-  {@const { variant, children, ...extra } = props}
+{#if "onclick" in extra}
   <button type="button" class="m3-container {variant}" {...extra}>
     <Layer />
     {@render children()}
   </button>
 {:else}
-  {@const { variant, children, ...extra } = props}
   <div class="m3-container {variant}" {...extra}>
     {@render children()}
   </div>

package/package/containers/NewSnackbar.svelte

@@ -0,0 +1,113 @@
+<script module lang="ts">
+  export const snackbar = (
+    message: string,
+    actions?: Record<string, () => void>,
+    closable?: boolean,
+    /*
+    undefined/unset -> 4s timeout
+    2000 -> 2s timeout
+    -1 -> no timeout
+    */
+    timeout?: number,
+  ) => {
+    _show(message, actions, closable, timeout);
+  };
+  let _show: typeof snackbar;
+</script>
+
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import iconX from "@ktibow/iconset-material-symbols/close";
+  import Icon from "../misc/Icon.svelte";
+  import SnackbarItem from "./SnackbarItem.svelte";
+  import Layer from "../misc/Layer.svelte";
+
+  let { closeTitle = "Close" }: { closeTitle?: string } = $props();
+  let shown:
+    | { message: string; actions: Record<string, () => void>; closable: boolean }
+    | undefined = $state();
+  let timeoutId: number;
+  _show = (message, actions = {}, closable = false, timeout = 4000) => {
+    shown = { message, actions, closable };
+    clearTimeout(timeoutId);
+    if (timeout && timeout > 0)
+      timeoutId = setTimeout(() => {
+        shown = undefined;
+      }, timeout);
+  };
+</script>
+
+{#if shown}
+  <div class="holder" out:fade={{ duration: 200 }}>
+    {#key shown}
+      <SnackbarItem>
+        <p class="m3-font-body-medium">{shown.message}</p>
+        {#each Object.entries(shown.actions) as [key, action]}
+          <button
+            type="button"
+            class="action m3-font-label-large"
+            onclick={() => {
+              shown = undefined;
+              action();
+            }}
+          >
+            {key}
+          </button>
+        {/each}
+        {#if shown.closable}
+          <button
+            type="button"
+            class="close"
+            title={closeTitle}
+            onclick={() => {
+              shown = undefined;
+            }}
+          >
+            <Layer />
+            <Icon icon={iconX} />
+          </button>
+        {/if}
+      </SnackbarItem>
+    {/key}
+  </div>
+{/if}
+
+<style>
+  .holder {
+    position: fixed;
+    padding-bottom: 1rem;
+    bottom: var(--m3-util-bottom-offset);
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 3;
+  }
+  p {
+    margin-right: auto;
+  }
+  button {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    background-color: transparent;
+    color: unset;
+    cursor: pointer;
+    position: relative;
+  }
+  button :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .action {
+    color: rgb(var(--m3-scheme-inverse-primary));
+    padding: 0 0.5rem;
+  }
+  .close {
+    padding: 0 0.75rem;
+    margin-right: -1rem;
+  }
+</style>

package/package/containers/NewSnackbar.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare const snackbar: (message: string, actions?: Record<string, () => void>, closable?: boolean, timeout?: number) => void;
+type $$ComponentProps = {
+    closeTitle?: string;
+};
+declare const NewSnackbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NewSnackbar = ReturnType<typeof NewSnackbar>;
+export default NewSnackbar;

package/package/containers/Snackbar.svelte

@@ -1,3 +1,7 @@
+<!--
+@component
+@deprecated use NewSnackbar instead
+-->
 <script module lang="ts">
   export type SnackbarIn = {
     message: string;

package/package/containers/Snackbar.svelte.d.ts

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     config?: SnackbarConfig;
     closeButtonTitle?: string;
 } & DivAttrs;
+/** @deprecated use NewSnackbar instead */
 declare const Snackbar: import("svelte").Component<$$ComponentProps, {
     show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
 }, "">;

package/package/index.d.ts

@@ -18,6 +18,7 @@ export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export type { SnackbarIn } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
+export { default as NewSnackbar, snackbar } from "./containers/NewSnackbar.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
 export { default as Chip } from "./forms/Chip.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";

package/package/index.js

@@ -17,6 +17,7 @@ export { default as Menu } from "./containers/Menu.svelte";
 export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
+export { default as NewSnackbar, snackbar } from "./containers/NewSnackbar.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
 export { default as Chip } from "./forms/Chip.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";

package/package/nav/NavCMLXItem.svelte

@@ -5,9 +5,15 @@
   import Layer from "../misc/Layer.svelte";
 
   type ActionProps =
-    | ({ click: () => void } & HTMLButtonAttributes)
+    | ({ click?: () => void } & HTMLButtonAttributes) // deprecated: drop in favour of `onclick`
     | ({ href: string } & HTMLAnchorAttributes);
-  let props: {
+  let {
+    variant,
+    icon,
+    text,
+    selected,
+    ...props
+  }: {
     variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
     icon: IconifyIcon;
     text: string;
@@ -15,15 +21,8 @@
   } & ActionProps = $props();
 </script>
 
-{#if "click" in props}
-  {@const { variant, icon, text, selected, click, ...extra } = props}
-  <button
-    type="button"
-    onclick={click}
-    class="m3-container m3-font-label-medium {variant}"
-    disabled={selected}
-    {...extra}
-  >
+{#if "href" in props}
+  <a class="m3-container m3-font-label-medium {variant}" {...props}>
     <div class="content" class:selected>
       <Layer />
       <div class="icon">
@@ -31,10 +30,16 @@
       </div>
       {text}
     </div>
-  </button>
+  </a>
 {:else}
-  {@const { variant, icon, text, selected, href, ...extra } = props}
-  <a {href} class="m3-container m3-font-label-medium {variant}" {...extra}>
+  {@const { click, ...extra } = props}
+  <button
+    type="button"
+    onclick={click}
+    class="m3-container m3-font-label-medium {variant}"
+    disabled={selected}
+    {...extra}
+  >
     <div class="content" class:selected>
       <Layer />
       <div class="icon">
@@ -42,7 +47,7 @@
       </div>
       {text}
     </div>
-  </a>
+  </button>
 {/if}
 
 <style>

package/package/nav/NavCMLXItem.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
 type ActionProps = ({
-    click: () => void;
+    click?: () => void;
 } & HTMLButtonAttributes) | ({
     href: string;
 } & HTMLAnchorAttributes);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.9.1",
+  "version": "5.11.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,18 +35,18 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "~0.0.1760073587",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11760125264000",
-    "svelte": "^5.39.11"
+    "@ktibow/iconset-material-symbols": "~0.0.1760591837",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11760728781000",
+    "svelte": "^5.41.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.46.4",
+    "@sveltejs/kit": "^2.47.1",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "fast-glob": "^3.3.3",
@@ -57,8 +57,8 @@
     "svelte-check": "^4.3.3",
     "svelte-highlight": "^7.8.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.0",
-    "vite": "^7.1.9"
+    "typescript-eslint": "^8.46.1",
+    "vite": "^7.1.10"
   },
   "keywords": [
     "svelte",