m3-svelte 5.10.0 → 5.12.0

package/package/buttons/Button.svelte

@@ -11,6 +11,7 @@
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
     iconType?: "none" | "left" | "full";
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
   } & ActionProps;
 
@@ -18,35 +19,32 @@
     variant = "filled",
     square = false,
     iconType = "none",
+    size = "s",
     children,
     ...props
   }: Props = $props();
 </script>
 
 {#if "for" in props}
-  <label class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
+  <label class="m3-container {variant} {size} icon-{iconType}" class:square {...props}>
     <Layer />
     {@render children()}
   </label>
 {:else if "href" in props}
-  <a class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
+  <a class="m3-container {variant} {size} icon-{iconType}" class:square {...props}>
     <Layer />
     {@render children()}
   </a>
 {:else if "summary" in props}
   {@const { summary: _, ...extra } = props}
-  <summary
-    class="m3-container m3-font-label-large {variant} icon-{iconType}"
-    class:square
-    {...extra}
-  >
+  <summary class="m3-container {variant} {size} icon-{iconType}" class:square {...extra}>
     <Layer />
     {@render children()}
   </summary>
 {:else}
   <button
     type={"onclick" in props ? "button" : "submit"}
-    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class="m3-container {variant} {size} icon-{iconType}"
     class:square
     {...props}
   >
@@ -56,16 +54,79 @@
 {/if}
 
 <style>
-  :root {
+  .m3-container.xs {
+    height: calc(2rem + var(--m3-util-density-term));
+    padding: 0 0.75rem;
+    gap: 0.5rem;
+    --m3-button-shape: 1rem;
+    --m3-button-square-shape: var(--m3-util-rounding-medium);
+    --m3-button-pressed-shape: var(--m3-util-rounding-small);
+    font-family: var(--m3-font-label, var(--m3-font));
+    font-size: var(--m3-font-label-large-size, 0.875rem);
+    line-height: var(--m3-font-label-large-height, 1.429);
+    letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
+    font-weight: var(--m3-font-label-large-weight, 500);
+  }
+
+  .m3-container.s {
+    height: calc(2.5rem + var(--m3-util-density-term));
+    padding: 0 1rem;
+    gap: 0.5rem;
     --m3-button-shape: 1.25rem;
+    --m3-button-square-shape: var(--m3-util-rounding-medium);
+    --m3-button-pressed-shape: var(--m3-util-rounding-small);
+    font-family: var(--m3-font-label, var(--m3-font));
+    font-size: var(--m3-font-label-large-size, 0.875rem);
+    line-height: var(--m3-font-label-large-height, 1.429);
+    letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
+    font-weight: var(--m3-font-label-large-weight, 500);
+  }
+
+  .m3-container.m {
+    height: calc(3.5rem + var(--m3-util-density-term));
+    padding: 0 1.5rem;
+    gap: 0.5rem;
+    --m3-button-shape: 1.75rem;
+    --m3-button-square-shape: var(--m3-util-rounding-large);
+    --m3-button-pressed-shape: var(--m3-util-rounding-medium);
+    font-family: var(--m3-font-title, var(--m3-font));
+    font-size: var(--m3-font-title-medium-size, 1rem);
+    line-height: var(--m3-font-title-medium-height, 1.5);
+    letter-spacing: var(--m3-font-title-medium-tracking, 0);
+    font-weight: var(--m3-font-title-medium-weight, 500);
+  }
+
+  .m3-container.l {
+    height: calc(6rem + var(--m3-util-density-term));
+    padding: 0 3rem;
+    gap: 0.75rem;
+    --m3-button-shape: 3rem;
+    --m3-button-square-shape: var(--m3-util-rounding-extra-large);
+    --m3-button-pressed-shape: var(--m3-util-rounding-large);
+    font-family: var(--m3-font-headline, var(--m3-font));
+    font-size: var(--m3-font-headline-small-size, 1.5rem);
+    line-height: var(--m3-font-headline-small-height, 1.333);
+    letter-spacing: var(--m3-font-headline-small-tracking, 0);
+    font-weight: var(--m3-font-headline-small-weight, 400);
+  }
+
+  .m3-container.xl {
+    height: calc(8.5rem + var(--m3-util-density-term));
+    padding: 0 4rem;
+    gap: 1rem;
+    --m3-button-shape: 4.25rem;
+    --m3-button-square-shape: var(--m3-util-rounding-extra-large);
+    --m3-button-pressed-shape: var(--m3-util-rounding-large);
+    font-family: var(--m3-font-headline, var(--m3-font));
+    font-size: var(--m3-font-headline-large-size, 2rem);
+    line-height: var(--m3-font-headline-large-height, 1.25);
+    letter-spacing: var(--m3-font-headline-large-tracking, 0);
+    font-weight: var(--m3-font-headline-large-weight, 400);
   }
 
   .m3-container {
     display: inline-flex;
     border: none;
-    height: calc(2.5rem + var(--m3-util-density-term));
-    gap: 0.5rem;
-    padding: 0 1rem;
     border-radius: var(--m3-button-shape);
     transition:
       border-radius var(--m3-util-easing-fast-spatial),
@@ -121,6 +182,14 @@
       outline: 1px solid rgb(var(--m3-scheme-outline-variant));
       outline-offset: -1px;
     }
+    &.outlined.l {
+      outline-width: 2px;
+      outline-offset: -2px;
+    }
+    &.outlined.xl {
+      outline-width: 3px;
+      outline-offset: -3px;
+    }
     &.outlined:not(:disabled, :global(input:disabled) + label) {
       outline-color: rgb(var(--m3-scheme-outline-variant));
       color: rgb(var(--m3-scheme-on-surface-variant));
@@ -145,28 +214,73 @@
 
     &.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);
+      border-radius: var(--m3-button-square-shape);
     }
     &:active:not(:disabled, :global(input:disabled) + label) {
-      border-radius: var(--m3-util-rounding-small) !important;
+      border-radius: var(--m3-button-pressed-shape) !important;
     }
   }
 
   .m3-container > :global(*) {
     flex-shrink: 0;
   }
