m3-svelte 6.0.0 → 6.0.2

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>
@@ -67,17 +60,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: calc(5rem + (var(--m3v-density) * 0.25rem));
+    min-height: --m3-density(5rem);
     min-width: 15rem;
   }
   textarea {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     position: absolute;
     inset: 0;
     width: 100%;
@@ -91,13 +78,7 @@
     resize: none;
   }
   label {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     position: absolute;
     inset-inline-start: 0.75rem;
     top: 50%;
@@ -112,16 +93,10 @@
       color: var(--error, var(--m3c-primary));
     }
     &:is(textarea:disabled ~ label) {
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      color: --translucent(var(--m3c-on-surface), 0.38);
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
-      
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+      @apply --m3-body-small;
       top: 0;
     }
     pointer-events: none;
@@ -172,17 +147,16 @@
   }
 
   textarea:disabled {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ .layer {
-    border-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    border-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 </style>

package/package/forms/_picker/CalendarPicker.svelte

@@ -58,13 +58,7 @@
     gap: 0.25rem;
   }
   .day {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+    @apply --m3-body-small;
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;

package/package/forms/_picker/FocusPicker.svelte

@@ -35,13 +35,7 @@
     margin-bottom: 1.25rem;
   }
   button {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     display: inline-flex;
     align-items: center;
     height: 3rem;

package/package/forms/_picker/Header.svelte

@@ -108,17 +108,11 @@
   }
   button:disabled {
     cursor: auto;
-    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface-variant), 0.38);
   }
 
   .chooser {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     flex-grow: 1;
   }
   .chooser :global(svg) {

package/package/forms/_picker/Item.svelte

@@ -30,13 +30,7 @@
 
 <style>
   .item {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+    @apply --m3-body-small;
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;
@@ -53,7 +47,7 @@
   }
   button:disabled {
     cursor: auto;
-    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface-variant), 0.38);
   }
   .today {
     border: solid 1px var(--m3c-primary);

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/recommended-styles.css

@@ -32,7 +32,7 @@
 }
 
 [placeholder]::placeholder {
-  color: oklab(from var(--m3c-on-background) l a b / 0.5);
+  color: --translucent(var(--m3c-on-background), 0.5);
   opacity: 1;
 }
 ::selection {

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 {
@@ -11,20 +13,20 @@
     --m3-elevation-0: none;
     --m3-elevation-1:
     /* Spot */
-      0px 1px 2px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      /* Ambient */ 0px 1px 3px 1px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 1px 2px 0px --translucent(var(--m3c-shadow), 0.3),
+      /* Ambient */ 0px 1px 3px 1px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-2:
-      0px 1px 2px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 2px 6px 2px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 1px 2px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 2px 6px 2px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-3:
-      0px 1px 3px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 4px 8px 3px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 1px 3px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 4px 8px 3px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-4:
-      0px 2px 3px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 6px 10px 4px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 2px 3px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 6px 10px 4px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-5:
-      0px 4px 4px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 8px 12px 6px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 4px 4px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 8px 12px 6px --translucent(var(--m3c-shadow), 0.15);
 
     /* Shapes */
     --m3-shape-none: 0;
@@ -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/misc/tailwind-styles.css

@@ -125,139 +125,49 @@
 }
 
 @utility m3-font-display-large {
-  
-  font-family: var(--m3-font);
-  font-size: 3.563rem;
-  line-height: 1.123;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-display-large;
 }
 @utility m3-font-display-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 2.813rem;
-  line-height: 1.156;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-display-medium;
 }
 @utility m3-font-display-small {
-  
-  font-family: var(--m3-font);
-  font-size: 2.25rem;
-  line-height: 1.222;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-display-small;
 }
 @utility m3-font-headline-large {
-  
-  font-family: var(--m3-font);
-  font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-headline-large;
 }
 @utility m3-font-headline-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 1.75rem;
-  line-height: 1.286;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-headline-medium;
 }
 @utility m3-font-headline-small {
-  
-  font-family: var(--m3-font);
-  font-size: 1.5rem;
-  line-height: 1.333;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-headline-small;
 }
 @utility m3-font-title-large {
-  
-  font-family: var(--m3-font);
-  font-size: 1.375rem;
-  line-height: 1.273;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-title-large;
 }
 @utility m3-font-title-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 500;
-
+  @apply --m3-title-medium;
 }
 @utility m3-font-title-small {
-  
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+  @apply --m3-title-small;
 }
 @utility m3-font-label-large {
-  
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+  @apply --m3-label-large;
 }
 @utility m3-font-label-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+  @apply --m3-label-medium;
 }
 @utility m3-font-label-small {
-  
-  font-family: var(--m3-font);
-  font-size: 0.688rem;
-  line-height: 1.455;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+  @apply --m3-label-small;
 }
 @utility m3-font-body-large {
-  
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-body-large;
 }
 @utility m3-font-body-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.016rem;
-  font-weight: 400;
-
+  @apply --m3-body-medium;
 }
 @utility m3-font-body-small {
-  
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+  @apply --m3-body-small;
 }
 
 @layer base {

package/package/nav/NavCMLX.svelte

@@ -41,65 +41,35 @@
   .m3-container {
     display: flex;
     &.compact {
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: space-evenly;
-  
+      @apply --cmlx-compact;
     }
     &.medium {
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: center;
-  
+      @apply --cmlx-medium;
     }
     &.large {
-      
-    flex-direction: column;
-    gap: 0.25rem;
-    width: 6rem;
-  
+      @apply --cmlx-large;
     }
     &.extra-large {
-      
-    flex-direction: column;
-    padding-block: 1.25rem;
-    min-width: 13.75rem;
-    max-width: 22.5rem;
-  
+      @apply --cmlx-extra-large;
     }
   }
 
   .m3-container.auto {
     @media (width < 37.5rem) {
       /* Compact */
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: space-evenly;
-  
+      @apply --cmlx-compact;
     }
     @media (37.5rem <= width < 52.5rem) {
       /* Medium */
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: center;
-  
+      @apply --cmlx-medium;
     }
     @media (52.5rem <= width < 100rem) {
       /* Large */
-      
-    flex-direction: column;
-    gap: 0.25rem;
-    width: 6rem;
-  
+      @apply --cmlx-large;
     }
     @media (100rem <= width) {
       /* Extra large */
-      
-    flex-direction: column;
-    padding-block: 1.25rem;
-    min-width: 13.75rem;
-    max-width: 22.5rem;
-  
+      @apply --cmlx-extra-large;
     }
   }
 </style>