m3-svelte 6.0.1 → 6.0.2

package/README.md

@@ -1,3 +1,3 @@
-# m3-svelte
+# M3 Svelte
 
 M3 Svelte implements the Material 3 design system in Svelte. See the [website](https://ktibow.github.io/m3-svelte/) for demos and usage instructions.

package/package/buttons/Button.svelte

@@ -241,8 +241,8 @@
       }
     }
 
-    &.square:not(:is(:global(input:checked) + label, :global(:open) > summary)),
-    &:is(:global(input:checked) + label, :global(:open) > summary):not(.square) {
+    &.square:not(:global(input:checked) + label, :global(:open) > summary),
+    &:not(.square):is(:global(input:checked) + label, :global(:open) > summary) {
       border-radius: var(--square-shape);
     }
     &:active:not(:disabled, :global(input:disabled) + label) {
@@ -260,7 +260,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .m3-container:is(.elevated, .filled, .tonal) {

package/package/buttons/FAB.svelte

@@ -141,7 +141,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     button {

package/package/buttons/SplitButton.svelte

@@ -181,6 +181,5 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 </style>

package/package/containers/Snackbar.svelte

@@ -27,7 +27,7 @@
   let shown:
     | { message: string; actions: Record<string, () => void>; closable: boolean }
     | undefined = $state();
-  let timeoutId: number;
+  let timeoutId: ReturnType<typeof setTimeout>;
   _show = (message, actions = {}, closable = false, timeout = 4000) => {
     clearTimeout(timeoutId);
     shown = { message, actions, closable };

package/package/forms/Checkbox.svelte

@@ -110,7 +110,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     :global(input:checked) + .layer-container .checkbox-box {

package/package/forms/Chip.svelte

@@ -156,7 +156,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .selected {

package/package/forms/CircularProgressEstimate.svelte

@@ -55,39 +55,7 @@
   }
 
   .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;
+    animation: grow var(--m3-timing-function-zeno) var(--speed) both;
   }
 
   @keyframes grow {

package/package/forms/LinearProgressEstimate.svelte

@@ -1,70 +1,5 @@
 <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
@@ -86,39 +21,7 @@
     background-color: var(--m3c-primary);
     border-radius: var(--m3-shape-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;
+    animation: grow var(--m3-timing-function-zeno) var(--speed) both;
   }
   @keyframes grow {
     0% {

package/package/forms/RadioAnim1.svelte

@@ -85,7 +85,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/RadioAnim2.svelte

@@ -85,7 +85,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/RadioAnim3.svelte

@@ -85,7 +85,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/Slider.svelte

@@ -127,7 +127,6 @@
     block-size: var(--handle-height);
     min-inline-size: 10rem;
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
 
     --functional-width: calc(100% - 2 * (0.25rem + 0.125rem));
     --handle-left: calc(50% + var(--functional-width) * var(--handle) - 0.125rem - 0.375rem);
@@ -381,6 +380,7 @@
 
     opacity: 0;
     pointer-events: none;
+    user-select: none;
     transition: opacity var(--m3-easing);
     z-index: 1;
     @media screen and (forced-colors: active) {

package/package/forms/Switch.svelte

@@ -213,7 +213,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     input:checked {

package/package/forms/TextField.svelte

@@ -197,7 +197,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     input {

package/package/forms/TextFieldMultiline.svelte

@@ -37,14 +37,7 @@
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
-  <textarea
-    class="focus-none"
-    placeholder=" "
-    bind:value
-    {id}
-    {disabled}
-    {required}
-    {...extra}
+  <textarea class="focus-none" placeholder=" " bind:value {id} {disabled} {required} {...extra}
   ></textarea>
   <label for={id}>{label}</label>
   <div class="layer"></div>
@@ -171,7 +164,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     textarea {

package/package/forms/TextFieldOutlined.svelte

@@ -190,6 +190,5 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 </style>

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -37,14 +37,7 @@
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
-  <textarea
-    class="focus-none"
-    placeholder=" "
-    bind:value
-    {id}
-    {disabled}
-    {required}
-    {...extra}
+  <textarea class="focus-none" placeholder=" " bind:value {id} {disabled} {required} {...extra}
   ></textarea>
   <div class="layer"></div>
   <label for={id}>{label}</label>
@@ -165,6 +158,5 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 </style>

package/package/misc/Layer.svelte

@@ -63,15 +63,15 @@
       circle.appendChild(expand);
 
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.style.cssText = `
-        position: absolute;
-        left: ${x - size / 2}px;
-        top: ${y - size / 2}px;
-        width: ${size}px;
-        height: ${size}px;
-        pointer-events: none;
-        overflow: visible;
-      `;
+      svg.style.cssText = [
+        "position: absolute",
+        `left: ${x - size / 2}px`,
+        `top: ${y - size / 2}px`,
+        `width: ${size}px`,
+        `height: ${size}px`,
+        "pointer-events: none",
+        "overflow: visible",
+      ].join(";");
       svg.appendChild(gradient);
       svg.appendChild(circle);
 
@@ -192,18 +192,20 @@
     transition: opacity var(--m3-easing-fast);
 
     &:not(
-      :global(input:disabled + label) > .tint,
-      :global(input:disabled + .layer-container) > .tint,
-      :global(:disabled) > .tint
+      :global(input:disabled + label) > *,
+      :global(input:disabled + .layer-container) > *,
+      :global(:disabled) > *
     ) {
       @media (hover: hover) {
-        &:is(:global(:hover) > .tint, :global(:active) > .tint) {
+        &:is(:global(:hover) > *, :global(:active) > *) {
           opacity: 0.08;
         }
       }
-      &:is(:global(input:focus-visible + label) > .tint),
-      &:is(:global(:focus-visible) > .tint),
-      &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
+      &:is(
+        :global(input:focus-visible + label) > *,
+        :global(:focus-visible) > *,
+        :global(:active) > .ripple-container.broken + *
+      ) {
         opacity: 0.12;
       }
     }

package/package/misc/styles.css

@@ -1,8 +1,10 @@
 @function --translucent(--color, --opacity) {
   result: oklab(from var(--color) l a b / var(--opacity));
 }
+/* DEPRECATED: This default --m3-density function will be removed in a future version.
+   For new themes, pick which option you actually want. */
 @function --m3-density(--size) {
-  result: calc(var(--size) + (var(--m3v-density) * 0.25rem));
+  result: calc(var(--size) + (var(--m3v-density, 0) * 0.25rem));
 }
 
 @layer tokens {
@@ -84,6 +86,38 @@
     );
     --m3-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
     --m3-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+
+    --m3-timing-function-zeno: 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
+    );
   }
 }
 /* Not tokens because they may be dynamically get/set and aren't generally constant */
@@ -92,11 +126,6 @@
   inherits: true;
   initial-value: 0;
 }
-@property --m3v-density {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 0;
-}
 :root {
   --m3v-background: var(--m3c-surface);
 }
@@ -346,3 +375,67 @@ const optimizedSmallResult = createCSSEaseOptimized(testInput, 0.01);
 console.log("Optimized result (relaxed threshold 0.01):");
 console.log(optimizedSmallResult);
 */
+/* Zeno timing function derived from this code:
+// 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);
+*/

package/package/nav/NavCMLXItem.svelte

@@ -60,6 +60,7 @@
   }
 
   @mixin --cmlxi-vertical {
+    flex-direction: column;
     .content {
       flex-direction: column;
       text-align: center;
@@ -132,6 +133,7 @@
     &:is(button) {
       background: none;
       border: none;
+      padding: 0;
       cursor: pointer;
     }
 

package/package/nav/Tabs.svelte

@@ -146,7 +146,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package/nav/TabsLink.svelte

@@ -124,7 +124,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package/nav/VariableTabs.svelte

@@ -217,7 +217,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package/nav/VariableTabsLink.svelte

@@ -185,7 +185,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -44,22 +44,24 @@
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/flubber": "^0.4.0",
+    "@types/node": "^24.10.1",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.1",
-    "fast-glob": "^3.3.3",
     "flubber": "^0.4.2",
     "globals": "^16.5.0",
+    "m3-svelte": "link:",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
     "svelte": "^5.45.6",
     "svelte-check": "^4.3.4",
     "svelte-highlight": "^7.9.0",
+    "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.6",
-    "vite-plugin-functions-mixins": "^0.1.1",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
+    "vite-plugin-functions-mixins": "^0.4.0",
     "vite-plugin-token-shaker": "^0.0.3"
   },
   "peerDependencies": {