m3-svelte 5.15.5 → 6.0.1

package/package/forms/Select.svelte

@@ -28,7 +28,7 @@
   class:enabled={!extra.disabled}
   style:align-self={width == "auto" ? "start" : undefined}
 >
-  <select class="m3-font-body-large" style:--width={width} bind:value {id} {...extra}>
+  <select style:--width={width} bind:value {id} {...extra}>
     {#each options as { icon, text, ...extra }, i (i)}
       <option class="focus-inset" {...extra}>
         <Layer />
@@ -39,7 +39,7 @@
       </option>
     {/each}
   </select>
-  <label for={id} class="m3-font-body-small">
+  <label for={id}>
     {label}
   </label>
 </div>
@@ -47,8 +47,8 @@
 <style>
   @layer tokens {
     :root {
-      --m3-menu-shape: var(--m3-util-rounding-extra-small);
-      --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
+      --m3-menu-shape: var(--m3-shape-extra-small);
+      --m3-field-filled-shape: var(--m3-shape-extra-small);
     }
   }
 
@@ -56,13 +56,13 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    --secondary-color: rgb(var(--m3-scheme-on-surface-variant));
+    --secondary-color: var(--m3c-on-surface-variant);
     &.enabled {
       &:hover {
-        --secondary-color: rgb(var(--m3-scheme-on-surface));
+        --secondary-color: var(--m3c-on-surface);
       }
       &:focus-within {
-        --secondary-color: rgb(var(--m3-scheme-primary));
+        --secondary-color: var(--m3c-primary);
         select {
           box-shadow: inset 0px -2px var(--secondary-color);
         }
@@ -70,12 +70,13 @@
     }
   }
   label {
+    @apply --m3-body-small;
     position: absolute;
     top: 0.5rem;
     inset-inline: 1rem;
     color: var(--secondary-color);
     pointer-events: none;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
 
   select {
@@ -87,17 +88,18 @@
   }
 
   select {
+    @apply --m3-body-large;
     display: flex;
     align-items: center;
-    height: calc(3.5rem + var(--m3-util-density-term));
-    padding-top: calc(var(--m3-font-body-small-size) * var(--m3-font-body-small-height));
+    height: --m3-density(3.5rem);
+    padding-top: 1rem;
     padding-inline: 1rem;
 
     border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
     transition:
-      background-color var(--m3-util-easing-fast),
-      box-shadow var(--m3-util-easing-fast);
+      background-color var(--m3-easing-fast),
+      box-shadow var(--m3-easing-fast);
 
     border: none;
     position: relative;
@@ -108,7 +110,7 @@
       &:open {
         background-color: color-mix(
           in oklab,
-          rgb(var(--m3-scheme-surface-container-highest)),
+          var(--m3c-surface-container-highest),
           currentColor 8%
         );
       }
@@ -121,16 +123,16 @@
     scale: 1 0.6; /* yes we are squashing the arrow, surely you don't have a problem with that */
     color: var(--secondary-color);
     transition:
-      color var(--m3-util-easing-fast),
-      rotate var(--m3-util-easing-fast);
+      color var(--m3-easing-fast),
+      rotate var(--m3-easing-fast);
   }
   select:open::picker-icon {
     rotate: 180deg;
   }
 
   ::picker(select) {
-    background-color: rgb(var(--m3-scheme-surface-container));
-    box-shadow: var(--m3-util-elevation-2);
+    background-color: var(--m3c-surface-container);
+    box-shadow: var(--m3-elevation-2);
     border-radius: var(--m3-menu-shape);
 
     box-sizing: border-box;
@@ -139,10 +141,10 @@
     interpolate-size: allow-keywords;
     overflow: hidden;
     transition:
-      width var(--m3-util-easing-fast),
-      height var(--m3-util-easing-fast),
-      display var(--m3-util-duration-fast) allow-discrete,
-      overlay var(--m3-util-duration-fast) allow-discrete;
+      width var(--m3-easing-fast),
+      height var(--m3-easing-fast),
+      display var(--m3-duration-fast) allow-discrete,
+      overlay var(--m3-duration-fast) allow-discrete;
 
     border: none;
     cursor: auto;
@@ -152,7 +154,7 @@
     height: auto;
     transition:
       width 500ms linear,
-      height 500ms var(--m3-util-timing-function-emphasized-decel),
+      height 500ms var(--m3-timing-function-emphasized-decel),
       display 500ms allow-discrete,
       overlay 500ms allow-discrete;
   }
@@ -167,13 +169,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
-    padding-block: calc(
-      (
-          3rem + var(--m3-util-density-term) -
-            (var(--m3-font-body-large-size) * var(--m3-font-body-large-height))
-        ) /
-        2
-    );
+    padding-block: calc((--m3-density(3rem) - 1lh) / 2);
     &:first-child {
       margin-top: 0.5rem;
     }
@@ -183,8 +179,8 @@
 
     background-color: transparent;
     &:checked {
-      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);
     }
 
     > *,
@@ -201,7 +197,7 @@
         margin-right: 0.5rem;
       }
       &:not(:checked) > :global(svg) {
-        color: rgb(var(--m3-scheme-on-surface-variant));
+        color: var(--m3c-on-surface-variant);
       }
       &:checked > :global(svg) {
         opacity: 0.8;
@@ -212,8 +208,8 @@
     }
 
     transition:
