@forgebuild/hotal-ui 0.23.205 → 0.24.1

package/dist/index.d.ts

@@ -110,6 +110,11 @@ export interface BookingFlowElement extends HTMLElement {
 	stripeAppearance?: Record<string, unknown>;
 }
 
+export interface MenuItemBadge {
+	label: string;
+	tone?: 'accent';
+}
+
 export interface MenuItem {
 	/** Needed to add this item to a cart (see MenuSectionElement.cartEnabled)
 	 *  -- an item missing this never gets a quantity stepper. */
@@ -125,11 +130,15 @@ export interface MenuItem {
 	group?: string;
 	country?: string;
 	allergens?: string[];
+	badges?: MenuItemBadge[];
+	notes?: string[];
 }
 
 export interface MenuCategory {
 	label: string;
 	items: MenuItem[];
+	aside?: string;
+	note?: string;
 }
 
 export interface MenuCartItem {
@@ -185,6 +194,41 @@ export interface MenuSectionElement extends HTMLElement {
 	 *  quantities a host changed elsewhere, same as
 	 *  ProshopCatalogueElement's own `initial`. */
 	initial?: { id: string; quantity: number }[];
+	/** Set by renderMenuSection(); skips the entrance tweens over content that is already on screen. */
+	prerendered?: boolean;
+	/** Small print under the panels (e.g. a consumer advisory). */
+	footnote?: string;
+	/** 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. */
+	headingLevel?: 1 | 2 | 3;
+}
+
+/** The serialisable props of <menu-section>, as renderMenuSection() (from
+ *  '@forgebuild/hotal-ui/server') takes them. */
+export interface MenuSectionProps {
+	title?: string;
+	eyebrow?: string;
+	categories?: MenuCategory[];
+	info?: MenuInfoItem[];
+	allergens?: Allergen[];
+	pdfUrl?: string;
+	pdfLabel?: string;
+	topFlourishSrc?: string;
+	tailFlourishSrc?: string;
+	headingCircleColor?: string;
+	headingAlign?: 'center' | 'left';
+	layout?: 'stacked' | 'split';
+	variant?: 'default' | 'panel';
+	disableHeadingMotion?: boolean;
+	itemColumns?: 2 | 3;
+	openInNewTabLabel?: string;
+	closeAriaLabel?: string;
+	groupFilter?: boolean;
+	countryFilter?: boolean;
+	groupFilterAllLabel?: string;
+	countryFilterAllLabel?: string;
+	footnote?: string;
+	headingLevel?: 1 | 2 | 3;
 }
 
 export interface EventInquiry {

package/dist/server/index.d.ts

@@ -0,0 +1,11 @@
+import type { MenuSectionProps } from '../index';
+
+export interface PrerenderedElement {
+	/** Attributes for the host element, unescaped -- let your templating escape them. Includes `prerendered`. */
+	attributes: Record<string, string>;
+	/** `<template shadowrootmode="open">…</template>`: put it inside the element, alongside any slotted light-DOM children. */
+	shadowRoot: string;
+}
+
+/** Prerenders `<menu-section>` for a host page's HTML. See README → Prerendering. */
+export function renderMenuSection(props?: MenuSectionProps): PrerenderedElement;

package/dist/server/index.js

@@ -0,0 +1,34 @@
+// Server renderers: prerender a hotal-ui element into a declarative shadow
+// root, so the host page ships real content in its HTML and the element's
+// client script only has to take over. Built into dist/server/ by
+// scripts/build-server.mjs; imported as '@forgebuild/hotal-ui/server'.
+import { render } from 'svelte/server';
+import MenuSection from './menu-section.js';
+import { css as menuSectionCss, props as menuSectionProps } from './menu-section.meta.js';
+
+// Props -> the attributes the element reads when it upgrades, from the
+// element's own prop table (read out of the compiled component), so a new
+// prop needs no change here. The client renders the same markup from these
+// that the server printed.
+function attributesFor(props, table) {
+	const attributes = {};
+	for (const [name, value] of Object.entries(props)) {
+		const spec = table[name];
+		if (!spec || value === undefined || value === null || typeof value === 'function') continue;
+		if (spec.type === 'Boolean') {
+			if (value) attributes[spec.attribute] = '';
+		} else {
+			attributes[spec.attribute] = spec.type === 'Object' || spec.type === 'Array' ? JSON.stringify(value) : String(value);
+		}
+	}
+	return attributes;
+}
+
+export function renderMenuSection(props = {}) {
+	const all = { ...props, prerendered: true };
+	const { body } = render(MenuSection, { props: all });
+	return {
+		attributes: attributesFor(all, menuSectionProps),
+		shadowRoot: `<template shadowrootmode="open"><style>${menuSectionCss}</style>${body}</template>`,
+	};
+}