m3-svelte 5.15.4 → 6.0.0

package/package/forms/Checkbox.svelte

@@ -46,8 +46,8 @@
     inset: -0.6875rem;
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: var(--m3-util-rounding-full);
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    border-radius: var(--m3-shape-full);
+    color: var(--m3c-on-surface-variant);
     cursor: pointer;
   }
 
@@ -56,16 +56,16 @@
     inset: 0.6875rem;
     border-radius: 0.125rem;
     border: solid 0.125rem currentColor;
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
   }
 
   svg {
     position: absolute;
     inset: 0;
-    color: rgb(var(--m3-scheme-on-primary));
+    color: var(--m3c-on-primary);
     opacity: 0;
     pointer-events: none;
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
     path {
       stroke-dasharray: 20.874 20.874;
       stroke-dashoffset: 20.874;
@@ -74,26 +74,26 @@
   }
 
   :global(input:focus-visible) + .layer-container {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   :global(input:checked) + .layer-container {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   :global(input:checked) + .layer-container .checkbox-box {
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
   }
 
   :global(input:checked) ~ svg {
     opacity: 1;
     path {
       stroke-dashoffset: 0;
-      transition: stroke-dashoffset var(--m3-util-easing-slow);
+      transition: stroke-dashoffset var(--m3-easing-slow);
     }
   }
 
   :global(input:disabled) + .layer-container {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     cursor: not-allowed;
   }
 
@@ -101,11 +101,11 @@
     color: transparent;
   }
   :global(input:disabled:checked) + .layer-container .checkbox-box {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
 
   :global(input:disabled) ~ svg {
-    color: rgb(var(--m3-scheme-surface));
+    color: var(--m3c-surface);
   }
 
   .m3-container {

package/package/forms/Chip.svelte

@@ -39,7 +39,7 @@
   {#if icon}
     <Icon {icon} class="leading" />
   {/if}
-  <span class="m3-font-label-large">{@render children()}</span>
+  <span>{@render children()}</span>
   {#if trailingIcon}
     <Icon icon={trailingIcon} class="trailing" />
   {/if}
@@ -60,8 +60,10 @@
 {/if}
 
 <style>
-  :root {
-    --m3-chip-shape: var(--m3-util-rounding-small);
+  @layer tokens {
+    :root {
+      --m3-chip-shape: var(--m3-shape-small);
+    }
   }
   .m3-container {
     display: flex;
@@ -71,12 +73,12 @@
     gap: 0.5rem;
     align-items: center;
 
-    background-color: rgb(var(--m3-scheme-surface));
-    color: rgb(var(--m3-scheme-on-surface-variant));
-    border: solid 1px rgb(var(--m3-scheme-outline));
+    background-color: var(--m3c-surface);
+    color: var(--m3c-on-surface-variant);
+    border: solid 1px var(--m3c-outline);
     position: relative;
     cursor: pointer;
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
   }
 
   .m3-container > :global(:is(.ripple-container, .tint)) {
@@ -87,7 +89,7 @@
     height: 1.125rem;
   }
   .m3-container:enabled:not(.input):not(.selected) > :global(.leading) {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .m3-container > :global(.leading) {
     margin-left: -0.5rem;
@@ -102,21 +104,31 @@
     margin-right: -0.25rem;
   }
 
+  span {
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+  }
+
   .assist {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
   .input {
     padding: 0 0.75rem;
   }
   .elevated {
     border-color: transparent;
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    box-shadow: var(--m3-util-elevation-1);
+    background-color: var(--m3c-surface-container-low);
+    box-shadow: var(--m3-elevation-1);
   }
   .selected {
     border-color: transparent;
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
+    background-color: var(--m3c-secondary-container);
+    color: var(--m3c-on-secondary-container);
   }
 
   .layer {
@@ -125,19 +137,19 @@
   }
   @media (hover: hover) {
     .selected:hover:enabled {
-      box-shadow: var(--m3-util-elevation-1);
+      box-shadow: var(--m3-elevation-1);
     }
     .elevated:hover:enabled {
-      box-shadow: var(--m3-util-elevation-2);
+      box-shadow: var(--m3-elevation-2);
     }
   }
 
   .m3-container:disabled {
     cursor: auto;
     box-shadow: none;
-    border-color: rgb(var(--m3-scheme-on-surface) / 0.12);
-    background-color: rgb(var(--m3-scheme-surface));
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    border-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+    background-color: var(--m3c-surface);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   .selected:disabled,
   .elevated:disabled {
@@ -145,7 +157,7 @@
   }
   .selected:disabled,
   .elevated:disabled {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
   }
 
   .m3-container {

package/package/forms/CircularProgress.svelte

@@ -25,7 +25,7 @@
     cx={size / 2}
     cy={size / 2}
     {r}
-    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke="var(--m3c-secondary-container)"
     stroke-width={thickness}
     fill="none"
   />
@@ -33,7 +33,7 @@
     cx={size / 2}
     cy={size / 2}
     {r}
-    stroke="rgb(var(--m3-scheme-primary))"
+    stroke="var(--m3c-primary)"
     stroke-width={thickness}
     stroke-dasharray="{circumference} {circumference}"
     stroke-dashoffset={(percent / -100) * circumference + circumference}
@@ -47,6 +47,6 @@
     rotate: -90deg;
   }
   circle {
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
   }
 </style>

package/package/forms/CircularProgressEstimate.svelte

@@ -32,7 +32,7 @@
     cx={size / 2}
     cy={size / 2}
     {r}
-    stroke="rgb(var(--m3-scheme-secondary-container))"
+    stroke="var(--m3c-secondary-container)"
     stroke-width={thickness}
     fill="none"
   />
@@ -40,7 +40,7 @@
     cx={size / 2}
     cy={size / 2}
     {r}
-    stroke="rgb(var(--m3-scheme-primary))"
+    stroke="var(--m3c-primary)"
     stroke-width={thickness}
     stroke-dasharray="{circumference} {circumference}"
     stroke-linecap="round"

package/package/forms/DateField.svelte

@@ -68,16 +68,14 @@ opacity: ${Math.min(t * 3, 1)};`,
 >
   <input
     type="date"
-    class="focus-none m3-font-body-large"
+    class="focus-none"
     {disabled}
     {required}
     {id}
     bind:value
     {...extra}
-    defaultValue={extra.defaultValue}
   />
-  <!-- TODO/deprecated: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
-  <label class="m3-font-body-small" for={id}>{label}</label>
+  <label for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />
     <Icon icon={iconCalendar} size={24} />
@@ -111,19 +109,28 @@ opacity: ${Math.min(t * 3, 1)};`,
     margin-block-end: 1rem;
   }
 
-  :root {
-    --m3-datefield-shape: var(--m3-util-rounding-extra-small);
+  @layer tokens {
+    :root {
+      --m3-field-shape: var(--m3-shape-extra-small);
+    }
   }
   .m3-container {
     position: relative;
-    height: calc(3.5rem + var(--m3-util-density-term));
+    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
     min-width: 15rem;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-    border-radius: var(--m3-datefield-shape) var(--m3-datefield-shape) 0 0;
-    border-bottom: solid 1px rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    background-color: var(--m3c-surface-container-highest);
+    border-radius: var(--m3-field-shape) var(--m3-field-shape) 0 0;
+    border-bottom: solid 1px var(--error, var(--m3c-on-surface-variant));
     anchor-name: var(--anchor-name);
   }
   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%;
@@ -142,13 +149,20 @@ opacity: ${Math.min(t * 3, 1)};`,
     }
 
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
   label {
+    
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
     position: absolute;
     inset-inline-start: 1rem;
     top: 0.5rem;
-    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    color: var(--error, var(--m3c-on-surface-variant));
     pointer-events: none;
   }
 
@@ -164,27 +178,27 @@ opacity: ${Math.min(t * 3, 1)};`,
     justify-content: center;
     border: none;
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface-variant));
-    border-top-right-radius: var(--m3-datefield-shape);
+    color: var(--m3c-on-surface-variant);
+    border-top-right-radius: var(--m3-field-shape);
 
     cursor: pointer;
   }
 
   .m3-container.disabled {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.04);
-    border-bottom-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
+    border-bottom-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   input:disabled,
   input:disabled + label {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   button:disabled {
-    color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
+    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
     cursor: auto;
   }
 
   .error {
-    --error: var(--m3-scheme-error);
+    --error: var(--m3c-error);
   }
 
   .picker {

package/package/forms/DateFieldOutlined.svelte

@@ -68,17 +68,15 @@ opacity: ${Math.min(t * 3, 1)};`,
 >
   <input
     type="date"
-    class="focus-none m3-font-body-large"
+    class="focus-none"
     {disabled}
     {required}
     {id}
     bind:value
     {...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-small" for={id}>{label}</label>
+  <label for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />
     <Icon icon={iconCalendar} size={24} />
@@ -114,19 +112,28 @@ opacity: ${Math.min(t * 3, 1)};`,
 
   /*
   want to customize the label's background?
-  do this: <DateFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
+  do this: <DateFieldOutlined --m3v-background="var(--m3c-surface-container)" />
   */
-  :root {
-    --m3-datefield-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;
-    height: calc(3.5rem + var(--m3-util-density-term));
+    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
     min-width: 15rem;
     anchor-name: var(--anchor-name);
   }
   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%;
@@ -144,26 +151,33 @@ opacity: ${Math.min(t * 3, 1)};`,
       text-align: right; /* work around chromium bug 41489719 */
     }
 
-    border-radius: var(--m3-datefield-outlined-shape);
+    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: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
     position: absolute;
     inset-inline-start: 0.75rem;
     top: 0;
     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: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);
     }
     pointer-events: none;
     transition: color 100ms;
@@ -171,19 +185,19 @@ opacity: ${Math.min(t * 3, 1)};`,
   .layer {
     position: absolute;
     inset: 0;
-    border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
-    border-radius: var(--m3-datefield-outlined-shape);
+    border: 1px solid var(--error, var(--m3c-outline));
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(input:hover ~ .layer) {
-      border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
+      border-color: var(--error, var(--m3c-on-surface));
     }
     &:is(input:focus ~ .layer) {
-      border-color: rgb(var(--error, var(--m3-scheme-primary)));
+      border-color: var(--error, var(--m3c-primary));
       border-width: 0.125rem;
     }
     &:is(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);
     }
   }
 
@@ -199,38 +213,38 @@ opacity: ${Math.min(t * 3, 1)};`,
     justify-content: center;
     border: none;
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface-variant));
-    border-top-right-radius: var(--m3-datefield-outlined-shape);
+    color: var(--m3c-on-surface-variant);
+    border-top-right-radius: var(--m3-field-outlined-shape);
 
     cursor: pointer;
   }
 
   @media (hover: hover) {
     button:hover {
-      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
+      background-color: oklab(from var(--m3c-on-surface-variant) l a b / 0.08);
     }
   }
   button:focus-visible,
   button:active {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
+    background-color: oklab(from var(--m3c-on-surface-variant) l a b / 0.12);
   }
 
   .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);
   }
 
   .m3-container.disabled {
     opacity: 0.38;
   }
   input:disabled {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
   }
   button:disabled {
-    color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
+    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
     cursor: auto;
   }
 

package/package/forms/DatePickerDocked.svelte

@@ -81,8 +81,10 @@
 </div>
 
 <style>
-  :root {
-    --m3-date-picker-shape: var(--m3-util-rounding-large);
+  @layer tokens {
+    :root {
+      --m3-date-picker-shape: var(--m3-shape-large);
+    }
   }
 
   .m3-container {
@@ -90,7 +92,7 @@
     position: relative;
     overflow: hidden;
     flex-direction: column;
-    background-color: rgb(var(--m3-scheme-surface-container-high));
+    background-color: var(--m3c-surface-container-high);
     width: 20.5rem;
     height: 26.75rem;
     border-radius: var(--m3-date-picker-shape);

package/package/forms/LinearProgress.svelte

@@ -13,14 +13,14 @@
     gap: 0.25rem;
   }
   .percent {
-    background-color: rgb(var(--m3-scheme-primary));
-    border-radius: var(--m3-util-rounding-full);
+    background-color: var(--m3c-primary);
+    border-radius: var(--m3-shape-full);
     flex-shrink: 0;
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
   }
   .track {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    border-radius: var(--m3-util-rounding-full);
+    background-color: var(--m3c-secondary-container);
+    border-radius: var(--m3-shape-full);
     flex-grow: 1;
   }
 </style>

package/package/forms/LinearProgressEstimate.svelte

@@ -83,8 +83,8 @@
     gap: 0.25rem;
   }
   .percent {
-    background-color: rgb(var(--m3-scheme-primary));
-    border-radius: var(--m3-util-rounding-full);
+    background-color: var(--m3c-primary);
+    border-radius: var(--m3-shape-full);
     flex-shrink: 0;
     animation: grow
       linear(
@@ -129,8 +129,8 @@
     }
   }
   .track {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    border-radius: var(--m3-util-rounding-full);
+    background-color: var(--m3c-secondary-container);
+    border-radius: var(--m3-shape-full);
     flex-grow: 1;
   }
 </style>

package/package/forms/LoadingIndicator.svelte

@@ -38,11 +38,11 @@
 
 <style>
   svg {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
     &.container {
-      background-color: rgb(var(--m3-scheme-primary-container));
-      color: rgb(var(--m3-scheme-on-primary-container));
-      border-radius: var(--m3-util-rounding-full);
+      background-color: var(--m3c-primary-container);
+      color: var(--m3c-on-primary-container);
+      border-radius: var(--m3-shape-full);
     }
     &.center {
       margin: auto;

package/package/forms/RadioAnim1.svelte

@@ -40,8 +40,8 @@
     inset: -0.625rem;
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: var(--m3-util-rounding-full);
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    border-radius: var(--m3-shape-full);
+    color: var(--m3c-on-surface-variant);
     cursor: pointer;
   }
 
@@ -50,9 +50,9 @@
     inset: 0.625rem;
     width: 1.25rem;
     height: 1.25rem;
-    border-radius: var(--m3-util-rounding-full);
+    border-radius: var(--m3-shape-full);
     border: solid 0.125rem currentColor;
-    transition: border var(--m3-util-easing-fast);
+    transition: border var(--m3-easing-fast);
   }
 
   .radio-dot {
@@ -61,17 +61,17 @@
     width: 0.625rem;
     height: 0.625rem;
     scale: 0;
-    border-radius: var(--m3-util-rounding-full);
+    border-radius: var(--m3-shape-full);
     background-color: currentColor;
-    transition: scale var(--m3-util-easing-fast-spatial);
+    transition: scale var(--m3-easing-fast-spatial);
   }
 
   :global(input:focus-visible) + .layer-container {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   :global(input:checked) + .layer-container {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
 
   :global(input:checked) + .layer-container .radio-dot {
@@ -79,7 +79,7 @@
   }
 
   :global(input:disabled) + .layer-container {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
     cursor: not-allowed;
   }