m3-svelte 4.2.0 → 4.3.1

package/package/forms/Chip.svelte

@@ -59,6 +59,7 @@
     --m3-chip-shape: var(--m3-util-rounding-small);
   }
   .m3-container {
+    display: flex;
     height: 2rem;
     border-radius: var(--m3-chip-shape);
     padding: 0 1rem;

package/package/forms/CircularProgress.svelte

@@ -1,24 +1,40 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
 
-  let { percent, ...extra }: { percent: number } & HTMLAttributes<SVGElement> = $props();
+  let {
+    percent,
+    size = 48,
+    thickness = 4,
+  }: { percent: number; size?: number; thickness?: number } & HTMLAttributes<SVGElement> = $props();
+
+  let r = $derived(size / 2 - thickness / 2);
+  let circumference = $derived(Math.PI * r * 2);
 </script>
 
 <svg
-  viewBox="0 0 48 48"
+  width={size}
+  height={size}
+  viewBox="0 0 {size} {size}"
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
-  style:--percent="{percent}px"
   role="progressbar"
-  {...extra}
 >
   <circle
-    cx="24"
-    cy="24"
-    r="20"
+    cx={size / 2}
+    cy={size / 2}
+    {r}
+    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke-width={thickness}
+    fill="none"
+  />
+  <circle
+    cx={size / 2}
+    cy={size / 2}
+    {r}
     stroke="rgb(var(--m3-scheme-primary))"
-    stroke-width="4"
-    stroke-dasharray="125.66 125.66"
+    stroke-width={thickness}
+    stroke-dasharray="{circumference} {circumference}"
+    stroke-dashoffset={(percent / -100) * circumference + circumference}
     stroke-linecap="round"
     fill="none"
   />
@@ -26,12 +42,9 @@
 
 <style>
   svg {
-    width: 3rem;
-    height: 3rem;
-    transform: rotate(-90deg);
+    rotate: -90deg;
   }
   circle {
-    stroke-dashoffset: calc((var(--percent) / -100 + 1px) * 125.66);
     transition: var(--m3-util-easing-fast);
   }
 </style>

package/package/forms/CircularProgress.svelte.d.ts

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

package/package/forms/CircularProgressEstimate.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  let {
+    sToHalfway = 1,
+    size = 48,
+    thickness = 2,
+  }: {
+    sToHalfway?: number;
+    size?: number;
+    thickness?: number;
+  } = $props();
+
+  let r = $derived(size / 2 - thickness / 2);
+  let circumference = $derived(Math.PI * r * 2);
+
+  /* Easing calculated the same way it was in LinearProgressEstimate */
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 {size} {size}"
+  class="m3-container"
+  role="progressbar"
+  style:--speed="{sToHalfway * 8}s"
+  style:--circumference={circumference}
+>
+  <circle
+    cx={size / 2}
+    cy={size / 2}
+    {r}
+    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke-width={thickness}
+    fill="none"
+  />
+  <circle
+    cx={size / 2}
+    cy={size / 2}
+    {r}
+    stroke="rgb(var(--m3-scheme-primary))"
+    stroke-width={thickness}
+    stroke-dasharray="{circumference} {circumference}"
+    stroke-linecap="round"
+    fill="none"
+    class="percent"
+  />
+</svg>
+
+<style>
+  .m3-container {
+    rotate: -90deg;
+  }
+
+  .percent {
+    animation: grow
+      linear(
+        0,
+        0.08 1.5%,
+        0.15 2.93%,
+        0.22 4.48%,
+        0.29 6.18%,
+        0.35 7.77%,
+        0.41 9.52%,
+        0.47 11.45%,
+        0.52 13.24%,
+        0.57 15.22%,
+        0.61 16.98%,
+        0.65 18.93%,
+        0.69 21.12%,
+        0.73 23.61%,
+        0.76 25.74%,
+        0.79 28.14%,
+        0.82 30.92%,
+        0.84 33.05%,
+        0.86 35.46%,
+        0.88 38.24%,
+        0.9 41.52%,
+        0.92 45.55%,
+        0.93 47.96%,
+        0.95 54.02%,
+        0.96 58.05%,
+        0.97 63.24%,
+        0.98 70.55%,
+        0.99 83.05%,
+        1
+      )
+      var(--speed) both;
+  }
+
+  @keyframes grow {
+    0% {
+      stroke-dashoffset: var(--circumference);
+    }
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+</style>

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

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

package/package/forms/CircularProgressIndeterminate.svelte

@@ -1,3 +1,7 @@
+<!--
+@component
+@deprecated use LoadingIndicator or one of the Estimate components instead
+-->
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
 

package/package/forms/CircularProgressIndeterminate.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
+/** @deprecated use LoadingIndicator or one of the Estimate components instead */
 declare const CircularProgressIndeterminate: import("svelte").Component<HTMLAttributes<SVGElement>, {}, "">;
 type CircularProgressIndeterminate = ReturnType<typeof CircularProgressIndeterminate>;
 export default CircularProgressIndeterminate;

package/package/forms/LinearProgress.svelte

@@ -1,43 +1,26 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
-
-  let {
-    percent,
-    ...extra
-  }: {
-    percent: number;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  let { percent, height = 4 }: { percent: number; height?: number } = $props();
 </script>
 
-<div class="m3-container" role="progressbar" {...extra}>
+<div class="m3-container" role="progressbar" style:height="{height / 16}rem">
   <div class="percent" style:width="{percent}%"></div>
+  <div class="track"></div>
 </div>
 
 <style>
-  :root {
-    --m3-linear-progress-shape: var(--m3-util-rounding-full);
-  }
   .m3-container {
-    display: inline-flex;
-    background-color: rgb(var(--m3-scheme-primary-container));
-    height: 0.25rem;
-    min-width: 8rem;
-    overflow: hidden;
-    border-radius: var(--m3-linear-progress-shape);
+    display: flex;
+    gap: 0.25rem;
   }
   .percent {
     background-color: rgb(var(--m3-scheme-primary));
+    border-radius: var(--m3-util-rounding-full);
+    flex-shrink: 0;
     transition: var(--m3-util-easing-fast);
-    border-radius: var(--m3-linear-progress-shape);
-  }
-
-  .m3-container {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
-  @media screen and (forced-colors: active) {
-    .percent {
-      background-color: selecteditem;
-    }
+  .track {
+    background-color: rgb(var(--m3-scheme-secondary-container));
+    border-radius: var(--m3-util-rounding-full);
+    flex-grow: 1;
   }
 </style>

package/package/forms/LinearProgress.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     percent: number;
-} & HTMLAttributes<HTMLDivElement>;
+    height?: number;
+};
 declare const LinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;
 type LinearProgress = ReturnType<typeof LinearProgress>;
 export default LinearProgress;

package/package/forms/LinearProgressEstimate.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  let { sToHalfway = 1, height = 4 }: { sToHalfway?: number; height?: number } = $props();
+  /*
+  Easing calculated with
+  // 1) define the original mapping f(y)=time-%, capped at 100% for y=1
+  const whenReached = (y) => Math.log(1 - y) / Math.log(0.5);
+  const makePoints = () => {
+    const pts = [];
+    for (let i = 0; i < 100; i++) {
+      const v = i / 100;
+      const t = (whenReached(v) * 100) / 8;
+      pts.push([v, t]);
+    }
+    // add the final point (1, 100)
+    pts.push([1, 100]);
+    return pts;
+  };
+
+  // 2) helper: compute perpendicular distance from pt to line (p0→p1)
+  const perpDist = (pt, p0, p1) => {
+    const [x, y] = pt;
+    const [x1, y1] = p0;
+    const [x2, y2] = p1;
+    const num = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
+    const den = Math.hypot(y2 - y1, x2 - x1);
+    return den === 0 ? 0 : num / den;
+  };
+
+  // 3) RDP (recursive)
+  function rdp(points, eps) {
+    if (points.length < 3) return points;
+    let maxD = 0,
+      idx = 0;
+    for (let i = 1; i < points.length - 1; i++) {
+      const d = perpDist(points[i], points[0], points[points.length - 1]);
+      if (d > maxD) {
+        maxD = d;
+        idx = i;
+      }
+    }
+    if (maxD > eps) {
+      const left = rdp(points.slice(0, idx + 1), eps);
+      const right = rdp(points.slice(idx), eps);
+      return left.slice(0, -1).concat(right);
+    }
+    return [points[0], points[points.length - 1]];
+  }
+
+  // 4) round x to 2 decimals (keep trailing zeros); round y to 2 decimals (cap tiny negatives to 0)
+  const fmt = (v, t) => {
+    const xv = v.toFixed(2);
+    let tv = Math.round(t * 100) / 100; // round to 2 decimals
+    if (Math.abs(tv) < 1e-8) tv = 0; // avoid "-0.00"
+    return `${xv} ${tv.toFixed(2)}%`;
+  };
+
+  // 5) put it all together
+  function buildCompressedLinear(tolerance) {
+    const raw = makePoints();
+    const reduced = rdp(raw, tolerance);
+    return `linear(${reduced.map(([v, t]) => fmt(v, t)).join(", ")})`;
+  }
+
+  // 6) example result
+  const compressed = buildCompressedLinear(0.001);
+  console.log(compressed);
+  */
+</script>
+
+<div
+  class="m3-container"
+  role="progressbar"
+  style:height="{height / 16}rem"
+  style:--speed="{sToHalfway * 8}s"
+>
+  <div class="percent"></div>
+  <div class="track"></div>
+</div>
+
+<style>
+  .m3-container {
+    display: flex;
+    gap: 0.25rem;
+  }
+  .percent {
+    background-color: rgb(var(--m3-scheme-primary));
+    border-radius: var(--m3-util-rounding-full);
+    flex-shrink: 0;
+    animation: grow
+      linear(
+        0,
+        0.08 1.5%,
+        0.15 2.93%,
+        0.22 4.48%,
+        0.29 6.18%,
+        0.35 7.77%,
+        0.41 9.52%,
+        0.47 11.45%,
+        0.52 13.24%,
+        0.57 15.22%,
+        0.61 16.98%,
+        0.65 18.93%,
+        0.69 21.12%,
+        0.73 23.61%,
+        0.76 25.74%,
+        0.79 28.14%,
+        0.82 30.92%,
+        0.84 33.05%,
+        0.86 35.46%,
+        0.88 38.24%,
+        0.9 41.52%,
+        0.92 45.55%,
+        0.93 47.96%,
+        0.95 54.02%,
+        0.96 58.05%,
+        0.97 63.24%,
+        0.98 70.55%,
+        0.99 83.05%,
+        1
+      )
+      var(--speed) both;
+  }
+  @keyframes grow {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+  .track {
+    background-color: rgb(var(--m3-scheme-secondary-container));
+    border-radius: var(--m3-util-rounding-full);
+    flex-grow: 1;
+  }
+</style>

package/package/forms/LinearProgressEstimate.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    sToHalfway?: number;
+    height?: number;
+};
+declare const LinearProgressEstimate: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinearProgressEstimate = ReturnType<typeof LinearProgressEstimate>;
+export default LinearProgressEstimate;

package/package/forms/LinearProgressIndeterminate.svelte

@@ -1,3 +1,7 @@
+<!--
+@component
+@deprecated use LoadingIndicator or one of the Estimate components instead
+-->
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
 

package/package/forms/LinearProgressIndeterminate.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
+/** @deprecated use LoadingIndicator or one of the Estimate components instead */
 declare const LinearProgressIndeterminate: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
 type LinearProgressIndeterminate = ReturnType<typeof LinearProgressIndeterminate>;
 export default LinearProgressIndeterminate;

package/package/forms/LoadingIndicator.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  // for more weird loaders check out https://www.npmjs.com/package/kreations
+  let {
+    size = 48,
+    container = false,
+    center = true,
+  }: {
+    size?: number;
+    container?: boolean;
+    center?: boolean;
+  } = $props();
+</script>
+
+<svg width={size} height={size} class:container class:center>
+  <path fill="currentColor">
+    <animate
+      attributeName="d"
+      dur="5s"
+      repeatCount="indefinite"
+      calcMode="spline"
+      keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
+      keyTimes="0; 0.14; 0.14; 0.29; 0.29; 0.43; 0.43; 0.57; 0.57; 0.71; 0.71; 0.86; 0.86; 1"
+      values="M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z;
+M20.3 8.6 21.1 8 22 7.6 23 7.3 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.2 15.5 37.6 16.5 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8 17.6 9.8 18.6 9.6 19.5 9.2Z;
+M18.6 9.6 19.5 9.2 20.3 8.6 21.1 8 22 7.6 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.6 16.4 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8Z;
+M18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.2 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 33.7 13.1 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.5 30.5 39.5 30 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7.1 21.7 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8 15.4 12.3 16.2 11.7 17 11.1 17.8 10.5Z;
+M15.4 12.3 16.2 11.7 17 11.1 17.8 10.5 18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.3 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.4 30.5 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8Z;
+M17 12.8 17.7 12.1 18.5 11.5 19.3 10.9 20.1 10.5 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 25 9 26 9 27 9 27.6 9.1 28 9.1 28.9 9.3 29.9 9.6 30.9 9.9 31.8 10.3 32.6 10.8 33.5 11.3 34.3 11.9 34.6 12.2 35 12.6 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.6 18.5 38.6 18.7 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.3 38.2 26.4 37.8 27.3 37.4 28.2 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.8 32.5 33.5 32.8 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.2 37.3 27.9 37.5 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 22.5 39 21.5 39 20.5 38.9 20.4 38.9 19.5 38.8 18.6 38.6 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.4 35.8 13.3 35.8 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.6 30 9.4 29.3 9.3 29 9.1 28 9 27 9 26 9 25 9.2 24 9.4 23 9.6 22.1 9.8 21.7 10 21.1 10.4 20.2 10.9 19.4 11.4 18.5 12.1 17.8 12.7 17 13.4 16.3 14.2 15.6 14.2 15.5 14.9 14.9 15.6 14.2 16.3 13.5Z;
+M33.5 11.3 34.3 11.9 35 12.6 35.3 12.8 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.3 17.7 38.6 18.5 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.4 37.8 27.3 37.4 28.2 36.9 28.9 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.5 32.8 33.1 33.2 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.7 37 28.2 37.3 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 23.3 38.9 22.5 39 21.5 39 20.5 38.9 19.5 38.8 18.6 38.6 17.6 38.3 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.3 35.8 12.7 35.2 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.7 30.3 9.6 29.9 9.3 29 9.1 28 9 27 9 26 9 25 9.1 24.5 9.2 24 9.4 23 9.6 22.1 10 21.1 10.4 20.2 10.9 19.4 11.1 19.1 11.5 18.5 12.1 17.7 12.7 17 13.5 16.3 14.2 15.6 14.9 14.9 14.9 14.8 15.6 14.2 16.3 13.5 17 12.8 17.7 12.1 18.5 11.5 19.3 11 19.3 10.9 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 24.7 9.1 25 9 26 9 27 9 28 9.1 28.9 9.3 29.9 9.6 30.4 9.7 30.9 9.9 31.8 10.3 32.6 10.8Z;
+M33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.8 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.6 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7 27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1Z;
+M27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1 33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.9 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.5 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7Z;
+M27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 34.8 11.3 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.9 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.4 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35 36 35.7 35.3 36.4 34.4 37 34.1 37.2 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.6 10 30.1 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10 16.6 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 20.9 11 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11Z;
+M36 35.7 35.3 36.4 34.4 37 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.2 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11 27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.8 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35Z;
+M32.1 32.1 31.4 32.8 30.7 33.5 29.9 34.1 29.1 34.7 28.3 35.3 27.6 35.8 27.5 35.8 26.6 36.4 25.8 36.8 24.9 37.3 24 37.7 23.1 38 22.1 38.3 21.2 38.6 20.2 38.8 19.2 38.9 18.2 39 17.2 39 16.6 38.9 16.3 38.9 15.3 38.7 14.3 38.4 13.4 38 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10 34.6 9.6 33.7 9.3 32.7 9.1 31.7 9.1 31.4 9 30.8 9 29.8 9.1 28.8 9.2 27.8 9.4 26.8 9.7 25.9 10 24.9 10.3 24 10.7 23.1 11.2 22.2 11.6 21.4 12.2 20.5 12.2 20.4 12.7 19.7 13.3 18.9 13.9 18.1 14.5 17.3 15.2 16.6 15.9 15.9 16.6 15.2 17.3 14.5 18.1 13.9 18.9 13.3 19.7 12.7 20.4 12.2 20.5 12.2 21.4 11.6 22.2 11.2 23.1 10.7 24 10.3 24.9 10 25.9 9.7 26.8 9.4 27.8 9.2 28.8 9.1 29.8 9 30.8 9 31.4 9.1 31.7 9.1 32.7 9.3 33.7 9.6 34.6 10 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 38 13.4 38.4 14.3 38.7 15.3 38.9 16.3 38.9 16.6 39 17.2 39 18.2 38.9 19.2 38.8 20.2 38.6 21.2 38.3 22.1 38 23.1 37.7 24 37.3 24.9 36.8 25.8 36.4 26.6 35.8 27.5 35.8 27.6 35.3 28.3 34.7 29.1 34.1 29.9 33.5 30.7 32.8 31.4Z;
+M24.3 10.2 24.9 10 25.9 9.7 26.8 9.4 27.1 9.4 27.8 9.2 28.8 9.1 29.8 9 29.9 9 30.8 9 31.7 9.1 32.7 9.3 32.8 9.3 33.7 9.6 34.6 10 35.5 10.5 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 37.5 12.5 38 13.4 38.4 14.3 38.7 15.2 38.7 15.3 38.9 16.3 39 17.2 39 18.1 39 18.2 38.9 19.2 38.8 20.2 38.6 20.9 38.6 21.2 38.3 22.1 38 23.1 37.8 23.7 37.7 24 37.3 24.9 36.8 25.8 36.5 26.4 36.4 26.6 35.8 27.5 35.3 28.3 35 28.8 34.7 29.1 34.1 29.9 33.5 30.7 33.1 31.1 32.8 31.4 32.1 32.1 31.4 32.8 31.1 33.1 30.7 33.5 29.9 34.1 29.1 34.7 28.8 35 28.3 35.3 27.5 35.8 26.6 36.4 26.4 36.5 25.8 36.8 24.9 37.3 24 37.7 23.7 37.8 23.1 38 22.1 38.3 21.2 38.6 20.9 38.6 20.2 38.8 19.2 38.9 18.2 39 18.1 39 17.2 39 16.3 38.9 15.3 38.7 15.2 38.7 14.3 38.4 13.4 38 12.5 37.5 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10.5 35.5 10 34.6 9.6 33.7 9.3 32.8 9.3 32.7 9.1 31.7 9 30.8 9 29.9 9 29.8 9.1 28.8 9.2 27.8 9.4 27.1 9.4 26.8 9.7 25.9 10 24.9 10.2 24.3 10.3 24 10.7 23.1 11.2 22.2 11.5 21.6 11.6 21.4 12.2 20.5 12.7 19.7 13 19.2 13.3 18.9 13.9 18.1 14.5 17.3 14.9 16.9 15.2 16.6 15.9 15.9 16.6 15.2 16.9 14.9 17.3 14.5 18.1 13.9 18.9 13.3 19.2 13 19.7 12.7 20.5 12.2 21.4 11.6 21.6 11.5 22.2 11.2 23.1 10.7 24 10.3Z;
+M22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.3 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.4 38.9 26.2 39.6 27 40.2 27.7 40.5 28.6 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.8 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.6 9.1 21.8 8.4 21 7.8 20.3 7.5 19.4 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.2 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1 20.9 10.4 21.4 9.5 21.9 8.7Z"
+    />
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      dur="5s"
+      repeatCount="indefinite"
+      calcMode="spline"
+      keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8"
+      keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1"
+      values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"
+    />
+  </path>
+</svg>
+
+<style>
+  svg {
+    color: rgb(var(--m3-scheme-primary));
+    &.container {
+      background-color: rgb(var(--m3-scheme-primary-container));
+      color: rgb(var(--m3-scheme-on-primary-container));
+      border-radius: var(--m3-util-rounding-full);
+    }
+    &.center {
+      margin: auto;
+    }
+  }
+</style>

package/package/forms/LoadingIndicator.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    size?: number;
+    container?: boolean;
+    center?: boolean;
+};
+declare const LoadingIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoadingIndicator = ReturnType<typeof LoadingIndicator>;
+export default LoadingIndicator;

package/package/forms/WavyLinearProgress.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import { linear, trackOpacity } from "./_wavy";
+
+  let {
+    width = 600,
+    height = 10,
+    thickness = 4,
+    percent,
+  }: { width?: number; height?: number; thickness?: number; percent: number } = $props();
+
+  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);
+
+  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));
+    }
+    return paths.join(";");
+  };
+
+  onMount(() => {
+    let mounted = true;
+    const start = performance.now();
+    const update = () => {
+      if (!mounted) return;
+
+      time = performance.now() - start;
+      requestAnimationFrame(update);
+    };
+    update();
+    return () => (mounted = false);
+  });
+</script>
+
+<svg viewBox="0 0 {width} {height}">
+  <path
+    fill="none"
+    stroke="rgb(var(--m3-scheme-primary))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+  >
+    <animate
+      attributeName="d"
+      dur="1s"
+      repeatCount="indefinite"
+      values={getSMILData(untrack(() => time))}
+    />
+  </path>
+  <line
+    fill="none"
+    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+    x1={percentX + thickness + 4}
+    y1={height / 2}
+    x2={right}
+    y2={height / 2}
+    opacity={trackOpacity(right, percentX + thickness + 4)}
+  />
+</svg>

