m3-svelte 4.1.0 → 4.2.0

package/package/buttons/Button.svelte

@@ -92,7 +92,10 @@
     gap: 0.5rem;
     padding: 0 1rem;
     border-radius: var(--m3-button-shape);
-    transition: all 200ms;
+    transition:
+      border-radius var(--m3-util-easing-fast-spatial),
+      background-color var(--m3-util-easing-fast),
+      color var(--m3-util-easing-fast);
 
     align-items: center;
     justify-content: center;
@@ -146,7 +149,7 @@
     }
     &.outlined:not(:disabled, :global(input:disabled) + label) {
       outline-color: rgb(var(--m3-scheme-outline));
-      color: rgb(var(--m3-scheme-primary));
+      color: rgb(var(--m3-scheme-on-surface-variant));
       &:is(:global(input:checked) + label) {
         outline-color: rgb(var(--m3-scheme-inverse-surface));
         background-color: rgb(var(--m3-scheme-inverse-surface));

package/package/buttons/FAB.svelte

@@ -67,7 +67,6 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 200ms;
   }
 
   .elevation-normal {

package/package/containers/MenuItem.svelte

@@ -44,7 +44,6 @@
 
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
   }
   .icon {
     width: 1.5rem;

package/package/containers/Snackbar.svelte

@@ -19,6 +19,7 @@
   import iconX from "@ktibow/iconset-material-symbols/close";
   import Icon from "../misc/_icon.svelte";
   import SnackbarItem from "./SnackbarItem.svelte";
+  import Layer from "../misc/Layer.svelte";
 
   type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 
@@ -63,6 +64,7 @@
               snackbar = undefined;
             }}
           >
+            <Layer />
             <Icon icon={iconX} />
           </button>
         {/if}
@@ -92,10 +94,9 @@
     border: none;
 
     background-color: transparent;
-    color: rgb(var(--text));
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    position: relative;
   }
   button :global(svg) {
     width: 1.5rem;
@@ -103,21 +104,12 @@
   }
 
   .action {
-    --text: var(--m3-scheme-inverse-primary);
+    color: var(--m3-scheme-inverse-primary);
     padding: 0 0.5rem;
   }
   .close {
-    --text: var(--m3-scheme-inverse-on-surface);
+    color: var(--m3-scheme-inverse-on-surface);
     padding: 0 0.75rem;
     margin-right: -1rem;
   }
-  @media (hover: hover) {
-    button:hover {
-      background-color: rgb(var(--text) / 0.08);
-    }
-  }
-  button:focus-visible,
-  button:active {
-    background-color: rgb(var(--text) / 0.12);
-  }
 </style>

package/package/forms/Checkbox.svelte

@@ -55,7 +55,7 @@
     inset: 0.6875rem;
     border-radius: 0.125rem;
     border: solid 0.125rem currentColor;
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -65,11 +65,11 @@
     color: rgb(var(--m3-scheme-on-primary));
     opacity: 0;
     pointer-events: none;
-    transition: opacity 200ms;
+    transition: var(--m3-util-easing-fast);
     path {
       stroke-dasharray: 20.874 20.874;
       stroke-dashoffset: 20.874;
-      transition: stroke-dashoffset 0ms 200ms;
+      transition: stroke-dashoffset 0ms 300ms;
     }
   }
 
@@ -88,7 +88,7 @@
     opacity: 1;
     path {
       stroke-dashoffset: 0;
-      transition: stroke-dashoffset 200ms;
+      transition: stroke-dashoffset var(--m3-util-easing-slow);
     }
   }
 

package/package/forms/Chip.svelte

@@ -71,7 +71,7 @@
     position: relative;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast);
   }
 
   .m3-container > :global(:is(.ripple-container, .tint)) {

package/package/forms/CircularProgress.svelte

@@ -32,6 +32,6 @@
   }
   circle {
     stroke-dashoffset: calc((var(--percent) / -100 + 1px) * 125.66);
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast);
   }
 </style>

package/package/forms/CircularProgressIndeterminate.svelte

