@functionalcms/svelte-components 4.8.19 → 4.9.1

package/dist/components/form/Dropzone.svelte

@@ -19,6 +19,7 @@
 		/** The maximum size of a file in bytes */
 		maxFileSize?: number;
 		children?: Snippet<[]>;
+		css: string;
 		/** Called when a file does not meet the upload criteria (size, or type) */
 		onFileRejected?: (opts: { reason: FileRejectedReason; file: File }) => void;
 
@@ -59,7 +60,7 @@
 		onUpload,
 		onFileRejected,
 		accept,
-		class: className,
+		class: css,
 		...rest
 	}: FileDropZoneProps = $props();
 

package/dist/components/form/Dropzone.svelte.d.ts

@@ -13,6 +13,7 @@ export interface FileDropZoneProps extends Omit<HTMLInputAttributes, 'multiple'>
     /** The maximum size of a file in bytes */
     maxFileSize?: number;
     children?: Snippet<[]>;
+    css: string;
     /** Called when a file does not meet the upload criteria (size, or type) */
     onFileRejected?: (opts: {
         reason: FileRejectedReason;

package/dist/components/integrations/EasyTools.svelte

@@ -13,7 +13,7 @@
 		window.addEventListener('message', (e) => {
 			!!e.data.frameHeight &&
 				e.data.pricingUuid ===  handle&&
-				(document.getElementById(handle).style.height = e.data.frameHeight);
+				(document.getElementById(handle)?.style?.height = e.data.frameHeight);
 		});
 	}
 </script>

package/dist/components/layouts/Tabs.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import { NavigationDirection, Tab, TabSizes } from './tabs.js';
+
+	interface Props {
+		tabs: Array<Tab>; //` = [];
+		size?: TabSizes; //` = '';
+		isBorderless?: boolean; //` = false;
+		isVerticalOrientation?: boolean; //` = false;
+		isSkinned?: boolean; //` = true;
+	}
+
+	let {
+		tabs,
+		size = TabSizes.empty,
+		isBorderless,
+		isVerticalOrientation,
+		isSkinned,
+	}: Props = $props();
+
+	let dynamicComponentRefs = $state([]); //https://svelte.dev/tutorial/component-this
+	let tabButtonRefs: Array<HTMLButtonElement> = $state([]);
+	let activePanel = $state(null);
+
+	const baseStyles = () => `tabs ${isVerticalOrientation ? 'tabs-vertical' : ''}`;
+
+	const selectTab = (index: number) => {
+		tabs = tabs.map((tab, i) => {
+			tab.isActive = index === i ? true : false;
+			return tab;
+		});
+	};
+	let activeTabs = tabs.filter((tab) => tab.isActive);
+	if (activeTabs.length === 0) {
+		selectTab(0);
+	}
+
+	let tablistClasses = $derived(
+		cn(isSkinned ? 'tab-list' : 'tab-list-base', isBorderless ? `tab-borderless` : '')
+	);
+
+	let tabButtonClasses = $derived((tab: any) => {
+		const klasses = [
+			`tab-item`,
+			`tab-button`,
+			tab.isActive ? 'active' : '',
+			size === TabSizes.large ? 'tab-button-large' : '',
+			size === TabSizes.xlarge ? 'tab-button-xlarge' : ''
+		];
+		return klasses.filter((klass) => klass.length).join(' ');
+	});
+
+	const focusTab = (index: number, direction: NavigationDirection = NavigationDirection.asc) => {
+		// console.log("tabButtonRefs: ", tabButtonRefs);
+		// console.log("dynamicComponentRefs: ", dynamicComponentRefs);
+		/**
+		 * direction is optional because we only need that when we're arrow navigating.
+		 * If they've hit ENTER|SPACE we're focusing the current item. If HOME focus(0).
+		 * If END focus(tabButtons.length - 1)...and so on.
+		 */
+		let i = index;
+		if (direction === NavigationDirection.asc) {
+			i += 1;
+		} else if (direction === NavigationDirection.desc) {
+			i -= 1;
+		}
+
+		// Circular navigation
+		//
+		// If we've went beyond "start" circle around to last
+		if (i < 0) {
+			i = tabs.length - 1;
+		} else if (i >= tabs.length) {
+			// We've went beyond "last" so circle around to first
+			i = 0;
+		}
+
+		/**
+		 * Figure out at run-time whether this was build with dynamicComponentRefs (consumer
+		 * used their own tabButtonComponent), or tabButtonRefs (we generated the buttons here)
+		 */
+
+		let nextTab: any;
+		if (tabButtonRefs.length) {
+			nextTab = tabButtonRefs[i];
+		} else if (dynamicComponentRefs.length) {
+			// Same logic as above, but we're using the binding to component instance
+			nextTab = dynamicComponentRefs[i];
+		}
+		// Edge case: We hit a tab button that's been disabled. If so, we recurse, but
+		// only if we've been supplied a `direction`. Otherwise, nothing left to do.
+		if ((nextTab.isDisabled && nextTab.isDisabled()) || (nextTab.disabled && direction)) {
+			// Retry with new `i` index going in same direction
+			focusTab(i, direction);
+		} else {
+			// Nominal case is to just focs next tab :)
+			nextTab.focus();
+		}
+	};
+
+	const handleKeyDown = (ev: any, index: number) => {
+		switch (ev.key) {
+			case 'Up': // These first cases are IEEdge :(
+			case 'ArrowUp':
+				if (isVerticalOrientation) {
+					focusTab(index, NavigationDirection.desc);
+				}
+				break;
+			case 'Down':
+			case 'ArrowDown':
+				if (isVerticalOrientation) {
+					focusTab(index, NavigationDirection.asc);
+				}
+				break;
+			case 'Left':
+			case 'ArrowLeft':
+				if (!isVerticalOrientation) {
+					focusTab(index, NavigationDirection.desc);
+				}
+				break;
+			case 'Right':
+			case 'ArrowRight':
+				if (!isVerticalOrientation) {
+					focusTab(index, NavigationDirection.asc);
+				}
+				break;
+			case 'Home':
+			case 'ArrowHome':
+				focusTab(0);
+				break;
+			case 'End':
+			case 'ArrowEnd':
+				focusTab(tabs.length - 1);
+				break;
+			case 'Enter':
+			case 'Space':
+				focusTab(index);
+				selectTab(index);
+				break;
+			default:
+				return;
+		}
+		ev.preventDefault();
+	};
+</script>
+
+<div class={baseStyles()}>
+	<div
+		class={tablistClasses}
+		role="tablist"
+		aria-orientation={isVerticalOrientation ? 'vertical' : 'horizontal'}
+	>
+		{#each tabs as tab, i}
+			<!-- {#if tab.tabButtonComponent}
+				<svelte:component
+					this={tab.tabButtonComponent}
+					bind:this={dynamicComponentRefs[i]}
+					on:click={() => selectTab(i)}
+					on:keydown={(e) => handleKeyDown(e, i)}
+					disabled={isDisabled || disabledOptions.includes(tab.title) || undefined}
+					classes={tabButtonClasses(tab)}
+					role="tab"
+					ariaControls={tab.ariaControls}
+					isActive={tab.isActive}
+				>
+					{tab.title}
+				</svelte:component>
+			{:else} -->
+			<button
+				bind:this={tabButtonRefs[i]}
+				on:click={() => selectTab(i)}
+				on:keydown={(e) => handleKeyDown(e, i)}
+				disabled={tab.isDisabled}
+				class={tabButtonClasses(tab)}
+				role="tab"
+				aria-controls={tab.ariaControls}
+				tabindex={tab.isActive ? 0 : -1}
+				aria-selected={tab.isActive}
+			>
+				{tab.title}
+			</button>
+			<!-- {/if} -->
+		{/each}
+	</div>
+	{#if activePanel}
+		{@render activePanel?.tabPanelComponent()}
+	{/if}
+	<!-- {#each tabs as panel}
+		{#if panel.isActive}
+			{@render panel?.tabPanelComponent()}
+		
+	{/each} -->
+</div>
+
+<style>
+	/* TODO -- should we use these for .nav? */
+	.tabs {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tabs-vertical {
+		flex-direction: row;
+	}
+
+	.tab-list,
+	.tab-list-base {
+		display: flex;
+		flex-flow: row wrap;
+		flex: 0 0 auto;
+	}
+
+	.tab-list,
+	.tab-skinned {
+		padding-inline-start: 0;
+		margin-block-end: 0;
+		border-bottom: var(--agnostic-tabs-border-size, 1px) solid
+			var(--agnostic-tabs-bgcolor, var(--agnostic-gray-light));
+		transition-property: all;
+		transition-duration: var(--agnostic-timing-medium);
+	}
+
+	/* In vertical orientation we want our tab buttons to stack */
+	.tabs-vertical .tab-list,
+	.tabs-vertical .tab-base {
+		flex-direction: column;
+		border: none;
+	}
+
+	/* We can ask for .tab-button which is base and skin combined, or, we can utilize .tab-button-base
+    if we'd like to only blank out buttons but otherwise skin ourselves. */
+	.tab-button,
+	.tab-button-base {
+		/* Blank out the button */
+		background-color: transparent;
+		border: 0;
+		border-radius: 0;
+		box-shadow: none;
+
+		/* This fixes issue where upon focus, the a11y focus ring's box shadow would get tucked beneat
+      adjacent tab buttons; relative creates new stacking context https://stackoverflow.com/a/31276836 */
+		position: relative;
+
+		/* Reset margins/padding; this will get added back if it's a "skinned" tab button. However, we have
+      a use case where a tab-button is wrapping a faux button. For that, we don't want margins/padding because
+      the faux button provides that. */
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+		padding-block-start: 0;
+		padding-block-end: 0;
+		padding-inline-start: 0;
+		padding-inline-end: 0;
+	}
+
+	.tab-button,
+	.tab-button-skin {
+		display: block;
+
+		/* Since this is a "skinned tab button" we add our padding here to previously "reset" .tab-button-base */
+		padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
+		padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
+		padding-inline-start: var(--agnostic-side-padding, 0.75rem);
+		padding-inline-end: var(--agnostic-side-padding, 0.75rem);
+		font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
+		font-weight: var(--agnostic-btn-font-weight, 400);
+		font-size: var(--agnostic-btn-font-size, 1rem);
+
+		/* this can be overriden, but it might mess with the balance of the button heights across variants */
+		line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
+		color: var(--agnostic-tabs-primary, var(--agnostic-primary));
+		text-decoration: none;
+		transition:
+			color var(--agnostic-timing-fast) ease-in-out,
+			background-color var(--agnostic-timing-fast) ease-in-out,
+			border-color var(--agnostic-timing-fast) ease-in-out;
+	}
+
+	/* We pull back the 2nd subsequent tabs to remove the double border */
+	.tab-button:not(:first-of-type),
+	.tab-button-base:not(:first-of-type) {
+		margin-inline-start: -1px;
+	}
+
+	.tab-borderless {
+		border: none !important;
+	}
+
+	.tab-button-large {
+		padding-block-start: calc(var(--agnostic-input-side-padding) * 1.25);
+		padding-block-end: calc(var(--agnostic-input-side-padding) * 1.25);
+		padding-inline-start: calc(var(--agnostic-input-side-padding) * 1.75);
+		padding-inline-end: calc(var(--agnostic-input-side-padding) * 1.75);
+	}
+
+	.tab-button-xlarge {
+		padding-block-start: calc(var(--agnostic-input-side-padding) * 2);
+		padding-block-end: calc(var(--agnostic-input-side-padding) * 2);
+		padding-inline-start: calc(var(--agnostic-input-side-padding) * 3);
+		padding-inline-end: calc(var(--agnostic-input-side-padding) * 3);
+	}
+
+	.tab-item.tab-button {
+		margin-block-end: -1px;
+		background: 0 0;
+		border: 1px solid transparent;
+		border-top-left-radius: var(--agnostic-tabs-radius, 0.25rem);
+		border-top-right-radius: var(--agnostic-tabs-radius, 0.25rem);
+	}
+
+	.tab-item.tab-button.active {
+		color: var(--agnostic-dark);
+		background-color: var(--agnostic-light);
+		border-color: var(--agnostic-gray-light) var(--agnostic-gray-light) var(--agnostic-light);
+	}
+
+	.tab-item:hover,
+	.tab-button:focus {
+		border-color: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-width)
+			var(--agnostic-gray-light);
+		isolation: isolate;
+		z-index: 1;
+		cursor: pointer;
+	}
+
+	.tabs-vertical .tab-button {
+		border: none;
+	}
+
+	.tab-button:disabled {
+		color: var(--agnostic-tabs-disabled-bg, var(--agnostic-gray-mid-dark));
+		background-color: transparent;
+		border-color: transparent;
+		opacity: 80%;
+	}
+
+	/**
+     * Elects to additively use the AgnosticUI custom focus ring alongside the border
+     * we already add above. It just makes things look more consistent across components.
+     * For example, when we tab into the panels and links within.
+     */
+	.tab-button-base:focus,
+	.tab-panel:focus,
+	.tab-button:focus {
+		box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
+
+		/* Needed for High Contrast mode */
+		outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
+			var(--agnostic-focus-ring-outline-color);
+		transition: box-shadow var(--agnostic-timing-fast) ease-out;
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.tab-button,
+		.tab-button-base:focus,
+		.tab-button:focus,
+		.tab-panel:focus,
+		.tab-list,
+		.tab-skinned {
+			transition-duration: 0.001ms !important;
+		}
+	}
+</style>

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

@@ -1,26 +1,11 @@
-export default Tabs;
-type Tabs = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import { Tab, TabSizes } from './tabs.js';
+interface Props {
+    tabs: Array<Tab>;
+    size?: TabSizes;
+    isBorderless?: boolean;
+    isVerticalOrientation?: boolean;
+    isSkinned?: boolean;
 }
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

@@ -1,10 +1,21 @@
 import type { Snippet } from "svelte";
 export interface Tab {
     title: string;
-    tabPanelComponent: Snippet;
+    tabId?: string;
+    tabHref?: string;
+    tabPanelComponent?: Snippet;
     tabButtonComponent?: Snippet;
     isActive?: boolean;
     ariaControls?: string;
+    isDisabled?: boolean;
+}
+export declare enum TabSizes {
+    'small' = 0,
+    'large' = 1,
+    'xlarge' = 2,
+    empty = ""
+}
+export declare enum NavigationDirection {
+    'asc' = 0,
+    'desc' = 1
 }
-export type TabSizes = 'small' | 'large' | 'xlarge' | '';
-export type NavigationDirection = 'asc' | 'desc';

package/dist/components/layouts/tabs.js

@@ -1,2 +1,13 @@
 ;
-export {};
+export var TabSizes;
+(function (TabSizes) {
+    TabSizes[TabSizes["small"] = 0] = "small";
+    TabSizes[TabSizes["large"] = 1] = "large";
+    TabSizes[TabSizes["xlarge"] = 2] = "xlarge";
+    TabSizes["empty"] = "";
+})(TabSizes || (TabSizes = {}));
+export var NavigationDirection;
+(function (NavigationDirection) {
+    NavigationDirection[NavigationDirection["asc"] = 0] = "asc";
+    NavigationDirection[NavigationDirection["desc"] = 1] = "desc";
+})(NavigationDirection || (NavigationDirection = {}));

package/package.json

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