m3-svelte 5.15.0 → 5.15.2

package/package/forms/Slider.svelte

@@ -38,7 +38,9 @@
   } & Omit<HTMLInputAttributes, "size"> = $props();
   // @ts-expect-error deprecated backwards compatibility with ticks
   let stops = $derived(extra.ticks ? true : _stops);
-  let containerWidth = $state(600);
+  let offsetWidth = $state(600);
+  let offsetHeight = $state(600);
+  let inlineSize = $derived(vertical ? offsetHeight : offsetWidth);
 
   const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
   const updateValue = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -72,7 +74,8 @@
 <div
   class="m3-container {size} {vertical ? 'vertical' : ''}"
   style:--handle={handle - 0.5}
-  bind:offsetWidth={containerWidth}
+  bind:offsetWidth
+  bind:offsetHeight
 >
   <input
     type="range"
@@ -97,13 +100,13 @@
   {#if leadingIcon}
     <Icon
       icon={leadingIcon}
-      class={"leading" + (containerWidth * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"leading" + (inlineSize * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
   {#if trailingIcon}
     <Icon
       icon={trailingIcon}
-      class={"trailing" + (containerWidth * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"trailing" + (inlineSize * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
   <div class="handle"></div>
@@ -133,7 +136,7 @@
   }
 
   .m3-container.vertical {
-    writing-mode: vertical-lr;
+    writing-mode: sideways-lr;
   }
 
   .m3-container.xs {
@@ -229,7 +232,7 @@
     }
 
     &:is(.vertical > input) {
-      translate: 0 -50%;
+      translate: 0 50%;
     }
   }
 
@@ -254,8 +257,8 @@
     }
     &:is(.vertical > .track-1) {
       clip-path: inset(
-        0 0 calc(100% - var(--handle-left)) 0 round var(--track-radius) var(--track-radius)
-          var(--m3-slider-track-in-shape) var(--m3-slider-track-in-shape)
+        calc(100% - var(--handle-left)) 0 0 0 round var(--m3-slider-track-in-shape)
+          var(--m3-slider-track-in-shape) var(--track-radius) var(--track-radius)
       );
     }
 
@@ -283,8 +286,8 @@
     }
     &:is(.vertical > .track-2) {
       clip-path: inset(
-        var(--handle-right) 0 0 0 round var(--m3-slider-track-in-shape)
-          var(--m3-slider-track-in-shape) var(--track-radius) var(--track-radius)
+        0 0 var(--handle-right) 0 round var(--track-radius) var(--track-radius)
+          var(--m3-slider-track-in-shape) var(--m3-slider-track-in-shape)
       );
     }
 
@@ -310,7 +313,7 @@
       translate: 50% -50%;
     }
     &:is(.vertical .stop) {
-      translate: -50% -50%;
+      translate: -50% 50%;
     }
     &:is(.track-1 > .stop) {
       background-color: rgb(var(--m3-scheme-on-primary));
@@ -337,7 +340,7 @@
       translate: 50% 0;
     }
     &:is(.vertical > .handle) {
-      translate: 0 -50%;
+      translate: 0 50%;
     }
     border-radius: 1.25rem;
     background-color: rgb(var(--m3-scheme-primary));
@@ -385,8 +388,8 @@
     }
 
     &:is(.vertical > .value) {
-      translate: 0 -50%;
-      rotate: -90deg;
+      translate: 0 50%;
+      rotate: 90deg;
     }
   }
 

package/package.json

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