m3-svelte 4.0.0 → 4.2.0

package/package/buttons/Button.svelte

@@ -9,7 +9,7 @@
 
   // If you want a toggle button, use `for` with an `<input>`.
   type ActionProps =
-    | ({ click: () => void; disabled?: boolean } & HTMLButtonAttributes)
+    | ({ click?: () => void; disabled?: boolean } & HTMLButtonAttributes)
     | ({ href: string } & HTMLAnchorAttributes)
     | ({ for: string } & HTMLLabelAttributes);
   type Props = {
@@ -22,26 +22,24 @@
   let props: Props = $props();
 </script>
 
-{#if "click" in props}
+{#if "for" in props}
   {@const {
     variant = "filled",
-    click,
-    disabled,
+    for: forItem,
     square = false,
     iconType = "none",
     children,
     ...extra
   } = props}
-  <button
-    onclick={click}
-    {disabled}
+  <label
+    for={forItem}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}
   >
     <Layer />
     {@render children()}
-  </button>
+  </label>
 {:else if "href" in props}
   {@const {
     variant = "filled",
@@ -63,21 +61,23 @@
 {:else}
   {@const {
     variant = "filled",
-    for: forItem,
+    click,
+    disabled,
     square = false,
     iconType = "none",
     children,
     ...extra
   } = props}
-  <label
-    for={forItem}
+  <button
+    onclick={click}
+    {disabled}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}
   >
     <Layer />
     {@render children()}
-  </label>
+  </button>
 {/if}
 
 <style>
@@ -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));
@@ -170,7 +173,7 @@
     &:is(:global(input:checked) + label):not(.square) {
       border-radius: var(--m3-util-rounding-medium);
     }
-    &:global(.activated) {
+    &:active {
       border-radius: var(--m3-util-rounding-small) !important;
     }
   }

package/package/buttons/Button.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLButtonAttributes, HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
 type ActionProps = ({
-    click: () => void;
+    click?: () => void;
     disabled?: boolean;
 } & HTMLButtonAttributes) | ({
     href: string;

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,10 +1,9 @@
-export { default as StyleFromScheme } from "./misc/StyleFromScheme.svelte";
 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 * from "./misc/serializeScheme.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";

package/package/index.js

@@ -1,10 +1,9 @@
-export { default as StyleFromScheme } from "./misc/StyleFromScheme.svelte";
 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 * from "./misc/serializeScheme.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";

package/package/misc/_ripple.svelte

@@ -101,8 +101,6 @@
 
       node.appendChild(svg);
 
-      parent.classList.toggle("activated", true);
-
       cancelRipples.push(() => {
         const fade = document.createElementNS("http://www.w3.org/2000/svg", "animate");
         fade.setAttribute("attributeName", "opacity");
@@ -115,8 +113,6 @@
         circle.appendChild(fade);
         fade.beginElement();
         setTimeout(() => svg.remove(), 800);
-
-        parent.classList.toggle("activated", false);
       });
     };
 
@@ -161,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,9 +1,6 @@
-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[];
+import { type DynamicScheme } from "@ktibow/material-color-utilities-nightly";
 /**
  * @returns A string of CSS code with custom properties representing the color scheme values.
  * */
-export declare const genCSS: (light: SerializedScheme, dark: SerializedScheme) => string;
+export declare const genCSS: (light: DynamicScheme, dark: DynamicScheme) => string;
 export declare const parseSize: (size: string) => number;

package/package/misc/utils.js

@@ -1,74 +1,23 @@
-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 = Object.entries(light)
-        .map(([name, argb]) => genColorVariable(name, argb))
+    const lightColors = colors
+        .map((color) => genColorVariable(color.name, color.getArgb(light)))
         .join("\n");
-    const darkColors = Object.entries(dark)
-        .map(([name, argb]) => genColorVariable(name, argb))
+    const darkColors = colors
+        .map((color) => genColorVariable(color.name, color.getArgb(dark)))
         .join("\n");
-    const colors = `@media (prefers-color-scheme: light) {
+    return `@media (prefers-color-scheme: light) {
   :root {
     color-scheme: light;
   }
@@ -84,7 +33,6 @@ ${lightColors}
 ${darkColors}
   }
 }`;
-    return colors;
 };
 export const parseSize = (size) => (size.endsWith("px")
     ? +size.slice(0, -2)

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.0.0",
+  "version": "4.2.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -30,30 +30,29 @@
   "dependencies": {
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1747426012",
-    "@material/material-color-utilities": "^0.3.0",
-    "svelte": "^5.0.0"
+    "@ktibow/material-color-utilities-nightly": "^0.3.11748742074820",
+    "svelte": "^5.33.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
+    "@eslint/compat": "^1.2.9",
+    "@eslint/js": "^9.27.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.0.0",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-svelte": "^3.9.0",
     "fast-glob": "^3.3.3",
-    "globals": "^16.0.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.2",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
+    "globals": "^16.2.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.12",
+    "svelte-check": "^4.2.1",
     "svelte-highlight": "^7.8.3",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.2.6"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5"
   },
   "keywords": [
     "svelte",

package/package/misc/StyleFromScheme.svelte

@@ -1,18 +0,0 @@
-<!--
-  @component
-  @deprecated Directly set styles instead
--->
-<script lang="ts">
-  import type { SerializedScheme } from "./utils";
-  import Styling from "./_styling.svelte";
-  import "./styles.css";
-
-  interface Props {
-    lightScheme: SerializedScheme;
-    darkScheme: SerializedScheme;
-  }
-
-  let { lightScheme, darkScheme }: Props = $props();
-</script>
-
-<Styling {lightScheme} {darkScheme} />

package/package/misc/StyleFromScheme.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { SerializedScheme } from "./utils";
-import "./styles.css";
-interface Props {
-    lightScheme: SerializedScheme;
-    darkScheme: SerializedScheme;
-}
-/** @deprecated Directly set styles instead */
-declare const StyleFromScheme: import("svelte").Component<Props, {}, "">;
-type StyleFromScheme = ReturnType<typeof StyleFromScheme>;
-export default StyleFromScheme;

package/package/misc/_styling.svelte

@@ -1,26 +0,0 @@
-<!--
-  @component
-  @deprecated Directly set styles instead
--->
-<script lang="ts">
-  import { genCSS, type SerializedScheme } from "./utils";
-
-  interface Props {
-    lightScheme: SerializedScheme;
-    darkScheme: SerializedScheme;
-  }
-
-  let { lightScheme, darkScheme }: Props = $props();
-  const hexCode = (argb: number) => "#" + ((argb & 0xffffff) + 0x1000000).toString(16).slice(1);
-  let styling = $derived(genCSS(lightScheme, darkScheme));
-</script>
-
-<svelte:head>
-  <meta name="theme-color" content={hexCode(lightScheme["primary"])} />
-  <meta
-    name="theme-color"
-    media="(prefers-color-scheme: dark)"
-    content={hexCode(darkScheme["primary"])}
-  />
-</svelte:head>
-{@html `<${""}style>${styling}</${""}style>`}

package/package/misc/_styling.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type SerializedScheme } from "./utils";
-interface Props {
-    lightScheme: SerializedScheme;
-    darkScheme: SerializedScheme;
-}
-/** @deprecated Directly set styles instead */
-declare const Styling: import("svelte").Component<Props, {}, "">;
-type Styling = ReturnType<typeof Styling>;
-export default Styling;

package/package/misc/serializeScheme.d.ts

@@ -1,7 +0,0 @@
-import { type DynamicScheme } from "@material/material-color-utilities";
-import { type SerializedScheme } from "./utils";
-/**
- * @description Serializes the {@link DynamicScheme} so that it can be used by {@link StyleFromScheme} and {@link genCSS}.
- * @param scheme The theme generated by material-color-utils.
- * */
-export declare const serializeScheme: (scheme: DynamicScheme) => SerializedScheme;

package/package/misc/serializeScheme.js

@@ -1,13 +0,0 @@
-import { MaterialDynamicColors } from "@material/material-color-utilities";
-import { colors } from "./utils";
-/**
- * @description Serializes the {@link DynamicScheme} so that it can be used by {@link StyleFromScheme} and {@link genCSS}.
- * @param scheme The theme generated by material-color-utils.
- * */
-export const serializeScheme = (scheme) => {
-    const out = {};
-    for (const color of colors) {
-        out[color] = MaterialDynamicColors[color].getArgb(scheme);
-    }
-    return out;
-};