@functionalcms/svelte-components 3.5.16 → 3.5.19

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { default as ColumnMenu } from './components/menu/NavigationItems.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
@@ -15,8 +14,8 @@ export { default as Spacer } from './components/Spacer.svelte';
 export { default as Well } from './components/Well.svelte';
 export { default as Link } from './components/Link.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
-export { default as Carusel } from './components/presentation/Carusel.svelte';
-export { CaruseleItem } from './components/presentation/Carusele.js';
+export { default as Carousel } from './components/presentation/Carousel.svelte';
+export { CarouselItem as CarouselItem } from './components/presentation/Carusele.js';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as BlogDescription } from './components/blog/BlogDescription.svelte';
 export { default as BlogTitle } from './components/blog/BlogTitle.svelte';
@@ -27,8 +26,8 @@ export { ShowItem } from './components/presentation/ShowItem.js';
 export { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
 export { default as SvelteMarkdown } from './components/Markdown.svelte';
 export { default as Button } from './components/agnostic/Button/Button.svelte';
+export { default as Card } from './components/presentation/Card.svelte';
 export { default as Disclose } from './components/agnostic/Disclose/Disclose.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Loader } from './components/agnostic/Loader/Loader.svelte';
-export { DatePicker, DateInput, localeFromDateFnsLocale, type Locale, } from 'date-picker-svelte';
-export { default as Dropzone } from 'svelte-file-dropzone';
+export { default as Switch } from './components/form/Switch.svelte';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
+// export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { default as ColumnMenu } from './components/menu/NavigationItems.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
@@ -15,8 +15,8 @@ export { default as Spacer } from './components/Spacer.svelte';
 export { default as Well } from './components/Well.svelte';
 export { default as Link } from './components/Link.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
-export { default as Carusel } from './components/presentation/Carusel.svelte';
-export { CaruseleItem } from './components/presentation/Carusele.js';
+export { default as Carousel } from './components/presentation/Carousel.svelte';
+export { CarouselItem as CarouselItem } from './components/presentation/Carusele.js';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as BlogDescription } from './components/blog/BlogDescription.svelte';
 export { default as BlogTitle } from './components/blog/BlogTitle.svelte';
@@ -31,7 +31,7 @@ export { default as SvelteMarkdown } from './components/Markdown.svelte';
 // export { default as Breadcrumb } from './components/agnostic/Breadcrumb/Breadcrumb.svelte';
 export { default as Button } from './components/agnostic/Button/Button.svelte';
 // export { default as ButtonGroup } from './components/agnostic/Button/ButtonGroup.svelte';
-// export { default as Card } from './components/presentation/Card.svelte';
+export { default as Card } from './components/presentation/Card.svelte';
 // export { default as ChoiceInput } from './components/agnostic/ChoiceInput/ChoiceInput.svelte';
 // export { default as Close } from './components/agnostic/Close/Close.svelte';
 // export { default as Dialog } from './components/agnostic/Dialog/Dialog.svelte';
@@ -49,11 +49,16 @@ export { default as Loader } from './components/agnostic/Loader/Loader.svelte';
 // export { default as Progress } from './components/agnostic/Progress/Progress.svelte';
 // export { default as Select } from './components/form/Select.svelte';
 // export { default as Spinner } from './components/agnostic/Spinner/Spinner.svelte';
-// export { default as Switch } from './components/agnostic/Switch/Switch.svelte';
+export { default as Switch } from './components/form/Switch.svelte';
 // export { default as Table } from './components/agnostic/Table/Table.svelte';
 // export { default as Tabs } from './components/agnostic/Tabs/Tabs.svelte';
 // export { default as Tag } from './components/agnostic/Tag/Tag.svelte';
 // export { default as Toasts } from './components/agnostic/Toasts/Toasts.svelte';
 // export { default as Tooltip } from './components/agnostic/Tooltip/Tooltip.svelte';
-export { DatePicker, DateInput, localeFromDateFnsLocale, } from 'date-picker-svelte';
-export { default as Dropzone } from 'svelte-file-dropzone';
+// export {
+//     DatePicker,
+//     DateInput,
+//     localeFromDateFnsLocale,
+//     type Locale,
+// } from 'date-picker-svelte';
+// export { default as Dropzone } from 'svelte-file-dropzone';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "3.5.16",
+	"version": "3.5.19",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -47,39 +47,39 @@
 		"@eslint/compat": "^1.2.3",
 		"@eslint/js": "^9.17.0",
 		"@functionalcms/services": "latest",
+		"@inlang/paraglide-js": "1.11.8",
+		"@inlang/paraglide-sveltekit": "^0.15.5",
+		"@playwright/test": "^1.45.3",
+		"@splidejs/svelte-splide": "^0.2.9",
 		"@sveltejs/adapter-netlify": "^4.4.0",
 		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.2.5",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"mdsvex": "^0.11.2",
