m3-svelte 6.0.3 → 6.0.4

package/package/forms/DateField.svelte

@@ -66,15 +66,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   use:clickOutside
   style:--anchor-name="--{id}"
 >
-  <input
-    type="date"
-    class="focus-none"
-    {disabled}
-    {required}
-    {id}
-    bind:value
-    {...extra}
-  />
+  <input type="date" class="focus-none" {disabled} {required} {id} bind:value {...extra} />
   <label for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />

package/package/forms/DateFieldOutlined.svelte

@@ -66,15 +66,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   use:clickOutside
   style:--anchor-name="--{id}"
 >
-  <input
-    type="date"
-    class="focus-none"
-    {disabled}
-    {required}
-    {id}
-    bind:value
-    {...extra}
-  />
+  <input type="date" class="focus-none" {disabled} {required} {id} bind:value {...extra} />
   <div class="layer"></div>
   <label for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>

package/package/forms/Slider.svelte

@@ -367,7 +367,7 @@
 
     background-color: var(--m3c-inverse-surface);
     color: var(--m3c-inverse-on-surface);
-    width: 3rem;
+    min-width: 3rem;
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
 

package/package/forms/_picker/Header.svelte

@@ -23,6 +23,11 @@
   const monthClick = () => (currentView = currentView == "calendar" ? "month" : "calendar");
   const getShortMonth = (month: number) =>
     new Date(0, month).toLocaleDateString(undefined, { month: "short" });
+
+  let prevMonth = $derived((focusedMonth - 1 + 12) % 12);
+  let nextMonth = $derived((focusedMonth + 1) % 12);
+  let prevYear = $derived(focusedYear - 1);
+  let nextYear = $derived(focusedYear + 1);
 </script>
 
 <div class="m3-container" class:choosing={currentView != "calendar"}>
@@ -30,22 +35,23 @@
     <button
       type="button"
       class="arrow"
-      onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
+      onclick={() => (focusedMonth = prevMonth)}
+      title={getShortMonth(prevMonth)}
     >
       <Layer />
       <Icon icon={iconLeft} />
     </button>
-    <button
-      type="button"
-      class="chooser"
-      onclick={monthClick}
-      disabled={currentView == "year"}
-    >
+    <button type="button" class="chooser" onclick={monthClick} disabled={currentView == "year"}>
       <Layer />
       {getShortMonth(focusedMonth)}
       <Icon icon={iconDown} />
     </button>
-    <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
+    <button
+      type="button"
+      class="arrow"
+      onclick={() => (focusedMonth = nextMonth)}
+      title={getShortMonth(nextMonth)}
+    >
       <Layer />
       <Icon icon={iconRight} />
     </button>
@@ -55,17 +61,13 @@
       type="button"
       class="arrow"
       disabled={focusedYear <= startYear}
-      onclick={() => focusedYear--}
+      onclick={() => (focusedYear = prevYear)}
+      title={prevYear.toString()}
     >
       <Layer />
       <Icon icon={iconLeft} />
     </button>
-    <button
-      type="button"
-      class="chooser"
-      onclick={yearClick}
-      disabled={currentView == "month"}
-    >
+    <button type="button" class="chooser" onclick={yearClick} disabled={currentView == "month"}>
       <Layer />
       {focusedYear}
       <Icon icon={iconDown} />
@@ -74,7 +76,8 @@
       type="button"
       class="arrow"
       disabled={focusedYear >= endYear}
-      onclick={() => focusedYear++}
+      title={nextYear.toString()}
+      onclick={() => (focusedYear = nextYear)}
     >
       <Layer />
       <Icon icon={iconRight} />

package/package/forms/_picker/Item.svelte

@@ -16,14 +16,7 @@
   } = $props();
 </script>
 
-<button
-  type="button"
-  class="item"
-  {disabled}
-  class:today
-  class:selected
-  {onclick}
->
+<button type="button" class="item" {disabled} class:today class:selected {onclick}>
   <Layer />
   {label}
 </button>

package/package/misc/colors.d.ts

@@ -1,4 +1,13 @@
 import { MaterialDynamicColors, DynamicColor } from "@ktibow/material-color-utilities-nightly";
 export declare const materialColors: MaterialDynamicColors;
+export declare const primaryContainerSubtle: DynamicColor;
+export declare const onPrimaryContainerSubtle: DynamicColor;
+export declare const secondaryContainerSubtle: DynamicColor;
+export declare const onSecondaryContainerSubtle: DynamicColor;
+export declare const tertiaryContainerSubtle: DynamicColor;
+export declare const onTertiaryContainerSubtle: DynamicColor;
+export declare const errorContainerSubtle: DynamicColor;
+export declare const onErrorContainerSubtle: DynamicColor;
 export declare const colors: DynamicColor[];
