@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/input/index.js

@@ -101,6 +101,13 @@ function devWarn(message, ...args) {
   console.warn(message, ...args);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
   var svg = root_1();
@@ -108,13 +115,14 @@ var calendarIcon = ($$anchor) => {
 };
 var root_1 = $.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
 var root_2 = $.from_html(`<input/>`);
-var root_3 = $.from_html(`<label class="cinder-input-field__label"> </label>`);
-var root_5 = $.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_6 = $.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_7 = $.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_4 = $.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_9 = $.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_10 = $.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_4 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_3 = $.from_html(`<label class="cinder-input-field__label"> <!></label>`);
+var root_6 = $.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_7 = $.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_8 = $.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_5 = $.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_10 = $.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_11 = $.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
 var root = $.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $.push($$props, true);
@@ -123,15 +131,17 @@ function Input($$anchor, $$props) {
     $.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
+      ...rest,
       disabled: $.get(resolvedDisabled),
       required: $.get(resolvedRequired),
+      value: value(),
+      oninput: handleInput,
       class: $0,
       "data-cinder-native-date": $.get(rendersNativeDateIcon) ? "" : undefined,
       "aria-invalid": $.get(resolvedAriaInvalid),
-      "aria-describedby": $.get(describedBy),
-      ...rest
+      "aria-describedby": $.get(describedBy)
     }), [() => classNames("cinder-input", $$props.class)], undefined, undefined, undefined, true);
