@functionalcms/svelte-components 4.36.9 → 5.0.0-beta1

package/dist/components/presentation/Dialog.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-	import Button from '../form/Button.svelte';
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import type { EventHandler } from 'svelte/elements';
-
-	interface Css {
-		container: string;
-		header: string;
-		main: string;
-	}
-
-	interface Props {
-		children: Snippet;
-		css: Css;
-		isOpen: boolean;
-		onClose?: EventHandler<Event, HTMLDialogElement> | undefined;
-		showHeader?: boolean;
-		title?: string;
-		showCloseButton?: boolean;
-	}
-
-	let { 
-		children, 
-		onClose, 
-		css = { container:'', header:'', main:'', }, 
-		isOpen = false, 
-		showHeader = true,
-		title = '',
-		showCloseButton = true,
-	 }: Props = $props();
-	let dialog: any;
-
-	export function showModal() {
-		dialog.showModal();
-	}
-	export function close() {
-		dialog.close();
-	}
-
-	if (isOpen) {
-		dialog.showModal();
-	}
-
-	const headerCss = cn(css.header, css.container);
-</script>
-
-<dialog bind:this={dialog} onclose={onClose} class={css.container}>
-	{#if showHeader}
-		<header class={headerCss}>
-			<h2>{title}</h2>
-			{#if showCloseButton}
-				<Button css="closeModal" click={close}>X</Button>
-			{/if}
-		</header>
-	{/if}
-	<main class={css.main}>
-		{@render children?.()}
-	</main>
-</dialog>
-
-<style>
-	h2 {
-		margin: 0 30px 0px 0px;
-		padding: 0;
-		font-size: 1.5em;
-	}
-	:global(.closeModal){
-		position: absolute;
-		top: 5px;
-		right: 5px;
-		border: none !important;
-		background: transparent !important;
-	}
-</style>

package/dist/components/presentation/Dialog.svelte.d.ts

@@ -1,22 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { EventHandler } from 'svelte/elements';
-interface Css {
-    container: string;
-    header: string;
-    main: string;
-}
-interface Props {
-    children: Snippet;
-    css: Css;
-    isOpen: boolean;
-    onClose?: EventHandler<Event, HTMLDialogElement> | undefined;
-    showHeader?: boolean;
-    title?: string;
-    showCloseButton?: boolean;
-}
-declare const Dialog: import("svelte").Component<Props, {
-    showModal: () => void;
-    close: () => void;
-}, "">;
-type Dialog = ReturnType<typeof Dialog>;
-export default Dialog;

package/dist/components/presentation/Disclose.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		title?: string;
-		isOpen?: boolean;
-		isBackground?: boolean;
-		isBordered?: boolean;
-	}
-
-	let {
-		children,
-		title = '',
-		isOpen = false,
-		isBackground = false,
-		isBordered = false
-	}: Props = $props();
-
-	const discloseClasses = cn(
-		'disclose',
-		isBackground ? 'disclose-bg' : '',
-		isBordered ? 'disclose-bordered' : ''
-	);
-</script>
-
-<details class={discloseClasses} bind:open={isOpen}>
-	<summary class="disclose-title">{title}</summary>
-	<div class="disclose-panel">
-		{@render children()}
-	</div>
-</details>
-
-<style>
-	.disclose {
-		margin-block-end: var(--fluid-4);
-
-		/* When this element is a direct child of a flex container with
-  flex-direction: column it collapses similar to an inline element even though
-  it's block. This helps prevent that. */
-		width: 100%;
-	}
-
-	.disclose-title {
-		display: block;
-		cursor: pointer;
-		font-weight: 600;
-		padding: var(--fluid-8) var(--fluid-12);
-
-		/* Required to position the icon absolutely */
-		position: relative;
-		color: inherit;
-		transition: color var(--functional-timing-slow);
-	}
-
-	.disclose-panel {
-		font-weight: 400;
-		padding: var(--fluid-16);
-	}
-
-	.disclose-title,
-	.disclose-panel {
-		margin: 0;
-	}
-
-	/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
-	.disclose-title::webkit-details-marker {
-		display: none;
-	}
-
-	.disclose-bordered .disclose-title {
-		border: 1px solid var(--functional-gray-light);
-	}
-
-	.disclose-bg .disclose-title {
-		background-color: var(--functional-gray-light);
-	}
-
-	.disclose-title: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;
-	}
-
-	.disclose-title::after {
-		color: var(--functional-gray-dark);
-		content: '\203A';
-		position: absolute;
-		right: var(--fluid-12);
-		top: 0;
-		bottom: 0;
-
-		/* Chevron thinning :) */
-		font-size: var(--fluid-32);
-		line-height: 1;
-		font-weight: 100;
-		transition: transform var(--functional-timing-slow);
-		transform: rotate(0);
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.disclose-title,
-		.disclose-title:focus,
-		.disclose-title::after {
-			transition: none;
-		}
-	}
-
-	.disclose[open] > .disclose-title::after {
-		transform: rotate(90deg);
-	}
-</style>

