slexkit 0.3.2 → 0.3.3

package/dist/slexkit.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() {
@@ -12160,7 +12160,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({}));
@@ -12260,30 +12260,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/types/version.d.ts

@@ -1,6 +1,6 @@
-export declare const SLEXKIT_VERSION = "0.3.2";
+export declare const SLEXKIT_VERSION = "0.3.3";
 export declare const SLEX_PROTOCOL_VERSION = "0.1";
-export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.2";
+export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.3";
 export declare function getSlexKitInfo(): {
     version: string;
     protocolVersion: string;

package/dist/umd/slexkit.tooling.umd.js

@@ -11156,7 +11156,7 @@ ${pad}}`;
   }
 
   // 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({}));
@@ -11256,30 +11256,32 @@ ${pad}}`;
     }
     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/umd/slexkit.umd.js

@@ -1856,7 +1856,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() {
@@ -12263,7 +12263,7 @@ ${component_stack}
   }
 
   // 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({}));
@@ -12363,30 +12363,32 @@ ${component_stack}
     }
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slexkit",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Zero-build, Markdown-friendly reactive UI runtime for AI output.",
   "author": "SlexKit contributors",
   "type": "module",

package/src/components/svelte/input/Slider.svelte

@@ -80,17 +80,19 @@
     </span>
     <span class="slex-slider-value">{text(value ?? 0)}{#if p.unit} {text(p.unit)}{/if}</span>
   </div>
-  <input
-    type="range"
-    class="slex-slider"
-    min={Number(p.min ?? 0)}
-    max={Number(p.max ?? 100)}
-    step={Number(p.step ?? 1)}
-    value={Number(value ?? 0)}
-    disabled={!!p.disabled}
-    aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label ?? componentName)}
-    style={`--slex-slider-progress: ${sliderProgress(value, p.min, p.max)}`}
-    onpointerdown={grabSlider}
-    oninput={(event) => choose(Number((event.target as HTMLInputElement).value))}
-  />
+  <div class="slex-slider-control" style={`--slex-slider-progress: ${sliderProgress(value, p.min, p.max)}`}>
+    <span class="slex-slider-track" aria-hidden="true"></span>
+    <input
+      type="range"
+      class="slex-slider"
+      min={Number(p.min ?? 0)}
+      max={Number(p.max ?? 100)}
+      step={Number(p.step ?? 1)}
+      value={Number(value ?? 0)}
+      disabled={!!p.disabled}
+      aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label ?? componentName)}
+      onpointerdown={grabSlider}
+      oninput={(event) => choose(Number((event.target as HTMLInputElement).value))}
+    />
+  </div>
 </div>

package/src/styles/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/src/styles/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;