@functionalcms/svelte-components 3.5.20 → 4.0.0-pre

package/dist/components/Link.svelte

@@ -1,349 +0,0 @@
-<style>.btn {
-  /* TODO test this fallback override syntax is correct */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--functional-timing-medium);
-}
-
-.btn-skin,
-.btn {
-  color: var(--functional-btn-font-color, var(--functional-dark));
-  background-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
-  border-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
-
-  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
-  border-style: solid;
-  border-width: var(--functional-btn-border-size, 1px);
-  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));
-  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);
-  text-decoration: none;
-  text-align: center;
-  outline: none;
-}
-
-.btn:visited {
-  color: var(--functional-btn-font-color, var(--functional-dark));
-}
-
-.btn:hover {
-  opacity: 85%;
-  text-decoration: none;
-}
-
-.btn:active {
-  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
-  text-decoration: none;
-  transition-duration: 0s;
-  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
-}
-
-.btn: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;
-
-  /* In order for the focused element's box-shadow to appear above its siblings we need to
-  establish a new stacking context: https://stackoverflow.com/a/28042700 */
-  isolation: isolate;
-}
-
-/*
-* Disabled State
-*
-* The disabled state uses the class .disabled, is-disabled,
-* and the form attribute disabled="disabled".
-* The use of !important is only added because this is a state
-* that must be applied to all buttons when in a disabled state.
-*/
-
-.btn.disabled,
-.btn:disabled {
-  top: 0 !important;
-  background: var(--functional-btn-disabled-bg, var(--functional-gray-mid-dark)) !important;
-  text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;
-
-  /* primary, secondary, natural, all look same when disabled; and we don't want to
-  have an inadvertant looking blue primary border when disabled so it's transparent */
-  border-color: transparent;
-  color: var(--functional-btn-disabled-color, var(--functional-gray-dark)) !important;
-  cursor: default !important;
-  appearance: none !important;
-  box-shadow: none !important;
-  opacity: 80% !important;
-}
-
-.btn-primary {
-  background-color: var(--functional-btn-primary, var(--functional-primary));
-  border-color: var(--functional-btn-primary, var(--functional-primary));
-  color: var(--functional-btn-primary-color, var(--functional-light));
-}
-
-/* Border and font is primary. When hovered, we invert with primary background and white font */
-
-.btn-primary.btn-bordered {
-  color: var(--functional-btn-primary, var(--functional-primary));
-}
-
-.btn-primary.btn-bordered:hover,
-.btn-primary.btn-bordered:focus {
-  background-color: var(--functional-btn-primary, var(--functional-primary));
-  color: var(--functional-btn-primary-color, var(--functional-light));
-}
-
-.btn-primary:visited {
-  color: var(--functional-btn-primary-color, var(--functional-light));
-}
-
-.btn-secondary {
-  background-color: var(--functional-btn-secondary, var(--functional-secondary));
-  border-color: var(--functional-btn-secondary, var(--functional-secondary));
-  color: var(--functional-btn-secondary-color, var(--functional-light));
-}
-
-/* Border and font is secondary. When hovered, we invert with secondary background and white font */
-
-.btn-secondary.btn-bordered {
-  color: var(--functional-btn-secondary, var(--functional-secondary));
-}
-
-.btn-secondary.btn-bordered:hover,
-.btn-secondary.btn-bordered:focus {
-  background-color: var(--functional-btn-secondary, var(--functional-secondary));
-  color: var(--functional-btn-secondary-color, var(--functional-light));
-}
-
-.btn-secondary:visited {
-  color: var(--functional-btn-secondary-color, var(--functional-light));
-}
-
-/*
-/**
-  * Border Buttons
-  */
-
-.btn-bordered {
-  border-width: 1px;
-  background: transparent;
-}
-
-/**
-  * Sizes
-  */
-
-.btn-large {
-  font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
-  height: 3rem;
-  line-height: 3rem;
-  padding: 0 3rem;
-}
-
-.btn-small {
-  font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
-  height: 2rem;
-  line-height: 2rem;
-  padding: 0 2rem;
-}
-
-/**
-  * Rounded
-  */
-
-.btn-rounded {
-  border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
-}
-
-.btn-pill {
-  border-radius: 200px;
-}
-
-/*
-  * Size Adjustment for equal height & width buttons
-  *
-  * Remove padding
-  */
-
-.btn-circle {
-  border-radius: 100%;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0 !important;
-}
-
-.btn-circle-large {
-  font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
-  width: 3rem;
-  height: 3rem;
-}
-
-.btn-circle-small {
-  font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
-  width: 2rem;
-  height: 2rem;
-}
-
-/**
- * Button Block (stacked)
- */
-
-.btn-block {
-  width: 100%;
-}
-
-/* This is a utility class used if you literally want to stack block buttons one after another.
-Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
-
-.btn-block-following {
-  margin-block-start: -1px;
-}
-
-.btn-grouped {
-  border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
-}
-
-.btn-grouped:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-inline-end: -1px;
-}
-
-.btn-grouped:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.btn-capsule {
-  --padding-side: calc(var(--functional-side-padding, 0.75rem) * 1.5);
-
-  border-radius: var(--functional-radius-capsule);
-  padding-inline-start: var(--padding-side);
-  padding-inline-end: var(--padding-side);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .btn,
-  .btn:focus {
-    transition-duration: 0.001ms !important;
-  }
-}
-
-/**
- * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
- * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
- */
-
-:is(.btn-link, .btn-blank) {
-  font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
-  font-size: var(--functional-btn-font-size, 1rem);
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  transition: none;
-}
-
-/* Since blank buttons can be used for things like input addons we don't want to go crazy
-on the side padding. As such, these have a good bit less then regular buttons. */
-
-.btn-blank {
-  --functional-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
-
-  padding-inline-start: var(--functional-btn-blank-side-padding);
-  padding-inline-end: var(--functional-btn-blank-side-padding);
-}
-
-/* A button blank with link color text */
-
-.btn-link {
-  color: var(--functional-btn-primary, var(--functional-primary));
-}
-
-.btn-link:hover {
-  cursor: pointer;
-}
-
-/**
- * Button Groups. See also button-core.css which has btn-grouped which needs to be
- * applied to the buttons that are projected within a button group.
- */
-
-.btn-group {
-  display: inline-flex;
-  flex-direction: row;
-}</style>
-<script lang='ts'>
-    import { AlignItmes, ComponentSize, Justify, Orientation } from './Styling.js'
-	import { mergedClasses } from './CssHelper.js';
-
-    export let css: string = ""
-    export let href: string = ""
-
-    export let isPrimary: boolean = false
-    export let isDisabled: boolean = false
-    export let isBordered: boolean = false
-    export let isSecondary: boolean = false
-    export let idRounded: boolean = false
-    export let idPill: boolean = false
-    export let idBlock: boolean = false
-    export let idCapsule: boolean = false
-    export let idCircle: boolean = false
-    export let idGrouped: boolean = false
-    export let isCircle: boolean = false
-    export let isFlex: boolean = true
-    export let size: ComponentSize = ComponentSize.Normal
-    export let justify: Justify = Justify.Center
-    export let alignItems: AlignItmes = AlignItmes.Center
-    export let orientation: Orientation = Orientation.Row
-    export let role: string = "link"
-
-    $: isSmall = size === ComponentSize.Small
-    $: isLarge = size === ComponentSize.Large
-
-    $: klasses =  mergedClasses(
-        isPrimary ? 'btn-primary' : '',
-        isDisabled? 'disabled': '',
-
-        isBordered ? 'btn-bordered' : '',
-        isSecondary ? 'btn-secondary' : '',
-        
-        idRounded ? 'btn-rounded' : '',
-        idPill ? 'btn-pill' : '', 
-        idBlock ? 'btn-block' : '', 
-        idCapsule ? 'btn-capsule' : '',
-        idCircle ? 'btn-circle' : '',
-        idGrouped ? 'btn-grouped' : '', 
-
-        isLarge ? 'btn-large' : '',
-        isSmall ? 'btn-small' : '',
-
-        isLarge && isCircle ? 'btn-large btn-circle-large' : '',
-        isSmall && idCircle ? 'btn-small btn-circle-small' : '',
-
-        isFlex ? `flex` : '',
-        isFlex ? `${orientation}` : '',
-        isFlex ? `${justify}` : '',
-        isFlex ? `${alignItems}` : '',
-
-        css ? css : 'btn');
-</script>
-<a class={klasses} href={href}>
-    <slot />
-</a>