package/package/forms/WavyLinearProgress.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    width?: number;
+    height?: number;
+    thickness?: number;
+    percent: number;
+};
+declare const WavyLinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type WavyLinearProgress = ReturnType<typeof WavyLinearProgress>;
+export default WavyLinearProgress;

package/package/forms/WavyLinearProgressEstimate.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { linear, trackOpacity } from "./_wavy";
+
+  let {
+    sToHalfway = 1,
+    width = 600,
+    height = 10,
+    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);
+
+  const expressiveSMIL = $derived.by(() => {
+    let paths: string[] = [];
+
+    for (let time = 0; time < endTime; time += 1 / 30) {
+      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));
+    }
+    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));
+    }
+    return paths.join(";");
+  });
+  let { trackSMIL, opacitySMIL } = $derived.by(() => {
+    let xs: number[] = [];
+    let opacities: number[] = [];
+
+    for (let time = 0; time < endTime; time += 1 / 30) {
+      const value = 1 - Math.pow(0.5, time / sToHalfway);
+      const percentX = value * (right - left) + left;
+      const x = percentX + thickness + 4;
+      xs.push(x);
+
+      opacities.push(trackOpacity(right, x));
+    }
+    return {
+      trackSMIL: xs.join(";"),
+      opacitySMIL: opacities.join(";"),
+    };
+  });
+</script>
+
+<svg viewBox="0 0 {width} {height}">
+  <path
+    fill="none"
+    stroke="rgb(var(--m3-scheme-primary))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+  >
+    <animate attributeName="d" dur="{endTime}s" values={expressiveSMIL} />
+    <animate
+      attributeName="d"
+      dur="1s"
+      begin="{endTime}s"
+      repeatCount="indefinite"
+      values={infiniteSMIL}
+    />
+  </path>
+  <line
+    fill="none"
+    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke-width={thickness}
+    stroke-linecap="round"
+    y1={height / 2}
+    x2={right}
+    y2={height / 2}
+  >
+    <animate attributeName="x1" dur="{endTime}s" values={trackSMIL} />
+    <animate attributeName="opacity" dur="{endTime}s" values={opacitySMIL} fill="freeze" />
+  </line>
+</svg>

