m3-svelte 5.12.0 → 5.12.1

package/package/forms/CircularProgress.svelte

@@ -5,6 +5,7 @@
     percent,
     size = 48,
     thickness = 4,
+    ...extra
   }: { percent: number; size?: number; thickness?: number } & HTMLAttributes<SVGElement> = $props();
 
   let r = $derived(size / 2 - thickness / 2);
@@ -18,6 +19,7 @@
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
   role="progressbar"
+  {...extra}
 >
   <circle
     cx={size / 2}

package/package/forms/CircularProgressEstimate.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
   let {
     sToHalfway = 1,
     size = 48,
     thickness = 2,
+    ...extra
   }: {
     sToHalfway?: number;
     size?: number;
     thickness?: number;
-  } = $props();
+  } & HTMLAttributes<SVGElement> = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -23,6 +26,7 @@
   role="progressbar"
   style:--speed="{sToHalfway * 8}s"
   style:--circumference={circumference}
+  {...extra}
 >
   <circle
     cx={size / 2}

package/package/forms/CircularProgressEstimate.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     sToHalfway?: number;
     size?: number;
     thickness?: number;
-};
+} & HTMLAttributes<SVGElement>;
 declare const CircularProgressEstimate: import("svelte").Component<$$ComponentProps, {}, "">;
 type CircularProgressEstimate = ReturnType<typeof CircularProgressEstimate>;
 export default CircularProgressEstimate;

package/package/forms/Select.svelte

@@ -112,13 +112,6 @@
           currentColor 8%
         );
       }
-      &:active {
-        background-color: color-mix(
-          in oklab,
-          rgb(var(--m3-scheme-surface-container-highest)),
-          currentColor 12%
-        );
-      }
     }
 
     box-shadow: inset 0px -1px var(--secondary-color);

package/package/forms/WavyLinearProgress.svelte

@@ -11,8 +11,6 @@
 
   let time = $state(0);
 
-  let top = $derived(thickness * 0.5);
-  let bottom = $derived(height - thickness * 0.5);
   let left = $derived(thickness * 0.5);
   let right = $derived(width - thickness * 0.5);
   let percentX = $derived((percent / 100) * (right - left) + left);
@@ -20,7 +18,7 @@
   const getSMILData = (time: number) => {
     let paths: string[] = [];
     for (let x = 0; x <= 1000; x += 1000 / 30) {
-      paths.push(linear(top, bottom, left, percentX, time + x));
+      paths.push(linear(height / 2 - thickness / 2, height / 2, left, percentX, time + x));
     }
     return paths.join(";");
   };

package/package/forms/WavyLinearProgressEstimate.svelte

@@ -8,8 +8,6 @@
     thickness = 4,
   }: { sToHalfway?: number; width?: number; height?: number; thickness?: number } = $props();
 
-  let top = $derived(thickness * 0.5);
-  let bottom = $derived(height - thickness * 0.5);
   let left = $derived(thickness * 0.5);
   let right = $derived(width - thickness * 0.5);
   let endTime = $derived(sToHalfway * 8);
@@ -21,14 +19,23 @@
       let value = 1 - Math.pow(0.5, time / sToHalfway);
       if (value == 0) value = 0.001;
       const ms = time * 1000;
-      paths.push(linear(top, bottom, left, right, ms, value * (right - left) + left));
+      paths.push(
+        linear(
+          height / 2 - thickness / 2,
+          height / 2,
+          left,
+          right,
+          ms,
+          value * (right - left) + left,
+        ),
+      );
     }
     return paths.join(";");
   });
   const infiniteSMIL = $derived.by(() => {
     let paths: string[] = [];
     for (let time = 0; time <= 1; time += 1 / 30) {
-      paths.push(linear(top, bottom, left, right, time * 1000));
+      paths.push(linear(height / 2 - thickness / 2, height / 2, left, right, time * 1000));
     }
     return paths.join(";");
   });

package/package/forms/_wavy.d.ts

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

package/package/forms/_wavy.js

@@ -2,7 +2,7 @@ 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 = (t, b, from, to, time, cutoffTo) => {
+export const linear = (amp, center, from, to, time, cutoffTo) => {
     time = time * frequencyT;
     time %= Math.PI * 2;
     if (from >= to)
@@ -10,8 +10,8 @@ export const linear = (t, b, from, to, time, cutoffTo) => {
     let path = "";
     for (let xIterator = from; xIterator <= to; xIterator += 0.5) {
         const x = cutoffTo ? Math.min(cutoffTo, xIterator) : xIterator;
-        const sinV = (Math.sin(x * frequencyX + time) + 1) * 0.5;
-        const y = sinV * (t - b) + b;
+        const sinV = Math.sin(x * frequencyX + time);
+        const y = sinV * amp + center;
         if (x == from) {
             path = `M ${round1(x)} ${round2(y)}`;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.12.0",
+  "version": "5.12.1",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,13 +35,13 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "~0.0.1760591837",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11760728781000",
-    "svelte": "^5.41.0"
+    "@ktibow/iconset-material-symbols": "~0.0.1761892960",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11761929426000",
+    "svelte": "^5.43.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.38.0",
+    "@eslint/compat": "^1.4.1",
+    "@eslint/js": "^9.39.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.47.1",
     "@sveltejs/package": "^2.5.4",
@@ -50,15 +50,15 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "fast-glob": "^3.3.3",
-    "globals": "^16.4.0",
+    "globals": "^16.5.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.14",
+    "publint": "^0.3.15",
     "svelte-check": "^4.3.3",
-    "svelte-highlight": "^7.8.4",
+    "svelte-highlight": "^7.9.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.1",
-    "vite": "^7.1.10"
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.1.12"
   },
   "keywords": [
     "svelte",