m3-svelte 5.4.0 → 5.7.0

package/package/forms/RadioAnim2.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>
@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/RadioAnim2.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const RadioAnim2: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioAnim2 = ReturnType<typeof RadioAnim2>;
 export default RadioAnim2;

package/package/forms/RadioAnim3.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>
@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/RadioAnim3.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const RadioAnim3: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioAnim3 = ReturnType<typeof RadioAnim3>;
 export default RadioAnim3;

package/package/forms/Select.svelte

@@ -47,6 +47,7 @@
 <style>
   :root {
     --m3-menu-shape: var(--m3-util-rounding-extra-small);
+    --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
   }
 
   .m3-container {
@@ -92,7 +93,7 @@
     );
     padding-inline: 1rem;
 
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     transition:
       background-color var(--m3-util-easing-fast),

package/package/forms/SelectOutlined.svelte

@@ -52,7 +52,7 @@
   */
   :root {
     --m3-menu-shape: var(--m3-util-rounding-extra-small);
-    --m3-select-outlined-shape: var(--m3-util-rounding-extra-small);
+    --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
   }
 
   .m3-container {
@@ -79,7 +79,7 @@
     position: absolute;
     inset: 0;
     border: 1px solid var(--outline-color);
-    border-radius: var(--m3-select-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
   }
@@ -109,7 +109,7 @@
     height: calc(3.5rem + var(--m3-util-density-term));
     padding-inline: 1rem;
 
-    border-radius: var(--m3-select-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
 

package/package/forms/Slider.svelte

@@ -14,7 +14,7 @@
     size = "xs",
     leadingIcon,
     trailingIcon,
-    ticks = false,
+    stops: _stops = false,
     endStops = true,
     format = (n: number) => {
       return n.toFixed(0);
@@ -30,10 +30,12 @@
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: IconifyIcon;
     trailingIcon?: IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
   } & Omit<HTMLInputAttributes, "size"> = $props();
+  // @ts-expect-error deprecated backwards compatibility with ticks
+  let stops = $derived(extra.ticks ? true : _stops);
   let containerWidth = $state(600);
 
   const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
@@ -45,23 +47,27 @@
   };
 
   const range = $derived(max - min);
-  const percent = $derived((valueDisplayed.current - min) / range);
-  const tickList = $derived.by(() => {
-    if (typeof step != "number") return [];
-
-    const ticksList = [];
-
-    for (let i = 0; i <= range; i += step) ticksList.push(i / range);
+  const handle = $derived((valueDisplayed.current - min) / range);
+  const stopList = $derived.by(() => {
+    const output: number[] = [];
+    const add = (stop: number) => {
+      if (leadingIcon && stop == 0) return;
+      if (trailingIcon && stop == 1) return;
+      output.push(stop);
+    };
+
+    if (stops && typeof step == "number") {
+      for (let i = 0; i <= range; i += step) add(i / range);
+    }
+    if (endStops && !output.includes(1)) {
+      add(1);
+    }
 
-    return ticksList;
+    return output;
   });
 </script>
 
-<div
-  class="m3-container {size}"
-  style:--percent="{percent * 100}%"
-  bind:offsetWidth={containerWidth}
->
+<div class="m3-container {size}" style:--handle={handle - 0.5} bind:offsetWidth={containerWidth}>
   <input
     type="range"
     oninput={updateValue}
@@ -72,33 +78,28 @@
     {disabled}
     {...extra}
   />
-
-  <div class="track"></div>
+  <div class="track-1">
+    {#each stopList as stop}
+      <div class="stop" style:--x={stop - 0.5}></div>
+    {/each}
+  </div>
+  <div class="track-2">
+    {#each stopList as stop}
+      <div class="stop" style:--x={stop - 0.5}></div>
+    {/each}
+  </div>
   {#if leadingIcon}
     <Icon
       icon={leadingIcon}
-      class={"leading" + (containerWidth * percent < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"leading" + (containerWidth * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
   {#if trailingIcon}
     <Icon
       icon={trailingIcon}
-      class={"trailing" + (containerWidth * (1 - percent) < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"trailing" + (containerWidth * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
-  {#if ticks}
-    {#each tickList as tick}
-      <div
-        class="tick"
-        class:hidden={Math.abs(tick - percent) < 0.01}
-        class:inactive={tick > percent}
-        style:--x={tick - 0.5}
-      ></div>
-    {/each}
-  {/if}
-  {#if endStops && !ticks && !trailingIcon}
-    <div class="endstop" class:hidden={containerWidth * (1 - percent) < 14}></div>
-  {/if}
   <div class="handle"></div>
   {#if showValue}
     <div class="value m3-font-label-large">{format(value)}</div>
@@ -118,6 +119,11 @@
     min-width: 10rem;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
+
+    --functional-width: calc(100% - 2 * (0.25rem + 0.125rem));
+    --handle-left: calc(50% + var(--functional-width) * var(--handle) - 0.125rem - 0.375rem);
+    --handle-center: calc(50% + var(--functional-width) * var(--handle));
+    --handle-right: calc(50% + var(--functional-width) * var(--handle) + 0.125rem + 0.375rem);
   }
 
   .m3-container.xs {
@@ -160,15 +166,15 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    inset-inline-start: 0.25rem;
+    inset-inline-start: 0;
+    margin-inline-start: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
   .m3-container :global(.leading.pop) {
-    inset-inline-start: var(--percent);
-    margin-inline-start: 0.625rem;
+    inset-inline-start: var(--handle-right);
     color: rgb(var(--m3-scheme-primary));
   }
 
@@ -177,113 +183,118 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    inset-inline-end: 0.25rem;
+    inset-inline-end: 0;
+    margin-inline-end: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-primary));
   }
 
   .m3-container :global(.trailing.pop) {
-    inset-inline-end: abs(100% - var(--percent));
-    margin-inline-end: 0.625rem;
+    inset-inline-end: calc(100% - var(--handle-left));
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
-  .endstop {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: var(--m3-util-rounding-full);
-    top: 50%;
-    inset-inline-end: 4px;
-    translate: 0 -50%;
-    background-color: rgb(var(--m3-scheme-on-secondary-container));
-    pointer-events: none;
-    &.hidden {
-      display: none;
-    }
-  }
-
   input {
     position: absolute;
-    inset-inline: -0.5rem;
-    width: calc(100% + 1rem);
+    width: calc(var(--functional-width) + 1rem);
+    left: 50%;
+    translate: -50% 0;
     height: 100%;
 
     opacity: 0;
     appearance: none;
     margin: 0;
-    cursor: pointer;
-  }
 
-  .track::before {
-    position: absolute;
-    content: " ";
-    inset-inline-start: 0;
-    top: 50%;
-    translate: 0 -50%;
-    width: calc(var(--percent) - 0.375rem);
-    height: var(--track-height);
-    pointer-events: none;
-
-    background-color: rgb(var(--m3-scheme-primary));
-    border-start-start-radius: var(--track-radius);
-    border-end-start-radius: var(--track-radius);
-    border-start-end-radius: var(--m3-slider-track-in-shape);
-    border-end-end-radius: var(--m3-slider-track-in-shape);
+    &:enabled {
+      cursor: pointer;
+    }
   }
 
-  .track::after {
+  .track-1,
+  .track-2 {
     position: absolute;
-    content: " ";
-    inset-inline-end: 0;
+    inset-inline: 0;
     top: 50%;
     translate: 0 -50%;
-    width: calc(100% - var(--percent) - 0.375rem);
     height: var(--track-height);
     pointer-events: none;
+  }
+  .track-1 {
+    background-color: rgb(var(--m3-scheme-primary));
+    clip-path: inset(
+      0 calc(100% - var(--handle-left)) 0 0 round var(--track-radius)
+        var(--m3-slider-track-in-shape) var(--m3-slider-track-in-shape) var(--track-radius)
+    );
+    &:dir(rtl) {
+      clip-path: inset(
+        0 0 0 calc(100% - var(--handle-left)) round var(--m3-slider-track-in-shape)
+          var(--track-radius) var(--track-radius) var(--m3-slider-track-in-shape)
+      );
+    }
 
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    border-start-start-radius: var(--m3-slider-track-in-shape);
-    border-end-start-radius: var(--m3-slider-track-in-shape);
-    border-start-end-radius: var(--track-radius);
-    border-end-end-radius: var(--track-radius);
+    @media screen and (forced-colors: active) {
+      background-color: selecteditem;
+    }
+    &:is(input:disabled ~ .track-1) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      @media screen and (forced-colors: active) {
+        background-color: canvastext;
+      }
+    }
   }
+  .track-2 {
+    background-color: rgb(var(--m3-scheme-secondary-container));
+    clip-path: inset(
+      0 0 0 var(--handle-right) round var(--m3-slider-track-in-shape) var(--track-radius)
+        var(--track-radius) var(--m3-slider-track-in-shape)
+    );
+    &:dir(rtl) {
+      clip-path: inset(
+        0 var(--handle-right) 0 0 round var(--track-radius) var(--m3-slider-track-in-shape)
+          var(--m3-slider-track-in-shape) var(--track-radius)
+      );
+    }
 
-  .tick {
+    @media screen and (forced-colors: active) {
+      background-color: canvastext;
+    }
+    &:is(input:disabled ~ .track-2) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      @media screen and (forced-colors: active) {
+        background-color: graytext;
+      }
+    }
+  }
+  .stop {
     position: absolute;
     width: 4px;
     height: 4px;
     border-radius: var(--m3-util-rounding-full);
     top: 50%;
-    inset-inline-start: calc(50% + (100% - 0.75rem) * var(--x));
+    inset-inline-start: calc(50% + (100% - 0.5rem - 0.25rem) * var(--x));
     translate: -50% -50%;
     &:dir(rtl) {
       translate: 50% -50%;
     }
-    background-color: rgb(var(--m3-scheme-on-primary));
+    &:is(.track-1 > .stop) {
+      background-color: rgb(var(--m3-scheme-on-primary));
+      &:is(input:disabled ~ .track-1 > .stop) {
+        background-color: rgb(var(--m3-scheme-inverse-on-surface));
+      }
+    }
+    &:is(.track-2 > .stop) {
+      background-color: rgb(var(--m3-scheme-primary));
+      &:is(input:disabled ~ .track-2 > .stop) {
+        background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      }
+    }
     pointer-events: none;
   }
 
-  .tick.hidden {
-    display: none;
-  }
-
-  .tick.inactive {
-    background-color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  :global(.leading) ~ .tick:nth-child(1 of div.tick) {
-    display: none;
-  }
-
-  :global(.trailing) ~ .tick:nth-last-child(1 of div.tick) {
-    display: none;
-  }
-
   .handle {
     position: absolute;
-    inset-inline-start: var(--percent);
+    inset-inline-start: var(--handle-center);
     translate: -50% 0;
     &:dir(rtl) {
       translate: 50% 0;
@@ -295,6 +306,16 @@
 
     pointer-events: none;
     transition: width var(--m3-util-easing);
+
+    @media screen and (forced-colors: active) {
+      background-color: selecteditem;
+    }
+    &:is(input:disabled ~ .handle) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      @media screen and (forced-colors: active) {
+        background-color: graytext;
+      }
+    }
   }
 
   .value {
@@ -309,7 +330,7 @@
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
 
-    inset-inline-start: var(--percent);
+    inset-inline-start: var(--handle-center);
     bottom: calc(var(--handle-height) + 4px);
     translate: -50% 0;
     &:dir(rtl) {
@@ -320,6 +341,10 @@
     pointer-events: none;
     transition: opacity var(--m3-util-easing);
     z-index: 1;
+    @media screen and (forced-colors: active) {
+      border: 2px solid selecteditem;
+      overflow: hidden;
+    }
   }
 
   input:focus-visible ~ .handle {
@@ -338,49 +363,4 @@
   input:enabled:active ~ .value {
     opacity: 1;
   }
-
-  input:disabled {
-    cursor: auto;
-  }
-  input:disabled ~ .track::before {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .track::after {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
-  }
-  input:disabled ~ .handle {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .tick {
-    background-color: rgb(var(--m3-scheme-inverse-on-surface));
-  }
-  input:disabled ~ .tick.inactive,
-  input:disabled ~ .endstop {
-    background-color: rgb(var(--m3-scheme-on-surface));
-  }
-
-  @media screen and (forced-colors: active) {
-    .track::before {
-      background-color: selecteditem;
-    }
-    .track::after {
-      background-color: canvastext;
-    }
-    .handle {
-      background-color: selecteditem;
-    }
-    .value {
-      border: 2px solid selecteditem;
-      overflow: hidden;
-    }
-    input:disabled + .track::before {
-      background-color: canvastext;
-    }
-    input:disabled + .track::after {
-      background-color: graytext;
-    }
-    input:disabled ~ .handle {
-      background-color: graytext;
-    }
-  }
 </style>

package/package/forms/Slider.svelte.d.ts

@@ -10,7 +10,7 @@ type $$ComponentProps = {
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: IconifyIcon;
     trailingIcon?: IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
 } & Omit<HTMLInputAttributes, "size">;

package/package/forms/SliderTicks.svelte

@@ -6,7 +6,7 @@
   import type { ComponentProps } from "svelte";
   import Slider from "./Slider.svelte";
 
-  let props: Omit<ComponentProps<typeof Slider>, "ticks"> = $props();
+  let props: Omit<ComponentProps<typeof Slider>, "stops"> = $props();
 </script>
 
-<Slider {...props} ticks={true}></Slider>
+<Slider {...props} stops={true}></Slider>

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

@@ -9,9 +9,9 @@ declare const SliderTicks: import("svelte").Component<Omit<{
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: import("@iconify/types").IconifyIcon;
     trailingIcon?: import("@iconify/types").IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
-} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "ticks">, {}, "">;
+} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "stops">, {}, "">;
 type SliderTicks = ReturnType<typeof SliderTicks>;
 export default SliderTicks;

package/package/forms/TextField.svelte

@@ -45,7 +45,7 @@
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
+  <!-- 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>
   <div class="layer"></div>
   {#if leadingIcon}
@@ -62,7 +62,8 @@
 
 <style>
   :root {
-    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
   }
 
   .m3-container {
@@ -80,7 +81,7 @@
     border: none;
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    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));
   }
@@ -118,7 +119,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {

package/package/forms/TextFieldMultiline.svelte

@@ -47,7 +47,7 @@
     {...extra}
     defaultValue={extra.defaultValue}
   ></textarea>
-  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
+  <!-- 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>
   <div class="layer"></div>
   {#if leadingIcon}
@@ -57,7 +57,8 @@
 
 <style>
   :root {
-    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
   }
   .m3-container {
     display: inline-flex;
@@ -74,7 +75,7 @@
     border: none;
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    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));
     resize: none;
@@ -113,7 +114,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {

package/package/forms/TextFieldOutlined.svelte

@@ -45,7 +45,7 @@
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
+  <!-- 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>
   {#if leadingIcon}
@@ -66,7 +66,11 @@
   do this: <TextFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
-    --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-outlined-shape: var(
+      --m3-textfield-outlined-shape,
+      var(--m3-util-rounding-extra-small)
+    );
   }
   .m3-container {
     display: inline-flex;
@@ -83,7 +87,7 @@
     border: none;
     outline: none;
     padding: 1rem;
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
   }
@@ -122,7 +126,7 @@
     position: absolute;
     inset: 0;
     border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {