@functionalcms/svelte-components 2.38.1 → 2.38.5

package/dist/components/Link.svelte

@@ -290,6 +290,7 @@ on the side padding. As such, these have a good bit less then regular buttons. *
   flex-direction: row;
 }</style>
 <script>import { AlignItmes, ComponentSize, Justify, Orientation } from "./Styling.js";
+import { mergedClasses } from "./CssHelper.js";
 export let css = "";
 export let href = "";
 export let isPrimary = false;
@@ -310,7 +311,7 @@ export let orientation = Orientation.Row;
 export let role = "";
 $: isSmall = size === ComponentSize.Small;
 $: isLarge = size === ComponentSize.Large;
-$: klasses = [
+$: klasses = mergedClasses(
   isPrimary ? "btn-primary" : "",
   isDisabled ? "disabled" : "",
   isBordered ? "btn-bordered" : "",
@@ -329,7 +330,7 @@ $: klasses = [
   `${justify}`,
   `${alignItems}`,
   css ? css : "btn"
-].filter((c) => c).join(" ");
+);
 </script>
 <a class={klasses} href={href} role={role}>
     <slot />

package/dist/components/menu/CollapsibleMenu.svelte

@@ -3,7 +3,7 @@ import { Orientation, Placement } from "../Styling.js";
 import ColumnMenu from "./NavigationItems.svelte";
 import { HeaderNavigationItem, defaultCss } from "./Menu.js";
 import { mergedClasses } from "../CssHelper.js";
-export let css;
+export let css = defaultCss;
 export let contentPosition = Placement.End;
 export let orientation = Orientation.Column;
 export let localPages = [];
@@ -25,10 +25,4 @@ $: buttonCss = mergedClasses(cssClasses.buttonCss);
 	<div aria-expanded={expanded}>
 		<ColumnMenu {localPages} {orientation} css={cssClasses} />
 	</div>
-{/if}
-
-<style>
-	div {
-		margin: var(--fluid-8);
-	}
-</style>
+{/if}

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

@@ -3,7 +3,7 @@ import { Orientation, Placement } from '../Styling.js';
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css: {
+        css?: {
             buttonCss: string[];
             container: string[];
             link: string[];

package/dist/components/menu/DynamicMenu.svelte

@@ -2,7 +2,7 @@
 import { isAuthenticated } from "./authentication.js";
 import { page } from "$app/stores";
 import { mergedClasses } from "../CssHelper.js";
-export let css;
+export let css = defaultCss;
 const cssClasses = { ...defaultCss, ...css };
 export let localPages = [];
 $: pagesVisiblity = isAuthenticated($page);

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css: {
+        css?: {
             container: string[];
         };
         localPages?: Array<HeaderNavigationItem>;

package/dist/components/menu/HamburgerMenu.svelte

@@ -4,7 +4,7 @@ import { Drawer, Button } from "agnostic-svelte";
 import { Orientation, Placement } from "../Styling.js";
 import ColumnMenu from "./NavigationItems.svelte";
 import { mergedClasses } from "../CssHelper.js";
-export let css;
+export let css = defaultCss;
 export let noBorder = false;
 export let placement = Placement.Start;
 export let localPages = [];

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

@@ -3,7 +3,7 @@ import { HeaderNavigationItem } from './Menu.js';
 import { Placement } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css: {
+        css?: {
             buttonCss: string[];
             container: string[];
             link: string[];

package/dist/components/menu/NavigationItems.svelte

@@ -3,7 +3,7 @@ import { Orientation } from "../Styling.js";
 import Link from "../Link.svelte";
 import { page } from "$app/stores";
 import { mergedClasses } from "../CssHelper.js";
-export let css;
+export let css = defaultCss;
 export let localPages = [];
 export let orientation = Orientation.Column;
 export let includeSubpagesForSelect = true;
@@ -14,9 +14,9 @@ const linkCss = mergedClasses(cssClasses.link);
 
 <ul class={containerCss} role="menu" aria-roledescription="">
 	{#each localPages as pageItem}
-		<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)} role="presentation">
+		<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)} class={linkCss} role="presentation">
 			<span class="screenreader-only">Navigate to {pageItem.name}</span>
-			<Link href={pageItem.path} css={linkCss} role="menuItem">
+			<Link href={pageItem.path} role="menuItem">
 				{pageItem.name}
 			</Link>
 		</li>
@@ -24,7 +24,7 @@ const linkCss = mergedClasses(cssClasses.link);
 </ul>
 
 <style>
-	ul {
+	/* ul {
 		background: var(--functional-menu-background);
 		margin: var(--functional-menu-margin);
 		padding: var(--functional-menu-padding);
@@ -65,5 +65,5 @@ const linkCss = mergedClasses(cssClasses.link);
 		border-bottom: var(--functional-menu-item-selected-border-bottom);
 		border-left: var(--functional-menu-item-selected-border-left);
 		border-radius: var(--functional-menu-item-selected-radius, var(--functional-radius));
-	}
+	} */
 </style>

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

@@ -3,7 +3,7 @@ import { type HeaderNavigationItem } from './Menu.js';
 import { Orientation } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css: {
+        css?: {
             container: string[];
             link: string[];
         };

package/package.json

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