m3-svelte 5.2.6 → 5.3.0

package/package/misc/styles.css

@@ -30,124 +30,40 @@
   --m3-util-rounding-medium: 12px;
   --m3-util-rounding-large: 16px;
   --m3-util-rounding-extra-large: 28px;
-  --m3-util-rounding-full: 9999px;
+  --m3-util-rounding-full: calc(infinity * 1px);
   --m3-util-optical-centering-coefficient: 0.11;
 
   --m3-font: Roboto, system-ui, sans-serif;
+  --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
 
   /* 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;
+  --m3-util-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+  --m3-util-duration-fast-spatial: 350ms;
+  --m3-util-easing-fast-spatial: var(--m3-util-timing-function-fast-spatial)
+    var(--m3-util-duration-fast-spatial);
 
-    const [startX, startY] = lut[startIdx];
-    const [endX, endY] = lut[endIdx];
+  --m3-util-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
+  --m3-util-duration-spatial: 500ms;
+  --m3-util-easing-spatial: var(--m3-util-timing-function-spatial) var(--m3-util-duration-spatial);
 
-    // Find point with maximum error
-    for (let i = startIdx + 1; i < endIdx; i++) {
-      const [x, y] = lut[i];
+  --m3-util-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+  --m3-util-duration-slow-spatial: 650ms;
+  --m3-util-easing-slow-spatial: var(--m3-util-timing-function-slow-spatial)
+    var(--m3-util-duration-slow-spatial);
 
-      // Linear interpolation
-      const t = (x - startX) / (endX - startX);
-      const interpolatedY = startY + t * (endY - startY);
+  --m3-util-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --m3-util-duration-fast: 150ms;
+  --m3-util-easing-fast: var(--m3-util-timing-function-fast) var(--m3-util-duration-fast);
 
-      const error = Math.abs(y - interpolatedY);
+  --m3-util-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --m3-util-duration: 200ms;
+  --m3-util-easing: var(--m3-util-timing-function) var(--m3-util-duration);
 
-      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}`;
-  }
+  --m3-util-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --m3-util-duration-slow: 300ms;
+  --m3-util-easing-slow: var(--m3-util-timing-function-slow) var(--m3-util-duration-slow);
 
-  // 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(
+  --m3-util-timing-function-emphasized: linear(
     0,
     0.034 6%,
     0.073 9%,
@@ -164,8 +80,13 @@ console.log(optimizedSmallResult);
     0.989 72%,
     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);
+  --m3-util-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --m3-util-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+
+  /* deprecated / todo next release remove */
+  --m3-util-curve: var(--m3-util-timing-function-emphasized);
+  --m3-util-curve-accel: var(--m3-util-timing-function-emphasized-accel);
+  --m3-util-curve-decel: var(--m3-util-timing-function-emphasized-decel);
 
   accent-color: rgb(var(--m3-scheme-primary));
 }
@@ -290,20 +211,128 @@ or for very small text in the content body, such as captions. */
   letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
   font-weight: var(--m3-font-body-small-weight, 400);
 }
-/* Fix some browser stuff */
-.m3-container {
-  box-sizing: border-box;
+/* Reset a few things */
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+  .m3-container {
+    box-sizing: border-box;
+  }
+  .m3-container a,
+  a.m3-container {
+    text-decoration: none;
+  }
+  .m3-container dialog,
+  dialog.m3-container {
+    margin: auto;
+  }
 }
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
+
+/* Emphasized easing timing function 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]);
 }
-.m3-container a,
-a.m3-container {
-  text-decoration: none;
+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]);
+  }
 }
-.m3-container dialog,
-dialog.m3-container {
-  margin: auto;
+
+// 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);
+*/

package/package/misc/tailwind-styles.css

