@functionalcms/svelte-components 3.5.20 → 4.0.0-pre

package/dist/components/layouts/DefaultLayout.svelte

@@ -2,9 +2,9 @@
 	import { page } from '$app/state';
 	import type { Snippet } from 'svelte';
 
-	interface DefaultLayoutProps {
-		headerIsSticky: boolean;
-		canonicalUrl: string;
+	interface Props {
+		headerIsSticky?: boolean;
+		canonicalUrl?: string;
 		header?: Snippet;
 		footer?: Snippet;
 		stickyFooter?: Snippet;
@@ -18,7 +18,7 @@
 		stickyFooter,
 		headerIsSticky = false,
 		canonicalUrl = ''
-	}: DefaultLayoutProps = $props();
+	}: Props = $props();
 
 	let headerCss = $derived(headerIsSticky ? 'sticky' : '');
 </script>
@@ -53,7 +53,7 @@
 <style>
 	footer.sticky {
 		flex-shrink: 0;
-		background-color: var(--functional-light-modelight);
+		background-color: var(--light-modelight);
 		flex-shrink: 0;
 	}
 </style>

package/dist/components/layouts/DefaultLayout.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
-interface DefaultLayoutProps {
-    headerIsSticky: boolean;
-    canonicalUrl: string;
+interface Props {
+    headerIsSticky?: boolean;
+    canonicalUrl?: string;
     header?: Snippet;
     footer?: Snippet;
     stickyFooter?: Snippet;
     children: Snippet;
 }
-declare const DefaultLayout: import("svelte").Component<DefaultLayoutProps, {}, "">;
+declare const DefaultLayout: import("svelte").Component<Props, {}, "">;
 type DefaultLayout = ReturnType<typeof DefaultLayout>;
 export default DefaultLayout;

package/dist/components/layouts/SimpleFooter.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	interface SimpleFooterProps {
+	interface Props {
 		companyName: string;
-		motto: string;
+		motto?: string;
 		logoUrl?: string;
 	}
 
-	let { companyName = '', motto = '', logoUrl }: SimpleFooterProps = $props();
+	let { companyName = '', motto = '', logoUrl = '' }: Props = $props();
 </script>
 
-<aside class="items-center grid-flow-col">
+<aside class="grid-flow-col items-center">
 	<img src={logoUrl} alt={companyName} />
 	<p>{motto}</p>
 	<p>Copyright © 2025 - All right reserved by {companyName}</p>

package/dist/components/layouts/SimpleFooter.svelte.d.ts

@@ -1,8 +1,8 @@
-interface SimpleFooterProps {
+interface Props {
     companyName: string;
-    motto: string;
+    motto?: string;
     logoUrl?: string;
 }
-declare const SimpleFooter: import("svelte").Component<SimpleFooterProps, {}, "">;
+declare const SimpleFooter: import("svelte").Component<Props, {}, "">;
 type SimpleFooter = ReturnType<typeof SimpleFooter>;
 export default SimpleFooter;

package/dist/components/layouts/Well.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils.js';
+	import { AlignItmes, Justify, Orientation } from '../Styling.js';
+
+	interface Props {
+		css?: string;
+		orientation?: Orientation;
+		justify?: Justify;
+		alignItems?: AlignItmes;
+		children: Snippet;
+	}
+	let {
+		children,
+		css = '',
+		orientation = Orientation.Column,
+		justify = Justify.Start,
+		alignItems = AlignItmes.Start
+	}: Props = $props();
+
+	let klasses = cn(
+		'flex',
+		`${orientation}`,
+		`${justify}`,
+		`${alignItems}`,
+		css ? css : ''
+	);
+</script>
+
+<div class={klasses}>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		width: var(--mobile-content-width, 95%);
+		margin: var(--mobile-content-margin, var(--fluid-8));
+	}
+
+	@media (min-width: 960px) {
+		div {
+			width: var(--content-width, 95%);
+			margin: var(--content-margin, var(--fluid-8));
+		}
+	}
+</style>

package/dist/components/layouts/Well.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { AlignItmes, Justify, Orientation } from '../Styling.js';
+interface Props {
+    css?: string;
+    orientation?: Orientation;
+    justify?: Justify;
+    alignItems?: AlignItmes;
+    children: Snippet;
+}
+declare const Well: import("svelte").Component<Props, {}, "">;
+type Well = ReturnType<typeof Well>;
+export default Well;

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { Orientation, Placement } from '../Styling.js';
 	import ColumnMenu from './NavigationItems.svelte';
 	import { HeaderNavigationItem, defaultCss } from './Menu.js';
@@ -30,4 +30,4 @@
 	<div aria-expanded={expanded}>
 		<ColumnMenu {localPages} {orientation} css={cssClasses} />
 	</div>
-{/if}
+{/if} -->

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

@@ -1,10 +1,8 @@
-import { Orientation, Placement } from '../Styling.js';
-import { HeaderNavigationItem } from './Menu.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -13,19 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CollapsibleMenu: $$__sveltets_2_IsomorphicComponent<{
-    css?: {
-        buttonCss: string[];
-        container: string[];
-        link: string[];
-    };
-    contentPosition?: Placement;
-    orientation?: Orientation;
-    localPages?: Array<HeaderNavigationItem>;
-}, {
+declare const CollapsibleMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    handle: {};
-}, {}, string>;
+}, {}, {}, string>;
 type CollapsibleMenu = InstanceType<typeof CollapsibleMenu>;
 export default CollapsibleMenu;

