m3-svelte 5.15.4 → 6.0.0

package/package/containers/Card.svelte

@@ -27,8 +27,10 @@
 {/if}
 
 <style>
-  :root {
-    --m3-card-shape: var(--m3-util-rounding-medium);
+  @layer tokens {
+    :root {
+      --m3-card-shape: var(--m3-shape-medium);
+    }
   }
 
   .m3-container {
@@ -38,9 +40,9 @@
     padding: 1rem; /* protip: use margin: -1rem (adjust as needed) to make images stretch to the end */
     border: none;
     border-radius: var(--m3-card-shape);
-    background-color: rgb(var(--m3-scheme-surface));
-    --m3-util-background: rgb(var(--m3-scheme-surface));
-    color: rgb(var(--m3-scheme-on-surface));
+    background-color: var(--m3c-surface);
+    --m3v-background: var(--m3c-surface);
+    color: var(--m3c-on-surface);
   }
 
   button {
@@ -51,24 +53,24 @@
   }
   @media (hover: hover) {
     button:hover {
-      box-shadow: var(--m3-util-elevation-1);
+      box-shadow: var(--m3-elevation-1);
     }
     button.type-elevated:hover {
-      box-shadow: var(--m3-util-elevation-2);
+      box-shadow: var(--m3-elevation-2);
     }
   }
 
   .elevated {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    --m3-util-background: rgb(var(--m3-scheme-surface-container-low));
-    box-shadow: var(--m3-util-elevation-1);
+    background-color: var(--m3c-surface-container-low);
+    --m3v-background: var(--m3c-surface-container-low);
+    box-shadow: var(--m3-elevation-1);
   }
   .filled {
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-    --m3-util-background: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
+    --m3v-background: var(--m3c-surface-container-highest);
   }
   .outlined {
-    border: solid 1px rgb(var(--m3-scheme-outline-variant));
+    border: solid 1px var(--m3c-outline-variant);
   }
 
   @media print, (forced-colors: active) {

package/package/containers/Dialog.svelte

@@ -18,14 +18,6 @@
     buttons: Snippet;
     children: Snippet;
     open: boolean;
-    /** @deprecated use closedby instead */
-    closeOnEsc?: boolean;
-    /** @deprecated use closedby instead */
-    closeOnClick?: boolean;
-    /** @deprecated listen to `open` state changes instead of onEsc */
-    onEsc?: () => void;
-    /** @deprecated listen to `open` state changes instead of onClick */
-    onClick?: () => void;
   } & HTMLDialogAttributes = $props();
 
   let dialog: HTMLDialogElement | undefined = $state();
@@ -41,33 +33,16 @@
   ontoggle={(e) => {
     open = e.newState == "open";
   }}
-  oncancel={(e) => {
-    if (e.target != e.currentTarget) return;
-    if (extra.closeOnEsc && extra.onEsc) {
-      extra.onEsc();
-    }
-  }}
-  onclick={(e) => {
-    if (e.target != e.currentTarget) return;
-    if (extra.closeOnClick && extra.onClick) {
-      extra.onClick();
-    }
-  }}
   bind:this={dialog}
-  closedby={closedby ||
-    (extra.closeOnClick == false && extra.closeOnEsc == false
-      ? "none"
-      : extra.closeOnClick == false
-        ? "closerequest"
-        : "any")}
+  {closedby}
   role="alertdialog"
   {...extra}
 >
   {#if icon}
     <Icon {icon} size={24} />
   {/if}
-  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
-  <div class="content m3-font-body-medium">
+  <p class="headline" class:center={icon}>{headline}</p>
+  <div class="content">
     {@render children()}
   </div>
   <form method="dialog" class="buttons">
@@ -76,14 +51,16 @@
 </dialog>
 
 <style>
-  :root {
-    --m3-dialog-shape: var(--m3-util-rounding-extra-large);
+  @layer tokens {
+    :root {
+      --m3-dialog-shape: var(--m3-shape-extra-large);
+    }
   }
   dialog {
     display: flex;
     flex-direction: column;
-    background-color: rgb(var(--m3-scheme-surface-container-high));
-    --m3-util-background: rgb(var(--m3-scheme-surface-container-high));
+    background-color: var(--m3c-surface-container-high);
+    --m3v-background: var(--m3c-surface-container-high);
     border: none;
     border-radius: var(--m3-dialog-shape);
     min-width: 17.5rem;
@@ -91,7 +68,7 @@
     padding: 1.5rem;
     overflow: auto;
     > :global(svg) {
-      color: rgb(var(--m3-scheme-secondary));
+      color: var(--m3c-secondary);
 
       flex-shrink: 0;
       align-self: center;
@@ -99,7 +76,14 @@
     }
   }
   .headline {
-    color: rgb(var(--m3-scheme-on-surface));
+    
+  font-family: var(--m3-font);
+  font-size: 1.5rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+  font-weight: 400;
+
+    color: var(--m3c-on-surface);
     margin-top: 0;
     margin-bottom: 1rem;
   }
@@ -107,7 +91,14 @@
     text-align: center;
   }
   .content {
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.016rem;
+  font-weight: 400;
+
+    color: var(--m3c-on-surface-variant);
     margin-bottom: 1.5rem;
   }
   .buttons {
@@ -123,31 +114,31 @@
     visibility: hidden;
     pointer-events: none;
     transition:
-      opacity var(--m3-util-easing-fast),
-      visibility var(--m3-util-easing-fast);
+      opacity var(--m3-easing-fast),
+      visibility var(--m3-easing-fast);
   }
   dialog[open] {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     animation:
-      dialogIn var(--m3-util-curve-decel) 500ms,
-      opacity var(--m3-util-curve-decel) 100ms backwards;
+      dialogIn var(--m3-timing-function-emphasized-decel) 500ms,
+      opacity var(--m3-timing-function-emphasized-decel) 100ms backwards;
   }
   dialog[open] .headline {
-    animation: opacity var(--m3-util-easing-fast);
+    animation: opacity var(--m3-easing-fast);
   }
   dialog[open] .content {
-    animation: opacity var(--m3-util-easing-fast) 50ms backwards;
+    animation: opacity var(--m3-easing-fast) 50ms backwards;
   }
   dialog[open] .buttons {
     animation:
-      buttonsIn var(--m3-util-curve-decel) 500ms,
-      opacity var(--m3-util-easing-fast) 100ms backwards;
+      buttonsIn var(--m3-timing-function-emphasized-decel) 500ms,
+      opacity var(--m3-easing-fast) 100ms backwards;
   }
   dialog::backdrop {
-    background-color: rgb(var(--m3-scheme-scrim) / 0.3);
-    animation: opacity var(--m3-util-curve-decel) 500ms;
+    background-color: oklab(from var(--m3c-scrim) l a b / 0.3);
+    animation: opacity var(--m3-timing-function-emphasized-decel) 500ms;
   }
   @keyframes dialogIn {
     0% {

package/package/containers/Dialog.svelte.d.ts

@@ -7,14 +7,6 @@ type $$ComponentProps = {
     buttons: Snippet;
     children: Snippet;
     open: boolean;
-    /** @deprecated use closedby instead */
-    closeOnEsc?: boolean;
-    /** @deprecated use closedby instead */
-    closeOnClick?: boolean;
-    /** @deprecated listen to `open` state changes instead of onEsc */
-    onEsc?: () => void;
-    /** @deprecated listen to `open` state changes instead of onClick */
-    onClick?: () => void;
 } & HTMLDialogAttributes;
 declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;

package/package/containers/ListItem.svelte

@@ -37,15 +37,15 @@
   <div class="body">
     {#if overline}
       <!-- Renamed to not conflict with Tailwind -->
-      <p class="overline- m3-font-label-small">{overline}</p>
+      <p class="overline-">{overline}</p>
     {/if}
-    <p class="headline m3-font-body-large">{headline}</p>
+    <p class="headline">{headline}</p>
     {#if supporting}
-      <p class="supporting m3-font-body-medium">{supporting}</p>
+      <p class="supporting">{supporting}</p>
     {/if}
   </div>
   {#if trailing}
-    <div class="trailing m3-font-label-small">
+    <div class="trailing">
       {@render trailing()}
     </div>
   {/if}
@@ -93,13 +93,13 @@
     cursor: pointer;
   }
   .lines-1 {
-    height: calc(3.5rem + var(--m3-util-density-term));
+    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
   }
   .lines-2 {
-    height: calc(4.5rem + var(--m3-util-density-term));
+    height: calc(4.5rem + (var(--m3v-density) * 0.25rem));
   }
   .lines-3 {
-    height: calc(5.5rem + var(--m3-util-density-term));
+    height: calc(5.5rem + (var(--m3v-density) * 0.25rem));
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
     align-items: flex-start;
@@ -110,7 +110,16 @@
   .leading,
   .trailing {
     display: contents;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
+  }
+  .trailing {
+    
+  font-family: var(--m3-font);
+  font-size: 0.688rem;
+  line-height: 1.455;
+  letter-spacing: 0.031rem;
+  font-weight: 500;
+
   }
   .leading > :global(svg),
   .trailing > :global(svg) {
@@ -122,11 +131,34 @@
   p {
     margin: 0;
   }
-  .supporting,
+  .supporting {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.016rem;
+  font-weight: 400;
+
+    color: var(--m3c-on-surface-variant);
+  }
   .overline- {
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    
+  font-family: var(--m3-font);
+  font-size: 0.688rem;
+  line-height: 1.455;
+  letter-spacing: 0.031rem;
+  font-weight: 500;
+
+    color: var(--m3c-on-surface-variant);
   }
   .headline {
-    color: rgb(var(--m3-scheme-on-surface));
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
+    color: var(--m3c-on-surface);
   }
 </style>

package/package/containers/Menu.svelte

@@ -9,8 +9,10 @@
 </div>
 
 <style>
-  :root {
-    --m3-menu-shape: var(--m3-util-rounding-extra-small);
+  @layer tokens {
+    :root {
+      --m3-menu-shape: var(--m3-shape-extra-small);
+    }
   }
   .m3-container {
     display: flex;
@@ -20,8 +22,8 @@
     border-radius: var(--m3-menu-shape);
     min-width: 7rem;
     max-width: 17.5rem;
-    background-color: rgb(var(--m3-scheme-surface-container));
+    background-color: var(--m3c-surface-container);
     z-index: 2;
-    box-shadow: var(--m3-util-elevation-2);
+    box-shadow: var(--m3-elevation-2);
   }
 </style>

package/package/containers/MenuItem.svelte

@@ -17,7 +17,7 @@
   } = $props();
 </script>
 
-<button type="button" class="item focus-inset m3-font-label-large" {disabled} {onclick}>
+<button type="button" class="item focus-inset" {disabled} {onclick}>
   <Layer />
   {#if icon == "space"}
     <span class="icon"></span>
@@ -31,9 +31,16 @@
 
 <style>
   .item {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
     display: flex;
     align-items: center;
-    height: calc(3rem + var(--m3-util-density-term));
+    height: calc(3rem + (var(--m3v-density) * 0.25rem));
     padding: 0 0.75rem;
     gap: 0.75rem;
     white-space: nowrap;
@@ -41,7 +48,7 @@
     border: none;
     position: relative;
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
 
     cursor: pointer;
   }
@@ -52,14 +59,14 @@
   .icon > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
   }
 
   .item:disabled {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     cursor: auto;
   }
   .item:disabled > .icon > :global(svg) {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
 </style>

package/package/containers/Snackbar.svelte

@@ -1,80 +1,70 @@
-<!--
-@component
-@deprecated use NewSnackbar instead
--->
 <script module lang="ts">
-  export type SnackbarIn = {
-    message: string;
-    actions?: Record<string, () => void>;
-    closable?: boolean;
+  export const snackbar = (
+    message: string,
+    actions?: Record<string, () => void>,
+    closable?: boolean,
     /*
-    timeout: undefined/unset -> 4s timeout
-    timeout: null -> no timeout
-    timeout: 2000 -> 2s timeout
+    undefined/unset -> 4s timeout
+    2000 -> 2s timeout
+    -1 -> no timeout
     */
-    timeout?: number | null;
+    timeout?: number,
+  ) => {
+    _show(message, actions, closable, timeout);
   };
+  let _show: typeof snackbar;
 </script>
 
 <script lang="ts">
-  import { onDestroy, type ComponentProps } from "svelte";
+  import { onDestroy } from "svelte";
   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">;
-
-  let {
-    config = {},
-    closeButtonTitle = "Close",
-    ...extra
-  }: {
-    config?: SnackbarConfig;
-    closeButtonTitle?: string;
-  } & DivAttrs = $props();
-  export const show = ({ message, actions = {}, closable = false, timeout = 4000 }: SnackbarIn) => {
-    snackbar = { message, actions, closable, timeout };
+  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) => {
     clearTimeout(timeoutId);
-    if (timeout)
+    shown = { message, actions, closable };
+    if (timeout && timeout > 0)
       timeoutId = setTimeout(() => {
-        snackbar = undefined;
+        shown = undefined;
       }, timeout);
   };
-
-  let snackbar: Required<SnackbarIn> | undefined = $state();
-  let timeoutId: number;
   onDestroy(() => {
     clearTimeout(timeoutId);
   });
 </script>
 
-{#if snackbar}
-  <div class="holder" out:fade={{ duration: 200 }} {...extra}>
-    {#key snackbar}
-      <SnackbarItem {...config}>
-        <p class="m3-font-body-medium">{snackbar.message}</p>
-        {#each Object.entries(snackbar.actions) as [key, action]}
+{#if shown}
+  <div class="holder" out:fade={{ duration: 200 }}>
+    {#key shown}
+      <SnackbarItem>
+        <p>{shown.message}</p>
+        {#each Object.entries(shown.actions) as [key, action]}
           <button
             type="button"
-            class="action m3-font-label-large"
+            class="action"
             onclick={() => {
-              snackbar = undefined;
+              shown = undefined;
               action();
             }}
           >
             {key}
           </button>
         {/each}
-        {#if snackbar.closable}
+        {#if shown.closable}
           <button
             type="button"
             class="close"
-            title={closeButtonTitle}
+            title={closeTitle}
             onclick={() => {
-              snackbar = undefined;
+              shown = undefined;
             }}
           >
             <Layer />
@@ -90,12 +80,19 @@
   .holder {
     position: fixed;
     padding-bottom: 1rem;
-    bottom: var(--m3-util-bottom-offset);
+    bottom: var(--m3v-bottom-offset);
     left: 50%;
     transform: translate(-50%, 0);
     z-index: 3;
   }
   p {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.016rem;
+  font-weight: 400;
+
     margin-right: auto;
   }
   button {
@@ -107,6 +104,7 @@
     border: none;
 
     background-color: transparent;
+    color: unset;
     cursor: pointer;
     position: relative;
   }
@@ -116,11 +114,17 @@
   }
 
   .action {
-    color: var(--m3-scheme-inverse-primary);
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+    color: var(--m3c-inverse-primary);
     padding: 0 0.5rem;
   }
   .close {
-    color: var(--m3-scheme-inverse-on-surface);
     padding: 0 0.75rem;
     margin-right: -1rem;
   }

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

@@ -1,20 +1,7 @@
-export type SnackbarIn = {
-    message: string;
-    actions?: Record<string, () => void>;
-    closable?: boolean;
-    timeout?: number | null;
-};
-import { type ComponentProps } from "svelte";
-import SnackbarItem from "./SnackbarItem.svelte";
-import type { DivAttrs } from "../misc/typing-utils";
-type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
+export declare const snackbar: (message: string, actions?: Record<string, () => void>, closable?: boolean, timeout?: number) => void;
 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;
-}, "">;
+    closeTitle?: string;
+};
+declare const Snackbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/package/containers/SnackbarItem.svelte

@@ -10,8 +10,10 @@
 </div>
 
 <style>
-  :root {
-    --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
+  @layer tokens {
+    :root {
+      --m3-snackbar-shape: var(--m3-shape-extra-small);
+    }
   }
   .m3-container {
     display: flex;
@@ -21,12 +23,12 @@
     max-width: 60rem;
     min-height: 3rem;
     border-radius: var(--m3-snackbar-shape);
-    box-shadow: var(--m3-util-elevation-3);
-    background-color: rgb(var(--m3-scheme-inverse-surface));
-    color: rgb(var(--m3-scheme-inverse-on-surface));
+    box-shadow: var(--m3-elevation-3);
+    background-color: var(--m3c-inverse-surface);
+    color: var(--m3c-inverse-on-surface);
     animation:
-      snackbarIn var(--m3-util-curve-decel) 500ms,
-      opacity var(--m3-util-curve-decel) 100ms;
+      snackbarIn var(--m3-timing-function-emphasized-decel) 500ms,
+      opacity var(--m3-timing-function-emphasized-decel) 100ms;
   }
   /*@TODO: Fix animation with different shaping or something*/
   @keyframes snackbarIn {

package/package/containers/StandardSideSheet.svelte

@@ -17,7 +17,7 @@
 
 <div class="m3-container">
   <div class="header">
-    <span class="m3-font-title-large">{headline}</span>
+    <span>{headline}</span>
     <Button variant="text" iconType="full" onclick={close}>
       <Icon icon={iconX} />
     </Button>
@@ -36,8 +36,17 @@
     justify-content: space-between;
 
     padding: 1.5rem;
+  }
+  .header > span {
+    
+  font-family: var(--m3-font);
+  font-size: 1.375rem;
+  line-height: 1.273;
+  letter-spacing: 0;
+  font-weight: 400;
+
   }
   .header > :global(button.m3-container) {
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
   }
 </style>