@@ -0,0 +1,162 @@
+@theme {
+  --*: initial;
+
+  --spacing: 0.25rem;
+  --font-mono: var(--m3-font-mono);
+
+  --shadow-1: var(--m3-util-elevation-1);
+  --shadow-2: var(--m3-util-elevation-2);
+  --shadow-3: var(--m3-util-elevation-3);
+  --shadow-4: var(--m3-util-elevation-4);
+  --shadow-5: var(--m3-util-elevation-5);
+
+  --radius-xs: var(--m3-util-rounding-extra-small); /* = 4px = rounded-sm */
+  --radius-s: var(--m3-util-rounding-small); /* = 8px = rounded-lg */
+  --radius-m: var(--m3-util-rounding-medium); /* = 12px = rounded-xl */
+  --radius-l: var(--m3-util-rounding-large); /* = 16px = rounded-2xl */
+  --radius-xl: var(--m3-util-rounding-extra-large); /* = 28px ≅ rounded-3xl */
+
+  --breakpoint-m: 37.5rem; /* ≅ sm */
+  --breakpoint-x: 52.5rem; /* ≅ md */
+  --breakpoint-l: 75rem; /* ≅ lg, xl */
+  --breakpoint-xl: 100rem; /* ≅ 2xl */
+
+  --ease-fast-spatial: var(--m3-util-timing-function-fast-spatial);
+  --ease-spatial: var(--m3-util-timing-function-spatial);
+  --ease-slow-spatial: var(--m3-util-timing-function-slow-spatial);
+  --ease-fast: var(--m3-util-timing-function-fast);
+  --ease: var(--m3-util-timing-function);
+  --ease-slow: var(--m3-util-timing-function-slow);
+  --ease-emphasized: var(--m3-util-timing-function-emphasized);
+  --ease-emphasized-accel: var(--m3-util-timing-function-emphasized-accel);
+  --ease-emphasized-decel: var(--m3-util-timing-function-emphasized-decel);
+
+  --default-transition-timing-function: var(--ease);
+  --default-transition-duration: var(--m3-util-duration);
+
+  --color-background: rgb(var(--m3-scheme-background));
+  --color-on-background: rgb(var(--m3-scheme-on-background));
+  --color-surface: rgb(var(--m3-scheme-surface));
+  --color-surface-dim: rgb(var(--m3-scheme-surface-dim));
+  --color-surface-bright: rgb(var(--m3-scheme-surface-bright));
+  --color-surface-container-lowest: rgb(var(--m3-scheme-surface-container-lowest));
+  --color-surface-container-low: rgb(var(--m3-scheme-surface-container-low));
+  --color-surface-container: rgb(var(--m3-scheme-surface-container));
+  --color-surface-container-high: rgb(var(--m3-scheme-surface-container-high));
+  --color-surface-container-highest: rgb(var(--m3-scheme-surface-container-highest));
+  --color-on-surface: rgb(var(--m3-scheme-on-surface));
+  --color-on-surface-variant: rgb(var(--m3-scheme-on-surface-variant));
+  --color-outline: rgb(var(--m3-scheme-outline));
+  --color-outline-variant: rgb(var(--m3-scheme-outline-variant));
+  --color-inverse-surface: rgb(var(--m3-scheme-inverse-surface));
+  --color-inverse-on-surface: rgb(var(--m3-scheme-inverse-on-surface));
+  --color-primary: rgb(var(--m3-scheme-primary));
+  --color-primary-dim: rgb(var(--m3-scheme-primary-dim));
+  --color-on-primary: rgb(var(--m3-scheme-on-primary));
+  --color-primary-container: rgb(var(--m3-scheme-primary-container));
+  --color-on-primary-container: rgb(var(--m3-scheme-on-primary-container));
+  --color-primary-fixed: rgb(var(--m3-scheme-primary-fixed));
+  --color-primary-fixed-dim: rgb(var(--m3-scheme-primary-fixed-dim));
+  --color-on-primary-fixed: rgb(var(--m3-scheme-on-primary-fixed));
+  --color-on-primary-fixed-variant: rgb(var(--m3-scheme-on-primary-fixed-variant));
+  --color-inverse-primary: rgb(var(--m3-scheme-inverse-primary));
+  --color-secondary: rgb(var(--m3-scheme-secondary));
+  --color-secondary-dim: rgb(var(--m3-scheme-secondary-dim));
+  --color-on-secondary: rgb(var(--m3-scheme-on-secondary));
+  --color-secondary-container: rgb(var(--m3-scheme-secondary-container));
+  --color-on-secondary-container: rgb(var(--m3-scheme-on-secondary-container));
+  --color-secondary-fixed: rgb(var(--m3-scheme-secondary-fixed));
+  --color-secondary-fixed-dim: rgb(var(--m3-scheme-secondary-fixed-dim));
+  --color-on-secondary-fixed: rgb(var(--m3-scheme-on-secondary-fixed));
+  --color-on-secondary-fixed-variant: rgb(var(--m3-scheme-on-secondary-fixed-variant));
+  --color-tertiary: rgb(var(--m3-scheme-tertiary));
+  --color-tertiary-dim: rgb(var(--m3-scheme-tertiary-dim));
+  --color-on-tertiary: rgb(var(--m3-scheme-on-tertiary));
+  --color-tertiary-container: rgb(var(--m3-scheme-tertiary-container));
+  --color-on-tertiary-container: rgb(var(--m3-scheme-on-tertiary-container));
+  --color-tertiary-fixed: rgb(var(--m3-scheme-tertiary-fixed));
+  --color-tertiary-fixed-dim: rgb(var(--m3-scheme-tertiary-fixed-dim));
+  --color-on-tertiary-fixed: rgb(var(--m3-scheme-on-tertiary-fixed));
+  --color-on-tertiary-fixed-variant: rgb(var(--m3-scheme-on-tertiary-fixed-variant));
+  --color-error: rgb(var(--m3-scheme-error));
+  --color-error-dim: rgb(var(--m3-scheme-error-dim));
+  --color-on-error: rgb(var(--m3-scheme-on-error));
+  --color-error-container: rgb(var(--m3-scheme-error-container));
+  --color-on-error-container: rgb(var(--m3-scheme-on-error-container));
+  --color-shadow: rgb(var(--m3-scheme-shadow));
+  --color-scrim: rgb(var(--m3-scheme-scrim));
+  --color-on-on-primary: rgb(var(--m3-scheme-on-on-primary));
+  --color-primary-container-subtle: rgb(var(--m3-scheme-primary-container-subtle));
+  --color-on-primary-container-subtle: rgb(var(--m3-scheme-on-primary-container-subtle));
+  --color-tertiary-container-subtle: rgb(var(--m3-scheme-tertiary-container-subtle));
+  --color-on-tertiary-container-subtle: rgb(var(--m3-scheme-on-tertiary-container-subtle));
+  --color-error-container-subtle: rgb(var(--m3-scheme-error-container-subtle));
+  --color-on-error-container-subtle: rgb(var(--m3-scheme-on-error-container-subtle));
+}
+
+@utility transition-fast-spatial {
+  transition-timing-function: var(--m3-util-timing-function-fast-spatial);
+  transition-duration: var(--m3-util-duration-fast-spatial);
+}
+@utility transition-spatial {
+  transition-timing-function: var(--m3-util-timing-function-spatial);
+  transition-duration: var(--m3-util-duration-spatial);
+}
+@utility transition-slow-spatial {
+  transition-timing-function: var(--m3-util-timing-function-slow-spatial);
+  transition-duration: var(--m3-util-duration-slow-spatial);
+}
+@utility transition-fast {
+  transition-timing-function: var(--m3-util-timing-function-fast);
+  transition-duration: var(--m3-util-duration-fast);
+}
+@utility transition-slow {
+  transition-timing-function: var(--m3-util-timing-function-slow);
+  transition-duration: var(--m3-util-duration-slow);
+}
+
+@utility m3-font-display-large {
+  --: "";
+}
+@utility m3-font-display-medium {
+  --: "";
+}
+@utility m3-font-display-small {
+  --: "";
+}
+@utility m3-font-headline-large {
+  --: "";
+}
+@utility m3-font-headline-medium {
+  --: "";
+}
+@utility m3-font-headline-small {
+  --: "";
+}
+@utility m3-font-title-large {
+  --: "";
+}
+@utility m3-font-title-medium {
+  --: "";
+}
+@utility m3-font-title-small {
+  --: "";
+}
+@utility m3-font-label-large {
+  --: "";
+}
+@utility m3-font-label-medium {
+  --: "";
+}
+@utility m3-font-label-small {
+  --: "";
+}
+@utility m3-font-body-large {
+  --: "";
+}
+@utility m3-font-body-medium {
+  --: "";
+}
+@utility m3-font-body-small {
+  --: "";
+}

package/package/nav/NavCMLX.svelte

@@ -59,7 +59,7 @@
       width: 6rem;
     }
     @media (100rem <= width) {
-      /* Expanded */
+      /* Extra large: expanded */
       flex-direction: column;
       padding-block: 1.25rem;
       min-width: 13.75rem;

package/package/nav/NavCMLXItem.svelte

@@ -273,7 +273,7 @@
       }
     }
     @media (100rem <= width) {
-      /* Expanded */
+      /* Extra large: expanded */
       height: 3.5rem;
       padding-inline: 1.25rem;
       font-size: var(--m3-font-label-large-size, 0.875rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.2.6",
+  "version": "5.3.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -26,6 +26,9 @@
     },
     "./misc/recommended-styles.css": {
       "import": "./package/misc/recommended-styles.css"
+    },
+    "./misc/tailwind-styles.css": {
+      "import": "./package/misc/tailwind-styles.css"
     }
   },
   "dependencies": {
@@ -74,6 +77,6 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && eslint",
     "format": "prettier --write .",
-    "lint": "prettier --check . && eslint ."
+    "lint": "eslint ."
   }
 }