m3-svelte 6.0.0 → 6.0.2

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

@@ -79,13 +79,12 @@
   }
 
   :global(input:disabled) + .layer-container {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: not-allowed;
   }
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/RadioAnim2.svelte

@@ -79,13 +79,12 @@
   }
 
   :global(input:disabled) + .layer-container {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: not-allowed;
   }
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/RadioAnim3.svelte

@@ -79,13 +79,12 @@
   }
 
   :global(input:disabled) + .layer-container {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: not-allowed;
   }
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/Select.svelte

@@ -70,13 +70,7 @@
     }
   }
   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;
     position: absolute;
     top: 0.5rem;
     inset-inline: 1rem;
@@ -94,16 +88,10 @@
   }
 
   select {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     display: flex;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     padding-top: 1rem;
     padding-inline: 1rem;
 
@@ -181,7 +169,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
-    padding-block: calc((calc(3rem + (var(--m3v-density) * 0.25rem)) - 1lh) / 2);
+    padding-block: calc((--m3-density(3rem) - 1lh) / 2);
     &:first-child {
       margin-top: 0.5rem;
     }

package/package/forms/SelectOutlined.svelte

@@ -86,13 +86,7 @@
     transition: all 100ms;
   }
   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;
     position: absolute;
     top: 0;
     inset-inline-start: 0.75rem;
@@ -113,16 +107,10 @@
   }
 
   select {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     display: flex;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     padding-inline: 1rem;
 
     border-radius: var(--m3-field-outlined-shape);
@@ -188,7 +176,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
-    padding-block: calc((calc(3rem + (var(--m3v-density) * 0.25rem)) - 1lh) / 2);
+    padding-block: calc((--m3-density(3rem) - 1lh) / 2);
     &:first-child {
       margin-top: 0.5rem;
     }

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);
@@ -266,7 +265,7 @@
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .track-1) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 0.38);
       @media screen and (forced-colors: active) {
         background-color: canvastext;
       }
@@ -295,7 +294,7 @@
       background-color: canvastext;
     }
     &:is(input:disabled ~ .track-2) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+      background-color: --translucent(var(--m3c-on-surface), 0.12);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -324,7 +323,7 @@
     &:is(.track-2 > .stop) {
       background-color: var(--m3c-primary);
       &:is(input:disabled ~ .track-2 > .stop) {
-        background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+        background-color: --translucent(var(--m3c-on-surface), 0.38);
       }
     }
     pointer-events: none;
@@ -352,7 +351,7 @@
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .handle) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 0.38);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -360,13 +359,7 @@
   }
 
   .value {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -387,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

@@ -159,10 +159,10 @@
     color: var(--m3c-on-primary-container);
   }
   .m3-container:hover > input ~ .hover {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
+    background-color: --translucent(var(--m3c-on-surface), 0.08);
   }
   .m3-container:hover > input:checked ~ .hover {
-    background-color: oklab(from var(--m3c-primary) l a b / 0.08);
+    background-color: --translucent(var(--m3c-primary), 0.08);
   }
 
   input:checked {
@@ -189,23 +189,23 @@
   }
 
   input:disabled {
-    background-color: oklab(from var(--m3c-surface-container-highest) l a b / 0.12);
-    border-color: oklab(from var(--m3c-outline) l a b / 0.12);
+    background-color: --translucent(var(--m3c-surface-container-highest), 0.12);
+    border-color: --translucent(var(--m3c-outline), 0.12);
     cursor: auto;
   }
   input:disabled:checked {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+    background-color: --translucent(var(--m3c-on-surface), 0.12);
     border-color: transparent;
   }
   input:disabled + .handle {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: auto;
   }
   input:disabled:checked + .handle {
     background-color: var(--m3c-surface);
   }
   input:disabled:checked + .handle > :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled ~ .hover {
     display: none;
@@ -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

@@ -69,17 +69,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     min-width: 15rem;
   }
   input {
-    
-  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%;
@@ -92,13 +86,7 @@
     color: var(--m3c-on-surface);
   }
   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: 1rem;
     top: 50%;
@@ -111,16 +99,10 @@
       color: var(--error, var(--m3c-primary));
     }
     &:is(input:disabled ~ label) {
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      color: --translucent(var(--m3c-on-surface), 0.38);
     }
     &:is(input:focus ~ label, input: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.5rem;
       translate: 0 0;
     }
@@ -140,7 +122,7 @@
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
+      background-color: --translucent(var(--m3c-on-surface), 0.08);
     }
   }
   .layer::after {
@@ -203,19 +185,18 @@
     --error: var(--m3c-on-error-container);
   }
   input:disabled {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.04);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled ~ .layer::after {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input: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;
   }
   @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>
@@ -63,17 +56,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%;
@@ -87,13 +74,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: 1rem;
     top: 50%;
@@ -106,16 +87,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.5rem;
       translate: 0 0;
     }
@@ -135,7 +110,7 @@
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
+      background-color: --translucent(var(--m3c-on-surface), 0.08);
     }
   }
   .layer::after {
@@ -177,19 +152,18 @@
     --error: var(--m3c-on-error-container);
   }
   textarea:disabled {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.04);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ .layer::after {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-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;
   }
   @media screen and (forced-colors: active) {
     textarea {

package/package/forms/TextFieldOutlined.svelte

@@ -72,17 +72,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     min-width: 15rem;
   }
   input {
-    
-  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%;
@@ -95,13 +89,7 @@
     color: var(--m3c-on-surface);
   }
   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%;
@@ -116,16 +104,10 @@
       color: var(--error, var(--m3c-primary));
     }
     &:is(input:disabled ~ label) {
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      color: --translucent(var(--m3c-on-surface), 0.38);
     }
     &:is(input:focus ~ label, input: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;
@@ -197,17 +179,16 @@
   }
 
   input:disabled {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled ~ .layer {
-    border-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    border-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input: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>