+		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
-		"publint": "^0.2.12",
-		"sass": "^1.69.7",
-		"svelte": "^5.12.0",
-		"tslib": "^2.6.2",
+		"publint": "^0.2.0",
+		"sass": "^1.83.1",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tslib": "^2.8.1",
 		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.19.1",
-		"vite": "^6.0.3",
-		"watch": "^1.0.2"
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.4.11"
 	},
 	"dependencies": {
-		"@floating-ui/dom": "^1.6.12",
-		"@splidejs/svelte-splide": "^0.2.9",
-		"date-picker-svelte": "^2.14.1",
-		"focusable-selectors": "^0.8.4",
-		"ioredis": "^5.4.1",
-		"marked": "^15.0.5",
-		"node-html-parser": "^6.1.12",
-		"oauth4webapi": "^2.17.0",
-		"rehype-autolink-headings": "^7.1.0",
-		"rehype-slug": "^6.0.0",
-		"remark-abbr": "^1.4.2",
-		"remark-github": "^12.0.0",
+		"@splidejs/splide": "^4.1.4",
+		"@sveltejs/kit": "^2.15.2",
+		"ioredis": "^5.4.2",
+		"marked": "^15.0.6",
+		"npm-watch": "^0.13.0",
+		"oauth4webapi": "^3.1.4",
+		"svelte": "^5.17.3",
 		"svelte-file-dropzone": "^2.0.9"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
 	"type": "module"
 }

package/dist/components/agnostic/Alert/Alert.svelte

