@gomusdev/web-components 3.9.0 → 3.10.1

package/dist-js/gomus-webcomponents.js

@@ -1458,7 +1458,7 @@ function createSubscriber(start) {
 		if (effect_tracking()) {
 			get$2(version);
 			render_effect(() => {
-				if (subscribers === 0) stop = untrack(() => start(() => increment(version)));
+				if (subscribers === 0) stop = untrack(() => start(() => increment$1(version)));
 				subscribers += 1;
 				return () => {
 					queue_micro_task(() => {
@@ -1466,7 +1466,7 @@ function createSubscriber(start) {
 						if (subscribers === 0) {
 							stop?.();
 							stop = void 0;
-							increment(version);
+							increment$1(version);
 						}
 					});
 				};
@@ -2205,7 +2205,7 @@ function flush_eager_effects() {
 * Silently (without using `get`) increment a source
 * @param {Source<number>} source
 */
-function increment(source) {
+function increment$1(source) {
 	set(source, source.v + 1);
 }
 /**
@@ -2295,11 +2295,11 @@ function proxy(value) {
 				if (prop in target) {
 					const s = with_parent(() => /* @__PURE__ */ state(UNINITIALIZED, stack));
 					sources.set(prop, s);
-					increment(version);
+					increment$1(version);
 				}
 			} else {
 				set(s, UNINITIALIZED);
-				increment(version);
+				increment$1(version);
 			}
 			return true;
 		},
@@ -2381,7 +2381,7 @@ function proxy(value) {
 					var n = Number(prop);
 					if (Number.isInteger(n) && n >= ls.v) set(ls, n + 1);
 				}
-				increment(version);
+				increment$1(version);
 			}
 			return true;
 		},
@@ -13908,12 +13908,13 @@ var defaultConfig = {
 		window.location.assign(url);
 	},
 	forms: {},
-	fields: {}
+	fields: {},
+	quantityStepper: true
 };
 var ConfigStoreSvelte = class {
 	defaultConfig = assign(defaultConfig, window.customOptions);
 	override = this.defaultConfig;
-	#options = /* @__PURE__ */ state(proxy({}));
+	#options = /* @__PURE__ */ state(proxy(this.defaultConfig));
 	get options() {
 		return get$2(this.#options);
 	}
@@ -13989,7 +13990,7 @@ var setPersonalizationDetails = createSetDetails(KEY$5);
 var getPersonalizationDetails = createGetDetails(KEY$5);
 //#endregion
 //#region src/components/annualTicketPersonalization/components/AnnualTicketPersonalization.svelte
-var root$52 = /* @__PURE__ */ from_html(`<li><a> </a></li>`);
+var root$53 = /* @__PURE__ */ from_html(`<li><a> </a></li>`);
 var root_1$17 = /* @__PURE__ */ from_html(`<ul class="go-annual-ticket"><li class="go-annual-ticket-title"> </li> <li class="go-annual-ticket-personalization-count"> </li> <!></ul>`);
 function AnnualTicketPersonalization($$anchor, $$props) {
 	push($$props, true);
@@ -14024,7 +14025,7 @@ function AnnualTicketPersonalization($$anchor, $$props) {
 			reset(li_1);
 			var node_2 = sibling(li_1, 2);
 			var consequent = ($$anchor) => {
-				var li_2 = root$52();
+				var li_2 = root$53();
 				var a = child(li_2);
 				var text_2 = child(a, true);
 				reset(a);
@@ -14699,7 +14700,7 @@ function wrapInElement(host, tag, props) {
 }
 //#endregion
 //#region src/components/forms/ui/generic/Form.svelte
-var root$51 = /* @__PURE__ */ from_html(`<go-all-fields></go-all-fields> <go-form-feedback><go-errors-feedback></go-errors-feedback> <go-success-feedback></go-success-feedback></go-form-feedback> <go-submit> </go-submit>`, 3);
+var root$52 = /* @__PURE__ */ from_html(`<go-all-fields></go-all-fields> <go-form-feedback><go-errors-feedback></go-errors-feedback> <go-success-feedback></go-success-feedback></go-form-feedback> <go-submit> </go-submit>`, 3);
 function Form($$anchor, $$props) {
 	push($$props, true);
 	let formId = prop($$props, "formId", 7), custom = prop($$props, "custom", 7);
@@ -14744,7 +14745,7 @@ function Form($$anchor, $$props) {
 	var fragment = comment();
 	var node = first_child(fragment);
 	var consequent = ($$anchor) => {
-		var fragment_1 = root$51();
+		var fragment_1 = root$52();
 		var go_submit = sibling(sibling(first_child(fragment_1), 2), 2);
 		var text = child(go_submit, true);
 		reset(go_submit);
@@ -14771,7 +14772,7 @@ customElements.define("go-form", create_custom_element(Form, {
 }, [], ["details"]));
 //#endregion
 //#region src/components/auth/passwordReset/PasswordReset.svelte
-var root$50 = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
+var root$51 = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
 function PasswordReset($$anchor, $$props) {
 	push($$props, true);
 	let custom = prop($$props, "custom", 7, false);
@@ -14804,7 +14805,7 @@ function PasswordReset($$anchor, $$props) {
 			flushSync();
 		}
 	};
-	var go_form = root$50();
+	var go_form = root$51();
 	set_custom_element_data(go_form, "formId", "passwordReset");
 	template_effect(() => set_custom_element_data(go_form, "custom", custom()));
 	event("submit", go_form, passwordReset);
@@ -15047,7 +15048,7 @@ var setCartDetails = createSetDetails(KEY$3);
 var getCartDetails = createGetDetails(KEY$3);
 //#endregion
 //#region src/components/cart/components/itemTitles/Coupon.svelte
-var root$49 = /* @__PURE__ */ from_html(`<span class="go-cart-item-title" data-testid="cart-item-title"> </span>`);
+var root$50 = /* @__PURE__ */ from_html(`<span class="go-cart-item-title" data-testid="cart-item-title"> </span>`);
 function Coupon($$anchor, $$props) {
 	push($$props, true);
 	let cartItem = prop($$props, "cartItem", 7);
@@ -15060,7 +15061,7 @@ function Coupon($$anchor, $$props) {
 			flushSync();
 		}
 	};
-	var span = root$49();
+	var span = root$50();
 	var text = child(span, true);
 	reset(span);
 	template_effect(() => set_text(text, cartItem().product.title));
@@ -15070,7 +15071,7 @@ function Coupon($$anchor, $$props) {
 create_custom_element(Coupon, { cartItem: {} }, [], [], { mode: "open" });
 //#endregion
 //#region src/components/cart/components/itemTitles/Event.svelte
-var root$48 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date" data-testid="cart-item-date"> </span><span class="go-cart-item-time" data-testid="cart-item-time"> </span>`, 1);
+var root$49 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date" data-testid="cart-item-date"> </span><span class="go-cart-item-time" data-testid="cart-item-time"> </span>`, 1);
 var root_1$16 = /* @__PURE__ */ from_html(`<span class="go-cart-item-title" data-testid="cart-item-title"><span class="go-cart-item-title-event-title"> </span><span class="go-cart-item-title-ticket-title"> </span></span><!>`, 1);
 function Event$2($$anchor, $$props) {
 	push($$props, true);
@@ -15097,7 +15098,7 @@ function Event$2($$anchor, $$props) {
 	reset(span);
 	var node = sibling(span);
 	var consequent = ($$anchor) => {
-		var fragment_1 = root$48();
+		var fragment_1 = root$49();
 		var span_3 = first_child(fragment_1);
 		var text_2 = child(span_3, true);
 		reset(span_3);
@@ -15126,7 +15127,7 @@ function Event$2($$anchor, $$props) {
 create_custom_element(Event$2, { cartItem: {} }, [], [], { mode: "open" });
 //#endregion
 //#region src/components/cart/components/itemTitles/Ticket.svelte
-var root$47 = /* @__PURE__ */ from_html(`<span class="go-cart-item-time" data-testid="cart-item-time"> </span>`);
+var root$48 = /* @__PURE__ */ from_html(`<span class="go-cart-item-time" data-testid="cart-item-time"> </span>`);
 var root_1$15 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date" data-testid="cart-item-date"> </span> <!>`, 1);
 var root_2$11 = /* @__PURE__ */ from_html(`<span class="go-cart-item-title" data-testid="cart-item-title"> </span> <!>`, 1);
 function Ticket($$anchor, $$props) {
@@ -15153,7 +15154,7 @@ function Ticket($$anchor, $$props) {
 		reset(span_1);
 		var node_1 = sibling(span_1, 2);
 		var consequent = ($$anchor) => {
-			var span_2 = root$47();
+			var span_2 = root$48();
 			var text_2 = child(span_2, true);
 			reset(span_2);
 			template_effect(($0) => set_text(text_2, $0), [() => formatTime(cartItem().time)]);
@@ -15177,6 +15178,208 @@ function Ticket($$anchor, $$props) {
 }
 create_custom_element(Ticket, { cartItem: {} }, [], [], { mode: "open" });
 //#endregion
+//#region src/lib/models/cart/quantityStepper.ts
+/** `+`: from `0` jump to the order minimum (at least `1`); otherwise step up by one. Capped at `max`. */
+function increment(value, { min, max }) {
+	const target = value === 0 ? Math.max(min, 1) : value + 1;
+	return target > max ? value : target;
+}
+/** `−`: from the order minimum drop straight to `0` (skipping the invalid `1..min-1` band); otherwise step down by one. */
+function decrement(value, { min }) {
+	return value <= min ? 0 : value - 1;
+}
+/** Clamp a typed value into `{0} ∪ [min, max]`: `≤0` → `0`, `0<v<min` rounds up to `min`, `>max` → `max`. */
+function clampTyped(raw, { min, max }) {
+	if (!Number.isFinite(raw) || raw <= 0) return 0;
+	let v = Math.floor(raw);
+	if (v < min) v = min;
+	if (v > max) v = max;
+	return v;
+}
+/** Whether `value` is a committable quantity for these bounds. */
+function isValid(value, { min, max }) {
+	if (value < 0 || value > max) return false;
+	return value === 0 || value >= min;
+}
+/** Whether `+` can change the value (false → the button is `aria-disabled`). */
+function canIncrement(value, bounds) {
+	return increment(value, bounds) > value;
+}
+/** Whether `−` can change the value (false → the button is `aria-disabled`). */
+function canDecrement(value) {
+	return value > 0;
+}
+//#endregion
+//#region src/components/shared/quantityStepper/QuantityStepper.svelte
+var root$47 = /* @__PURE__ */ from_html(`<div class="go-quantity-stepper" role="group"><button type="button" class="go-quantity-stepper-button go-quantity-stepper-decrement" tabindex="-1"><span aria-hidden="true">−</span></button> <input class="go-quantity-stepper-value" type="text" role="spinbutton" inputmode="numeric" autocomplete="off"/> <button type="button" class="go-quantity-stepper-button go-quantity-stepper-increment" tabindex="-1"><span aria-hidden="true">+</span></button></div>`);
+function QuantityStepper($$anchor, $$props) {
+	const inputId = props_id();
+	push($$props, true);
+	let value = prop($$props, "value", 7), min = prop($$props, "min", 7), max = prop($$props, "max", 7), label = prop($$props, "label", 7), decreaseLabel = prop($$props, "decreaseLabel", 7), increaseLabel = prop($$props, "increaseLabel", 7), onChange = prop($$props, "onChange", 7);
+	let inputEl;
+	let invalid = /* @__PURE__ */ state(false);
+	const decDisabled = /* @__PURE__ */ user_derived(() => !canDecrement(value()));
+	const incDisabled = /* @__PURE__ */ user_derived(() => !canIncrement(value(), {
+		min: min(),
+		max: max()
+	}));
+	function emit(next) {
+		if (next !== value()) onChange()(next);
+	}
+	function stepDown() {
+		if (canDecrement(value())) emit(decrement(value(), {
+			min: min(),
+			max: max()
+		}));
+	}
+	function stepUp() {
+		if (canIncrement(value(), {
+			min: min(),
+			max: max()
+		})) emit(increment(value(), {
+			min: min(),
+			max: max()
+		}));
+	}
+	function commitTyped() {
+		const next = clampTyped(parseInt(inputEl.value, 10), {
+			min: min(),
+			max: max()
+		});
+		set(invalid, false);
+		inputEl.value = String(next);
+		emit(next);
+	}
+	function onInput() {
+		const raw = inputEl.value.trim();
+		set(invalid, !(/^\d+$/.test(raw) && isValid(parseInt(raw, 10), {
+			min: min(),
+			max: max()
+		})));
+	}
+	function onKeydown(e) {
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				stepUp();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				stepDown();
+				break;
+			case "Home":
+				e.preventDefault();
+				emit(0);
+				break;
+			case "End":
+				e.preventDefault();
+				emit(max());
+				break;
+			case "Enter":
+				e.preventDefault();
+				commitTyped();
+				break;
+		}
+	}
+	var $$exports = {
+		get value() {
+			return value();
+		},
+		set value($$value) {
+			value($$value);
+			flushSync();
+		},
+		get min() {
+			return min();
+		},
+		set min($$value) {
+			min($$value);
+			flushSync();
+		},
+		get max() {
+			return max();
+		},
+		set max($$value) {
+			max($$value);
+			flushSync();
+		},
+		get label() {
+			return label();
+		},
+		set label($$value) {
+			label($$value);
+			flushSync();
+		},
+		get decreaseLabel() {
+			return decreaseLabel();
+		},
+		set decreaseLabel($$value) {
+			decreaseLabel($$value);
+			flushSync();
+		},
+		get increaseLabel() {
+			return increaseLabel();
+		},
+		set increaseLabel($$value) {
+			increaseLabel($$value);
+			flushSync();
+		},
+		get onChange() {
+			return onChange();
+		},
+		set onChange($$value) {
+			onChange($$value);
+			flushSync();
+		}
+	};
+	var div = root$47();
+	var button = child(div);
+	var input = sibling(button, 2);
+	remove_input_defaults(input);
+	set_attribute(input, "aria-valuemin", 0);
+	bind_this(input, ($$value) => inputEl = $$value, () => inputEl);
+	var button_1 = sibling(input, 2);
+	reset(div);
+	template_effect(() => {
+		set_attribute(div, "aria-label", label());
+		set_attribute(button, "title", decreaseLabel());
+		set_attribute(button, "aria-controls", inputId);
+		set_attribute(button, "aria-disabled", get$2(decDisabled));
+		set_attribute(input, "id", inputId);
+		set_attribute(input, "aria-label", label());
+		set_value(input, value());
+		set_attribute(input, "aria-valuenow", value());
+		set_attribute(input, "aria-valuemax", max());
+		set_attribute(input, "aria-invalid", get$2(invalid) ? "true" : void 0);
+		set_attribute(button_1, "title", increaseLabel());
+		set_attribute(button_1, "aria-controls", inputId);
+		set_attribute(button_1, "aria-disabled", get$2(incDisabled));
+	});
+	delegated("click", button, stepDown);
+	delegated("input", input, onInput);
+	delegated("change", input, commitTyped);
+	event("blur", input, commitTyped);
+	delegated("keydown", input, onKeydown);
+	delegated("click", button_1, stepUp);
+	append($$anchor, div);
+	return pop($$exports);
+}
+delegate([
+	"click",
+	"input",
+	"change",
+	"keydown"
+]);
+create_custom_element(QuantityStepper, {
+	value: {},
+	min: {},
+	max: {},
+	label: {},
+	decreaseLabel: {},
+	increaseLabel: {},
+	onChange: {}
+}, [], [], { mode: "open" });
+//#endregion
 //#region src/lib/models/cart/selectOptions.ts
 function generateQuantityOptions(from, to, options = { floor: 0 }) {
 	const { floor } = options;
@@ -15203,10 +15406,11 @@ var root_1$14 = /* @__PURE__ */ from_html(`<span class="go-cart-item-price-disco
 var root_2$10 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_3$7 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_4$4 = /* @__PURE__ */ from_html(`<select class="go-cart-item-select"></select>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button class="go-cart-remove">⨉</button></li>`);
+var root_5$3 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button class="go-cart-remove">⨉</button></li>`);
 var root_6$2 = /* @__PURE__ */ from_html(`<article class="go-cart-item-content"><ul><li class="go-cart-item-title-container"><!></li> <li class="go-cart-item-price"><!></li> <li class="go-cart-item-count"><!></li> <!> <li class="go-cart-item-sum"> </li></ul></article>`);
 function Item$1($$anchor, $$props) {
 	push($$props, true);
+	const useStepper = /* @__PURE__ */ user_derived(() => configStore.config.quantityStepper);
 	let displayItem = prop($$props, "displayItem", 7), displayCart = prop($$props, "displayCart", 7), preview = prop($$props, "preview", 7);
 	let capacity = /* @__PURE__ */ state(void 0);
 	const itemInMaincart = /* @__PURE__ */ user_derived(() => shop.cart?.items.find((item) => item.uuid === (displayItem().display?.reference_uuid ?? displayItem().uuid)));
@@ -15217,15 +15421,16 @@ function Item$1($$anchor, $$props) {
 			set(capacity, shop.capacityManager.capacity(displayCart(), displayItem(), emptyCart), true);
 		});
 	});
-	function update(target) {
-		const el = target;
+	function updateQuantity(nextLineQuantity) {
 		if (!get$2(itemInMaincart)) {
 			console.error("(CartItem) Could not find main item for line", displayItem());
 			return;
 		}
-		const nextLineQuantity = parseInt(el.value, 10);
 		get$2(itemInMaincart).quantity = Math.max(0, get$2(itemInMaincart).quantity - displayItem().quantity + nextLineQuantity);
 	}
+	function update(target) {
+		updateQuantity(parseInt(target.value, 10));
+	}
 	function del() {
 		if (!get$2(itemInMaincart)) {
 			console.error("(CartItem) Could not find main item for line", displayItem());
@@ -15260,7 +15465,7 @@ function Item$1($$anchor, $$props) {
 	};
 	var fragment = comment();
 	var node = first_child(fragment);
-	var consequent_6 = ($$anchor) => {
+	var consequent_7 = ($$anchor) => {
 		var article = root_6$2();
 		var ul = child(article);
 		var li = child(ul);
@@ -15323,6 +15528,34 @@ function Item$1($$anchor, $$props) {
 			template_effect(() => set_text(text_3, displayItem().quantity));
 			append($$anchor, span_2);
 		};
+		var consequent_5 = ($$anchor) => {
+			{
+				let $0 = /* @__PURE__ */ user_derived(() => displayItem().quantity ?? 0);
+				let $1 = /* @__PURE__ */ user_derived(() => shop.t("quantity.decrease"));
+				let $2 = /* @__PURE__ */ user_derived(() => shop.t("quantity.increase"));
+				QuantityStepper($$anchor, {
+					get value() {
+						return get$2($0);
+					},
+					get min() {
+						return get$2(capacity).min;
+					},
+					get max() {
+						return get$2(capacity).max;
+					},
+					get label() {
+						return displayItem().product.title;
+					},
+					get decreaseLabel() {
+						return get$2($1);
+					},
+					get increaseLabel() {
+						return get$2($2);
+					},
+					onChange: updateQuantity
+				});
+			}
+		};
 		var alternate_1 = ($$anchor) => {
 			var select = root_4$4();
 			each(select, 21, () => generateQuantityOptions(get$2(capacity).min, get$2(capacity).max, { floor: 1 }), (q) => q.value, ($$anchor, q) => {
@@ -15344,12 +15577,13 @@ function Item$1($$anchor, $$props) {
 		};
 		if_block(node_3, ($$render) => {
 			if (preview()) $$render(consequent_4);
+			else if (get$2(useStepper)) $$render(consequent_5, 1);
 			else $$render(alternate_1, -1);
 		});
 		reset(li_2);
 		var node_4 = sibling(li_2, 2);
-		var consequent_5 = ($$anchor) => {
-			var li_3 = root_5$2();
+		var consequent_6 = ($$anchor) => {
+			var li_3 = root_5$3();
 			var button = child(li_3);
 			reset(li_3);
 			template_effect(($0) => set_attribute(button, "aria-label", $0), [() => shop.t("cart.item.remove")]);
@@ -15357,7 +15591,7 @@ function Item$1($$anchor, $$props) {
 			append($$anchor, li_3);
 		};
 		if_block(node_4, ($$render) => {
-			if (!preview()) $$render(consequent_5);
+			if (!preview()) $$render(consequent_6);
 		});
 		var li_4 = sibling(node_4, 2);
 		var text_5 = child(li_4, true);
@@ -15368,7 +15602,7 @@ function Item$1($$anchor, $$props) {
 		append($$anchor, article);
 	};
 	if_block(node, ($$render) => {
-		if (get$2(capacity)) $$render(consequent_6);
+		if (get$2(capacity)) $$render(consequent_7);
 	});
 	append($$anchor, fragment);
 	return pop($$exports);
@@ -16864,11 +17098,11 @@ var SvelteMap = class extends Map {
 			s = this.#source(0);
 			sources.set(key, s);
 			set(this.#size, super.size);
-			increment(version);
+			increment$1(version);
 		} else if (prev_res !== value) {
-			increment(s);
+			increment$1(s);
 			var v_reactions = version.reactions === null ? null : new Set(version.reactions);
-			if (v_reactions === null || !s.reactions?.every((r) => v_reactions.has(r))) increment(version);
+			if (v_reactions === null || !s.reactions?.every((r) => v_reactions.has(r))) increment$1(version);
 		}
 		return res;
 	}
@@ -16883,7 +17117,7 @@ var SvelteMap = class extends Map {
 		}
 		if (res) {
 			set(this.#size, super.size);
-			increment(this.#version);
+			increment$1(this.#version);
 		}
 		return res;
 	}
@@ -16893,7 +17127,7 @@ var SvelteMap = class extends Map {
 		var sources = this.#sources;
 		set(this.#size, 0);
 		for (var s of sources.values()) set(s, -1);
-		increment(this.#version);
+		increment$1(this.#version);
 		sources.clear();
 	}
 	#read_all() {
@@ -30313,7 +30547,7 @@ var root_1$7 = /* @__PURE__ */ from_html(` <!>`, 1);
 var root_2$6 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
 var root_3$6 = /* @__PURE__ */ from_html(`<label><!></label> <textarea></textarea>`, 1);
 var root_4$3 = /* @__PURE__ */ from_html(`<figure role="status" aria-live="polite"><img class="go-file-preview"/> <figcaption class="go-file-preview-caption"> </figcaption></figure>`);
-var root_5$1 = /* @__PURE__ */ from_html(`<label><!></label> <input/> <!>`, 1);
+var root_5$2 = /* @__PURE__ */ from_html(`<label><!></label> <input/> <!>`, 1);
 var root_6$1 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
 var root_7$1 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
 var root_8$1 = /* @__PURE__ */ from_html(`<option disabled="" hidden="" selected=""> </option> <!>`, 1);
@@ -30384,7 +30618,7 @@ function InputAndLabel($$anchor, $$props) {
 		append($$anchor, fragment_2);
 	};
 	const file = ($$anchor) => {
-		var fragment_3 = root_5$1();
+		var fragment_3 = root_5$2();
 		var label_3 = first_child(fragment_3);
 		labelText(child(label_3));
 		reset(label_3);
@@ -33437,7 +33671,7 @@ var root_1$3 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date"> </spa
 var root_2$2 = /* @__PURE__ */ from_html(`<!> <br/> <a class="go-ticket-download" target="_blank" rel="noopener noreferrer"> </a>`, 1);
 var root_3$2 = /* @__PURE__ */ from_html(`<br/> <a class="go-ticket-personalization"> </a>`, 1);
 var root_4$2 = /* @__PURE__ */ from_html(`<a aria-label="passbook link"><img alt="apple wallet icon"/></a>`);
-var root_5 = /* @__PURE__ */ from_html(`<a aria-label="iCal link"> </a>`);
+var root_5$1 = /* @__PURE__ */ from_html(`<a aria-label="iCal link"> </a>`);
 var root_6 = /* @__PURE__ */ from_html(`<li><article><ul><li class="go-order-breakdown-count"></li> <li class="go-order-breakdown-product"><span class="go-order-item-title"> </span> <!></li> <li class="go-order-breakdown-item-price"> </li> <li class="go-order-breakdown-passbook"><!></li> <li class="go-order-breakdown-ical"><!></li></ul></article></li>`);
 var root_7 = /* @__PURE__ */ from_html(`<a class="go-ticket-download" target="_blank" rel="noopener noreferrer"> </a>`);
 var root_8 = /* @__PURE__ */ from_html(`<a class="go-ticket-personalization"> </a>`);
@@ -33559,7 +33793,7 @@ function TicketSale($$anchor, $$props) {
 			var li_5 = sibling(li_4, 2);
 			var node_5 = child(li_5);
 			var consequent_4 = ($$anchor) => {
-				var a_3 = root_5();
+				var a_3 = root_5$1();
 				var text_7 = child(a_3, true);
 				reset(a_3);
 				template_effect(($0) => {
@@ -36199,7 +36433,8 @@ var root$3 = /* @__PURE__ */ from_html(`<span class="go-tickets-item-title-event
 var root_1$2 = /* @__PURE__ */ from_html(`<li class="go-tickets-item-info"><button type="button" data-testid="ticket-info-toggle"></button></li>`);
 var root_2$1 = /* @__PURE__ */ from_html(`<li class="go-ticket-additional-info" data-testid="ticket-additional-info"> </li>`);
 var root_3$1 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_4$1 = /* @__PURE__ */ from_html(`<li><article><ul><li class="go-tickets-item-title"><!></li> <!> <li class="go-tickets-item-description" data-go-tickets-description=""></li> <!> <li class="go-tickets-item-price" data-go-tickets-price=""> </li> <li class="go-tickets-item-quality" data-go-tickets-quality=""><select class="go-tickets-item-select"></select></li></ul></article></li>`);
+var root_4$1 = /* @__PURE__ */ from_html(`<select class="go-tickets-item-select"></select>`);
+var root_5 = /* @__PURE__ */ from_html(`<li><article><ul><li class="go-tickets-item-title"><!></li> <!> <li class="go-tickets-item-description" data-go-tickets-description=""></li> <!> <li class="go-tickets-item-price" data-go-tickets-price=""> </li> <li class="go-tickets-item-quality" data-go-tickets-quality=""><!></li></ul></article></li>`);
 function Item($$anchor, $$props) {
 	const uid = props_id();
 	push($$props, true);
@@ -36224,12 +36459,14 @@ function Item($$anchor, $$props) {
 		append($$anchor, text_2);
 	};
 	let item = prop($$props, "item", 7), details = prop($$props, "details", 7);
+	const useStepper = /* @__PURE__ */ user_derived(() => configStore.config.quantityStepper);
 	let capacity = /* @__PURE__ */ state(void 0);
 	let infoExpanded = /* @__PURE__ */ state(false);
 	const reductionReason = /* @__PURE__ */ user_derived(() => item().product?.content?.reduction_reason);
 	const infoPanelId = `go-ticket-info-${uid}`;
 	user_effect(() => {
 		details().preCart.items.map((i) => i.quantity);
+		shop.cart?.items.map((i) => i.quantity);
 		untrack(() => {
 			set(capacity, shop.capacityManager.capacity(shop.cart, item(), details().preCart), true);
 		});
@@ -36257,8 +36494,8 @@ function Item($$anchor, $$props) {
 	};
 	var fragment_2 = comment();
 	var node = first_child(fragment_2);
-	var consequent_2 = ($$anchor) => {
-		var li = root_4$1();
+	var consequent_3 = ($$anchor) => {
+		var li = root_5();
 		var article = child(li);
 		var ul = child(article);
 		var li_1 = child(ul);
@@ -36304,35 +36541,70 @@ function Item($$anchor, $$props) {
 		var text_4 = child(li_5, true);
 		reset(li_5);
 		var li_6 = sibling(li_5, 2);
-		var select = child(li_6);
-		each(select, 21, () => generateQuantityOptions(get$2(capacity).min, get$2(capacity).max), (q) => q.value, ($$anchor, q) => {
-			var option = root_3$1();
-			var text_5 = child(option, true);
-			reset(option);
-			var option_value = {};
-			template_effect(() => {
-				set_selected(option, item().quantity === get$2(q).value);
-				set_text(text_5, get$2(q).label);
-				if (option_value !== (option_value = get$2(q).value)) option.value = (option.__value = get$2(q).value) ?? "";
+		var node_4 = child(li_6);
+		var consequent_2 = ($$anchor) => {
+			{
+				let $0 = /* @__PURE__ */ user_derived(() => shop.t("quantity.decrease"));
+				let $1 = /* @__PURE__ */ user_derived(() => shop.t("quantity.increase"));
+				QuantityStepper($$anchor, {
+					get value() {
+						return item().quantity;
+					},
+					get min() {
+						return get$2(capacity).min;
+					},
+					get max() {
+						return get$2(capacity).max;
+					},
+					get label() {
+						return item().product.title;
+					},
+					get decreaseLabel() {
+						return get$2($0);
+					},
+					get increaseLabel() {
+						return get$2($1);
+					},
+					onChange: (q) => item().quantity = q
+				});
+			}
+		};
+		var alternate = ($$anchor) => {
+			var select = root_4$1();
+			each(select, 21, () => generateQuantityOptions(get$2(capacity).min, get$2(capacity).max), (q) => q.value, ($$anchor, q) => {
+				var option = root_3$1();
+				var text_5 = child(option, true);
+				reset(option);
+				var option_value = {};
+				template_effect(() => {
+					set_selected(option, item().quantity === get$2(q).value);
+					set_text(text_5, get$2(q).label);
+					if (option_value !== (option_value = get$2(q).value)) option.value = (option.__value = get$2(q).value) ?? "";
+				});
+				append($$anchor, option);
 			});
-			append($$anchor, option);
+			reset(select);
+			template_effect(($0) => set_attribute(select, "aria-label", $0), [() => shop.t("cart.content.table.edit")]);
+			delegated("change", select, (e) => update(item(), e.target, details()?.ticketSelectionDetails));
+			append($$anchor, select);
+		};
+		if_block(node_4, ($$render) => {
+			if (get$2(useStepper)) $$render(consequent_2);
+			else $$render(alternate, -1);
 		});
-		reset(select);
 		reset(li_6);
 		reset(ul);
 		reset(article);
 		reset(li);
-		template_effect(($0) => {
+		template_effect(() => {
 			set_class(article, 1, clsx(["go-tickets-item", get$2(capacity).bookedOut && "is-booked-out"]));
 			set_attribute(article, "data-testid", item().uuid);
 			set_text(text_4, item().price_formatted);
-			set_attribute(select, "aria-label", $0);
-		}, [() => shop.t("cart.content.table.edit")]);
-		delegated("change", select, (e) => update(item(), e.target, details()?.ticketSelectionDetails));
+		});
 		append($$anchor, li);
 	};
 	if_block(node, ($$render) => {
-		if (get$2(capacity) && !get$2(capacity).unavailable) $$render(consequent_2);
+		if (get$2(capacity) && !get$2(capacity).unavailable) $$render(consequent_3);
 	});
 	append($$anchor, fragment_2);
 	return pop($$exports);
@@ -36445,7 +36717,13 @@ var Details$1 = class {
 			this.timeslots = [];
 			return;
 		}
-		this.timeslots = shop.capacityManager.quotaManager.timeslotsOn(date, this.tsd?.timeslotTicketIds).map((x) => ({
+		const quotaManager = shop.capacityManager.quotaManager;
+		quotaManager.clearPrecart();
+		for (const item of shop.cart?.items ?? []) {
+			const product = item.product;
+			if (isUITicket(product)) quotaManager.setPrecartItemQuantity(product.id, item.quantity ?? 0);
+		}
+		this.timeslots = quotaManager.timeslotsOn(date, this.tsd?.timeslotTicketIds).map((x) => ({
 			...x,
 			startAt: x.timeSlot,
 			timeFormatted: x.timeSlot.substring(11, 16),
@@ -36472,6 +36750,10 @@ function Timeslots($$anchor, $$props) {
 			details.recalculateCapacities();
 		});
 	});
+	user_effect(() => {
+		shop.cart?.items.map((i) => i.quantity);
+		untrack(() => details.recalculateCapacities());
+	});
 	const dispatchTimeslotSelect = (target, selected) => {
 		if (!target || !("dispatchEvent" in target)) return;
 		target.dispatchEvent(new CustomEvent("go-timeslot-select", {