m3-svelte 5.15.2 → 5.15.4

package/package/buttons/Button.svelte

@@ -61,11 +61,11 @@
     --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);
+    font-family: var(--m3-font-label);
+    font-size: var(--m3-font-label-large-size);
+    line-height: var(--m3-font-label-large-height);
+    letter-spacing: var(--m3-font-label-large-tracking);
+    font-weight: var(--m3-font-label-large-weight);
   }
 
   .m3-container.s {
@@ -75,11 +75,11 @@
     --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);
+    font-family: var(--m3-font-label);
+    font-size: var(--m3-font-label-large-size);
+    line-height: var(--m3-font-label-large-height);
+    letter-spacing: var(--m3-font-label-large-tracking);
+    font-weight: var(--m3-font-label-large-weight);
   }
 
   .m3-container.m {
@@ -89,11 +89,11 @@
     --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);
+    font-family: var(--m3-font-title);
+    font-size: var(--m3-font-title-medium-size);
+    line-height: var(--m3-font-title-medium-height);
+    letter-spacing: var(--m3-font-title-medium-tracking);
+    font-weight: var(--m3-font-title-medium-weight);
   }
 
   .m3-container.l {
@@ -103,11 +103,11 @@
     --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);
+    font-family: var(--m3-font-headline);
+    font-size: var(--m3-font-headline-small-size);
+    line-height: var(--m3-font-headline-small-height);
+    letter-spacing: var(--m3-font-headline-small-tracking);
+    font-weight: var(--m3-font-headline-small-weight);
   }
 
   .m3-container.xl {
@@ -117,11 +117,11 @@
     --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);
+    font-family: var(--m3-font-headline);
+    font-size: var(--m3-font-headline-large-size);
+    line-height: var(--m3-font-headline-large-height);
+    letter-spacing: var(--m3-font-headline-large-tracking);
+    font-weight: var(--m3-font-headline-large-weight);
   }
 
   .m3-container {

package/package/forms/Select.svelte

@@ -88,9 +88,7 @@
     display: flex;
     align-items: center;
     height: calc(3.5rem + var(--m3-util-density-term));
-    padding-top: calc(
-      var(--m3-font-body-small-size, 0.75rem) * var(--m3-font-body-small-height, 1.333)
-    );
+    padding-top: calc(var(--m3-font-body-small-size) * var(--m3-font-body-small-height));
     padding-inline: 1rem;
 
     border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
@@ -170,7 +168,7 @@
     padding-block: calc(
       (
           3rem + var(--m3-util-density-term) -
-            (var(--m3-font-body-large-size, 1rem) * var(--m3-font-body-large-height, 1.5))
+            (var(--m3-font-body-large-size) * var(--m3-font-body-large-height))
         ) /
         2
     );

package/package/forms/SelectOutlined.svelte

@@ -175,7 +175,7 @@
     padding-block: calc(
       (
           3rem + var(--m3-util-density-term) -
-            (var(--m3-font-body-large-size, 1rem) * var(--m3-font-body-large-height, 1.5))
+            (var(--m3-font-body-large-size) * var(--m3-font-body-large-height))
         ) /
         2
     );

package/package/forms/TextField.svelte

@@ -103,9 +103,9 @@
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
       top: 0.5rem;
       translate: 0 0;
-      font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1.333);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
+      font-size: var(--m3-font-body-small-size);
+      line-height: var(--m3-font-body-small-height);
+      letter-spacing: var(--m3-font-body-small-tracking);
     }
     pointer-events: none;
     transition:

package/package/forms/TextFieldMultiline.svelte

@@ -98,9 +98,9 @@
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
       top: 0.5rem;
       translate: 0 0;
-      font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1.333);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
+      font-size: var(--m3-font-body-small-size);
+      line-height: var(--m3-font-body-small-height);
+      letter-spacing: var(--m3-font-body-small-tracking);
     }
     pointer-events: none;
     transition:

package/package/forms/TextFieldOutlined.svelte

@@ -110,9 +110,9 @@
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
       top: 0;
