@functionalcms/svelte-components 3.2.5 → 3.3.0

package/dist/components/Well.svelte

@@ -1,34 +1,40 @@
-<style>
-    div {
-        width: var(--functional-mobile-content-width, 95%);
-        margin: var(--functional-mobile-content-margin, var(--fluid-8));
-    }
-
-    @media (min-width: 960px) {
-        div {
-            width: var(--functional-content-width, 95%);
-            margin: var(--functional-content-margin, var(--fluid-8));
-        }    
-    }
-</style>
-
-<script lang='ts'>
-    import { AlignItmes,  Justify, Orientation } from "./Styling.js"
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { mergedClasses } from './CssHelper.js';
+	import { AlignItmes, Justify, Orientation } from './Styling.js';
 
-    export let css: string = ""
-    export let orientation: Orientation = Orientation.Column
-    export let justify: Justify = Justify.Start
-    export let alignItems: AlignItmes = AlignItmes.Start
+	interface WellProps {
+		css: string;
+		orientation: Orientation;
+		justify: Justify;
+		alignItems: AlignItmes;
+        mainRender: Snippet;
+	}
+	let {
+        mainRender,
+		css = '',
+		orientation = Orientation.Column,
+		justify = Justify.Start,
+		alignItems = AlignItmes.Start
+	}: WellProps = $props();
 
-    $: klasses = [
-        'flex',
-        `${orientation}`,
-        `${justify}`,
-        `${alignItems}`,
-        css ? css : ''
-    ].filter(c => c).join(" ")
+	let klasses = mergedClasses('flex', `${orientation}`, `${justify}`, `${alignItems}`, css ? css : '');
 </script>
 
 <div class={klasses}>
-    <slot />
-</div>
+	{@render mainRender()}
+</div>
+
+<style>
+	div {
+		width: var(--functional-mobile-content-width, 95%);
+		margin: var(--functional-mobile-content-margin, var(--fluid-8));
+	}
+
+	@media (min-width: 960px) {
+		div {
+			width: var(--functional-content-width, 95%);
+			margin: var(--functional-content-margin, var(--fluid-8));
+		}
+	}
+</style>

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

