@gomusdev/web-components 1.10.0 → 1.12.0

package/dist-js/components/cart/components/CartEmpty.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-js/components/cart/components/CartEmpty.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

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

@@ -12510,7 +12510,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     const timeRegex2 = `${time2}(?:${opts.join("|")})`;
     return new RegExp(`^${dateSource}T(?:${timeRegex2})$`);
   }
-  const string$2 = (params) => {
+  const string$1 = (params) => {
     const regex = params ? `[\\s\\S]{${params?.minimum ?? 0},${params?.maximum ?? ""}}` : `[\\s\\S]*`;
     return new RegExp(`^${regex}$`);
   };
@@ -12858,7 +12858,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   });
   const $ZodString = /* @__PURE__ */ $constructor("$ZodString", (inst, def) => {
     $ZodType.init(inst, def);
-    inst._zod.pattern = [...inst?._zod.bag?.patterns ?? []].pop() ?? string$2(inst._zod.bag);
+    inst._zod.pattern = [...inst?._zod.bag?.patterns ?? []].pop() ?? string$1(inst._zod.bag);
     inst._zod.parse = (payload, _) => {
       if (def.coerce)
         try {
@@ -14215,7 +14215,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     inst.time = (params) => inst.check(time(params));
     inst.duration = (params) => inst.check(duration(params));
   });
-  function string$1(params) {
+  function string(params) {
     return _string(ZodString, params);
   }
   const ZodStringFormat = /* @__PURE__ */ $constructor("ZodStringFormat", (inst, def) => {
@@ -14519,7 +14519,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       placeholder: "",
       description: "",
       autocomplete: "email",
-      validator: string$1().email("Invalid email")
+      validator: string().email("Invalid email")
     },
     confirmEmail: {
       key: "confirmEmail",
@@ -14529,7 +14529,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       placeholder: "",
       description: "",
       autocomplete: "email",
-      validator: string$1().email("Invalid email").min(1, "Please confirm your email")
+      validator: string().email("Invalid email").min(1, "Please confirm your email")
     },
     password: {
       key: "password",
@@ -14548,7 +14548,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       placeholder: "",
       description: "",
       autocomplete: "new-password",
-      validator: string$1().min(6, "Password must be at least 6 characters")
+      validator: string().min(6, "Password must be at least 6 characters")
     },
     confirmPassword: {
       key: "confirmPassword",
@@ -14558,7 +14558,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       placeholder: "",
       description: "",
       autocomplete: "new-password",
-      validator: string$1().min(6, "Please confirm your password")
+      validator: string().min(6, "Please confirm your password")
     },
     addressee: {
       key: "addressee",
@@ -14658,7 +14658,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       placeholder: "",
       description: "",
       autocomplete: "off",
-      validator: string$1().date()
+      validator: string().date()
     }
   };
   function createField(data, required) {
@@ -15373,12 +15373,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(priceCents / 100);
   }
   var root_2$p = /* @__PURE__ */ from_html(`<li data-go-cart-header-remove="">remove</li>`);
-  var root_5$2 = /* @__PURE__ */ from_html(`<span> </span>`);
-  var root_4$4 = /* @__PURE__ */ from_html(`<span> </span> <!>`, 1);
+  var root_5$2 = /* @__PURE__ */ from_html(`<span class="go-cart-item-time" data-testid="cart-item-time"> </span>`);
+  var root_4$4 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date" data-testid="cart-item-date"> </span> <!>`, 1);
   var root_6$1 = /* @__PURE__ */ from_html(`<li data-go-cart-item-remove=""><button>⨉</button></li>`);
-  var root_3$6 = /* @__PURE__ */ from_html(`<li data-go-cart-item=""><article><ul><li data-go-cart-item-title=""> <!></li> <li data-go-cart-item-price=""> </li> <li data-go-cart-item-count=""> </li> <!> <li data-go-cart-item-sum=""> </li></ul></article></li>`);
+  var root_3$6 = /* @__PURE__ */ from_html(`<li data-go-cart-item=""><article><ul><li data-go-cart-item-title=""><span class="go-cart-item-title" data-testid="cart-item-title"> </span> <!></li> <li data-go-cart-item-price=""> </li> <li data-go-cart-item-count=""> </li> <!> <li data-go-cart-item-sum=""> </li></ul></article></li>`);
   var root_7$3 = /* @__PURE__ */ from_html(`<li data-go-cart-footer-remove=""></li>`);
-  var root_1$b = /* @__PURE__ */ from_html(`<ol data-testid="cart"><li data-go-cart-header="" data-testid="cart-header"><ul><li data-go-cart-header-title="">Product</li> <li data-go-cart-header-price="">Price</li> <li data-go-cart-header-count="">Count</li> <!> <li data-go-cart-header-sum="">Sum</li></ul></li> <!> <li data-go-cart-footer="" data-testid="cart-footer"><ul><li data-go-cart-footer-title=""></li> <li data-go-cart-footer-price=""></li> <li data-go-cart-footer-count=""></li> <!> <li data-go-cart-footer-sum="" data-go-cart-sum=""> </li></ul></li></ol> <a href="javascript:void(0);" class="go-cart-checkout-button" data-testid="checkout-button">Checkout</a>`, 1);
+  var root_8 = /* @__PURE__ */ from_html(`<a href="javascript:void(0);" class="go-cart-checkout-button" data-testid="checkout-button">Checkout</a>`);
+  var root_1$b = /* @__PURE__ */ from_html(`<ol data-testid="cart"><li data-go-cart-header="" data-testid="cart-header"><ul><li data-go-cart-header-title="">Product</li> <li data-go-cart-header-price="">Price</li> <li data-go-cart-header-count="">Count</li> <!> <li data-go-cart-header-sum="">Sum</li></ul></li> <!> <li data-go-cart-footer="" data-testid="cart-footer"><ul><li data-go-cart-footer-title=""></li> <li data-go-cart-footer-price=""></li> <li data-go-cart-footer-count=""></li> <!> <li data-go-cart-footer-sum="" data-go-cart-sum=""> </li></ul></li></ol> <!>`, 1);
   function Cart($$anchor, $$props) {
     push($$props, true);
     const preview = prop($$props, "preview", 7, false);
@@ -15399,7 +15400,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     var fragment = comment();
     var node = first_child(fragment);
     {
-      var consequent_5 = ($$anchor2) => {
+      var consequent_6 = ($$anchor2) => {
         var fragment_1 = root_1$b();
         var ol = first_child(fragment_1);
         var li = child(ol);
@@ -15423,22 +15424,24 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
           var article = child(li_2);
           var ul_1 = child(article);
           var li_3 = child(ul_1);
-          var text2 = child(li_3);
-          var node_3 = sibling(text2);
+          var span = child(li_3);
+          var text2 = child(span, true);
+          reset(span);
+          var node_3 = sibling(span, 2);
           {
             var consequent_2 = ($$anchor4) => {
               var fragment_2 = root_4$4();
-              var span = first_child(fragment_2);
-              var text_1 = child(span, true);
-              reset(span);
-              var node_4 = sibling(span, 2);
+              var span_1 = first_child(fragment_2);
+              var text_1 = child(span_1, true);
+              reset(span_1);
+              var node_4 = sibling(span_1, 2);
               {
                 var consequent_1 = ($$anchor5) => {
-                  var span_1 = root_5$2();
-                  var text_2 = child(span_1, true);
-                  reset(span_1);
+                  var span_2 = root_5$2();
+                  var text_2 = child(span_2, true);
+                  reset(span_2);
                   template_effect(($0) => set_text(text_2, $0), [() => formatTime(get$2(cartItem).attributes.time)]);
-                  append($$anchor5, span_1);
+                  append($$anchor5, span_2);
                 };
                 if_block(node_4, ($$render) => {
                   if (get$2(cartItem).item.type === "timeslot") $$render(consequent_1);
@@ -15481,7 +15484,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
           reset(li_2);
           template_effect(() => {
             set_attribute(article, "data-testid", get$2(cartItem).uuid);
-            set_text(text2, `${get$2(cartItem).item.title ?? ""} `);
+            set_text(text2, get$2(cartItem).item.title);
             set_text(text_3, get$2(cartItem).final_price_formatted);
             set_text(text_4, get$2(cartItem).quantity);
             set_text(text_5, get$2(cartItem).total_price_formatted);
@@ -15506,13 +15509,22 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         reset(ul_2);
         reset(li_8);
         reset(ol);
-        var a2 = sibling(ol, 2);
-        a2.__click = navToCheckout;
+        var node_7 = sibling(ol, 2);
+        {
+          var consequent_5 = ($$anchor3) => {
+            var a2 = root_8();
+            a2.__click = navToCheckout;
+            append($$anchor3, a2);
+          };
+          if_block(node_7, ($$render) => {
+            if (!preview()) $$render(consequent_5);
+          });
+        }
         template_effect(() => set_text(text_6, cart.totalFormatted));
         append($$anchor2, fragment_1);
       };
       if_block(node, ($$render) => {
-        if (cart.items.length) $$render(consequent_5);
+        if (cart.items.length) $$render(consequent_6);
       });
     }
     append($$anchor, fragment);
@@ -15520,6 +15532,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   }
   delegate(["click"]);
   customElements.define("go-cart", create_custom_element(Cart, { preview: {} }, [], [], false));
+  function CartEmpty($$anchor, $$props) {
+    push($$props, true);
+    wrapInElement($$props.$$host, "go-if", { when: "data.cart.items.length === 0" });
+    pop();
+  }
+  customElements.define("go-cart-empty", create_custom_element(CartEmpty, {}, [], [], false));
   enable_legacy_mode_flag();
   function CartCounter($$anchor, $$props) {
     push($$props, false);
@@ -29364,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());
@@ -29376,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();
@@ -29392,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);
           {
@@ -29429,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 }
               });
@@ -29589,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);
@@ -29628,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
@@ -29638,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);
     };
@@ -29666,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) => {
@@ -29676,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) => {
@@ -29702,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;
         },
@@ -29731,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) ?? ""} `);
             });
@@ -29749,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,
@@ -29800,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();
@@ -29818,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 () => {
@@ -29868,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();
@@ -29876,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);
       },
@@ -29925,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"],
@@ -30042,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) {
@@ -30090,7 +30219,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       const func = new Function("data", `return ${expression};`);
       return func(data);
     } catch (error) {
-      throw new Error(`Error while evaluating when (${string}) in go-if: ${error.message}`);
+      throw new Error(`Error while evaluating when (${expression}) in go-if: ${error.message}`);
     }
   }
   const validTicketSelectionFilters = ["timeslot", "day", "annual"];
@@ -30220,6 +30349,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       if (!get$2(formDetails)) return;
       get$2(data).formData = get$2(formDetails).formData;
     });
+    get$2(data).cart = cart;
     let evaluatedWhen = /* @__PURE__ */ user_derived(() => evaluateExpression(when(), get$2(data)));
     let content = null;
     user_effect(() => {

package/dist-js/gomus-webcomponents.js

@@ -12510,7 +12510,7 @@ function datetime$1(args) {
   const timeRegex2 = `${time2}(?:${opts.join("|")})`;
   return new RegExp(`^${dateSource}T(?:${timeRegex2})$`);
 }
-const string$2 = (params) => {
+const string$1 = (params) => {
   const regex = params ? `[\\s\\S]{${params?.minimum ?? 0},${params?.maximum ?? ""}}` : `[\\s\\S]*`;
   return new RegExp(`^${regex}$`);
 };
@@ -12858,7 +12858,7 @@ const $ZodType = /* @__PURE__ */ $constructor("$ZodType", (inst, def) => {
 });
 const $ZodString = /* @__PURE__ */ $constructor("$ZodString", (inst, def) => {
   $ZodType.init(inst, def);
-  inst._zod.pattern = [...inst?._zod.bag?.patterns ?? []].pop() ?? string$2(inst._zod.bag);
+  inst._zod.pattern = [...inst?._zod.bag?.patterns ?? []].pop() ?? string$1(inst._zod.bag);
   inst._zod.parse = (payload, _) => {
     if (def.coerce)
       try {
@@ -14215,7 +14215,7 @@ const ZodString2 = /* @__PURE__ */ $constructor("ZodString", (inst, def) => {
   inst.time = (params) => inst.check(time(params));
   inst.duration = (params) => inst.check(duration(params));
 });
-function string$1(params) {
+function string(params) {
   return _string(ZodString2, params);
 }
 const ZodStringFormat = /* @__PURE__ */ $constructor("ZodStringFormat", (inst, def) => {
@@ -14519,7 +14519,7 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "email",
-    validator: string$1().email("Invalid email")
+    validator: string().email("Invalid email")
   },
   confirmEmail: {
     key: "confirmEmail",
@@ -14529,7 +14529,7 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "email",
-    validator: string$1().email("Invalid email").min(1, "Please confirm your email")
+    validator: string().email("Invalid email").min(1, "Please confirm your email")
   },
   password: {
     key: "password",
@@ -14548,7 +14548,7 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "new-password",
-    validator: string$1().min(6, "Password must be at least 6 characters")
+    validator: string().min(6, "Password must be at least 6 characters")
   },
   confirmPassword: {
     key: "confirmPassword",
@@ -14558,7 +14558,7 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "new-password",
-    validator: string$1().min(6, "Please confirm your password")
+    validator: string().min(6, "Please confirm your password")
   },
   addressee: {
     key: "addressee",
@@ -14658,7 +14658,7 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "off",
-    validator: string$1().date()
+    validator: string().date()
   }
 };
 function createField(data, required) {
@@ -15373,12 +15373,13 @@ function formatCurrency(priceCents) {
   return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(priceCents / 100);
 }
 var root_2$p = /* @__PURE__ */ from_html(`<li data-go-cart-header-remove="">remove</li>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_4$4 = /* @__PURE__ */ from_html(`<span> </span> <!>`, 1);
+var root_5$2 = /* @__PURE__ */ from_html(`<span class="go-cart-item-time" data-testid="cart-item-time"> </span>`);
+var root_4$4 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date" data-testid="cart-item-date"> </span> <!>`, 1);
 var root_6$1 = /* @__PURE__ */ from_html(`<li data-go-cart-item-remove=""><button>⨉</button></li>`);
-var root_3$6 = /* @__PURE__ */ from_html(`<li data-go-cart-item=""><article><ul><li data-go-cart-item-title=""> <!></li> <li data-go-cart-item-price=""> </li> <li data-go-cart-item-count=""> </li> <!> <li data-go-cart-item-sum=""> </li></ul></article></li>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<li data-go-cart-item=""><article><ul><li data-go-cart-item-title=""><span class="go-cart-item-title" data-testid="cart-item-title"> </span> <!></li> <li data-go-cart-item-price=""> </li> <li data-go-cart-item-count=""> </li> <!> <li data-go-cart-item-sum=""> </li></ul></article></li>`);
 var root_7$3 = /* @__PURE__ */ from_html(`<li data-go-cart-footer-remove=""></li>`);
-var root_1$b = /* @__PURE__ */ from_html(`<ol data-testid="cart"><li data-go-cart-header="" data-testid="cart-header"><ul><li data-go-cart-header-title="">Product</li> <li data-go-cart-header-price="">Price</li> <li data-go-cart-header-count="">Count</li> <!> <li data-go-cart-header-sum="">Sum</li></ul></li> <!> <li data-go-cart-footer="" data-testid="cart-footer"><ul><li data-go-cart-footer-title=""></li> <li data-go-cart-footer-price=""></li> <li data-go-cart-footer-count=""></li> <!> <li data-go-cart-footer-sum="" data-go-cart-sum=""> </li></ul></li></ol> <a href="javascript:void(0);" class="go-cart-checkout-button" data-testid="checkout-button">Checkout</a>`, 1);
+var root_8 = /* @__PURE__ */ from_html(`<a href="javascript:void(0);" class="go-cart-checkout-button" data-testid="checkout-button">Checkout</a>`);
+var root_1$b = /* @__PURE__ */ from_html(`<ol data-testid="cart"><li data-go-cart-header="" data-testid="cart-header"><ul><li data-go-cart-header-title="">Product</li> <li data-go-cart-header-price="">Price</li> <li data-go-cart-header-count="">Count</li> <!> <li data-go-cart-header-sum="">Sum</li></ul></li> <!> <li data-go-cart-footer="" data-testid="cart-footer"><ul><li data-go-cart-footer-title=""></li> <li data-go-cart-footer-price=""></li> <li data-go-cart-footer-count=""></li> <!> <li data-go-cart-footer-sum="" data-go-cart-sum=""> </li></ul></li></ol> <!>`, 1);
 function Cart($$anchor, $$props) {
   push($$props, true);
   const preview = prop($$props, "preview", 7, false);
@@ -15399,7 +15400,7 @@ function Cart($$anchor, $$props) {
   var fragment = comment();
   var node = first_child(fragment);
   {
-    var consequent_5 = ($$anchor2) => {
+    var consequent_6 = ($$anchor2) => {
       var fragment_1 = root_1$b();
       var ol = first_child(fragment_1);
       var li = child(ol);
@@ -15423,22 +15424,24 @@ function Cart($$anchor, $$props) {
         var article = child(li_2);
         var ul_1 = child(article);
         var li_3 = child(ul_1);
-        var text2 = child(li_3);
-        var node_3 = sibling(text2);
+        var span = child(li_3);
+        var text2 = child(span, true);
+        reset(span);
+        var node_3 = sibling(span, 2);
         {
           var consequent_2 = ($$anchor4) => {
             var fragment_2 = root_4$4();
-            var span = first_child(fragment_2);
-            var text_1 = child(span, true);
-            reset(span);
-            var node_4 = sibling(span, 2);
+            var span_1 = first_child(fragment_2);
+            var text_1 = child(span_1, true);
+            reset(span_1);
+            var node_4 = sibling(span_1, 2);
             {
               var consequent_1 = ($$anchor5) => {
-                var span_1 = root_5$2();
-                var text_2 = child(span_1, true);
-                reset(span_1);
+                var span_2 = root_5$2();
+                var text_2 = child(span_2, true);
+                reset(span_2);
                 template_effect(($0) => set_text(text_2, $0), [() => formatTime(get$2(cartItem).attributes.time)]);
-                append($$anchor5, span_1);
+                append($$anchor5, span_2);
               };
               if_block(node_4, ($$render) => {
                 if (get$2(cartItem).item.type === "timeslot") $$render(consequent_1);
@@ -15481,7 +15484,7 @@ function Cart($$anchor, $$props) {
         reset(li_2);
         template_effect(() => {
           set_attribute(article, "data-testid", get$2(cartItem).uuid);
-          set_text(text2, `${get$2(cartItem).item.title ?? ""} `);
+          set_text(text2, get$2(cartItem).item.title);
           set_text(text_3, get$2(cartItem).final_price_formatted);
           set_text(text_4, get$2(cartItem).quantity);
           set_text(text_5, get$2(cartItem).total_price_formatted);
@@ -15506,13 +15509,22 @@ function Cart($$anchor, $$props) {
       reset(ul_2);
       reset(li_8);
       reset(ol);
-      var a2 = sibling(ol, 2);
-      a2.__click = navToCheckout;
+      var node_7 = sibling(ol, 2);
+      {
+        var consequent_5 = ($$anchor3) => {
+          var a2 = root_8();
+          a2.__click = navToCheckout;
+          append($$anchor3, a2);
+        };
+        if_block(node_7, ($$render) => {
+          if (!preview()) $$render(consequent_5);
+        });
+      }
       template_effect(() => set_text(text_6, cart.totalFormatted));
       append($$anchor2, fragment_1);
     };
     if_block(node, ($$render) => {
-      if (cart.items.length) $$render(consequent_5);
+      if (cart.items.length) $$render(consequent_6);
     });
   }
   append($$anchor, fragment);
@@ -15520,6 +15532,12 @@ function Cart($$anchor, $$props) {
 }
 delegate(["click"]);
 customElements.define("go-cart", create_custom_element(Cart, { preview: {} }, [], [], false));
+function CartEmpty($$anchor, $$props) {
+  push($$props, true);
+  wrapInElement($$props.$$host, "go-if", { when: "data.cart.items.length === 0" });
+  pop();
+}
+customElements.define("go-cart-empty", create_custom_element(CartEmpty, {}, [], [], false));
 enable_legacy_mode_flag();
 function CartCounter($$anchor, $$props) {
   push($$props, false);
@@ -29364,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());
@@ -29376,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();
@@ -29392,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);
         {
@@ -29429,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 }
             });
@@ -29589,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);
@@ -29628,6 +29666,7 @@ function InputAndLabel($$anchor, $$props) {
       () => ({
         ...get$2(fieldAttributes),
         ...restProps,
+        class: inputClass(),
         placeholder: field().placeholder,
         type: field().type,
         name: field().key
@@ -29638,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);
   };
@@ -29666,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) => {
@@ -29676,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) => {
@@ -29702,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;
       },
@@ -29731,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) ?? ""} `);
           });
@@ -29749,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,
@@ -29800,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();
@@ -29818,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 () => {
@@ -29868,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();
@@ -29876,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);
     },
@@ -29925,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"],
@@ -30042,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) {
@@ -30090,7 +30219,7 @@ function evaluateExpression(expression, data) {
     const func = new Function("data", `return ${expression};`);
     return func(data);
   } catch (error) {
-    throw new Error(`Error while evaluating when (${string}) in go-if: ${error.message}`);
+    throw new Error(`Error while evaluating when (${expression}) in go-if: ${error.message}`);
   }
 }
 const validTicketSelectionFilters = ["timeslot", "day", "annual"];
@@ -30220,6 +30349,7 @@ function If($$anchor, $$props) {
     if (!get$2(formDetails)) return;
     get$2(data).formData = get$2(formDetails).formData;
   });
+  get$2(data).cart = cart;
   let evaluatedWhen = /* @__PURE__ */ user_derived(() => evaluateExpression(when(), get$2(data)));
   let content = null;
   user_effect(() => {

package/package.json

@@ -4,7 +4,7 @@
     "name": "Giantmonkey GmbH"
   },
   "license": "MIT",
-  "version": "1.10.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",