@@ -30,7 +30,7 @@
     animation: progressRotate 2.2s infinite linear;
   }
   circle {
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast);
     animation: progressSize 2.2s infinite linear;
   }
   @keyframes progressRotate {

package/package/forms/LinearProgress.svelte

@@ -27,7 +27,7 @@
   }
   .percent {
     background-color: rgb(var(--m3-scheme-primary));
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast);
     border-radius: var(--m3-linear-progress-shape);
   }
 

package/package/forms/RadioAnim1.svelte

@@ -51,7 +51,7 @@
     height: 1.25rem;
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
-    transition: all 0.3s;
+    transition: border var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -63,7 +63,7 @@
     scale: 0;
     border-radius: var(--m3-util-rounding-full);
     background-color: currentColor;
-    transition: all 0.3s;
+    transition: scale var(--m3-util-easing-fast-spatial);
     -webkit-tap-highlight-color: transparent;
   }
 

package/package/forms/RadioAnim2.svelte

@@ -51,7 +51,7 @@
     height: 1.25rem;
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
-    transition: all 0.3s;
+    transition: border var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -76,7 +76,7 @@
 
   :global(input:checked) + .layer-container .radio-dot {
     scale: 1;
-    transition: all 0.3s;
+    transition: scale var(--m3-util-easing-fast-spatial);
   }
 
   :global(input:disabled) + .layer-container {

package/package/forms/RadioAnim3.svelte

@@ -51,7 +51,7 @@
     height: 1.25rem;
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
-    transition: all 0.3s;
+    transition: border var(--m3-util-easing-fast);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -62,7 +62,7 @@
     height: 1rem;
     border-radius: var(--m3-util-rounding-full);
     outline: solid 0 currentColor;
-    transition: all 0.3s;
+    transition: var(--m3-util-easing);
     -webkit-tap-highlight-color: transparent;
   }
 

package/package/forms/Slider.svelte

@@ -121,7 +121,7 @@
     background-color: rgb(var(--m3-scheme-primary));
 
     pointer-events: none;
-    transition: width 200ms;
+    transition: width var(--m3-util-easing);
   }
 
   .value {
@@ -142,7 +142,7 @@
 
     opacity: 0;
     pointer-events: none;
-    transition: opacity 200ms;
+    transition: opacity var(--m3-util-easing);
   }
 
   input:focus-visible ~ .thumb {

package/package/forms/SliderTicks.svelte

@@ -154,7 +154,7 @@
     background-color: rgb(var(--m3-scheme-primary));
 
     pointer-events: none;
-    transition: width 200ms;
+    transition: width var(--m3-util-easing);
   }
 
   .value {
@@ -175,7 +175,7 @@
 
     opacity: 0;
     pointer-events: none;
-    transition: opacity 200ms;
+    transition: opacity var(--m3-util-easing);
   }
 
   input:focus-visible ~ .thumb {

package/package/forms/Switch.svelte

@@ -76,7 +76,7 @@
     border: solid 0.125rem rgb(var(--m3-scheme-outline));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms;
+    transition: var(--m3-util-easing);
   }
   .handle {
     position: absolute;
@@ -85,9 +85,11 @@
     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)));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-util-easing-fast-spatial);
 
     left: 0.5rem;
     top: 50%;
