slexkit 0.3.2 → 0.3.3

package/dist/components/index.js

@@ -7255,7 +7255,7 @@ function Row($$anchor, $$props) {
 }
 
 // src/components/svelte/input/Slider.svelte
-var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <input type="range" class="slex-slider"/></div>`);
+var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <div class="slex-slider-control"><span class="slex-slider-track" aria-hidden="true"></span> <input type="range" class="slex-slider"/></div></div>`);
 function Slider($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
@@ -7355,30 +7355,32 @@ function Slider($$anchor, $$props) {
   }
   reset(span_2);
   reset(div_1);
-  var input_1 = sibling(div_1, 2);
+  var div_2 = sibling(div_1, 2);
+  var input_1 = sibling(child(div_2), 2);
   remove_input_defaults(input_1);
+  reset(div_2);
   reset(div);
   template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8) => {
     set_attribute2(div, "data-orientation", $0);
     set_text(text_1, $1);
     set_text(text_2, $2);
-    set_attribute2(input_1, "min", $3);
-    set_attribute2(input_1, "max", $4);
-    set_attribute2(input_1, "step", $5);
-    set_value(input_1, $6);
+    set_style(div_2, $3);
+    set_attribute2(input_1, "min", $4);
+    set_attribute2(input_1, "max", $5);
+    set_attribute2(input_1, "step", $6);
+    set_value(input_1, $7);
     input_1.disabled = !!get2(p).disabled;
-    set_attribute2(input_1, "aria-label", $7);
-    set_style(input_1, $8);
+    set_attribute2(input_1, "aria-label", $8);
   }, [
     () => text2(get2(p).orientation, "horizontal"),
     () => text2(get2(p).label ?? $$props.componentName),
     () => text2(get2(value) ?? 0),
+    () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`,
     () => Number(get2(p).min ?? 0),
     () => Number(get2(p).max ?? 100),
     () => Number(get2(p).step ?? 1),
     () => Number(get2(value) ?? 0),
-    () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName),
-    () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`
+    () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName)
   ]);
   delegated("pointerdown", input_1, grabSlider);
   delegated("input", input_1, (event2) => choose(Number(event2.target.value)));

package/dist/components/input.css

@@ -161,22 +161,71 @@
   font-weight: 600;
 }
 