package/dist/components/presentation/Disclose.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    title?: string;
-    isOpen?: boolean;
-    isBackground?: boolean;
-    isBordered?: boolean;
-}
-declare const Disclose: import("svelte").Component<Props, {}, "">;
-type Disclose = ReturnType<typeof Disclose>;
-export default Disclose;

package/dist/components/presentation/Drawer.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import { onMount, type Snippet } from 'svelte';
-	import { Placement } from '../Styling.js';
-
-	interface Props {
-		open?: boolean;
-		duration?: number;
-		placement?: Placement;
-		size?: number;
-		clickAway: () => void;
-        children: Snippet
-	}
-
-	let {
-		open = false,
-		duration = 0.2,
-		placement = Placement.Start,
-		size = undefined,
-		clickAway,
-        children,
-	}: Props = $props();
-
-	let style = $derived('--duration: ' + duration + 's; --size: ' + size + ';');
-
-	function handleClickAway() {
-		clickAway();
-	}
-</script>
-
-<aside class="drawer" class:open {style}>
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="overlay" onclick={handleClickAway}></div>
-
-	<div class="panel {placement}" class:size>
-		{@render children()}
-	</div>
-</aside>
-
-<style>
-	.drawer {
-		position: fixed;
-		top: 0;
-		left: 0;
-		height: 100vh;
-		width: 100vw;
-		z-index: -1;
-		transition: z-index var(--duration) step-end;
-		display: none;
-	}
-
-	.drawer.open {
-		z-index: 99;
-		display: block;
-		transition: z-index var(--duration) step-start;
-	}
-
-	.overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		height: 100vh;
-		width: 100vw;
-		background: rgba(100, 100, 100, 0.5);
-		opacity: 0;
-		z-index: 2;
-		transition: opacity var(--duration) ease;
-	}
-
-	.drawer.open .overlay {
-		opacity: 1;
-	}
-
-	.panel {
-		position: fixed;
-		width: 100%;
-		height: 100%;
-		background: white;
-		z-index: 3;
-		transition: transform var(--duration) ease;
-		overflow: auto;
-		padding: var(--hamburger-menu-margin, 25px);
-	}
-
-	.panel.left {
-		left: 0;
-		transform: translate(-100%, 0);
-	}
-
-	.panel.right {
-		right: 0;
-		transform: translate(100%, 0);
-	}
-
-	.panel.top {
-		top: 0;
-		transform: translate(0, -100%);
-	}
-
-	.panel.bottom {
-		bottom: 0;
-		transform: translate(0, 100%);
-	}
-
-	.panel.left.size,
-	.panel.right.size {
-		max-width: var(--size);
-	}
-
-	.panel.top.size,
-	.panel.bottom.size {
-		max-height: var(--size);
-	}
-
-	.drawer.open .panel {
-		transform: translate(0, 0);
-	}
-</style>

