slexkit 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +4 -3
  3. package/README.zh-CN.md +4 -3
  4. package/dist/ai/llms-components.txt +2 -1
  5. package/dist/ai/llms-full.txt +73 -42
  6. package/dist/ai/llms-runtime.txt +11 -12
  7. package/dist/ai/llms.txt +1 -1
  8. package/dist/ai/slexkit-ai-manifest.json +77 -73
  9. package/dist/components/checkbox.js +1 -0
  10. package/dist/components/choice.css +2 -2
  11. package/dist/components/display.css +1 -1
  12. package/dist/components/index.js +56 -153
  13. package/dist/components/input.css +53 -119
  14. package/dist/components/input.js +33 -143
  15. package/dist/components/radio-group.js +1 -0
  16. package/dist/components/select.css +0 -6
  17. package/dist/components/slider.css +27 -18
  18. package/dist/components/specs.js +2 -1
  19. package/dist/components/switch.css +3 -3
  20. package/dist/components/switch.js +1 -0
  21. package/dist/components/text-input.css +21 -90
  22. package/dist/components/text.js +12 -0
  23. package/dist/components/tooling.css +0 -1
  24. package/dist/runtime.cjs +22 -5
  25. package/dist/runtime.js +22 -5
  26. package/dist/slexkit.cjs +78 -158
  27. package/dist/slexkit.css +54 -121
  28. package/dist/slexkit.js +78 -158
  29. package/dist/types/version.d.ts +2 -2
  30. package/dist/umd/slexkit.tooling.umd.js +77 -158
  31. package/dist/umd/slexkit.umd.js +78 -158
  32. package/package.json +3 -2
  33. package/skills/slexkit-host-integration/SKILL.md +1 -1
  34. package/src/components/svelte/display/Text.svelte +14 -1
  35. package/src/components/svelte/input/Checkbox.svelte +1 -1
  36. package/src/components/svelte/input/Input.svelte +0 -110
  37. package/src/components/svelte/input/RadioGroup.svelte +1 -1
  38. package/src/components/svelte/input/Switch.svelte +1 -1
  39. package/src/styles/components/choice.css +2 -2
  40. package/src/styles/components/select.css +0 -6
  41. package/src/styles/components/slider.css +27 -18
  42. package/src/styles/components/switch.css +3 -3
  43. package/src/styles/components/text-input.css +21 -90
  44. package/src/styles/display.css +1 -1
  45. package/src/styles/tooling.css +0 -1
package/dist/slexkit.js CHANGED
@@ -689,6 +689,9 @@ function isWritableComponent(type) {
689
689
  const mode = getComponentStateMode(type);
690
690
  return mode === "value" || mode === "checked" || mode === "enabled";
691
691
  }
692
+ function isReadableComponent(type) {
693
+ return getComponentStateMode(type) === "readable";
694
+ }
692
695
  function isStatefulComponent(type) {
693
696
  return getComponentStateMode(type) !== "none";
694
697
  }