-      font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1.333);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
+      font-size: var(--m3-font-body-small-size);
+      line-height: var(--m3-font-body-small-height);
+      letter-spacing: var(--m3-font-body-small-tracking);
     }
     pointer-events: none;
     transition:

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -106,9 +106,9 @@
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
       top: 0;
-      font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1.333);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
+      font-size: var(--m3-font-body-small-size);
+      line-height: var(--m3-font-body-small-height);
+      letter-spacing: var(--m3-font-body-small-tracking);
     }
     pointer-events: none;
     transition:

package/package/misc/styles.css

@@ -1,218 +1,294 @@
-/* Needed for elevation to work */
-:root {
-  --m3-util-elevation-0: none;
-  --m3-util-elevation-1:
+@property --m3-util-bottom-offset {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --m3-util-density {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@layer theme {
+  :root {
+    /* Needed for elevation to work */
+    --m3-util-elevation-0: none;
+    --m3-util-elevation-1:
     /* Spot */
-    0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
-    /* Ambient */ 0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15);
-  --m3-util-elevation-2:
-    0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
-    0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
-  --m3-util-elevation-3:
-    0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
-    0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
-  --m3-util-elevation-4:
-    0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
-    0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
-  --m3-util-elevation-5:
-    0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
-    0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
+      0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
+      /* Ambient */ 0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15);
+    --m3-util-elevation-2:
+      0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
+      0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
+    --m3-util-elevation-3:
+      0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
+      0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
+    --m3-util-elevation-4:
+      0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
+      0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
+    --m3-util-elevation-5:
+      0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
+      0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
 
-  /* Sizing */
-  --m3-util-bottom-offset: 0;
-  --m3-util-density: 0;
-  --m3-util-density-term: calc(var(--m3-util-density) * 0.25rem);
+    /* Sizing */
+    --m3-util-density-term: calc(var(--m3-util-density) * 0.25rem);
 
-  /* Shapes */
-  --m3-util-rounding-none: 0;
-  --m3-util-rounding-extra-small: 4px;
-  --m3-util-rounding-small: 8px;
-  --m3-util-rounding-medium: 12px;
-  --m3-util-rounding-large: 16px;
-  --m3-util-rounding-extra-large: 28px;
-  --m3-util-rounding-full: calc(infinity * 1px);
-  --m3-util-optical-centering-coefficient: 0.11;
+    /* Shapes */
+    --m3-util-rounding-none: 0;
+    --m3-util-rounding-extra-small: 4px;
+    --m3-util-rounding-small: 8px;
+    --m3-util-rounding-medium: 12px;
+    --m3-util-rounding-large: 16px;
+    --m3-util-rounding-extra-large: 28px;
+    --m3-util-rounding-full: calc(infinity * 1px);
+    --m3-util-optical-centering-coefficient: 0.11;
 
-  --m3-font: Roboto, system-ui;
-  --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
+    /* Typography */
+    --m3-font: Roboto, system-ui;
+    --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
+    --m3-font-display: var(--m3-font);
+    --m3-font-headline: var(--m3-font);
+    --m3-font-title: var(--m3-font);
+    --m3-font-label: var(--m3-font);
+    --m3-font-body: var(--m3-font);
+    --m3-font-display-large-size: 3.563rem;
+    --m3-font-display-large-height: 1.123;
+    --m3-font-display-large-tracking: 0;
+    --m3-font-display-large-weight: 400;
+    --m3-font-display-medium-size: 2.813rem;
+    --m3-font-display-medium-height: 1.156;
+    --m3-font-display-medium-tracking: 0;
+    --m3-font-display-medium-weight: 400;
+    --m3-font-display-small-size: 2.25rem;
+    --m3-font-display-small-height: 1.222;
+    --m3-font-display-small-tracking: 0;
+    --m3-font-display-small-weight: 400;
+    --m3-font-headline-large-size: 2rem;
+    --m3-font-headline-large-height: 1.25;
+    --m3-font-headline-large-tracking: 0;
+    --m3-font-headline-large-weight: 400;
+    --m3-font-headline-medium-size: 1.75rem;
+    --m3-font-headline-medium-height: 1.286;
+    --m3-font-headline-medium-tracking: 0;
+    --m3-font-headline-medium-weight: 400;
+    --m3-font-headline-small-size: 1.5rem;
+    --m3-font-headline-small-height: 1.333;
+    --m3-font-headline-small-tracking: 0;
+    --m3-font-headline-small-weight: 400;
+    --m3-font-title-large-size: 1.375rem;
+    --m3-font-title-large-height: 1.273;
+    --m3-font-title-large-tracking: 0;
+    --m3-font-title-large-weight: 400;
+    --m3-font-title-medium-size: 1rem;
+    --m3-font-title-medium-height: 1.5;
+    --m3-font-title-medium-tracking: 0;
+    --m3-font-title-medium-weight: 500;
+    --m3-font-title-small-size: 0.875rem;
+    --m3-font-title-small-height: 1.429;
+    --m3-font-title-small-tracking: 0.006rem;
+    --m3-font-title-small-weight: 500;
+    --m3-font-label-large-size: 0.875rem;
+    --m3-font-label-large-height: 1.429;
+    --m3-font-label-large-tracking: 0.006rem;
+    --m3-font-label-large-weight: 500;
+    --m3-font-label-medium-size: 0.75rem;
+    --m3-font-label-medium-height: 1.333;
+    --m3-font-label-medium-tracking: 0.031rem;
+    --m3-font-label-medium-weight: 500;
+    --m3-font-label-small-size: 0.688rem;
+    --m3-font-label-small-height: 1.455;
+    --m3-font-label-small-tracking: 0.031rem;
+    --m3-font-label-small-weight: 500;
+    --m3-font-body-large-size: 1rem;
+    --m3-font-body-large-height: 1.5;
+    --m3-font-body-large-tracking: 0;
+    --m3-font-body-large-weight: 400;
+    --m3-font-body-medium-size: 0.875rem;
+    --m3-font-body-medium-height: 1.429;
+    --m3-font-body-medium-tracking: 0.016rem;
+    --m3-font-body-medium-weight: 400;
+    --m3-font-body-small-size: 0.75rem;
+    --m3-font-body-small-height: 1.333;
+    --m3-font-body-small-tracking: 0.025rem;
+    --m3-font-body-small-weight: 400;
 
-  /* Expressive easing */
-  --m3-util-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
-  --m3-util-duration-fast-spatial: 350ms;
-  --m3-util-easing-fast-spatial: var(--m3-util-timing-function-fast-spatial)
-    var(--m3-util-duration-fast-spatial);
+    /* Expressive easing */
+    --m3-util-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+    --m3-util-duration-fast-spatial: 350ms;
+    --m3-util-easing-fast-spatial: var(--m3-util-timing-function-fast-spatial)
+      var(--m3-util-duration-fast-spatial);
 
-  --m3-util-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
-  --m3-util-duration-spatial: 500ms;
-  --m3-util-easing-spatial: var(--m3-util-timing-function-spatial) var(--m3-util-duration-spatial);
+    --m3-util-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
+    --m3-util-duration-spatial: 500ms;
+    --m3-util-easing-spatial: var(--m3-util-timing-function-spatial) var(--m3-util-duration-spatial);
 
-  --m3-util-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
-  --m3-util-duration-slow-spatial: 650ms;
-  --m3-util-easing-slow-spatial: var(--m3-util-timing-function-slow-spatial)
-    var(--m3-util-duration-slow-spatial);
+    --m3-util-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+    --m3-util-duration-slow-spatial: 650ms;
+    --m3-util-easing-slow-spatial: var(--m3-util-timing-function-slow-spatial)
+      var(--m3-util-duration-slow-spatial);
 
-  --m3-util-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
-  --m3-util-duration-fast: 150ms;
-  --m3-util-easing-fast: var(--m3-util-timing-function-fast) var(--m3-util-duration-fast);
+    --m3-util-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+    --m3-util-duration-fast: 150ms;
+    --m3-util-easing-fast: var(--m3-util-timing-function-fast) var(--m3-util-duration-fast);
 
-  --m3-util-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
-  --m3-util-duration: 200ms;
-  --m3-util-easing: var(--m3-util-timing-function) var(--m3-util-duration);
+    --m3-util-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
+    --m3-util-duration: 200ms;
+    --m3-util-easing: var(--m3-util-timing-function) var(--m3-util-duration);
 
-  --m3-util-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
-  --m3-util-duration-slow: 300ms;
-  --m3-util-easing-slow: var(--m3-util-timing-function-slow) var(--m3-util-duration-slow);
+    --m3-util-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+    --m3-util-duration-slow: 300ms;
+    --m3-util-easing-slow: var(--m3-util-timing-function-slow) var(--m3-util-duration-slow);
 
-  --m3-util-timing-function-emphasized: linear(
-    0,
-    0.034 6%,
-    0.073 9%,
-    0.126 11%,
-    0.194 13%,
-    0.273 15%,
-    0.351 16%,
-    0.541 18%,
-    0.652 20%,
-    0.755 24%,
-    0.839 30%,
-    0.91 39%,
-    0.959 53%,
-    0.989 72%,
-    1
-  );
-  --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);
+    --m3-util-timing-function-emphasized: linear(
+      0,
+      0.034 6%,
+      0.073 9%,
+      0.126 11%,
+      0.194 13%,
+      0.273 15%,
+      0.351 16%,
+      0.541 18%,
+      0.652 20%,
+      0.755 24%,
+      0.839 30%,
+      0.91 39%,
+      0.959 53%,
+      0.989 72%,
+      1
+    );
+    --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 */
-  --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);
+    /* 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);
 
-  accent-color: rgb(var(--m3-scheme-primary));
-}
-.m3-font-display-large,
-.m3-font-display-medium,
-.m3-font-display-small {
-  font-family: var(--m3-font-display, var(--m3-font));
-}
-.m3-font-headline-large,
-.m3-font-headline-medium,
-.m3-font-headline-small {
-  font-family: var(--m3-font-headline, var(--m3-font));
-}
-.m3-font-title-large,
-.m3-font-title-medium,
-.m3-font-title-small {
-  font-family: var(--m3-font-title, var(--m3-font));
-}
-.m3-font-label-large,
-.m3-font-label-medium,
-.m3-font-label-small {
-  font-family: var(--m3-font-label, var(--m3-font));
-}
-.m3-font-body-large,
-.m3-font-body-medium,
-.m3-font-body-small {
-  font-family: var(--m3-font-body, var(--m3-font));
-}
-/* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
-.m3-font-display-large {
-  font-size: var(--m3-font-display-large-size, 3.563rem);
-  line-height: var(--m3-font-display-large-height, 1.123);
-  letter-spacing: var(--m3-font-display-large-tracking, 0);
-  font-weight: var(--m3-font-display-large-weight, 400);
-}
-.m3-font-display-medium {
-  font-size: var(--m3-font-display-medium-size, 2.813rem);
-  line-height: var(--m3-font-display-medium-height, 1.156);
-  letter-spacing: var(--m3-font-display-medium-tracking, 0);
-  font-weight: var(--m3-font-display-medium-weight, 400);
-}
-.m3-font-display-small {
-  font-size: var(--m3-font-display-small-size, 2.25rem);
-  line-height: var(--m3-font-display-small-height, 1.222);
-  letter-spacing: var(--m3-font-display-small-tracking, 0);
-  font-weight: var(--m3-font-display-small-weight, 400);
-}
-/* Headlines are best-suited for short, high-emphasis text on smaller screens. */
-.m3-font-headline-large {
-  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-font-headline-medium {
-  font-size: var(--m3-font-headline-medium-size, 1.75rem);
-  line-height: var(--m3-font-headline-medium-height, 1.286);
-  letter-spacing: var(--m3-font-headline-medium-tracking, 0);
-  font-weight: var(--m3-font-headline-medium-weight, 400);
-}
-.m3-font-headline-small {
-  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);
-}
-/* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
-.m3-font-title-large {
-  font-size: var(--m3-font-title-large-size, 1.375rem);
-  line-height: var(--m3-font-title-large-height, 1.273);
-  letter-spacing: var(--m3-font-title-large-tracking, 0);
-  font-weight: var(--m3-font-title-large-weight, 400);
-}
-.m3-font-title-medium {
-  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-font-title-small {
-  font-size: var(--m3-font-title-small-size, 0.875rem);
-  line-height: var(--m3-font-title-small-height, 1.429);
-  letter-spacing: var(--m3-font-title-small-tracking, 0.006rem);
-  font-weight: var(--m3-font-title-small-weight, 500);
-}
-/* Label styles are smaller, utilitarian styles, used for things like the text inside components
+    accent-color: rgb(var(--m3-scheme-primary));
+  }
+  .m3-font-display-large,
+  .m3-font-display-medium,
+  .m3-font-display-small {
+    font-family: var(--m3-font-display);
+  }
+  .m3-font-headline-large,
+  .m3-font-headline-medium,
+  .m3-font-headline-small {
+    font-family: var(--m3-font-headline);
+  }
+  .m3-font-title-large,
+  .m3-font-title-medium,
+  .m3-font-title-small {
+    font-family: var(--m3-font-title);
+  }
+  .m3-font-label-large,
+  .m3-font-label-medium,
+  .m3-font-label-small {
+    font-family: var(--m3-font-label);
+  }
+  .m3-font-body-large,
+  .m3-font-body-medium,
+  .m3-font-body-small {
+    font-family: var(--m3-font-body);
+  }
+  /* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
+  .m3-font-display-large {
+    font-size: var(--m3-font-display-large-size);
+    line-height: var(--m3-font-display-large-height);
+    letter-spacing: var(--m3-font-display-large-tracking);
+    font-weight: var(--m3-font-display-large-weight);
+  }
+  .m3-font-display-medium {
+    font-size: var(--m3-font-display-medium-size);
+    line-height: var(--m3-font-display-medium-height);
+    letter-spacing: var(--m3-font-display-medium-tracking);
+    font-weight: var(--m3-font-display-medium-weight);
+  }
+  .m3-font-display-small {
+    font-size: var(--m3-font-display-small-size);
+    line-height: var(--m3-font-display-small-height);
+    letter-spacing: var(--m3-font-display-small-tracking);
+    font-weight: var(--m3-font-display-small-weight);
+  }
+  /* Headlines are best-suited for short, high-emphasis text on smaller screens. */
+  .m3-font-headline-large {
+    font-size: var(--m3-font-headline-large-size);
+    line-height: var(--m3-font-headline-large-height);
+    letter-spacing: var(--m3-font-headline-large-tracking);
+    font-weight: var(--m3-font-headline-large-weight);
+  }
+  .m3-font-headline-medium {
+    font-size: var(--m3-font-headline-medium-size);
+    line-height: var(--m3-font-headline-medium-height);
+    letter-spacing: var(--m3-font-headline-medium-tracking);
+    font-weight: var(--m3-font-headline-medium-weight);
+  }
+  .m3-font-headline-small {
+    font-size: var(--m3-font-headline-small-size);
+    line-height: var(--m3-font-headline-small-height);
+    letter-spacing: var(--m3-font-headline-small-tracking);
+    font-weight: var(--m3-font-headline-small-weight);
+  }
+  /* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
+  .m3-font-title-large {
+    font-size: var(--m3-font-title-large-size);
+    line-height: var(--m3-font-title-large-height);
+    letter-spacing: var(--m3-font-title-large-tracking);
+    font-weight: var(--m3-font-title-large-weight);
+  }
+  .m3-font-title-medium {
+    font-size: var(--m3-font-title-medium-size);
+    line-height: var(--m3-font-title-medium-height);
+    letter-spacing: var(--m3-font-title-medium-tracking);
+    font-weight: var(--m3-font-title-medium-weight);
+  }
+  .m3-font-title-small {
+    font-size: var(--m3-font-title-small-size);
+    line-height: var(--m3-font-title-small-height);
+    letter-spacing: var(--m3-font-title-small-tracking);
+    font-weight: var(--m3-font-title-small-weight);
+  }
+  /* Label styles are smaller, utilitarian styles, used for things like the text inside components
 or for very small text in the content body, such as captions. */
-.m3-font-label-large {
-  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-font-label-medium {
-  font-size: var(--m3-font-label-medium-size, 0.75rem);
-  line-height: var(--m3-font-label-medium-height, 1.333);
-  letter-spacing: var(--m3-font-label-medium-tracking, 0.031rem);
-  font-weight: var(--m3-font-label-medium-weight, 500);
-}
-.m3-font-label-small {
-  font-size: var(--m3-font-label-small-size, 0.688rem);
-  line-height: var(--m3-font-label-small-height, 1.455);
-  letter-spacing: var(--m3-font-label-small-tracking, 0.031rem);
-  font-weight: var(--m3-font-label-small-weight, 500);
-}
-/* Body styles are used for longer passages of text in your app. */
-.m3-font-body-large {
-  font-size: var(--m3-font-body-large-size, 1rem);
-  line-height: var(--m3-font-body-large-height, 1.5);
-  letter-spacing: var(--m3-font-body-large-tracking, 0);
-  font-weight: var(--m3-font-body-large-weight, 400);
-}
-.m3-font-body-medium {
-  font-size: var(--m3-font-body-medium-size, 0.875rem);
-  line-height: var(--m3-font-body-medium-height, 1.429);
-  letter-spacing: var(--m3-font-body-medium-tracking, 0.016rem);
-  font-weight: var(--m3-font-body-medium-weight, 400);
-}
-.m3-font-body-small {
-  font-size: var(--m3-font-body-small-size, 0.75rem);
-  line-height: var(--m3-font-body-small-height, 1.333);
-  letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
-  font-weight: var(--m3-font-body-small-weight, 400);
+  .m3-font-label-large {
+    font-size: var(--m3-font-label-large-size);
+    line-height: var(--m3-font-label-large-height);
+    letter-spacing: var(--m3-font-label-large-tracking);
+    font-weight: var(--m3-font-label-large-weight);
+  }
+  .m3-font-label-medium {
+    font-size: var(--m3-font-label-medium-size);
+    line-height: var(--m3-font-label-medium-height);
+    letter-spacing: var(--m3-font-label-medium-tracking);
+    font-weight: var(--m3-font-label-medium-weight);
+  }
+  .m3-font-label-small {
+    font-size: var(--m3-font-label-small-size);
+    line-height: var(--m3-font-label-small-height);
+    letter-spacing: var(--m3-font-label-small-tracking);
+    font-weight: var(--m3-font-label-small-weight);
+  }
+  /* Body styles are used for longer passages of text in your app. */
+  .m3-font-body-large {
+    font-size: var(--m3-font-body-large-size);
+    line-height: var(--m3-font-body-large-height);
+    letter-spacing: var(--m3-font-body-large-tracking);
+    font-weight: var(--m3-font-body-large-weight);
+  }
+  .m3-font-body-medium {
+    font-size: var(--m3-font-body-medium-size);
+    line-height: var(--m3-font-body-medium-height);
+    letter-spacing: var(--m3-font-body-medium-tracking);
+    font-weight: var(--m3-font-body-medium-weight);
+  }
+  .m3-font-body-small {
+    font-size: var(--m3-font-body-small-size);
+    line-height: var(--m3-font-body-small-height);
+    letter-spacing: var(--m3-font-body-small-tracking);
+    font-weight: var(--m3-font-body-small-weight);
+  }
 }
-/* Reset a few things */
 @layer base {
+  /* Reset a few things */
   *,
   *::before,
   *::after {

package/package/nav/NavCMLXItem.svelte

@@ -160,10 +160,10 @@
     &.expanded {
       height: 3.5rem;
       padding-inline: 1.25rem;
-      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);
+      font-size: var(--m3-font-label-large-size);
+      line-height: var(--m3-font-label-large-height);
+      letter-spacing: var(--m3-font-label-large-tracking);
+      font-weight: var(--m3-font-label-large-weight);
     }
   }
 
@@ -283,10 +283,10 @@
       /* Extra large: expanded */
       height: 3.5rem;
       padding-inline: 1.25rem;
-      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);
+      font-size: var(--m3-font-label-large-size);
+      line-height: var(--m3-font-label-large-height);
+      letter-spacing: var(--m3-font-label-large-tracking);
+      font-weight: var(--m3-font-label-large-weight);
 
       .content {
         padding-inline: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.15.2",
+  "version": "5.15.4",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {