m3-svelte 5.0.0 → 5.1.1

package/package/buttons/Button.svelte

@@ -61,6 +61,7 @@
 {:else}
   {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
+    type={"onclick" in extra ? "button" : undefined}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}

package/package/forms/Slider.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
+  import type { IconifyIcon } from "@iconify/types";
+  import Icon from "../misc/_icon.svelte";
   import { Spring } from "svelte/motion";
 
   let {
@@ -9,6 +11,11 @@
     step = "any",
     disabled = false,
     showValue = true,
+    size = "xs",
+    leadingIcon,
+    trailingIcon,
+    ticks = false,
+    endStops = true,
     format = (n: number) => {
       return n.toFixed(0);
     },
@@ -20,8 +27,14 @@
     step?: number | "any";
     disabled?: boolean;
     showValue?: boolean;
+    size?: "xs" | "s" | "m" | "l" | "xl";
+    leadingIcon?: IconifyIcon;
+    trailingIcon?: IconifyIcon;
+    ticks?: boolean;
+    endStops?: boolean;
     format?: (n: number) => string;
-  } & HTMLInputAttributes = $props();
+  } & Omit<HTMLInputAttributes, "size"> = $props();
+  let containerWidth = $state(600);
 
   const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
   const updateValue = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -31,11 +44,24 @@
     valueDisplayed.target = newValue;
   };
 
-  let range = $derived(max - min);
-  let percent = $derived((valueDisplayed.current - min) / range);
+  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);
+
+    return ticksList;
+  });
 </script>
 
-<div class="m3-container" style:--percent="{percent * 100}%">
+<div
+  class="m3-container {size}"
+  style:--percent="{percent * 100}%"
+  bind:offsetWidth={containerWidth}
+>
   <input
     type="range"
     oninput={updateValue}
@@ -46,10 +72,36 @@
     {disabled}
     {...extra}
   />
+
   <div class="track"></div>
