m3-svelte 6.0.2 → 6.0.4

package/package/containers/ListItem.svelte

@@ -16,7 +16,7 @@
     headline = "",
     supporting = "",
     trailing,
-    lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
+    lines: _lines,
     ...props
   }: {
     leading?: Snippet;
@@ -26,6 +26,8 @@
     trailing?: Snippet;
     lines?: number;
   } & ActionProps = $props();
+
+  let lines = $derived(_lines ?? (overline && supporting ? 3 : overline || supporting ? 2 : 1));
 </script>
 
 {#snippet content()}
@@ -78,6 +80,7 @@
 <style>
   .m3-container {
     display: flex;
+    justify-self: stretch;
     padding: 0.5rem 1.5rem 0.5rem 1rem;
     align-items: center;
     gap: 1rem;

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/DatePickerDocked.svelte

@@ -9,7 +9,13 @@
   let {
     date = "",
     clearable,
+    // eslint and svelte disagree
+    // eslint-disable-next-line svelte/no-unused-svelte-ignore
+    // svelte-ignore state_referenced_locally
     focusedMonth = $bindable(parseInt(date.slice(5, 7)) - 1 || now.getMonth()),
+    // eslint and svelte disagree
+    // eslint-disable-next-line svelte/no-unused-svelte-ignore
+    // svelte-ignore state_referenced_locally
     focusedYear = $bindable(parseInt(date.slice(0, 4)) || now.getFullYear()),
     startYear = now.getFullYear() - 50,
     endYear = now.getFullYear() + 10,
@@ -29,10 +35,7 @@
   } = $props();
 
   let currentView: "calendar" | "year" | "month" = $state("calendar");
-  let chosenDate = $state(date);
-  $effect(() => {
-    chosenDate = date;
-  });
+  let chosenDate = $derived(date);
 
   const getLongMonth = (month: number) =>
     new Date(0, month).toLocaleDateString(undefined, { month: "long" });

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/forms/_wavy.d.ts

@@ -1,2 +1,2 @@
-export declare const linear: (amp: number, center: number, from: number, to: number, time: number, cutoffTo?: number) => string;
+export declare const linear: (amp: number, center: number, from: number, to: number, time: number, softTo?: number) => string;
 export declare const trackOpacity: (right: number, x: number) => number;

package/package/forms/_wavy.js

@@ -2,14 +2,14 @@ const frequencyT = (Math.PI * 2) / 1000;
 const frequencyX = (Math.PI * 2) / 40;
 const round2 = (x) => Math.round(x * 100) / 100;
 const round1 = (x) => Math.round(x * 10) / 10;
-export const linear = (amp, center, from, to, time, cutoffTo) => {
+export const linear = (amp, center, from, to, time, softTo) => {
     time = time * frequencyT;
     time %= Math.PI * 2;
     if (from >= to)
         return "";
     let path = "";
     for (let xIterator = from; xIterator <= to; xIterator += 0.5) {
-        const x = cutoffTo ? Math.min(cutoffTo, xIterator) : xIterator;
+        const x = softTo ? Math.min(softTo, xIterator) : xIterator;
         const sinV = Math.sin(x * frequencyX + time);
         const y = sinV * amp + center;
         if (x == from) {

package/package/misc/badge.js

@@ -1,7 +1,7 @@
 export const addBadge = (icon, n) => {
     const { width, height } = icon;
     if (!width || !height)
-        throw new Error("Icon must have icon and height");
+        throw new Error("Icon must have width and height");
     let badge;
     if (n) {
         const x = width - 12;
@@ -21,7 +21,7 @@ export const addBadge = (icon, n) => {
                     "border-radius:var(--m3-shape-full)",
                 ].join(";")}">` +
                 text +
-                `</div>`;
+                `</div></foreignObject>`;
     }
     else {
         badge = `<circle cx="${width - 3}" cy="3" r="3" fill="var(--m3c-error)"/>`;

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

@@ -1,6 +1,6 @@
 import { MaterialDynamicColors, DynamicColor, ContrastCurve, } from "@ktibow/material-color-utilities-nightly";
 export const materialColors = new MaterialDynamicColors();
-// Custom color role used for switch
+// Generates on-on-primary for Switch, read more: https://ktibow.github.io/blog/humanresearch/ononprimary/
 const onOnPrimary = DynamicColor.fromPalette({
     name: "on_on_primary",
     palette: (s) => s.primaryPalette,
@@ -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/nav/VariableTabsLink.svelte

@@ -20,6 +20,7 @@
     }[];
   } & HTMLAnchorAttributes = $props();
 
+  // svelte-ignore state_referenced_locally
   let prevTab = $state(tab);
   let wrapper: HTMLDivElement | undefined = $state();
   $effect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.2",
+  "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": {
@@ -38,29 +42,28 @@
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.0",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/flubber": "^0.4.0",
-    "@types/node": "^24.10.1",
+    "@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.0",
-    "publint": "^0.3.15",
-    "svelte": "^5.45.6",
-    "svelte-check": "^4.3.4",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.16",
+    "svelte": "^5.46.0",
+    "svelte-check": "^4.3.5",
     "svelte-highlight": "^7.9.0",
     "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
+    "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"
   },