@functionalcms/svelte-components 3.5.16 → 3.5.18

package/dist/components/agnostic/Tabs/Tabs.svelte

@@ -1,399 +0,0 @@
-<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(--functional-tabs-border-size, 1px) solid
-    var(--functional-tabs-bgcolor, var(--functional-gray-light));
-  transition-property: all;
-  transition-duration: var(--functional-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(--functional-vertical-pad, 0.5rem);
-  padding-block-end: var(--functional-vertical-pad, 0.5rem);
-  padding-inline-start: var(--functional-side-padding, 0.75rem);
-  padding-inline-end: var(--functional-side-padding, 0.75rem);
-  font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
-  font-weight: var(--functional-btn-font-weight, 400);
-  font-size: var(--functional-btn-font-size, 1rem);
-
-  /* this can be overriden, but it might mess with the balance of the button heights across variants */
-  line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
-  color: var(--functional-tabs-primary, var(--functional-primary));
-  text-decoration: none;
-  transition:
-    color var(--functional-timing-fast) ease-in-out,
-    background-color var(--functional-timing-fast) ease-in-out,
-    border-color var(--functional-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(--functional-input-side-padding) * 1.25);
-  padding-block-end: calc(var(--functional-input-side-padding) * 1.25);
-  padding-inline-start: calc(var(--functional-input-side-padding) * 1.75);
-  padding-inline-end: calc(var(--functional-input-side-padding) * 1.75);
-}
-
-.tab-button-xlarge {
-  padding-block-start: calc(var(--functional-input-side-padding) * 2);
-  padding-block-end: calc(var(--functional-input-side-padding) * 2);
-  padding-inline-start: calc(var(--functional-input-side-padding) * 3);
-  padding-inline-end: calc(var(--functional-input-side-padding) * 3);
-}
-
-.tab-item.tab-button {
-  margin-block-end: -1px;
-  background: 0 0;
-  border: 1px solid transparent;
-  border-top-left-radius: var(--functional-tabs-radius, 0.25rem);
-  border-top-right-radius: var(--functional-tabs-radius, 0.25rem);
-}
-
-.tab-item.tab-button.active {
-  color: var(--functional-dark);
-  background-color: var(--functional-light);
-  border-color: var(--functional-gray-light) var(--functional-gray-light) var(--functional-light);
-}
-
-.tab-item:hover,
-.tab-button:focus {
-  border-color:
-    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-width)
-    var(--functional-gray-light);
-  isolation: isolate;
-  z-index: 1;
-  cursor: pointer;
-}
-
-.tabs-vertical .tab-button {
-  border: none;
-}
-
-.tab-button:disabled {
-  color: var(--functional-tabs-disabled-bg, var(--functional-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(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
-
-  /* Needed for High Contrast mode */
-  outline:
-    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
-    var(--functional-focus-ring-outline-color);
-  transition: box-shadow var(--functional-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>
-
-<script lang="ts">
-	import type { NavigationDirection, Tab, TabSizes } from './api';
-
-	export let size: TabSizes = '';
-
-	/**
-   * This is an array of objects in shape like:
-   * {
-      title: "Tab 3",
-      tabPanelComponent: MyTabPanel,
-      // This is optional and only if you want to supply your own custom tab buttons.
-      // If not passed, we will generate an internal default tab button.
-      tabButtonComponent: TabButton3,
-    },
-   */
-	export let tabs: Tab[] = [];
-
-	export let isBorderless = false;
-	export let isVerticalOrientation = false;
-	export let isDisabled = false;
-	export let disabledOptions: string[] = [];
-	export let isSkinned = true;
-
-	/**
-	 * Explanation: we have two ways that the tab buttons get created:
-	 * 1. The `tabs` input array has dynamic `tabButtonComponent` components.
-	 * 2. The `tabs` has no `tabButtonComponent` and so we generate the tab
-	 * button internally.
-	 *
-	 * As such, the `dynamicComponentRefs` below are refs for case 1. and
-	 * `tabButtonRefs` are refs for case 2.
-	 */
-	let dynamicComponentRefs = []; // https://svelte.dev/tutorial/component-this
-	let tabButtonRefs = [];
-
-	// handle element removal by filtering null
-	$: dynamicComponentRefs = [];
-	// dynamicComponentRefs.filter(el => el);
-	// $: console.log(dynamicComponentRefs);
-	$: tabButtonRefs = [];
-	// tabButtonRefs.filter(el => el);
-	// $: console.log(tabButtonRefs);
-
-	// onMount(() => {
-	//   console.log(tabButtonRefs);
-	// });
-	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) => tab.isActive);
-	if (activeTabs.length === 0) {
-		selectTab(0);
-	}
-
-	$: tablistClasses = () => {
-		const tabListClass = isSkinned ? 'tab-list' : 'tab-list-base';
-		return [tabListClass, isBorderless ? `tab-borderless` : '']
-			.filter((klass) => klass.length)
-			.join(' ');
-	};
-
-	$: tabButtonClasses = (tab: Tab) => {
-		const klasses = [
-			`tab-item`,
-			`tab-button`,
-			tab.isActive ? 'active' : '',
-			size === 'large' ? 'tab-button-large' : '',
-			size === 'xlarge' ? 'tab-button-xlarge' : ''
-		];
-		return klasses.filter((klass) => klass.length).join(' ');
-	};
-
-	const focusTab = (index: number, direction?: NavigationDirection) => {
-		// 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 === '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();
-	};
-</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="{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>
-	{#each tabs as panel}
-		{#if panel.isActive}
-			<svelte:component this="{panel.tabPanelComponent}" tabindex="0" />
-		{/if}
-	{/each}
-</div>
-<!-- <button on:click={() => console.log(tabButtonRefs)}>
-  print to console
-</button> -->

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

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Tab, TabSizes } from './api';
-declare const __propDef: {
-    props: {
-        size?: TabSizes;
-        /**
-           * This is an array of objects in shape like:
-           * {
-              title: "Tab 3",
-              tabPanelComponent: MyTabPanel,
-              // This is optional and only if you want to supply your own custom tab buttons.
-              // If not passed, we will generate an internal default tab button.
-              tabButtonComponent: TabButton3,
-            },
-           */ tabs?: Tab[];
-        isBorderless?: boolean;
-        isVerticalOrientation?: boolean;
-        isDisabled?: boolean;
-        disabledOptions?: string[];
-        isSkinned?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
-}
-export {};

package/dist/components/agnostic/Tabs/api.d.ts

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

package/dist/components/agnostic/Tabs/api.js

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

package/dist/components/agnostic/Tag/Tag.svelte

@@ -1,78 +0,0 @@
-<style>
-.tag-base,
-.tag {
-  display: inline-flex;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-.tag-skin,
-.tag {
-  background-color: var(--functional-gray-light);
-  color: var(--functional-dark);
-  font-size: var(--fluid-12);
-  line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
-  padding-block-start: var(--fluid-2);
-  padding-block-end: var(--fluid-2);
-  padding-inline-start: var(--fluid-8);
-  padding-inline-end: var(--fluid-8);
-}
-
-.tag-info {
-  background: var(--functional-primary-light);
-  color: var(--functional-primary-dark);
-}
-
-.tag-warning {
-  background: var(--functional-warning-light);
-  color: var(--functional-warning-dark);
-}
-
-.tag-error {
-  background: var(--functional-error-light);
-  color: var(--functional-error-dark);
-}
-
-.tag-success {
-  background: var(--functional-action-light);
-  color: var(--functional-action-dark);
-}
-
-.tag-upper {
-  font-size: var(--fluid-10);
-  text-transform: uppercase;
-}
-
-.tag-circle {
-  border-radius: 50%;
-}
-
-.tag-round {
-  border-radius: var(--functional-radius);
-}
-
-.tag-pill {
-  border-radius: 200px;
-}
-
-</style>
-
-<script lang="ts">
-  export let isUppercase = false;
-  export let isSkinned = true;
-  export let type = "";
-  export let shape = "";
-
-  const tagClasses = [
-    isSkinned ? "tag" : "tag-base",
-    type ? `tag-${type}` : "",
-    shape ? `tag-${shape}` : "",
-    isUppercase ? "tag-upper" : "",
-  ]
-    .filter((c) => c)
-    .join(" ");
-</script>
-
-<span class={tagClasses}>
-  <slot />
-</span>

package/dist/components/agnostic/Tag/Tag.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        isUppercase?: boolean;
-        isSkinned?: boolean;
-        type?: string;
-        shape?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TagProps = typeof __propDef.props;
-export type TagEvents = typeof __propDef.events;
-export type TagSlots = typeof __propDef.slots;
-export default class Tag extends SvelteComponentTyped<TagProps, TagEvents, TagSlots> {
-}
-export {};

package/dist/components/agnostic/Tag/TagSlots.svelte

@@ -1,52 +0,0 @@
-<style>
-  div {
-    margin-block-end: 1rem;
-  }
-</style>
-
-<script lang="ts">
-  import Tag from "./Tag.svelte";
-</script>
-
-<div>
-  <Tag>unknown</Tag>
-</div>
-<div>
-  <Tag isUppercase>unknown</Tag>
-</div>
-<div>
-  <Tag shape="round">round</Tag>
-</div>
-<div>
-  <Tag shape="pill">pill aka badge</Tag>
-</div>
-<div>
-  <Tag shape="circle">1</Tag>
-  <Tag shape="circle" type="error">2</Tag>
-  <Tag shape="circle" type="info">3</Tag>
-  <Tag shape="circle" type="warning">4</Tag>
-</div>
-<div>
-  <Tag type="success">success</Tag>
-</div>
-<div>
-  <Tag type="info">info</Tag>
-</div>
-<div>
-  <Tag type="error">error</Tag>
-</div>
-<div>
-  <Tag type="warning">warning</Tag>
-</div>
-<div>
-  <Tag type="info" shape="pill" isUppercase>saved</Tag>
-</div>
-<div>
-  <Tag type="warning" shape="pill" isUppercase>sure?</Tag>
-</div>
-<div>
-  <Tag type="success" shape="pill" isUppercase>yes</Tag>
-</div>
-<div>
-  <Tag type="error" shape="pill" isUppercase>no</Tag>
-</div>

package/dist/components/agnostic/Tag/TagSlots.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TagSlotsProps = typeof __propDef.props;
-export type TagSlotsEvents = typeof __propDef.events;
-export type TagSlotsSlots = typeof __propDef.slots;
-export default class TagSlots extends SvelteComponentTyped<TagSlotsProps, TagSlotsEvents, TagSlotsSlots> {
-}
-export {};

package/dist/components/agnostic/Toasts/Toasts.svelte

@@ -1,56 +0,0 @@
-<style>
-.alert-toast {
-  min-width: 19rem;
-  max-width: 100%;
-  position: fixed;
-  z-index: 1100;
-  font-size: var(--functional-small);
-
-  /* Optimized to match with the height created when we have a
-  24px icon. If no icon, this preserves the toast height. */
-  line-height: var(--fluid-24);
-  padding: 0;
-
-  /* We use bottom: 0, left: 0 etc., so this
-  actually pushes the toast away from edge */
-  margin: var(--fluid-16);
-}
-
-</style>
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  export let portalRootSelector = "body";
-  export let horizontalPosition: "start" | "center" | "end";
-  export let verticalPosition: "top" | "bottom";
-  const portalTarget = portalRootSelector || "body";
-
-  $: toastClasses = [
-    "alert-toast",
-    horizontalPosition,
-    verticalPosition
-  ].filter(c => c.length).join(" ");
-
-  // In case of SSR we don't render element until hydration is complete
-  let mounted = false;
-  onMount(() => (mounted = true));
-
-  const teleportNode = async (node) => {
-    const destination = document.querySelector(portalTarget);
-    destination.appendChild(node);
-  };
-
-  /**
-   * Svelte actions don't want to be async so this is a hack
-   * to get around that by delegating to teleportNode
-   */
-  const teleport = (node) => {
-    teleportNode(node);
-  };
-</script>
-
-{#if mounted}
-  <div class={toastClasses} use:teleport>
-    <slot />
-  </div>
-{/if}

package/dist/components/agnostic/Toasts/Toasts.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        portalRootSelector?: string;
-        horizontalPosition: "start" | "center" | "end";
-        verticalPosition: "top" | "bottom";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToastsProps = typeof __propDef.props;
-export type ToastsEvents = typeof __propDef.events;
-export type ToastsSlots = typeof __propDef.slots;
-export default class Toasts extends SvelteComponentTyped<ToastsProps, ToastsEvents, ToastsSlots> {
-}
-export {};