@@ -805,7 +808,10 @@ function createGProxy(g, components, componentTypes) {
805
808
  function ensureComponentState(name, type, components, componentTypes) {
806
809
  if (!components[name])
807
810
  components[name] = {};
808
- componentTypes[name] = type;
811
+ const previousType = componentTypes[name] ?? "";
812
+ if (!(isWritableComponent(previousType) && isReadableComponent(type))) {
813
+ componentTypes[name] = type;
814
+ }
809
815
  return components[name];
810
816
  }
811
817
  function syncReadableComponentProp(type, state, propName, value) {
@@ -833,6 +839,9 @@ function syncReadableComponentProp(type, state, propName, value) {
833
839
  function syncComponentProps(type, name, props, components, componentTypes) {
834
840
  if (!name || !isStatefulComponent(type))
835
841
  return;
842
+ const previousType = componentTypes[name] ?? "";
843
+ if (isWritableComponent(previousType) && isReadableComponent(type))
844
+ return;
836
845
  const state = ensureComponentState(name, type, components, componentTypes);
837
846
  if (type === "input" && typeof props.type === "string") {
838
847
  assignInputType(state, props.type);
@@ -897,7 +906,7 @@ function seedStaticComponentState(type, state, props) {
897
906
  function warnDuplicateState(ns, name, currentType, currentPath, previous) {
898
907
  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.`);
899
908
  if (previous.type !== currentType) {
900
- console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); the latest rendered type controls write behavior.`);
909
+ 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.`);
901
910
  }
902
911
  }
903
912
  function dynamicStateBinding(type, props) {
@@ -909,6 +918,9 @@ function isMirroredValueControlPair(previousType, currentType) {
909
918
  return previousType === "input" && currentType === "slider" || previousType === "slider" && currentType === "input";
910
919
  }
911
920
  function shouldWarnDuplicateState(currentType, currentBinding, previous) {
921
+ if (isReadableComponent(previous.type) && isReadableComponent(currentType)) {
922
+ return false;
923
+ }
912
924
  if (currentBinding && previous.stateBinding === currentBinding && isMirroredValueControlPair(previous.type, currentType)) {
913
925
  return false;
914
926
  }
@@ -1719,7 +1731,7 @@ ${parseSource}
1719
1731
  var parseSlexKitDsl = parseSlexSource;
1720
1732
 
1721
1733
  // src/version.ts
1722
- var SLEXKIT_VERSION = "0.3.0";
1734
+ var SLEXKIT_VERSION = "0.3.1";
1723
1735
  var SLEX_PROTOCOL_VERSION = "0.1";
1724
1736
  var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
1725
1737
  function getSlexKitInfo() {
@@ -2847,7 +2859,6 @@ var inputSpec = component({
2847
2859
  min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
2848
2860
  max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
2849
2861
  step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
2850
- controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
2851
2862
  onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
2852
2863
  },
2853
2864
  children: noChildren,
@@ -3355,6 +3366,8 @@ var textSpec = component({
3355
3366
  content: { type: "string", dynamic: true, description: "Alias for text." },
3356
3367
  label: { type: "string", dynamic: true, description: "Alias for text." },
3357
3368
  variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
3369
+ color: { type: "string", dynamic: true, description: "Optional CSS color for controlled previews." },
3370
+ size: { type: "string | number", dynamic: true, description: "Optional font size. Numbers are treated as px." },
3358
3371
  class: { type: "string", description: "Additional host-controlled CSS class." }
3359
3372
  },
3360
3373
  children: noChildren,
@@ -3725,7 +3738,11 @@ function isRenderableSource(value) {
3725
3738
  return Object.keys(value).some((key) => key.includes(":"));
3726
3739
  }
3727
3740
  function bareLayoutFromSource(value) {
3728
- const { slex: _slex, namespace: _namespace, g: _g, layout: _layout, ...layout } = value;
3741
+ const layout = { ...value };
3742
+ delete layout.slex;
3743
+ delete layout.namespace;
3744
+ delete layout.g;
3745
+ delete layout.layout;
3729
3746
  return layout;
3730
3747
  }
3731
3748
  function isStateOnlySource(value) {
@@ -12496,6 +12513,7 @@ function Checkbox($$anchor, $$props) {
12496
12513
  reset(label2);
12497
12514
  reset(span);
12498
12515
  template_effect(($0, $1) => {
12516
+ set_attribute2(label2, "data-disabled", get2(p).disabled ? "true" : undefined);
12499
12517
  input.disabled = !!get2(p).disabled;
12500
12518
  set_attribute2(input, "data-state", get2(checked) ? "checked" : "unchecked");
12501
12519
  set_attribute2(input, "aria-label", $0);
@@ -12571,6 +12589,7 @@ function Switch($$anchor, $$props) {
12571
12589
  reset(span);
12572
12590
  template_effect(($0, $1) => {
12573
12591
  set_attribute2(label2, "data-state", get2(enabled) ? "on" : "off");
12592
+ set_attribute2(label2, "data-disabled", get2(p).disabled ? "true" : undefined);
12574
12593
  input.disabled = !!get2(p).disabled;
12575
12594
  set_attribute2(input, "aria-label", $0);
12576
12595
  set_text(text_1, $1);
@@ -12591,26 +12610,11 @@ delegate(["pointerdown", "click", "change"]);
12591
12610
  var nextInputId = 0;
12592
12611
  var root_14 = from_html(`<label class="slex-input-label"> </label>`);
12593
12612
  var root_2 = from_html(`<span class="slex-input-unit" aria-hidden="true"> </span>`);
12594
- 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>`);
12595
- var root_4 = from_html(`<div class="slex-input-description"> </div>`);
12596
- var root_52 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
12597
- var root8 = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!> <!></div> <!> <!></div>`);
12613
+ var root_33 = from_html(`<div class="slex-input-description"> </div>`);
12614
+ var root_4 = from_html(`<div class="slex-input-error" role="alert"> </div>`);
12615
+ var root8 = from_html(`<div class="slex-input-field"><!> <div class="slex-input-control"><input class="slex-input"/> <!></div> <!> <!></div>`);
12598
12616
  function Input($$anchor, $$props) {
12599
12617
  push($$props, true);
12600
- const engineeringPrefixFactors = {
12601
- p: 0.000000000001,
12602
- n: 0.000000001,
12603
- u: 0.000001,
12604
- "µ": 0.000001,
12605
- "碌": 0.000001,
12606
- m: 0.001,
12607
- k: 1000,
12608
- K: 1000,
12609
- M: 1e6,
12610
- meg: 1e6,
12611
- G: 1e9,
12612
- T: 1000000000000
12613
- };
12614
12618
  let p = state(proxy({}));
12615
12619
  let value = state("");
12616
12620
  const fallbackId = `slex-input-${++nextInputId}`;
@@ -12622,8 +12626,6 @@ function Input($$anchor, $$props) {
12622
12626
  const readonly = user_derived(() => bool(get2(p).readonly) || bool(get2(p).readOnly));
12623
12627
  const required = user_derived(() => bool(get2(p).required));
12624
12628
  const invalid2 = user_derived(() => bool(get2(p).invalid) || !!get2(errorText));
12625
- const steppable = user_derived(isSteppableInput);
12626
- const controls = user_derived(() => get2(steppable) && get2(p).controls !== false && get2(p).controls !== "false");
12627
12629
  const componentId = user_derived(() => safeId($$props.componentName));
12628
12630
  const inputId = user_derived(() => text2(get2(p).id) || (get2(componentId) ? `slex-input-${get2(componentId)}` : fallbackId));
12629
12631
  const descriptionId = user_derived(() => `${get2(inputId)}-description`);
@@ -12634,10 +12636,6 @@ function Input($$anchor, $$props) {
12634
12636
  get2(descriptionText) ? get2(descriptionId) : "",
12635
12637
  get2(errorText) ? get2(errorId) : ""
12636
12638
  ].filter(Boolean).join(" "));
12637
- const numericValue = user_derived(readNumericValue);
12638
- const controlLabel = user_derived(() => get2(labelText) || text2(get2(p).placeholder) || $$props.componentName || "input");
12639
- const decrementDisabled = user_derived(() => !canStep(-1));
12640
- const incrementDisabled = user_derived(() => !canStep(1));
12641
12639
  user_effect(() => bindPropStore($$props.props, (next2) => {
12642
12640
  set(p, next2, true);
12643
12641
  set(value, text2(next2.value), true);
@@ -12648,72 +12646,6 @@ function Input($$anchor, $$props) {
12648
12646
  function inputType() {
12649
12647
  return text2(get2(p).type, "text") === "engineering" ? "text" : text2(get2(p).type, "text");
12650
12648
  }
12651
- function isSteppableInput() {
12652
- const kind = text2(get2(p).type, "text");
12653
- return kind === "number" || kind === "engineering" || get2(p).min !== undefined || get2(p).max !== undefined || get2(p).step !== undefined;
12654
- }
12655
- function numericProp(input) {
12656
- if (input === undefined || input === null || input === "")
12657
- return;
12658
- const next2 = Number(input);
12659
- return Number.isFinite(next2) ? next2 : undefined;
12660
- }
12661
- function stepSize() {
12662
- const next2 = numericProp(get2(p).step);
12663
- if (next2 !== undefined && next2 > 0)
12664
- return next2;
12665
- if (text2(get2(p).type, "text") !== "engineering")
12666
- return 1;
12667
- const parsed = parseEngineeringNumber(get2(value));
12668
- if (!parsed.valid || !parsed.prefix)
12669
- return 1;
12670
- return engineeringPrefixFactors[parsed.prefix] ?? 1;
12671
- }
12672
- function readNumericValue() {
12673
- if (text2(get2(p).type, "text") === "engineering") {
12674
- const parsed = parseEngineeringNumber(get2(value));
12675
- return parsed.valid && parsed.number !== null ? parsed.number : null;
12676
- }
12677
- const next2 = Number(get2(value));
12678
- return Number.isFinite(next2) ? next2 : null;
12679
- }
12680
- function clamp(next2) {
12681
- const min = numericProp(get2(p).min);
12682
- const max = numericProp(get2(p).max);
12683
- let clamped = next2;
12684
- if (min !== undefined)
12685
- clamped = Math.max(min, clamped);
12686
- if (max !== undefined)
12687
- clamped = Math.min(max, clamped);
12688
- return clamped;
12689
- }
12690
- function canStep(direction) {
12691
- if (!get2(controls) || get2(disabled) || get2(readonly) || get2(numericValue) === null)
12692
- return false;
12693
- return clamp(get2(numericValue) + direction * stepSize()) !== get2(numericValue);
12694
- }
12695
- function formatSteppedValue(next2) {
12696
- if (text2(get2(p).type, "text") !== "engineering")
12697
- return text2(next2);
12698
- const parsed = parseEngineeringNumber(get2(value));
12699
- if (!parsed.valid)
12700
- return text2(next2);
12701
- const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
12702
- const visibleNumber = factor ? next2 / factor : next2;
12703
- return `${formatNumber2(visibleNumber)}${parsed.prefix}${parsed.unit}`;
12704
- }
12705
- function formatNumber2(next2) {
12706
- return text2(Number(next2.toPrecision(12)));
12707
- }
12708
- function emitValue(nextValue) {
12709
- set(value, nextValue, true);
12710
- emit($$props.ctx, "change", text2(get2(p).type, "text") === "engineering" ? parseEngineeringNumber(get2(value)) : get2(value));
12711
- }
12712
- function stepBy(direction) {
12713
- if (!canStep(direction) || get2(numericValue) === null)
12714
- return;
12715
- emitValue(formatSteppedValue(clamp(get2(numericValue) + direction * stepSize())));
12716
- }
12717
12649
  function update2(event2) {
12718
12650
  if (get2(disabled) || get2(readonly))
12719
12651
  return;
@@ -12739,9 +12671,9 @@ function Input($$anchor, $$props) {
12739
12671
  });
12740
12672
  }
12741
12673
  var div_1 = sibling(node, 2);
12742
- var input_1 = child(div_1);
12743
- remove_input_defaults(input_1);
12744
- var node_1 = sibling(input_1, 2);
12674
+ var input = child(div_1);
12675
+ remove_input_defaults(input);
12676
+ var node_1 = sibling(input, 2);
12745
12677
  {
12746
12678
  var consequent_1 = ($$anchor2) => {
12747
12679
  var span = root_2();
@@ -12755,33 +12687,11 @@ function Input($$anchor, $$props) {
12755
12687
  $$render(consequent_1);
12756
12688
  });
12757
12689
  }
12758
- var node_2 = sibling(node_1, 2);
12759
- {
12760
- var consequent_2 = ($$anchor2) => {
12761
- var span_1 = root_33();
12762
- var button = child(span_1);
12763
- var button_1 = sibling(button, 2);
12764
- reset(span_1);
12765
- template_effect(() => {
12766
- set_attribute2(button, "aria-label", `Increase ${get2(controlLabel)}`);
12767
- button.disabled = get2(incrementDisabled);
12768
- set_attribute2(button_1, "aria-label", `Decrease ${get2(controlLabel)}`);
12769
- button_1.disabled = get2(decrementDisabled);
12770
- });
12771
- delegated("click", button, () => stepBy(1));
12772
- delegated("click", button_1, () => stepBy(-1));
12773
- append($$anchor2, span_1);
12774
- };
12775
- if_block(node_2, ($$render) => {
12776
- if (get2(controls))
12777
- $$render(consequent_2);
12778
- });
12779
- }
12780
12690
  reset(div_1);
12781
- var node_3 = sibling(div_1, 2);
12691
+ var node_2 = sibling(div_1, 2);
12782
12692
  {
12783
- var consequent_3 = ($$anchor2) => {
12784
- var div_2 = root_4();
12693
+ var consequent_2 = ($$anchor2) => {
12694
+ var div_2 = root_33();
12785
12695
  var text_3 = child(div_2, true);
12786
12696
  reset(div_2);
12787
12697
  template_effect(() => {
@@ -12790,15 +12700,15 @@ function Input($$anchor, $$props) {
12790
12700
  });
12791
12701
  append($$anchor2, div_2);
12792
12702
  };
12793
- if_block(node_3, ($$render) => {
12703
+ if_block(node_2, ($$render) => {
12794
12704
  if (get2(descriptionText))
12795
- $$render(consequent_3);
12705
+ $$render(consequent_2);
12796
12706
  });
12797
12707
  }
12798
- var node_4 = sibling(node_3, 2);
12708
+ var node_3 = sibling(node_2, 2);
12799
12709
  {
12800
- var consequent_4 = ($$anchor2) => {
12801
- var div_3 = root_52();
12710
+ var consequent_3 = ($$anchor2) => {
12711
+ var div_3 = root_4();
12802
12712
  var text_4 = child(div_3, true);
12803
12713
  reset(div_3);
12804
12714
  template_effect(() => {
@@ -12807,9 +12717,9 @@ function Input($$anchor, $$props) {
12807
12717
  });
12808
12718
  append($$anchor2, div_3);
12809
12719
  };
12810
- if_block(node_4, ($$render) => {
12720
+ if_block(node_3, ($$render) => {
12811
12721
  if (get2(errorText))
12812
- $$render(consequent_4);
12722
+ $$render(consequent_3);
12813
12723
  });
12814
12724
  }
12815
12725
  reset(div);
@@ -12818,21 +12728,20 @@ function Input($$anchor, $$props) {
12818
12728
  set_attribute2(div, "data-required", get2(required) ? "true" : undefined);
12819
12729
  set_attribute2(div, "data-readonly", get2(readonly) ? "true" : undefined);
12820
12730
  set_attribute2(div_1, "data-has-unit", get2(unitText) ? "true" : undefined);
12821
- set_attribute2(div_1, "data-has-controls", get2(controls) ? "true" : undefined);
12822
- set_attribute2(input_1, "id", get2(inputId));
12823
- set_attribute2(input_1, "type", $0);
12824
- set_attribute2(input_1, "inputmode", $1);
12825
- set_attribute2(input_1, "name", $2);
12826
- set_attribute2(input_1, "placeholder", $3);
12827
- input_1.disabled = get2(disabled);
12828
- input_1.readOnly = get2(readonly);
12829
- input_1.required = get2(required);
12830
- set_attribute2(input_1, "min", $4);
12831
- set_attribute2(input_1, "max", $5);
12832
- set_attribute2(input_1, "step", $6);
12833
- set_attribute2(input_1, "aria-label", get2(computedAriaLabel) || undefined);
12834
- set_attribute2(input_1, "aria-describedby", get2(describedBy) || undefined);
12835
- set_attribute2(input_1, "aria-invalid", get2(invalid2) ? "true" : undefined);
12731
+ set_attribute2(input, "id", get2(inputId));
12732
+ set_attribute2(input, "type", $0);
12733
+ set_attribute2(input, "inputmode", $1);
12734
+ set_attribute2(input, "name", $2);
12735
+ set_attribute2(input, "placeholder", $3);
12736
+ input.disabled = get2(disabled);
12737
+ input.readOnly = get2(readonly);
12738
+ input.required = get2(required);
12739
+ set_attribute2(input, "min", $4);
12740
+ set_attribute2(input, "max", $5);
12741
+ set_attribute2(input, "step", $6);
12742
+ set_attribute2(input, "aria-label", get2(computedAriaLabel) || undefined);
12743
+ set_attribute2(input, "aria-describedby", get2(describedBy) || undefined);
12744
+ set_attribute2(input, "aria-invalid", get2(invalid2) ? "true" : undefined);
12836
12745
  }, [
12837
12746
  () => inputType(),
12838
12747
  () => text2(get2(p).type, "text") === "engineering" ? "decimal" : undefined,
@@ -12842,12 +12751,12 @@ function Input($$anchor, $$props) {
12842
12751
  () => get2(p).max === undefined ? undefined : text2(get2(p).max),
12843
12752
  () => get2(p).step === undefined ? undefined : text2(get2(p).step)
12844
12753
  ]);
12845
- delegated("input", input_1, update2);
12846
- bind_value(input_1, () => get2(value), ($$value) => set(value, $$value));
12754
+ delegated("input", input, update2);
12755
+ bind_value(input, () => get2(value), ($$value) => set(value, $$value));
12847
12756
  append($$anchor, div);
12848
12757
  pop();
12849
12758
  }
12850
- delegate(["input", "click"]);
12759
+ delegate(["input"]);
12851
12760
 
12852
12761
  // src/components/svelte/input/RadioGroup.svelte
12853
12762
  var root_34 = from_html(`<span> </span>`);
@@ -12963,6 +12872,7 @@ function RadioGroup($$anchor, $$props) {
12963
12872
  reset(label2);
12964
12873
  reset(span_1);
12965
12874
  template_effect(($0, $1, $2) => {
12875
+ set_attribute2(label2, "data-disabled", get2(disabled) ? "true" : undefined);
12966
12876
  set_attribute2(input, "name", $0);
12967
12877
  set_value(input, $1);
12968
12878
  set_checked(input, get2(itemValue) === get2(value));
@@ -12998,7 +12908,7 @@ var root_35 = from_html(`<span> </span>`);
12998
12908
  var root_16 = from_html(`<label class="slex-select-label"><!> <!></label>`);
12999
12909
  var root_8 = from_html(`<span class="slex-select-check" aria-hidden="true"></span>`);
13000
12910
  var root_6 = from_html(`<li role="option"><span class="slex-select-option-label"><!> <span> </span></span> <!></li>`);
13001
- var root_53 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
12911
+ var root_52 = from_html(`<ul class="slex-select-menu" role="listbox"></ul>`);
13002
12912
  var root_9 = from_html(`<option> </option>`);
13003
12913
  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>`);
13004
12914
  function Select($$anchor, $$props) {
@@ -13202,7 +13112,7 @@ function Select($$anchor, $$props) {
13202
13112
  var node_4 = sibling(button, 2);
13203
13113
  {
13204
13114
  var consequent_6 = ($$anchor2) => {
13205
- var ul = root_53();
13115
+ var ul = root_52();
13206
13116
  each(ul, 21, () => get2(options), index, ($$anchor3, item, index2) => {
13207
13117
  const isSelected = user_derived(() => get2(item).value === text2(get2(value)));
13208
13118
  const isActive = user_derived(() => index2 === get2(activeIndex));
@@ -16053,7 +15963,7 @@ function TabItem($$anchor, $$props) {
16053
15963
  delegate(["click"]);
16054
15964
 
16055
15965
  // src/components/svelte/input/Tabs.svelte
16056
- var root_54 = from_html(`<span class="slex-sr-only"> </span>`);
15966
+ var root_53 = from_html(`<span class="slex-sr-only"> </span>`);
16057
15967
  var root_36 = from_html(`<!> <!>`, 1);
16058
15968
  var root_82 = from_html(`<div></div>`);
16059
15969
  var root_18 = from_html(`<!> <span class="slex-tabs-selected-indicator" aria-hidden="true"></span>`, 1);
@@ -16231,7 +16141,7 @@ function Tabs2($$anchor, $$props) {
16231
16141
  var node_4 = sibling(node_3, 2);
16232
16142
  {
16233
16143
  var consequent_1 = ($$anchor5) => {
16234
- var span = root_54();
16144
+ var span = root_53();
16235
16145
  var text_1 = child(span, true);
16236
16146
  reset(span);
16237
16147
  template_effect(() => set_text(text_1, get2(label2)));
@@ -16671,7 +16581,7 @@ var root_43 = from_svg(`<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http
16671
16581
  var root_111 = from_html(`<button><!> <!></button>`);
16672
16582
  var root_62 = from_html(`<span class="sr-only"> </span>`);
16673
16583
  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>`);
16674
- var root_55 = from_html(`<a><!> <!></a>`);
16584
+ var root_54 = from_html(`<a><!> <!></a>`);
16675
16585
  function CloseButton($$anchor, $$props) {
16676
16586
  push($$props, true);
16677
16587
  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 +16655,7 @@ function CloseButton($$anchor, $$props) {
16745
16655
  append($$anchor2, button);
16746
16656
  };
16747
16657
  var alternate_2 = ($$anchor2) => {
16748
- var a = root_55();
16658
+ var a = root_54();
16749
16659
  attribute_effect(a, ($0) => ({
16750
16660
  ...restProps,
16751
16661
  onclick,
@@ -17378,11 +17288,21 @@ function Text2($$anchor, $$props) {
17378
17288
  push($$props, true);
17379
17289
  let p = state(proxy({}));
17380
17290
  user_effect(() => bindPropStore($$props.props, (next2) => set(p, next2, true)));
17291
+ const color = user_derived(() => get2(p).color == null || get2(p).color === "" ? undefined : text2(get2(p).color));
17292
+ const size = user_derived(() => cssLength(get2(p).size));
17293
+ function cssLength(value) {
17294
+ if (value == null || value === "")
17295
+ return;
17296
+ const rendered = text2(value);
17297
+ return /^-?\d+(\.\d+)?$/.test(rendered) ? `${rendered}px` : rendered;
17298
+ }
17381
17299
  var div = root20();
17300
+ let styles;
17382
17301
  var text_1 = child(div, true);
17383
17302
  reset(div);
17384
17303
  template_effect(($0, $1) => {
17385
17304
  set_class(div, 1, $0);
17305
+ styles = set_style(div, "", styles, { color: get2(color), "font-size": get2(size) });
17386
17306
  set_text(text_1, $1);
17387
17307
  }, [
17388
17308
  () => `slex-text${get2(p).variant ? ` slex-text--${text2(get2(p).variant)}` : ""}${get2(p).class ? ` ${text2(get2(p).class)}` : ""}`,
@@ -17554,7 +17474,7 @@ var root_311 = from_html(`<span> </span>`);
17554
17474
  var root_45 = from_html(`<span class="slex-code-block-language"> </span>`);
17555
17475
  var root_114 = from_html(`<figcaption class="slex-code-block-header"><span class="slex-code-block-title"><!> <!></span> <!></figcaption>`);
17556
17476
  var root_72 = from_html(`<span> </span>`);
17557
- var root_56 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
17477
+ var root_55 = from_html(`<span class="slex-code-line"><span class="slex-code-line-content"></span></span>`);
17558
17478
  var root22 = from_html(`<figure class="slex-code-block"><!> <pre class="slex-code-block-pre"><code></code></pre></figure>`);
17559
17479
  function CodeBlock($$anchor, $$props) {
17560
17480
  push($$props, true);
@@ -17723,7 +17643,7 @@ function CodeBlock($$anchor, $$props) {
17723
17643
  var pre = sibling(node, 2);
17724
17644
  var code_1 = child(pre);
17725
17645
  each(code_1, 21, () => get2(lines), index, ($$anchor2, line) => {
17726
- var span_3 = root_56();
17646
+ var span_3 = root_55();
17727
17647
  var span_4 = child(span_3);
17728
17648
  each(span_4, 21, () => get2(line), index, ($$anchor3, token) => {
17729
17649
  var fragment_1 = comment();
@@ -31863,7 +31783,7 @@ function Table($$anchor, $$props) {
31863
31783
 
31864
31784
  // src/components/svelte/content/Section.svelte
31865
31785
  var root_28 = from_html(`<div class="slex-section-eyebrow"> </div>`);
31866
- var root_57 = from_html(`<span> </span>`);
31786
+ var root_56 = from_html(`<span> </span>`);
31867
31787
  var root_313 = from_html(`<h2 class="slex-section-title"><!><!></h2>`);
31868
31788
  var root_65 = from_html(`<p class="slex-section-subtitle"> </p>`);
31869
31789
  var root_73 = from_html(`<a class="slex-section-action"> </a>`);
@@ -31914,7 +31834,7 @@ function Section($$anchor, $$props) {
31914
31834
  var node_4 = sibling(node_3);
31915
31835
  {
31916
31836
  var consequent_2 = ($$anchor4) => {
31917
- var span = root_57();
31837
+ var span = root_56();
31918
31838
  var text_2 = child(span, true);
31919
31839
  reset(span);
31920
31840
  template_effect(($0) => set_text(text_2, $0), [() => text2(get2(p).title)]);
@@ -1,6 +1,6 @@
1
- export declare const SLEXKIT_VERSION = "0.3.0";
1
+ export declare const SLEXKIT_VERSION = "0.3.1";
2
2
  export declare const SLEX_PROTOCOL_VERSION = "0.1";
3
- export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.0";
3
+ export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.1";
4
4
  export declare function getSlexKitInfo(): {
5
5
  version: string;
6
6
  protocolVersion: string;