@functionalcms/svelte-components 3.5.20 → 4.0.0-pre

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/Disclose/Disclose.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { mergedClasses } from '../../CssHelper.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		title?: string;
-		isOpen?: boolean;
-		isBackground?: boolean;
-		isBordered?: boolean;
-	}
-
-	let {
-		children,
-		title = '',
-		isOpen = false,
-		isBackground = false,
-		isBordered = false
-	}: Props = $props();
-
-	const discloseClasses = mergedClasses(
-		'disclose',
-		isBackground ? 'disclose-bg' : '',
-		isBordered ? 'disclose-bordered' : ''
-	);
-</script>
-
-<details class={discloseClasses} bind:open={isOpen}>
-	<summary class="disclose-title">{title}</summary>
-	<div class="disclose-panel">
-		{@render children()}
-	</div>
-</details>
-
-<style>
-	.disclose {
-		margin-block-end: var(--fluid-4);
-
-		/* When this element is a direct child of a flex container with
-  flex-direction: column it collapses similar to an inline element even though
-  it's block. This helps prevent that. */
-		width: 100%;
-	}
-
-	.disclose-title {
-		display: block;
-		cursor: pointer;
-		font-weight: 600;
-		padding: var(--fluid-8) var(--fluid-12);
-
-		/* Required to position the icon absolutely */
-		position: relative;
-		color: inherit;
-		transition: color var(--functional-timing-slow);
-	}
-
-	.disclose-panel {
-		font-weight: 400;
-		padding: var(--fluid-16);
-	}
-
-	.disclose-title,
-	.disclose-panel {
-		margin: 0;
-	}
-
-	/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
-	.disclose-title::webkit-details-marker {
-		display: none;
-	}
-
-	.disclose-bordered .disclose-title {
-		border: 1px solid var(--functional-gray-light);
-	}
-
-	.disclose-bg .disclose-title {
-		background-color: var(--functional-gray-light);
-	}
-
-	.disclose-title: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;
-	}
-
-	.disclose-title::after {
-		color: var(--functional-gray-dark);
-		content: '\203A';
-		position: absolute;
-		right: var(--fluid-12);
-		top: 0;
-		bottom: 0;
-
-		/* Chevron thinning :) */
-		font-size: var(--fluid-32);
-		line-height: 1;
-		font-weight: 100;
-		transition: transform var(--functional-timing-slow);
-		transform: rotate(0);
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.disclose-title,
-		.disclose-title:focus,
-		.disclose-title::after {
-			transition: none;
-		}
-	}
-
-	.disclose[open] > .disclose-title::after {
-		transform: rotate(90deg);
-	}
-</style>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    title?: string;
-    isOpen?: boolean;
-    isBackground?: boolean;
-    isBordered?: boolean;
-}
-declare const Disclose: import("svelte").Component<Props, {}, "">;
-type Disclose = ReturnType<typeof Disclose>;
-export default Disclose;

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>