@functionalcms/svelte-components 4.36.9 → 5.0.0-beta1

package/dist/components/form/Switch.svelte

@@ -1,293 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-
-	interface Props {
-		id: string;
-		name: string;
-		label: string;
-		css: string;
-		labelPosition: string;
-		size: string;
-		isChecked: boolean;
-		isBordered: boolean;
-		isAction: boolean;
-		isDisabled: boolean;
-	}
-	let {
-		id = '',
-		name= '',
-		label = '',
-		css = '',
-		labelPosition = 'left',
-		size = '',
-		isChecked = false,
-		isBordered = false,
-		isAction = false,
-		isDisabled = false
-	}: Partial<Props> = $props();
-
-	let switchContainer = $derived(
-		cn(
-			'switch-container',
-			labelPosition === 'right' ? 'switch-right' : '',
-			css ? css : '',
-			isDisabled ? 'disabled' : ''
-		)
-	);
-
-	const switchSpan = () => {
-		let klasses = [
-			'switch',
-			isBordered ? 'switch-border' : '',
-			isAction ? 'switch-action' : '',
-			size ? `switch-${size}` : ''
-		];
-		klasses = klasses.filter((klass) => klass.length);
-		return klasses.join(' ');
-	};
-	const handleClick = (evt: any) => {
-		const el = evt.target;
-		if (el.getAttribute('aria-checked') == 'true') {
-			el.setAttribute('aria-checked', 'false');
-		} else {
-			el.setAttribute('aria-checked', 'true');
-		}
-	};
-	const handleKeypress = (evt: any) => {
-		const keyCode = evt.keyCode || evt.which;
-		switch (keyCode) {
-			case 13:
-				evt.preventDefault();
-				evt.target.click();
-				break;
-		}
-	};
-</script>
-
-<label class={switchContainer} for={id}>
-	{#if labelPosition === 'left'}<span class="switch-label">{label}</span>{/if}
-	<input
-		type="checkbox"
-		class="switch-input"
-		{id}
-		{name}
-		bind:checked={isChecked}
-		disabled={isDisabled}
-		onclick={handleClick}
-		onkeypress={handleKeypress}
-		role="switch"
-	/>
-	<span class={switchSpan()} aria-hidden="true"></span>
-	{#if labelPosition === 'right'}<span class="switch-label">{label}</span>{/if}
-</label>
-
-<style>
-	/**
-     * Switch
-     *
-     * This switch is inspired by Scott Ohara's checkbox switch:
-     * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
-     */
-	.switch-container {
-		display: block;
-
-		/* TODO: Hopefully this doesn't become a problem but since we use absolute
-      positioning extensively, we need some way to have adjacent spaced lines */
-		min-height: 2.25rem;
-		width: 100%;
-		padding: 0.5rem;
-		position: relative;
-	}
-
-	.switch-container:hover {
-		cursor: pointer;
-	}
-
-	/* using the before/after pseudo elements of the span to create the "switch" */
-	.switch::before,
-	.switch::after {
-		border: 1px solid var(--gray-mid-dark);
-		content: '';
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	/* styling specific to the knob of the switch */
-	.switch::after {
-		background: #fff;
-		border-radius: 100%;
-		width: 1.4rem;
-		height: 1.4rem;
-		right: 1.4rem;
-		transition: right var(--timing-fast) ease-in-out;
-	}
-
-	/* styling specific to the knob "container" */
-	.switch::before {
-		background: #eee;
-		border-radius: 1.75rem;
-		width: 2.75rem;
-		height: 1.75rem;
-		right: 0.25rem;
-		transition: background var(--timing-medium) ease-in-out;
-	}
-
-	/* Sizes */
-	.switch-small::after {
-		width: 1.25rem;
-		height: 1.25rem;
-		right: 1.125rem;
-	}
-
-	.switch-small::before {
-		width: 2.25rem;
-		height: 1.5rem;
-	}
-
-	.switch-large::after {
-		width: 1.65rem;
-		height: 1.65rem;
-		right: 1.65rem;
-	}
-
-	.switch-large::before {
-		width: 3.25rem;
-		height: 2rem;
-	}
-
-	.switch-border::before {
-		border: 1px solid var(--primary);
-	}
-
-	.switch-action.switch-border::before {
-		border: 1px solid var(--action);
-	}
-
-	/* Switch label on right */
-
-	/* We have to flip the positioning when the label is on the right of switch */
-	.switch-right .switch::before {
-		right: initial;
-		left: 0.25rem;
-	}
-
-	.switch-right .switch::after {
-		right: initial;
-		left: 1.4rem;
-	}
-
-	/* Switch sizes w/label on right -- I expect SMACSS so .switch .switch-small
-    classes should both exist so the right: initial was taken care of above :) */
-	.switch-right .switch-small::after {
-		left: 1.125rem;
-	}
-
-	.switch-right .switch-large::after {
-		left: 1.65rem;
-	}
-
-	/* ---- CHECKED STATE ----- */
-
-	/* change the position of the knob to indicate it has been checked */
-
-	.switch-input:checked + .switch-small::after {
-		right: 0.425rem;
-	}
-
-	.switch-input:checked + .switch::after {
-		right: 0.5em;
-	}
-
-	.switch-right .switch-label {
-		position: absolute;
-		right: 0;
-
-		/* Flips transition target to left to preserve our smooth transitions */
-		transition: left var(--timing-fast) ease-in-out;
-	}
-
-	.switch-right .switch-input:checked + .switch::after {
-		right: initial;
-		left: 0.5em;
-	}
-
-	.switch-right .switch-input:checked + .switch-small::after {
-		right: initial;
-		left: 0.425rem;
-	}
-
-	/* From: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
-      hide the actual checkbox from view, but not from keyboards or ATs.
-      Instead of standard visually hidden styling, instead set opacity to
-      almost 0 (not zero for ChomeVox legacy bug), pointer-events none, and
-      then set to full height/width of container element so that VO focus
-      ring outlines the component, instead of a tiny box within the component
-    */
-	.switch-input {
-		margin: 0;
-		opacity: 0.01%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		pointer-events: none;
-	}
-
-	.switch-input:focus + .switch::before {
-		box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
-	}
-
-	/* update the color of the "container" to further visually indicate state */
-	.switch-input:checked + .switch:not(.switch-border)::before {
-		background: var(--primary);
-	}
-
-	.switch-input:checked + .switch-action:not(.switch-border)::before {
-		background: var(--action);
-	}
-
-	/* Border switch on checked the thumb gets primary or action bg respectively */
-	.switch-input:checked + .switch-border::after {
-		background: var(--primary);
-	}
-
-	.switch-input:checked + .switch-action.switch-border::after {
-		background: var(--action);
-	}
-
-	/* Disabled aka :disabled is not actually supported for <label>
-    element so we use attribute selector for that:
-    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#:~:text=The%20disabled%20attribute%20is%20supported,control%20or%20its%20descendant%20controls.
-    */
-	.switch-input[disabled] + .switch,
-	.switch-input[disabled] + .switch-label,
-	.switch-container.disabled {
-		color: var(--input-disabled-color, var(--disabled-color)) !important;
-		appearance: none !important;
-		box-shadow: none !important;
-		cursor: not-allowed !important;
-		opacity: 80% !important;
-	}
-
-	@media screen and (-ms-high-contrast: active) {
-		.switch::after {
-			background-color: windowText;
-		}
-
-		/* High contrast mode outline hacks */
-		.switch-input[disabled] + .switch-label,
-		.switch-container.disabled {
-			outline: 2px solid transparent;
-			outline-offset: -2px;
-		}
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.switch::after,
-		.switch::before {
-			transition-duration: 0.001ms !important;
-		}
-	}
-</style>

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

@@ -1,14 +0,0 @@
-declare const Switch: import("svelte").Component<Partial<{
-    id: string;
-    name: string;
-    label: string;
-    css: string;
-    labelPosition: string;
-    size: string;
-    isChecked: boolean;
-    isBordered: boolean;
-    isAction: boolean;
-    isDisabled: boolean;
-}>, {}, "">;
-type Switch = ReturnType<typeof Switch>;
-export default Switch;

package/dist/components/indicators/Loader.svelte

@@ -1,114 +0,0 @@
-<script>
-	export let ariaLabel = 'Loading…';
-	export let size = '';
-	export let loaderClasses = ['loader', size ? `loader-${size}` : ''].filter((c) => c).join(' ');
-</script>
-
-<div class={loaderClasses} role="status" aria-live="polite" aria-busy="true">
-	<span class="screenreader-only">{ariaLabel}</span>
-</div>
-
-<style>
-	.loader {
-		--loading-color: var(--agnostic-loading-color, var(--agnostic-dark));
-		--loading-size: var(--fluid-16);
-		--loading-size-small: var(--fluid-12);
-		--loading-size-large: var(--fluid-18);
-
-		position: relative;
-		box-sizing: border-box;
-		animation: blink 1s infinite;
-		animation-delay: 250ms;
-
-		/* Make up for negative positioning */
-		margin-left: var(--loading-size);
-
-		/* Initially set zero until aria-busy becomes true */
-		opacity: 0%;
-	}
-
-	.loader,
-	.loader::before,
-	.loader::after {
-		width: calc(var(--loading-size) / 2);
-		height: calc(var(--loading-size) / 2);
-		border-radius: var(--fluid-6);
-		background-color: var(--loading-color);
-	}
-
-	/* SMALL */
-	.loader-small,
-	.loader-small::before,
-	.loader-small::after {
-		width: calc(var(--loading-size-small) / 2);
-		height: calc(var(--loading-size-small) / 2);
-	}
-
-	/* LARGE */
-	.loader-large,
-	.loader-large::before,
-	.loader-large::after {
-		width: calc(var(--loading-size-large) / 2);
-		height: calc(var(--loading-size-large) / 2);
-		border-radius: var(--fluid-8);
-	}
-
-	.loader::before,
-	.loader::after {
-		content: '';
-		display: inline-block;
-		position: absolute;
-		top: 0;
-		animation: blink 1s infinite;
-	}
-
-	.loader::before {
-		left: calc(-1 * var(--loading-size));
-		animation-delay: 0s;
-	}
-
-	.loader::after {
-		left: var(--loading-size);
-		animation-delay: 500ms;
-	}
-
-	/* SMALL */
-	.loader-small::before {
-		left: calc(-1 * var(--loading-size-small));
-	}
-
-	.loader-small::after {
-		left: var(--loading-size-small);
-	}
-
-	/* LARGE */
-	.loader-large::before {
-		left: calc(-1 * var(--loading-size-large));
-		animation-delay: 0s;
-	}
-
-	.loader-large::after {
-		left: var(--loading-size-large);
-	}
-
-	/**
- * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
- */
-	.loader[aria-busy='true'] {
-		opacity: 100%;
-	}
-
-	@keyframes blink {
-		50% {
-			background-color: transparent;
-		}
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.loader,
-		.loader::before,
-		.loader::after {
-			transition-duration: 0.001ms !important;
-		}
-	}
-</style>

package/dist/components/indicators/Loader.svelte.d.ts

@@ -1,30 +0,0 @@
-export default Loader;
-type Loader = SvelteComponent<{
-    size?: string | undefined;
-    ariaLabel?: string | undefined;
-    loaderClasses?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Loader: $$__sveltets_2_IsomorphicComponent<{
-    size?: string | undefined;
-    ariaLabel?: string | undefined;
-    loaderClasses?: string | undefined;
-}, {
-    [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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/indicators/Spinner.svelte

@@ -1,109 +0,0 @@
-
-<style>
-.spinner {
-  --spinner-color: var(--agnostic-spinner-color, var(--agnostic-dark));
-
-  /**
-   * Inspiration to utilize grid for this from
-   * https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
-   */
-  display: grid;
-  grid-template: "content" 100% / auto;
-  place-items: center;
-  box-sizing: border-box;
-}
-
-.spinner::before,
-.spinner::after {
-  grid-area: content;
-  width: var(--fluid-32);
-  height: var(--fluid-32);
-  content: "";
-  display: block;
-  border-radius: 50%;
-  border-width: 3px;
-  border-style: solid;
-}
-
-.spinner-small::before,
-.spinner-small::after {
-  width: var(--fluid-24);
-  height: var(--fluid-24);
-  border-width: var(--fluid-2);
-}
-
-.spinner-large::before,
-.spinner-large::after {
-  width: var(--fluid-40);
-  height: var(--fluid-40);
-  border-width: var(--fluid-4);
-}
-
-.spinner-xlarge::before,
-.spinner-xlarge::after {
-  width: var(--fluid-56);
-  height: var(--fluid-56);
-  border-width: var(--fluid-6);
-}
-
-/**
- * Before is the muted background
- */
-.spinner::before {
-  opacity: 0%;
-  border-color: var(--spinner-color);
-}
-
-/**
- * After is the inner "snake"
- */
-.spinner::after {
-  opacity: 0%;
-  border-color: transparent var(--spinner-color) transparent transparent;
-  transition: opacity 0.1s;
-  pointer-events: none;
-  animation: loading-circle 1s ease-in-out infinite;
-
-  /* TODO Research the whole null transform hack. It is quite confusing to figure out if it
-  is beneficial or detrimental: See
-  https://newbedev.com/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
-  transform: translateZ(0);
-  will-change: transform; */
-}
-
-/**
- * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
- */
-.spinner[aria-busy="true"]::before {
-  opacity: 12%;
-}
-
-.spinner[aria-busy="true"]::after {
-  opacity: 100%;
-}
-
-@keyframes loading-circle {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .spinner::after {
-    transition-duration: 0.001ms !important;
-  }
-}
-
-</style>
-
-<script>
-  export let ariaLabel = "Loading…";
-  export let size = "";
-  $: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""]
-    .filter((c) => c)
-    .join(" ");
-</script>
-
-<div class={spinnerClasses} role="status" aria-live="polite" aria-busy="true">
-  <span class="screenreader-only">{ariaLabel}</span>
-</div>

package/dist/components/indicators/Spinner.svelte.d.ts

@@ -1,28 +0,0 @@
-export default Spinner;
-type Spinner = SvelteComponent<{
-    size?: string | undefined;
-    ariaLabel?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Spinner: $$__sveltets_2_IsomorphicComponent<{
-    size?: string | undefined;
-    ariaLabel?: string | undefined;
-}, {
-    [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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/layouts/Banner.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { cn } from '../../utils.js';
-
-	interface Props {
-		children: Snippet;
-		background?: string;
-		css?: string;
-	}
-
-	let { children, background = '', css = '' }: Partial<Props> = $props();
-
-	const bannerKlasses = cn('banner', css);
-</script>
-
-<div class={bannerKlasses} style="--banner-background: {background};">
-	{@render children?.()}
-</div>
-
-<style>
-	div.banner {
-		background: var(--banner-background);
-		height: 100%;
-		width: 100%;
-	}
-</style>

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

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Banner: import("svelte").Component<Partial<{
-    children: Snippet;
-    background?: string;
-    css?: string;
-}>, {}, "">;
-type Banner = ReturnType<typeof Banner>;
-export default Banner;

package/dist/components/layouts/FoldablePanel.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-	}
-
-	let { children }: Props = $props(); 
-</script>
-
-<aside>
-	{@render children()}
-</aside>
-
-<style>
-</style>

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

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-}
-declare const FoldablePanel: import("svelte").Component<Props, {}, "">;
-type FoldablePanel = ReturnType<typeof FoldablePanel>;
-export default FoldablePanel;

package/dist/components/layouts/SimpleFooter.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	interface Props {
-		companyName: string;
-		motto?: string;
-		logoUrl?: string;
-	}
-
-	let { companyName = '', motto = '', logoUrl = '' }: Props = $props();
-</script>
-
-<aside class="grid-flow-col items-center">
-	<img src={logoUrl} alt={companyName} />
-	<p>{motto}</p>
-	<p>Copyright © 2025 - All right reserved by {companyName}</p>
-	<p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
-</aside>
-
-<style>
-	aside {
-		text-align: center;
-		font-size: smaller;
-	}
-</style>

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

@@ -1,8 +0,0 @@
-interface Props {
-    companyName: string;
-    motto?: string;
-    logoUrl?: string;
-}
-declare const SimpleFooter: import("svelte").Component<Props, {}, "">;
-type SimpleFooter = ReturnType<typeof SimpleFooter>;
-export default SimpleFooter;