-  <div class="thumb"></div>
+  {#if leadingIcon}
+    <Icon
+      icon={leadingIcon}
+      class={"leading" + (containerWidth * percent < (size == "xl" ? 48 : 40) ? " pop" : "")}
+    />
+  {/if}
+  {#if trailingIcon}
+    <Icon
+      icon={trailingIcon}
+      class={"trailing" + (containerWidth * (1 - percent) < (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"><span>{format(value)}</span></div>
+    <div class="value m3-font-label-large">{format(value)}</div>
   {/if}
 </div>
 
@@ -57,13 +109,101 @@
   :root {
     --m3-slider-track-out-shape: 0.5rem;
     --m3-slider-track-in-shape: 0.125rem;
-    --m3-slider-thumb-shape: var(--m3-util-rounding-full);
+    --m3-slider-handle-shape: var(--m3-util-rounding-full);
   }
+
   .m3-container {
     position: relative;
-    height: 2.75rem;
+    height: var(--handle-height);
     min-width: 10rem;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .m3-container.xs {
+    --track-height: 1rem;
+    --handle-height: 2.75rem;
+    --track-radius: var(--m3-util-rounding-small);
+    --icon-size: 0;
+  }
+
+  .m3-container.s {
+    --track-height: 1.5rem;
+    --handle-height: 2.75rem;
+    --track-radius: var(--m3-util-rounding-small);
+    --icon-size: 0;
+  }
+
+  .m3-container.m {
+    --track-height: 2.5rem;
+    --handle-height: 3.25rem;
+    --track-radius: var(--m3-util-rounding-medium);
+    --icon-size: 1.5rem;
+  }
+
+  .m3-container.l {
+    --track-height: 3.5rem;
+    --handle-height: 4.25rem;
+    --track-radius: var(--m3-util-rounding-large);
+    --icon-size: 1.5rem;
+  }
+
+  .m3-container.xl {
+    --track-height: 6rem;
+    --handle-height: 6.75rem;
+    --track-radius: var(--m3-util-rounding-extra-large);
+    --icon-size: 2rem;
+  }
+
+  .m3-container :global(.leading) {
+    position: absolute;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    top: 50%;
+    left: 0.25rem;
+    translate: 0 -50%;
+    pointer-events: none;
+    color: rgb(var(--m3-scheme-secondary-container));
+  }
+
+  .m3-container :global(.leading.pop) {
+    left: var(--percent);
+    margin-left: 0.625rem;
+    color: rgb(var(--m3-scheme-primary));
+  }
+
+  .m3-container :global(.trailing) {
+    position: absolute;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    top: 50%;
+    right: 0.25rem;
+    translate: 0 -50%;
+    pointer-events: none;
+    color: rgb(var(--m3-scheme-primary));
   }
+
+  .m3-container :global(.trailing.pop) {
+    right: abs(100% - var(--percent));
+    margin-right: 0.625rem;
+    color: rgb(var(--m3-scheme-secondary-container));
+  }
+
+  .endstop {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: var(--m3-util-rounding-full);
+    top: 50%;
+    right: 2px;
+    translate: -50% -50%;
+    background-color: rgb(var(--m3-scheme-primary));
+    pointer-events: none;
+    &.hidden {
+      display: none;
+    }
+  }
+
   input {
     position: absolute;
     left: -0.5rem;
@@ -85,15 +225,16 @@
     top: 50%;
     translate: 0 -50%;
     width: calc(var(--percent) - 0.375rem);
-    height: 1rem;
+    height: var(--track-height);
     pointer-events: none;
 
     background-color: rgb(var(--m3-scheme-primary));
-    border-start-start-radius: var(--m3-slider-track-out-shape);
-    border-end-start-radius: var(--m3-slider-track-out-shape);
+    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);
   }
+
   .track::after {
     position: absolute;
     content: " ";
@@ -101,22 +242,50 @@
     top: 50%;
     translate: 0 -50%;
     width: calc(100% - var(--percent) - 0.375rem);
-    height: 1rem;
+    height: var(--track-height);
     pointer-events: none;
 
-    background-color: rgb(var(--m3-scheme-primary-container));
+    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(--m3-slider-track-out-shape);
-    border-end-end-radius: var(--m3-slider-track-out-shape);
+    border-start-end-radius: var(--track-radius);
+    border-end-end-radius: var(--track-radius);
+  }
+
+  .tick {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: var(--m3-util-rounding-full);
+    top: 50%;
+    left: calc(50% + (100% - 0.75rem) * var(--x));
+    translate: -50% -50%;
+    background-color: rgb(var(--m3-scheme-secondary-container));
+    pointer-events: none;
+  }
+
+  .tick.hidden {
+    display: none;
   }
 
-  .thumb {
+  .tick.inactive {
+    background-color: rgb(var(--m3-scheme-primary));
+  }
+
+  :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;
     left: var(--percent);
     translate: -50% 0;
     width: 0.25rem;
-    height: 2.75rem;
+    height: var(--handle-height);
     border-radius: 1.25rem;
     background-color: rgb(var(--m3-scheme-primary));
 
@@ -134,23 +303,27 @@
     color: rgb(var(--m3-scheme-inverse-on-surface));
     width: 3rem;
     padding: 0.75rem 1rem;
-    border-radius: var(--m3-slider-thumb-shape);
+    border-radius: var(--m3-slider-handle-shape);
 
     left: var(--percent);
-    top: -3rem;
+    bottom: calc(var(--handle-height) + 4px);
     translate: -50% 0;
 
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--m3-util-easing);
+    z-index: 1;
   }
 
-  input:focus-visible ~ .thumb {
-    outline: auto;
-    outline-offset: 0.5rem;
+  input:focus-visible ~ .handle {
+    outline: solid;
+    outline-color: rgb(var(--m3-scheme-on-secondary-container));
+    outline-width: 4px;
+    outline-offset: 5px;
+    z-index: 2;
   }
-  input:focus-visible ~ .thumb,
-  input:enabled:active ~ .thumb {
+  input:focus-visible ~ .handle,
+  input:enabled:active ~ .handle {
     width: 0.125rem;
   }
   input:enabled:hover ~ .value,
@@ -168,14 +341,17 @@
   input:disabled ~ .track::after {
     background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
   }
-  input:disabled ~ .thumb {
+  input:disabled ~ .handle {
     background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
   }
-
-  .m3-container {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
+  input:disabled ~ .tick {
+    background-color: rgb(var(--m3-scheme-inverse-on-surface) / 0.66);
+  }
+  input:disabled ~ .tick.inactive,
+  input:disabled ~ .endstop {
+    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
   }
+
   @media screen and (forced-colors: active) {
     .track::before {
       background-color: selecteditem;
@@ -183,7 +359,7 @@
     .track::after {
       background-color: canvastext;
     }
-    .thumb {
+    .handle {
       background-color: selecteditem;
     }
     .value {
@@ -196,7 +372,7 @@
     input:disabled + .track::after {
       background-color: graytext;
     }
-    input:disabled ~ .thumb {
+    input:disabled ~ .handle {
       background-color: graytext;
     }
   }

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

@@ -1,4 +1,5 @@
 import type { HTMLInputAttributes } from "svelte/elements";
+import type { IconifyIcon } from "@iconify/types";
 type $$ComponentProps = {
     value: number;
     min?: number;
@@ -6,8 +7,13 @@ type $$ComponentProps = {
     step?: number | "any";
     disabled?: boolean;
     showValue?: boolean;
+    size?: "xs" | "s" | "m" | "l" | "xl";
+    leadingIcon?: IconifyIcon;
+    trailingIcon?: IconifyIcon;
+    ticks?: boolean;
+    endStops?: boolean;
     format?: (n: number) => string;
-} & HTMLInputAttributes;
+} & Omit<HTMLInputAttributes, "size">;
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/package/forms/SliderTicks.svelte

@@ -1,242 +1,12 @@
+<!--
+@component
+@deprecated use Slider directly instead
+-->
 <script lang="ts">
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import { Spring } from "svelte/motion";
+  import type { ComponentProps } from "svelte";
+  import Slider from "./Slider.svelte";
 
-  let {
-    value = $bindable(),
-    min = 0,
-    max = 100,
-    step,
-    disabled = false,
-    showValue = true,
-    format = (n: number) => {
-      return n.toFixed(0);
-    },
-    ...extra
-  }: {
-    value: number;
-    min?: number;
-    max?: number;
-    step: number;
-    disabled?: boolean;
-    showValue?: boolean;
-    format?: (n: number) => string;
-  } & HTMLInputAttributes = $props();
-
-  const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
-  const updateValue = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
-    const newValue = Number(e.currentTarget.value);
-    e.preventDefault();
-    value = newValue;
-    valueDisplayed.target = newValue;
-  };
-
-  const range = $derived(max - min);
-  const percent = $derived((valueDisplayed.current - min) / range);
-  const ticks = $derived.by(() => {
-    const ticksList = [];
-    for (let i = 0; i <= range; i += step) {
-      ticksList.push((i / range) * 100);
-    }
-    return ticksList;
-  });
+  let props: Omit<ComponentProps<typeof Slider>, "ticks"> = $props();
 </script>
 
-<div class="m3-container" style:--percent="{percent * 100}%">
-  <input
-    type="range"
-    oninput={updateValue}
-    value={valueDisplayed.current}
-    {min}
-    {max}
-    {step}
-    {disabled}
-    {...extra}
-  />
-  <div class="track"></div>
-  {#each ticks as tick}
-    <div
-      class="tick"
-      class:hidden={Math.abs(tick / 100 - valueDisplayed.current / range) < 0.01}
-      class:inactive={tick / 100 > valueDisplayed.current / range}
-      style:--x={tick / 100 - 0.5}
-    ></div>
-  {/each}
-  <div class="thumb"></div>
-  {#if showValue}
-    <div class="value m3-font-label-large"><span>{format(value)}</span></div>
-  {/if}
-</div>
-
-<style>
-  :root {
-    --m3-slider-track-out-shape: 0.5rem;
-    --m3-slider-track-in-shape: 0.125rem;
-    --m3-slider-thumb-shape: var(--m3-util-rounding-full);
-  }
-  .m3-container {
-    position: relative;
-    height: 2.75rem;
-    min-width: 10rem;
-  }
-  input {
-    position: absolute;
-    left: -0.5rem;
-    right: -0.5rem;
-    width: calc(100% + 1rem);
-    height: 100%;
-
-    opacity: 0;
-    appearance: none;
-    margin: 0;
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-
-  .track::before {
-    position: absolute;
-    content: " ";
-    left: 0;
-    top: 50%;
-    translate: 0 -50%;
-    width: calc(var(--percent) - 0.375rem);
-    height: 1rem;
-    pointer-events: none;
-
-    background-color: rgb(var(--m3-scheme-primary));
-    border-start-start-radius: var(--m3-slider-track-out-shape);
-    border-end-start-radius: var(--m3-slider-track-out-shape);
-    border-start-end-radius: var(--m3-slider-track-in-shape);
-    border-end-end-radius: var(--m3-slider-track-in-shape);
-  }
-  .track::after {
-    position: absolute;
-    content: " ";
-    right: 0;
-    top: 50%;
-    translate: 0 -50%;
-    width: calc(100% - var(--percent) - 0.375rem);
-    height: 1rem;
-    pointer-events: none;
-
-    background-color: rgb(var(--m3-scheme-primary-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(--m3-slider-track-out-shape);
-    border-end-end-radius: var(--m3-slider-track-out-shape);
-  }
-
-  .tick {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: var(--m3-util-rounding-full);
-    top: 50%;
-    left: calc(50% + (100% - 0.75rem) * var(--x));
-    translate: -50% -50%;
-    background-color: rgb(var(--m3-scheme-primary-container));
-    pointer-events: none;
-  }
-  .tick.hidden {
-    display: none;
-  }
-  .tick.inactive {
-    background-color: rgb(var(--m3-scheme-primary));
-  }
-
-  .thumb {
-    position: absolute;
-    left: var(--percent);
-    translate: -50% 0;
-    width: 0.25rem;
-    height: 2.75rem;
-    border-radius: 1.25rem;
-    background-color: rgb(var(--m3-scheme-primary));
-
-    pointer-events: none;
-    transition: width var(--m3-util-easing);
-  }
-
-  .value {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-
-    background-color: rgb(var(--m3-scheme-inverse-surface));
-    color: rgb(var(--m3-scheme-inverse-on-surface));
-    width: 3rem;
-    padding: 0.75rem 1rem;
-    border-radius: var(--m3-slider-thumb-shape);
-
-    left: var(--percent);
-    top: -3rem;
-    translate: -50% 0;
-
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--m3-util-easing);
-  }
-
-  input:focus-visible ~ .thumb {
-    outline: auto;
-    outline-offset: 0.5rem;
-  }
-  input:focus-visible ~ .thumb,
-  input:enabled:active ~ .thumb {
-    width: 0.125rem;
-  }
-  input:enabled:hover ~ .value,
-  input:enabled:focus-visible ~ .value,
-  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 ~ .tick {
-    background-color: rgb(var(--m3-scheme-inverse-on-surface) / 0.66);
-  }
-  input:disabled ~ .tick.inactive {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .thumb {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-
-  .m3-container {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .track::before {
-      background-color: selecteditem;
-    }
-    .track::after {
-      background-color: canvastext;
-    }
-    .thumb {
-      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 ~ .thumb {
-      background-color: graytext;
-    }
-  }
-</style>
+<Slider {...props} ticks={true}></Slider>

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

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

package/package/forms/_picker/Item.svelte

@@ -17,9 +17,9 @@
 </script>
 
 <button
-  {disabled}
-  class="item m3-font-body-small"
   type="button"
+  class="item m3-font-body-small"
+  {disabled}
   class:today
   class:selected
   {onclick}

package/package/index.d.ts

@@ -35,7 +35,6 @@ export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
 export { default as Switch } from "./forms/Switch.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
-export { default as SliderTicks } from "./forms/SliderTicks.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";

package/package/index.js

@@ -34,7 +34,6 @@ export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
 export { default as Switch } from "./forms/Switch.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
-export { default as SliderTicks } from "./forms/SliderTicks.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -32,7 +32,7 @@
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1752989765",
     "@ktibow/material-color-utilities-nightly": "^0.3.11753062248503",
-    "svelte": "^5.36.13"
+    "svelte": "^5.37.3"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",