@functionalcms/svelte-components 3.5.20 → 4.0.0-pre-2.0

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

@@ -1,237 +0,0 @@
-.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;
-  }
-}

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

@@ -1,31 +0,0 @@
-/**
- * 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;
-}

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

@@ -1,8 +0,0 @@
-/**
- * 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;
-}

package/dist/components/agnostic/Close/Close.svelte

@@ -1,124 +0,0 @@
-<style>
-.close-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  width: var(--fluid-24);
-  height: var(--fluid-24);
-}
-
-.close-button:hover,
-.close-button:active,
-.close-button:focus {
-  background: none;
-
-  /* Needed for High Contrast mode */
-  outline:
-    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
-    var(--functional-focus-ring-outline-color);
-}
-
-.close-button:focus {
-  box-shadow: 0 0 0 3px var(--functional-focus-ring-color);
-  transition: box-shadow var(--functional-timing-fast) ease-out;
-}
-
-.close {
-  width: var(--fluid-12);
-  height: var(--fluid-12);
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1em;
-  flex-shrink: 0;
-  color: currentColor;
-}
-
-.close-button .close {
-  opacity: 80%;
-  transition: opacity var(--functional-timing-medium);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .close-button:focus,
-  .close-button .close {
-    transition-duration: 0.001ms !important;
-  }
-}
-
-.close-button-small {
-  width: var(--fluid-18);
-  height: var(--fluid-18);
-}
-
-.close-button-large {
-  width: var(--fluid-32);
-  height: var(--fluid-32);
-}
-
-.close-button-xlarge {
-  width: var(--fluid-40);
-  height: var(--fluid-40);
-}
-
-.close-button-small > .close {
-  width: 0.5625rem;
-  height: 0.5625rem;
-}
-
-.close-button-large > .close {
-  width: var(--fluid-16);
-  height: var(--fluid-16);
-}
-
-.close-button-xlarge > .close {
-  width: var(--fluid-20);
-  height: var(--fluid-20);
-}
-
-.close-button:hover .close {
-  opacity: 100%;
-}
-
-</style>
-  
-<script lang="ts">
-  import type { CloseSizes } from './api';
-  export let size: CloseSizes = "";
-  export let isFaux = false;
-  export let color = "inherit";
-  const closeButtonClasses = [
-    "close-button",
-    size ? `close-button-${size}` : "",
-  ]
-    .filter((c) => c)
-    .join(" ");
-</script>
-
-{#if isFaux}
-  <div class={closeButtonClasses}>
-    <svg class="close" viewBox="0 0 24 24" aria-hidden="true">
-      <path
-        fill="currentColor"
-        d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z"
-      ></path>
-    </svg>
-  </div>
-{:else}
-  <button on:click class={closeButtonClasses} aria-label="Close">
-    <svg
-      class="close"
-      style:color={color}
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-    >
-      <path
-        fill="currentColor"
-        d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z"
-      ></path>
-    </svg>
-  </button>
-{/if}

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

@@ -1,25 +0,0 @@
-import type { CloseSizes } from './api';
-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 Close: $$__sveltets_2_IsomorphicComponent<{
-    size?: CloseSizes;
-    isFaux?: boolean;
-    color?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Close = InstanceType<typeof Close>;
-export default Close;

package/dist/components/agnostic/Close/api.d.ts

@@ -1 +0,0 @@
-export type CloseSizes = 'small' | 'large' | 'xlarge' | '';

package/dist/components/agnostic/Divider/Divider.svelte

@@ -1,141 +0,0 @@
-<script lang="ts">
-	import type { DividerJustify, DividerTypes, DividerSizes } from './api';
-
-	export let isVertical = false;
-
-	// start, end (centered by default)
-	export let justify: DividerJustify = '';
-	// info, success, error, warning
-	export let type: DividerTypes = '';
-	// small (default is medium) large xlarge
-	export let size: DividerSizes = '';
-
-	const dividerClasses: string = [
-		'divider',
-		isVertical ? 'divider-vertical' : '',
-		justify ? `divider-justify-${justify}` : '',
-		size ? `divider-${size}` : '',
-		type ? `divider-${type}` : ''
-	]
-		.filter((cl) => cl.length)
-		.join(' ');
-</script>
-
-<div class={dividerClasses}></div>
-
-<style>
-	.divider {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		white-space: nowrap;
-		width: 100%;
-	}
-
-	.divider::before,
-	.divider::after {
-		content: '';
-		background-color: var(--functional-gray-mid);
-		height: var(--fluid-2);
-		flex-grow: 1;
-	}
-
-	.divider-small::before,
-	.divider-small::after {
-		height: 1px;
-	}
-
-	.divider-large::before,
-	.divider-large::after {
-		height: var(--fluid-4);
-	}
-
-	.divider-xlarge::before,
-	.divider-xlarge::after {
-		height: var(--fluid-6);
-	}
-
-	.divider-justify-end::after,
-	.divider-justify-start::before {
-		flex-grow: 0;
-		flex-basis: 3%;
-	}
-
-	.divider-content {
-		padding-inline-start: var(--fluid-16);
-		padding-inline-end: var(--fluid-16);
-	}
-
-	.divider-vertical {
-		height: auto;
-		margin: 0 var(--fluid-16);
-		width: var(--fluid-16);
-		flex-direction: column;
-		align-self: stretch;
-	}
-
-	.divider-vertical::before,
-	.divider-vertical::after {
-		width: var(--fluid-2);
-	}
-
-	.divider-vertical.divider-small::before,
-	.divider-vertical.divider-small::after {
-		width: 1px;
-	}
-
-	.divider-vertical.divider-large::before,
-	.divider-vertical.divider-large::after {
-		width: var(--fluid-4);
-	}
-
-	.divider-vertical.divider-xlarge::before,
-	.divider-vertical.divider-xlarge::after {
-		width: var(--fluid-6);
-	}
-
-	.divider-vertical .divider-content {
-		padding-inline-start: var(--fluid-24);
-		padding-inline-end: var(--fluid-24);
-
-		/* Since we're vertical we need space from line above/below */
-		padding-block-start: var(--fluid-6);
-		padding-block-end: var(--fluid-6);
-	}
-
-	.divider-warning::before,
-	.divider-warning::after {
-		background-color: var(--functional-warning-border);
-	}
-
-	.divider-warning .divider-content {
-		color: var(--functional-warning-border);
-	}
-
-	.divider-error::before,
-	.divider-error::after {
-		background-color: var(--functional-error);
-	}
-
-	.divider-error .divider-content {
-		color: var(--functional-error);
-	}
-
-	.divider-success::before,
-	.divider-success::after {
-		background-color: var(--functional-action);
-	}
-
-	.divider-success .divider-content {
-		color: var(--functional-action);
-	}
-
-	.divider-info::before,
-	.divider-info::after {
-		background-color: var(--functional-primary);
-	}
-
-	.divider-info .divider-content {
-		color: var(--functional-primary);
-	}
-</style>

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

@@ -1,24 +0,0 @@
-import type { DividerJustify, DividerTypes, DividerSizes } from './api';
-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 Divider: $$__sveltets_2_IsomorphicComponent<{
-    isVertical?: boolean;
-    justify?: DividerJustify;
-    type?: DividerTypes;
-    size?: DividerSizes;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Divider = InstanceType<typeof Divider>;
-export default Divider;

package/dist/components/agnostic/Divider/api.d.ts

@@ -1,3 +0,0 @@
-export type DividerSizes = 'small' | 'large' | 'xlarge' | '';
-export type DividerJustify = 'start' | 'end' | '';
-export type DividerTypes = 'success' | 'info' | 'error' | 'warning' | '';

package/dist/components/agnostic/Divider/api.js

@@ -1 +0,0 @@
-export {};