@functionalcms/svelte-components 3.5.20 → 4.0.0-pre

package/dist/components/agnostic/Button/Button.svelte

@@ -1,371 +0,0 @@
-<script lang="ts">
-	export let mode = '';
-	export let size = '';
-	export let isBordered = false;
-	export let isCapsule = false;
-	export let isGrouped = false;
-	export let isBlock = false;
-	export let isLink = false;
-	export let isBlank = false;
-	export let isDisabled = false;
-	export let role = undefined;
-	export let isCircle = false;
-	export let isRounded = false;
-	export let isSkinned = true;
-	// The following properties can be used by consumers of Tabs which setup their own
-	// custom buttons as these aria and tabindex attributes are required for a11y
-	export let ariaSelected = undefined;
-	export let ariaControls = undefined;
-	export let tabIndex = undefined;
-
-	$: aSelected = ariaSelected || null;
-	$: tIndex = tabIndex || null;
-	/**
-	 * This prop is an escape hatch for global CSS overrides. Likely, the most useful reason to
-	 * leverage this is to add custom responsive media query code. Note that you'll likely need
-	 * to add specificity to beat out the Svelte based CSS, and, in Svelte land you'll need to
-	 * utilize globals functionality which might look like:
-	 * @media all and (min-width: 769px) {
-	 *   :global(button.btn.button-overrides) {
-	 *     font-size: 18px;
-	 *     ...etc.
-	 */
-	export let css = '';
-
-	/**
-	 * Button type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
-	 * submit: submits form data to the server
-	 * reset: resets all the controls to their initial values, like <input type="reset">
-	 * button: button has no default behavior, and does nothing when pressed by default.
-	 */
-	export let type = 'button';
-
-	// ******************** HEY! ************************
-	// You will need to also add these to the buttonslot:
-	// agnostic-svelte/src/stories/ButtonSlot.svelte
-	$: klasses = [
-		isSkinned ? 'btn' : 'btn-base',
-		mode ? `btn-${mode}` : '',
-		size ? `btn-${size}` : '',
-		isBordered ? 'btn-bordered' : '',
-		isCapsule ? 'btn-capsule ' : '',
-		isGrouped ? 'btn-grouped' : '',
-		isBlock ? 'btn-block' : '',
-		isCircle ? 'btn-circle' : '',
-		isRounded ? 'btn-rounded' : '',
-		isDisabled ? 'disabled' : '',
-		isBlank ? 'btn-blank' : '',
-		isLink ? 'btn-link' : '',
-		css ? `${css}` : ''
-	]
-		.filter((c) => c)
-		.join(' ');
-</script>
-
-<!-- https://github.com/sveltejs/svelte/issues/2324 -->
-{#if type === 'faux'}
-	<div class={klasses}>
-		<slot />
-	</div>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		on:keydown
-		on:click
-		on:focus
-		on:blur
-		{role}
-		aria-selected={aSelected}
-		aria-controls={ariaControls}
-		tab-index={tIndex}
-		disabled={isDisabled}
-		{...$$restProps}
-	>
-		<slot />
-	</button>
-{/if}
-
-<style>
-	.btn-base {
-		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 {
-		/* 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;
-	}
-</style>

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

@@ -1,52 +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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    mode?: string | undefined;
-    size?: string | undefined;
-    isBordered?: boolean | undefined;
-    isCapsule?: boolean | undefined;
-    isGrouped?: boolean | undefined;
-    isBlock?: boolean | undefined;
-    isLink?: boolean | undefined;
-    isBlank?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    role?: undefined;
-    isCircle?: boolean | undefined;
-    isRounded?: boolean | undefined;
-    isSkinned?: boolean | undefined;
-    ariaSelected?: undefined;
-    ariaControls?: undefined;
-    tabIndex?: undefined;
-    css?: string | undefined;
-    type?: string | undefined;
-}, {
-    default: {};
-}>, {
-    keydown: KeyboardEvent;
-    click: MouseEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;

package/dist/components/agnostic/Button/ButtonGroup.svelte

@@ -1,21 +0,0 @@
-<style>
-/**
- * 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">
-  export let ariaLabel = "";
-  export let css = "";
-  let klasses: string = ["btn-group", css ? `${css}` : ""].filter((cl) => cl.length).join(' ');
-</script>
-
-<div class={klasses} role="group" aria-label={ariaLabel} on:click>
-  <slot />
-</div>

package/dist/components/agnostic/Button/ButtonGroup.svelte.d.ts

@@ -1,32 +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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ButtonGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    ariaLabel?: string;
-    css?: string;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ButtonGroup = InstanceType<typeof ButtonGroup>;
-export default ButtonGroup;

package/dist/components/agnostic/Button/button-base.css

@@ -1,12 +0,0 @@
-.btn-base {
-  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);
-}