package/dist/components/menu/DynamicMenu.svelte

@@ -1,27 +1,39 @@
 <script lang="ts">
-	import { HeaderNavigationItem, selectVisible, defaultCss } from './Menu.js';
-	import { isAuthenticated } from './authentication.js';
-	import { page } from '$app/stores';
-	import { mergedClasses } from '../CssHelper.js';
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { HeaderNavigationItem, isAuthenticated, selectVisible } from './types.js';
+	import { page } from '$app/state';
 
-	export let css: { container: string[] } = { container: [] };
-
-	const cssClasses = {...defaultCss, ...css}
+	interface Props {
+		mobile: Snippet<[Array<HeaderNavigationItem>]>;
+		desktop: Snippet<[Array<HeaderNavigationItem>]>;
+		localPages: Array<HeaderNavigationItem>;
+		css?: { container: string };
+	}
 
-	export let localPages: Array<HeaderNavigationItem> = [];
+	let {
+		mobile: mobile,
+		desktop: desktop,
+		css = { container: "" },
+		localPages = []
+	}: Props = $props();
 
-	$: pagesVisiblity = isAuthenticated($page);
-	$: visibleNavItems = selectVisible(localPages, pagesVisiblity);
+	let pagesVisiblity = $derived(isAuthenticated(page));
+	let visibleNavItems = $derived(selectVisible(localPages, pagesVisiblity));
 
-	const klasses = mergedClasses('flex', 'flex-dynamic-row', cssClasses.container);
+	let klasses = $derived(cn('flex', 'flex-dynamic-row', css.container));
 </script>
 
 <nav class={klasses}>
 	<div class="mobile">
-		<slot name="mobile" pages={visibleNavItems} />
+		{#if mobile}
+			{@render mobile(visibleNavItems)}
+		{/if}
 	</div>
 	<div class="desktop">
-		<slot name="desktop" pages={visibleNavItems} />
+		{#if desktop}
+			{@render desktop(visibleNavItems)}
+		{/if}
 	</div>
 </nav>
 

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

@@ -1,31 +1,13 @@
-import { HeaderNavigationItem } from './Menu.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DynamicMenu: $$__sveltets_2_IsomorphicComponent<{
+import type { Snippet } from 'svelte';
+import { HeaderNavigationItem } from './types.js';
+interface Props {
+    mobile: Snippet<[Array<HeaderNavigationItem>]>;
+    desktop: Snippet<[Array<HeaderNavigationItem>]>;
+    localPages: Array<HeaderNavigationItem>;
     css?: {
-        container: string[];
-    };
-    localPages?: Array<HeaderNavigationItem>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    mobile: {
-        pages: any[];
+        container: string;
     };
-    desktop: {
-        pages: any[];
-    };
-}, {}, string>;
-type DynamicMenu = InstanceType<typeof DynamicMenu>;
+}
+declare const DynamicMenu: import("svelte").Component<Props, {}, "">;
+type DynamicMenu = ReturnType<typeof DynamicMenu>;
 export default DynamicMenu;

package/dist/components/menu/HamburgerMenu.svelte

@@ -1,38 +1,46 @@
 <script lang="ts">
-	import { HeaderNavigationItem, defaultCss } from './Menu.js';
+	import { HeaderNavigationItem, defaultCss } from './types.js';
 	import { afterNavigate } from '$app/navigation';
-	import { Orientation, Placement } from '../Styling.js';
-	import ColumnMenu from './NavigationItems.svelte';
-	import { mergedClasses } from '../CssHelper.js';
-	// import Drawer from '../agnostic/Drawer/Drawer.svelte';
-	import Button from '../agnostic/Button/Button.svelte';
+	import { cn } from '../../utils.js';
+	import { Placement } from '../Styling.js';
+	import Button from '../form/Button.svelte';
+	import Drawer from '../presentation/Drawer.svelte';
+	import Menu from './ListMenu.svelte';
 
-	export let css: { buttonCss: string[]; container: string[]; link: string[] } = defaultCss;
-
-	export let noBorder: boolean = false;
-	export let placement: Placement = Placement.Start;
-	export let localPages: Array<HeaderNavigationItem> = [];
-
-	const cssClasses = { ...defaultCss, ...css };
+	interface Css {
+		buttonCss: string;
+		container: string;
+		link: string;
+	}
+	interface Props {
+		css?: Css;
+		noBorder?: boolean;
+		placement?: Placement;
+		localPages: Array<HeaderNavigationItem>;
+	}
 
-	let drawer: any = null;
-	const assignDrawerRef = (ev: any) => {
-		drawer = ev.detail.instance;
-	};
-	afterNavigate(() => drawer?.hide());
+	let {
+		localPages = [],
+		css = { buttonCss: '', container: '', link: '' },
+		placement = Placement.Start
+	}: Props = $props();
 
-	const buttonCss = mergedClasses('hamburger-handle', noBorder, cssClasses.buttonCss);
+	let isOpen = $state(false);
+	let buttonCss = $derived(cn('hamburger-handle', css.buttonCss));
 </script>
 
 <Button
 	type="button"
-	data-a11y-dialog-show="hamburger-menu"
 	mode="primary"
-	noBorder
 	css={buttonCss}
 >
 	&#9776;
 </Button>
+
+<Drawer {placement} open={isOpen} clickAway={() => isOpen != isOpen}>
+	<Menu {localPages} {css}>
+	</Menu>
+</Drawer>
 <!-- <Drawer
 	id="hamburger-menu"
 	drawerRoot="#drawer-root"

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

@@ -1,29 +1,16 @@
-import { HeaderNavigationItem } from './Menu.js';
+import { HeaderNavigationItem } from './types.js';
 import { Placement } from '../Styling.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Css {
+    buttonCss: string;
+    container: string;
+    link: string;
 }
