@gomusdev/web-components 1.11.0 → 1.12.0

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

@@ -29382,7 +29382,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 +29394,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 +29424,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 +29465,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 +29627,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 +29666,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 +29677,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 +29708,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 +29721,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 +29752,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 +29790,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,13 +29822,15 @@ 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), restProps = /* @__PURE__ */ rest_props($$props, [
       "$$slots",
       "$$events",
       "$$legacy",
       "$$host",
       "field",
-      "describedById"
+      "describedById",
+      "labelClass",
+      "inputClass"
     ]);
     const map = {
       input,
@@ -29818,6 +29875,20 @@ 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();
       }
     };
     var fragment_6 = comment();
@@ -29836,14 +29907,14 @@ 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: {} }, [], [], 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 () => {
@@ -29886,6 +29957,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 +29979,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       get describedById() {
         return get$2(describedById);
       },
+      get labelClass() {
+        return labelClass();
+      },
+      get inputClass() {
+        return inputClass();
+      },
       get field() {
         return get$2(field);
       },
@@ -29943,7 +30034,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"],
@@ -30060,14 +30153,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) {

package/dist-js/gomus-webcomponents.js

@@ -29382,7 +29382,7 @@ var root_6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 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 +29394,20 @@ function DatePicker_1($$anchor, $$props) {
     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 +29424,11 @@ function DatePicker_1($$anchor, $$props) {
         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 +29465,9 @@ function DatePicker_1($$anchor, $$props) {
           };
           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 +29627,7 @@ function DatePicker_1($$anchor, $$props) {
   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 +29666,7 @@ function InputAndLabel($$anchor, $$props) {
       () => ({
         ...get$2(fieldAttributes),
         ...restProps,
+        class: inputClass(),
         placeholder: field().placeholder,
         type: field().type,
         name: field().key
@@ -29656,7 +29677,10 @@ function InputAndLabel($$anchor, $$props) {
       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 +29708,10 @@ function InputAndLabel($$anchor, $$props) {
     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 +29721,12 @@ function InputAndLabel($$anchor, $$props) {
     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 +29752,21 @@ function InputAndLabel($$anchor, $$props) {
       });
     }
     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 +29790,23 @@ function InputAndLabel($$anchor, $$props) {
           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,13 +29822,15 @@ function InputAndLabel($$anchor, $$props) {
     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), restProps = /* @__PURE__ */ rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "$$host",
     "field",
-    "describedById"
+    "describedById",
+    "labelClass",
+    "inputClass"
   ]);
   const map = {
     input,
@@ -29818,6 +29875,20 @@ function InputAndLabel($$anchor, $$props) {
     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();
     }
   };
   var fragment_6 = comment();
@@ -29836,14 +29907,14 @@ function InputAndLabel($$anchor, $$props) {
   append($$anchor, fragment_6);
   return pop($$exports);
 }
-create_custom_element(InputAndLabel, { field: {}, describedById: {} }, [], [], true);
+create_custom_element(InputAndLabel, { field: {}, describedById: {}, labelClass: {}, inputClass: {} }, [], [], 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 () => {
@@ -29886,6 +29957,20 @@ function Field($$anchor, $$props) {
     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 +29979,12 @@ function Field($$anchor, $$props) {
     get describedById() {
       return get$2(describedById);
     },
+    get labelClass() {
+      return labelClass();
+    },
+    get inputClass() {
+      return inputClass();
+    },
     get field() {
       return get$2(field);
     },
@@ -29943,7 +30034,9 @@ customElements.define("go-field", create_custom_element(
   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"],
@@ -30060,14 +30153,32 @@ function FormFeedback($$anchor, $$props) {
 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) {

package/package.json

@@ -4,7 +4,7 @@
     "name": "Giantmonkey GmbH"
   },
   "license": "MIT",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "type": "module",
   "main": "./dist-js/gomus-webcomponents.iife.js",
   "module": "./dist-js/gomus-webcomponents.iife.js",
@@ -58,7 +58,6 @@
     "@storybook/addon-designs": "^11.0.1",
     "@storybook/addon-docs": "^10.0.1",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/addons": "^7.6.17",
     "@storybook/svelte-vite": "^10.0.1",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@testing-library/jest-dom": "^6.9.1",