@forgebuild/hotal-ui 0.23.205 → 0.24.1

package/dist/server/menu-section.js

@@ -0,0 +1,944 @@
+import * as $ from 'svelte/internal/server';
+import { onMount } from 'svelte';
+import gsap from 'gsap';
+
+export default function MenuSection($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		/** 'accent': drawn in the rule colour, e.g. a time window. */
+		/** Needed to add this item to a cart (see cartEnabled below) -- an item
+		 *  missing this never gets a quantity stepper, regardless of cartEnabled. */
+		/** Numeric price for cart math, independent of `price` above (which may
+		 *  be an arbitrary display override a cart can't add up) -- like `id`,
+		 *  required for this item to get a stepper. */
+		/** Small chips after the name ("Vegetarian", "Thu–Sun after 5pm"). */
+		/** Small secondary lines under the description ("+$3 premium cut"). */
+		/** Short text shown at the top of the category's panel ("Made here"). */
+		/** A paragraph at the top of the category's panel, true of every item in it. */
+		/** Color/background values the host page can set without writing any CSS.
+		 *  Applied internally as custom properties on the component's own root —
+		 *  consumers never need to know the --ms-* variable names. */
+		/** Item description color (below each item's name). Defaults to
+		 *  textColor dimmed to 70% -- set this instead when a host's dark
+		 *  background needs the description at full strength rather than
+		 *  dimmed (client-reported, 2026-09-12: the dimmed default read as
+		 *  low-contrast grey against a near-black panel). */
+		const THEME_KEY_TO_VAR = {
+			textColor: '--ms-text-color',
+			headingColor: '--ms-heading-color',
+			accentBg: '--ms-accent-bg',
+			accentText: '--ms-accent-text',
+			priceColor: '--ms-price-color',
+			ruleColor: '--ms-rule-color',
+			panelBg: '--ms-panel-bg',
+			borderColor: '--ms-border-color',
+			groupBg: '--ms-group-bg',
+			panelGapBg: '--ms-panel-gap-bg',
+			infoGapBg: '--ms-info-gap-bg',
+			bg: '--ms-bg',
+			padding: '--ms-padding',
+			mutedTextColor: '--ms-muted-text-color'
+		};
+
+		/** 'stacked' (default): heading centered above tabs/info, single column at every width.
+		 *  'split': at desktop widths (>=1024px), heading sits beside the tabs/info column instead of above it. */
+		/** 'default': the classic centered menu design. 'panel': eyebrow-above-heading header row with
+		 *  tabs on the right, full-width boxed info grid, bordered item-card grid, no entrance
+		 *  animations and instant category switching. */
+		/** Skips this component's own built-in slide-in for the heading column
+		 *  (title/eyebrow/rule) on mount -- for a host that already animates the
+		 *  `heading-title` slot's content itself (e.g. a sitewide scroll-reveal
+		 *  system keyed off its own class), so the two don't run at once and
+		 *  visibly fight each other. `variant: 'panel'` already skips *every*
+		 *  entrance animation for a different reason (that variant's own static
+		 *  design); this is the finer-grained version for hosts that still want
+		 *  this component's other entrance motion (tabs, item-card stagger) and
+		 *  only need the heading itself left alone. Off (component still
+		 *  animates the heading) by default. */
+		/** Item-card grid columns at desktop widths (>=1024px). Default variant only -- 'panel' sizes its
+		 *  own grid independently. Narrower hosts (e.g. a menu column beside a photo) read better at 2. */
+		/** Show a pill row filtering the active category by item `group` (e.g. country on a wine list). */
+		/** Show a pill row filtering by item `country` (e.g. region on a wine list). With groupFilter on, it appears once a group is chosen and lists that group's values only. */
+		/** Adds a +/- quantity stepper next to each priced item (that has both
+		 *  `id` and `priceValue`) and emits `cart-change` on every change --
+		 *  same event shape as <proshop-catalogue>. Off by default: most hosts
+		 *  use this purely as a read-only menu display. */
+		/** Restore cart quantities, e.g. from localStorage: [{ id, quantity }].
+		 *  Reactive, not mount-only -- reassign it (a new array) to re-sync
+		 *  quantities a host changed elsewhere (mirrors <proshop-catalogue>'s
+		 *  own `initial`). */
+		/** Set by the server renderer (@forgebuild/hotal-ui/server): the element
+		 *  arrived with its content already in a declarative shadow root, so the
+		 *  entrance tweens would only fade out and back in what is already on
+		 *  screen. Skips them; tab-switch motion is unchanged. */
+		/** Small print under the panels (e.g. a consumer advisory). */
+		/** The heading's level. Default: h1 in the classic variant, h2 in 'panel',
+		 *  as before -- a host page that already has its own h1 sets 2. */
+		let {
+			title = 'MENU',
+			eyebrow = '',
+			categories = [],
+			info = [],
+			allergens = [],
+			pdfUrl,
+			pdfLabel = 'View PDF Menu',
+			topFlourishSrc,
+			tailFlourishSrc,
+			headingCircleColor,
+			headingAlign = 'center',
+			layout = 'stacked',
+			variant = 'default',
+			disableHeadingMotion = false,
+			itemColumns = 3,
+			theme = {},
+			openInNewTabLabel = 'Open in New Tab',
+			closeAriaLabel = 'Close',
+			groupFilter = false,
+			countryFilter = false,
+			groupFilterAllLabel = 'All',
+			countryFilterAllLabel = 'All',
+			cartEnabled = false,
+			initial = [],
+			prerendered = false,
+			footnote = '',
+			headingLevel
+		} = $$props;
+
+		const headingTag = $.derived(() => `h${headingLevel === 1 || headingLevel === 2 || headingLevel === 3 ? headingLevel : variant === 'panel' ? 2 : 1}`);
+
+		// heading-title/eyebrow are rendered as real native <slot> elements (via
+		// {@html} below, alongside intro's own) rather than Svelte's own <slot>:
+		// Svelte's client-side custom-element wrapper only creates a real <slot>
+		// at connect time if it already sees matching light-DOM content, so a
+		// prerendered shadow root -- rendered before any host page's light DOM is
+		// even parsed -- always got Svelte's *fallback* markup baked in, and a
+		// host that does slot its own heading never saw it swapped in natively.
+		// A literal <slot> with the same fallback nested inside is correct on
+		// both sides: the browser shows the fallback until/unless something is
+		// slotted, natively, no JS required either way.
+		function escapeHtml(value) {
+			return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+		}
+
+		function emit(name, detail) {
+			(void 0)?.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+		}
+
+		// Reactive to `initial` (not a one-time initializer), same reasoning as
+		// <proshop-catalogue>'s own `initial`: a host can push an externally-
+		// changed cart back in after mount (e.g. a checkout sidebar elsewhere on
+		// the page). setQty below only ever writes `qty` directly, never
+		// `initial`, so this doesn't fight it or loop -- it re-syncs exactly
+		// when the host reassigns the `initial` prop to a new array.
+		let qty = {};
+
+		function setQty(id, q) {
+			qty[id] = Math.max(0, Math.min(q, 99));
+		}
+
+		// Same press-bounce + value-pop feedback as <proshop-catalogue>'s own
+		// qty stepper (ProshopCatalogue.svelte) -- ported rather than shared
+		// since the two components don't share a base, but the interaction
+		// should feel identical wherever a guest is adding something to a cart.
+		function animateBtn(el) {
+			el.animate(
+				[
+					{ transform: 'scale(1)', offset: 0 },
+					{ transform: 'scale(0.82)', offset: 0.15 },
+					{ transform: 'scale(1.1)', offset: 0.55 },
+					{ transform: 'scale(1)', offset: 1 }
+				],
+				{ duration: 420, easing: 'ease' }
+			);
+		}
+
+		let poppedId = null;
+
+		function pulse(id) {
+			poppedId = null;
+			queueMicrotask(() => poppedId = id);
+		}
+
+		const cartItems = $.derived(() => categories.flatMap((cat) => cat.items).filter((i) => i.id != null && i.priceValue != null && (qty[i.id] ?? 0) > 0).map((i) => ({
+			id: i.id,
+			name: i.name,
+			price: i.priceValue,
+			quantity: qty[i.id]
+		})));
+
+		const cartTotal = $.derived(() => cartItems().reduce((sum, i) => sum + i.price * i.quantity, 0));
+		let activeCat = 0;
+
+		// Optional in-category filters (wine lists: group = country, country = region).
+		// Kept PER CATEGORY: leaving a tab must not regrow its (or the next tab's) list while
+		// the switch animation runs -- that concurrency corrupted the keyed each blocks.
+		// One state object per category. Panels wrap their rows in a key block on filtersByCat[i] so a
+		// filter change recreates that panel's rows outright: in-place reconciliation of a
+		// shrunk-then-regrown keyed list duplicated trailing rows (Svelte 5.56).
+		let filtersByCat = {};
+
+		const activeGroup = $.derived(() => filtersByCat[activeCat]?.g ?? null);
+		const activeCountry = $.derived(() => filtersByCat[activeCat]?.c ?? null);
+
+		function setGroup(g) {
+			filtersByCat = { ...filtersByCat, [activeCat]: { g, c: null } };
+		}
+
+		function setCountry(c) {
+			filtersByCat = { ...filtersByCat, [activeCat]: { g: activeGroup(), c } };
+		}
+
+		// The panel element is keyed on this string, so a filter change recreates the whole
+		// panel: in-place reconciliation of a shrunk-then-regrown list left an orphaned trailing
+		// row inside the panel (Svelte 5.56), and block-level {#key} did not remove it either.
+		function filterKeyOf(ci) {
+			const f = filtersByCat[ci];
+
+			return `${f?.g ?? ''}|${f?.c ?? ''}`;
+		}
+
+		function uniq(values) {
+			return [...new Set(values.filter((v) => Boolean(v)))];
+		}
+
+		function groupsOf(cat) {
+			return uniq(cat.items.map((i) => i.group));
+		}
+
+		function countriesOf(cat) {
+			return uniq(cat.items.filter((i) => !activeGroup() || i.group === activeGroup()).map((i) => i.country));
+		}
+
+		const visibleByCat = $.derived(() => categories.map((cat, ci) => {
+			const g = filtersByCat[ci]?.g ?? null;
+			const c = filtersByCat[ci]?.c ?? null;
+
+			return cat.items.filter((i) => (!g || i.group === g) && (!c || i.country === c));
+		}));
+
+		// Flatten each category into single-root rows (group heading rows + item rows) with
+		// stable keys. Interleaving {#if} headings inside a keyed each broke reconciliation
+		// when filters shrank and regrew the list (hidden panels were left half-rendered).
+		const rowsByCat = $.derived(() => visibleByCat().map((items) => {
+			const rows = [];
+			let last;
+
+			items.forEach((item, j) => {
+				if (item.group && item.group !== last) rows.push({ key: `g:${item.group}`, group: item.group });
+
+				last = item.group;
+
+				// Index + name: a regrown list never reuses a stale node for a different item.
+				rows.push({ key: `i:${j}:${item.name}`, item });
+			});
+
+			return rows;
+		}));
+
+		let pdfOpen = false;
+		let pdfDialog = void 0;
+
+		function findAllergen(id) {
+			return allergens.find((a) => a.id === id);
+		}
+
+		// --- Sliding tab indicator ---
+		// Updates immediately on click, independent of activeCat (which only flips once the
+		// outgoing panel's fade-out finishes) so the indicator and tab highlight react instantly.
+		let activeTabVisual = 0;
+
+		let tabsWrap = void 0;
+		let tabRefs = [];
+		let indicatorStyle = '';
+
+		// Until the indicator has been placed the active tab paints its own fill
+		// (see .ms-tabs:not([data-indicator-ready])): a prerendered element, or
+		// one with JS off, never places it, and the accent-text label would sit
+		// on the strip's own background.
+		let indicatorReady = false;
+
+		function syncIndicator() {
+			const btn = tabRefs[activeTabVisual];
+
+			if (!btn || !tabsWrap) return;
+
+			indicatorStyle = `left: ${btn.offsetLeft}px; width: ${btn.offsetWidth}px;`;
+			indicatorReady = btn.offsetWidth > 0;
+		}
+
+		// Re-sync when the tabs first gain layout — covers hosts that mount the
+		// element inside a display:none wrapper and reveal it later (offsetWidth
+		// is 0 until then, so the mount-time sync lands on a zero-width tab).
+		// --- Panel switch animation ---
+		let panelRefs = [];
+
+		let headingColEl = void 0;
+		let infoBarEl = void 0;
+
+		onMount(() => {
+			if (typeof window === 'undefined') return;
+			if (variant === 'panel') return; // panel variant renders statically, no entrance motion
+			if (prerendered) return; // already on screen (see the prop): don't fade it out and back in
+			if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+			// headingCircleColor gates this too, not just disableHeadingMotion: the
+			// slide only reads as meaningful when a contained shape (the circle) is
+			// visibly entering the frame from off-page -- bare text sliding in with
+			// no frame just looks like it jumped sideways (design call, 2026-09-12).
+			// A host with no circle gets the right default with no flag needed;
+			// disableHeadingMotion stays as an explicit override for the rarer case
+			// of a host with a circle that still doesn't want this motion.
+			if (headingColEl && !disableHeadingMotion && headingCircleColor) {
+				gsap.from(headingColEl.children, {
+					opacity: 0,
+					x: -200,
+					duration: 0.7,
+					ease: 'power2.out',
+					stagger: 0.22
+				});
+			}
+
+			if (tabsWrap) {
+				gsap.from(tabsWrap, {
+					opacity: 0,
+					y: -30,
+					duration: 0.6,
+					ease: 'power2.out',
+					delay: 0.2
+				});
+			}
+
+			if (infoBarEl) {
+				gsap.from(infoBarEl.children, {
+					opacity: 0,
+					y: 20,
+					duration: 0.6,
+					ease: 'power2.out',
+					stagger: 0.1,
+					delay: 0.4
+				});
+			}
+
+			const initialPanel = panelRefs[activeCat];
+
+			if (initialPanel) {
+				gsap.from(initialPanel.children, {
+					opacity: 0,
+					y: 24,
+					duration: 0.5,
+					ease: 'power2.out',
+					stagger: 0.04,
+					delay: 0.6
+				});
+			}
+		});
+
+		function revealPanel(panel, reduced) {
+			if (reduced) return;
+
+			gsap.fromTo(
+				panel.children,
+				{ opacity: 0, y: 16 },
+				// Per-item stagger, capped so long lists (hundreds of wines) still reveal in ~0.5s.
+				{
+					opacity: 1,
+					y: 0,
+					duration: 0.4,
+					ease: 'power2.out',
+					stagger: Math.min(0.03, 0.45 / Math.max(panel.children.length, 1))
+				}
+			);
+		}
+
+		function switchTab(index) {
+			if (index === activeCat) return;
+
+			const reduced = variant === 'panel' || typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			const currentPanel = panelRefs[activeCat];
+			const nextIndex = index;
+
+			activeTabVisual = nextIndex;
+
+			if (reduced || !currentPanel) {
+				activeCat = nextIndex;
+
+				return;
+			}
+
+			gsap.killTweensOf(currentPanel.children);
+
+			gsap.to(currentPanel.children, {
+				opacity: 0,
+				y: -12,
+				duration: 0.2,
+				ease: 'power1.in',
+				stagger: Math.min(0.015, 0.25 / Math.max(currentPanel.children.length, 1)),
+				onComplete: () => {
+					activeCat = nextIndex;
+
+					const nextPanel = panelRefs[nextIndex];
+
+					if (nextPanel) revealPanel(nextPanel, false);
+				}
+			});
+		}
+
+		// Left/Right move between tabs (wrapping), Home/End jump to the ends:
+		// the WAI-ARIA tabs pattern, with automatic activation.
+		function onTabKeydown(event, index) {
+			const last = categories.length - 1;
+
+			const next = event.key === 'ArrowRight'
+				? index === last ? 0 : index + 1
+				: event.key === 'ArrowLeft'
+					? index === 0 ? last : index - 1
+					: event.key === 'Home' ? 0 : event.key === 'End' ? last : null;
+
+			if (next === null) return;
+
+			event.preventDefault();
+			switchTab(next);
+			tabRefs[next]?.focus();
+		}
+
+		if (variant === 'panel') {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(`<section class="msp-root svelte-ssr-menu-section"><div class="msp-header svelte-ssr-menu-section"><div class="svelte-ssr-menu-section">`);
+
+			if (eyebrow) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<div class="msp-eyebrow svelte-ssr-menu-section"><span class="msp-eyebrow-line svelte-ssr-menu-section"></span> <span class="msp-eyebrow-text svelte-ssr-menu-section">${$.escape(eyebrow)}</span></div>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--> `);
+
+			$.element(
+				$$renderer,
+				headingTag(),
+				() => {
+					$$renderer.push(` class="msp-heading svelte-ssr-menu-section" id="menu-heading"`);
+				},
+				() => {
+					$$renderer.push(`${$.escape(title)}`);
+				}
+			);
+
+			$$renderer.push(` ${$.html('<slot name="intro"></slot>')}</div> `);
+
+			if (categories.length > 1) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<div class="msp-tabs svelte-ssr-menu-section" role="tablist" aria-labelledby="menu-heading"${$.attr('data-indicator-ready', indicatorReady ? '' : undefined)}><span class="msp-tab-indicator svelte-ssr-menu-section"${$.attr_style(indicatorStyle)} aria-hidden="true"></span> <!--[-->`);
+
+				const each_array = $.ensure_array_like(categories);
+
+				for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+					let cat = each_array[i];
+
+					$$renderer.push(`<button type="button"${$.attr_class('msp-tab svelte-ssr-menu-section', void 0, { 'msp-tab-active': i === activeTabVisual })}${$.attr('part', i === activeTabVisual ? 'tab tab-active' : 'tab')} role="tab"${$.attr('id', `tab-${i}`)}${$.attr('aria-selected', i === activeTabVisual)}${$.attr('aria-controls', `panel-${i}`)}${$.attr('tabindex', i === activeTabVisual ? 0 : -1)}>${$.escape(cat.label)}</button>`);
+				}
+
+				$$renderer.push(`<!--]--></div>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--></div> `);
+
+			if (info.length) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<div class="msp-info svelte-ssr-menu-section"><!--[-->`);
+
+				$.slot($$renderer, $$props, 'info', {}, () => {
+					$$renderer.push(`<!--[-->`);
+
+					const each_array_1 = $.ensure_array_like(info);
+
+					for (let k = 0, $$length = each_array_1.length; k < $$length; k++) {
+						let item = each_array_1[k];
+
+						$$renderer.push(`<div class="msp-info-item svelte-ssr-menu-section"><span class="msp-info-label svelte-ssr-menu-section">${$.escape(item.label)}</span> <span class="msp-info-value svelte-ssr-menu-section">${$.escape(item.value)}</span></div>`);
+					}
+
+					$$renderer.push(`<!--]-->`);
+				});
+
+				$$renderer.push(`<!--]--></div>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--> <!--[-->`);
+
+			const each_array_2 = $.ensure_array_like(categories);
+
+			for (let i = 0, $$length = each_array_2.length; i < $$length; i++) {
+				let cat = each_array_2[i];
+
+				$$renderer.push(`<div${$.attr_class('msp-grid svelte-ssr-menu-section', void 0, { 'msp-hidden': i !== activeCat })}${$.attr('role', categories.length > 1 ? 'tabpanel' : undefined)}${$.attr('id', `panel-${i}`)}${$.attr('aria-labelledby', categories.length > 1 ? `tab-${i}` : undefined)}>`);
+
+				if (cat.aside || cat.note) {
+					$$renderer.push('<!--[0-->');
+					$$renderer.push(`<div class="ms-cat-intro svelte-ssr-menu-section">`);
+
+					if (cat.aside) {
+						$$renderer.push('<!--[0-->');
+						$$renderer.push(`<p class="ms-cat-aside svelte-ssr-menu-section">${$.escape(cat.aside)}</p>`);
+					} else {
+						$$renderer.push('<!--[-1-->');
+					}
+
+					$$renderer.push(`<!--]--> `);
+
+					if (cat.note) {
+						$$renderer.push('<!--[0-->');
+						$$renderer.push(`<p class="ms-cat-note svelte-ssr-menu-section">${$.escape(cat.note)}</p>`);
+					} else {
+						$$renderer.push('<!--[-1-->');
+					}
+
+					$$renderer.push(`<!--]--></div>`);
+				} else {
+					$$renderer.push('<!--[-1-->');
+				}
+
+				$$renderer.push(`<!--]--> <!--[-->`);
+
+				const each_array_3 = $.ensure_array_like(rowsByCat()[i]);
+
+				for (let $$index_5 = 0, $$length = each_array_3.length; $$index_5 < $$length; $$index_5++) {
+					let row = each_array_3[$$index_5];
+
+					if (row.item) {
+						$$renderer.push('<!--[0-->');
+						$$renderer.push(`<div class="msp-item svelte-ssr-menu-section" part="item"><div class="msp-item-name svelte-ssr-menu-section">${$.escape(row.item.name)}</div> `);
+
+						if (row.item.badges?.length) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-badges svelte-ssr-menu-section"><!--[-->`);
+
+							const each_array_4 = $.ensure_array_like(row.item.badges);
+
+							for (let bi = 0, $$length = each_array_4.length; bi < $$length; bi++) {
+								let badge = each_array_4[bi];
+
+								$$renderer.push(`<span${$.attr_class('ms-badge svelte-ssr-menu-section', void 0, { 'ms-badge-accent': badge.tone === 'accent' })}>${$.escape(badge.label)}</span>`);
+							}
+
+							$$renderer.push(`<!--]--></div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> <div class="msp-item-desc svelte-ssr-menu-section">${$.escape(row.item.description)}</div> `);
+
+						if (row.item.notes?.length) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<ul class="ms-notes svelte-ssr-menu-section"><!--[-->`);
+
+							const each_array_5 = $.ensure_array_like(row.item.notes);
+
+							for (let ni = 0, $$length = each_array_5.length; ni < $$length; ni++) {
+								let note = each_array_5[ni];
+
+								$$renderer.push(`<li class="svelte-ssr-menu-section">${$.escape(note)}</li>`);
+							}
+
+							$$renderer.push(`<!--]--></ul>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> <div class="msp-item-footer svelte-ssr-menu-section"><div class="msp-item-price svelte-ssr-menu-section" part="item-price">${$.escape(row.item.price)}</div> `);
+
+						if (row.item.allergens && row.item.allergens.length) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-allergens svelte-ssr-menu-section"><!--[-->`);
+
+							const each_array_6 = $.ensure_array_like(row.item.allergens);
+
+							for (let ai = 0, $$length = each_array_6.length; ai < $$length; ai++) {
+								let id = each_array_6[ai];
+								const allergen = findAllergen(id);
+
+								if (allergen) {
+									$$renderer.push('<!--[0-->');
+									$$renderer.push(`<button type="button" class="ms-allergen svelte-ssr-menu-section"><img${$.attr('src', allergen.icon)}${$.attr('alt', allergen.label)} class="ms-allergen-icon svelte-ssr-menu-section" loading="lazy"/> <span class="ms-allergen-tip svelte-ssr-menu-section" role="tooltip">${$.escape(allergen.label)}</span></button>`);
+								} else {
+									$$renderer.push('<!--[-1-->');
+								}
+
+								$$renderer.push(`<!--]-->`);
+							}
+
+							$$renderer.push(`<!--]--></div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--></div></div>`);
+					} else {
+						$$renderer.push('<!--[-1-->');
+					}
+
+					$$renderer.push(`<!--]-->`);
+				}
+
+				$$renderer.push(`<!--]--></div>`);
+			}
+
+			$$renderer.push(`<!--]--> `);
+
+			if (footnote) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<p class="ms-footnote svelte-ssr-menu-section">${$.escape(footnote)}</p>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--></section>`);
+		} else {
+			$$renderer.push('<!--[-1-->');
+
+			$$renderer.push(`<section${$.attr_class('ms-root svelte-ssr-menu-section', void 0, {
+				'ms-align-left': headingAlign === 'left',
+				'ms-layout-split': layout === 'split',
+				'ms-has-circle': !!headingCircleColor,
+				'ms-columns-2': itemColumns === 2
+			})}><div class="ms-container svelte-ssr-menu-section"><div class="ms-header svelte-ssr-menu-section"><div class="ms-heading-col svelte-ssr-menu-section"><div class="ms-heading-block svelte-ssr-menu-section">`);
+
+			if (headingCircleColor) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<div class="ms-heading-circle svelte-ssr-menu-section"${$.attr_style(`background-color: ${headingCircleColor}`)}></div>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--> `);
+
+			if (topFlourishSrc) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<img${$.attr('src', topFlourishSrc)} alt="" class="ms-flourish svelte-ssr-menu-section"/>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--> `);
+
+			$.element(
+				$$renderer,
+				headingTag(),
+				() => {
+					$$renderer.push(` class="ms-heading svelte-ssr-menu-section" id="menu-heading"`);
+				},
+				() => {
+					$$renderer.push(`${$.html(`<slot name="heading-title"><span class="ms-heading-title">${escapeHtml(title)}</span></slot>`)} <div class="ms-heading-rule svelte-ssr-menu-section"></div> ${$.html(`<slot name="eyebrow"><span class="ms-heading-eyebrow">${escapeHtml(eyebrow)}</span></slot>`)}`);
+				}
+			);
+
+			$$renderer.push(` `);
+
+			if (tailFlourishSrc) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<img${$.attr('src', tailFlourishSrc)} alt="" class="ms-flourish ms-flourish-tail svelte-ssr-menu-section"/>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--></div> ${$.html('<slot name="intro"></slot>')} `);
+
+			if (pdfUrl) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<button type="button" class="ms-pdf-trigger svelte-ssr-menu-section">${$.escape(pdfLabel)} <span aria-hidden="true" class="svelte-ssr-menu-section">→</span></button>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--></div> <div class="ms-controls svelte-ssr-menu-section"><div class="ms-tabs svelte-ssr-menu-section" role="tablist" aria-labelledby="menu-heading"${$.attr('data-indicator-ready', indicatorReady ? '' : undefined)}><!--[-->`);
+
+			const each_array_7 = $.ensure_array_like(categories);
+
+			for (let i = 0, $$length = each_array_7.length; i < $$length; i++) {
+				let cat = each_array_7[i];
+
+				$$renderer.push(`<button type="button"${$.attr_class('ms-tab svelte-ssr-menu-section', void 0, { 'ms-tab-active': i === activeTabVisual })}${$.attr('part', i === activeTabVisual ? 'tab tab-active' : 'tab')} role="tab"${$.attr('id', `tab-${i}`)}${$.attr('aria-selected', i === activeTabVisual)}${$.attr('aria-controls', `panel-${i}`)}${$.attr('tabindex', i === activeTabVisual ? 0 : -1)}>${$.escape(cat.label)}</button>`);
+			}
+
+			$$renderer.push(`<!--]--> <span class="ms-tab-indicator svelte-ssr-menu-section"${$.attr_style(indicatorStyle)} aria-hidden="true"></span></div> `);
+
+			if ((groupFilter || countryFilter) && categories[activeCat]) {
+				$$renderer.push('<!--[0-->');
+
+				const cat = categories[activeCat];
+
+				if (groupFilter && groupsOf(cat).length > 1) {
+					$$renderer.push('<!--[0-->');
+					$$renderer.push(`<div class="ms-filters svelte-ssr-menu-section" part="filters"><button type="button"${$.attr_class('ms-filter svelte-ssr-menu-section', void 0, { 'ms-filter-active': activeGroup() === null })}>${$.escape(groupFilterAllLabel)}</button> <!--[-->`);
+
+					const each_array_8 = $.ensure_array_like(groupsOf(cat));
+
+					for (let $$index_8 = 0, $$length = each_array_8.length; $$index_8 < $$length; $$index_8++) {
+						let g = each_array_8[$$index_8];
+
+						$$renderer.push(`<button type="button"${$.attr_class('ms-filter svelte-ssr-menu-section', void 0, { 'ms-filter-active': activeGroup() === g })}>${$.escape(g)}</button>`);
+					}
+
+					$$renderer.push(`<!--]--></div>`);
+				} else {
+					$$renderer.push('<!--[-1-->');
+				}
+
+				$$renderer.push(`<!--]--> `);
+
+				if (countryFilter) {
+					$$renderer.push('<!--[0-->');
+
+					$$renderer.push(`<div${$.attr_class('ms-filters ms-filters-secondary svelte-ssr-menu-section', void 0, {
+						'ms-filters-hidden': groupFilter && activeGroup() === null || countriesOf(cat).length <= 1
+					})} part="filters"><!---->`);
+
+					{
+						$$renderer.push(`<button type="button"${$.attr_class('ms-filter svelte-ssr-menu-section', void 0, { 'ms-filter-active': activeCountry() === null })}>${$.escape(countryFilterAllLabel)}</button> <!--[-->`);
+
+						const each_array_9 = $.ensure_array_like(countriesOf(cat));
+
+						for (let $$index_9 = 0, $$length = each_array_9.length; $$index_9 < $$length; $$index_9++) {
+							let c = each_array_9[$$index_9];
+
+							$$renderer.push(`<button type="button"${$.attr_class('ms-filter svelte-ssr-menu-section', void 0, { 'ms-filter-active': activeCountry() === c })}>${$.escape(c)}</button>`);
+						}
+
+						$$renderer.push(`<!--]-->`);
+					}
+
+					$$renderer.push(`<!----></div>`);
+				} else {
+					$$renderer.push('<!--[-1-->');
+				}
+
+				$$renderer.push(`<!--]-->`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--> `);
+
+			if (info.length) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<div class="ms-info-bar svelte-ssr-menu-section"><!--[-->`);
+
+				$.slot($$renderer, $$props, 'info', {}, () => {
+					$$renderer.push(`<!--[-->`);
+
+					const each_array_10 = $.ensure_array_like(info);
+
+					for (let k = 0, $$length = each_array_10.length; k < $$length; k++) {
+						let item = each_array_10[k];
+
+						$$renderer.push(`<div class="ms-info-item svelte-ssr-menu-section"><span class="ms-info-label svelte-ssr-menu-section">${$.escape(item.label)}</span> <span class="ms-info-value svelte-ssr-menu-section">${$.escape(item.value)}</span></div>`);
+					}
+
+					$$renderer.push(`<!--]-->`);
+				});
+
+				$$renderer.push(`<!--]--></div>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--></div></div> <!--[-->`);
+
+			const each_array_11 = $.ensure_array_like(categories);
+
+			for (let i = 0, $$length = each_array_11.length; i < $$length; i++) {
+				let cat = each_array_11[i];
+
+				$$renderer.push(`<div${$.attr_class('ms-panel svelte-ssr-menu-section', void 0, { 'ms-panel-hidden': i !== activeCat })} role="tabpanel"${$.attr('id', `panel-${i}`)}${$.attr('aria-labelledby', `tab-${i}`)}>`);
+
+				if (cat.aside || cat.note) {
+					$$renderer.push('<!--[0-->');
+					$$renderer.push(`<div class="ms-cat-intro svelte-ssr-menu-section">`);
+
+					if (cat.aside) {
+						$$renderer.push('<!--[0-->');
+						$$renderer.push(`<p class="ms-cat-aside svelte-ssr-menu-section">${$.escape(cat.aside)}</p>`);
+					} else {
+						$$renderer.push('<!--[-1-->');
+					}
+
+					$$renderer.push(`<!--]--> `);
+
+					if (cat.note) {
+						$$renderer.push('<!--[0-->');
+						$$renderer.push(`<p class="ms-cat-note svelte-ssr-menu-section">${$.escape(cat.note)}</p>`);
+					} else {
+						$$renderer.push('<!--[-1-->');
+					}
+
+					$$renderer.push(`<!--]--></div>`);
+				} else {
+					$$renderer.push('<!--[-1-->');
+				}
+
+				$$renderer.push(`<!--]--> <!--[-->`);
+
+				const each_array_12 = $.ensure_array_like(rowsByCat()[i]);
+
+				for (let $$index_14 = 0,
+					$$length = each_array_12.length; $$index_14 < $$length; $$index_14++) {
+					let row = each_array_12[$$index_14];
+
+					if (row.group) {
+						$$renderer.push('<!--[0-->');
+						$$renderer.push(`<div class="ms-item-group svelte-ssr-menu-section">${$.escape(row.group)}</div>`);
+					} else if (row.item) {
+						$$renderer.push('<!--[1-->');
+						$$renderer.push(`<div class="ms-item svelte-ssr-menu-section" part="item"><div class="ms-item-name svelte-ssr-menu-section">${$.escape(row.item.name)}</div> `);
+
+						if (row.item.badges?.length) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-badges svelte-ssr-menu-section"><!--[-->`);
+
+							const each_array_13 = $.ensure_array_like(row.item.badges);
+
+							for (let bi = 0, $$length = each_array_13.length; bi < $$length; bi++) {
+								let badge = each_array_13[bi];
+
+								$$renderer.push(`<span${$.attr_class('ms-badge svelte-ssr-menu-section', void 0, { 'ms-badge-accent': badge.tone === 'accent' })}>${$.escape(badge.label)}</span>`);
+							}
+
+							$$renderer.push(`<!--]--></div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> `);
+
+						if (row.item.tagline) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-item-meta svelte-ssr-menu-section">${$.escape(row.item.tagline)}</div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> `);
+
+						if (row.item.country) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-item-meta svelte-ssr-menu-section">${$.escape(row.item.country)}</div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> `);
+
+						if (row.item.description) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-item-description svelte-ssr-menu-section">${$.escape(row.item.description)}</div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> `);
+
+						if (row.item.notes?.length) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<ul class="ms-notes svelte-ssr-menu-section"><!--[-->`);
+
+							const each_array_14 = $.ensure_array_like(row.item.notes);
+
+							for (let ni = 0, $$length = each_array_14.length; ni < $$length; ni++) {
+								let note = each_array_14[ni];
+
+								$$renderer.push(`<li class="svelte-ssr-menu-section">${$.escape(note)}</li>`);
+							}
+
+							$$renderer.push(`<!--]--></ul>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> <div class="ms-item-footer svelte-ssr-menu-section">`);
+
+						if (row.item.price) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-item-price svelte-ssr-menu-section" part="item-price">${$.escape(row.item.price)}</div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> `);
+
+						if (cartEnabled && row.item.id != null && row.item.priceValue != null) {
+							$$renderer.push('<!--[0-->');
+
+							const itemId = row.item.id;
+							const itemName = row.item.name;
+
+							$$renderer.push(`<div class="ms-qty svelte-ssr-menu-section" part="qty"><button type="button" class="ms-qty-btn svelte-ssr-menu-section"${$.attr('aria-label', `Remove one ${itemName}`)}><span class="svelte-ssr-menu-section">−</span></button> <span${$.attr_class('ms-qty-val svelte-ssr-menu-section', void 0, { 'ms-qty-pop': poppedId === itemId })}>${$.escape(qty[itemId] ?? 0)}</span> <button type="button" class="ms-qty-btn svelte-ssr-menu-section"${$.attr('aria-label', `Add one ${itemName}`)}><span class="svelte-ssr-menu-section">+</span></button></div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--> `);
+
+						if (row.item.allergens && row.item.allergens.length) {
+							$$renderer.push('<!--[0-->');
+							$$renderer.push(`<div class="ms-allergens svelte-ssr-menu-section"><!--[-->`);
+
+							const each_array_15 = $.ensure_array_like(row.item.allergens);
+
+							for (let ai = 0, $$length = each_array_15.length; ai < $$length; ai++) {
+								let id = each_array_15[ai];
+								const allergen = findAllergen(id);
+
+								if (allergen) {
+									$$renderer.push('<!--[0-->');
+									$$renderer.push(`<button type="button" class="ms-allergen svelte-ssr-menu-section"><img${$.attr('src', allergen.icon)}${$.attr('alt', allergen.label)} class="ms-allergen-icon svelte-ssr-menu-section" loading="lazy"/> <span class="ms-allergen-tip svelte-ssr-menu-section" role="tooltip">${$.escape(allergen.label)}</span></button>`);
+								} else {
+									$$renderer.push('<!--[-1-->');
+								}
+
+								$$renderer.push(`<!--]-->`);
+							}
+
+							$$renderer.push(`<!--]--></div>`);
+						} else {
+							$$renderer.push('<!--[-1-->');
+						}
+
+						$$renderer.push(`<!--]--></div></div>`);
+					} else {
+						$$renderer.push('<!--[-1-->');
+					}
+
+					$$renderer.push(`<!--]-->`);
+				}
+
+				$$renderer.push(`<!--]--></div>`);
+			}
+
+			$$renderer.push(`<!--]--> `);
+
+			if (footnote) {
+				$$renderer.push('<!--[0-->');
+				$$renderer.push(`<p class="ms-footnote svelte-ssr-menu-section">${$.escape(footnote)}</p>`);
+			} else {
+				$$renderer.push('<!--[-1-->');
+			}
+
+			$$renderer.push(`<!--]--></div></section>`);
+		}
+
+		$$renderer.push(`<!--]--> `);
+
+		if (pdfUrl) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(`<dialog class="ms-pdf-dialog svelte-ssr-menu-section"><div class="ms-pdf-dialog-header svelte-ssr-menu-section"><span class="ms-pdf-dialog-title svelte-ssr-menu-section">${$.escape(pdfLabel)}</span> <div class="ms-pdf-dialog-actions svelte-ssr-menu-section"><a${$.attr('href', pdfUrl)} target="_blank" rel="noreferrer noopener" class="ms-pdf-open-link svelte-ssr-menu-section">${$.escape(openInNewTabLabel)}</a> <button type="button" class="ms-pdf-close svelte-ssr-menu-section"${$.attr('aria-label', closeAriaLabel)}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="svelte-ssr-menu-section"><path d="M6 6l12 12M18 6L6 18" stroke-linecap="round" class="svelte-ssr-menu-section"></path></svg></button></div></div> <iframe${$.attr('src', pdfUrl)}${$.attr('title', pdfLabel)} class="ms-pdf-frame svelte-ssr-menu-section"></iframe></dialog>`);
+		} else {
+			$$renderer.push('<!--[-1-->');
+		}
+
+		$$renderer.push(`<!--]-->`);
+	});
+}