m3-svelte 5.15.4 → 6.0.0

package/package/forms/TextFieldMultiline.svelte

@@ -38,17 +38,15 @@
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
   <textarea
-    class="focus-none m3-font-body-large"
+    class="focus-none"
     placeholder=" "
     bind:value
     {id}
     {disabled}
     {required}
     {...extra}
-    defaultValue={extra.defaultValue}
   ></textarea>
-  <!-- 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>
+  <label for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}
     <Icon icon={leadingIcon} />
@@ -56,18 +54,26 @@
 </div>
 
 <style>
-  :root {
-    /* "textfield" is deprecated */
-    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
+  @layer tokens {
+    :root {
+      --m3-field-filled-shape: var(--m3-shape-extra-small);
+    }
   }
   .m3-container {
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: calc(5rem + var(--m3-util-density-term));
+    min-height: calc(5rem + (var(--m3v-density) * 0.25rem));
     min-width: 15rem;
   }
   textarea {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset: 0;
     width: 100%;
@@ -76,31 +82,42 @@
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
     border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-    color: rgb(var(--m3-scheme-on-surface));
+    background-color: var(--m3c-surface-container-highest);
+    color: var(--m3c-on-surface);
     resize: none;
   }
   label {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset-inline-start: 1rem;
     top: 50%;
     translate: 0 -50%;
-    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    color: var(--error, var(--m3c-on-surface-variant));
     &:is(textarea:hover ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      color: var(--error, var(--m3c-on-surface));
     }
     &:is(textarea:focus ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-primary)));
