@functionalcms/svelte-components 4.2.19 → 4.2.22

package/dist/components/menu/HamburgerMenu.svelte

@@ -36,12 +36,12 @@
 	const close = () => (isOpen = false);
 </script>
 
-<Button type="button" isPrimary css={buttonCss} onclick={() => toggleDrawer()}>&#9776;</Button>
+<Button type="button" isPrimary css={buttonCss} click={() => toggleDrawer()}>&#9776;</Button>
 
 <Drawer {placement} open={isOpen} clickAway={() => isOpen != isOpen}>
 	<div class="flex flex-row justify-between">
-		<ListMenu {localPages} {css} onclick={() => close()}></ListMenu>
-		<Button css="close" onclick={() => close()}>X</Button>
+		<ListMenu {localPages} {css} click={() => close()}></ListMenu>
+		<Button css="close" click={() => close()}>X</Button>
 	</div>
 </Drawer>
 

package/dist/components/menu/ListMenu.svelte

@@ -12,21 +12,23 @@
 
 	interface Props {
 		localPages: Array<HeaderNavigationItem>;
-		subItemRender?: Snippet<[Array<HeaderNavigationItem>]>;
-		css?: CssProps;
-		orientation?: Orientation;
-		includeSubpagesForSelect?: boolean;
-		onclick: () => void;
+		itemRender: Snippet<[HeaderNavigationItem]>;
+		subItemRender: Snippet<[Array<HeaderNavigationItem>]>;
+		css: CssProps;
+		orientation: Orientation;
+		includeSubpagesForSelect: boolean;
+		click: () => void;
 	}
 
 	let {
 		subItemRender = undefined,
+		itemRender = undefined, 
 		css = { container: '', link: '' },
 		localPages = [],
 		orientation = Orientation.Column,
 		includeSubpagesForSelect = true,
-		onclick = () => {}
-	}: Props = $props();
+		click = () => {}
+	}: Partial<Props> = $props();
 
 	let containerCss = cn('flex', orientation, css.container ?? '');
 	let linkCss = cn(css.link ?? '');
@@ -39,10 +41,14 @@
 			class={linkCss}
 			role="none"
 		>
+			{#if itemRender}
+				{@render itemRender(pageItem)}
+			{:else}
 			<span class="screenreader-only">Navigate to {pageItem.name}</span>
-			<a href={pageItem.path} role="menuitem" onclick={onclick}>
+			<a href={pageItem.path} role="menuitem" onclick={click}>
 				{pageItem.name}
 			</a>
+			{/if}
 
 			{#if subItemRender}
 				{@render subItemRender(pageItem.subItems ?? [])}

package/dist/components/menu/ListMenu.svelte.d.ts

@@ -1,18 +1,17 @@
 import { type HeaderNavigationItem } from './types.js';
 import { Orientation } from '../Styling.js';
 import type { Snippet } from 'svelte';
-interface CssProps {
-    container?: string;
-    link?: string;
-}
-interface Props {
+declare const ListMenu: import("svelte").Component<Partial<{
     localPages: Array<HeaderNavigationItem>;
-    subItemRender?: Snippet<[Array<HeaderNavigationItem>]>;
-    css?: CssProps;
-    orientation?: Orientation;
-    includeSubpagesForSelect?: boolean;
-    onclick: () => void;
-}
-declare const ListMenu: import("svelte").Component<Props, {}, "">;
+    itemRender: Snippet<[HeaderNavigationItem]>;
+    subItemRender: Snippet<[Array<HeaderNavigationItem>]>;
+    css: {
+        container?: string;
+        link?: string;
+    };
+    orientation: Orientation;
+    includeSubpagesForSelect: boolean;
+    click: () => void;
+}>, {}, "">;
 type ListMenu = ReturnType<typeof ListMenu>;
 export default ListMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.2.19",
+	"version": "4.2.22",
 	"watch": {
 		"build": {
 			"patterns": [