m3-svelte 5.11.0 → 5.12.1

package/package/buttons/Button.svelte

@@ -11,6 +11,7 @@
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
     iconType?: "none" | "left" | "full";
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
   } & ActionProps;
 
@@ -18,35 +19,32 @@
     variant = "filled",
     square = false,
     iconType = "none",
+    size = "s",
     children,
     ...props
   }: Props = $props();
 </script>
 
 {#if "for" in props}
-  <label class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
+  <label class="m3-container {variant} {size} icon-{iconType}" class:square {...props}>
     <Layer />
     {@render children()}
   </label>
 {:else if "href" in props}
-  <a class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
+  <a class="m3-container {variant} {size} icon-{iconType}" class:square {...props}>
     <Layer />
     {@render children()}
   </a>
 {:else if "summary" in props}
   {@const { summary: _, ...extra } = props}
-  <summary
-    class="m3-container m3-font-label-large {variant} icon-{iconType}"
-    class:square
-    {...extra}
-  >
+  <summary class="m3-container {variant} {size} icon-{iconType}" class:square {...extra}>
     <Layer />
     {@render children()}
   </summary>
 {:else}
   <button
     type={"onclick" in props ? "button" : "submit"}
-    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class="m3-container {variant} {size} icon-{iconType}"
     class:square
     {...props}
   >
@@ -56,16 +54,79 @@
 {/if}
 
 <style>
-  :root {
+  .m3-container.xs {
+    height: calc(2rem + var(--m3-util-density-term));
+    padding: 0 0.75rem;
+    gap: 0.5rem;
+    --m3-button-shape: 1rem;
+    --m3-button-square-shape: var(--m3-util-rounding-medium);
+    --m3-button-pressed-shape: var(--m3-util-rounding-small);
+    font-family: var(--m3-font-label, var(--m3-font));
+    font-size: var(--m3-font-label-large-size, 0.875rem);
+    line-height: var(--m3-font-label-large-height, 1.429);
+    letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
+    font-weight: var(--m3-font-label-large-weight, 500);
+  }
+
+  .m3-container.s {
+    height: calc(2.5rem + var(--m3-util-density-term));
+    padding: 0 1rem;
+    gap: 0.5rem;
     --m3-button-shape: 1.25rem;
+    --m3-button-square-shape: var(--m3-util-rounding-medium);
+    --m3-button-pressed-shape: var(--m3-util-rounding-small);
+    font-family: var(--m3-font-label, var(--m3-font));
+    font-size: var(--m3-font-label-large-size, 0.875rem);
+    line-height: var(--m3-font-label-large-height, 1.429);
+    letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
+    font-weight: var(--m3-font-label-large-weight, 500);
+  }
+
+  .m3-container.m {
+    height: calc(3.5rem + var(--m3-util-density-term));
+    padding: 0 1.5rem;
+    gap: 0.5rem;
+    --m3-button-shape: 1.75rem;
+    --m3-button-square-shape: var(--m3-util-rounding-large);
+    --m3-button-pressed-shape: var(--m3-util-rounding-medium);
+    font-family: var(--m3-font-title, var(--m3-font));
+    font-size: var(--m3-font-title-medium-size, 1rem);
+    line-height: var(--m3-font-title-medium-height, 1.5);
+    letter-spacing: var(--m3-font-title-medium-tracking, 0);
+    font-weight: var(--m3-font-title-medium-weight, 500);
+  }
+
+  .m3-container.l {
+    height: calc(6rem + var(--m3-util-density-term));
+    padding: 0 3rem;
+    gap: 0.75rem;
+    --m3-button-shape: 3rem;
+    --m3-button-square-shape: var(--m3-util-rounding-extra-large);
+    --m3-button-pressed-shape: var(--m3-util-rounding-large);
+    font-family: var(--m3-font-headline, var(--m3-font));
+    font-size: var(--m3-font-headline-small-size, 1.5rem);
+    line-height: var(--m3-font-headline-small-height, 1.333);
+    letter-spacing: var(--m3-font-headline-small-tracking, 0);
+    font-weight: var(--m3-font-headline-small-weight, 400);
+  }
+
+  .m3-container.xl {
+    height: calc(8.5rem + var(--m3-util-density-term));
+    padding: 0 4rem;
+    gap: 1rem;
+    --m3-button-shape: 4.25rem;
+    --m3-button-square-shape: var(--m3-util-rounding-extra-large);
+    --m3-button-pressed-shape: var(--m3-util-rounding-large);
+    font-family: var(--m3-font-headline, var(--m3-font));
+    font-size: var(--m3-font-headline-large-size, 2rem);
+    line-height: var(--m3-font-headline-large-height, 1.25);
+    letter-spacing: var(--m3-font-headline-large-tracking, 0);
+    font-weight: var(--m3-font-headline-large-weight, 400);
   }
 
   .m3-container {
     display: inline-flex;
     border: none;
-    height: calc(2.5rem + var(--m3-util-density-term));
-    gap: 0.5rem;
-    padding: 0 1rem;
     border-radius: var(--m3-button-shape);
     transition:
       border-radius var(--m3-util-easing-fast-spatial),
@@ -121,6 +182,14 @@
       outline: 1px solid rgb(var(--m3-scheme-outline-variant));
       outline-offset: -1px;
     }
+    &.outlined.l {
+      outline-width: 2px;
+      outline-offset: -2px;
+    }
+    &.outlined.xl {
+      outline-width: 3px;
+      outline-offset: -3px;
+    }
     &.outlined:not(:disabled, :global(input:disabled) + label) {
       outline-color: rgb(var(--m3-scheme-outline-variant));
       color: rgb(var(--m3-scheme-on-surface-variant));
@@ -145,28 +214,73 @@
 
     &.square:not(:is(:global(input:checked) + label, :global(:open) > summary)),
     &:is(:global(input:checked) + label, :global(:open) > summary):not(.square) {
-      border-radius: var(--m3-util-rounding-medium);
+      border-radius: var(--m3-button-square-shape);
     }
     &:active:not(:disabled, :global(input:disabled) + label) {
-      border-radius: var(--m3-util-rounding-small) !important;
+      border-radius: var(--m3-button-pressed-shape) !important;
     }
   }
 
   .m3-container > :global(*) {
     flex-shrink: 0;
   }
-  .icon-left > :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
+
+  .xs.icon-left > :global(svg),
+  .s.icon-left > :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
   }
-  .icon-full {
+  .m.icon-left > :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .l.icon-left > :global(svg) {
+    width: 2rem;
+    height: 2rem;
+  }
+  .xl.icon-left > :global(svg) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .xs.icon-full {
+    width: 2rem;
+    padding: 0;
+  }
+  .s.icon-full {
     width: 2.5rem;
     padding: 0;
   }
-  .icon-full > :global(svg) {
+  .m.icon-full {
+    width: 3.5rem;
+    padding: 0;
+  }
+  .l.icon-full {
+    width: 6rem;
+    padding: 0;
+  }
+  .xl.icon-full {
+    width: 8.5rem;
+    padding: 0;
+  }
+
+  .xs.icon-full > :global(svg),
+  .s.icon-full > :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .m.icon-full > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  .l.icon-full > :global(svg) {
+    width: 2rem;
+    height: 2rem;
+  }
+  .xl.icon-full > :global(svg) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
 
   .m3-container {
     print-color-adjust: exact;

package/package/buttons/Button.svelte.d.ts

@@ -9,6 +9,7 @@ type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
     iconType?: "none" | "left" | "full";
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
 } & ActionProps;
 declare const Button: import("svelte").Component<Props, {}, "">;

package/package/buttons/TogglePrimitive.svelte

@@ -6,15 +6,17 @@
     toggle = $bindable(),
     variant,
     round = false,
+    size,
     children,
   }: {
     toggle: boolean;
     variant?: "filled" | "tonal";
     round?: boolean;
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
   } = $props();
   const id = $props.id();
 </script>
 
 <input type="checkbox" {id} bind:checked={toggle} />
-<Button for={id} {variant} square={!round} {children} />
+<Button for={id} {variant} square={!round} {size} {children} />

package/package/buttons/TogglePrimitive.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     toggle: boolean;
     variant?: "filled" | "tonal";
     round?: boolean;
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
 };
 declare const TogglePrimitive: import("svelte").Component<$$ComponentProps, {}, "toggle">;

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.11.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",