bhl-forms 0.2.0 → 0.2.2

package/dist/bhl-forms.es.js

@@ -4976,10 +4976,6 @@ function init$2(obj) {
 function slugify$1(str) {
   return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]/g, " ").trim().replace(/\s+/g, "-");
 }
-function isScalar$1(value) {
-  const t2 = typeof value;
-  return value === null || t2 !== "function" && t2 !== "object";
-}
 function createDispatcher$2() {
   const middleware = [];
   let currentIndex = 0;
@@ -5344,9 +5340,7 @@ function hydrate$1(node, context) {
       return;
     if (child.name in _value) {
       const childValue = child.type !== "input" || _value[child.name] && typeof _value[child.name] === "object" ? init$2(_value[child.name]) : _value[child.name];
-      if (!isScalar$1(childValue) || child._value !== childValue) {
-        child.input(childValue, false);
-      }
+      child.input(childValue, false);
     } else {
       if (node.type !== "list" || typeof child.name === "number") {
         partial$1(context, { name: child.name, value: child.value });
@@ -5398,34 +5392,35 @@ function destroy$1(node, context) {
   node.emit("destroying", node);
   node.store.filter(() => false);
   if (node.parent) {
+    node.parent.emit("childRemoved", node);
     node.parent.remove(node);
   }
   deregister$1(node);
   context._value = context.value = void 0;
   node.emit("destroyed", node);
 }
-function define$1(node, context, definition) {
-  context.type = definition.type;
-  context.props.definition = clone$1(definition);
+function define$1(node, context, definition2) {
+  context.type = definition2.type;
+  context.props.definition = clone$1(definition2);
   context.value = context._value = createValue$1({
     type: node.type,
     value: context.value
   });
-  if (definition.forceTypeProp) {
+  if (definition2.forceTypeProp) {
     if (node.props.type)
       node.props.originalType = node.props.type;
-    context.props.type = definition.forceTypeProp;
+    context.props.type = definition2.forceTypeProp;
   }
-  if (definition.family) {
-    context.props.family = definition.family;
+  if (definition2.family) {
+    context.props.family = definition2.family;
   }
-  if (definition.features) {
-    definition.features.forEach((feature) => feature(node));
+  if (definition2.features) {
+    definition2.features.forEach((feature) => feature(node));
   }
-  if (definition.props) {
-    node.addProps(definition.props);
+  if (definition2.props) {
+    node.addProps(definition2.props);
   }
-  node.emit("defined", definition);
+  node.emit("defined", definition2);
 }
 function addProps$1(node, context, props2) {
   var _a;
@@ -6383,10 +6378,6 @@ function applyExplicit(original, obj, explicit) {
   }
   return obj;
 }
-function isScalar(value) {
-  const t2 = typeof value;
-  return value === null || t2 !== "function" && t2 !== "object";
-}
 function createDispatcher$1() {
   const middleware = [];
   let currentIndex = 0;
@@ -7054,9 +7045,7 @@ function hydrate(node, context) {
       return;
     if (child.name in _value) {
       const childValue = child.type !== "input" || _value[child.name] && typeof _value[child.name] === "object" ? init$1(_value[child.name]) : _value[child.name];
-      if (!isScalar(childValue) || child._value !== childValue) {
-        child.input(childValue, false);
-      }
+      child.input(childValue, false);
     } else {
       if (node.type !== "list" || typeof child.name === "number") {
         partial(context, { name: child.name, value: child.value });
@@ -7108,34 +7097,35 @@ function destroy(node, context) {
   node.emit("destroying", node);
   node.store.filter(() => false);
   if (node.parent) {
+    node.parent.emit("childRemoved", node);
     node.parent.remove(node);
   }
   deregister(node);
   context._value = context.value = void 0;
   node.emit("destroyed", node);
 }
-function define(node, context, definition) {
-  context.type = definition.type;
-  context.props.definition = clone(definition);
+function define(node, context, definition2) {
+  context.type = definition2.type;
+  context.props.definition = clone(definition2);
   context.value = context._value = createValue({
     type: node.type,
     value: context.value
   });
-  if (definition.forceTypeProp) {
+  if (definition2.forceTypeProp) {
     if (node.props.type)
       node.props.originalType = node.props.type;
-    context.props.type = definition.forceTypeProp;
+    context.props.type = definition2.forceTypeProp;
   }
-  if (definition.family) {
-    context.props.family = definition.family;
+  if (definition2.family) {
+    context.props.family = definition2.family;
   }
-  if (definition.features) {
-    definition.features.forEach((feature) => feature(node));
+  if (definition2.features) {
+    definition2.features.forEach((feature) => feature(node));
   }
-  if (definition.props) {
-    node.addProps(definition.props);
+  if (definition2.props) {
+    node.addProps(definition2.props);
   }
-  node.emit("defined", definition);
+  node.emit("defined", definition2);
 }
 function addProps(node, context, props2) {
   var _a;
@@ -7918,15 +7908,34 @@ function createClasses(propertyKey, node, sectionClassList) {
 function generateClassList(node, property, ...args) {
   const combinedClassList = args.reduce((finalClassList, currentClassList) => {
     if (!currentClassList)
-      return finalClassList;
+      return handleNegativeClasses(finalClassList);
     const _a = currentClassList, { $reset } = _a, classList = __objRest(_a, ["$reset"]);
     if ($reset) {
-      return classList;
+      return handleNegativeClasses(classList);
     }
-    return Object.assign(finalClassList, classList);
+    return handleNegativeClasses(Object.assign(finalClassList, classList));
   }, {});
   return Object.keys(node.hook.classes.dispatch({ property, classes: combinedClassList }).classes).filter((key) => combinedClassList[key]).join(" ") || null;
 }
+function handleNegativeClasses(classList) {
+  const removalToken = "$remove:";
+  let hasNegativeClassValue = false;
+  const applicableClasses = Object.keys(classList).filter((className) => {
+    if (classList[className] && className.startsWith(removalToken)) {
+      hasNegativeClassValue = true;
+    }
+    return classList[className];
+  });
+  if (applicableClasses.length > 1 && hasNegativeClassValue) {
+    const negativeClasses = applicableClasses.filter((className) => className.startsWith(removalToken));
+    negativeClasses.map((negativeClass) => {
+      const targetClass = negativeClass.substring(removalToken.length);
+      classList[targetClass] = false;
+      classList[negativeClass] = false;
+    });
+  }
+  return classList;
+}
 function setErrors(id, localErrors, childErrors) {
   const node = getNode$1(id);
   if (node) {
@@ -7943,7 +7952,7 @@ function clearErrors(id, clearChildren = true) {
     warn(652, id);
   }
 }
-const FORMKIT_VERSION = "1.0.0-beta.13-c578106";
+const FORMKIT_VERSION = "0.16.4";
 function createLibraryPlugin(...libraries) {
   const library = libraries.reduce((merged, lib) => extend(merged, lib), {});
   const plugin2 = () => {
@@ -7995,6 +8004,8 @@ function optionValue(options2, value) {
   return value;
 }
 function shouldSelect(valueA, valueB) {
+  if (valueA === null && valueB === void 0 || valueA === void 0 && valueB === null)
+    return false;
   if (valueA == valueB)
     return true;
   if (isPojo(valueA) && isPojo(valueB))
@@ -8041,11 +8052,11 @@ const label = createSection("label", () => ({
     for: "$id"
   }
 }));
-const messages = createSection("messages", () => ({
+const messages$1 = createSection("messages", () => ({
   $el: "ul",
-  if: "$fns.length($messages)"
+  if: "$defaultMessagePlacement && $fns.length($messages)"
 }));
-const message = createSection("message", () => ({
+const message$1 = createSection("message", () => ({
   $el: "li",
   for: ["message", "$messages"],
   attrs: {
@@ -8126,6 +8137,11 @@ const boxWrapper = createSection("wrapper", () => ({
       if: "$options.length",
       then: void 0,
       else: "$disabled || undefined"
+    },
+    "data-checked": {
+      if: "$options == undefined",
+      then: "$fns.eq($_value, $onValue) || undefined",
+      else: "$fns.isChecked($option.value) || undefined"
     }
   }
 }));
@@ -8209,7 +8225,6 @@ const submitInput = createSection("submit", () => ({
   $cmp: "FormKit",
   bind: "$submitAttrs",
   props: {
-    ignore: true,
     type: "submit",
     disabled: "$disabled",
     label: "$submitLabel"
@@ -8300,7 +8315,9 @@ function normalizeBoxes(node) {
         var _a;
         if (!((_a = option2.attrs) === null || _a === void 0 ? void 0 : _a.id)) {
           return extend(option2, {
-            attrs: { id: `${node.name}-option-${kebab(String(option2.value))}` }
+            attrs: {
+              id: `${node.name}-option-${slugify(String(option2.value))}`
+            }
           });
         }
         return option2;
@@ -8461,13 +8478,13 @@ function handleSubmit(node, submitEvent) {
   return __async(this, null, function* () {
     submitEvent.preventDefault();
     yield node.settled;
-    node.walk((n) => {
-      n.store.set(createMessage({
-        key: "submitted",
-        value: true,
-        visible: false
-      }));
-    });
+    const setSubmitted = (n) => n.store.set(createMessage({
+      key: "submitted",
+      value: true,
+      visible: false
+    }));
+    node.walk(setSubmitted);
+    setSubmitted(node);
     if (typeof node.props.onSubmitRaw === "function") {
       node.props.onSubmitRaw(submitEvent, node);
     }
@@ -8684,7 +8701,7 @@ function extendSchema(schema, extension = {}) {
   return extend(schema, extension);
 }
 function useSchema(inputSection) {
-  return outer(wrapper(label("$label"), inner(prefix(), inputSection(), suffix())), help("$help"), messages(message("$message.value")));
+  return outer(wrapper(label("$label"), inner(prefix(), inputSection(), suffix())), help("$help"), messages$1(message$1("$message.value")));
 }
 function createSection(section, el, root = false) {
   return (...children) => {
@@ -8711,6 +8728,7 @@ function createSection(section, el, root = false) {
         else: section in extensions ? extendSchema(node, extensions[section]) : node
       };
     };
+    extendable._s = section;
     return root ? createRoot(extendable) : extendable;
   };
 }
@@ -8720,7 +8738,7 @@ function createRoot(rootSection) {
   };
 }
 function $if(condition, then, otherwise) {
-  return (extensions) => {
+  const extendable = (extensions) => {
     const node = then(extensions);
     if (otherwise || isSchemaObject(node) && "if" in node || isSlotCondition(node)) {
       const conditionalNode = {
@@ -8738,24 +8756,28 @@ function $if(condition, then, otherwise) {
     }
     return node;
   };
+  extendable._s = token();
+  return extendable;
 }
 function $extend(section, extendWith) {
-  return (extensions) => {
+  const extendable = (extensions) => {
     const node = section({});
     if (isSlotCondition(node)) {
       if (Array.isArray(node.else))
         return node;
-      node.else = extendSchema(extendSchema(node.else, extendWith), extensions);
+      node.else = extendSchema(extendSchema(node.else, extendWith), section._s ? extensions[section._s] : {});
       return node;
     }
-    return extendSchema(extendSchema(node, extendWith), extensions);
+    return extendSchema(extendSchema(node, extendWith), section._s ? extensions[section._s] : {});
   };
+  extendable._s = section._s;
+  return extendable;
 }
 function $root(section) {
   return createRoot(section);
 }
 const button = {
-  schema: outer(messages(message("$message.value")), wrapper(buttonInput(icon("prefix"), prefix(), buttonLabel("$label || $ui.submit.value"), suffix(), icon("suffix"))), help("$help")),
+  schema: outer(messages$1(message$1("$message.value")), wrapper(buttonInput(icon("prefix"), prefix(), buttonLabel("$label || $ui.submit.value"), suffix(), icon("suffix"))), help("$help")),
   type: "input",
   family: "button",
   props: [],
@@ -8780,7 +8802,7 @@ const checkbox = {
       })), boxHelp("$option.help"))))
     ),
     $if("$options == undefined && $help", help("$help")),
-    messages(message("$message.value"))
+    messages$1(message$1("$message.value"))
   ),
   type: "input",
   family: "box",
@@ -8792,7 +8814,7 @@ const checkbox = {
   ]
 };
 const file = {
-  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), fileInput(), fileList(fileItem(icon("fileItem"), fileName("$file.name"), $if("$value.length === 1", fileRemove(icon("fileRemove"), "$ui.remove.value")))), $if("$value.length > 1", fileRemove("$ui.removeAll.value")), noFiles(icon("noFiles"), "$ui.noFiles.value"), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
+  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), fileInput(), fileList(fileItem(icon("fileItem"), fileName("$file.name"), $if("$value.length === 1", fileRemove(icon("fileRemove"), "$ui.remove.value")))), $if("$value.length > 1", fileRemove("$ui.removeAll.value")), noFiles(icon("noFiles"), "$ui.noFiles.value"), suffix(), icon("suffix"))), help("$help"), messages$1(message$1("$message.value"))),
   type: "input",
   family: "text",
   props: [],
@@ -8804,7 +8826,7 @@ const file = {
   ]
 };
 const form = {
-  schema: formInput("$slots.default", messages(message("$message.value")), actions(submitInput())),
+  schema: formInput("$slots.default", messages$1(message$1("$message.value")), actions(submitInput())),
   type: "group",
   props: [
     "actions",
@@ -8849,27 +8871,32 @@ const radio = {
       }), decorator(icon("decorator")), suffix()), $if("$option.label", boxLabel("$option.label"))), boxHelp("$option.help"))))
     ),
     $if("$options === undefined && $help", help("$help")),
-    messages(message("$message.value"))
+    messages$1(message$1("$message.value"))
   ),
   type: "input",
   family: "box",
   props: ["options", "onValue", "offValue", "optionsLoader"],
-  features: [options, radios, defaultIcon("decorator", "radioDecorator")]
+  features: [
+    disables,
+    options,
+    radios,
+    defaultIcon("decorator", "radioDecorator")
+  ]
 };
 const select = {
-  schema: outer(wrapper(label("$label"), inner(icon("prefix"), prefix(), selectInput$1($if("$slots.default", () => "$slots.default", $if("$slots.option", optionSlot, option("$option.label")))), $if("$attrs.multiple !== undefined", () => "", icon("select")), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
+  schema: outer(wrapper(label("$label"), inner(icon("prefix"), prefix(), selectInput$1($if("$slots.default", () => "$slots.default", $if("$slots.option", optionSlot, option("$option.label")))), $if("$attrs.multiple !== undefined", () => "", icon("select")), suffix(), icon("suffix"))), help("$help"), messages$1(message$1("$message.value"))),
   type: "input",
   props: ["options", "placeholder", "optionsLoader"],
   features: [options, select$1, defaultIcon("select", "select")]
 };
 const textarea = {
-  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), textareaInput(), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
+  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), textareaInput(), suffix(), icon("suffix"))), help("$help"), messages$1(message$1("$message.value"))),
   type: "input",
   props: [],
   features: [initialValue]
 };
 const text = {
-  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), textInput(), suffix(), icon("suffix"))), help("$help"), messages(message("$message.value"))),
+  schema: outer(wrapper(label("$label"), inner(icon("prefix", "label"), prefix(), textInput(), suffix(), icon("suffix"))), help("$help"), messages$1(message$1("$message.value"))),
   type: "input",
   family: "text",
   props: [],
@@ -9143,10 +9170,12 @@ function createObserver(node, dependencies) {
   const { proxy: observed, revoke } = Proxy.revocable(node, {
     get(...args) {
       switch (args[1]) {
+        case "_node":
+          return node;
         case "deps":
           return deps;
         case "watch":
-          return (block) => watch(observed, block);
+          return (block, after) => watch(observed, block, after);
         case "observe":
           return () => {
             const old = new Map(deps);
@@ -9167,6 +9196,7 @@ function createObserver(node, dependencies) {
             removeListeners(receipts2);
             revokedObservers.add(args[2]);
             revoke();
+            return void 0;
           };
       }
       const value = Reflect.get(...args);
@@ -9184,8 +9214,9 @@ function createObserver(node, dependencies) {
 function applyListeners(node, [toAdd, toRemove], callback) {
   toAdd.forEach((events, depNode) => {
     events.forEach((event) => {
+      var _a;
       node.receipts.has(depNode) || node.receipts.set(depNode, {});
-      node.receipts.set(depNode, Object.assign(node.receipts.get(depNode), {
+      node.receipts.set(depNode, Object.assign((_a = node.receipts.get(depNode)) !== null && _a !== void 0 ? _a : {}, {
         [event]: depNode.on(event, callback)
       }));
     });
@@ -9210,16 +9241,20 @@ function removeListeners(receipts2) {
     }
   });
 }
-function watch(node, block) {
-  return __async(this, null, function* () {
-    const oldDeps = new Map(node.deps);
-    node.observe();
-    const res = block(node);
-    if (res instanceof Promise)
-      yield res;
+function watch(node, block, after) {
+  const doAfterObservation = (res2) => {
     const newDeps = node.stopObserve();
-    applyListeners(node, diffDeps(oldDeps, newDeps), () => watch(node, block));
-  });
+    applyListeners(node, diffDeps(oldDeps, newDeps), () => watch(node, block, after));
+    if (after)
+      after(res2);
+  };
+  const oldDeps = new Map(node.deps);
+  node.observe();
+  const res = block(node);
+  if (res instanceof Promise)
+    res.then((val) => doAfterObservation(val));
+  else
+    doAfterObservation(res);
 }
 function diffDeps(previous, current) {
   const toAdd = /* @__PURE__ */ new Map();
@@ -9258,18 +9293,25 @@ const validatingMessage = createMessage({
 });
 function createValidationPlugin(baseRules = {}) {
   return function validationPlugin(node) {
-    let availableRules = __spreadValues(__spreadValues({}, baseRules), cloneAny(node.props.validationRules));
+    let propRules = cloneAny(node.props.validationRules || {});
+    let availableRules = __spreadValues(__spreadValues({}, baseRules), propRules);
     let observedNode = createObserver(node);
     const state = { input: token(), rerun: null, isPassing: true };
     let validation = cloneAny(node.props.validation);
     node.on("prop:validation", ({ payload }) => reboot(payload, availableRules));
     node.on("prop:validationRules", ({ payload }) => reboot(validation, payload));
     function reboot(newValidation, newRules) {
-      if (eq(availableRules, newRules) && eq(validation, newValidation))
+      var _a;
+      if (eq(Object.keys(propRules || {}), Object.keys(newRules || {})) && eq(validation, newValidation))
         return;
+      propRules = cloneAny(newRules);
       validation = cloneAny(newValidation);
-      availableRules = __spreadValues(__spreadValues({}, baseRules), cloneAny(node.props.validationRules));
+      availableRules = __spreadValues(__spreadValues({}, baseRules), propRules);
       removeListeners(observedNode.receipts);
+      (_a = node.props.parsedRules) === null || _a === void 0 ? void 0 : _a.forEach((validation2) => {
+        var _a2;
+        validation2.messageObserver = (_a2 = validation2.messageObserver) === null || _a2 === void 0 ? void 0 : _a2.kill();
+      });
       node.store.filter(() => false, "validation");
       node.props.parsedRules = parseRules(newValidation, availableRules);
       observedNode.kill();
@@ -9356,27 +9398,38 @@ function runRule(validation, node, after) {
 }
 function removeMessage(node, validation) {
   const key = `rule_${validation.name}`;
+  if (validation.messageObserver) {
+    validation.messageObserver = validation.messageObserver.kill();
+  }
   if (has(node.store, key)) {
     node.store.remove(key);
   }
 }
 function createFailedMessage(node, validation, removeImmediately) {
-  const i18nArgs = createI18nArgs(node, validation);
-  const customMessage = createCustomMessage(node, validation, i18nArgs);
-  const message2 = createMessage({
-    blocking: validation.blocking,
-    key: `rule_${validation.name}`,
-    meta: {
-      messageKey: validation.name,
-      removeImmediately,
-      localize: !customMessage,
-      i18nArgs
-    },
-    type: "validation",
-    value: customMessage || "This field is not valid."
+  if (isKilled(node))
+    return;
+  if (!validation.messageObserver) {
+    validation.messageObserver = createObserver(node._node);
+  }
+  validation.messageObserver.watch((node2) => {
+    const i18nArgs = createI18nArgs(node2, validation);
+    return i18nArgs;
+  }, (i18nArgs) => {
+    const customMessage = createCustomMessage(node, validation, i18nArgs);
+    const message2 = createMessage({
+      blocking: validation.blocking,
+      key: `rule_${validation.name}`,
+      meta: {
+        messageKey: validation.name,
+        removeImmediately,
+        localize: !customMessage,
+        i18nArgs
+      },
+      type: "validation",
+      value: customMessage || "This field is not valid."
+    });
+    node.store.set(message2);
   });
-  node.store.set(message2);
-  return message2;
 }
 function createCustomMessage(node, validation, i18nArgs) {
   const customMessage = node.props.validationMessages && has(node.props.validationMessages, validation.name) ? node.props.validationMessages[validation.name] : void 0;
@@ -9521,7 +9574,8 @@ function date2(date3) {
     return "(unknown)";
   }
   return new Intl.DateTimeFormat(void 0, {
-    dateStyle: "medium"
+    dateStyle: "medium",
+    timeZone: "UTC"
   }).format(dateTime);
 }
 function order(first, second) {
@@ -9537,7 +9591,16 @@ const ui$u = {
   moveUp: "Move up",
   moveDown: "Move down",
   isLoading: "Loading...",
-  loadMore: "Load more"
+  loadMore: "Load more",
+  next: "Next",
+  prev: "Previous",
+  addAllValues: "Add all values",
+  addSelectedValues: "Add selected values",
+  removeAllValues: "Remove all values",
+  removeSelectedValues: "Remove selected values",
+  chooseDate: "Choose date",
+  changeDate: "Change date",
+  invalidDate: "The selected date is invalid."
 };
 const validation$u = {
   accepted({ name }) {
@@ -9624,9 +9687,9 @@ const validation$u = {
   },
   min({ name, node: { value }, args }) {
     if (Array.isArray(value)) {
-      return `Cannot have less than ${args[0]} ${name}.`;
+      return `Cannot have fewer than ${args[0]} ${name}.`;
     }
-    return `${sentence(name)} must be at least ${args[0]}.`;
+    return `Must be at least ${args[0]} ${name} .`;
   },
   not({ name, node: { value } }) {
     return `\u201C${value}\u201D is not an allowed ${name}.`;
@@ -9641,7 +9704,7 @@ const validation$u = {
     return `${sentence(name)} doesn\u2019t start with ${list(args)}.`;
   },
   url() {
-    return `Please include a valid url.`;
+    return `Please enter a valid URL.`;
   }
 };
 var en = /* @__PURE__ */ Object.freeze({
@@ -9814,11 +9877,11 @@ function createIconHandler(iconLoader, iconLoaderUrl) {
     }
     if (typeof iconName !== "string")
       return;
-    const icon2 = iconRegistry[iconName];
     const isDefault = iconName.startsWith("default:");
     iconName = isDefault ? iconName.split(":")[1] : iconName;
+    const iconWasAlreadyLoaded = iconName in iconRegistry;
     let loadedIcon = void 0;
-    if (icon2 || iconName in iconRegistry) {
+    if (iconWasAlreadyLoaded) {
       return iconRegistry[iconName];
     } else if (!iconRequests[iconName]) {
       loadedIcon = getIconFromStylesheet(iconName);
@@ -9981,7 +10044,9 @@ function getRef(token2, data) {
     return value;
   }
   const path = token2.split(".");
-  watchEffect(() => value.value = getValue(data, path));
+  watchEffect(() => {
+    value.value = getValue(isRef(data) ? data.value : data, path);
+  });
   return value;
 }
 function getValue(set2, path) {
@@ -10308,17 +10373,17 @@ function createRenderFn(instanceCreator, data, instanceKey2) {
     return requirements.reduce((tokens, token2) => {
       if (token2.startsWith("slots.")) {
         const slot = token2.substring(6);
-        const hasSlot = data.slots && has(data.slots, slot);
+        const hasSlot = () => data.slots && has(data.slots, slot) && typeof data.slots[slot] === "function";
         if (hints.if) {
-          tokens[token2] = () => hasSlot;
-        } else if (data.slots && hasSlot) {
+          tokens[token2] = hasSlot;
+        } else if (data.slots) {
           const scopedData = slotData(data, instanceKey2);
-          tokens[token2] = () => data.slots[slot](scopedData);
-          return tokens;
+          tokens[token2] = () => hasSlot() ? data.slots[slot](scopedData) : null;
         }
+      } else {
+        const value = getRef(token2, data);
+        tokens[token2] = () => useScope(token2, value.value);
       }
-      const value = getRef(token2, data);
-      tokens[token2] = () => useScope(token2, value.value);
       return tokens;
     }, {});
   }, instanceKey2);
@@ -10608,7 +10673,7 @@ const pseudoProps = [
   "disabled",
   "preserve",
   /^preserve(-e|E)rrors/,
-  /^[a-z]+(?:-visibility|Visibility)$/,
+  /^[a-z]+(?:-visibility|Visibility|-behavior|Behavior)$/,
   /^[a-zA-Z-]+(?:-class|Class)$/,
   "prefixIcon",
   "suffixIcon",
@@ -10640,10 +10705,11 @@ function onlyListeners(props2) {
   return knownListeners;
 }
 function useInput(props2, context, options2 = {}) {
+  var _a;
   const config = Object.assign({}, inject(optionsSymbol) || {}, options2);
   const instance = getCurrentInstance();
   const listeners = onlyListeners(instance === null || instance === void 0 ? void 0 : instance.vnode.props);
-  const isVModeled = props2.modelValue !== void 0;
+  const isVModeled = "modelValue" in ((_a = instance === null || instance === void 0 ? void 0 : instance.vnode.props) !== null && _a !== void 0 ? _a : {});
   const value = props2.modelValue !== void 0 ? props2.modelValue : cloneAny(context.attrs.value);
   function createInitialProps() {
     const initialProps2 = __spreadValues(__spreadValues({}, nodeProps(props2)), listeners);
@@ -10719,6 +10785,8 @@ function useInput(props2, context, options2 = {}) {
   }
   watchEffect(() => {
     const attrs = except(nodeProps(context.attrs), pseudoPropNames.value);
+    if ("multiple" in attrs)
+      attrs.multiple = undefine(attrs.multiple);
     node.props.attrs = Object.assign({}, node.props.attrs || {}, attrs);
   });
   watchEffect(() => {
@@ -10760,8 +10828,8 @@ function useInput(props2, context, options2 = {}) {
   let inputTimeout;
   const mutex = /* @__PURE__ */ new WeakSet();
   node.on("modelUpdated", () => {
-    var _a, _b;
-    context.emit("inputRaw", (_a = node.context) === null || _a === void 0 ? void 0 : _a.value, node);
+    var _a2, _b;
+    context.emit("inputRaw", (_a2 = node.context) === null || _a2 === void 0 ? void 0 : _a2.value, node);
     clearTimeout(inputTimeout);
     inputTimeout = setTimeout(context.emit, 20, "input", (_b = node.context) === null || _b === void 0 ? void 0 : _b.value, node);
     if (isVModeled && node.context) {
@@ -10774,7 +10842,7 @@ function useInput(props2, context, options2 = {}) {
   });
   if (isVModeled) {
     watchVerbose(toRef(props2, "modelValue"), (path, value2) => {
-      var _a;
+      var _a2;
       const rawValue = useRaw(value2);
       if (isObject(rawValue) && mutex.has(rawValue)) {
         return mutex.delete(rawValue);
@@ -10782,7 +10850,7 @@ function useInput(props2, context, options2 = {}) {
       if (!path.length)
         node.input(value2, false);
       else
-        (_a = node.at(path)) === null || _a === void 0 ? void 0 : _a.input(value2, false);
+        (_a2 = node.at(path)) === null || _a2 === void 0 ? void 0 : _a2.input(value2, false);
     });
     if (node.value !== value) {
       node.emit("modelUpdated");
@@ -10796,7 +10864,7 @@ function isComponent(obj) {
   return typeof obj === "function" && obj.length === 2 || typeof obj === "object" && !Array.isArray(obj) && !("$el" in obj) && !("$cmp" in obj) && !("if" in obj);
 }
 function createInput(schemaOrComponent, definitionOptions = {}) {
-  const definition = __spreadValues({
+  const definition2 = __spreadValues({
     type: "input"
   }, definitionOptions);
   let schema;
@@ -10808,15 +10876,69 @@ function createInput(schemaOrComponent, definitionOptions = {}) {
         context: "$node.context"
       }
     }));
-    definition.library = { [cmpName]: markRaw(schemaOrComponent) };
+    definition2.library = { [cmpName]: markRaw(schemaOrComponent) };
   } else if (typeof schemaOrComponent === "function") {
     schema = schemaOrComponent;
   } else {
     schema = createSection("input", () => cloneAny(schemaOrComponent));
   }
-  definition.schema = useSchema(schema || "Schema undefined");
-  return definition;
+  definition2.schema = useSchema(schema || "Schema undefined");
+  return definition2;
 }
+const messages = createSection("messages", () => ({
+  $el: "ul",
+  if: "$fns.length($messages)"
+}), true);
+const message = createSection("message", () => ({
+  $el: "li",
+  for: ["message", "$messages"],
+  attrs: {
+    key: "$message.key",
+    id: `$id + '-' + $message.key`,
+    "data-message-type": "$message.type"
+  }
+}));
+const definition = messages(message("$message.value"));
+defineComponent({
+  props: {
+    node: {
+      type: Object,
+      required: false
+    },
+    sectionsSchema: {
+      type: Object,
+      default: {}
+    },
+    defaultPosition: {
+      type: [String, Boolean],
+      default: false
+    }
+  },
+  setup(props2, context) {
+    const node = computed(() => {
+      return props2.node || inject(parentSymbol, void 0);
+    });
+    watch$1(node, () => {
+      var _a;
+      if (((_a = node.value) === null || _a === void 0 ? void 0 : _a.context) && !undefine(props2.defaultPosition)) {
+        node.value.context.defaultMessagePlacement = false;
+      }
+    }, { immediate: true });
+    const schema = definition(props2.sectionsSchema || {});
+    const data = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        messages: ((_b = (_a = node.value) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.messages) || {},
+        fns: ((_d = (_c = node.value) === null || _c === void 0 ? void 0 : _c.context) === null || _d === void 0 ? void 0 : _d.fns) || {},
+        classes: ((_f = (_e = node.value) === null || _e === void 0 ? void 0 : _e.context) === null || _f === void 0 ? void 0 : _f.classes) || {}
+      };
+    });
+    return () => {
+      var _a;
+      return ((_a = node.value) === null || _a === void 0 ? void 0 : _a.context) ? h(FormKitSchema, { schema, data: data.value }, __spreadValues({}, context.slots)) : null;
+    };
+  }
+});
 const vueBindings = function vueBindings2(node) {
   node.ledger.count("blocking", (m3) => m3.blocking);
   const isValid2 = ref(!node.ledger.value("blocking"));
@@ -10890,7 +11012,7 @@ const vueBindings = function vueBindings2(node) {
             const classesPropClasses = createClasses(property, node2, node2.props[`_${property}Class`]);
             const sectionPropClasses = createClasses(property, node2, node2.props[`${property}Class`]);
             className = generateClassList(node2, property, rootClasses, globalConfigClasses, classesPropClasses, sectionPropClasses);
-            target[property] = className;
+            target[property] = className !== null && className !== void 0 ? className : "";
           });
         }
       }
@@ -10929,7 +11051,14 @@ const vueBindings = function vueBindings2(node) {
         }
       },
       touch: () => {
-        node.store.set(createMessage({ key: "dirty", visible: false, value: true }));
+        var _a;
+        const doCompare = context.dirtyBehavior === "compare";
+        if (((_a = node.store.dirty) === null || _a === void 0 ? void 0 : _a.value) && !doCompare)
+          return;
+        const isDirty = !eq(node.props._init, node._value);
+        if (!isDirty && !doCompare)
+          return;
+        node.store.set(createMessage({ key: "dirty", visible: false, value: isDirty }));
       },
       DOMInput: (e2) => {
         node.input(e2.target.value);
@@ -10942,6 +11071,7 @@ const vueBindings = function vueBindings2(node) {
     messages: messages2,
     node: markRaw(node),
     options: node.props.options,
+    defaultMessagePlacement: true,
     state: {
       blurred: false,
       complete: isComplete,
@@ -10966,7 +11096,10 @@ const vueBindings = function vueBindings2(node) {
       triggerRef(value);
       triggerRef(_value);
     }
-    node.props._init = cloneAny(node.value);
+    (() => __async(this, null, function* () {
+      yield node.settled;
+      node.props._init = cloneAny(node.value);
+    }))();
   });
   node.on("settled", ({ payload: isSettled }) => {
     context.state.settled = isSettled;
@@ -10992,7 +11125,8 @@ const vueBindings = function vueBindings2(node) {
       "attrs",
       "preserve",
       "preserveErrors",
-      "id"
+      "id",
+      "dirtyBehavior"
     ];
     const iconPattern = /^[a-zA-Z-]+(?:-icon|Icon)$/;
     const matchingProps = Object.keys(node.props).filter((prop) => {
@@ -11001,9 +11135,9 @@ const vueBindings = function vueBindings2(node) {
     return props2.concat(matchingProps);
   };
   observeProps(rootProps());
-  function definedAs(definition) {
-    if (definition.props)
-      observeProps(definition.props);
+  function definedAs(definition2) {
+    if (definition2.props)
+      observeProps(definition2.props);
   }
   node.props.definition && definedAs(node.props.definition);
   node.on("added-props", ({ payload }) => observeProps(payload));
@@ -11023,8 +11157,9 @@ const vueBindings = function vueBindings2(node) {
       triggerRef(value);
     }
     node.emit("modelUpdated");
-    if (!context.state.dirty && node.isCreated && hasTicked && !eq(value.value, node.props._init))
+    if ((!context.state.dirty || context.dirtyBehavior === "compare") && node.isCreated && hasTicked) {
       context.handlers.touch();
+    }
     if (isComplete && node.type === "input" && hasErrors.value && !undefine(node.props.preserveErrors)) {
       node.store.filter((message2) => {
         var _a;
@@ -11100,6 +11235,18 @@ defineComponent({
     const config = inject(optionsSymbol, {});
     const parent = inject(parentSymbol, null);
     let iconHandler = void 0;
+    function loadIcon() {
+      if (!iconHandler || typeof iconHandler !== "function")
+        return;
+      const iconOrPromise = iconHandler(props2.icon);
+      if (iconOrPromise instanceof Promise) {
+        iconOrPromise.then((iconValue) => {
+          icon2.value = iconValue;
+        });
+      } else {
+        icon2.value = iconOrPromise;
+      }
+    }
     if (props2.iconLoader && typeof props2.iconLoader === "function") {
       iconHandler = createIconHandler(props2.iconLoader);
     } else if (parent && ((_a = parent.props) === null || _a === void 0 ? void 0 : _a.iconLoader)) {
@@ -11114,18 +11261,11 @@ defineComponent({
         iconHandler = iconPlugin.iconHandler;
       }
     }
-    if (iconHandler && typeof iconHandler === "function") {
-      const iconOrPromise = iconHandler(props2.icon);
-      if (iconOrPromise instanceof Promise) {
-        iconOrPromise.then((iconValue) => {
-          icon2.value = iconValue;
-        });
-      } else {
-        icon2.value = iconOrPromise;
-      }
-    }
+    watch$1(() => props2.icon, () => {
+      loadIcon();
+    }, { immediate: true });
     return () => {
-      if (icon2.value) {
+      if (props2.icon && icon2.value) {
         return h("span", {
           class: "formkit-icon",
           innerHTML: icon2.value
@@ -11346,7 +11486,7 @@ function prepData(formData) {
       props2.vid = window.zar.getVID();
     }
     var tf = document.getElementsByName("xxTrustedFormCertUrl");
-    if (tf.length > 0) {
+    if (tf && tf.length > 0) {
       props2.Trusted_Form_URL = tf[0].value;
       dbg("TrustedFormCertUrl", props2.TrustedFormCertUrl);
     }
@@ -11428,6 +11568,30 @@ const scrollAnchor = (formNode) => () => {
     }
   }
 };
+const updateProgressBar = (formNode, stepHistory2, stepQueue2) => {
+  try {
+    const barId = formNode.attrs.progressBarId || "progress-bar";
+    const textId = formNode.attrs.progressBarTextId || "progress-bar-text";
+    var progress = document.getElementById(barId);
+    if (progress) {
+      const steps2 = stepHistory2.value.length + stepQueue2.value.length;
+      const percent = stepHistory2.value.length / (steps2 - 1) * 100;
+      progress.style.width = percent + "%";
+      var progressText = document.getElementById(textId);
+      if (progressText) {
+        progressText.innerHTML = Math.round(percent) + "% Complete";
+      }
+    }
+  } catch (err) {
+    const msg = "failed to updateProgressBar: " + err.toString();
+    console.warn(msg);
+    rollbar("warning", msg);
+  }
+};
+const prevStepFunc = (formNode) => (stepResult, stepHistory2, stepQueue2) => {
+  scrollAnchor(formNode)();
+  updateProgressBar(formNode, stepHistory2, stepQueue2);
+};
 const preStepFunc = (formNode) => (stepNode) => {
   try {
     if (formNode.attrs.valueOverrideMap) {
@@ -11443,6 +11607,7 @@ const fireStepEvent = (formNode) => (stepResult, stepHistory2, stepQueue2) => {
   if (!stepResult) {
     return;
   }
+  updateProgressBar(formNode, stepHistory2, stepQueue2);
   var step_values = null;
   try {
     setTimeout(scrollAnchor(formNode), 100);
@@ -20064,6 +20229,7 @@ const init = () => {
       data.submitUrl = data.submitUrl || defaultSubmitUrl;
       data.prepData = data.prepData || prepData;
       data.preStepFunc = data.preStepFunc || preStepFunc;
+      data.prevStepFunc = data.prevStepFunc || prevStepFunc;
       data.fireStepEvent = data.fireStepEvent || fireStepEvent;
       data.handleRedirect = data.handleRedirect || handleRedirect;
       data.scrollAnchor = data.scrollAnchor || scrollAnchor;
@@ -20086,6 +20252,20 @@ const init = () => {
           }
         }
       };
+      data.onInput = (callback) => (e2, node) => {
+        const elem = document.getElementById(node.props.id);
+        if (elem && elem.offsetParent === null) {
+          return;
+        }
+        try {
+          callback();
+          e2.preventDefault();
+        } catch (err) {
+          const msg = "onInput failed: " + err.toString();
+          console.warn(msg);
+          rollbar("warning", msg);
+        }
+      };
       const app = createApp(_sfc_main$1, { schema: schemaObj, data }).use(
         plugin$1,
         defaultConfig({