-  .icon-left > :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
+
+  .xs.icon-left > :global(svg),
+  .s.icon-left > :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
   }
-  .icon-full {
+  .m.icon-left > :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .l.icon-left > :global(svg) {
+    width: 2rem;
+    height: 2rem;
+  }
+  .xl.icon-left > :global(svg) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .xs.icon-full {
+    width: 2rem;
+    padding: 0;
+  }
+  .s.icon-full {
     width: 2.5rem;
     padding: 0;
   }
-  .icon-full > :global(svg) {
+  .m.icon-full {
+    width: 3.5rem;
+    padding: 0;
+  }
+  .l.icon-full {
+    width: 6rem;
+    padding: 0;
+  }
+  .xl.icon-full {
+    width: 8.5rem;
+    padding: 0;
+  }
+
+  .xs.icon-full > :global(svg),
+  .s.icon-full > :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .m.icon-full > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  .l.icon-full > :global(svg) {
+    width: 2rem;
+    height: 2rem;
+  }
+  .xl.icon-full > :global(svg) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
 
   .m3-container {
     print-color-adjust: exact;

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

@@ -9,6 +9,7 @@ type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
     iconType?: "none" | "left" | "full";
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
 } & ActionProps;
 declare const Button: import("svelte").Component<Props, {}, "">;

package/package/buttons/TogglePrimitive.svelte

@@ -6,15 +6,17 @@
     toggle = $bindable(),
     variant,
     round = false,
+    size,
     children,
   }: {
     toggle: boolean;
     variant?: "filled" | "tonal";
     round?: boolean;
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
   } = $props();
   const id = $props.id();
 </script>
 
 <input type="checkbox" {id} bind:checked={toggle} />
-<Button for={id} {variant} square={!round} {children} />
+<Button for={id} {variant} square={!round} {size} {children} />

package/package/buttons/TogglePrimitive.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     toggle: boolean;
     variant?: "filled" | "tonal";
     round?: boolean;
+    size?: "xs" | "s" | "m" | "l" | "xl";
     children: Snippet;
 };
 declare const TogglePrimitive: import("svelte").Component<$$ComponentProps, {}, "toggle">;

package/package/containers/NewSnackbar.svelte