@@ -1,317 +0,0 @@
-<style>
-.alert-base,
-.alert {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  max-width: 100%;
-}
-
-.alert-end {
-  justify-content: flex-end;
-}
-
-.alert-skin,
-.alert {
-  padding: var(--functional-side-padding);
-  background: var(--functional-gray-light);
-}
-
-.alert-icon {
-  color: var(--functional-gray-mid-dark);
-  margin-inline-end: var(--fluid-8);
-
-  /* Ensures our icon doesn't flex grow or shrink */
-  flex: 0 0 var(--fluid-24);
-}
-
-.alert-border-top {
-  border-top: var(--fluid-8) solid var(--functional-gray-mid-dark);
-}
-
-.alert-border-left {
-  border-left: var(--fluid-8) solid var(--functional-gray-mid-dark);
-}
-
-.alert-border-bottom {
-  border-bottom: var(--fluid-8) solid var(--functional-gray-mid-dark);
-}
-
-.alert-border-right {
-  border-right: var(--fluid-8) solid var(--functional-gray-mid-dark);
-}
-
-.alert-border-all {
-  border: var(--fluid-2) solid var(--functional-gray-mid-dark);
-}
-
-.alert-rounded {
-  border-radius: var(--functional-alert-radius, var(--functional-radius, 0.25rem));
-}
-
-.alert-dark {
-  color: var(--functional-light);
-  background: var(--functional-dark);
-}
-
-.alert-dark .alert-icon,
-.alert-dark {
-  color: var(--functional-light);
-}
-
-.alert-warning {
-  background: var(--functional-warning-light);
-  color: var(--functional-warning-dark);
-}
-
-.alert-warning-icon {
-  color: var(--functional-warning-border-accent);
-  margin-inline-end: var(--fluid-8);
-
-  /* Ensures our icon doesn't flex grow or shrink */
-  flex: 0 0 var(--fluid-24);
-}
-
-.alert-warning.alert-border-top {
-  border-top-color: var(--functional-warning-border-accent);
-}
-
-.alert-warning.alert-border-left {
-  border-left-color: var(--functional-warning-border-accent);
-}
-
-.alert-warning.alert-border-bottom {
-  border-bottom-color: var(--functional-warning-border-accent);
-}
-
-.alert-warning.alert-border-right {
-  border-right-color: var(--functional-warning-border-accent);
-}
-
-.alert-warning.alert-border-all {
-  border: var(--fluid-2) solid var(--functional-warning-border);
-}
-
-.alert-info {
-  background: var(--functional-primary-light);
-  color: var(--functional-primary-dark);
-}
-
-.alert-info-icon {
-  color: var(--functional-primary-dark);
-  margin-inline-end: var(--fluid-8);
-
-  /* Ensures our icon doesn't flex grow or shrink */
-  flex: 0 0 var(--fluid-24);
-}
-
-.alert-info.alert-border-top {
-  border-top-color: var(--functional-primary-dark);
-}
-
-.alert-info.alert-border-left {
-  border-left-color: var(--functional-primary-dark);
-}
-
-.alert-info.alert-border-bottom {
-  border-bottom-color: var(--functional-primary-dark);
-}
-
-.alert-info.alert-border-right {
-  border-right-color: var(--functional-primary-dark);
-}
-
-.alert-info.alert-border-all {
-  border: var(--fluid-2) solid var(--functional-primary-border);
-}
-
-.alert-error {
-  background: var(--functional-error-light);
-  color: var(--functional-error-dark);
-}
-
-.alert-error-icon {
-  color: var(--functional-error-dark);
-  margin-inline-end: var(--fluid-8);
-
-  /* Ensures our icon doesn't flex grow or shrink */
-  flex: 0 0 var(--fluid-24);
-}
-
-.alert-error.alert-border-top {
-  border-top-color: var(--functional-error-dark);
-}
-
-.alert-error.alert-border-left {
-  border-left-color: var(--functional-error-dark);
-}
-
-.alert-error.alert-border-bottom {
-  border-bottom-color: var(--functional-error-dark);
-}
-
-.alert-error.alert-border-right {
-  border-right-color: var(--functional-error-dark);
-}
-
-.alert-error.alert-border-all {
-  border: var(--fluid-2) solid var(--functional-error-border);
-}
-
-.alert-success {
-  background: var(--functional-action-light);
-  color: var(--functional-action-dark);
-}
-
-.alert-success-icon {
-  color: var(--functional-action-dark);
-  margin-inline-end: var(--fluid-8);
-
-  /* Ensures our icon doesn't flex grow or shrink */
-  flex: 0 0 var(--fluid-24);
-}
-
-.alert-success.alert-border-top {
-  border-top-color: var(--functional-action-dark);
-}
-
-.alert-success.alert-border-left {
-  border-left-color: var(--functional-action-dark);
-}
-
-.alert-success.alert-border-bottom {
-  border-bottom-color: var(--functional-action-dark);
-}
-
-.alert-success.alert-border-right {
-  border-right-color: var(--functional-action-dark);
-}
-
-.alert-success.alert-border-all {
-  border: var(--fluid-2) solid var(--functional-action-border);
-}
-
-/**
- * This is not in toast.css because it's actually applied on the Alert child element
- * conditionally if the Alert is a Toast alert :-)
- */
-.alert-toast-shadow {
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 6%), 0 3px 8px 0 rgb(0 0 0 / 7%), 0 6px 18px 0 rgb(0 0 0 / 6%);
-}
-
-.fade-in {
-	animation: fade-in var(--functional-timing-fast) both;
-}
-
-.slide-up {
-	animation: slide-up var(--functional-timing-slow) var(--functional-timing-fast)
-		both;
-}
-
-/**
- * Cannot use two separate CSS classes with animation: foo, bar
- * as the later class will overwrite the first (so this combines)
- */
-.slide-up-fade-in {
-	animation: fade-in var(--functional-timing-fast) both,
-		slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
-}
-
-@keyframes fade-in {
-	from {
-		opacity: 0%;
-	}
-}
-
-@keyframes slide-up {
-	from {
-		transform: translateY(10%);
-	}
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-	.slide-up-fade-in,
-	.fade-in,
-	.slide-up {
-		transition-duration: 0.001ms !important;
-	}
-}
-
-</style>
-
-<script lang="ts">
-	export let isAnimationFadeIn = true;
-	export let isAnimationSlideUp = false;
-	export let isToast = false;
-
-	export let isRounded = false;
-	export let isBorderAll = false;
-	export let isBorderLeft = false;
-	export let isBorderRight = false;
-	export let isBorderTop = false;
-	export let isBorderBottom = false;
-	export let isBlockEnd = false;
-	export let type = '';
-	let typeClass;
-	switch (type) {
-		case 'warning':
-			typeClass = 'alert-warning';
-			break;
-		case 'dark':
-			typeClass = 'alert-dark';
-			break;
-		case 'error':
-			typeClass = 'alert-error';
-			break;
-		case 'info':
-			typeClass = 'alert-info';
-			break;
-		case 'success':
-			typeClass = 'alert-success';
-			break;
-		default:
-			typeClass = '';
-	}
-
-	const ariaAtomicValue = isToast ? true : undefined;
-
-	$: ariaLiveValue = () => {
-		let liveValue: 'assertive' | 'polite' | 'off';
-		if (isToast && type === 'error') {
-			liveValue = 'assertive';
-		} else if (isToast) {
-			liveValue = 'polite';
-		} else {
-			liveValue = 'off';
-		}
-		return liveValue;
-	};
-
-	const classes = [
-		'alert',
-		typeClass,
-		isRounded ? 'alert-rounded' : '',
-		isBorderAll ? 'alert-border-all' : '',
-		isBorderLeft ? 'alert-border-left' : '',
-		isBorderRight ? 'alert-border-right' : '',
-		isBorderTop ? 'alert-border-top' : '',
-		isBorderBottom ? 'alert-border-bottom' : '',
-		isBlockEnd ? 'alert-end' : '',
-		isAnimationFadeIn && !isAnimationSlideUp ? 'fade-in' : '',
-		!isAnimationFadeIn && isAnimationSlideUp ? 'slide-up' : '',
-		isAnimationFadeIn && isAnimationSlideUp ? 'slide-up-fade-in' : ''
-	]
-		.filter((klass) => klass.length)
-		.join(' ');
-</script>
-
-<div
-	class="{classes}"
-	role="alert"
-	aria-atomic="{ariaAtomicValue}"
-	aria-live="{ariaLiveValue()}"
->
-	<slot name="icon" />
-	<slot />
-</div>

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

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        isAnimationFadeIn?: boolean;
-        isAnimationSlideUp?: boolean;
-        isToast?: boolean;
-        isRounded?: boolean;
-        isBorderAll?: boolean;
-        isBorderLeft?: boolean;
-        isBorderRight?: boolean;
-        isBorderTop?: boolean;
-        isBorderBottom?: boolean;
-        isBlockEnd?: boolean;
-        type?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
-}
-export {};

