m3-svelte 5.15.5 → 6.0.0

package/package/nav/Tabs.svelte

@@ -31,7 +31,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </label>
   {/each}
   <div class="bar"></div>
@@ -41,7 +41,7 @@
   .m3-container {
     display: flex;
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
   }
   input {
     position: absolute;
@@ -52,7 +52,7 @@
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   label {
     flex: 1 0;
@@ -67,35 +67,44 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   label > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  label > span {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+  }
 
   @media (hover: hover) {
     label:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   input:focus-visible + label,
   input:active + label,
   input:checked + label {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   .bar {
     position: absolute;
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     width: calc(100% / var(--items));
     height: 0;
     bottom: 0;
     pointer-events: none;
-    transition: var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-easing-fast-spatial);
   }
   input:checked:nth-of-type(1) ~ .bar {
     inset-inline-start: 0;
@@ -128,7 +137,7 @@
     height: 1.5rem;
   }
   .primary > input:checked + label {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;

package/package/nav/TabsLink.svelte

@@ -34,7 +34,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </a>
   {/each}
   <div class="bar"></div>
@@ -44,13 +44,13 @@
   .m3-container {
     display: flex;
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
   }
   .divider {
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   a {
     flex: 1 0;
@@ -65,36 +65,45 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   a > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  a > span {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+  }
 
   @media (hover: hover) {
     a:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   a:focus-visible,
   a:active,
   a.selected {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   .bar {
     position: absolute;
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     width: calc(100% / var(--items));
     height: 0.125rem;
     left: calc(100% / var(--items) * var(--i));
     bottom: 0;
     pointer-events: none;
-    transition: var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-easing-fast-spatial);
   }
 
   .primary > a {
@@ -109,7 +118,7 @@
     height: 1.5rem;
   }
   .primary > a.selected {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;

package/package/nav/VariableTabs.svelte

@@ -90,7 +90,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </label>
   {/each}
   <div class="bar"></div>
@@ -100,7 +100,7 @@
   .m3-container {
     display: grid;
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
     grid-template-columns: repeat(var(--items), auto);
     padding-inline: 1rem;
     justify-content: start;
@@ -115,7 +115,7 @@
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   label {
     height: 3rem;
@@ -128,25 +128,34 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   label > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  label > span {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+  }
 
   @media (hover: hover) {
     label:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   input:focus-visible + label,
   input:active + label,
   input:checked + label {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   label,
@@ -154,7 +163,7 @@
     grid-row: 1;
   }
   .bar {
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     height: 0.125rem;
     z-index: 1;
     align-self: end;
@@ -203,7 +212,7 @@
     height: 1.5rem;
   }
   .primary > input:checked + label {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;

package/package/nav/VariableTabsLink.svelte

@@ -93,7 +93,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </a>
   {/each}
   <div class="bar" style="grid-column: {items.findIndex((i) => i.value == tab) + 1}"></div>
@@ -104,7 +104,7 @@
     display: grid;
     grid-template-columns: repeat(var(--items), auto);
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
     padding-inline: 1rem;
     justify-content: start;
     overflow-x: auto;
@@ -113,7 +113,7 @@
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   a {
     height: 3rem;
@@ -126,25 +126,34 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   a > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  a > span {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+  }
 
   @media (hover: hover) {
     a:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   a:focus-visible,
   a:active,
   a.selected {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   a,
@@ -152,7 +161,7 @@
     grid-row: 1;
   }
   .bar {
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     height: 0.125rem;
     z-index: 1;
     align-self: end;
@@ -171,7 +180,7 @@
     height: 1.5rem;
   }
   .primary > a.selected {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.15.5",
+  "version": "6.0.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -22,11 +22,9 @@
       "svelte": "./package/index.js"
     },
     "./misc/styles.css": {
-      "import": "./package/misc/styles.css",
       "style": "./package/misc/styles.css"
     },
     "./misc/recommended-styles.css": {
-      "import": "./package/misc/recommended-styles.css",
       "style": "./package/misc/recommended-styles.css"
     },
     "./misc/tailwind-styles.css": {
@@ -35,32 +33,37 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "~0.0.1763966051",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11763580498000",
-    "svelte": "^5.43.14"
+    "@ktibow/iconset-material-symbols": "~0.0.1764827375",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11763580498000"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.39.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.47.1",
-    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/flubber": "^0.4.0",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.4",
+    "eslint-plugin-svelte": "^3.13.1",
     "fast-glob": "^3.3.3",
     "flubber": "^0.4.2",
     "globals": "^16.5.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
+    "svelte": "^5.45.6",
     "svelte-check": "^4.3.4",
     "svelte-highlight": "^7.9.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.2.4"
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-functions-mixins": "^0.1.0",
+    "vite-plugin-token-shaker": "^0.0.3"
+  },
+  "peerDependencies": {
+    "svelte": "^5.40.0"
   },
   "keywords": [
     "svelte",

package/package/containers/NewSnackbar.svelte

@@ -1,113 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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/forms/CircularProgressIndeterminate.svelte

@@ -1,62 +0,0 @@
-<!--
-@component
-@deprecated use LoadingIndicator or one of the Estimate components instead
--->
-<script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
-
-  let extra: HTMLAttributes<SVGElement> = $props();
-</script>
-
-<svg
-  viewBox="0 0 48 48"
-  xmlns="http://www.w3.org/2000/svg"
-  class="m3-container"
-  role="progressbar"
-  {...extra}
->
-  <circle
-    cx="24"
-    cy="24"
-    r="20"
-    stroke="rgb(var(--m3-scheme-primary))"
-    stroke-width="4"
-    stroke-dasharray="125.66 125.66"
-    stroke-linecap="round"
-    fill="none"
-  />
-</svg>
-
-<style>
-  svg {
-    width: 3rem;
-    height: 3rem;
-    animation: progressRotate 2.2s infinite linear;
-  }
-  circle {
-    transition: var(--m3-util-easing-fast);
-    animation: progressSize 2.2s infinite linear;
-  }
-  @keyframes progressRotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    40% {
-      transform: rotate(360deg);
-    }
-    100% {
-      transform: rotate(1080deg);
-    }
-  }
-  @keyframes progressSize {
-    0% {
-      stroke-dashoffset: 125.66;
-    }
-    40% {
-      stroke-dashoffset: 62.83;
-    }
-    100% {
-      stroke-dashoffset: 125.66;
-    }
-  }
-</style>

package/package/forms/CircularProgressIndeterminate.svelte.d.ts

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

package/package/forms/LinearProgressIndeterminate.svelte

@@ -1,57 +0,0 @@
-<!--
-@component
-@deprecated use LoadingIndicator or one of the Estimate components instead
--->
-<script lang="ts">
-  import type { DivAttrs } from "../misc/typing-utils";
-
-  let extra: DivAttrs = $props();
-</script>
-
-<div class="m3-container" role="progressbar" {...extra}>
-  <div class="percent"></div>
-</div>
-
-<style>
-  @layer tokens {
-    :root {
-      --m3-linear-progress-shape: var(--m3-util-rounding-full);
-    }
-  }
-  .m3-container {
-    display: inline-flex;
-    background-color: rgb(var(--m3-scheme-primary-container));
-    height: 0.25rem;
-    min-width: 8rem;
-    position: relative;
-    overflow: hidden;
-    border-radius: var(--m3-linear-progress-shape);
-  }
-  .percent {
-    background-color: rgb(var(--m3-scheme-primary));
-    animation: progress infinite 1.5s ease-out;
-    border-radius: var(--m3-linear-progress-shape);
-    width: 50%;
-    top: 0;
-    bottom: 0;
-    position: absolute;
-  }
-  @keyframes progress {
-    0% {
-      left: -50%;
-    }
-    100% {
-      left: 125%;
-    }
-  }
-
-  .m3-container {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .percent {
-      background-color: selecteditem;
-    }
-  }
-</style>

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

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

package/package/forms/SliderTicks.svelte

@@ -1,12 +0,0 @@
-<!--
-@component
-@deprecated use Slider directly instead
--->
-<script lang="ts">
-  import type { ComponentProps } from "svelte";
-  import Slider from "./Slider.svelte";
-
-  let props: Omit<ComponentProps<typeof Slider>, "stops"> = $props();
-</script>
-
-<Slider {...props} stops={true}></Slider>

package/package/forms/SliderTicks.svelte.d.ts

@@ -1,18 +0,0 @@
-/** @deprecated use Slider directly instead */
-declare const SliderTicks: import("svelte").Component<Omit<{
-    value: number;
-    min?: number;
-    max?: number;
-    step?: number | "any";
-    disabled?: boolean;
-    showValue?: boolean;
-    size?: "xs" | "s" | "m" | "l" | "xl";
-    leadingIcon?: import("@iconify/types").IconifyIcon;
-    trailingIcon?: import("@iconify/types").IconifyIcon;
-    stops?: boolean;
-    endStops?: boolean;
-    vertical?: boolean;
-    format?: (n: number) => string;
-} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "stops">, {}, "">;
-type SliderTicks = ReturnType<typeof SliderTicks>;
-export default SliderTicks;