m3-svelte 5.15.4 → 6.0.0

package/package/forms/Slider.svelte

@@ -14,7 +14,7 @@
     size = "xs",
     leadingIcon,
     trailingIcon,
-    stops: _stops = false,
+    stops = false,
     endStops = true,
     vertical = false,
     format = (n: number) => {
@@ -36,8 +36,6 @@
     vertical?: boolean;
     format?: (n: number) => string;
   } & Omit<HTMLInputAttributes, "size"> = $props();
-  // @ts-expect-error deprecated backwards compatibility with ticks
-  let stops = $derived(extra.ticks ? true : _stops);
   let offsetWidth = $state(600);
   let offsetHeight = $state(600);
   let inlineSize = $derived(vertical ? offsetHeight : offsetWidth);
@@ -111,15 +109,17 @@
   {/if}
   <div class="handle"></div>
   {#if showValue}
-    <div class="value m3-font-label-large">{format(value)}</div>
+    <div class="value">{format(value)}</div>
   {/if}
 </div>
 
 <style>
-  :root {
-    --m3-slider-track-out-shape: 0.5rem;
-    --m3-slider-track-in-shape: 0.125rem;
-    --m3-slider-handle-shape: var(--m3-util-rounding-full);
+  @layer tokens {
+    :root {
+      --m3-slider-track-out-shape: 0.5rem;
+      --m3-slider-track-in-shape: 0.125rem;
+      --m3-slider-handle-shape: var(--m3-shape-full);
+    }
   }
 
   .m3-container {
@@ -142,35 +142,35 @@
   .m3-container.xs {
     --track-height: 1rem;
     --handle-height: 2.75rem;
-    --track-radius: var(--m3-util-rounding-small);
+    --track-radius: var(--m3-shape-small);
     --icon-size: 0;
   }
 
   .m3-container.s {
     --track-height: 1.5rem;
     --handle-height: 2.75rem;
-    --track-radius: var(--m3-util-rounding-small);
+    --track-radius: var(--m3-shape-small);
     --icon-size: 0;
   }
 
   .m3-container.m {
     --track-height: 2.5rem;
     --handle-height: 3.25rem;
-    --track-radius: var(--m3-util-rounding-medium);
+    --track-radius: var(--m3-shape-medium);
     --icon-size: 1.5rem;
   }
 
   .m3-container.l {
     --track-height: 3.5rem;
     --handle-height: 4.25rem;
-    --track-radius: var(--m3-util-rounding-large);
+    --track-radius: var(--m3-shape-large);
     --icon-size: 1.5rem;
   }
 
   .m3-container.xl {
     --track-height: 6rem;
     --handle-height: 6.75rem;
-    --track-radius: var(--m3-util-rounding-extra-large);
+    --track-radius: var(--m3-shape-extra-large);
     --icon-size: 2rem;
   }
 
@@ -183,7 +183,7 @@
     margin-inline-start: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
-    color: rgb(var(--m3-scheme-secondary-container));
+    color: var(--m3c-secondary-container);
 
     &:is(.vertical :global(.leading)) {
       translate: -50% 0;
@@ -192,7 +192,7 @@
 
   .m3-container :global(.leading.pop) {
     inset-inline-start: var(--handle-right);
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
 
   .m3-container :global(.trailing) {
@@ -204,7 +204,7 @@
     margin-inline-end: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
 
     &:is(.vertical :global(.trailing)) {
       translate: -50% 0;
@@ -213,7 +213,7 @@
 
   .m3-container :global(.trailing.pop) {
     inset-inline-end: calc(100% - var(--handle-left));
-    color: rgb(var(--m3-scheme-secondary-container));
+    color: var(--m3c-secondary-container);
   }
 
   input {
@@ -244,7 +244,7 @@
     pointer-events: none;
   }
   .track-1 {
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     clip-path: inset(
       0 calc(100% - var(--handle-left)) 0 0 round var(--track-radius)
         var(--m3-slider-track-in-shape) var(--m3-slider-track-in-shape) var(--track-radius)
@@ -266,14 +266,14 @@
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .track-1) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
       @media screen and (forced-colors: active) {
         background-color: canvastext;
       }
     }
   }
   .track-2 {
-    background-color: rgb(var(--m3-scheme-secondary-container));
+    background-color: var(--m3c-secondary-container);
     clip-path: inset(
       0 0 0 var(--handle-right) round var(--m3-slider-track-in-shape) var(--track-radius)
         var(--track-radius) var(--m3-slider-track-in-shape)
@@ -295,7 +295,7 @@
       background-color: canvastext;
     }
     &:is(input:disabled ~ .track-2) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -305,7 +305,7 @@
     position: absolute;
     width: 4px;
     height: 4px;
-    border-radius: var(--m3-util-rounding-full);
+    border-radius: var(--m3-shape-full);
     inset-block-start: 50%;
     inset-inline-start: calc(50% + (100% - 0.5rem - 0.25rem) * var(--x));
     translate: -50% -50%;
@@ -316,15 +316,15 @@
       translate: -50% 50%;
     }
     &:is(.track-1 > .stop) {
-      background-color: rgb(var(--m3-scheme-on-primary));
+      background-color: var(--m3c-on-primary);
       &:is(input:disabled ~ .track-1 > .stop) {
-        background-color: rgb(var(--m3-scheme-inverse-on-surface));
+        background-color: var(--m3c-inverse-on-surface);
       }
     }
     &:is(.track-2 > .stop) {
-      background-color: rgb(var(--m3-scheme-primary));
+      background-color: var(--m3c-primary);
       &:is(input:disabled ~ .track-2 > .stop) {
-        background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+        background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
       }
     }
     pointer-events: none;
@@ -343,16 +343,16 @@
       translate: 0 50%;
     }
     border-radius: 1.25rem;
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
 
     pointer-events: none;
-    transition: inline-size var(--m3-util-easing);
+    transition: inline-size var(--m3-easing);
 
     @media screen and (forced-colors: active) {
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .handle) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -360,13 +360,20 @@
   }
 
   .value {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
 
-    background-color: rgb(var(--m3-scheme-inverse-surface));
-    color: rgb(var(--m3-scheme-inverse-on-surface));
+    background-color: var(--m3c-inverse-surface);
+    color: var(--m3c-inverse-on-surface);
     width: 3rem;
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
@@ -380,7 +387,7 @@
 
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--m3-util-easing);
+    transition: opacity var(--m3-easing);
     z-index: 1;
     @media screen and (forced-colors: active) {
       border: 2px solid selecteditem;
@@ -395,7 +402,7 @@
 
   input:focus-visible ~ .handle {
     outline: solid;
-    outline-color: rgb(var(--m3-scheme-on-secondary-container));
+    outline-color: var(--m3c-on-secondary-container);
     outline-width: 4px;
     outline-offset: 5px;
     z-index: 2;

package/package/forms/Switch.svelte

@@ -68,9 +68,11 @@
 </div>
 
 <style>
-  :root {
-    --m3-switch-track-shape: var(--m3-util-rounding-full);
-    --m3-switch-handle-shape: var(--m3-util-rounding-full);
+  @layer tokens {
+    :root {
+      --m3-switch-track-shape: var(--m3-shape-full);
+      --m3-switch-handle-shape: var(--m3-shape-full);
+    }
   }
   .m3-container {
     display: inline-flex;
@@ -85,10 +87,10 @@
     margin: 0;
     border-radius: var(--m3-switch-track-shape);
 
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-    border: solid 0.125rem rgb(var(--m3-scheme-outline));
+    background-color: var(--m3c-surface-container-highest);
+    border: solid 0.125rem var(--m3c-outline);
     cursor: pointer;
-    transition: var(--m3-util-easing);
+    transition: var(--m3-easing);
   }
   .handle {
     position: absolute;
@@ -96,11 +98,10 @@
     height: 1rem;
     border-radius: var(--m3-switch-handle-shape);
 
-    background-color: rgb(var(--m3-scheme-outline));
-    /* Fallback for those without on on primary */
-    color: rgb(var(--m3-scheme-on-on-primary, var(--m3-scheme-on-primary-container)));
+    background-color: var(--m3c-outline);
+    color: var(--m3c-on-on-primary);
     cursor: pointer;
-    transition: var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-easing-fast-spatial);
 
     left: 0.5rem;
     top: 50%;
@@ -114,13 +115,13 @@
     height: 1rem;
     opacity: 0;
     transition:
-      opacity var(--m3-util-easing-fast-spatial),
-      scale var(--m3-util-easing-fast-spatial);
+      opacity var(--m3-easing-fast-spatial),
+      scale var(--m3-easing-fast-spatial);
   }
   input:not(:checked) + :global(.handle:has(:nth-child(2))) {
     scale: 1.5;
     > :global(svg) {
-      color: rgb(var(--m3-scheme-surface-container-highest));
+      color: var(--m3c-surface-container-highest);
       scale: 0.667;
       opacity: 1;
     }
@@ -135,10 +136,10 @@
     position: absolute;
     width: 3rem;
     height: 3rem;
-    border-radius: var(--m3-util-rounding-full);
+    border-radius: var(--m3-shape-full);
 
     cursor: pointer;
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
 
     left: 1rem;
     top: 50%;
@@ -150,26 +151,26 @@
 
   .m3-container:hover > input:not(:checked):not(:disabled) + .handle,
   .m3-container:active > input:not(:checked):not(:disabled) + .handle {
-    background-color: rgb(var(--m3-scheme-on-surface-variant));
+    background-color: var(--m3c-on-surface-variant);
   }
   .m3-container:hover > input:enabled:checked + .handle,
   .m3-container > input:enabled:checked:is(:global(:active, :focus-visible)) + .handle {
-    background-color: rgb(var(--m3-scheme-primary-container));
-    color: rgb(var(--m3-scheme-on-primary-container));
+    background-color: var(--m3c-primary-container);
+    color: var(--m3c-on-primary-container);
   }
   .m3-container:hover > input ~ .hover {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
   }
   .m3-container:hover > input:checked ~ .hover {
-    background-color: rgb(var(--m3-scheme-primary) / 0.08);
+    background-color: oklab(from var(--m3c-primary) l a b / 0.08);
   }
 
   input:checked {
-    background-color: rgb(var(--m3-scheme-primary));
-    border-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
+    border-color: var(--m3c-primary);
   }
   input:checked + .handle {
-    background-color: rgb(var(--m3-scheme-on-primary));
+    background-color: var(--m3c-on-primary);
     scale: 1.5;
     left: 1.75rem;
   }
@@ -188,23 +189,23 @@
   }
 
   input:disabled {
-    background-color: rgb(var(--m3-scheme-surface-container-highest) / 0.12);
-    border-color: rgb(var(--m3-scheme-outline) / 0.12);
+    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);
     cursor: auto;
   }
   input:disabled:checked {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
     border-color: transparent;
   }
   input:disabled + .handle {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     cursor: auto;
   }
   input:disabled:checked + .handle {
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
   }
   input:disabled:checked + .handle > :global(svg) {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   input:disabled ~ .hover {
     display: none;

package/package/forms/TextField.svelte

@@ -35,7 +35,7 @@
   class:error
 >
   <input
-    class="focus-none m3-font-body-large"
+    class="focus-none"
     placeholder=" "
     bind:value
     onkeydown={(e) => e.key == "Enter" && enter?.()}
@@ -43,10 +43,8 @@
     {disabled}
     {required}
     {...extra}
-    defaultValue={extra.defaultValue}
   />
-  <!-- TODO/deprecated: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
-  <label class="m3-font-body-large" for={id}>{label}</label>
+  <label for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}
     <Icon icon={leadingIcon} class="leading" />
@@ -61,19 +59,27 @@
 </div>
 
 <style>
-  :root {
-    /* "textfield" is deprecated */
-    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
+  @layer tokens {
+    :root {
+      --m3-field-filled-shape: var(--m3-shape-extra-small);
+    }
   }
 
   .m3-container {
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: calc(3.5rem + var(--m3-util-density-term));
+    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
     min-width: 15rem;
   }
   input {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset: 0;
     width: 100%;
@@ -82,30 +88,41 @@
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
     border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-    color: rgb(var(--m3-scheme-on-surface));
+    background-color: var(--m3c-surface-container-highest);
+    color: var(--m3c-on-surface);
   }
   label {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset-inline-start: 1rem;
     top: 50%;
     translate: 0 -50%;
-    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    color: var(--error, var(--m3c-on-surface-variant));
     &:is(input:hover ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      color: var(--error, var(--m3c-on-surface));
     }
     &:is(input:focus ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-primary)));
+      color: var(--error, var(--m3c-primary));
     }
     &:is(input:disabled ~ label) {
-      color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      color: oklab(from var(--m3c-on-surface) l a b / 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;
+
       top: 0.5rem;
       translate: 0 0;
-      font-size: var(--m3-font-body-small-size);
-      line-height: var(--m3-font-body-small-height);
-      letter-spacing: var(--m3-font-body-small-tracking);
     }
     pointer-events: none;
     transition:
@@ -123,7 +140,7 @@
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
+      background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
     }
   }
   .layer::after {
@@ -134,13 +151,13 @@
     bottom: 0;
 
     height: 1px;
-    background-color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    background-color: var(--error, var(--m3c-on-surface-variant));
     transition: all 100ms;
   }
   .m3-container :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     pointer-events: none;
   }
   .m3-container > :global(.leading) {
@@ -166,7 +183,7 @@
 
   input:focus ~ .layer::after {
     height: 0.125rem;
-    background-color: rgb(var(--error, var(--m3-scheme-primary)));
+    background-color: var(--error, var(--m3c-primary));
   }
 
   .leading-icon > input {
@@ -179,21 +196,21 @@
     padding-inline-end: 3.25rem;
   }
   .error {
-    --error: var(--m3-scheme-error);
+    --error: var(--m3c-error);
   }
   .error > input:hover ~ label,
   .error > input:hover ~ .layer {
-    --error: var(--m3-scheme-on-error-container);
+    --error: var(--m3c-on-error-container);
   }
   input:disabled {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.04);
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    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);
   }
   input:disabled ~ .layer::after {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   input:disabled ~ :global(svg) {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
 
   .m3-container {