@@ -0,0 +1,113 @@
+<script module lang="ts">
+  export const snackbar = (
+    message: string,
+    actions?: Record<string, () => void>,
+    closable?: boolean,
+    /*
+    undefined/unset -> 4s timeout
+    2000 -> 2s timeout
+    -1 -> no timeout
+    */
+    timeout?: number,
+  ) => {
+    _show(message, actions, closable, timeout);
+  };
+  let _show: typeof snackbar;
+</script>
+
+<script lang="ts">
+  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";
+
+  let { closeTitle = "Close" }: { closeTitle?: string } = $props();
+  let shown:
+    | { message: string; actions: Record<string, () => void>; closable: boolean }
+    | undefined = $state();
+  let timeoutId: number;
+  _show = (message, actions = {}, closable = false, timeout = 4000) => {
+    shown = { message, actions, closable };
+    clearTimeout(timeoutId);
+    if (timeout && timeout > 0)
+      timeoutId = setTimeout(() => {
+        shown = undefined;
+      }, timeout);
+  };
+</script>
+
+{#if shown}
+  <div class="holder" out:fade={{ duration: 200 }}>
+    {#key shown}
+      <SnackbarItem>
+        <p class="m3-font-body-medium">{shown.message}</p>
+        {#each Object.entries(shown.actions) as [key, action]}
+          <button
+            type="button"
+            class="action m3-font-label-large"
+            onclick={() => {
+              shown = undefined;
+              action();
+            }}
+          >
+            {key}
+          </button>
+        {/each}
+        {#if shown.closable}
+          <button
+            type="button"
+            class="close"
+            title={closeTitle}
+            onclick={() => {
+              shown = undefined;
+            }}
+          >
+            <Layer />
+            <Icon icon={iconX} />
+          </button>
+        {/if}
+      </SnackbarItem>
+    {/key}
+  </div>
+{/if}
+
+<style>
+  .holder {
+    position: fixed;
+    padding-bottom: 1rem;
+    bottom: var(--m3-util-bottom-offset);
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 3;
+  }
+  p {
+    margin-right: auto;
+  }
+  button {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    background-color: transparent;
+    color: unset;
+    cursor: pointer;
+    position: relative;
+  }
+  button :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .action {
+    color: rgb(var(--m3-scheme-inverse-primary));
+    padding: 0 0.5rem;
+  }
+  .close {
+    padding: 0 0.75rem;
+    margin-right: -1rem;
+  }
+</style>

package/package/containers/NewSnackbar.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare const snackbar: (message: string, actions?: Record<string, () => void>, closable?: boolean, timeout?: number) => void;
+type $$ComponentProps = {
+    closeTitle?: string;
+};
+declare const NewSnackbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NewSnackbar = ReturnType<typeof NewSnackbar>;
+export default NewSnackbar;

package/package/containers/Snackbar.svelte

@@ -1,3 +1,7 @@
+<!--
+@component
+@deprecated use NewSnackbar instead
+-->
 <script module lang="ts">
   export type SnackbarIn = {
     message: string;

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

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     config?: SnackbarConfig;
     closeButtonTitle?: string;
 } & DivAttrs;
+/** @deprecated use NewSnackbar instead */
 declare const Snackbar: import("svelte").Component<$$ComponentProps, {
     show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
 }, "">;

package/package/index.d.ts

@@ -18,6 +18,7 @@ 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 NewSnackbar, snackbar } from "./containers/NewSnackbar.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";

package/package/index.js

@@ -17,6 +17,7 @@ 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 NewSnackbar, snackbar } from "./containers/NewSnackbar.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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.10.0",
+  "version": "5.12.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,18 +35,18 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "~0.0.1760073587",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11760125264000",
-    "svelte": "^5.39.11"
+    "@ktibow/iconset-material-symbols": "~0.0.1760591837",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11760728781000",
+    "svelte": "^5.41.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.46.4",
+    "@sveltejs/kit": "^2.47.1",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "fast-glob": "^3.3.3",
@@ -58,7 +58,7 @@
     "svelte-highlight": "^7.8.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.1",
-    "vite": "^7.1.9"
+    "vite": "^7.1.10"
   },
   "keywords": [
     "svelte",