m3-svelte 5.9.0 → 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/misc/styles.css

@@ -33,7 +33,7 @@
   --m3-util-rounding-full: calc(infinity * 1px);
   --m3-util-optical-centering-coefficient: 0.11;
 
-  --m3-font: Roboto, system-ui, sans-serif;
+  --m3-font: Roboto, system-ui;
   --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
 
   /* Expressive easing */

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.0",
+  "version": "5.10.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,30 +35,30 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1758086573",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11758221177000",
-    "svelte": "^5.39.4"
+    "@ktibow/iconset-material-symbols": "~0.0.1760073587",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11760125264000",
+    "svelte": "^5.39.11"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.36.0",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.42.1",
-    "@sveltejs/package": "^2.5.3",
-    "@sveltejs/vite-plugin-svelte": "^6.2.0",
-    "eslint": "^9.35.0",
+    "@eslint/js": "^9.37.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.46.4",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.3",
+    "eslint-plugin-svelte": "^3.12.4",
     "fast-glob": "^3.3.3",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.13",
-    "svelte-check": "^4.3.2",
+    "publint": "^0.3.14",
+    "svelte-check": "^4.3.3",
     "svelte-highlight": "^7.8.4",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1",
-    "vite": "^7.1.7"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.1",
+    "vite": "^7.1.9"
   },
   "keywords": [
     "svelte",