+/** @deprecated */
 export declare const pairs: DynamicColor[][];

package/package/misc/colors.js

@@ -8,59 +8,60 @@ const onOnPrimary = DynamicColor.fromPalette({
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
 // Custom colors for you to use
-const primaryContainerSubtle = DynamicColor.fromPalette({
+export const primaryContainerSubtle = DynamicColor.fromPalette({
     name: "primary_container_subtle",
     palette: (s) => s.primaryPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onPrimaryContainerSubtle = DynamicColor.fromPalette({
+export const onPrimaryContainerSubtle = DynamicColor.fromPalette({
     name: "on_primary_container_subtle",
     palette: (s) => s.primaryPalette,
     background: () => primaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
-const secondaryContainerSubtle = DynamicColor.fromPalette({
+export const secondaryContainerSubtle = DynamicColor.fromPalette({
     name: "secondary_container_subtle",
     palette: (s) => s.secondaryPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onSecondaryContainerSubtle = DynamicColor.fromPalette({
+export const onSecondaryContainerSubtle = DynamicColor.fromPalette({
     name: "on_secondary_container_subtle",
     palette: (s) => s.secondaryPalette,
     background: () => secondaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
-const tertiaryContainerSubtle = DynamicColor.fromPalette({
+export const tertiaryContainerSubtle = DynamicColor.fromPalette({
     name: "tertiary_container_subtle",
     palette: (s) => s.tertiaryPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onTertiaryContainerSubtle = DynamicColor.fromPalette({
+export const onTertiaryContainerSubtle = DynamicColor.fromPalette({
     name: "on_tertiary_container_subtle",
     palette: (s) => s.tertiaryPalette,
     background: () => tertiaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
-const errorContainerSubtle = DynamicColor.fromPalette({
+export const errorContainerSubtle = DynamicColor.fromPalette({
     name: "error_container_subtle",
     palette: (s) => s.errorPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onErrorContainerSubtle = DynamicColor.fromPalette({
+export const onErrorContainerSubtle = DynamicColor.fromPalette({
     name: "on_error_container_subtle",
     palette: (s) => s.errorPalette,
     background: () => errorContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
 export const colors = [
+    // background is deprecated, need to move filtering it out from utils.ts to here
     ...materialColors.allColors,
     materialColors.shadow(),
     materialColors.scrim(),
@@ -74,6 +75,7 @@ export const colors = [
     errorContainerSubtle,
     onErrorContainerSubtle,
 ];
+/** @deprecated */
 export const pairs = [
     [materialColors.primary(), materialColors.onPrimary()],
     [materialColors.primaryContainer(), materialColors.onPrimaryContainer()],

package/package/misc/easing.js

@@ -1,7 +1,8 @@
 // TODO: update for Expressive
 const createBezierLUT = (points, pointCount = 100) => {
     const lut = [];
-    for (let t = 0; t < 1; t += 1 / pointCount) {
+    for (let n = 0; n <= pointCount; n++) {
+        const t = n / pointCount;
         const a = (1 - t) * (1 - t) * (1 - t);
         const b = (1 - t) * (1 - t) * t;
         const c = (1 - t) * t * t;
@@ -16,9 +17,9 @@ const createEase = (lutOptions) => {
     let lut;
     return (t) => {
         if (!lut)
-            lut = lutOptions.map((args) => createBezierLUT(args)).flat();
+            lut = lutOptions.flatMap((args) => createBezierLUT(args));
         const closestPoint = lut.find((p) => p[0] >= t);
-        const closestY = closestPoint ? closestPoint[1] : 1;
+        const closestY = closestPoint[1];
         return closestY;
     };
 };

package/package/misc/recommended-styles.css

@@ -32,7 +32,7 @@
 }
 
 [placeholder]::placeholder {
-  color: --translucent(var(--m3c-on-background), 0.5);
+  color: --translucent(var(--m3c-on-surface), 0.5);
   opacity: 1;
 }
 ::selection {

package/package/misc/unocss-preset.d.ts

@@ -0,0 +1,3 @@
+import { type Preset } from "unocss";
+declare const _default: () => Preset<object>;
+export default _default;

package/package/misc/unocss-preset.js

@@ -0,0 +1,85 @@
+import { symbols } from "unocss";
+import { colors } from "./colors";
+const easings = ["-fast-spatial", "-spatial", "-slow-spatial", "-fast", "", "-slow"];
+const fontClasses = [
+    "display-large",
+    "display-medium",
+    "display-small",
+    "headline-large",
+    "headline-medium",
+    "headline-small",
+    "title-large",
+    "title-medium",
+    "title-small",
+    "label-large",
+    "label-medium",
+    "label-small",
+    "body-large",
+    "body-medium",
+    "body-small",
+];
+const preset = {
+    name: "m3-svelte",
+    theme: {
+        breakpoints: {
+            m: "37.5rem", // ≅ sm
+            x: "52.5rem", // expanded; ≅ md
+            l: "75rem", // ≅ lg, xl
+            xl: "100rem", // ≅ 2xl
+        },
+        container: {
+            maxWidth: {
+                m: "37.5rem", // ≅ sm
+                x: "52.5rem", // expanded; ≅ md
+                l: "75rem", // ≅ lg, xl
+                xl: "100rem",
+            },
+        },
+        spacing: {
+            DEFAULT: "0.25rem",
+        },
+        fontFamily: {
+            sans: "var(--m3-font)",
+            mono: "var(--m3-font-mono)",
+        },
+        boxShadow: {
+            "1": "var(--m3-elevation-1)",
+            "2": "var(--m3-elevation-2)",
+            "3": "var(--m3-elevation-3)",
+            "4": "var(--m3-elevation-4)",
+            "5": "var(--m3-elevation-5)",
+        },
+        borderRadius: {
+            xs: "var(--m3-shape-extra-small)", // 4px
+            sm: "var(--m3-shape-small)", // 8px
+            md: "var(--m3-shape-medium)", // 12px
+            lg: "var(--m3-shape-large)", // 16px
+            xl: "var(--m3-shape-extra-large)", // 28px
+        },
+        colors: {
+            ...Object.fromEntries(colors.map((c) => [
+                c.name.replaceAll("_", "-"),
+                `var(--m3c-${c.name.replaceAll("_", "-")})`,
+            ])),
+            "v-background": "var(--m3v-background)",
+        },
+    },
+    rules: [
+        ...easings.map((e) => [
+            `transition${e}`,
+            {
+                "transition-timing-function": `var(--m3-timing-function${e})`,
+                "transition-duration": `var(--m3-duration${e})`,
+            },
+        ]),
+        ...fontClasses.map((c) => [`m3-font-${c}`, { [symbols.body]: `@apply --m3-${c}` }]),
+    ],
+    preflights: [
+        {
+            getCSS: () => `:root {
+  box-sizing: border-box;
+}`,
+        },
+    ],
+};
+export default () => preset;

package/package/misc/utils.d.ts

@@ -1,6 +1,3 @@
 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: DynamicScheme, dark: DynamicScheme) => string;
+export declare const genCSS: (light: DynamicScheme, dark: DynamicScheme, cs?: import("@ktibow/material-color-utilities-nightly").DynamicColor[]) => string;
 export declare const parseSize: (size: string) => number;

package/package/misc/utils.js

@@ -1,18 +1,16 @@
 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) => {
+// default cs value is deprecated
+export const genCSS = (light, dark, cs = colors) => {
     const genColorVariable = (name, argb) => {
         const kebabCase = name.replaceAll("_", "-");
         const hex = argb.toString(16).slice(-6);
         return `    --m3c-${kebabCase}: #${hex};`;
     };
-    const lightColors = colors
+    const lightColors = cs
         .map((color) => genColorVariable(color.name, color.getArgb(light)))
         .join("\n");
-    const darkColors = colors
+    const darkColors = cs
         .map((color) => genColorVariable(color.name, color.getArgb(dark)))
         .join("\n");
     return `@media (prefers-color-scheme: light) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -29,6 +29,10 @@
     },
     "./misc/tailwind-styles.css": {
       "style": "./package/misc/tailwind-styles.css"
+    },
+    "./misc/unocss-preset": {
+      "types": "./package/misc/unocss-preset.d.ts",
+      "import": "./package/misc/unocss-preset.js"
     }
   },
   "dependencies": {
@@ -43,23 +47,22 @@
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/flubber": "^0.4.0",
-    "@types/node": "^25.0.2",
+    "@types/node": "^25.0.3",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.1",
-    "flubber": "^0.4.2",
     "globals": "^16.5.0",
     "m3-svelte": "link:",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.16",
     "svelte": "^5.46.0",
-    "svelte-check": "^4.3.4",
+    "svelte-check": "^4.3.5",
     "svelte-highlight": "^7.9.0",
     "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0",
+    "typescript-eslint": "^8.50.1",
+    "unocss": "^66.5.10",
     "vite": "^7.3.0",
     "vite-plugin-functions-mixins": "^0.4.0",
     "vite-plugin-token-shaker": "^0.0.3"