package/dist/components/presentation/Drawer.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type Snippet } from 'svelte';
-import { Placement } from '../Styling.js';
-interface Props {
-    open?: boolean;
-    duration?: number;
-    placement?: Placement;
-    size?: number;
-    clickAway: () => void;
-    children: Snippet;
-}
-declare const Drawer: import("svelte").Component<Props, {}, "">;
-type Drawer = ReturnType<typeof Drawer>;
-export default Drawer;

package/dist/components/presentation/EmptyState.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		header: Snippet;
-		footer: Snippet;
-		children: Snippet;
-		isRounded: boolean;
-		isBordered: boolean;
-	}
-
-	let {
-		header,
-		footer,
-		children,
-		isRounded = false,
-		isBordered = false
-	}: Partial<Props> = $props();
-
-	const emptyClasses: string = cn(
-		'empty',
-		isRounded ? 'empty-rounded' : '',
-		isBordered ? 'empty-bordered' : ''
-	);
-</script>
-
-<div class={emptyClasses}>
-	{#if header}
-		{@render header()}
-	{/if}
-	{@render children?.()}
-	<div class="empty-actions">
-		{#if footer}
-			{@render footer()}
-		{/if}
-	</div>
-</div>
-
-<style>
-	.empty-base,
-	.empty {
-		display: flex;
-		flex-flow: column wrap;
-		align-items: center;
-		text-align: center;
-		width: 100%;
-	}
-
-	.empty {
-		padding: calc(2 * var(--agnostic-side-padding));
-		background: var(--agnostic-gray-extra-light);
-	}
-
-	.empty-bordered {
-		background: transparent;
-		border: 1px solid var(--agnostic-gray-light);
-	}
-
-	.empty-rounded {
-		border-radius: var(--agnostic-radius);
-	}
-
-	.empty-actions {
-		margin-block-start: var(--spacing-24);
-	}
-</style>

package/dist/components/presentation/EmptyState.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const EmptyState: import("svelte").Component<Partial<{
-    header: Snippet;
-    footer: Snippet;
-    children: Snippet;
-    isRounded: boolean;
-    isBordered: boolean;
-}>, {}, "">;
-type EmptyState = ReturnType<typeof EmptyState>;
-export default EmptyState;

package/dist/components/presentation/Gallery.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import Card from './Card.svelte';
-	import type { ShowItem } from './ShowItem.ts';
-	import { AlignItmes, Justify, Orientation } from '../Styling.js';
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		items: Array<ShowItem>;
-		renderItem: Snippet<[ShowItem]>;
-		justify: Justify;
-		alignItems: AlignItmes;
-		orientation: Orientation;
-		restProps: any;
-		css: string;
-	}
-
-	let {
-		items = [],
-		renderItem,
-		css = '',
-		justify = Justify.Between,
-		alignItems = AlignItmes.Center,
-		orientation = Orientation.DynamicRow,
-		...restProps
-	}: Partial<Props> = $props();
-
-	let classes = cn('flex', css, `${orientation}`, `${justify}`, `${alignItems}`);
-</script>
-
-<Card css={classes} {...restProps}>
-	{#each items as entry}
-		{@render renderItem?.(entry)}
-	{/each}
-</Card>

package/dist/components/presentation/Gallery.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { ShowItem } from './ShowItem.ts';
-import { AlignItmes, Justify, Orientation } from '../Styling.js';
-import type { Snippet } from 'svelte';
-declare const Gallery: import("svelte").Component<Partial<{
-    items: Array<ShowItem>;
-    renderItem: Snippet<[ShowItem]>;
-    justify: Justify;
-    alignItems: AlignItmes;
-    orientation: Orientation;
-    restProps: any;
-    css: string;
-}>, {}, "">;
-type Gallery = ReturnType<typeof Gallery>;
-export default Gallery;