slexkit 0.3.0 → 0.3.1

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

@@ -786,6 +786,9 @@
     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";
   }
@@ -902,7 +905,10 @@
   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) {
@@ -930,6 +936,9 @@
   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);
@@ -994,7 +1003,7 @@
   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) {
@@ -1006,6 +1015,9 @@
     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;
     }
@@ -2425,7 +2437,11 @@ ${parseSource}
     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) {
@@ -11493,6 +11509,7 @@ ${pad}}`;
     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);
@@ -11568,6 +11585,7 @@ ${pad}}`;
     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);
@@ -11588,26 +11606,11 @@ ${pad}}`;
   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}`;
@@ -11619,8 +11622,6 @@ ${pad}}`;
     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`);
@@ -11631,10 +11632,6 @@ ${pad}}`;
       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);
@@ -11645,72 +11642,6 @@ ${pad}}`;
     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;
@@ -11736,9 +11667,9 @@ ${pad}}`;
       });
     }
     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();
@@ -11752,33 +11683,11 @@ ${pad}}`;
           $$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(() => {
@@ -11787,15 +11696,15 @@ ${pad}}`;
         });
         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(() => {
@@ -11804,9 +11713,9 @@ ${pad}}`;
         });
         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);
@@ -11815,21 +11724,20 @@ ${pad}}`;
       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,
@@ -11839,12 +11747,12 @@ ${pad}}`;
       () => 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>`);
@@ -11960,6 +11868,7 @@ ${pad}}`;
       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));
@@ -11995,7 +11904,7 @@ ${pad}}`;
   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) {
@@ -12199,7 +12108,7 @@ ${pad}}`;
     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));
@@ -15050,7 +14959,7 @@ Migration example: ${hintLines.join(" ")}`;
   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);
@@ -15228,7 +15137,7 @@ Migration example: ${hintLines.join(" ")}`;
                 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)));
@@ -15668,7 +15577,7 @@ Migration example: ${hintLines.join(" ")}`;
   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, [
@@ -15742,7 +15651,7 @@ Migration example: ${hintLines.join(" ")}`;
         append($$anchor2, button);
       };
       var alternate_2 = ($$anchor2) => {
-        var a = root_55();
+        var a = root_54();
         attribute_effect(a, ($0) => ({
           ...restProps,
           onclick,
@@ -16375,11 +16284,21 @@ Migration example: ${hintLines.join(" ")}`;
     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)}` : ""}`,
@@ -16551,7 +16470,7 @@ Migration example: ${hintLines.join(" ")}`;
   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);
@@ -16720,7 +16639,7 @@ Migration example: ${hintLines.join(" ")}`;
     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();
@@ -30860,7 +30779,7 @@ l0,-` + (midHeight + 144) + `c-2,-159.3,-10,-310.7,-24,-454c-53.3,-528,-210,-949
 
   // 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>`);
@@ -30911,7 +30830,7 @@ l0,-` + (midHeight + 144) + `c-2,-159.3,-10,-310.7,-24,-454c-53.3,-528,-210,-949
             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)]);
@@ -61020,7 +60939,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   var root_29 = from_html(`<h2><!></h2>`);
   var root_314 = from_html(`<h3><!></h3>`);
   var root_48 = from_html(`<h4><!></h4>`);
-  var root_58 = from_html(`<h5><!></h5>`);
+  var root_57 = from_html(`<h5><!></h5>`);
   var root_66 = from_html(`<h6><!></h6>`);
   function Heading($$anchor, $$props) {
     push($$props, true);
@@ -61061,7 +60980,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         append($$anchor2, h4);
       };
       var consequent_4 = ($$anchor2) => {
-        var h5 = root_58();
+        var h5 = root_57();
         var node_5 = child(h5);
         snippet(node_5, () => $$props.children ?? noop);
         reset(h5);