m3-svelte 4.0.0-beta.3 → 4.1.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>
@@ -170,7 +170,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

@@ -25,7 +25,13 @@
     text,
     ...extra
   }: {
-    color?: "primary" | "surface" | "secondary" | "tertiary";
+    color?:
+      | "primary-container"
+      | "secondary-container"
+      | "tertiary-container"
+      | "primary"
+      | "secondary"
+      | "tertiary";
     elevation?: "normal" | "lowered" | "none";
     click: () => void;
   } & ContentProps &
@@ -100,21 +106,26 @@
   }
 
   .color-primary {
-    background-color: rgb(var(--m3-scheme-primary-container));
-    color: rgb(var(--m3-scheme-on-primary-container));
+    background-color: rgb(var(--m3-scheme-primary));
+    color: rgb(var(--m3-scheme-on-primary));
   }
-  .color-surface {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    color: rgb(var(--m3-scheme-primary));
+  .color-secondary {
+    background-color: rgb(var(--m3-scheme-secondary));
+    color: rgb(var(--m3-scheme-on-secondary));
   }
-  .color-surface.elevation-normal {
-    background-color: rgb(var(--m3-scheme-surface-container-high));
+  .color-tertiary {
+    background-color: rgb(var(--m3-scheme-tertiary));
+    color: rgb(var(--m3-scheme-on-tertiary));
   }
-  .color-secondary {
+  .color-primary-container {
+    background-color: rgb(var(--m3-scheme-primary-container));
+    color: rgb(var(--m3-scheme-on-primary-container));
+  }
+  .color-secondary-container {
     background-color: rgb(var(--m3-scheme-secondary-container));
     color: rgb(var(--m3-scheme-on-secondary-container));
   }
-  .color-tertiary {
+  .color-tertiary-container {
     background-color: rgb(var(--m3-scheme-tertiary-container));
     color: rgb(var(--m3-scheme-on-tertiary-container));
   }

package/package/buttons/FAB.svelte.d.ts

@@ -10,7 +10,7 @@ type ContentProps = {
     text?: undefined;
 };
 type $$ComponentProps = {
-    color?: "primary" | "surface" | "secondary" | "tertiary";
+    color?: "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary";
     elevation?: "normal" | "lowered" | "none";
     click: () => void;
 } & ContentProps & HTMLButtonAttributes;

package/package/index.d.ts

@@ -1,10 +1,8 @@
-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/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,8 @@
-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/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);
       });
     };
 
@@ -171,11 +167,9 @@
       }
     }
 
-    &:focus-visible > .tint {
-      opacity: 0.12;
-    }
-
-    &:active > .ripple-container.broken + .tint {
+    &:is(:global(input:focus-visible + label)) > .tint,
+    &:focus-visible > .tint,
+    &:active > .tint {
       opacity: 0.12;
     }
   }

package/package/misc/_ripplesimple.svelte

@@ -21,10 +21,8 @@
       }
     }
 
-    &:focus-visible > .tint {
-      opacity: 0.12;
-    }
-
+    &:is(:global(input:focus-visible + label)) > .tint,
+    &:focus-visible > .tint,
     &:active > .tint {
       opacity: 0.12;
     }

package/package/misc/utils.d.ts

@@ -1,3 +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[][];
@@ -5,5 +6,5 @@ export declare const colors: Color[];
 /**
  * @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,3 +1,4 @@
+import { MaterialDynamicColors, } from "@ktibow/material-color-utilities-nightly";
 export const pairs = [
     ["primary", "onPrimary"],
     ["primaryContainer", "onPrimaryContainer"],
@@ -62,13 +63,13 @@ export const genCSS = (light, dark) => {
         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((name) => genColorVariable(name, MaterialDynamicColors[name].getArgb(light)))
         .join("\n");
-    const darkColors = Object.entries(dark)
-        .map(([name, argb]) => genColorVariable(name, argb))
+    const darkColors = colors
+        .map((name) => genColorVariable(name, MaterialDynamicColors[name].getArgb(dark)))
         .join("\n");
-    const colors = `@media (prefers-color-scheme: light) {
+    return `@media (prefers-color-scheme: light) {
   :root {
     color-scheme: light;
   }
@@ -84,7 +85,6 @@ ${lightColors}
 ${darkColors}
   }
 }`;
-    return colors;
 };
 export const parseSize = (size) => (size.endsWith("px")
     ? +size.slice(0, -2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.0.0-beta.3",
+  "version": "4.1.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.11748493074137",
+    "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;
-};