@gomusdev/web-components 1.11.0 → 1.13.0

package/dist-js/components/forms/lib/Forms.svelte.d.ts

@@ -13,13 +13,13 @@ export declare class Forms {
     static defineForm(options: defineFormOptions): void;
     static defineFields(fields: Record<string, FieldInit>): void;
     static setRequiredApiKeys(formId: string, requiredApiKeys: string[]): void;
-    static getRequiredApiKeys(formId: string): string[];
     static createField(key: string, required: boolean): Field;
     static getFormFields(formId: string): any;
     static getFieldInit(key: string): any;
 }
 /**
  * Calculates the number of fields that are mounted and have errors.
+ * Also validates that confirmation fields match their corresponding fields.
  *
  * @param {Field[] | undefined} fields - The list of fields to evaluate. Each field should have a `mounted` and an `errors` property.
  * @return {number} The count of fields that are mounted and contain errors. Returns 0 if no fields are provided.

package/dist-js/components/forms/ui/generic/FormDetails.svelte.d.ts

@@ -5,8 +5,6 @@ export declare class FormDetails {
     form: HTMLFormElement;
     isValid: boolean;
     get formData(): any;
-    ensureApiRequiredFields(): boolean;
-    get requiredApiKeys(): string[];
     get apiErrors(): string[] | Record<string, string[]>;
     /**
      * Sets API errors for the current instance.
@@ -14,6 +12,8 @@ export declare class FormDetails {
      * @param {string[] | Record<string, string[]>} errors - Errors passed as an array or an object where keys are API field keys and values are arrays of error messages. If an array is provided, it assigns the errors directly. If an object is provided, it maps the errors to the respective fields based on their API keys.
      */
     set apiErrors(errors: string[] | Record<string, string[]>);