-      background-color var(--m3-util-easing-fast),
-      color var(--m3-util-easing-fast);
+      background-color var(--m3-easing-fast),
+      color var(--m3-easing-fast);
 
     position: relative;
     cursor: pointer;

package/package/forms/SelectOutlined.svelte

@@ -28,7 +28,7 @@
   class:enabled={!extra.disabled}
   style:align-self={width == "auto" ? "start" : undefined}
 >
-  <select class="m3-font-body-large" style:--width={width} bind:value {id} {...extra}>
+  <select style:--width={width} bind:value {id} {...extra}>
     {#each options as { icon, text, ...extra }, i (i)}
       <option class="focus-inset" {...extra}>
         <Layer />
@@ -40,7 +40,7 @@
     {/each}
   </select>
   <div class="layer"></div>
-  <label for={id} class="m3-font-body-small">
+  <label for={id}>
     {label}
   </label>
 </div>
@@ -48,12 +48,12 @@
 <style>
   /*
   want to customize the label's background?
-  do this: <SelectOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
+  do this: <SelectOutlined --m3v-background="var(--m3c-surface-container)" />
   */
   @layer tokens {
     :root {
-      --m3-menu-shape: var(--m3-util-rounding-extra-small);
-      --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
+      --m3-menu-shape: var(--m3-shape-extra-small);
+      --m3-field-outlined-shape: var(--m3-shape-extra-small);
     }
   }
 
@@ -61,16 +61,16 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    --secondary-color: rgb(var(--m3-scheme-on-surface-variant));
-    --outline-color: rgb(var(--m3-scheme-outline));
+    --secondary-color: var(--m3c-on-surface-variant);
+    --outline-color: var(--m3c-outline);
     &.enabled {
       &:hover {
-        --secondary-color: rgb(var(--m3-scheme-on-surface));
-        --outline-color: rgb(var(--m3-scheme-on-surface));
+        --secondary-color: var(--m3c-on-surface);
+        --outline-color: var(--m3c-on-surface);
       }
       &:focus-within {
-        --secondary-color: rgb(var(--m3-scheme-primary));
-        --outline-color: rgb(var(--m3-scheme-primary));
+        --secondary-color: var(--m3c-primary);
+        --outline-color: var(--m3c-primary);
         .layer {
           border-width: 0.125rem;
         }
@@ -86,15 +86,16 @@
     transition: all 100ms;
   }
   label {
+    @apply --m3-body-small;
     position: absolute;
     top: 0;
     inset-inline-start: 0.75rem;
     translate: 0 -50%;
     color: var(--secondary-color);
-    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
+    background-color: var(--m3v-background);
     padding: 0 0.25rem;
     pointer-events: none;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
 
   select {
@@ -106,14 +107,15 @@
   }
 
   select {
+    @apply --m3-body-large;
     display: flex;
     align-items: center;
-    height: calc(3.5rem + var(--m3-util-density-term));
+    height: --m3-density(3.5rem);
     padding-inline: 1rem;
 
     border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
 
     border: none;
     outline: none;
@@ -128,16 +130,16 @@
     scale: 1 0.6;
     color: var(--secondary-color);
     transition:
-      color var(--m3-util-easing-fast),
-      rotate var(--m3-util-easing-fast);
+      color var(--m3-easing-fast),
+      rotate var(--m3-easing-fast);
   }
   select:open::picker-icon {
     rotate: 180deg;
   }
 
   ::picker(select) {
-    background-color: rgb(var(--m3-scheme-surface-container));
-    box-shadow: var(--m3-util-elevation-2);
+    background-color: var(--m3c-surface-container);
+    box-shadow: var(--m3-elevation-2);
     border-radius: var(--m3-menu-shape);
 
     box-sizing: border-box;
@@ -146,10 +148,10 @@
     interpolate-size: allow-keywords;
     overflow: hidden;
     transition:
-      width var(--m3-util-easing-fast),
-      height var(--m3-util-easing-fast),
-      display var(--m3-util-duration-fast) allow-discrete,
-      overlay var(--m3-util-duration-fast) allow-discrete;
+      width var(--m3-easing-fast),
+      height var(--m3-easing-fast),
+      display var(--m3-duration-fast) allow-discrete,
+      overlay var(--m3-duration-fast) allow-discrete;
 
     border: none;
     cursor: auto;
@@ -159,7 +161,7 @@
     height: auto;
     transition:
       width 500ms linear,
-      height 500ms var(--m3-util-timing-function-emphasized-decel),
+      height 500ms var(--m3-timing-function-emphasized-decel),
       display 500ms allow-discrete,
       overlay 500ms allow-discrete;
   }
@@ -174,13 +176,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
-    padding-block: calc(
-      (
-          3rem + var(--m3-util-density-term) -
-            (var(--m3-font-body-large-size) * var(--m3-font-body-large-height))
-        ) /
-        2
-    );
+    padding-block: calc((--m3-density(3rem) - 1lh) / 2);
     &:first-child {
       margin-top: 0.5rem;
     }
@@ -190,8 +186,8 @@
 
     background-color: transparent;
     &:checked {
-      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);
     }
 
     > *,
@@ -208,7 +204,7 @@
         margin-right: 0.5rem;
       }
       &:not(:checked) > :global(svg) {
-        color: rgb(var(--m3-scheme-on-surface-variant));
+        color: var(--m3c-on-surface-variant);
       }
       &:checked > :global(svg) {
         opacity: 0.8;
@@ -219,8 +215,8 @@
     }
 
     transition:
-      background-color var(--m3-util-easing-fast),
-      color var(--m3-util-easing-fast);
+      background-color var(--m3-easing-fast),
+      color var(--m3-easing-fast);
 
     position: relative;
     cursor: pointer;

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,7 +109,7 @@
   {/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>
 
@@ -120,7 +118,7 @@
     :root {
       --m3-slider-track-out-shape: 0.5rem;
       --m3-slider-track-in-shape: 0.125rem;
-      --m3-slider-handle-shape: var(--m3-util-rounding-full);
+      --m3-slider-handle-shape: var(--m3-shape-full);
     }
   }
 
@@ -144,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;
   }
 
@@ -185,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;
@@ -194,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) {
@@ -206,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;
@@ -215,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 {
@@ -246,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)
@@ -268,14 +266,14 @@
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .track-1) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 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)
@@ -297,7 +295,7 @@
       background-color: canvastext;
     }
     &:is(input:disabled ~ .track-2) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      background-color: --translucent(var(--m3c-on-surface), 0.12);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -307,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%;
@@ -318,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: --translucent(var(--m3c-on-surface), 0.38);
       }
     }
     pointer-events: none;
@@ -345,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: --translucent(var(--m3c-on-surface), 0.38);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -362,13 +360,14 @@
   }
 
   .value {
+    @apply --m3-label-large;
     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);
@@ -382,7 +381,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;
@@ -397,7 +396,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;