package/package/forms/WavyLinearProgressEstimate.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    sToHalfway?: number;
+    width?: number;
+    height?: number;
+    thickness?: number;
+};
+declare const WavyLinearProgressEstimate: import("svelte").Component<$$ComponentProps, {}, "">;
+type WavyLinearProgressEstimate = ReturnType<typeof WavyLinearProgressEstimate>;
+export default WavyLinearProgressEstimate;

package/package/forms/_wavy.d.ts

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

package/package/forms/_wavy.js

@@ -0,0 +1,32 @@
+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) => {
+    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 sinV = (Math.sin(x * frequencyX + time) + 1) * 0.5;
+        const y = sinV * (t - b) + b;
+        if (x == from) {
+            path = `M ${round1(x)} ${round2(y)}`;
+        }
+        else {
+            path += ` ${round1(x)} ${round2(y)}`;
+        }
+    }
+    return path;
+};
+export const trackOpacity = (right, x) => {
+    let opacity = right - x;
+    if (opacity < 0)
+        opacity = 0;
+    if (opacity > 1)
+        opacity = 1;
+    opacity = round2(opacity);
+    return opacity;
+};

package/package/index.d.ts

@@ -18,8 +18,12 @@ 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 LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
 export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
+export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";

package/package/index.js

@@ -17,8 +17,12 @@ 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 LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
 export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
+export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -29,20 +29,20 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1747426012",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11748742074820",
-    "svelte": "^5.33.2"
+    "@ktibow/iconset-material-symbols": "^0.0.1748584357",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11748827599657",
+    "svelte": "^5.33.13"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.27.0",
+    "@eslint/js": "^9.28.0",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.0",
+    "eslint-plugin-svelte": "^3.9.1",
     "fast-glob": "^3.3.3",
     "globals": "^16.2.0",
     "prettier": "^3.5.3",
@@ -51,7 +51,7 @@
     "svelte-check": "^4.2.1",
     "svelte-highlight": "^7.8.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.33.1",
     "vite": "^6.3.5"
   },
   "keywords": [