-    $.bind_value(input, value);
+    $.bind_this(input, ($$value) => $.set(inputNode, $$value), () => $.get(inputNode));
     $.append($$anchor2, input);
   };
   let value = $.prop($$props, "value", 15, ""), type = $.prop($$props, "type", 3, "text"), leadingInteractive = $.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $.prop($$props, "trailingInteractive", 3, false), rest = $.rest_props($$props, [
@@ -140,6 +150,7 @@ function Input($$anchor, $$props) {
     "$$legacy",
     "id",
     "value",
+    "onValueChange",
     "label",
     "description",
     "error",
@@ -151,7 +162,9 @@ function Input($$anchor, $$props) {
     "trailing",
     "leadingInteractive",
     "trailingInteractive",
-    "aria-describedby"
+    "aria-describedby",
+    "aria-invalid",
+    "oninput"
   ]);
   const context = getFormFieldContext();
   $.user_effect(() => {
@@ -159,83 +172,134 @@ function Input($$anchor, $$props) {
       devWarn(`[cinder/Input] id mismatch: Input id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
     }
   });
-  const defaultDescriptionId = $.derived(() => describeId($$props.id, !!$$props.description));
-  const defaultErrorId = $.derived(() => errorId($$props.id, !!$$props.error));
-  const ownDescriptionId = $.derived(() => $$props.description && $.get(defaultDescriptionId) === context?.descriptionId ? `${$$props.id}-input-description` : $.get(defaultDescriptionId));
-  const ownErrorId = $.derived(() => $$props.error && $.get(defaultErrorId) === context?.errorId ? `${$$props.id}-input-error` : $.get(defaultErrorId));
-  const resolvedDescriptionId = $.derived(() => $.get(ownDescriptionId) ?? context?.descriptionId);
-  const resolvedErrorId = $.derived(() => $.get(ownErrorId) ?? context?.errorId);
-  const describedBy = $.derived(() => composeDescribedBy($.get(resolvedDescriptionId), $.get(resolvedErrorId), $$props["aria-describedby"]));
-  const resolvedAriaInvalid = $.derived(() => $$props.error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-  const resolvedRequired = $.derived(() => $$props.required ?? context?.required ?? false);
-  const resolvedDisabled = $.derived(() => $$props.disabled ?? context?.disabled ?? false);
+  const field = $.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "input",
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const ownDescriptionId = $.derived(() => $.get(field).ownDescriptionId);
+  const ownErrorId = $.derived(() => $.get(field).ownErrorId);
+  const describedBy = $.derived(() => $.get(field).describedBy);
+  const resolvedAriaInvalid = $.derived(() => $.get(field).ariaInvalid);
+  const resolvedRequired = $.derived(() => $.get(field).required);
+  const resolvedDisabled = $.derived(() => $.get(field).disabled);
   const isNativeDateInput = $.derived(() => type() === "date");
   const rendersNativeDateIcon = $.derived(() => $.get(isNativeDateInput) && !$$props.trailing);
   const hasTrailing = $.derived(() => !!$$props.trailing || $.get(isNativeDateInput));
   const hasGroupWrapper = $.derived(() => !!$$props.leading || $.get(hasTrailing));
-  const isInvalid = $.derived(() => $.get(resolvedAriaInvalid) === "true" || $.get(resolvedAriaInvalid) === true);
+  const isInvalid = $.derived(() => $.get(resolvedAriaInvalid) === "true");
+  let inputNode = $.state(undefined);
+  let resetSyncTimeout;
+  function syncValueAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if ($.get(inputNode))
+        value($.get(inputNode).value);
+    }, 0);
+  }
+  $.user_effect(() => {
+    const form = $.get(inputNode)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncValueAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncValueAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleInput(event) {
+    const target = event.currentTarget;
+    const committed = commitValue(target.value, $$props.onValueChange, (next) => {
+      value(next);
+    });
+    target.value = committed;
+    $$props.oninput?.(event);
+  }
   var div = root();
   var node = $.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_3();
-      var text = $.child(label_1, true);
+      var text = $.child(label_1);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_4();
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $.reset(label_1);
       $.template_effect(() => {
         $.set_attribute(label_1, "for", $$props.id);
         $.set_attribute(label_1, "data-disabled", $.get(resolvedDisabled) || undefined);
-        $.set_text(text, $$props.label);
+        $.set_text(text, `${$$props.label ?? ""} `);
       });
       $.append($$anchor2, label_1);
     };
     $.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
-  var node_1 = $.sibling(node, 2);
+  var node_2 = $.sibling(node, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_1 = root_4();
-      var node_2 = $.child(div_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var span = root_5();
-          var node_3 = $.child(span);
-          $.snippet(node_3, () => $$props.leading);
-          $.reset(span);
-          $.template_effect(() => $.set_attribute(span, "aria-hidden", leadingInteractive() ? undefined : "true"));
-          $.append($$anchor3, span);
-        };
-        $.if(node_2, ($$render) => {
-          if ($$props.leading)
-            $$render(consequent_1);
-        });
-      }
-      var node_4 = $.sibling(node_2, 2);
-      inputElement(node_4);
-      var node_5 = $.sibling(node_4, 2);
+    var consequent_5 = ($$anchor2) => {
+      var div_1 = root_5();
+      var node_3 = $.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
           var span_1 = root_6();
-          var node_6 = $.child(span_1);
-          $.snippet(node_6, () => $$props.trailing);
+          var node_4 = $.child(span_1);
+          $.snippet(node_4, () => $$props.leading);
           $.reset(span_1);
-          $.template_effect(() => $.set_attribute(span_1, "aria-hidden", trailingInteractive() ? undefined : "true"));
+          $.template_effect(() => $.set_attribute(span_1, "aria-hidden", leadingInteractive() ? undefined : "true"));
           $.append($$anchor3, span_1);
         };
+        $.if(node_3, ($$render) => {
+          if ($$props.leading)
+            $$render(consequent_2);
+        });
+      }
+      var node_5 = $.sibling(node_3, 2);
+      inputElement(node_5);
+      var node_6 = $.sibling(node_5, 2);
+      {
         var consequent_3 = ($$anchor3) => {
           var span_2 = root_7();
           var node_7 = $.child(span_2);
-          calendarIcon(node_7);
+          $.snippet(node_7, () => $$props.trailing);
           $.reset(span_2);
+          $.template_effect(() => $.set_attribute(span_2, "aria-hidden", trailingInteractive() ? undefined : "true"));
           $.append($$anchor3, span_2);
         };
-        $.if(node_5, ($$render) => {
+        var consequent_4 = ($$anchor3) => {
+          var span_3 = root_8();
+          var node_8 = $.child(span_3);
+          calendarIcon(node_8);
+          $.reset(span_3);
+          $.append($$anchor3, span_3);
+        };
+        $.if(node_6, ($$render) => {
           if ($$props.trailing)
-            $$render(consequent_2);
+            $$render(consequent_3);
           else if ($.get(rendersNativeDateIcon))
-            $$render(consequent_3, 1);
+            $$render(consequent_4, 1);
         });
       }
       $.reset(div_1);
@@ -251,17 +315,17 @@ function Input($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       inputElement($$anchor2);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($.get(hasGroupWrapper))
-        $$render(consequent_4);
+        $$render(consequent_5);
       else
         $$render(alternate, -1);
     });
   }
-  var node_8 = $.sibling(node_1, 2);
+  var node_9 = $.sibling(node_2, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var p = root_9();
+    var consequent_6 = ($$anchor2) => {
+      var p = root_10();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -270,15 +334,15 @@ function Input($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_8, ($$render) => {
+    $.if(node_9, ($$render) => {
       if ($$props.description)
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var node_9 = $.sibling(node_8, 2);
+  var node_10 = $.sibling(node_9, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var p_1 = root_10();
+    var consequent_7 = ($$anchor2) => {
+      var p_1 = root_11();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -287,9 +351,9 @@ function Input($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_9, ($$render) => {
+    $.if(node_10, ($$render) => {
       if ($$props.error)
-        $$render(consequent_6);
+        $$render(consequent_7);
     });
   }
   $.reset(div);
@@ -304,4 +368,4 @@ export {
   Input
 };
 
-//# debugId=B8379C6B3D51F99564756E2164756E21
+//# debugId=BCC6672252FF884364756E2164756E21

package/dist/components/input/input.schema.js

@@ -75,6 +75,11 @@ var schema = {
         name: "leading",
         reason: "function-or-snippet"
       },
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed value before the bindable value is written. Return a replacement value to transform it."
+      },
       {
         name: "trailing",
         reason: "function-or-snippet"
@@ -93,4 +98,4 @@ export {
   input_schema_default as default
 };
 
-//# debugId=80D1C03FAA78CA0764756E2164756E21
+//# debugId=E0AC2CCC5539418E64756E2164756E21

package/dist/components/input/input.types.d.ts

@@ -31,6 +31,8 @@ export type InputProps = HTMLInputAttributes & InputAddonProps & {
     id: string;
     /** Bindable current text value of the input. */
     value: string;
+    /** Intercept a proposed value before the bindable value is written. Return a replacement value to transform it. */
+    onValueChange?: (next: string) => string | void;
     /** Visible label text rendered above the input and linked via `for`/`id`. */
     label?: string;
     /** Helper text rendered below the input and associated via `aria-describedby`. */

package/dist/components/invocation-rule-builder/index.d.ts

@@ -1,5 +1,5 @@
 import './invocation-rule-builder.css';
 import InvocationRuleBuilder from './invocation-rule-builder.svelte';
 export default InvocationRuleBuilder;
-export type { InvocationRule, InvocationRuleAction, InvocationRuleBuilderProps, InvocationRuleChange, InvocationRuleCondition, InvocationRuleOption, } from './invocation-rule-builder.types.ts';
+export type { InvocationRule, InvocationRuleAction, InvocationRuleBuilderProps, InvocationRuleBuilderSchemaProps, InvocationRuleChange, InvocationRuleCondition, InvocationRuleOption, } from './invocation-rule-builder.types.ts';
 export { InvocationRuleBuilder };