+      color: var(--error, var(--m3c-primary));
     }
     &:is(textarea:disabled ~ label) {
-      color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
+      
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
       top: 0.5rem;
       translate: 0 0;
-      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:
@@ -118,7 +135,7 @@
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
+      background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
     }
   }
   .layer::after {
@@ -129,7 +146,7 @@
     bottom: 0;
 
     height: 1px;
-    background-color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    background-color: var(--error, var(--m3c-on-surface-variant));
     transition: all 100ms;
   }
   .m3-container > :global(svg) {
@@ -137,13 +154,13 @@
     width: 1.5rem;
     height: 1.5rem;
     margin-inline-start: 0.75rem;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     pointer-events: none;
   }
 
   textarea:focus ~ .layer::after {
     height: 0.125rem;
-    background-color: rgb(var(--error, var(--m3-scheme-primary)));
+    background-color: var(--error, var(--m3c-primary));
   }
 
   .leading-icon > textarea {
@@ -153,21 +170,21 @@
     inset-inline-start: 3.25rem;
   }
   .error {
-    --error: var(--m3-scheme-error);
+    --error: var(--m3c-error);
   }
   .error > textarea:hover ~ label,
   .error > textarea:hover ~ .layer {
-    --error: var(--m3-scheme-on-error-container);
+    --error: var(--m3c-on-error-container);
   }
   textarea:disabled {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.04);
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   textarea:disabled ~ .layer::after {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   textarea:disabled ~ :global(svg) {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
 
   .m3-container {

package/package/forms/TextFieldOutlined.svelte

@@ -35,7 +35,7 @@
   class:error
 >
   <input
-    class="focus-none m3-font-body-large"
+    class="focus-none"
     placeholder=" "
     bind:value
     onkeydown={(e) => e.key == "Enter" && enter?.()}
@@ -43,11 +43,9 @@
     {disabled}
     {required}
     {...extra}
-    defaultValue={extra.defaultValue}
   />
-  <!-- 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>
+  <label for={id}>{label}</label>
   {#if leadingIcon}
     <Icon icon={leadingIcon} class="leading" />
   {/if}
@@ -63,23 +61,28 @@
 <style>
   /*
   want to customize the label's background?
-  do this: <TextFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
+  do this: <TextFieldOutlined --m3v-background="var(--m3c-surface-container)" />
   */
-  :root {
-    /* "textfield" is deprecated */
-    --m3-field-outlined-shape: var(
-      --m3-textfield-outlined-shape,
-      var(--m3-util-rounding-extra-small)
-    );
+  @layer tokens {
+    :root {
+      --m3-field-outlined-shape: var(--m3-shape-extra-small);
+    }
   }
   .m3-container {
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: calc(3.5rem + var(--m3-util-density-term));
+    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
     min-width: 15rem;
   }
   input {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset: 0;
     width: 100%;
@@ -89,30 +92,41 @@
     padding: 1rem;
     border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
   label {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset-inline-start: 0.75rem;
     top: 50%;
     translate: 0 -50%;
-    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
+    color: var(--error, var(--m3c-on-surface-variant));
+    background-color: var(--m3v-background);
     padding: 0 0.25rem;
     &:is(input:hover ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      color: var(--error, var(--m3c-on-surface));
     }
     &:is(input:enabled:focus ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-primary)));
+      color: var(--error, var(--m3c-primary));
     }
     &:is(input:disabled ~ label) {
-      color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
+      
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
       top: 0;
-      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:
@@ -125,22 +139,22 @@
   .layer {
     position: absolute;
     inset: 0;
-    border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
+    border: 1px solid var(--error, var(--m3c-outline));
     border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {
-      border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      border-color: var(--error, var(--m3c-on-surface));
     }
     &:is(input:enabled:focus ~ .layer) {
-      border-color: rgb(var(--error, var(--m3-scheme-primary)));
+      border-color: var(--error, var(--m3c-primary));
       border-width: 0.125rem;
     }
   }
   .m3-container :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     pointer-events: none;
   }
   .m3-container > :global(.leading) {
@@ -175,21 +189,21 @@
   }
 
   .error {
-    --error: var(--m3-scheme-error);
+    --error: var(--m3c-error);
   }
   .error > input:hover ~ label,
   .error > input:hover ~ .layer {
-    --error: var(--m3-scheme-on-error-container);
+    --error: var(--m3c-on-error-container);
   }
 
   input:disabled {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   input:disabled ~ .layer {
-    border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    border-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   input:disabled ~ :global(svg) {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
 
   .m3-container {

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -38,18 +38,16 @@
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
   <textarea
-    class="focus-none m3-font-body-large"
+    class="focus-none"
     placeholder=" "
     bind:value
     {id}
     {disabled}
     {required}
     {...extra}
-    defaultValue={extra.defaultValue}
   ></textarea>
-  <!-- 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>
+  <label for={id}>{label}</label>
   {#if leadingIcon}
     <Icon icon={leadingIcon} />
   {/if}
@@ -58,23 +56,28 @@
 <style>
   /*
   want to customize the label's background?
-  do this: <TextFieldOutlinedMultiline --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
+  do this: <TextFieldOutlinedMultiline --m3v-background="var(--m3c-surface-container)" />
   */
-  :root {
-    /* "textfield" is deprecated */
-    --m3-field-outlined-shape: var(
-      --m3-textfield-outlined-shape,
-      var(--m3-util-rounding-extra-small)
-    );
+  @layer tokens {
+    :root {
+      --m3-field-outlined-shape: var(--m3-shape-extra-small);
+    }
   }
   .m3-container {
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: calc(5rem + var(--m3-util-density-term));
+    min-height: calc(5rem + (var(--m3v-density) * 0.25rem));
     min-width: 15rem;
   }
   textarea {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset: 0;
     width: 100%;
@@ -84,31 +87,42 @@
     padding: 1rem;
     border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
     resize: none;
   }
   label {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     position: absolute;
     inset-inline-start: 0.75rem;
     top: 50%;
     translate: 0 -50%;
-    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
+    color: var(--error, var(--m3c-on-surface-variant));
+    background-color: var(--m3v-background);
     padding: 0 0.25rem;
     &:is(textarea:hover ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      color: var(--error, var(--m3c-on-surface));
     }
     &:is(textarea:focus ~ label) {
-      color: rgb(var(--error, var(--m3-scheme-primary)));
+      color: var(--error, var(--m3c-primary));
     }
     &:is(textarea:disabled ~ label) {
-      color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
+      
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
       top: 0;
-      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:
@@ -121,15 +135,15 @@
   .layer {
     position: absolute;
     inset: 0;
-    border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
+    border: 1px solid var(--error, var(--m3c-outline));
     border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {
-      border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      border-color: var(--error, var(--m3c-on-surface));
     }
     &:is(textarea:enabled:focus ~ .layer) {
-      border-color: rgb(var(--error, var(--m3-scheme-primary)));
+      border-color: var(--error, var(--m3c-primary));
       border-width: 0.125rem;
     }
   }
@@ -138,7 +152,7 @@
     width: 1.5rem;
     height: 1.5rem;
     margin-inline-start: 0.75rem;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     pointer-events: none;
   }
 
@@ -150,21 +164,21 @@
   }
 
   .error {
-    --error: var(--m3-scheme-error);
+    --error: var(--m3c-error);
   }
   .error > textarea:hover ~ label,
   .error > textarea:hover ~ .layer {
-    --error: var(--m3-scheme-on-error-container);
+    --error: var(--m3c-on-error-container);
   }
 
   textarea:disabled {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   textarea:disabled ~ .layer {
-    border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    border-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   textarea:disabled ~ :global(svg) {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
 
   .m3-container {

package/package/forms/WavyLinearProgress.svelte

@@ -36,12 +36,7 @@
 </script>
 
 <svg viewBox="0 0 {width} {height}">
-  <path
-    fill="none"
-    stroke="rgb(var(--m3-scheme-primary))"
-    stroke-width={thickness}
-    stroke-linecap="round"
-  >
+  <path fill="none" stroke="var(--m3c-primary)" stroke-width={thickness} stroke-linecap="round">
     <animate
       attributeName="d"
       dur="1s"
@@ -51,7 +46,7 @@
   </path>
   <line
     fill="none"
-    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke="var(--m3c-secondary-container)"
     stroke-width={thickness}
     stroke-linecap="round"
     x1={percentX + thickness + 4}

package/package/forms/WavyLinearProgressEstimate.svelte

@@ -59,12 +59,7 @@
 </script>
 
 <svg viewBox="0 0 {width} {height}">
-  <path
-    fill="none"
-    stroke="rgb(var(--m3-scheme-primary))"
-    stroke-width={thickness}
-    stroke-linecap="round"
-  >
+  <path fill="none" stroke="var(--m3c-primary)" stroke-width={thickness} stroke-linecap="round">
     <animate attributeName="d" dur="{endTime}s" values={expressiveSMIL} />
     <animate
       attributeName="d"
@@ -76,7 +71,7 @@
   </path>
   <line
     fill="none"
-    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke="var(--m3c-secondary-container)"
     stroke-width={thickness}
     stroke-linecap="round"
     y1={height / 2}

package/package/forms/_picker/CalendarPicker.svelte

@@ -34,7 +34,7 @@
 
 <div class="m3-container">
   {#each "SMTWTFS" as day}
-    <div class="day m3-font-body-small">{day}</div>
+    <div class="day">{day}</div>
   {/each}
   {#each makeCalendar(focusedYear, focusedMonth) as day (day.iso + (day.disabled ? "-disabled" : ""))}
     <Item
@@ -58,6 +58,13 @@
     gap: 0.25rem;
   }
   .day {
+    
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;
@@ -65,6 +72,6 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 </style>

package/package/forms/_picker/FocusPicker.svelte

@@ -16,12 +16,7 @@
 
 <div class="m3-container">
   {#each options as { name, selected, activate }}
-    <button
-      type="button"
-      class="m3-font-body-large"
-      onclick={activate}
-      use:conditionalScroll={selected}
-    >
+    <button type="button" onclick={activate} use:conditionalScroll={selected}>
       <Layer />
       {#if selected}
         <Icon icon={iconCheck} />
@@ -40,6 +35,13 @@
     margin-bottom: 1.25rem;
   }
   button {
+    
+  font-family: var(--m3-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+
     display: inline-flex;
     align-items: center;
     height: 3rem;
@@ -47,7 +49,7 @@
     flex-shrink: 0;
 
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
     border: none;
     cursor: pointer;
     position: relative;

package/package/forms/_picker/Header.svelte

@@ -37,7 +37,7 @@
     </button>
     <button
       type="button"
-      class="chooser m3-font-label-large"
+      class="chooser"
       onclick={monthClick}
       disabled={currentView == "year"}
     >
@@ -62,7 +62,7 @@
     </button>
     <button
       type="button"
-      class="chooser m3-font-label-large"
+      class="chooser"
       onclick={yearClick}
       disabled={currentView == "month"}
     >
@@ -100,7 +100,7 @@
     justify-content: center;
 
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     border: none;
     padding: 0;
     cursor: pointer;
@@ -108,10 +108,17 @@
   }
   button:disabled {
     cursor: auto;
-    color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
+    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
   }
 
   .chooser {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
     flex-grow: 1;
   }
   .chooser :global(svg) {
@@ -129,7 +136,7 @@
   }
 
   .choosing {
-    border-color: rgb(var(--m3-scheme-outline-variant));
+    border-color: var(--m3c-outline-variant);
   }
   .choosing .arrow {
     opacity: 0;