@functionalcms/svelte-components 4.9.0 → 4.9.1

package/dist/components/layouts/Tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from '../../utils.ts';
-	import { NavigationDirection, Tab, TabSizes } from './tabs.ts';
+	import { cn } from '../../utils.js';
+	import { NavigationDirection, Tab, TabSizes } from './tabs.js';
 
 	interface Props {
 		tabs: Array<Tab>; //` = [];
@@ -20,6 +20,7 @@
 
 	let dynamicComponentRefs = $state([]); //https://svelte.dev/tutorial/component-this
 	let tabButtonRefs: Array<HTMLButtonElement> = $state([]);
+	let activePanel = $state(null);
 
 	const baseStyles = () => `tabs ${isVerticalOrientation ? 'tabs-vertical' : ''}`;
 
@@ -181,11 +182,14 @@
 			<!-- {/if} -->
 		{/each}
 	</div>
-	{#each tabs as panel}
+	{#if activePanel}
+		{@render activePanel?.tabPanelComponent()}
+	{/if}
+	<!-- {#each tabs as panel}
 		{#if panel.isActive}
 			{@render panel?.tabPanelComponent()}
-		{/if}
-	{/each}
+		
+	{/each} -->
 </div>
 
 <style>

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

@@ -1,4 +1,4 @@
-import { Tab, TabSizes } from './tabs.ts';
+import { Tab, TabSizes } from './tabs.js';
 interface Props {
     tabs: Array<Tab>;
     size?: TabSizes;

package/dist/components/layouts/tabs.d.ts

@@ -1,7 +1,9 @@
 import type { Snippet } from "svelte";
 export interface Tab {
     title: string;
-    tabPanelComponent: Snippet;
+    tabId?: string;
+    tabHref?: string;
+    tabPanelComponent?: Snippet;
     tabButtonComponent?: Snippet;
     isActive?: boolean;
     ariaControls?: string;

package/package.json

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