slexkit 0.3.0 → 0.3.1

package/dist/slexkit.cjs

@@ -783,6 +783,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";
 }
@@ -899,7 +902,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) {
@@ -927,6 +933,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);
@@ -991,7 +1000,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) {
@@ -1003,6 +1012,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;
   }
@@ -1813,7 +1825,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.0";
+var SLEXKIT_VERSION = "0.3.1";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -2941,7 +2953,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,
@@ -3449,6 +3460,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,
@@ -3819,7 +3832,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) {
@@ -12590,6 +12607,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);
@@ -12665,6 +12683,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);
@@ -12685,26 +12704,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}`;
@@ -12716,8 +12720,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`);
@@ -12728,10 +12730,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);
@@ -12742,72 +12740,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;
@@ -12833,9 +12765,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();
@@ -12849,33 +12781,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(() => {
@@ -12884,15 +12794,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(() => {
@@ -12901,9 +12811,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);
@@ -12912,21 +12822,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,
@@ -12936,12 +12845,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>`);
@@ -13057,6 +12966,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));
@@ -13092,7 +13002,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) {
@@ -13296,7 +13206,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));
@@ -16147,7 +16057,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);
@@ -16325,7 +16235,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)));
@@ -16765,7 +16675,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, [
@@ -16839,7 +16749,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,
@@ -17472,11 +17382,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)}` : ""}`,
@@ -17648,7 +17568,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);
@@ -17817,7 +17737,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();
@@ -31957,7 +31877,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>`);
@@ -32008,7 +31928,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)]);