+    validateForm(): void;
+    validateField(field: Field): void;
     addField(field: Field): void;
     /**
      * The list of fields associated with form in the config.

package/dist-js/gomus-webcomponents.iife.js

@@ -5447,6 +5447,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     return function(host) {
       if (host) {
         const container = proxy({ data: void 0 });
+        if (!host.isConnected) {
+          console.error("(createGetDetails) Host is not mounted");
+          return void 0;
+        }
         host.dispatchEvent(new CustomEvent(KEY2, { detail: container, bubbles: true }));
         return container.data;
       } else {
@@ -6579,6 +6583,24 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         throw new Error("Unhandled shop type: " + never);
     }
   };
+  function isEmpty(value) {
+    return value === null || value === void 0 || typeof value === "string" && value.trim() === "";
+  }
+  function validateRequiredFields(body, requiredFields) {
+    const errors2 = {};
+    if (!requiredFields || requiredFields.length === 0) {
+      return errors2;
+    }
+    for (const field of requiredFields) {
+      if (!(field in body) || isEmpty(body[field])) {
+        errors2[field] = [`Field '${field}' is required and cannot be empty`];
+      }
+    }
+    return errors2;
+  }
+  function validateApiPostBody(body, requiredFields) {
+    return validateRequiredFields(body, requiredFields);
+  }
   var util;
   (function(util2) {
     util2.assertEqual = (val) => val;
@@ -11854,7 +11876,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return this.fetchAndCache(TICKETS_ENDPOINT, `tickets-${JSON.stringify(params)}`, "tickets", { cache: 60, query: params });
     }
     signIn(params) {
-      return this.apiPost(SIGN_IN_ENDPOINT, { body: params });
+      return this.apiPost(SIGN_IN_ENDPOINT, { body: params, requiredFields: ["email", "password"] });
     }
     signUp(params, asGuest = false) {
       const defaultParams = {
@@ -11865,10 +11887,19 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         level: asGuest ? CustomerLevels.SHOP_GUEST : CustomerLevels.SHOP
       };
       params = assign(defaultParams, params);
-      return this.apiPost(SIGN_UP_ENDPOINT, { body: params });
+      let requiredFields = [
+        "name",
+        //first name
+        "surname",
+        "email",
+        "email_confirmation",
+        "terms"
+      ];
+      if (!asGuest) requiredFields.push("password", "password_confirmation");
+      return this.apiPost(SIGN_UP_ENDPOINT, { body: params, requiredFields });
     }
     checkout(params) {
-      return this.apiPost(`/api/v4/orders`, { body: params });
+      return this.apiPost(`/api/v4/orders`, { body: params, requiredFields: ["items", "total"] });
     }
     order(token) {
       return this.fetchAndCache("/api/v4/orders/{id}", `order-${token}`, "order", { path: { id: token } });
@@ -11877,7 +11908,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return this.fetchAndCache("/api/v4/annual/order", `annual-order-${token}`, "order", { query: { token } });
     }
     finalizePersonalizations(token, params) {
-      return this.apiPost("/api/v4/annual/personalization/finalize", { body: params }, { query: { token } });
+      return this.apiPost("/api/v4/annual/personalization/finalize", { body: params, params: { query: { token } } });
     }
     /**
      * Returns a reactive value that will contain the fetched data, no need to await.
@@ -11951,8 +11982,24 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         }
       };
     }
-    async apiPost(path, { body }, params = {}) {
+    /**
+     * Sends a POST request to the specified API endpoint.
+     *
+     * @param {string} path - The API endpoint path to make the POST request.
+     * @param {Object} options - The options for the POST request.
+     * @param {Record<string, any>} options.body - The body of the POST request, containing the data to be sent.
+     * @param {Record<string, unknown>} [options.params] - Optional query parameters to include in the request.
+     * @param {string[]} [options.requiredFields] - Optional list of required field names to validate in the body.
+     * @return {Promise<T>} A promise that resolves with the typed response of the POST request.
+     */
+    async apiPost(path, options) {
       this.#ensureApi();
+      const { body, params = {}, requiredFields } = options;
+      const validationErrors = validateApiPostBody(body, requiredFields);
+      if (Object.keys(validationErrors).length > 0) {
+        console.log("shop.apiPost: validationErrors", { validationErrors, body });
+        return { error: { errors: validationErrors } };
+      }
       const ret = await this.client.POST(path, { body, params: assign(this.#defaultApiParams, params) });
       return ret;
     }
@@ -14704,7 +14751,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   const _Forms = class _Forms {
     static defineForm(options) {
       go.defineConfig({ forms: { [options.id]: { fields: options.fields } } });
-      __privateGet(_Forms, _requiredApiKeysMap)[options.id] = options.requiredApiKeys || [];
     }
     static defineFields(fields) {
       go.defineConfig({ fields });
@@ -14712,9 +14758,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     static setRequiredApiKeys(formId, requiredApiKeys) {
       __privateGet(_Forms, _requiredApiKeysMap)[formId] = requiredApiKeys;
     }
-    static getRequiredApiKeys(formId) {
-      return __privateGet(_Forms, _requiredApiKeysMap)[formId];
-    }
     static createField(key, required) {
       const init2 = _Forms.getFieldInit(key);
       if (!init2) {
@@ -14779,9 +14822,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         },
         []
       );
-      personalizationForms.forEach((detail) => {
-        detail.fields.forEach((f) => {
-          f.validate();
+      personalizationForms.forEach((details2) => {
+        details2.fields.forEach((f) => {
+          details2.validateField(f);
         });
       });
       const isValid2 = iterate(
@@ -14929,18 +14972,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
       return ret;
     }
-    ensureApiRequiredFields() {
-      const formData = this.formData;
-      const missingKeys = this.requiredApiKeys.filter((k) => !(k in formData));
-      if (missingKeys.length > 0) {
-        console.error("(ensureApiRequiredFields) Missing required API keys: " + missingKeys.join(","));
-        return false;
-      }
-      return true;
-    }
-    get requiredApiKeys() {
-      return Forms.getRequiredApiKeys(this.formId);
-    }
     get apiErrors() {
       return get$2(this.#apiErrors);
     }
@@ -14967,6 +14998,23 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         field.apiErrors = value;
       }
     }
+    validateForm() {
+      get$2(this.#fields).forEach((f) => this.validateField(f));
+    }
+    validateField(field) {
+      field.validate();
+      if (field.apiKey === "password_confirmation") {
+        const passwordField = this.fields.find((f) => f.apiKey === "password");
+        if (!passwordField || passwordField && field.value !== passwordField.value) {
+          field.errors.push("Passwords do not match");
+        }
+      } else if (field.apiKey === "email_confirmation") {
+        const emailField = this.fields.find((f) => f.apiKey === "email");
+        if (!emailField || emailField && field.value !== emailField.value) {
+          field.errors.push("Emails do not match");
+        }
+      }
+    }
     addField(field) {
       get$2(this.#fields).push(field);
     }
@@ -15011,9 +15059,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     setDetails($$props.$$host, details);
     async function handleSubmit(event) {
       event.preventDefault();
-      details.fields.forEach((f) => {
-        f.validate();
-      });
+      details.validateForm();
       details?.form?.dispatchEvent(new Event("after-validation", event));
       if (details.isValid) {
         details?.form?.dispatchEvent(new Event("go-submit", event));
@@ -15074,7 +15120,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let form;
     Forms.defineForm({
       id: "signIn",
-      requiredApiKeys: ["email", "password"],
       fields: [
         { key: "email", required: true },
         { key: "password", required: true }
@@ -15085,7 +15130,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         throw new Error("(go-sign-in: form not found");
       }
       const result = await shop.signIn(form.details.formData);
-      form.details.ensureApiRequiredFields();
       if (result.data) {
         $$props.$$host.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
       } else {
@@ -15297,6 +15341,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let lastLS = "";
     setInterval(
       () => {
+        if (!localStorage) {
+          console.warn("(syncCartToLocalStorage) localStorage is not available");
+          return;
+        }
         let newLS = localStorage.getItem("go-cart");
         if (lastLS && lastLS !== newLS) {
           loadFromLocalStorage(cart2);
@@ -15560,13 +15608,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         { key: "email", required: true },
         { key: "confirmEmail", required: true },
         { key: "acceptTerms", required: true }
-      ],
-      requiredApiKeys: [
-        "firstName",
-        "lastName",
-        "email",
-        "confirmEmail",
-        "acceptTerms"
       ]
     });
     wrapInElement($$props.$$host, "go-form", { "form-id": "checkoutGuest", custom: custom2() });
@@ -27571,7 +27612,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     getSegmentProps() {
       const segmentValues = this.root.segmentValues;
       const placeholder = this.root.placeholder.current;
-      const isEmpty = segmentValues[this.part] === null;
+      const isEmpty2 = segmentValues[this.part] === null;
       let date2 = placeholder;
       if (segmentValues[this.part]) {
         date2 = placeholder.set({ [this.part]: Number.parseInt(segmentValues[this.part]) });
@@ -27579,9 +27620,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       const valueNow = date2[this.part];
       const valueMin = this.#getMin();
       const valueMax = this.#getMax();
-      let valueText = isEmpty ? "Empty" : `${valueNow}`;
+      let valueText = isEmpty2 ? "Empty" : `${valueNow}`;
       if (this.part === "hour" && "dayPeriod" in segmentValues && segmentValues.dayPeriod) {
-        valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
+        valueText = isEmpty2 ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
       }
       return {
         "aria-label": `${this.part}, `,
@@ -29382,7 +29423,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   var root_1$8 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
   function DatePicker_1($$anchor, $$props) {
     push($$props, true);
-    let dateString = prop($$props, "dateString", 15);
+    let dateString = prop($$props, "dateString", 15), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7);
     let date2 = /* @__PURE__ */ state(proxy($14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2())));
     user_effect(() => {
       dateString(get$2(date2).toString());
@@ -29394,6 +29435,20 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       set dateString($$value) {
         dateString($$value);
         flushSync();
+      },
+      get labelClass() {
+        return labelClass();
+      },
+      set labelClass($$value) {
+        labelClass($$value);
+        flushSync();
+      },
+      get inputClass() {
+        return inputClass();
+      },
+      set inputClass($$value) {
+        inputClass($$value);
+        flushSync();
       }
     };
     var fragment = comment();
@@ -29410,7 +29465,11 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
           var fragment_1 = root_1$8();
           var node_1 = first_child(fragment_1);
           component(node_1, () => Date_field_label, ($$anchor4, DatePicker_Label) => {
-            DatePicker_Label($$anchor4, { class: "go-datepicker-label" });
+            DatePicker_Label($$anchor4, {
+              get class() {
+                return `go-datepicker-label $${labelClass() ?? ""}`;
+              }
+            });
           });
           var node_2 = sibling(node_1, 2);
           {
@@ -29447,7 +29506,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
             };
             component(node_2, () => Date_field_input, ($$anchor4, DatePicker_Input) => {
               DatePicker_Input($$anchor4, {
-                class: "go-datepicker-input",
+                get class() {
+                  return `go-datepicker-input $${inputClass() ?? ""}`;
+                },
                 children,
                 $$slots: { default: true }
               });
@@ -29607,7 +29668,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     append($$anchor, fragment);
     return pop($$exports);
   }
-  create_custom_element(DatePicker_1, { dateString: {} }, [], [], true);
+  create_custom_element(DatePicker_1, { dateString: {}, labelClass: {}, inputClass: {} }, [], [], true);
   var root_2$6 = /* @__PURE__ */ from_html(`<span class="go-field-star" aria-hidden="true">*</span>`);
   var root_1$7 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   var root_3$4 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
@@ -29646,6 +29707,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         () => ({
           ...get$2(fieldAttributes),
           ...restProps,
+          class: inputClass(),
           placeholder: field().placeholder,
           type: field().type,
           name: field().key
@@ -29656,7 +29718,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         void 0,
         true
       );
-      template_effect(() => set_attribute(label, "for", get$2(inputId)));
+      template_effect(() => {
+        set_class(label, 1, clsx(labelClass()));
+        set_attribute(label, "for", get$2(inputId));
+      });
       bind_value(input_1, () => field().value, ($$value) => field(field().value = $$value, true));
       append($$anchor2, fragment_1);
     };
@@ -29684,7 +29749,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       labelText(node_3);
       reset(span_1);
       reset(label_1);
-      template_effect(() => set_attribute(label_1, "for", get$2(inputId)));
+      template_effect(() => {
+        set_class(label_1, 1, clsx(labelClass()));
+        set_attribute(label_1, "for", get$2(inputId));
+      });
       append($$anchor2, label_1);
     };
     const select = ($$anchor2) => {
@@ -29694,7 +29762,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       labelText(node_4);
       reset(label_2);
       var select_1 = sibling(label_2, 2);
-      attribute_effect(select_1, () => ({ ...get$2(fieldAttributes), ...restProps, name: field().key }));
+      attribute_effect(select_1, () => ({
+        ...get$2(fieldAttributes),
+        ...restProps,
+        name: field().key,
+        class: inputClass()
+      }));
       var node_5 = child(select_1);
       {
         var consequent_1 = ($$anchor3) => {
@@ -29720,12 +29793,21 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         });
       }
       reset(select_1);
-      template_effect(() => set_attribute(label_2, "for", get$2(inputId)));
+      template_effect(() => {
+        set_class(label_2, 1, clsx(labelClass()));
+        set_attribute(label_2, "for", get$2(inputId));
+      });
       bind_select_value(select_1, () => field().value, ($$value) => field(field().value = $$value, true));
       append($$anchor2, fragment_2);
     };
     const date2 = ($$anchor2) => {
       DatePicker_1($$anchor2, {
+        get labelClass() {
+          return labelClass();
+        },
+        get inputClass() {
+          return inputClass();
+        },
         get dateString() {
           return field().value;
         },
@@ -29749,9 +29831,23 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
             var label_3 = root_11$1();
             var text_1 = child(label_3);
             var input_3 = sibling(text_1);
-            attribute_effect(input_3, () => ({ ...get$2(fieldAttributes), ...restProps, type: "radio" }), void 0, void 0, void 0, void 0, true);
+            attribute_effect(
+              input_3,
+              () => ({
+                ...get$2(fieldAttributes),
+                ...restProps,
+                class: inputClass(),
+                type: "radio"
+              }),
+              void 0,
+              void 0,
+              void 0,
+              void 0,
+              true
+            );
             reset(label_3);
             template_effect(() => {
+              set_class(label_3, 1, clsx(labelClass()));
               set_attribute(label_3, "for", get$2(inputId) + get$2(option));
               set_text(text_1, `${get$2(option) ?? ""} `);
             });
@@ -29767,14 +29863,21 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       reset(fieldset);
       append($$anchor2, fieldset);
     };
-    let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 7), restProps = /* @__PURE__ */ rest_props($$props, [
+    let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), host = prop($$props, "host", 7), restProps = /* @__PURE__ */ rest_props($$props, [
       "$$slots",
       "$$events",
       "$$legacy",
       "$$host",
       "field",
-      "describedById"
+      "describedById",
+      "labelClass",
+      "inputClass",
+      "host"
     ]);
+    let details = /* @__PURE__ */ state(void 0);
+    onMount(async () => {
+      set(details, await pollUntilTruthy(() => getDetails(host())), true);
+    });
     const map = {
       input,
       text: input,
@@ -29794,7 +29897,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let inputId = /* @__PURE__ */ user_derived(() => $$props.id || `go-field-${Math.random().toString(36).substring(2, 9)}`);
     function onblur() {
       if (field().type == "checkbox") return;
-      if (field().value) field().validate();
+      if (field().value) if (get$2(details))
+        get$2(details).validateField(field());
+      else field().validate();
     }
     const fieldAttributes = /* @__PURE__ */ user_derived(() => ({
       id: get$2(inputId),
@@ -29818,6 +29923,27 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       set describedById($$value) {
         describedById($$value);
         flushSync();
+      },
+      get labelClass() {
+        return labelClass();
+      },
+      set labelClass($$value) {
+        labelClass($$value);
+        flushSync();
+      },
+      get inputClass() {
+        return inputClass();
+      },
+      set inputClass($$value) {
+        inputClass($$value);
+        flushSync();
+      },
+      get host() {
+        return host();
+      },
+      set host($$value) {
+        host($$value);
+        flushSync();
       }
     };
     var fragment_6 = comment();
@@ -29836,14 +29962,26 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     append($$anchor, fragment_6);
     return pop($$exports);
   }
-  create_custom_element(InputAndLabel, { field: {}, describedById: {} }, [], [], true);
+  create_custom_element(
+    InputAndLabel,
+    {
+      field: {},
+      describedById: {},
+      labelClass: {},
+      inputClass: {},
+      host: {}
+    },
+    [],
+    [],
+    true
+  );
   var root_1$6 = /* @__PURE__ */ from_html(`<span> </span>`);
   var root_3$3 = /* @__PURE__ */ from_html(`<li> </li>`);
   var root_2$5 = /* @__PURE__ */ from_html(`<ul class="go-field-errors" role="alert"></ul>`);
   var root$5 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
   function Field($$anchor, $$props) {
     push($$props, true);
-    let key = prop($$props, "key", 7), required = prop($$props, "required", 7, false);
+    let key = prop($$props, "key", 7), required = prop($$props, "required", 7, false), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7);
     let field = /* @__PURE__ */ state(proxy(Forms.createField(key(), required())));
     let details = /* @__PURE__ */ state(void 0);
     onMount(async () => {
@@ -29868,7 +30006,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         // Track the value
       ).value;
       untrack(() => {
-        if (get$2(field)?.errors.length) get$2(field).validate();
+        if (get$2(field)?.errors.length) get$2(details).validateField(get$2(field));
       });
     });
     var $$exports = {
@@ -29886,6 +30024,20 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       set required($$value = false) {
         required($$value);
         flushSync();
+      },
+      get labelClass() {
+        return labelClass();
+      },
+      set labelClass($$value) {
+        labelClass($$value);
+        flushSync();
+      },
+      get inputClass() {
+        return inputClass();
+      },
+      set inputClass($$value) {
+        inputClass($$value);
+        flushSync();
       }
     };
     var fragment = root$5();
@@ -29894,6 +30046,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       get describedById() {
         return get$2(describedById);
       },
+      get labelClass() {
+        return labelClass();
+      },
+      get inputClass() {
+        return inputClass();
+      },
+      host: $$props.$$host,
       get field() {
         return get$2(field);
       },
@@ -29943,7 +30102,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     Field,
     {
       key: { attribute: "key", reflect: true, type: "String" },
-      required: { attribute: "required", reflect: true, type: "Boolean" }
+      required: { attribute: "required", reflect: true, type: "Boolean" },
+      labelClass: { attribute: "label-class", reflect: true, type: "String" },
+      inputClass: { attribute: "input-class", reflect: true, type: "String" }
     },
     [],
     ["getField"],
@@ -29976,15 +30137,18 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   var root_1$4 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
   function ErrorsFeedback($$anchor, $$props) {
     push($$props, true);
-    let details = getDetails($$props.$$host);
+    let details = /* @__PURE__ */ state(void 0);
+    onMount(async () => {
+      set(details, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+    });
     user_effect(() => {
-      details?.form?.addEventListener("after-validation", () => {
-        set(errorsOnSubmit, errors(details?.fields), true);
+      get$2(details)?.form?.addEventListener("after-validation", () => {
+        set(errorsOnSubmit, errors(get$2(details)?.fields), true);
       });
     });
-    let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(details?.fields));
+    let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(get$2(details)?.fields));
     let errorsOnSubmit = /* @__PURE__ */ state(-1);
-    let generalApiErrors = /* @__PURE__ */ user_derived(() => details && isArray(details.apiErrors) && details.apiErrors.length > 0 ? details.apiErrors : []);
+    let generalApiErrors = /* @__PURE__ */ user_derived(() => get$2(details) && isArray(get$2(details).apiErrors) && get$2(details).apiErrors.length > 0 ? get$2(details).apiErrors : []);
     var fragment = comment();
     var node = first_child(fragment);
     {
@@ -30008,7 +30172,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         {
           var consequent_1 = ($$anchor3) => {
             var ul = root_3$2();
-            each(ul, 21, () => details?.apiErrors, index$1, ($$anchor4, error) => {
+            each(ul, 21, () => get$2(details)?.apiErrors, index$1, ($$anchor4, error) => {
               var li = root_4$1();
               var text_1 = child(li, true);
               reset(li);
@@ -30019,7 +30183,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
             append($$anchor3, ul);
           };
           if_block(node_2, ($$render) => {
-            if (details && isArray(details.apiErrors) && details.apiErrors.length > 0) $$render(consequent_1);
+            if (get$2(details) && isArray(get$2(details).apiErrors) && get$2(details).apiErrors.length > 0) $$render(consequent_1);
           });
         }
         var node_3 = sibling(node_2, 2);
@@ -30060,14 +30224,32 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   customElements.define("go-form-feedback", create_custom_element(FormFeedback, {}, ["default"], [], false));
   function Submit($$anchor, $$props) {
     push($$props, true);
+    let buttonClass = prop($$props, "buttonClass", 7, "");
     let details = /* @__PURE__ */ state(void 0);
     onMount(() => {
       set(details, getDetails($$props.$$host), true);
-      wrapInElement($$props.$$host, "button", { type: "submit" });
+      wrapInElement($$props.$$host, "button", { type: "submit", class: buttonClass() });
     });
-    pop();
+    var $$exports = {
+      get buttonClass() {
+        return buttonClass();
+      },
+      set buttonClass($$value = "") {
+        buttonClass($$value);
+        flushSync();
+      }
+    };
+    return pop($$exports);
   }
-  customElements.define("go-submit", create_custom_element(Submit, {}, [], [], false));
+  customElements.define("go-submit", create_custom_element(
+    Submit,
+    {
+      buttonClass: { attribute: "button-class", reflect: true, type: "String" }
+    },
+    [],
+    [],
+    false
+  ));
   var root_1$3 = /* @__PURE__ */ from_html(`<p>Form submitted successfully!</p>`);
   var root$3 = /* @__PURE__ */ from_html(`<div aria-live="assertive"><!></div>`);
   function SuccessFeedback($$anchor, $$props) {
@@ -30258,7 +30440,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       }
     });
     onMount(async () => {
-      set(formDetails, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+      try {
+        set(formDetails, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+      } catch (error) {
+        console.error("(IF) Error fetching form details:", error);
+        console.error("Stack trace:", error instanceof Error ? error.stack : "No stack trace available");
+      }
     });
     var $$exports = {
       get data() {