@functionalcms/svelte-components 4.2.17 → 4.2.19

package/dist/components/layouts/Tabs.svelte

@@ -0,0 +1,356 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { NavigationDirection, Tab, TabSizes } from './tabs.js';
+
+	interface Props {
+		size: TabSizes;
+		tabs: Tab[];
+		isBorderless: boolean;
+		isVerticalOrientation: boolean;
+		isDisabled: boolean;
+		disabledOptions: string[];
+		isSkinned: boolean;
+	}
+
+	let {
+		size = '',
+		tabs = [],
+		isBorderless = false,
+		isVerticalOrientation = false,
+		isDisabled = false,
+		disabledOptions = [],
+		isSkinned = true
+	}: Partial<Props> = $props();
+
+	let dynamicComponentRefs = $state([]);
+	let tabButtonRefs = $state([]);
+	let baseStyles = $derived(`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) => tab.isActive);
+	if (activeTabs.length === 0) {
+		selectTab(0);
+	}
+
+	let tablistClasses = $derived(
+		cn(isSkinned ? 'tab-list' : 'tab-list-base', isBorderless ? `tab-borderless` : '')
+	);
+
+	let tabButtonClasses = (tab: Tab) => {
+		return cn(
+			`tab-item`,
+			`tab-button`,
+			tab.isActive ? 'active' : '',
+			size === 'large' ? 'tab-button-large' : '',
+			size === 'xlarge' ? 'tab-button-xlarge' : ''
+		);
+	};
+
+	const focusTab = (index: number, direction?: NavigationDirection) => {
+		let i = index;
+		if (direction === 'asc') {
+			i += 1;
+		} else if (direction === '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;
+		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: KeyboardEvent, index: number) => {
+		switch (ev.key) {
+			case 'Up': // These first cases are IEEdge :(
+			case 'ArrowUp':
+				if (isVerticalOrientation) {
+					focusTab(index, 'desc');
+				}
+				break;
+			case 'Down':
+			case 'ArrowDown':
+				if (isVerticalOrientation) {
+					focusTab(index, 'asc');
+				}
+				break;
+			case 'Left':
+			case 'ArrowLeft':
+				if (!isVerticalOrientation) {
+					focusTab(index, 'desc');
+				}
+				break;
+			case 'Right':
+			case 'ArrowRight':
+				if (!isVerticalOrientation) {
+					focusTab(index, '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();
+	};
+
+	let activePanel = $derived(tabs.find((x) => x.isActive));
+</script>
+
+<div class={baseStyles}>
+	<div
+		class={tablistClasses}
+		role="tablist"
+		aria-orientation={isVerticalOrientation ? 'vertical' : 'horizontal'}
+	>
+		{#each tabs as tab, i}
+			{#if tab.tabButtonComponent}
+				{@render tab.tabButtonComponent()}
+				<!-- <svelte:component
+					this={tab.tabButtonComponent}
+					bind:this={dynamicComponentRefs[i]}
+					onclick={() => selectTab(i)}
+					onkeydown={(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
+					onclick={() => selectTab(i)}
+					onkeydown={(e) => handleKeyDown(e, i)}
+					disabled={isDisabled || disabledOptions.includes(tab.title) || undefined}
+					class={tabButtonClasses(tab)}
+					role="tab"
+					aria-controls={tab.ariaControls}
+					tabindex={tab.isActive ? 0 : -1}
+					aria-selected={tab.isActive}
+				>
+					{tab.title}
+				</button>
+			{/if}
+		{/each}
+	</div>
+	{@render activePanel?.tabPanelComponent()}
+	<!-- {#each tabs as panel}
+		{#if panel.isActive}
+			<svelte:component this={panel.tabPanelComponent} tabindex="0" />
+		{/if}
+	{/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

@@ -0,0 +1,12 @@
+import type { Tab, TabSizes } from './tabs.js';
+declare const Tabs: import("svelte").Component<Partial<{
+    size: TabSizes;
+    tabs: Tab[];
+    isBorderless: boolean;
+    isVerticalOrientation: boolean;
+    isDisabled: boolean;
+    disabledOptions: string[];
+    isSkinned: boolean;
+}>, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

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

package/dist/components/layouts/tabs.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/components/menu/types.d.ts

@@ -12,7 +12,7 @@ export declare class HeaderNavigationItem {
     visiblity: Visiblity;
     subItems?: HeaderNavigationItem[];
 }
-export declare function selectVisible(pages: Array<any>, visiblity: Visiblity): any[];
+export declare function selectVisible(pages: Array<HeaderNavigationItem>, visiblity: Visiblity): HeaderNavigationItem[];
 export declare function isSelected(includeSubpagesForSelect: boolean, page: any, item: HeaderNavigationItem): any;
 export declare const defaultCss: {
     buttonCss: never[];

package/dist/index.d.ts

@@ -5,7 +5,8 @@ export { default as TwoColumnsLayout } from './components/layouts/TwoColumnsLayo
 export { default as Well } from './components/layouts/Well.svelte';
 export { default as Banner } from './components/layouts/Banner.svelte';
 export { default as SimpleFooter } from './components/layouts/SimpleFooter.svelte';
-export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
+export { default as Tabs } from './components/layouts/Tabs.svelte';
+export type { Tab, TabSizes, NavigationDirection } from './components/layouts/tabs.js';
 export { Justify, AlignItmes, Placement, Orientation, Position, Sizes, ComponentSize } from './components/Styling.js';
 export { default as Link } from './components/presentation/Link.svelte';
 export { default as Logo } from './components/presentation/Logo.svelte';
@@ -19,6 +20,7 @@ export { default as ListMenu } from './components/menu/ListMenu.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { isAuthenticated, selectVisible } from './components/menu/types.js';
+export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
 export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';

package/dist/index.js

@@ -8,10 +8,7 @@ export { default as TwoColumnsLayout } from './components/layouts/TwoColumnsLayo
 export { default as Well } from './components/layouts/Well.svelte';
 export { default as Banner } from './components/layouts/Banner.svelte';
 export { default as SimpleFooter } from './components/layouts/SimpleFooter.svelte';
-/*
- * Navigation
- */
-export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
+export { default as Tabs } from './components/layouts/Tabs.svelte';
 /*
  * Styling
  */
@@ -33,6 +30,7 @@ export { default as ListMenu } from './components/menu/ListMenu.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { isAuthenticated, selectVisible } from './components/menu/types.js';
+export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
 /*
  * Form
  */

package/dist/utils.js

@@ -1,54 +1,3 @@
-// import { cubicOut } from "svelte/easing";
-// import type { TransitionConfig } from "svelte/transition";
-// export function cn(...inputs: ClassValue[]) {
-// 	return twMerge(clsx(inputs));
-// }
 export function cn(...params) {
     return Array.from(params).flat(2).filter((c) => c).join(' ');
 }
-// type FlyAndScaleParams = {
-// 	y?: number;
-// 	x?: number;
-// 	start?: number;
-// 	duration?: number;
-// };
-// export const flyAndScale = (
-// 	node: Element,
-// 	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-// ): TransitionConfig => {
-// 	const style = getComputedStyle(node);
-// 	const transform = style.transform === "none" ? "" : style.transform;
-// 	const scaleConversion = (
-// 		valueA: number,
-// 		scaleA: [number, number],
-// 		scaleB: [number, number]
-// 	) => {
-// 		const [minA, maxA] = scaleA;
-// 		const [minB, maxB] = scaleB;
-// 		const percentage = (valueA - minA) / (maxA - minA);
-// 		const valueB = percentage * (maxB - minB) + minB;
-// 		return valueB;
-// 	};
-// 	const styleToString = (
-// 		style: Record<string, number | string | undefined>
-// 	): string => {
-// 		return Object.keys(style).reduce((str, key) => {
-// 			if (style[key] === undefined) return str;
-// 			return str + `${key}:${style[key]};`;
-// 		}, "");
-// 	};
-// 	return {
-// 		duration: params.duration ?? 200,
-// 		delay: 0,
-// 		css: (t) => {
-// 			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-// 			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-// 			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-// 			return styleToString({
-// 				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-// 				opacity: t
-// 			});
-// 		},
-// 		easing: cubicOut
-// 	};
-// };

package/package.json

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