slexkit 0.3.1 → 0.3.3

package/dist/slexkit.css

@@ -904,52 +904,6 @@ color-scheme: dark;
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;
@@ -3206,22 +3160,71 @@ body[data-mobile-nav-open] {
   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;
@@ -3231,7 +3234,7 @@ body[data-mobile-nav-open] {
   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);
@@ -3245,16 +3248,10 @@ body[data-mobile-nav-open] {
 .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 {
@@ -3290,16 +3287,16 @@ body[data-mobile-nav-open] {
 }
 
 .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 {
@@ -3486,11 +3483,40 @@ body[data-mobile-nav-open] {
   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/slexkit.js

@@ -396,19 +396,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1259,9 +1271,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1274,8 +1287,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1300,12 +1315,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1333,20 +1352,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1354,7 +1375,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1731,7 +1753,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -12138,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({}));
@@ -12238,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/engine/types.d.ts

@@ -23,7 +23,7 @@ export type ForContext = {
 };
 export type ForSlot = {
     key: unknown;
-    el: HTMLElement;
+    el: HTMLElement | null;
     forCtx: ForContext;
     index: number;
     item: unknown;

package/dist/types/version.d.ts

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

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

@@ -493,19 +493,31 @@
   function createComponentAccessor(read) {
     const subscribers = new Set;
     let current = read();
-    const accessor = () => current;
-    accessor.subscribe = (run) => {
-      subscribers.add(run);
-      run(current);
-      const stop = createEffect(() => {
+    let stopEffect;
+    const start = () => {
+      if (stopEffect)
+        return;
+      stopEffect = createEffect(() => {
         current = read();
-        for (const subscriber of subscribers)
+        for (const subscriber of Array.from(subscribers))
           subscriber(current);
         flushDom?.();
       });
+    };
+    const accessor = () => current;
+    accessor.subscribe = (run) => {
+      const wasIdle = subscribers.size === 0;
+      subscribers.add(run);
+      if (wasIdle)
+        start();
+      else
+        run(current);
       return () => {
         subscribers.delete(run);
-        stop();
+        if (subscribers.size === 0) {
+          stopEffect?.();
+          stopEffect = undefined;
+        }
       };
     };
     return accessor;
@@ -1356,9 +1368,10 @@
     const renderer = getRenderer(type);
     if (!renderer)
       return;
-    const forWrapper = (container.ownerDocument || document).createElement("div");
-    forWrapper.className = "slexkit-for-wrapper";
-    container.appendChild(forWrapper);
+    const doc = container.ownerDocument || document;
+    const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+    const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+    container.append(startAnchor, endAnchor);
     const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
     const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
     const $keyProp = props.$key;
@@ -1371,8 +1384,10 @@
       disposedSlots.add(slot);
       leavingSlots.delete(slot);
       callHook(g, name, "onUnmount");
-      disposeComponent(slot.el);
-      slot.el.remove();
+      if (slot.el) {
+        disposeComponent(slot.el);
+        slot.el.remove();
+      }
       if (slot.dispose)
         slot.dispose();
     };
@@ -1397,12 +1412,16 @@
         }
       }
       for (const slot of deletedSlots) {
-        container.appendChild(slot.el);
         leavingSlots.add(slot);
+        if (!slot.el) {
+          disposeSlot(slot);
+          continue;
+        }
         applyLeaveAnimation(slot.el, slot.props, () => {
           disposeSlot(slot);
         });
       }
+      let cursor = startAnchor;
       arr.forEach((item, index) => {
         item = asReactiveValue(item, g);
         const keyVal = newKeys[index];
@@ -1430,20 +1449,22 @@
           const indexSignal = createSignal(index);
           const revisionSignal = createSignal(0);
           slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-          if (slot.el) {
-            applyEnterAnimation(slot.el, slot.props);
-            callHook(g, name, "onMount");
+          if (!slot.el) {
+            disposeSlot(slot);
+            return;
           }
+          applyEnterAnimation(slot.el, slot.props);
+          callHook(g, name, "onMount");
           slotMap.set(keyVal, slot);
         }
-        const refChild = forWrapper.children[index];
-        if (slot.el && refChild !== slot.el) {
-          forWrapper.insertBefore(slot.el, refChild ?? null);
+        const nextChild = cursor.nextSibling;
+        if (slot.el && nextChild !== slot.el) {
+          container.insertBefore(slot.el, nextChild ?? endAnchor);
+        }
+        if (slot.el) {
+          cursor = slot.el;
         }
       });
-      while (forWrapper.children.length > arr.length) {
-        forWrapper.lastChild.remove();
-      }
     });
     onCleanup(() => {
       for (const slot of Array.from(slotMap.values()))
@@ -1451,7 +1472,8 @@
       slotMap.clear();
       for (const slot of Array.from(leavingSlots))
         disposeSlot(slot);
-      forWrapper.remove();
+      startAnchor.remove();
+      endAnchor.remove();
     });
   }
   function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -11134,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({}));
@@ -11234,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)));