package/dist/components/Link.svelte.d.ts

@@ -1,48 +0,0 @@
-import { AlignItmes, ComponentSize, Justify, Orientation } from './Styling.js';
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Link: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    css?: string;
-    href?: string;
-    isPrimary?: boolean;
-    isDisabled?: boolean;
-    isBordered?: boolean;
-    isSecondary?: boolean;
-    idRounded?: boolean;
-    idPill?: boolean;
-    idBlock?: boolean;
-    idCapsule?: boolean;
-    idCircle?: boolean;
-    idGrouped?: boolean;
-    isCircle?: boolean;
-    isFlex?: boolean;
-    size?: ComponentSize;
-    justify?: Justify;
-    alignItems?: AlignItmes;
-    orientation?: Orientation;
-    role?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Link = InstanceType<typeof Link>;
-export default Link;

package/dist/components/Logo.svelte

@@ -1,38 +0,0 @@
-<style>
-	a {
-		display: var(--functional-logo-display, 'inline-block');
-		margin: var(--functional-mobile-logo-margin);
-		padding: var(--functional-mobile-logo-padding);
-	}
-	a img {
-		width: 100%;
-	}
-	
-	@media (min-width: 960px) {
-		a img {
-			margin: var(--functional-logo-margin);
-			padding: var(--functional-logo-padding);
-		}
-	}	
-</style>
-
-<script lang='ts'>
-	/**
-	 * @type {string}
-	 */
-	export let companyName: string
-	
-	/**
-	 * @type {string}
-	 */
-	 export let logoUrl: string
-
-	/**
-	 * @type {string}
-	 */
-	 export let css: string = "logo"
-</script>
-
-<a href="/" class={css}>
-	<img src={logoUrl} alt={companyName} loading="lazy"/>
-</a>

