slexkit 0.3.0 → 0.3.2

package/dist/base.css

@@ -133,52 +133,6 @@ color-scheme: dark;
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;

package/dist/components/checkbox.js

@@ -88,6 +88,7 @@ function Checkbox($$anchor, $$props) {
   reset(label);
   reset(span);
   template_effect(($0, $1) => {
+    set_attribute(label, "data-disabled", get(p).disabled ? "true" : undefined);
     input.disabled = !!get(p).disabled;
     set_attribute(input, "data-state", get(checked) ? "checked" : "unchecked");
     set_attribute(input, "aria-label", $0);

package/dist/components/choice.css

@@ -154,8 +154,8 @@
   transform: none;
 }
 
-.slex-checkbox-field:has(.slex-checkbox:disabled),
-.slex-radio-field:has(.slex-radio:disabled) {
+.slex-checkbox-field[data-disabled="true"],
+.slex-radio-field[data-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.65;
 }

package/dist/components/display.css

@@ -79,7 +79,7 @@
   display: block;
 }
 
-.slex-stat-character[data-stat-change] {
+.slex-stat-character[data-stat-kind="digit"][data-stat-change] {
   overflow: hidden;
 }
 

package/dist/components/index.js

@@ -7630,6 +7630,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);
@@ -7705,6 +7706,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);
@@ -7808,26 +7810,11 @@ function parseEngineeringNumber(input) {
 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}`;
@@ -7839,8 +7826,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`);
@@ -7851,10 +7836,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);
@@ -7865,72 +7846,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 `${formatNumber(visibleNumber)}${parsed.prefix}${parsed.unit}`;
-  }
-  function formatNumber(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;
@@ -7956,9 +7871,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();
@@ -7972,33 +7887,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(() => {
@@ -8007,15 +7900,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(() => {
@@ -8024,9 +7917,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);
@@ -8035,21 +7928,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,
@@ -8059,12 +7951,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>`);
@@ -8180,6 +8072,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));
@@ -8215,7 +8108,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) {
@@ -8419,7 +8312,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));
@@ -11270,7 +11163,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);
@@ -11448,7 +11341,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)));
@@ -11888,7 +11781,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, [
@@ -11962,7 +11855,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,
@@ -12595,11 +12488,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)}` : ""}`,
@@ -12771,7 +12674,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);
@@ -12940,7 +12843,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();
@@ -27080,7 +26983,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>`);
@@ -27131,7 +27034,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)]);