m3-svelte 5.9.1 → 5.10.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/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.10.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -57,7 +57,7 @@
     "svelte-check": "^4.3.3",
     "svelte-highlight": "^7.8.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.0",
+    "typescript-eslint": "^8.46.1",
     "vite": "^7.1.9"
   },
   "keywords": [