package/dist/components/Logo.svelte.d.ts

@@ -1,28 +0,0 @@
-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;
-}
-declare const Logo: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * @type {string}
-         */ companyName: string;
-    /**
-         * @type {string}
-         */ logoUrl: string;
-    /**
-         * @type {string}
-         */ css?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Logo = InstanceType<typeof Logo>;
-export default Logo;

package/dist/components/Spacer.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { mergedClasses } from './CssHelper.js';
-	import { Sizes } from './Styling.js';
-
-	interface Props {
-		width: Sizes;
-		height: Sizes;
-	}
-
-	let { width = Sizes.V0, height = Sizes.V0 } = $props();
-
-	const klasses = mergedClasses(width ? `w${width}` : '', height ? `h${height}` : '');
-</script>
-
-<div class={klasses}></div>
-
-<style>
-	div {
-		display: block;
-		height: 100%;
-	}
-</style>

package/dist/components/Spacer.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const Spacer: import("svelte").Component<{
-    width?: any;
-    height?: any;
-}, {}, "">;
-type Spacer = ReturnType<typeof Spacer>;
-export default Spacer;

package/dist/components/Well.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { mergedClasses } from './CssHelper.js';
-	import { AlignItmes, Justify, Orientation } from './Styling.js';
-
-	interface WellProps {
-		css: string;
-		orientation: Orientation;
-		justify: Justify;
-		alignItems: AlignItmes;
-        children: Snippet;
-	}
-	let {
-        children,
-		css = '',
-		orientation = Orientation.Column,
-		justify = Justify.Start,
-		alignItems = AlignItmes.Start
-	}: WellProps = $props();
-
-	let klasses = mergedClasses('flex', `${orientation}`, `${justify}`, `${alignItems}`, css ? css : '');
-</script>
-
-<div class={klasses}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		width: var(--functional-mobile-content-width, 95%);
-		margin: var(--functional-mobile-content-margin, var(--fluid-8));
-	}
-
-	@media (min-width: 960px) {
-		div {
-			width: var(--functional-content-width, 95%);
-			margin: var(--functional-content-margin, var(--fluid-8));
-		}
-	}
-</style>

package/dist/components/Well.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import { AlignItmes, Justify, Orientation } from './Styling.js';
-interface WellProps {
-    css: string;
-    orientation: Orientation;
-    justify: Justify;
-    alignItems: AlignItmes;
-    children: Snippet;
-}
-declare const Well: import("svelte").Component<WellProps, {}, "">;
-type Well = ReturnType<typeof Well>;
-export default Well;