@@ -99,7 +101,6 @@
   .handle > :global(svg) {
     width: 1rem;
     height: 1rem;
-    color: rgb(var(--m3-scheme-on-primary-container));
     opacity: 0;
     transition:
       opacity var(--m3-util-easing-fast-spatial),
@@ -113,7 +114,7 @@
 
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all var(--m3-util-easing-fast);
+    transition: var(--m3-util-easing-fast);
 
     left: 1rem;
     top: 50%;
@@ -130,6 +131,7 @@
   .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));
   }
   .m3-container:hover > input ~ .hover {
     background-color: rgb(var(--m3-scheme-on-surface) / 0.08);

package/package/forms/_picker/FocusPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Icon from "../../misc/_icon.svelte";
+  import Layer from "../../misc/Layer.svelte";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
 
   const conditionalScroll = (node: Element, shouldScroll: boolean) => {
@@ -16,6 +17,7 @@
 <div class="m3-container">
   {#each options as { name, selected, activate }}
     <button class="m3-font-body-large" onclick={activate} use:conditionalScroll={selected}>
+      <Layer />
       {#if selected}
         <Icon icon={iconCheck} />
       {/if}
@@ -42,26 +44,16 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     border: none;
-    position: relative;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    position: relative;
   }
-  button :global(svg) {
+  button > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
     position: absolute;
     left: 1rem;
     top: 50%;
-    transform: translateY(-50%);
-  }
-  @media (hover: hover) {
-    button:hover {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
-    }
-  }
-  button:focus-visible,
-  button:active {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+    translate: 0 -50%;
   }
 </style>

package/package/forms/_picker/Header.svelte

@@ -3,6 +3,7 @@
   import iconLeft from "@ktibow/iconset-material-symbols/chevron-left";
   import iconRight from "@ktibow/iconset-material-symbols/chevron-right";
   import iconDown from "@ktibow/iconset-material-symbols/arrow-drop-down";
+  import Layer from "../../misc/Layer.svelte";
 
   let {
     currentView = $bindable(),
@@ -31,6 +32,7 @@
       class="arrow"
       onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
     >
+      <Layer />
       <Icon icon={iconLeft} />
     </button>
     <button
@@ -39,10 +41,12 @@
       onclick={monthClick}
       disabled={currentView == "year"}
     >
+      <Layer />
       {getShortMonth(focusedMonth)}
       <Icon icon={iconDown} />
     </button>
     <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
+      <Layer />
       <Icon icon={iconRight} />
     </button>
   </div>
@@ -53,6 +57,7 @@
       disabled={focusedYear <= startYear}
       onclick={() => focusedYear--}
     >
+      <Layer />
       <Icon icon={iconLeft} />
     </button>
     <button
@@ -61,6 +66,7 @@
       onclick={yearClick}
       disabled={currentView == "month"}
     >
+      <Layer />
       {focusedYear}
       <Icon icon={iconDown} />
     </button>
@@ -70,6 +76,7 @@
       disabled={focusedYear >= endYear}
       onclick={() => focusedYear++}
     >
+      <Layer />
       <Icon icon={iconRight} />
     </button>
   </div>
@@ -79,7 +86,6 @@
   .m3-container {
     display: flex;
     height: 4rem;
-    transition: all 200ms;
     border-bottom: solid 1px transparent;
     flex-shrink: 0;
   }
@@ -97,18 +103,9 @@
     color: rgb(var(--m3-scheme-on-surface-variant));
     border: none;
     padding: 0;
-    transition: all 200ms;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-  }
-  @media (hover: hover) {
-    button:enabled:hover {
-      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
-    }
-  }
-  button:enabled:focus-visible,
-  button:enabled:active {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
+    position: relative;
   }
   button:disabled {
     cursor: auto;

package/package/forms/_picker/Item.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Layer from "../../misc/Layer.svelte";
+
   let {
     disabled,
     today,
@@ -22,6 +24,7 @@
   class:selected
   onclick={click}
 >
+  <Layer />
   {label}
 </button>
 
@@ -34,33 +37,24 @@
     align-items: center;
     justify-content: center;
 
-    --text: var(--m3-scheme-on-surface);
     background-color: transparent;
-    color: rgb(var(--text));
+    color: rgb(var(--m3-scheme-on-surface));
     border: none;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
-  }
-  @media (hover: hover) {
-    button:enabled:hover {
-      background-color: rgb(var(--text) / 0.08);
-    }
-  }
-  button:enabled:focus-visible,
-  button:enabled:active {
-    background-color: rgb(var(--text) / 0.12);
+    transition: var(--m3-util-easing-fast);
+    position: relative;
   }
   button:disabled {
     cursor: auto;
     color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
   }
   .today {
-    border: solid 1px rgb(var(--text));
-    --text: var(--m3-scheme-primary);
+    border: solid 1px rgb(var(--m3-scheme-primary));
+    color: rgb(var(--m3-scheme-primary));
   }
   .selected {
     background-color: rgb(var(--m3-scheme-primary)) !important;
-    --text: var(--m3-scheme-on-primary);
+    color: rgb(var(--m3-scheme-on-primary));
   }
 </style>

package/package/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Icon } from "./misc/_icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
+export * from "./misc/colors.js";
 export * from "./misc/utils.js";
 export * from "./misc/easing.js";
 export { default as Button } from "./buttons/Button.svelte";

package/package/index.js

@@ -1,6 +1,7 @@
 export { default as Icon } from "./misc/_icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
+export * from "./misc/colors.js";
 export * from "./misc/utils.js";
 export * from "./misc/easing.js";
 export { default as Button } from "./buttons/Button.svelte";

package/package/misc/_ripple.svelte

@@ -157,19 +157,20 @@
 
     background-color: currentColor;
     opacity: 0;
-    transition: opacity 200ms;
-  }
+    transition: opacity var(--m3-util-easing-fast);
 
-  :global(:not(input:disabled + label, input:disabled + .layer-container, :disabled)) {
     @media (hover: hover) {
-      &:hover > .tint {
+      &:is(:global(:hover) > .tint):not(
+          :global(input:disabled + label) > .tint,
+          :global(input:disabled + .layer-container) > .tint,
+          :global(:disabled) > .tint
+        ) {
         opacity: 0.08;
       }
     }
-
-    &:is(:global(input:focus-visible + label)) > .tint,
-    &:focus-visible > .tint,
-    &:active > .tint {
+    &:is(:global(input:focus-visible + label) > .tint),
+    &:is(:global(:focus-visible) > .tint),
+    &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
       opacity: 0.12;
     }
   }

package/package/misc/_ripplesimple.svelte

@@ -11,19 +11,20 @@
 
     background-color: currentColor;
     opacity: 0;
-    transition: opacity 200ms;
-  }
+    transition: opacity var(--m3-util-easing-fast);
 
-  :global(:not(input:disabled + label, input:disabled + .layer-container, :disabled)) {
     @media (hover: hover) {
-      &:hover > .tint {
+      &:is(:global(:hover) > .tint):not(
+          :global(input:disabled + label) > .tint,
+          :global(input:disabled + .layer-container) > .tint,
+          :global(:disabled) > .tint
+        ) {
         opacity: 0.08;
       }
     }
-
-    &:is(:global(input:focus-visible + label)) > .tint,
-    &:focus-visible > .tint,
-    &:active > .tint {
+    &:is(:global(input:focus-visible + label) > .tint),
+    &:is(:global(:focus-visible) > .tint),
+    &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
       opacity: 0.12;
     }
   }

package/package/misc/colors.d.ts

@@ -0,0 +1,4 @@
+import { MaterialDynamicColors, DynamicColor } from "@ktibow/material-color-utilities-nightly";
+export declare const materialColors: MaterialDynamicColors;
+export declare const colors: DynamicColor[];
+export declare const pairs: DynamicColor[][];

package/package/misc/colors.js

@@ -0,0 +1,24 @@
+import { MaterialDynamicColors, DynamicColor, ContrastCurve, } from "@ktibow/material-color-utilities-nightly";
+export const materialColors = new MaterialDynamicColors();
+// Custom color role used for switch
+const onOnPrimary = DynamicColor.fromPalette({
+    name: "on_on_primary",
+    palette: (s) => s.primaryPalette,
+    background: () => materialColors.onPrimary(),
+    contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
+});
+export const colors = [...materialColors.allColors, onOnPrimary];
+export const pairs = [
+    [materialColors.onPrimary(), onOnPrimary],
+    [materialColors.primaryContainer(), materialColors.onPrimaryContainer()],
+    [materialColors.secondary(), materialColors.onSecondary()],
+    [materialColors.secondaryContainer(), materialColors.onSecondaryContainer()],
+    [materialColors.tertiary(), materialColors.onTertiary()],
+    [materialColors.tertiaryContainer(), materialColors.onTertiaryContainer()],
+    [materialColors.background(), materialColors.onBackground()],
+    [materialColors.surface(), materialColors.onSurface()],
+    [materialColors.inverseSurface(), materialColors.inverseOnSurface()],
+    [materialColors.surfaceVariant(), materialColors.onSurfaceVariant()],
+    [materialColors.error(), materialColors.onError()],
+    [materialColors.errorContainer(), materialColors.onErrorContainer()],
+];

package/package/misc/utils.d.ts

@@ -1,8 +1,4 @@
 import { type DynamicScheme } from "@ktibow/material-color-utilities-nightly";
-export type Color = "primary" | "onPrimary" | "primaryContainer" | "onPrimaryContainer" | "inversePrimary" | "secondary" | "onSecondary" | "secondaryContainer" | "onSecondaryContainer" | "tertiary" | "onTertiary" | "tertiaryContainer" | "onTertiaryContainer" | "error" | "onError" | "errorContainer" | "onErrorContainer" | "background" | "onBackground" | "surface" | "onSurface" | "surfaceVariant" | "onSurfaceVariant" | "inverseSurface" | "inverseOnSurface" | "outline" | "outlineVariant" | "shadow" | "scrim" | "surfaceDim" | "surfaceBright" | "surfaceContainerLowest" | "surfaceContainerLow" | "surfaceContainer" | "surfaceContainerHigh" | "surfaceContainerHighest" | "surfaceTint";
-export type SerializedScheme = Record<Color, number>;
-export declare const pairs: string[][];
-export declare const colors: Color[];
 /**
  * @returns A string of CSS code with custom properties representing the color scheme values.
  * */

package/package/misc/utils.js

@@ -1,73 +1,21 @@
-import { MaterialDynamicColors, } from "@ktibow/material-color-utilities-nightly";
-export const pairs = [
-    ["primary", "onPrimary"],
-    ["primaryContainer", "onPrimaryContainer"],
-    ["secondary", "onSecondary"],
-    ["secondaryContainer", "onSecondaryContainer"],
-    ["tertiary", "onTertiary"],
-    ["tertiaryContainer", "onTertiaryContainer"],
-    ["background", "onBackground"],
-    ["surface", "onSurface"],
-    ["inverseSurface", "inverseOnSurface"],
-    ["surfaceVariant", "onSurfaceVariant"],
-    ["error", "onError"],
-    ["errorContainer", "onErrorContainer"],
-];
-export const colors = [
-    "primary",
-    "onPrimary",
-    "primaryContainer",
-    "onPrimaryContainer",
-    "inversePrimary",
-    "secondary",
-    "onSecondary",
-    "secondaryContainer",
-    "onSecondaryContainer",
-    "tertiary",
-    "onTertiary",
-    "tertiaryContainer",
-    "onTertiaryContainer",
-    "error",
-    "onError",
-    "errorContainer",
-    "onErrorContainer",
-    "background",
-    "onBackground",
-    "surface",
-    "onSurface",
-    "surfaceVariant",
-    "onSurfaceVariant",
-    "inverseSurface",
-    "inverseOnSurface",
-    "outline",
-    "outlineVariant",
-    "shadow",
-    "scrim",
-    "surfaceDim",
-    "surfaceBright",
-    "surfaceContainerLowest",
-    "surfaceContainerLow",
-    "surfaceContainer",
-    "surfaceContainerHigh",
-    "surfaceContainerHighest",
-    "surfaceTint",
-];
+import {} from "@ktibow/material-color-utilities-nightly";
+import { colors } from "./colors";
 /**
  * @returns A string of CSS code with custom properties representing the color scheme values.
  * */
 export const genCSS = (light, dark) => {
     const genColorVariable = (name, argb) => {
-        const kebabCase = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+        const kebabCase = name.replaceAll("_", "-");
         const red = (argb >> 16) & 255;
         const green = (argb >> 8) & 255;
         const blue = argb & 255;
         return `--m3-scheme-${kebabCase}: ${red} ${green} ${blue};`;
     };
     const lightColors = colors
-        .map((name) => genColorVariable(name, MaterialDynamicColors[name].getArgb(light)))
+        .map((color) => genColorVariable(color.name, color.getArgb(light)))
         .join("\n");
     const darkColors = colors
-        .map((name) => genColorVariable(name, MaterialDynamicColors[name].getArgb(dark)))
+        .map((color) => genColorVariable(color.name, color.getArgb(dark)))
         .join("\n");
     return `@media (prefers-color-scheme: light) {
   :root {

package/package/nav/NavCMLXItem.svelte

@@ -54,7 +54,7 @@
       align-items: center;
       position: relative;
       color: rgb(var(--m3-scheme-on-surface-variant));
-      transition: all var(--m3-util-easing);
+      transition: var(--m3-util-easing);
       &:is(.compact .content, .large .content) {
         flex-direction: column;
         text-align: center;
@@ -109,7 +109,7 @@
       justify-content: center;
       border-radius: var(--m3-util-rounding-full);
       position: relative;
-      transition: all var(--m3-util-easing);
+      transition: var(--m3-util-easing);
     }
     .icon::before {
       position: absolute;

package/package/nav/Tabs.svelte

@@ -71,7 +71,7 @@
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    transition: color var(--m3-util-easing-fast);
   }
   label > :global(svg) {
     width: 1.5rem;
@@ -96,7 +96,7 @@
     height: 0;
     bottom: 0;
     pointer-events: none;
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast-spatial);
   }
   input:checked:nth-of-type(1) ~ .bar {
     left: 0;

package/package/nav/TabsLink.svelte

@@ -69,7 +69,7 @@
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    transition: color var(--m3-util-easing-fast);
   }
   a > :global(svg) {
     width: 1.5rem;
@@ -95,7 +95,7 @@
     left: calc(100% / var(--items) * var(--i));
     bottom: 0;
     pointer-events: none;
-    transition: all 200ms;
+    transition: var(--m3-util-easing-fast-spatial);
   }
 
   .primary > a {

package/package/nav/VariableTabs.svelte

@@ -44,8 +44,8 @@
           },
         ],
         {
-          duration: 300,
-          easing: "ease",
+          duration: 350,
+          easing: "cubic-bezier(0.42, 1.67, 0.21, 0.9)",
         },
       );
     } else {
@@ -59,8 +59,8 @@
           },
         ],
         {
-          duration: 200,
-          easing: "ease",
+          duration: 350,
+          easing: "cubic-bezier(0.42, 1.67, 0.21, 0.9)",
         },
       );
     }
@@ -132,7 +132,7 @@
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    transition: color var(--m3-util-easing-fast);
   }
   label > :global(svg) {
     width: 1.5rem;

package/package/nav/VariableTabsLink.svelte

@@ -130,7 +130,7 @@
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
+    transition: color var(--m3-util-easing-fast);
   }
   a > :global(svg) {
     width: 1.5rem;

package/package/utils/DateField.svelte

@@ -2,8 +2,9 @@
   import { onMount } from "svelte";
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { TransitionConfig } from "svelte/transition";
-  import Icon from "../misc/_icon.svelte";
   import iconCalendar from "@ktibow/iconset-material-symbols/calendar-today-outline";
+  import Icon from "../misc/_icon.svelte";
+  import Layer from "../misc/Layer.svelte";
 
   import DatePickerDocked from "../forms/DatePickerDocked.svelte";
   import { easeEmphasized } from "../misc/easing";
@@ -65,6 +66,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   />
   <label class="m3-font-body-small" for={id}>{name}</label>
   <button type="button" {disabled} onclick={() => (picker = !picker)}>
+    <Layer />
     <Icon icon={iconCalendar} />
   </button>
   {#if picker}
@@ -134,7 +136,6 @@ opacity: ${Math.min(t * 3, 1)};`,
 
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    transition: all 200ms;
   }
 
   .m3-container.disabled {
@@ -161,15 +162,6 @@ opacity: ${Math.min(t * 3, 1)};`,
     z-index: 1;
   }
 
-  @media (hover: hover) {
-    button:enabled:hover {
-      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
-    }
-  }
-  button:enabled:focus-visible,
-  button:enabled:active {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
-  }
   @media (min-width: 37.5rem) {
     .has-js button {
       display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1747426012",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11748493074137",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11748742074820",
     "svelte": "^5.33.2"
   },
   "devDependencies": {