package/dist/components/agnostic/Avatar/Avatar.svelte

@@ -1,127 +0,0 @@
-<style>
-.avatar,
-.avatar-base {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.avatar,
-.avatar-skin {
-  width: var(--fluid-40);
-  height: var(--fluid-40);
-  max-width: 100%;
-  background: var(--functional-gray-extra-light);
-  border-radius: 50%;
-}
-
-.avatar-square {
-  border-radius: 0;
-}
-
-.avatar-rounded {
-  border-radius: var(--functional-radius);
-}
-
-.avatar-small {
-  font-size: var(--fluid-12);
-  width: var(--fluid-32);
-  height: var(--fluid-32);
-}
-
-.avatar-large {
-  width: var(--fluid-48);
-  height: var(--fluid-48);
-}
-
-.avatar-xlarge {
-  font-size: var(--fluid-20);
-  width: var(--fluid-64);
-  height: var(--fluid-64);
-}
-
-.avatar::before {
-  content: attr(data-text);
-}
-
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar-info {
-  background: var(--functional-primary-light);
-  color: var(--functional-primary-dark);
-}
-
-.avatar-warning {
-  background: var(--functional-warning-light);
-  color: var(--functional-warning-dark);
-}
-
-.avatar-success {
-  background: var(--functional-action-light);
-  color: var(--functional-action-dark);
-}
-
-.avatar-error {
-  background: var(--functional-error-light);
-  color: var(--functional-error-dark);
-}
-
-/* Must come after avatar-success, avatatar-warning, etc. so specificity is higher */
-.avatar-transparent {
-  background: transparent;
-}
-
-.avatar-group {
-  display: flex;
-  flex-direction: row;
-
-  /* TBD -- should we stack these on mobile? */
-}
-
-/* Helpful for Vue / Svelte SFC where the .avatar child will not be a global
-but CSS Modules class. Unfortunately, it means those have to be spans though.
-This should be ok -- it's our Avatar.vue and Avatar.svelte, for example, that
-respectively generate the <span> tag in their own templates (not the consumer) */
-.avatar-group > span,
-.avatar-group .avatar {
-  border: 2px solid var(--functional-light);
-}
-
-.avatar-group > span:not(:first-child),
-.avatar-group .avatar:not(:first-child) {
-  margin-inline-start: calc(-1 * var(--fluid-10));
-}
-
-</style>
-
-<script lang="ts">
-  export let isRounded = false;
-  export let isTransparent = false;
-  export let isSquare = false;
-  export let type = "";
-  export let size = "";
-  export let text = "";
-  export let imgUrl = "";
-
-  const avatarClasses = [
-    "avatar",
-    isRounded ? "avatar-rounded" : "",
-    isTransparent ? "avatar-transparent" : "",
-    isSquare ? "avatar-square" : "",
-    type ? `avatar-${type}` : "",
-    size ? `avatar-${size}` : "",
-  ]
-    .filter((cls) => cls)
-    .join(" ");
-</script>
-
-<span class={avatarClasses} data-text={text || null}>
-  {#if imgUrl}<img src={imgUrl} class="avatar-image" alt="" />{/if}
-  <slot />
-</span>

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

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        isRounded?: boolean;
-        isTransparent?: boolean;
-        isSquare?: boolean;
-        type?: string;
-        size?: string;
-        text?: string;
-        imgUrl?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AvatarProps = typeof __propDef.props;
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
-}
-export {};