+.slex-slider-control {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 1rem;
+}
+
+.slex-slider-track {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
 .slex-slider {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
+  display: block;
   width: 100%;
   height: 1rem;
+  margin: 0;
   padding: 0;
   border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
+  color: transparent;
   accent-color: var(--primary);
   cursor: pointer;
   overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
+.slexkit-root .slex-slider-control input.slex-slider {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 1rem;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  background: transparent;
+  color: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  overflow: visible;
+}
+
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
@@ -186,7 +235,7 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border: 2px solid var(--primary);
   border-radius: 999px;
   background-color: var(--background);
@@ -200,16 +249,10 @@
 .slex-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
 }
 
 .slex-slider::-moz-range-thumb {
@@ -245,16 +288,16 @@
 }
 
 .slex-slider::-moz-range-track {
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: var(--secondary);
+  background: transparent;
 }
 
 .slex-slider::-moz-range-progress {
-  height: 0.5rem;
+  height: 1rem;
   border-radius: 999px;
-  background: var(--primary);
+  background: transparent;
 }
 
 .slex-slider-label-text {
@@ -441,11 +484,40 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
+.slexkit-root .slex-input-control input.slex-input {
+  box-sizing: border-box;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5625rem;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  box-shadow: none;
+  background: var(--background);
+  background-clip: padding-box;
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
+.slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .slex-input-unit {
   box-sizing: border-box;
   display: inline-flex;

package/dist/components/slider.css

@@ -30,22 +30,71 @@
   font-weight: 600;
 }
 
+.slex-slider-control {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 1rem;
+}
+
+.slex-slider-track {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
 .slex-slider {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
+  display: block;
   width: 100%;
   height: 1rem;
+  margin: 0;
   padding: 0;
   border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
+  color: transparent;
   accent-color: var(--primary);
   cursor: pointer;
   overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
+.slexkit-root .slex-slider-control input.slex-slider {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 1rem;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  background: transparent;
+  color: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  overflow: visible;
+}
+
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
@@ -55,7 +104,7 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border: 2px solid var(--primary);
   border-radius: 999px;
   background-color: var(--background);
@@ -69,16 +118,10 @@
 .slex-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
 }
 
 .slex-slider::-moz-range-thumb {
@@ -114,16 +157,16 @@
 }
 
 .slex-slider::-moz-range-track {
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: var(--secondary);
+  background: transparent;
 }
 
 .slex-slider::-moz-range-progress {
-  height: 0.5rem;
+  height: 1rem;
   border-radius: 999px;
-  background: var(--primary);
+  background: transparent;
 }
 
 .slex-slider-label-text {

package/dist/components/slider.js

@@ -34,7 +34,7 @@ import {
 import { register } from "../runtime.js";
 
 // src/components/svelte/input/Slider.svelte
-var root = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <input type="range" class="slex-slider"/></div>`);
+var root = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <div class="slex-slider-control"><span class="slex-slider-track" aria-hidden="true"></span> <input type="range" class="slex-slider"/></div></div>`);
 function Slider($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
@@ -134,30 +134,32 @@ function Slider($$anchor, $$props) {
   }
   reset(span_2);
   reset(div_1);
-  var input_1 = sibling(div_1, 2);
+  var div_2 = sibling(div_1, 2);
+  var input_1 = sibling(child(div_2), 2);
   remove_input_defaults(input_1);
+  reset(div_2);
   reset(div);
   template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8) => {
     set_attribute(div, "data-orientation", $0);
     set_text(text_1, $1);
     set_text(text_2, $2);
-    set_attribute(input_1, "min", $3);
-    set_attribute(input_1, "max", $4);
-    set_attribute(input_1, "step", $5);
-    set_value(input_1, $6);
+    set_style(div_2, $3);
+    set_attribute(input_1, "min", $4);
+    set_attribute(input_1, "max", $5);
+    set_attribute(input_1, "step", $6);
+    set_value(input_1, $7);
     input_1.disabled = !!get(p).disabled;
-    set_attribute(input_1, "aria-label", $7);
-    set_style(input_1, $8);
+    set_attribute(input_1, "aria-label", $8);
   }, [
     () => text2(get(p).orientation, "horizontal"),
     () => text2(get(p).label ?? $$props.componentName),
     () => text2(get(value) ?? 0),
+    () => `--slex-slider-progress: ${sliderProgress(get(value), get(p).min, get(p).max)}`,
     () => Number(get(p).min ?? 0),
     () => Number(get(p).max ?? 100),
     () => Number(get(p).step ?? 1),
     () => Number(get(value) ?? 0),
-    () => text2(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label ?? $$props.componentName),
-    () => `--slex-slider-progress: ${sliderProgress(get(value), get(p).min, get(p).max)}`
+    () => text2(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label ?? $$props.componentName)
   ]);
   delegated("pointerdown", input_1, grabSlider);
   delegated("input", input_1, (event) => choose(Number(event.target.value)));

package/dist/components/text-input.css

@@ -56,11 +56,40 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
+.slexkit-root .slex-input-control input.slex-input {
+  box-sizing: border-box;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5625rem;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  box-shadow: none;
+  background: var(--background);
+  background-clip: padding-box;
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
+.slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .slex-input-unit {
   box-sizing: border-box;
   display: inline-flex;

package/dist/runtime.cjs

@@ -1825,7 +1825,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.2";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/runtime.js

@@ -1753,7 +1753,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.2";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/slexkit.cjs

@@ -1847,7 +1847,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.2";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -12254,7 +12254,7 @@ function Row($$anchor, $$props) {
 }
 
 // src/components/svelte/input/Slider.svelte
-var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <input type="range" class="slex-slider"/></div>`);
+var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <div class="slex-slider-control"><span class="slex-slider-track" aria-hidden="true"></span> <input type="range" class="slex-slider"/></div></div>`);
 function Slider($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
@@ -12354,30 +12354,32 @@ function Slider($$anchor, $$props) {
   }
   reset(span_2);
   reset(div_1);
-  var input_1 = sibling(div_1, 2);
+  var div_2 = sibling(div_1, 2);
+  var input_1 = sibling(child(div_2), 2);
   remove_input_defaults(input_1);
+  reset(div_2);
   reset(div);
   template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8) => {
     set_attribute2(div, "data-orientation", $0);
     set_text(text_1, $1);
     set_text(text_2, $2);
-    set_attribute2(input_1, "min", $3);
-    set_attribute2(input_1, "max", $4);
-    set_attribute2(input_1, "step", $5);
-    set_value(input_1, $6);
+    set_style(div_2, $3);
+    set_attribute2(input_1, "min", $4);
+    set_attribute2(input_1, "max", $5);
+    set_attribute2(input_1, "step", $6);
+    set_value(input_1, $7);
     input_1.disabled = !!get2(p).disabled;
-    set_attribute2(input_1, "aria-label", $7);
-    set_style(input_1, $8);
+    set_attribute2(input_1, "aria-label", $8);
   }, [
     () => text2(get2(p).orientation, "horizontal"),
     () => text2(get2(p).label ?? $$props.componentName),
     () => text2(get2(value) ?? 0),
+    () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`,
     () => Number(get2(p).min ?? 0),
     () => Number(get2(p).max ?? 100),
     () => Number(get2(p).step ?? 1),
     () => Number(get2(value) ?? 0),
-    () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName),
-    () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`
+    () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName)
   ]);
   delegated("pointerdown", input_1, grabSlider);
   delegated("input", input_1, (event2) => choose(Number(event2.target.value)));

package/dist/slexkit.css

@@ -3160,22 +3160,71 @@ color-scheme: dark;
   font-weight: 600;
 }
 
+.slex-slider-control {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 1rem;
+}
+
+.slex-slider-track {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
 .slex-slider {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
+  display: block;
   width: 100%;
   height: 1rem;
+  margin: 0;
   padding: 0;
   border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
+  color: transparent;
   accent-color: var(--primary);
   cursor: pointer;
   overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
+.slexkit-root .slex-slider-control input.slex-slider {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 1rem;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  background: transparent;
+  color: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  overflow: visible;
+}
+
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
@@ -3185,7 +3234,7 @@ color-scheme: dark;
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border: 2px solid var(--primary);
   border-radius: 999px;
   background-color: var(--background);
@@ -3199,16 +3248,10 @@ color-scheme: dark;
 .slex-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
 }
 
 .slex-slider::-moz-range-thumb {
@@ -3244,16 +3287,16 @@ color-scheme: dark;
 }
 
 .slex-slider::-moz-range-track {
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: var(--secondary);
+  background: transparent;
 }
 
 .slex-slider::-moz-range-progress {
-  height: 0.5rem;
+  height: 1rem;
   border-radius: 999px;
-  background: var(--primary);
+  background: transparent;
 }
 
 .slex-slider-label-text {
@@ -3440,11 +3483,40 @@ color-scheme: dark;
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
+.slexkit-root .slex-input-control input.slex-input {
+  box-sizing: border-box;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5625rem;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  box-shadow: none;
+  background: var(--background);
+  background-clip: padding-box;
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
+.slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .slex-input-unit {
   box-sizing: border-box;
   display: inline-flex;