m3-svelte 5.3.6 → 5.6.0

package/package/forms/Switch.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
   import Icon from "../misc/_icon.svelte";
+  import type { IconifyIcon } from "@iconify/types";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
+  import iconX from "@ktibow/iconset-material-symbols/close";
   import type { HTMLInputAttributes } from "svelte/elements";
 
   // MUST BE WRAPPED IN A <label>
   let {
     checked = $bindable(false),
     disabled = false,
+    uncheckedIcon = iconX,
+    checkedIcon = iconCheck,
+    icons = "checked",
     ...extra
   }: {
     checked?: boolean;
     disabled?: boolean;
+    uncheckedIcon?: IconifyIcon;
+    checkedIcon?: IconifyIcon;
+    icons?: "checked" | "both" | "none";
   } & HTMLInputAttributes = $props();
 
   let startX: number | undefined = $state();
@@ -49,7 +57,12 @@
     }}
   />
   <div class="handle">
-    <Icon icon={iconCheck} />
+    {#if icons != "none"}
+      <Icon icon={checkedIcon} />
+      {#if icons == "both"}
+        <Icon icon={uncheckedIcon} />
+      {/if}
+    {/if}
   </div>
   <div class="hover"></div>
 </div>
@@ -75,7 +88,6 @@
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     border: solid 0.125rem rgb(var(--m3-scheme-outline));
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing);
   }
   .handle {
@@ -88,7 +100,6 @@
     /* Fallback for those without on on primary */
     color: rgb(var(--m3-scheme-on-on-primary, var(--m3-scheme-on-primary-container)));
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing-fast-spatial);
 
     left: 0.5rem;
@@ -106,6 +117,20 @@
       opacity var(--m3-util-easing-fast-spatial),
       scale var(--m3-util-easing-fast-spatial);
   }
+  input:not(:checked) + :global(.handle:has(:nth-child(2))) {
+    scale: 1.5;
+    > :global(svg) {
+      color: rgb(var(--m3-scheme-surface-container-highest));
+      scale: 0.667;
+      opacity: 1;
+    }
+  }
+
+  input:checked + :global(.handle) > :global(svg:nth-child(2)),
+  input:not(:checked) + :global(.handle) > :global(svg:first-child) {
+    display: none;
+  }
+
   .hover {
     position: absolute;
     width: 3rem;
@@ -113,7 +138,6 @@
     border-radius: var(--m3-util-rounding-full);
 
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing-fast);
 
     left: 1rem;
@@ -124,8 +148,8 @@
     justify-content: center;
   }
 
-  .m3-container:hover > input:enabled + .handle,
-  .m3-container > input:enabled:is(:global(:active, :focus-visible)) + .handle {
+  .m3-container:hover > input:not(:checked):not(:disabled) + .handle,
+  .m3-container:active > input:not(:checked):not(:disabled) + .handle {
     background-color: rgb(var(--m3-scheme-on-surface-variant));
   }
   .m3-container:hover > input:enabled:checked + .handle,

package/package/forms/Switch.svelte.d.ts

@@ -1,7 +1,11 @@
+import type { IconifyIcon } from "@iconify/types";
 import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
     checked?: boolean;
     disabled?: boolean;
+    uncheckedIcon?: IconifyIcon;
+    checkedIcon?: IconifyIcon;
+    icons?: "checked" | "both" | "none";
 } & HTMLInputAttributes;
 declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;

package/package/forms/TextField.svelte

@@ -62,7 +62,8 @@
 
 <style>
   :root {
-    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
   }
 
   .m3-container {
@@ -80,7 +81,7 @@
     border: none;
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     color: rgb(var(--m3-scheme-on-surface));
   }
@@ -118,7 +119,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {
@@ -160,7 +161,6 @@
     border-start-end-radius: 0.25rem;
     border-end-end-radius: 0.25rem;
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 

package/package/forms/TextFieldMultiline.svelte

@@ -57,7 +57,8 @@
 
 <style>
   :root {
-    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
   }
   .m3-container {
     display: inline-flex;
@@ -74,7 +75,7 @@
     border: none;
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     color: rgb(var(--m3-scheme-on-surface));
     resize: none;
@@ -113,7 +114,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {

package/package/forms/TextFieldOutlined.svelte

@@ -66,7 +66,11 @@
   do this: <TextFieldOutlined --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;
@@ -83,7 +87,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));
   }
@@ -122,7 +126,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(input:enabled:hover ~ .layer) {
@@ -157,7 +161,6 @@
     border-start-end-radius: 0.25rem;
     border-end-end-radius: 0.25rem;
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -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/_picker/FocusPicker.svelte

@@ -49,7 +49,6 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     border: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     position: relative;
   }

package/package/forms/_picker/Header.svelte

@@ -103,7 +103,6 @@
     color: rgb(var(--m3-scheme-on-surface-variant));
     border: none;
     padding: 0;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     position: relative;
   }

package/package/forms/_picker/Item.svelte

@@ -40,7 +40,6 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     border: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: var(--m3-util-easing-fast);
     position: relative;

