m3-svelte 5.4.0 → 5.7.0

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -47,7 +47,7 @@
     {...extra}
     defaultValue={extra.defaultValue}
   ></textarea>
-  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
+  <!-- TODO/deprecated: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
   <div class="layer"></div>
   <label class="m3-font-body-large" for={id}>{label}</label>
   {#if leadingIcon}
@@ -61,7 +61,11 @@
   do this: <TextFieldOutlinedMultiline --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
-    --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-outlined-shape: var(
+      --m3-textfield-outlined-shape,
+      var(--m3-util-rounding-extra-small)
+    );
   }
   .m3-container {
     display: inline-flex;
@@ -78,7 +82,7 @@
     border: none;
     outline: none;
     padding: 1rem;
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     resize: none;
@@ -118,7 +122,7 @@
     position: absolute;
     inset: 0;
     border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {

package/package/forms/WavyLinearProgress.svelte

@@ -26,16 +26,14 @@
   };
 
   onMount(() => {
-    let mounted = true;
     const start = performance.now();
-    const update = () => {
-      if (!mounted) return;
-
+    let id: number;
+    const updateTime = () => {
       time = performance.now() - start;
-      requestAnimationFrame(update);
+      id = requestAnimationFrame(updateTime);
     };
-    update();
-    return () => (mounted = false);
+    updateTime();
+    return () => cancelAnimationFrame(id);
   });
 </script>
 

package/package/index.d.ts

@@ -49,5 +49,6 @@ export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
+export * from "./utils/badge.js";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";

package/package/index.js

@@ -48,5 +48,6 @@ export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
+export * from "./utils/badge.js";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";

package/package/misc/_icon.svelte

@@ -14,6 +14,19 @@
   } = $props();
 </script>
 
-<svg {width} {height} class={clazz} viewBox="0 0 {icon.width} {icon.height}">
+<svg
+  {width}
+  {height}
+  class={clazz}
+  data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
+  viewBox="0 0 {icon.width} {icon.height}"
+>
   {@html icon.body}
 </svg>
+
+<style>
+  /* deprecated: eventually want to just do this for all icons */
+  svg[data-badge] {
+    overflow: visible;
+  }
+</style>

package/package/misc/typing-utils.d.ts

@@ -1,3 +1,6 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLLabelAttributes, HTMLAnchorAttributes, HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
+export type LabelAttrs = HTMLLabelAttributes & Required<Pick<HTMLLabelAttributes, "for">>;
+export type AnchorAttrs = HTMLAnchorAttributes & Required<Pick<HTMLAnchorAttributes, "href">>;
 export type NotButton<T> = Omit<T, "onclick">;
 export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;
+export type DivAttrs = NotButton<HTMLAttributes<HTMLDivElement>>;

package/package/nav/NavCMLXItem.svelte

@@ -106,6 +106,9 @@
           color: rgb(var(--m3-scheme-on-secondary-container));
         }
       }
+      &:is(.large .content) {
+        padding-block: 0.375rem;
+      }
       &:is(.expanded .content) {
         gap: 0.75rem;
       }
@@ -148,7 +151,6 @@
     &.large {
       flex-direction: column;
       min-height: 4rem;
-      padding-block: 0.375rem;
     }
     &.expanded {
       height: 3.5rem;
@@ -229,10 +231,10 @@
       flex-direction: column;
       text-align: center;
       min-height: 4rem;
-      padding-block: 0.375rem;
 
       .content {
         flex-direction: column;
+        padding-block: 0.375rem;
 
         &.selected {
           color: rgb(var(--m3-scheme-secondary));

package/package/utils/badge.d.ts

@@ -0,0 +1,11 @@
+import type { IconifyIcon } from "@iconify/types";
+export declare const addBadge: (icon: IconifyIcon, n?: number) => {
+    body: string;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    hFlip?: boolean;
+    vFlip?: boolean;
+};

package/package/utils/badge.js

@@ -0,0 +1,30 @@
+export const addBadge = (icon, n) => {
+    const { width, height } = icon;
+    if (!width || !height)
+        throw new Error("Icon must have icon and height");
+    let badge;
+    if (n) {
+        const x = width - 12;
+        const y = 14 - 16; // 14 down, 16 up
+        const max = 999;
+        const text = n > max ? `${max}+` : n.toString();
+        badge =
+            `<!--badge--><foreignObject x="${x}" y="${y}" width="40" height="16">` +
+                `<div class="m3-font-label-small" style="${[
+                    "background-color:rgb(var(--m3-scheme-error))",
+                    "color:rgb(var(--m3-scheme-on-error))",
+                    "width:max-content",
+                    "padding-inline:4px",
+                    "border-radius:var(--m3-util-rounding-full)",
+                ].join(";")}">` +
+                text +
+                `</div>`;
+    }
+    else {
+        badge = `<circle cx="${width - 3}" cy="3" r="3" fill="rgb(var(--m3-scheme-error))"/>`;
+    }
+    return {
+        ...icon,
+        body: icon.body + badge,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.4.0",
+  "version": "5.7.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -36,16 +36,16 @@
   "dependencies": {
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1755063979",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11755481233385",
-    "svelte": "^5.38.2"
+    "@ktibow/material-color-utilities-nightly": "^0.3.11756690739504",
+    "svelte": "^5.38.6"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.34.0",
     "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.32.0",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.2",
+    "@sveltejs/kit": "^2.37.0",
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
@@ -55,10 +55,10 @@
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
     "svelte-check": "^4.3.1",
-    "svelte-highlight": "^7.8.3",
+    "svelte-highlight": "^7.8.4",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0",
-    "vite": "^7.1.2"
+    "typescript-eslint": "^8.41.0",
+    "vite": "^7.1.4"
   },
   "keywords": [
     "svelte",