-declare const HamburgerMenu: $$__sveltets_2_IsomorphicComponent<{
-    css?: {
-        buttonCss: string[];
-        container: string[];
-        link: string[];
-    };
+interface Props {
+    css?: Css;
     noBorder?: boolean;
     placement?: Placement;
-    localPages?: Array<HeaderNavigationItem>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type HamburgerMenu = InstanceType<typeof HamburgerMenu>;
+    localPages: Array<HeaderNavigationItem>;
+}
+declare const HamburgerMenu: import("svelte").Component<Props, {}, "">;
+type HamburgerMenu = ReturnType<typeof HamburgerMenu>;
 export default HamburgerMenu;

package/dist/components/menu/ListMenu.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { type HeaderNavigationItem, isSelected } from './types.js';
+	import { Orientation } from '../Styling.js';
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+
+	interface CssProps {
+		container?: string;
+		link?: string;
+	}
+
+	interface Props {
+		localPages: Array<HeaderNavigationItem>;
+		subItemRender?: Snippet<[Array<HeaderNavigationItem>]>;
+		css?: CssProps;
+		orientation?: Orientation;
+		includeSubpagesForSelect?: boolean;
+	}
+
+	let {
+		subItemRender = undefined,
+		css = { container: '', link: '' },
+		localPages = [],
+		orientation = Orientation.Column,
+		includeSubpagesForSelect = true
+	}: Props = $props();
+
+	let containerCss = cn('flex', orientation, css.container ?? '');
+	let linkCss = cn(css.link ?? '');
+</script>
+
+<ul class={containerCss} role="menu" aria-label="menu">
+	{#each localPages as pageItem}
+		<li
+			data-selected={isSelected(includeSubpagesForSelect, page, pageItem)}
+			class={linkCss}
+			role="none"
+		>
+			<span class="screenreader-only">Navigate to {pageItem.name}</span>
+			<a href={pageItem.path} role="menuitem">
+				{pageItem.name}
+			</a>
+
+			{#if subItemRender}
+				{@render subItemRender(pageItem.subItems ?? [])}
+			{/if}
+		</li>
+	{/each}
+</ul>
+
+<style>
+</style>

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

@@ -0,0 +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 {
+    localPages: Array<HeaderNavigationItem>;
+    subItemRender?: Snippet<[Array<HeaderNavigationItem>]>;
+    css?: CssProps;
+    orientation?: Orientation;
+    includeSubpagesForSelect?: boolean;
+}
+declare const ListMenu: import("svelte").Component<Props, {}, "">;
+type ListMenu = ReturnType<typeof ListMenu>;
+export default ListMenu;

package/dist/components/menu/{Menu.d.ts → types.d.ts}

@@ -1,3 +1,4 @@
+import type { Page } from "@sveltejs/kit";
 type ClickAction = () => void;
 export declare enum Visiblity {
     Always = 0,
@@ -18,4 +19,5 @@ export declare const defaultCss: {
     container: never[];
     link: never[];
 };
+export declare function isAuthenticated(page: Page): Visiblity.Authenticated | Visiblity.NotAuthenticated;
 export {};

package/dist/components/menu/{Menu.js → types.js}

@@ -28,3 +28,8 @@ export const defaultCss = {
     container: [],
     link: []
 };
+export function isAuthenticated(page) {
+    const isAuthenticated = page?.data?.session != null;
+    const visibility = isAuthenticated ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
+    return visibility;
+}