slexkit 0.3.0 → 0.3.2

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;
@@ -689,6 +701,9 @@ function isWritableComponent(type) {
   const mode = getComponentStateMode(type);
   return mode === "value" || mode === "checked" || mode === "enabled";
 }
+function isReadableComponent(type) {
+  return getComponentStateMode(type) === "readable";
+}
 function isStatefulComponent(type) {
   return getComponentStateMode(type) !== "none";
 }
@@ -805,7 +820,10 @@ function createGProxy(g, components, componentTypes) {
 function ensureComponentState(name, type, components, componentTypes) {
   if (!components[name])
     components[name] = {};
-  componentTypes[name] = type;
+  const previousType = componentTypes[name] ?? "";
+  if (!(isWritableComponent(previousType) && isReadableComponent(type))) {
+    componentTypes[name] = type;
+  }
   return components[name];
 }
 function syncReadableComponentProp(type, state, propName, value) {
@@ -833,6 +851,9 @@ function syncReadableComponentProp(type, state, propName, value) {
 function syncComponentProps(type, name, props, components, componentTypes) {
   if (!name || !isStatefulComponent(type))
     return;
+  const previousType = componentTypes[name] ?? "";
+  if (isWritableComponent(previousType) && isReadableComponent(type))
+    return;
   const state = ensureComponentState(name, type, components, componentTypes);
   if (type === "input" && typeof props.type === "string") {
     assignInputType(state, props.type);
@@ -897,7 +918,7 @@ function seedStaticComponentState(type, state, props) {
 function warnDuplicateState(ns, name, currentType, currentPath, previous) {
   console.warn(`[SlexKit][${ns}] Component state '${name}' is declared more than once at ${previous.path} and ${currentPath}; state is shared by namespace and component name.`);
   if (previous.type !== currentType) {
-    console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); the latest rendered type controls write behavior.`);
+    console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); use distinct names when components should not share state.`);
   }
 }
 function dynamicStateBinding(type, props) {
@@ -909,6 +930,9 @@ function isMirroredValueControlPair(previousType, currentType) {
   return previousType === "input" && currentType === "slider" || previousType === "slider" && currentType === "input";
 }
 function shouldWarnDuplicateState(currentType, currentBinding, previous) {
+  if (isReadableComponent(previous.type) && isReadableComponent(currentType)) {
+    return false;
+  }
   if (currentBinding && previous.stateBinding === currentBinding && isMirroredValueControlPair(previous.type, currentType)) {
     return false;
   }
@@ -1247,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;
@@ -1262,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();
   };
@@ -1288,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];
@@ -1321,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()))
@@ -1342,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) {
@@ -1719,7 +1753,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.0";
+var SLEXKIT_VERSION = "0.3.2";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -2847,7 +2881,6 @@ var inputSpec = component({
     min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
     max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
     step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
-    controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
     onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
   },
   children: noChildren,
@@ -3355,6 +3388,8 @@ var textSpec = component({
     content: { type: "string", dynamic: true, description: "Alias for text." },
     label: { type: "string", dynamic: true, description: "Alias for text." },
     variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
+    color: { type: "string", dynamic: true, description: "Optional CSS color for controlled previews." },
+    size: { type: "string | number", dynamic: true, description: "Optional font size. Numbers are treated as px." },
     class: { type: "string", description: "Additional host-controlled CSS class." }
   },
   children: noChildren,
@@ -3725,7 +3760,11 @@ function isRenderableSource(value) {
   return Object.keys(value).some((key) => key.includes(":"));
 }
 function bareLayoutFromSource(value) {
-  const { slex: _slex, namespace: _namespace, g: _g, layout: _layout, ...layout } = value;
+  const layout = { ...value };
+  delete layout.slex;
+  delete layout.namespace;
+  delete layout.g;
+  delete layout.layout;
   return layout;
 }
 function isStateOnlySource(value) {
@@ -12496,6 +12535,7 @@ function Checkbox($$anchor, $$props) {
   reset(label2);
   reset(span);
   template_effect(($0, $1) => {
+    set_attribute2(label2, "data-disabled", get2(p).disabled ? "true" : undefined);
     input.disabled = !!get2(p).disabled;
     set_attribute2(input, "data-state", get2(checked) ? "checked" : "unchecked");
     set_attribute2(input, "aria-label", $0);
@@ -12571,6 +12611,7 @@ function Switch($$anchor, $$props) {
   reset(span);
   template_effect(($0, $1) => {
     set_attribute2(label2, "data-state", get2(enabled) ? "on" : "off");
+    set_attribute2(label2, "data-disabled", get2(p).disabled ? "true" : undefined);
     input.disabled = !!get2(p).disabled;
     set_attribute2(input, "aria-label", $0);
     set_text(text_1, $1);
@@ -12591,26 +12632,11 @@ delegate(["pointerdown", "click", "change"]);
 var nextInputId = 0;
 var root_14 = from_html(`<label class="slex-input-label"> </label>`);
 var root_2 = from_html(`<span class="slex-input-unit" aria-hidden="true"> </span>`);
-var root_33 = from_html(`<span class="slex-input-controls"><button class="slex-input-step" type="button">+</button> <button class="slex-input-step" type="button">-</button></span>`);
-var root_4 = from_html(`<div class="slex-input-description"> </div>`);
-var root_52 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
-var root8 = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!> <!></div> <!> <!></div>`);
+var root_33 = from_html(`<div class="slex-input-description"> </div>`);
+var root_4 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
+var root8 = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!></div> <!> <!></div>`);
 function Input($$anchor, $$props) {
   push($$props, true);
-  const engineeringPrefixFactors = {
-    p: 0.000000000001,
-    n: 0.000000001,
-    u: 0.000001,
-    "µ": 0.000001,
-    "碌": 0.000001,
-    m: 0.001,
-    k: 1000,
-    K: 1000,
-    M: 1e6,
-    meg: 1e6,
-    G: 1e9,
-    T: 1000000000000
-  };
   let p = state(proxy({}));
   let value = state("");
   const fallbackId = `slex-input-${++nextInputId}`;
@@ -12622,8 +12648,6 @@ function Input($$anchor, $$props) {
   const readonly = user_derived(() => bool(get2(p).readonly) || bool(get2(p).readOnly));
   const required = user_derived(() => bool(get2(p).required));
   const invalid2 = user_derived(() => bool(get2(p).invalid) || !!get2(errorText));
-  const steppable = user_derived(isSteppableInput);
-  const controls = user_derived(() => get2(steppable) && get2(p).controls !== false && get2(p).controls !== "false");
   const componentId = user_derived(() => safeId($$props.componentName));
   const inputId = user_derived(() => text2(get2(p).id) || (get2(componentId) ? `slex-input-${get2(componentId)}` : fallbackId));
   const descriptionId = user_derived(() => `${get2(inputId)}-description`);
@@ -12634,10 +12658,6 @@ function Input($$anchor, $$props) {
     get2(descriptionText) ? get2(descriptionId) : "",
     get2(errorText) ? get2(errorId) : ""
   ].filter(Boolean).join(" "));
-  const numericValue = user_derived(readNumericValue);
-  const controlLabel = user_derived(() => get2(labelText) || text2(get2(p).placeholder) || $$props.componentName || "input");
-  const decrementDisabled = user_derived(() => !canStep(-1));
-  const incrementDisabled = user_derived(() => !canStep(1));
   user_effect(() => bindPropStore($$props.props, (next2) => {
     set(p, next2, true);
     set(value, text2(next2.value), true);
@@ -12648,72 +12668,6 @@ function Input($$anchor, $$props) {
   function inputType() {
     return text2(get2(p).type, "text") === "engineering" ? "text" : text2(get2(p).type, "text");
   }
-  function isSteppableInput() {
-    const kind = text2(get2(p).type, "text");
-    return kind === "number" || kind === "engineering" || get2(p).min !== undefined || get2(p).max !== undefined || get2(p).step !== undefined;
-  }
-  function numericProp(input) {
-    if (input === undefined || input === null || input === "")
-      return;
-    const next2 = Number(input);
-    return Number.isFinite(next2) ? next2 : undefined;
-  }
-  function stepSize() {
-    const next2 = numericProp(get2(p).step);
-    if (next2 !== undefined && next2 > 0)
-      return next2;
-    if (text2(get2(p).type, "text") !== "engineering")
-      return 1;
-    const parsed = parseEngineeringNumber(get2(value));
-    if (!parsed.valid || !parsed.prefix)
-      return 1;
-    return engineeringPrefixFactors[parsed.prefix] ?? 1;
-  }
-  function readNumericValue() {
-    if (text2(get2(p).type, "text") === "engineering") {
-      const parsed = parseEngineeringNumber(get2(value));
-      return parsed.valid && parsed.number !== null ? parsed.number : null;
-    }
-    const next2 = Number(get2(value));
-    return Number.isFinite(next2) ? next2 : null;
-  }
-  function clamp(next2) {
-    const min = numericProp(get2(p).min);
-    const max = numericProp(get2(p).max);
-    let clamped = next2;
-    if (min !== undefined)
-      clamped = Math.max(min, clamped);
-    if (max !== undefined)
-      clamped = Math.min(max, clamped);
-    return clamped;
-  }
-  function canStep(direction) {
-    if (!get2(controls) || get2(disabled) || get2(readonly) || get2(numericValue) === null)
-      return false;
-    return clamp(get2(numericValue) + direction * stepSize()) !== get2(numericValue);
-  }
-  function formatSteppedValue(next2) {
-    if (text2(get2(p).type, "text") !== "engineering")
-      return text2(next2);
-    const parsed = parseEngineeringNumber(get2(value));
-    if (!parsed.valid)
-      return text2(next2);
-    const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
-    const visibleNumber = factor ? next2 / factor : next2;
-    return `${formatNumber2(visibleNumber)}${parsed.prefix}${parsed.unit}`;
-  }
-  function formatNumber2(next2) {
-    return text2(Number(next2.toPrecision(12)));
-  }
-  function emitValue(nextValue) {
-    set(value, nextValue, true);
-    emit($$props.ctx, "change", text2(get2(p).type, "text") === "engineering" ? parseEngineeringNumber(get2(value)) : get2(value));
-  }
-  function stepBy(direction) {
-    if (!canStep(direction) || get2(numericValue) === null)
-      return;
-    emitValue(formatSteppedValue(clamp(get2(numericValue) + direction * stepSize())));
-  }
   function update2(event2) {
     if (get2(disabled) || get2(readonly))
       return;
@@ -12739,9 +12693,9 @@ function Input($$anchor, $$props) {
     });
   }
   var div_1 = sibling(node, 2);
-  var input_1 = child(div_1);
-  remove_input_defaults(input_1);
-  var node_1 = sibling(input_1, 2);
+  var input = child(div_1);
+  remove_input_defaults(input);
+  var node_1 = sibling(input, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var span = root_2();
@@ -12755,33 +12709,11 @@ function Input($$anchor, $$props) {
         $$render(consequent_1);
     });
   }
-  var node_2 = sibling(node_1, 2);
-  {
-    var consequent_2 = ($$anchor2) => {
-      var span_1 = root_33();
-      var button = child(span_1);
-      var button_1 = sibling(button, 2);
-      reset(span_1);
-      template_effect(() => {
-        set_attribute2(button, "aria-label", `Increase ${get2(controlLabel)}`);
-        button.disabled = get2(incrementDisabled);
-        set_attribute2(button_1, "aria-label", `Decrease ${get2(controlLabel)}`);
-        button_1.disabled = get2(decrementDisabled);
-      });
-      delegated("click", button, () => stepBy(1));
-      delegated("click", button_1, () => stepBy(-1));
-      append($$anchor2, span_1);
-    };
-    if_block(node_2, ($$render) => {
-      if (get2(controls))
-        $$render(consequent_2);
-    });
-  }
   reset(div_1);
-  var node_3 = sibling(div_1, 2);
+  var node_2 = sibling(div_1, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var div_2 = root_4();
+    var consequent_2 = ($$anchor2) => {
+      var div_2 = root_33();
       var text_3 = child(div_2, true);
       reset(div_2);
       template_effect(() => {
@@ -12790,15 +12722,15 @@ function Input($$anchor, $$props) {
       });
       append($$anchor2, div_2);
     };
-    if_block(node_3, ($$render) => {
+    if_block(node_2, ($$render) => {
       if (get2(descriptionText))
-        $$render(consequent_3);
+        $$render(consequent_2);
     });
   }
-  var node_4 = sibling(node_3, 2);
+  var node_3 = sibling(node_2, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_3 = root_52();
+    var consequent_3 = ($$anchor2) => {
+      var div_3 = root_4();
       var text_4 = child(div_3, true);
       reset(div_3);
       template_effect(() => {
@@ -12807,9 +12739,9 @@ function Input($$anchor, $$props) {
       });
       append($$anchor2, div_3);
     };
-    if_block(node_4, ($$render) => {
+    if_block(node_3, ($$render) => {
       if (get2(errorText))
-        $$render(consequent_4);
+        $$render(consequent_3);
     });
   }
   reset(div);
@@ -12818,21 +12750,20 @@ function Input($$anchor, $$props) {
     set_attribute2(div, "data-required", get2(required) ? "true" : undefined);
     set_attribute2(div, "data-readonly", get2(readonly) ? "true" : undefined);
     set_attribute2(div_1, "data-has-unit", get2(unitText) ? "true" : undefined);
-    set_attribute2(div_1, "data-has-controls", get2(controls) ? "true" : undefined);
-    set_attribute2(input_1, "id", get2(inputId));
-    set_attribute2(input_1, "type", $0);
-    set_attribute2(input_1, "inputmode", $1);
-    set_attribute2(input_1, "name", $2);
-    set_attribute2(input_1, "placeholder", $3);
-    input_1.disabled = get2(disabled);
-    input_1.readOnly = get2(readonly);
-    input_1.required = get2(required);
-    set_attribute2(input_1, "min", $4);
-    set_attribute2(input_1, "max", $5);
-    set_attribute2(input_1, "step", $6);
-    set_attribute2(input_1, "aria-label", get2(computedAriaLabel) || undefined);
-    set_attribute2(input_1, "aria-describedby", get2(describedBy) || undefined);
-    set_attribute2(input_1, "aria-invalid", get2(invalid2) ? "true" : undefined);
+    set_attribute2(input, "id", get2(inputId));
+    set_attribute2(input, "type", $0);
+    set_attribute2(input, "inputmode", $1);
+    set_attribute2(input, "name", $2);
+    set_attribute2(input, "placeholder", $3);
+    input.disabled = get2(disabled);
+    input.readOnly = get2(readonly);
+    input.required = get2(required);
+    set_attribute2(input, "min", $4);
+    set_attribute2(input, "max", $5);
+    set_attribute2(input, "step", $6);
+    set_attribute2(input, "aria-label", get2(computedAriaLabel) || undefined);
+    set_attribute2(input, "aria-describedby", get2(describedBy) || undefined);
+    set_attribute2(input, "aria-invalid", get2(invalid2) ? "true" : undefined);
   }, [
     () => inputType(),
     () => text2(get2(p).type, "text") === "engineering" ? "decimal" : undefined,
@@ -12842,12 +12773,12 @@ function Input($$anchor, $$props) {
     () => get2(p).max === undefined ? undefined : text2(get2(p).max),
     () => get2(p).step === undefined ? undefined : text2(get2(p).step)
   ]);
-  delegated("input", input_1, update2);
-  bind_value(input_1, () => get2(value), ($$value) => set(value, $$value));
+  delegated("input", input, update2);
+  bind_value(input, () => get2(value), ($$value) => set(value, $$value));
   append($$anchor, div);
   pop();
 }
-delegate(["input", "click"]);
+delegate(["input"]);
 
 // src/components/svelte/input/RadioGroup.svelte
 var root_34 = from_html(`<span> </span>`);
@@ -12963,6 +12894,7 @@ function RadioGroup($$anchor, $$props) {
     reset(label2);
     reset(span_1);
     template_effect(($0, $1, $2) => {
+      set_attribute2(label2, "data-disabled", get2(disabled) ? "true" : undefined);
       set_attribute2(input, "name", $0);
       set_value(input, $1);
       set_checked(input, get2(itemValue) === get2(value));
@@ -12998,7 +12930,7 @@ var root_35 = from_html(`<span> </span>`);
 var root_16 = from_html(`<label class="slex-select-label"><!> <!></label>`);
 var root_8 = from_html(`<span class="slex-select-check" aria-hidden="true"></span>`);
 var root_6 = from_html(`<li role="option"><span class="slex-select-option-label"><!> <span> </span></span> <!></li>`);
-var root_53 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
+var root_52 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
 var root_9 = from_html(`<option> </option>`);
 var root10 = from_html(`<div class="slex-select"><!> <button type="button" class="slex-select-trigger" aria-haspopup="listbox"><span class="slex-select-value"><!> <span> </span></span> <span class="slex-select-icon" aria-hidden="true"></span></button> <!> <select class="slex-select-native" tabindex="-1" aria-hidden="true"><option> </option><!></select></div>`);
 function Select($$anchor, $$props) {
@@ -13202,7 +13134,7 @@ function Select($$anchor, $$props) {
   var node_4 = sibling(button, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var ul = root_53();
+      var ul = root_52();
       each(ul, 21, () => get2(options), index, ($$anchor3, item, index2) => {
         const isSelected = user_derived(() => get2(item).value === text2(get2(value)));
         const isActive = user_derived(() => index2 === get2(activeIndex));
@@ -16053,7 +15985,7 @@ function TabItem($$anchor, $$props) {
 delegate(["click"]);
 
 // src/components/svelte/input/Tabs.svelte
-var root_54 = from_html(`<span class="slex-sr-only"> </span>`);
+var root_53 = from_html(`<span class="slex-sr-only"> </span>`);
 var root_36 = from_html(`<!> <!>`, 1);
 var root_82 = from_html(`<div></div>`);
 var root_18 = from_html(`<!> <span class="slex-tabs-selected-indicator" aria-hidden="true"></span>`, 1);
@@ -16231,7 +16163,7 @@ function Tabs2($$anchor, $$props) {
               var node_4 = sibling(node_3, 2);
               {
                 var consequent_1 = ($$anchor5) => {
-                  var span = root_54();
+                  var span = root_53();
                   var text_1 = child(span, true);
                   reset(span);
                   template_effect(() => set_text(text_1, get2(label2)));
@@ -16671,7 +16603,7 @@ var root_43 = from_svg(`<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http
 var root_111 = from_html(`<button><!> <!></button>`);
 var root_62 = from_html(`<span class="sr-only"> </span>`);
 var root_83 = from_svg(`<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>`);
-var root_55 = from_html(`<a><!> <!></a>`);
+var root_54 = from_html(`<a><!> <!></a>`);
 function CloseButton($$anchor, $$props) {
   push($$props, true);
   let color = prop($$props, "color", 3, "gray"), name = prop($$props, "name", 3, "Close"), size = prop($$props, "size", 3, "md"), restProps = rest_props($$props, [
@@ -16745,7 +16677,7 @@ function CloseButton($$anchor, $$props) {
       append($$anchor2, button);
     };
     var alternate_2 = ($$anchor2) => {
-      var a = root_55();
+      var a = root_54();
       attribute_effect(a, ($0) => ({
         ...restProps,
         onclick,
@@ -17378,11 +17310,21 @@ function Text2($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
   user_effect(() => bindPropStore($$props.props, (next2) => set(p, next2, true)));
+  const color = user_derived(() => get2(p).color == null || get2(p).color === "" ? undefined : text2(get2(p).color));
+  const size = user_derived(() => cssLength(get2(p).size));
+  function cssLength(value) {
+    if (value == null || value === "")
+      return;
+    const rendered = text2(value);
+    return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
+  }
   var div = root20();
+  let styles;
   var text_1 = child(div, true);
   reset(div);
   template_effect(($0, $1) => {
     set_class(div, 1, $0);
+    styles = set_style(div, "", styles, { color: get2(color), "font-size": get2(size) });
     set_text(text_1, $1);
   }, [
     () => `slex-text${get2(p).variant ? ` slex-text--${text2(get2(p).variant)}` : ""}${get2(p).class ? ` ${text2(get2(p).class)}` : ""}`,
@@ -17554,7 +17496,7 @@ var root_311 = from_html(`<span> </span>`);
 var root_45 = from_html(`<span class="slex-code-block-language"> </span>`);
 var root_114 = from_html(`<figcaption class="slex-code-block-header"><span class="slex-code-block-title"><!> <!></span> <!></figcaption>`);
 var root_72 = from_html(`<span> </span>`);
-var root_56 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
+var root_55 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
 var root22 = from_html(`<figure class="slex-code-block"><!> <pre class="slex-code-block-pre"><code></code></pre></figure>`);
 function CodeBlock($$anchor, $$props) {
   push($$props, true);
@@ -17723,7 +17665,7 @@ function CodeBlock($$anchor, $$props) {
   var pre = sibling(node, 2);
   var code_1 = child(pre);
   each(code_1, 21, () => get2(lines), index, ($$anchor2, line) => {
-    var span_3 = root_56();
+    var span_3 = root_55();
     var span_4 = child(span_3);
     each(span_4, 21, () => get2(line), index, ($$anchor3, token) => {
       var fragment_1 = comment();
@@ -31863,7 +31805,7 @@ function Table($$anchor, $$props) {
 
 // src/components/svelte/content/Section.svelte
 var root_28 = from_html(`<div class="slex-section-eyebrow"> </div>`);
-var root_57 = from_html(`<span> </span>`);
+var root_56 = from_html(`<span> </span>`);
 var root_313 = from_html(`<h2 class="slex-section-title"><!><!></h2>`);
 var root_65 = from_html(`<p class="slex-section-subtitle"> </p>`);
 var root_73 = from_html(`<a class="slex-section-action"> </a>`);
@@ -31914,7 +31856,7 @@ function Section($$anchor, $$props) {
           var node_4 = sibling(node_3);
           {
             var consequent_2 = ($$anchor4) => {
-              var span = root_57();
+              var span = root_56();
               var text_2 = child(span, true);
               reset(span);
               template_effect(($0) => set_text(text_2, $0), [() => text2(get2(p).title)]);

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.0";
+export declare const SLEXKIT_VERSION = "0.3.2";
 export declare const SLEX_PROTOCOL_VERSION = "0.1";
-export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.0";
+export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.2";
 export declare function getSlexKitInfo(): {
     version: string;
     protocolVersion: string;