package/package/index.d.ts

@@ -18,34 +18,37 @@ export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export type { SnackbarIn } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
-export { default as LinearProgress } from "./forms/LinearProgress.svelte";
-export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
-export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
-export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
-export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
+export { default as Checkbox } from "./forms/Checkbox.svelte";
+export { default as Chip } from "./forms/Chip.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
 export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
-export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as DateField } from "./forms/DateField.svelte";
 export { default as DateFieldOutlined } from "./forms/DateFieldOutlined.svelte";
+export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
+export { default as LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
+export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
-export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as Switch } from "./forms/Switch.svelte";
+export { default as Select } from "./forms/Select.svelte";
+export { default as SelectOutlined } from "./forms/SelectOutlined.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
+export { default as Switch } from "./forms/Switch.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
 export { default as TextFieldOutlinedMultiline } from "./forms/TextFieldOutlinedMultiline.svelte";
-export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
-export { default as Chip } from "./forms/Chip.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as NavCMLX } from "./nav/NavCMLX.svelte";
 export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte";
 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

@@ -17,34 +17,37 @@ export { default as Menu } from "./containers/Menu.svelte";
 export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
-export { default as LinearProgress } from "./forms/LinearProgress.svelte";
-export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
-export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
-export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
-export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
+export { default as Checkbox } from "./forms/Checkbox.svelte";
+export { default as Chip } from "./forms/Chip.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
 export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
-export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as DateField } from "./forms/DateField.svelte";
 export { default as DateFieldOutlined } from "./forms/DateFieldOutlined.svelte";
+export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
+export { default as LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
+export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
-export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as Switch } from "./forms/Switch.svelte";
+export { default as Select } from "./forms/Select.svelte";
+export { default as SelectOutlined } from "./forms/SelectOutlined.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
+export { default as Switch } from "./forms/Switch.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
 export { default as TextFieldOutlinedMultiline } from "./forms/TextFieldOutlinedMultiline.svelte";
-export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
-export { default as Chip } from "./forms/Chip.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as NavCMLX } from "./nav/NavCMLX.svelte";
 export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte";
 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/styles.css

@@ -83,7 +83,7 @@
   --m3-util-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
   --m3-util-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
 
-  /* deprecated / todo next release remove */
+  /* deprecated */
   --m3-util-curve: var(--m3-util-timing-function-emphasized);
   --m3-util-curve-accel: var(--m3-util-timing-function-emphasized-accel);
   --m3-util-curve-decel: var(--m3-util-timing-function-emphasized-decel);
@@ -220,6 +220,7 @@ or for very small text in the content body, such as captions. */
   }
   .m3-container {
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
   }
   .m3-container a,
   a.m3-container {

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

@@ -1,3 +1,5 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLLabelAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } 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">>;

package/package/nav/NavCMLX.svelte

@@ -5,7 +5,7 @@
     variant,
     children,
   }: {
-    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
     children: Snippet;
   } = $props();
 </script>

package/package/nav/NavCMLXItem.svelte

@@ -8,7 +8,7 @@
     | ({ click: () => void } & HTMLButtonAttributes)
     | ({ href: string } & HTMLAnchorAttributes);
   let props: {
-    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
     icon: IconifyIcon;
     text: string;
     selected: boolean;
@@ -81,13 +81,13 @@
         }
         &:hover {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+            background-color: color-mix(in oklab, currentColor 8%, transparent);
           }
         }
         &:focus-visible,
         &:active {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+            background-color: color-mix(in oklab, currentColor 12%, transparent);
           }
         }
         > .icon {
@@ -188,14 +188,14 @@
 
         &:hover {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+            background-color: color-mix(in oklab, currentColor 8%, transparent);
           }
         }
 
         &:focus-visible,
         &:active {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+            background-color: color-mix(in oklab, currentColor 12%, transparent);
           }
         }
 
@@ -251,14 +251,14 @@
 
         &:hover {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+            background-color: color-mix(in oklab, currentColor 8%, transparent);
           }
         }
 
         &:focus-visible,
         &:active {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+            background-color: color-mix(in oklab, currentColor 12%, transparent);
           }
         }
 

package/package/nav/Tabs.svelte

@@ -69,7 +69,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package/nav/TabsLink.svelte

@@ -67,7 +67,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package/nav/VariableTabs.svelte

@@ -130,7 +130,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package/nav/VariableTabsLink.svelte

@@ -128,7 +128,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

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.3.6",
+  "version": "5.6.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,17 +35,17 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1754804347",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11754876552597",
-    "svelte": "^5.38.0"
+    "@ktibow/iconset-material-symbols": "^0.0.1755063979",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11756085020728",
+    "svelte": "^5.38.3"
   },
   "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.27.3",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
+    "@sveltejs/kit": "^2.36.2",
+    "@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",
@@ -57,8 +57,8 @@
     "svelte-check": "^4.3.1",
     "svelte-highlight": "^7.8.3",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.1"
+    "typescript-eslint": "^8.41.0",
+    "vite": "^7.1.3"
   },
   "keywords": [
     "svelte",