m3-svelte 4.1.0 → 4.3.0

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.3.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": {