m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/misc/Layer.svelte.d.ts

@@ -1,18 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Layer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Layer = InstanceType<typeof Layer>;
+type $$ComponentProps = {
+    morph?: boolean;
+};
+declare const Layer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Layer = ReturnType<typeof Layer>;
 export default Layer;

package/package/misc/StyleFromScheme.svelte

@@ -7,8 +7,12 @@
   import Styling from "./_styling.svelte";
   import "./styles.css";
 
-  export let lightScheme: SerializedScheme;
-  export let darkScheme: SerializedScheme;
+  interface Props {
+    lightScheme: SerializedScheme;
+    darkScheme: SerializedScheme;
+  }
+
+  let { lightScheme, darkScheme }: Props = $props();
 </script>
 
 <Styling {lightScheme} {darkScheme} />

package/package/misc/StyleFromScheme.svelte.d.ts

@@ -1,24 +1,10 @@
 import type { SerializedScheme } from "./utils";
 import "./styles.css";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-/** @deprecated Directly set styles instead */
-declare const StyleFromScheme: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     lightScheme: SerializedScheme;
     darkScheme: SerializedScheme;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type StyleFromScheme = InstanceType<typeof StyleFromScheme>;
+}
+/** @deprecated Directly set styles instead */
+declare const StyleFromScheme: import("svelte").Component<Props, {}, "">;
+type StyleFromScheme = ReturnType<typeof StyleFromScheme>;
 export default StyleFromScheme;

package/package/misc/_icon.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  export let icon: IconifyIcon;
-  export let width: string = "1em";
-  export let height: string = "1em";
-  let clazz: string | undefined = undefined;
-  export { clazz as class };
+
+  let {
+    icon,
+    width = "1em",
+    height = "1em",
+    class: clazz,
+  }: {
+    icon: IconifyIcon;
+    width?: string;
+    height?: string;
+    class?: string;
+  } = $props();
 </script>
 
 <svg {width} {height} class={clazz} viewBox="0 0 {icon.width} {icon.height}">

package/package/misc/_icon.svelte.d.ts

@@ -1,24 +1,10 @@
 import type { IconifyIcon } from "@iconify/types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Icon: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     icon: IconifyIcon;
     width?: string;
     height?: string;
-    class?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Icon = InstanceType<typeof Icon>;
+    class?: string;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/package/misc/_ripple.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  let cancelRipples: (() => void)[] = [];
+  import { parseSize } from "./utils";
+
+  let { morph }: { morph: boolean } = $props();
+
+  let cancelRipples: (() => void)[] = $state([]);
 
   const createRipple = (node: HTMLDivElement) => {
     node.classList.remove("broken");
@@ -101,6 +105,8 @@
 
       node.appendChild(svg);
 
+      parent.classList.toggle("activated", true);
+
       cancelRipples.push(() => {
         const fade = document.createElementNS("http://www.w3.org/2000/svg", "animate");
         fade.setAttribute("attributeName", "opacity");
@@ -113,6 +119,8 @@
         circle.appendChild(fade);
         fade.beginElement();
         setTimeout(() => svg.remove(), 800);
+
+        parent.classList.toggle("activated", false);
       });
     };
 
@@ -127,11 +135,11 @@
 </script>
 
 <svelte:window
