m3-svelte 6.0.2 → 6.0.3

package/package/containers/ListItem.svelte

@@ -16,7 +16,7 @@
     headline = "",
     supporting = "",
     trailing,
-    lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
+    lines: _lines,
     ...props
   }: {
     leading?: Snippet;
@@ -26,6 +26,8 @@
     trailing?: Snippet;
     lines?: number;
   } & ActionProps = $props();
+
+  let lines = $derived(_lines ?? (overline && supporting ? 3 : overline || supporting ? 2 : 1));
 </script>
 
 {#snippet content()}
@@ -78,6 +80,7 @@
 <style>
   .m3-container {
     display: flex;
+    justify-self: stretch;
     padding: 0.5rem 1.5rem 0.5rem 1rem;
     align-items: center;
     gap: 1rem;

package/package/forms/DatePickerDocked.svelte

@@ -9,7 +9,13 @@
   let {
     date = "",
     clearable,
+    // eslint and svelte disagree
+    // eslint-disable-next-line svelte/no-unused-svelte-ignore
+    // svelte-ignore state_referenced_locally
     focusedMonth = $bindable(parseInt(date.slice(5, 7)) - 1 || now.getMonth()),
+    // eslint and svelte disagree
+    // eslint-disable-next-line svelte/no-unused-svelte-ignore
+    // svelte-ignore state_referenced_locally
     focusedYear = $bindable(parseInt(date.slice(0, 4)) || now.getFullYear()),
     startYear = now.getFullYear() - 50,
     endYear = now.getFullYear() + 10,
@@ -29,10 +35,7 @@
   } = $props();
 
   let currentView: "calendar" | "year" | "month" = $state("calendar");
-  let chosenDate = $state(date);
-  $effect(() => {
-    chosenDate = date;
-  });
+  let chosenDate = $derived(date);
 
   const getLongMonth = (month: number) =>
     new Date(0, month).toLocaleDateString(undefined, { month: "long" });

package/package/forms/_wavy.d.ts

@@ -1,2 +1,2 @@
-export declare const linear: (amp: number, center: number, from: number, to: number, time: number, cutoffTo?: number) => string;
+export declare const linear: (amp: number, center: number, from: number, to: number, time: number, softTo?: number) => string;
 export declare const trackOpacity: (right: number, x: number) => number;

package/package/forms/_wavy.js

@@ -2,14 +2,14 @@ const frequencyT = (Math.PI * 2) / 1000;
 const frequencyX = (Math.PI * 2) / 40;
 const round2 = (x) => Math.round(x * 100) / 100;
 const round1 = (x) => Math.round(x * 10) / 10;
-export const linear = (amp, center, from, to, time, cutoffTo) => {
+export const linear = (amp, center, from, to, time, softTo) => {
     time = time * frequencyT;
     time %= Math.PI * 2;
     if (from >= to)
         return "";
     let path = "";
     for (let xIterator = from; xIterator <= to; xIterator += 0.5) {
-        const x = cutoffTo ? Math.min(cutoffTo, xIterator) : xIterator;
+        const x = softTo ? Math.min(softTo, xIterator) : xIterator;
         const sinV = Math.sin(x * frequencyX + time);
         const y = sinV * amp + center;
         if (x == from) {

package/package/misc/badge.js

@@ -1,7 +1,7 @@
 export const addBadge = (icon, n) => {
     const { width, height } = icon;
     if (!width || !height)
-        throw new Error("Icon must have icon and height");
+        throw new Error("Icon must have width and height");
     let badge;
     if (n) {
         const x = width - 12;
@@ -21,7 +21,7 @@ export const addBadge = (icon, n) => {
                     "border-radius:var(--m3-shape-full)",
                 ].join(";")}">` +
                 text +
-                `</div>`;
+                `</div></foreignObject>`;
     }
     else {
         badge = `<circle cx="${width - 3}" cy="3" r="3" fill="var(--m3c-error)"/>`;

package/package/misc/colors.js

@@ -1,6 +1,6 @@
 import { MaterialDynamicColors, DynamicColor, ContrastCurve, } from "@ktibow/material-color-utilities-nightly";
 export const materialColors = new MaterialDynamicColors();
-// Custom color role used for switch
+// Generates on-on-primary for Switch, read more: https://ktibow.github.io/blog/humanresearch/ononprimary/
 const onOnPrimary = DynamicColor.fromPalette({
     name: "on_on_primary",
     palette: (s) => s.primaryPalette,

package/package/nav/VariableTabsLink.svelte

@@ -20,6 +20,7 @@
     }[];
   } & HTMLAnchorAttributes = $props();
 
+  // svelte-ignore state_referenced_locally
   let prevTab = $state(tab);
   let wrapper: HTMLDivElement | undefined = $state();
   $effect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -38,13 +38,13 @@
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.0",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/flubber": "^0.4.0",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.1",
@@ -52,15 +52,15 @@
     "globals": "^16.5.0",
     "m3-svelte": "link:",
     "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.15",
-    "svelte": "^5.45.6",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.16",
+    "svelte": "^5.46.0",
     "svelte-check": "^4.3.4",
     "svelte-highlight": "^7.9.0",
     "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^7.3.0",
     "vite-plugin-functions-mixins": "^0.4.0",
     "vite-plugin-token-shaker": "^0.0.3"
   },