@@ -1,22 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import { AlignItmes, Justify, Orientation } from "./Styling.js";
 declare const __propDef: {
-    props: {
-        css?: string;
-        orientation?: Orientation;
-        justify?: Justify;
-        alignItems?: AlignItmes;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type WellProps = typeof __propDef.props;
+type WellProps_ = typeof __propDef.props;
+export { WellProps_ as WellProps };
 export type WellEvents = typeof __propDef.events;
 export type WellSlots = typeof __propDef.slots;
-export default class Well extends SvelteComponentTyped<WellProps, WellEvents, WellSlots> {
+export default class Well extends SvelteComponentTyped<WellProps_, WellEvents, WellSlots> {
 }
-export {};

package/dist/components/form/Input.svelte

@@ -1,46 +1,6 @@
 <script lang="ts">
 	import { mergedClasses } from '../CssHelper';
 
-	// Looks like the way to propogate boilerplate events is to
-	// just declare in template like on:blur on:focus and so on
-	// https://github.com/sveltejs/svelte/issues/585
-	// Looks like this is what smelte is doing:
-	// https://github.com/matyunya/smelte/blob/master/src/components/TextField/TextField.svelte
-	// export let label = '';
-	// export let id = '';
-	// export let labelCss = '';
-	// export let isLabelHidden = false;
-	// export let helpText = '';
-	// export let invalidText = '';
-	// export let hasLeftAddon = false;
-	// export let hasRightAddon = false;
-	// export let isInvalid = false;
-	// export let isInline = false;
-	// export let isRounded = false;
-	// export let isDisabled = undefined;
-	// export let css = '';
-	// export let isSkinned = true;
-	// export let isUnderlinedWithBackground = false;
-	// export let isUnderlined = false;
-	// export let size: 'small' | 'large' | '' = '';
-	// export let type:
-	// 	| 'text'
-	// 	| 'textarea'
-	// 	| 'email'
-	// 	| 'search'
-	// 	| 'password'
-	// 	| 'tel'
-	// 	| 'number'
-	// 	| 'url'
-	// 	| 'month'
-	// 	| 'time'
-	// 	| 'week'
-	// 	| 'date'
-	// 	| 'datetime-local'
-	// 	| 'color' = 'text';
-
-	// export let value = '';
-
 	let {
 		label = '',
 		id = '',

package/dist/components/layouts/DefaultLayout.svelte

@@ -1,10 +1,26 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import type { Snippet } from 'svelte';
 
-	export let headerIsSticky: boolean = false;
-	export let canonicalUrl: string = '';
+	interface DefaultLayoutProps {
+		headerIsSticky: boolean;
+		canonicalUrl: string;
+		header?: Snippet;
+		footer?: Snippet;
+		stickyFooter?: Snippet;
+		main: Snippet;
+	}
+
+	let {
+		main, 
+		header,
+		footer,
+		stickyFooter,
+		headerIsSticky = false,
+		canonicalUrl = ''
+	}: DefaultLayoutProps = $props();
 
-	$: headerCss = headerIsSticky ? 'sticky' : '';
+	let headerCss = $derived(headerIsSticky ? 'sticky' : '');
 </script>
 
 <svelte:head>
@@ -12,25 +28,25 @@
 </svelte:head>
 
 <div id="defaultLayout">
-	{#if $$slots.header}
+	{#if header}
 		<header class={headerCss}>
-			<slot name="header" />
+			{@render header()}
 		</header>
 	{/if}
 	<main>
-		<slot />
+		{@render main()}
 	</main>
-	{#if $$slots.footer}
+	{#if footer}
 		<footer>
-			<slot name="footer" />
+			{@render footer()}
 		</footer>
 	{/if}
 	<div id="drawer-root"></div>
 </div>
 
-{#if $$slots.sticky_footer}
+{#if stickyFooter}
 	<footer class="sticky">
-		<slot name="sticky_footer" />
+		{@render stickyFooter()}
 	</footer>
 {/if}
 

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

@@ -1,22 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        headerIsSticky?: boolean;
-        canonicalUrl?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        header: {};
-        default: {};
-        footer: {};
-        sticky_footer: {};
-    };
+    slots: {};
 };
-export type DefaultLayoutProps = typeof __propDef.props;
+type DefaultLayoutProps_ = typeof __propDef.props;
+export { DefaultLayoutProps_ as DefaultLayoutProps };
 export type DefaultLayoutEvents = typeof __propDef.events;
 export type DefaultLayoutSlots = typeof __propDef.slots;
-export default class DefaultLayout extends SvelteComponentTyped<DefaultLayoutProps, DefaultLayoutEvents, DefaultLayoutSlots> {
+export default class DefaultLayout extends SvelteComponentTyped<DefaultLayoutProps_, DefaultLayoutEvents, DefaultLayoutSlots> {
 }
-export {};

package/dist/components/layouts/Meta.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
-    export let title = "";
-    export let description = "";
-    export let keywords = "";
-    export let robots = "index, follow";
-    export let charset = "UTF-8";
-    export let viewport = "width=device-width, initial-scale=1.0";
+	interface MetaProps {
+		title: string;
+		description: string;
+		keywords: string;
+		robots: string;
+		charset: string;
+		viewport: string;
+	}
+
+	let {
+		title = '',
+		description = '',
+		keywords = '',
+		robots = 'index, follow',
+		charset = 'UTF-8',
+		viewport = 'width=device-width, initial-scale=1.0'
+	}: MetaProps = $props();
 </script>
 
 <svelte:head>
-    <title>{title}</title>
-    <meta name="description" content={description}>
-    <meta name="keywords" content={keywords}>
-    <meta name="robots" content={robots}>
-    <meta name="viewport" content={viewport}>
-    <meta charset={charset}>
-</svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<meta name="keywords" content={keywords} />
+	<meta name="robots" content={robots} />
+	<meta name="viewport" content={viewport} />
+	<meta {charset} />
+</svelte:head>

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

@@ -1,21 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        title?: string;
-        description?: string;
-        keywords?: string;
-        robots?: string;
-        charset?: string;
-        viewport?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type MetaProps = typeof __propDef.props;
+type MetaProps_ = typeof __propDef.props;
+export { MetaProps_ as MetaProps };
 export type MetaEvents = typeof __propDef.events;
 export type MetaSlots = typeof __propDef.slots;
-export default class Meta extends SvelteComponentTyped<MetaProps, MetaEvents, MetaSlots> {
+export default class Meta extends SvelteComponentTyped<MetaProps_, MetaEvents, MetaSlots> {
 }
-export {};

package/dist/components/layouts/SimpleFooter.svelte

@@ -1,28 +1,23 @@
-<style>
-    aside {
-        text-align: center;
-        font-size: smaller;
-    }
-</style>
+<script lang="ts">
+	interface SimpleFooterProps {
+		companyName: string;
+		motto: string;
+		logoUrl?: string;
+	}
 
-<script lang='ts'>
-    /**
-     * @type {string}
-     */
-    export let companyName = ""
-    /**
-     * @type {string}
-     */
-    export let motto = ""
-	/**
-	 * @type {string}
-	 */
-	 export let logoUrl: string
+	let { companyName = '', motto = '', logoUrl }: SimpleFooterProps = $props();
 </script>
 
 <aside class="items-center grid-flow-col">
-    <img src={logoUrl} alt={companyName} />
-    <p>{motto}</p>
-    <p>Copyright © 2024 - All right reserved by {companyName}</p>
-    <p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
-</aside>
+	<img src={logoUrl} alt={companyName} />
+	<p>{motto}</p>
+	<p>Copyright © 2025 - All right reserved by {companyName}</p>
+	<p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
+</aside>
+
+<style>
+	aside {
+		text-align: center;
+		font-size: smaller;
+	}
+</style>

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

@@ -1,24 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        /**
-             * @type {string}
-             */ companyName?: string;
-        /**
-             * @type {string}
-             */ motto?: string;
-        /**
-             * @type {string}
-             */ logoUrl: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type SimpleFooterProps = typeof __propDef.props;
+type SimpleFooterProps_ = typeof __propDef.props;
+export { SimpleFooterProps_ as SimpleFooterProps };
 export type SimpleFooterEvents = typeof __propDef.events;
 export type SimpleFooterSlots = typeof __propDef.slots;
-export default class SimpleFooter extends SvelteComponentTyped<SimpleFooterProps, SimpleFooterEvents, SimpleFooterSlots> {
+export default class SimpleFooter extends SvelteComponentTyped<SimpleFooterProps_, SimpleFooterEvents, SimpleFooterSlots> {
 }
-export {};

package/dist/components/layouts/Tracker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let domain;
+	let { domain }: { domain: string } = $props();
 </script>
 
 <svelte:head>

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

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        domain: any;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -1,15 +1,23 @@
-<style></style>
-
 <script lang="ts">
-	export let leftCss: string = 'w50p'
-	export let rightCss: string = 'w50p'
+	import type { Snippet } from "svelte";
+
+	interface TwoColumnLayoutProps {
+		leftRender: Snippet;
+		rightRender: Snippet;
+		leftCss: string;
+		rightCss: string;
+	}
+
+	let { leftRender, rightRender, leftCss = 'w50p', rightCss = 'w50p' } = $props();
 </script>
 
 <section class="flex flex-row-dynamic fw">
 	<div class="left {leftCss}">
-        <slot name="left" />
-    </div>
-    <div class="right {rightCss}">
-        <slot name="right" />
-    </div>
-</section>
+		{@render leftRender()}
+	</div>
+	<div class="right {rightCss}">
+		{@render rightRender()}
+	</div>
+</section>
+
+<style></style>

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

@@ -1,16 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        leftCss?: string;
-        rightCss?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        left: {};
-        right: {};
-    };
+    slots: {};
 };
 export type TwoColumnsLayoutProps = typeof __propDef.props;
 export type TwoColumnsLayoutEvents = typeof __propDef.events;

package/dist/components/menu/NavigationItems.svelte

@@ -20,7 +20,7 @@
 <ul class={containerCss} role="menu" aria-label="menu">
 	{#each localPages as pageItem}
 		<li
-			aria-current={isSelected(includeSubpagesForSelect, page, pageItem)}
+			data-selected={isSelected(includeSubpagesForSelect, page, pageItem)}
 			class={linkCss}
 			role="none"
 		>
@@ -28,7 +28,7 @@
 			<a href={pageItem.path} role="menuitem">
 				{pageItem.name}
 			</a>
-			{#if pageItem.subItems?.length > 0}
+			{#if pageItem?.subItems?.length > 0}
 				<slot name="subItems" subpages={pageItem.subItems} />
 			{/if}
 		</li>

package/dist/components/{agnostic/Card → presentation}/Card.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { mergedClasses } from '../../CssHelper';
-	import { Orientation } from '../../Styling';
+	import { mergedClasses } from '../CssHelper';
+	import type { Snippet } from 'svelte';
+	import { Orientation } from '../Styling';
 
 	interface Props {
+		mainRender: Snippet;
 		isAnimated?: boolean;
 		isSkinned?: boolean;
 		isStacked?: boolean;
@@ -16,6 +18,7 @@
 	}
 
 	const {
+		mainRender,
 		isAnimated = false,
 		isSkinned = true,
 		isStacked = false,
@@ -42,8 +45,8 @@
 	);
 </script>
 
-<div class={klasses} on:click on:focus on:blur>
-	<slot />
+<div class={klasses}>
+	{@render mainRender()}
 </div>
 
 <style>

package/dist/components/{agnostic/Card → presentation}/Card.svelte.d.ts

@@ -2,15 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type CardProps = typeof __propDef.props;
 export type CardEvents = typeof __propDef.events;

package/dist/components/presentation/Gallery.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-	import Card from '../agnostic/Card/Card.svelte';
+	import Card from './Card.svelte';
 	import type { ShowItem } from './ShowItem.js';
 	import { AlignItmes, Justify, Orientation } from '../Styling.js';
 	import { mergedClasses } from '../CssHelper';
+	import type { Snippet } from 'svelte';
 	 
 	interface GaleryProps {
 		items: Array<ShowItem>;
-		renderItem: any;
-		css: string;
+		renderItem: Snippet<[ShowItem]>;
 		justify: Justify;
 		alignItems: AlignItmes;
 		orientation: Orientation;
 		restProps: any;
+		css: string;
 	}
 
 	let {

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { default as AvatarGroup } from './components/agnostic/Avatar/AvatarGroup
 export { default as Breadcrumb } from './components/agnostic/Breadcrumb/Breadcrumb.svelte';
 export { default as Button } from './components/agnostic/Button/Button.svelte';
 export { default as ButtonGroup } from './components/agnostic/Button/ButtonGroup.svelte';
-export { default as Card } from './components/agnostic/Card/Card.svelte';
+export { default as Card } from './components/presentation/Card.svelte';
 export { default as ChoiceInput } from './components/agnostic/ChoiceInput/ChoiceInput.svelte';
 export { default as Close } from './components/agnostic/Close/Close.svelte';
 export { default as Dialog } from './components/agnostic/Dialog/Dialog.svelte';

package/dist/index.js

@@ -31,7 +31,7 @@ export { default as AvatarGroup } from './components/agnostic/Avatar/AvatarGroup
 export { default as Breadcrumb } from './components/agnostic/Breadcrumb/Breadcrumb.svelte';
 export { default as Button } from './components/agnostic/Button/Button.svelte';
 export { default as ButtonGroup } from './components/agnostic/Button/ButtonGroup.svelte';
-export { default as Card } from './components/agnostic/Card/Card.svelte';
+export { default as Card } from './components/presentation/Card.svelte';
 export { default as ChoiceInput } from './components/agnostic/ChoiceInput/ChoiceInput.svelte';
 export { default as Close } from './components/agnostic/Close/Close.svelte';
 export { default as Dialog } from './components/agnostic/Dialog/Dialog.svelte';

package/package.json

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