-  on:pointerup={() => {
+  onpointerup={() => {
     cancelRipples.forEach((cancel) => cancel());
     cancelRipples = [];
   }}
-  on:dragend={() => {
+  ondragend={() => {
     cancelRipples.forEach((cancel) => cancel());
     cancelRipples = [];
   }}

package/package/misc/_ripple.svelte.d.ts

@@ -1,18 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Ripple: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Ripple = InstanceType<typeof Ripple>;
+type $$ComponentProps = {
+    morph: boolean;
+};
+declare const Ripple: import("svelte").Component<$$ComponentProps, {}, "">;
+type Ripple = ReturnType<typeof Ripple>;
 export default Ripple;

package/package/misc/_ripplesimple.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  let _: { morph: boolean } = $props();
+</script>
+
 <div class="tint"></div>
 
 <style>

package/package/misc/_ripplesimple.svelte.d.ts

@@ -1,26 +1,6 @@
-export default Ripplesimple;
-type Ripplesimple = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type $$ComponentProps = {
+    morph: boolean;
 };
-declare const Ripplesimple: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Ripplesimple: import("svelte").Component<$$ComponentProps, {}, "">;
+type Ripplesimple = ReturnType<typeof Ripplesimple>;
+export default Ripplesimple;

package/package/misc/_styling.svelte

@@ -5,10 +5,14 @@
 <script lang="ts">
   import { genCSS, type SerializedScheme } from "./utils";
 
-  export let lightScheme: SerializedScheme;
-  export let darkScheme: SerializedScheme;
+  interface Props {
+    lightScheme: SerializedScheme;
+    darkScheme: SerializedScheme;
+  }
+
+  let { lightScheme, darkScheme }: Props = $props();
   const hexCode = (argb: number) => "#" + ((argb & 0xffffff) + 0x1000000).toString(16).slice(1);
-  $: styling = genCSS(lightScheme, darkScheme);
+  let styling = $derived(genCSS(lightScheme, darkScheme));
 </script>
 
 <svelte:head>

package/package/misc/_styling.svelte.d.ts

@@ -1,23 +1,9 @@
 import { type SerializedScheme } from "./utils";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-/** @deprecated Directly set styles instead */
-declare const Styling: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     lightScheme: SerializedScheme;
     darkScheme: SerializedScheme;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Styling = InstanceType<typeof Styling>;
+}
+/** @deprecated Directly set styles instead */
+declare const Styling: import("svelte").Component<Props, {}, "">;
+type Styling = ReturnType<typeof Styling>;
 export default Styling;

package/package/misc/animation.js

@@ -1,9 +1,5 @@
 import { easeEmphasized } from "./easing";
-const parseSize = (size) => (size.endsWith("px")
-    ? +size.slice(0, -2)
-    : size.endsWith("rem")
-        ? +size.slice(0, -3) * 16
-        : null) || 0;
+import { parseSize } from "./utils";
 const getBackgroundColor = (node, defaultColor) => {
     if (!defaultColor) {
         const tmp = document.createElement("div");

package/package/misc/easing.js

@@ -1,3 +1,4 @@
+// TODO: update for Expressive
 const createBezierLUT = (points, pointCount = 100) => {
     const lut = [];
     for (let t = 0; t < 1; t += 1 / pointCount) {
@@ -35,34 +36,6 @@ export const easeEmphasized = createEase([
         [1, 1],
     ],
 ]);
-/*
-=== NEW CSS VERSION ===
-is in var(--m3-easing), generated with
-const createCSSEase = (lutOptions: [number, number][][]) => {
-  const lut = lutOptions.map((args) => createBezierLUT(args)).flat();
-  let stops: number[] = [];
-  for (let t = 0; t <= 1; t += 0.01) {
-    const closestPoint = lut.find((p) => p[0] >= t);
-    const closestY = closestPoint ? closestPoint[1] : 1;
-    stops.push(closestY);
-  }
-
-  return `linear(${stops.map((s) => +s.toFixed(3)).join(", ")})`;
-};
-
-=== OLD CSS VERSION: LIMITED OVERSHOOT ===
-https://cdn.discordapp.com/attachments/1058124584286683237/1064238491904524308/w9blD3eMKQBwAAAABJRU5ErkJggg.png
-cubic-bezier(0.254, 0.029, 0, 1.2) is preferred, it is the most accurate to the acceleration
-cubic-bezier(0.356, 0.701, 0, 1.004) is the most accurate to the deceleration
-cubic-bezier(0.291, 0.281, 0, 1.2) has no weighting
-
-=== OLD CSS VERSION: UNLIMITED OVERSHOOT ===
-https://cdn.discordapp.com/attachments/1058124584286683237/1064238129306927124/H47ZvYKwT8COjeuQXsI8AE4554luCbtMqAAqAJubZ9I2452QBcREREJgab5REREREKgZEpEREQkBEqmREREREKgZEpEREQkBEqmREREREKgZEpEREQkBEqmREREREKgZEpEREQkBP8PcBLo5kfHxSYAAAAASUVORK5CYII.png
-cubic-bezier(0.271, -0.011, 0, 1.449) is the most accurate to the acceleration (but has a large overshoot)
-the deceleration is the same as before
-cubic-bezier(0.278, 0.195, 0, 1.251) has no weighting
-the m3 docs randomly mention 0.2, 0, 0, 1 but that seems off
-*/
 export const easeEmphasizedDecel = createEase([
     [
         [0, 0],

package/package/misc/styles.css

@@ -23,120 +23,148 @@
     0px 6px 30px 5px rgb(var(--m3-scheme-shadow) / 0.12);
   --m3-util-bottom-offset: 0;
 
-  /*Shape*/
+  /* Shapes */
   --m3-util-rounding-none: 0;
-  --m3-util-rounding-extra-small: 0.25rem;
-  --m3-util-rounding-small: 0.5rem;
-  --m3-util-rounding-medium: 0.75rem;
-  --m3-util-rounding-large: 1rem;
-  --m3-util-rounding-extra-large: 1.75rem;
-  --m3-util-rounding-full: 100rem;
+  --m3-util-rounding-extra-small: 4px;
+  --m3-util-rounding-small: 8px;
+  --m3-util-rounding-medium: 12px;
+  --m3-util-rounding-large: 16px;
+  --m3-util-rounding-extra-large: 28px;
+  --m3-util-rounding-full: 9999px;
 
   --m3-font: Roboto, system-ui, sans-serif;
 
-  --m3-easing: linear(
+  /* Expressive easing */
+  --m3-util-easing-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9) 350ms;
+  --m3-util-easing-spatial: cubic-bezier(0.38, 1.21, 0.22, 1) 500ms;
+  --m3-util-easing-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98) 650ms;
+  --m3-util-easing-fast: cubic-bezier(0.31, 0.94, 0.34, 1) 150ms;
+  --m3-util-easing: cubic-bezier(0.34, 0.8, 0.34, 1) 200ms;
+  --m3-util-easing-slow: cubic-bezier(0.34, 0.88, 0.34, 1) 300ms;
+  /* Emphasized easing, curve derived from this code:
+const createBezierLUT = (points: number[][], pointCount: number = 100): number[][] => {
+  const lut: number[][] = [];
+  for (let t = 0; t < 1; t += 1 / pointCount) {
+    const a = (1 - t) * (1 - t) * (1 - t);
+    const b = (1 - t) * (1 - t) * t;
+    const c = (1 - t) * t * t;
+    const d = t * t * t;
+    const x = a * points[0][0] + 3 * b * points[1][0] + 3 * c * points[2][0] + d * points[3][0];
+    const y = a * points[0][1] + 3 * b * points[1][1] + 3 * c * points[2][1] + d * points[3][1];
+    lut.push([x, y]);
+  }
+  return lut;
+};
+
+const createCSSEaseOptimized = (
+  lutOptions: number[][][],
+  maxErrorThreshold: number = 0.01
+): string => {
+  // Create the full lookup table
+  const lut = lutOptions.map((args) => createBezierLUT(args)).flat();
+
+  // Find key points using Douglas-Peucker algorithm
+  const keyPoints: number[][] = [lut[0], lut[lut.length - 1]];
+  const segments: number[][] = [[0, lut.length - 1]];
+
+  while (segments.length > 0) {
+    const [startIdx, endIdx] = segments.pop() || [0, 0];
+    let maxError = 0;
+    let maxErrorIdx = -1;
+
+    // Skip if segment is too small
+    if (endIdx - startIdx <= 1) continue;
+
+    const [startX, startY] = lut[startIdx];
+    const [endX, endY] = lut[endIdx];
+
+    // Find point with maximum error
+    for (let i = startIdx + 1; i < endIdx; i++) {
+      const [x, y] = lut[i];
+
+      // Linear interpolation
+      const t = (x - startX) / (endX - startX);
+      const interpolatedY = startY + t * (endY - startY);
+
+      const error = Math.abs(y - interpolatedY);
+
+      if (error > maxError) {
+        maxError = error;
+        maxErrorIdx = i;
+      }
+    }
+
+    // If error exceeds threshold, add point and split segment
+    if (maxError > maxErrorThreshold) {
+      keyPoints.push(lut[maxErrorIdx]);
+      segments.push([startIdx, maxErrorIdx]);
+      segments.push([maxErrorIdx, endIdx]);
+    }
+  }
+
+  // Sort by x value
+  keyPoints.sort((a, b) => a[0] - b[0]);
+
+  // Format result using CSS linear() with explicit percentages
+  let result = "linear(";
+
+  // First point (no percentage for first point)
+  result += keyPoints[0][1].toFixed(3);
+
+  // Middle points with explicit percentages
+  for (let i = 1; i < keyPoints.length - 1; i++) {
+    const [x, y] = keyPoints[i];
+    const percentage = (x * 100).toFixed(0) + "%";
+    result += `, ${y.toFixed(3)} ${percentage}`;
+  }
+
+  // Last point (no percentage for last point)
+  result += `, ${keyPoints[keyPoints.length - 1][1].toFixed(3)}`;
+  result += ")";
+
+  return result;
+};
+
+// Example usage
+const testInput = [
+  [
+    [0, 0],
+    [0.05, 0],
+    [0.133, 0.06],
+    [0.166, 0.4],
+  ],
+  [
+    [0.166, 0.4],
+    [0.208, 0.82],
+    [0.25, 1],
+    [1, 1],
+  ],
+];
+
+// Run optimized function with a more relaxed threshold for smaller size
+const optimizedSmallResult = createCSSEaseOptimized(testInput, 0.01);
+console.log("Optimized result (relaxed threshold 0.01):");
+console.log(optimizedSmallResult);
+*/
+  --m3-util-curve: linear(
     0,
-    0.001,
-    0.004,
-    0.008,
-    0.013,
-    0.022,
-    0.031,
-    0.043,
-    0.06,
-    0.076,
-    0.095,
-    0.122,
-    0.152,
-    0.188,
-    0.228,
-    0.281,
-    0.351,
-    0.449,
-    0.53,
-    0.594,
-    0.643,
-    0.68,
-    0.715,
-    0.74,
-    0.755,
-    0.778,
-    0.793,
-    0.807,
-    0.82,
-    0.833,
-    0.846,
-    0.852,
-    0.863,
-    0.869,
-    0.88,
-    0.885,
-    0.89,
-    0.9,
-    0.905,
-    0.91,
-    0.914,
-    0.919,
-    0.923,
-    0.927,
-    0.931,
-    0.935,
-    0.939,
-    0.943,
-    0.946,
-    0.95,
-    0.953,
-    0.956,
-    0.956,
-    0.959,
-    0.962,
-    0.965,
-    0.968,
-    0.968,
-    0.971,
-    0.973,
-    0.973,
-    0.976,
-    0.978,
-    0.98,
-    0.98,
-    0.982,
-    0.984,
-    0.984,
-    0.986,
-    0.986,
-    0.988,
-    0.989,
-    0.989,
-    0.991,
-    0.991,
-    0.992,
-    0.993,
-    0.993,
-    0.995,
-    0.995,
-    0.996,
-    0.996,
-    0.997,
-    0.997,
-    0.997,
-    0.997,
-    0.998,
-    0.998,
-    0.999,
-    0.999,
-    0.999,
-    0.999,
-    1,
-    1,
-    1,
-    1,
-    1,
-    1,
-    1,
+    0.034 6%,
+    0.073 9%,
+    0.126 11%,
+    0.194 13%,
+    0.273 15%,
+    0.351 16%,
+    0.541 18%,
+    0.652 20%,
+    0.755 24%,
+    0.839 30%,
+    0.91 39%,
+    0.959 53%,
+    0.989 72%,
     1
   );
-  --m3-easing-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --m3-util-curve-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --m3-util-curve-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
 
   accent-color: rgb(var(--m3-scheme-primary));
 }

package/package/misc/utils.d.ts

@@ -6,3 +6,4 @@ export declare const colors: Color[];
  * @returns A string of CSS code with custom properties representing the color scheme values.
  * */
 export declare const genCSS: (light: SerializedScheme, dark: SerializedScheme) => string;
+export declare const parseSize: (size: string) => number;

package/package/misc/utils.js

@@ -86,3 +86,8 @@ ${darkColors}
 }`;
     return colors;
 };
+export const parseSize = (size) => (size.endsWith("px")
+    ? +size.slice(0, -2)
+    : size.endsWith("rem")
+        ? +size.slice(0, -3) * 16
+        : null) || 0;

package/package/nav/NavDrawer.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
 
-  export let display = "flex";
-  export let extraOptions: HTMLAttributes<HTMLElement> = {};
+  let {
+    children,
+  }: {
+    children: Snippet;
+  } = $props();
 </script>
 
-<nav class="m3-container" style="display: {display};" {...extraOptions}>
-  <slot />
+<nav class="m3-container">
+  {@render children()}
 </nav>
 
 <style>
   .m3-container {
+    display: flex;
     flex-direction: column;
     width: 22.5rem;
     padding: 1rem 0.75rem 0 0.75rem;

package/package/nav/NavDrawer.svelte.d.ts

@@ -1,31 +1,7 @@
-import type { HTMLAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const NavDrawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLElement>;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type NavDrawer = InstanceType<typeof NavDrawer>;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const NavDrawer: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavDrawer = ReturnType<typeof NavDrawer>;
 export default NavDrawer;