m3-svelte 5.6.0 → 5.7.1

package/package/buttons/Button.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import type { HTMLButtonAttributes } from "svelte/elements";
+  import type { HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
   import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
   import Layer from "../misc/Layer.svelte";
 
   // If you want a toggle button, use `for` with a checkbox input.
-  type ActionProps = LabelAttrs | AnchorAttrs | HTMLButtonAttributes;
+  type SummaryAttrs = HTMLAttributes<HTMLElement> & { summary: true };
+  type ActionProps = LabelAttrs | AnchorAttrs | SummaryAttrs | HTMLButtonAttributes;
   type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
@@ -52,6 +53,16 @@
     <Layer />
     {@render children()}
   </a>
+{:else if "summary" in props}
+  {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
+  <summary
+    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class:square
+    {...extra}
+  >
+    <Layer />
+    {@render children()}
+  </summary>
 {:else}
   {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
@@ -154,8 +165,8 @@
       }
     }
 
-    &.square:not(:global(input:checked) + label),
-    &:is(:global(input:checked) + label):not(.square) {
+    &.square:not(:is(:global(input:checked) + label, :global(:open) > summary)),
+    &:is(:global(input:checked) + label, :global(:open) > summary):not(.square) {
       border-radius: var(--m3-util-rounding-medium);
     }
     &:active:not(:disabled, :global(input:disabled) + label) {

package/package/buttons/Button.svelte.d.ts

@@ -1,7 +1,10 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
 import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
-type ActionProps = LabelAttrs | AnchorAttrs | HTMLButtonAttributes;
+type SummaryAttrs = HTMLAttributes<HTMLElement> & {
+    summary: true;
+};
+type ActionProps = LabelAttrs | AnchorAttrs | SummaryAttrs | HTMLButtonAttributes;
 type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;

package/package/buttons/SplitButton.svelte

@@ -3,6 +3,7 @@
   import type { Snippet } from "svelte";
   import Layer from "../misc/Layer.svelte";
   import Icon from "../misc/_icon.svelte";
+  import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
     variant,
@@ -10,15 +11,14 @@
     y = "down",
     children,
     menu,
-    onclick,
+    ...extra
   }: {
     variant: "elevated" | "filled" | "tonal" | "outlined";
     x?: "inner" | "right";
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    onclick: () => void;
-  } = $props();
+  } & ButtonAttrs = $props();
 
   const autoclose = (node: HTMLDetailsElement) => {
     const close = (e: Event) => {
@@ -36,7 +36,7 @@
 </script>
 
 <div class="m3-container {variant}">
-  <button type="button" class="split m3-font-label-large" {onclick}>
+  <button type="button" class="split m3-font-label-large" {...extra}>
     <Layer />
     {@render children()}
   </button>

package/package/buttons/SplitButton.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from "svelte";
+import type { ButtonAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     variant: "elevated" | "filled" | "tonal" | "outlined";
     x?: "inner" | "right";
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    onclick: () => void;
-};
+} & ButtonAttrs;
 declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type SplitButton = ReturnType<typeof SplitButton>;
 export default SplitButton;

package/package/containers/Card.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
+  import type { ButtonAttrs, DivAttrs } from "../misc/typing-utils";
 
-  type ActionProps = ButtonAttrs | NotButton<HTMLAttributes<HTMLDivElement>>;
+  type ActionProps = ButtonAttrs | DivAttrs;
 
   let props: {
     variant: "elevated" | "filled" | "outlined";

package/package/containers/Card.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
-type ActionProps = ButtonAttrs | NotButton<HTMLAttributes<HTMLDivElement>>;
+import type { ButtonAttrs, DivAttrs } from "../misc/typing-utils";
+type ActionProps = ButtonAttrs | DivAttrs;
 type $$ComponentProps = {
     variant: "elevated" | "filled" | "outlined";
     children: Snippet;

package/package/containers/ListItem.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
+  import type { HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
+  import type { ButtonAttrs, DivAttrs, NotButton } from "../misc/typing-utils";
 
   type ActionProps =
-    | NotButton<HTMLAttributes<HTMLDivElement>>
+    | DivAttrs
     | ButtonAttrs
     | ({ label: true } & NotButton<HTMLLabelAttributes>)
     | ({ href: string } & NotButton<HTMLAnchorAttributes>);
 
-  let props: {
+  let {
+    leading,
+    overline = "",
+    headline = "",
+    supporting = "",
+    trailing,
+    lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
+    ...props
+  }: {
     leading?: Snippet;
     overline?: string;
     headline?: string;
@@ -18,19 +26,9 @@
     trailing?: Snippet;
     lines?: number;
   } & ActionProps = $props();
-  let _lines = $derived(
-    props.lines ||
-      (props.overline && props.supporting ? 3 : props.overline || props.supporting ? 2 : 1),
-  );
 </script>
 
-{#snippet content(
-  leading: Snippet | undefined,
-  overline: string,
-  headline: string,
-  supporting: string,
-  trailing: Snippet | undefined,
-)}
+{#snippet content()}
   {#if leading}
     <div class="leading">
       {@render leading()}
@@ -53,38 +51,29 @@
   {/if}
 {/snippet}
 
-{#if "label" in props}
-  {@const {
-    leading,
-    overline = "",
-    headline = "",
-    supporting = "",
-    trailing,
-    label: _,
-    ...extra
-  } = props}
-  <label class="m3-container focus-inset lines-{_lines}" {...extra}>
-    <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </label>
-{:else if "onclick" in props}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <button type="button" class="m3-container focus-inset lines-{_lines}" {...extra}>
-    <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </button>
-{:else if "href" in props}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <a class="m3-container focus-inset lines-{_lines}" {...extra}>
-    <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </a>
-{:else}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <div class="m3-container lines-{_lines}" {...extra}>
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </div>
-{/if}
+<li style:display="contents">
+  {#if "label" in props}
+    {@const { label: _, ...extra } = props}
+    <label class="m3-container focus-inset lines-{lines}" {...extra}>
+      <Layer />
+      {@render content()}
+    </label>
+  {:else if "onclick" in props}
+    <button type="button" class="m3-container focus-inset lines-{lines}" {...props}>
+      <Layer />
+      {@render content()}
+    </button>
+  {:else if "href" in props}
+    <a class="m3-container focus-inset lines-{lines}" {...props}>
+      <Layer />
+      {@render content()}
+    </a>
+  {:else}
+    <div class="m3-container lines-{lines}" {...props}>
+      {@render content()}
+    </div>
+  {/if}
+</li>
 
 <style>
   .m3-container {

package/package/containers/ListItem.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
-import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
-type ActionProps = NotButton<HTMLAttributes<HTMLDivElement>> | ButtonAttrs | ({
+import type { HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { ButtonAttrs, DivAttrs, NotButton } from "../misc/typing-utils";
+type ActionProps = DivAttrs | ButtonAttrs | ({
     label: true;
 } & NotButton<HTMLLabelAttributes>) | ({
     href: string;

package/package/containers/Snackbar.svelte

@@ -14,12 +14,12 @@
 
 <script lang="ts">
   import { onDestroy, type ComponentProps } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import { fade } from "svelte/transition";
   import iconX from "@ktibow/iconset-material-symbols/close";
   import Icon from "../misc/_icon.svelte";
   import SnackbarItem from "./SnackbarItem.svelte";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 
@@ -30,7 +30,7 @@
   }: {
     config?: SnackbarConfig;
     closeButtonTitle?: string;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
   export const show = ({ message, actions = {}, closable = false, timeout = 4000 }: SnackbarIn) => {
     snackbar = { message, actions, closable, timeout };
     clearTimeout(timeoutId);

package/package/containers/Snackbar.svelte.d.ts

@@ -5,13 +5,13 @@ export type SnackbarIn = {
     timeout?: number | null;
 };
 import { type ComponentProps } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
 import SnackbarItem from "./SnackbarItem.svelte";
+import type { DivAttrs } from "../misc/typing-utils";
 type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 type $$ComponentProps = {
     config?: SnackbarConfig;
     closeButtonTitle?: string;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const Snackbar: import("svelte").Component<$$ComponentProps, {
     show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
 }, "">;

package/package/containers/SnackbarItem.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import type { DivAttrs } from "../misc/typing-utils";
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
 
-  let { children, ...extra }: { children: Snippet } & HTMLAttributes<HTMLDivElement> = $props();
+  let { children, ...extra }: { children: Snippet } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>

package/package/containers/SnackbarItem.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { DivAttrs } from "../misc/typing-utils";
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const SnackbarItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type SnackbarItem = ReturnType<typeof SnackbarItem>;
 export default SnackbarItem;

package/package/forms/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>

package/package/forms/Checkbox.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/package/forms/DateField.svelte

@@ -69,7 +69,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- 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 -->
   <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />

package/package/forms/DateFieldOutlined.svelte

@@ -69,7 +69,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- 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-small" for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>

package/package/forms/LinearProgressIndeterminate.svelte

@@ -3,9 +3,9 @@
 @deprecated use LoadingIndicator or one of the Estimate components instead
 -->
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { DivAttrs } from "../misc/typing-utils";
 
-  let extra: HTMLAttributes<HTMLDivElement> = $props();
+  let extra: DivAttrs = $props();
 </script>
 
 <div class="m3-container" role="progressbar" {...extra}>

package/package/forms/LinearProgressIndeterminate.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 /** @deprecated use LoadingIndicator or one of the Estimate components instead */
-declare const LinearProgressIndeterminate: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const LinearProgressIndeterminate: import("svelte").Component<DivAttrs, {}, "">;
 type LinearProgressIndeterminate = ReturnType<typeof LinearProgressIndeterminate>;
 export default LinearProgressIndeterminate;

package/package/forms/RadioAnim1.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>

package/package/forms/RadioAnim1.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const RadioAnim1: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioAnim1 = ReturnType<typeof RadioAnim1>;
 export default RadioAnim1;

package/package/forms/RadioAnim2.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>

package/package/forms/RadioAnim2.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const RadioAnim2: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioAnim2 = ReturnType<typeof RadioAnim2>;
 export default RadioAnim2;

package/package/forms/RadioAnim3.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>

package/package/forms/RadioAnim3.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const RadioAnim3: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioAnim3 = ReturnType<typeof RadioAnim3>;
 export default RadioAnim3;

package/package/forms/TextField.svelte

@@ -45,7 +45,7 @@
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- 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 -->
   <label class="m3-font-body-large" for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}

package/package/forms/TextFieldMultiline.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 -->
   <label class="m3-font-body-large" for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}

package/package/forms/TextFieldOutlined.svelte

@@ -45,7 +45,7 @@
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- 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}

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}

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/misc/typing-utils.d.ts

@@ -1,5 +1,6 @@
-import type { HTMLLabelAttributes, HTMLAnchorAttributes, 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.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.6.0",
+  "version": "5.7.1",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -36,14 +36,14 @@
   "dependencies": {
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1755063979",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11756085020728",
-    "svelte": "^5.38.3"
+    "@ktibow/material-color-utilities-nightly": "^0.3.11756690739504",
+    "svelte": "^5.38.6"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.2",
     "@eslint/js": "^9.34.0",
     "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.36.2",
+    "@sveltejs/kit": "^2.37.0",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "eslint": "^9.27.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.41.0",
-    "vite": "^7.1.3"
+    "vite": "^7.1.4"
   },
   "keywords": [
     "svelte",