@functionalcms/svelte-components 2.33.1 → 2.34.1

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

@@ -0,0 +1,345 @@
+<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>
+
+<script>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 = void 0;
+export let isCircle = false;
+export let isRounded = false;
+export let isSkinned = true;
+export let ariaSelected = void 0;
+export let ariaControls = void 0;
+export let tabIndex = void 0;
+$: aSelected = ariaSelected || null;
+$: tIndex = tabIndex || null;
+export let css = "";
+export let type = "button";
+$: 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={type}
+    class={klasses}
+    on:keydown
+    on:click
+    on:focus
+    on:blur
+    role={role}
+    aria-selected={aSelected}
+    aria-controls={ariaControls}
+    tab-index={tIndex}
+    disabled={isDisabled}
+    {...$$restProps}
+  >
+    <slot />
+  </button>
+{/if}

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

@@ -0,0 +1,43 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [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;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

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

@@ -0,0 +1,20 @@
+<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>export let ariaLabel = "";
+export let css = "";
+let klasses = ["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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        ariaLabel?: string;
+        css?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ButtonGroupProps = typeof __propDef.props;
+export type ButtonGroupEvents = typeof __propDef.events;
+export type ButtonGroupSlots = typeof __propDef.slots;
+export default class ButtonGroup extends SvelteComponent<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
+}
+export {};

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

@@ -0,0 +1,12 @@
+.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(--agnostic-timing-medium);
+}

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

@@ -0,0 +1,237 @@
+.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(--agnostic-timing-medium);
+}
+
+.btn-skin,
+.btn {
+  color: var(--agnostic-btn-font-color, var(--agnostic-dark));
+  background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
+  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
+
+  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
+  border-style: solid;
+  border-width: var(--agnostic-btn-border-size, 1px);
+  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
+  font-weight: var(--agnostic-btn-font-weight, 400);
+  font-size: var(--agnostic-btn-font-size, 1rem);
+
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
+  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
+  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
+  padding-inline-start: var(--agnostic-side-padding, 0.75rem);
+  padding-inline-end: var(--agnostic-side-padding, 0.75rem);
+  text-decoration: none;
+  text-align: center;
+  outline: none;
+}
+
+.btn:visited {
+  color: var(--agnostic-btn-font-color, var(--agnostic-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(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
+
+  /* Needed for High Contrast mode */
+  outline:
+    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
+    var(--agnostic-focus-ring-outline-color);
+  transition: box-shadow var(--agnostic-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(--agnostic-btn-disabled-bg, var(--agnostic-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(--agnostic-btn-disabled-color, var(--agnostic-gray-dark)) !important;
+  cursor: default !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  opacity: 80% !important;
+}
+
+.btn-primary {
+  background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
+  border-color: var(--agnostic-btn-primary, var(--agnostic-primary));
+  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
+}
+
+/* Border and font is primary. When hovered, we invert with primary background and white font */
+.btn-primary.btn-bordered {
+  color: var(--agnostic-btn-primary, var(--agnostic-primary));
+}
+
+.btn-primary.btn-bordered:hover,
+.btn-primary.btn-bordered:focus {
+  background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
+  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
+}
+
+.btn-primary:visited {
+  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
+}
+
+.btn-secondary {
+  background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
+  border-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
+  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
+}
+
+/* Border and font is secondary. When hovered, we invert with secondary background and white font */
+.btn-secondary.btn-bordered {
+  color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
+}
+
+.btn-secondary.btn-bordered:hover,
+.btn-secondary.btn-bordered:focus {
+  background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
+  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
+}
+
+.btn-secondary:visited {
+  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
+}
+
+/*
+/**
+  * Border Buttons
+  */
+.btn-bordered {
+  border-width: 1px;
+  background: transparent;
+}
+
+/**
+  * Sizes
+  */
+.btn-large {
+  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
+  height: 3rem;
+  line-height: 3rem;
+  padding: 0 3rem;
+}
+
+.btn-small {
+  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
+  height: 2rem;
+  line-height: 2rem;
+  padding: 0 2rem;
+}
+
+/**
+  * Rounded
+  */
+.btn-rounded {
+  border-radius: var(--agnostic-btn-radius, var(--agnostic-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(--agnostic-btn-font-size, 1rem) + 0.25rem);
+  width: 3rem;
+  height: 3rem;
+}
+
+.btn-circle-small {
+  font-size: calc(var(--agnostic-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(--agnostic-btn-radius, var(--agnostic-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(--agnostic-side-padding, 0.75rem) * 1.5);
+
+  border-radius: var(--agnostic-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

@@ -0,0 +1,31 @@
+/**
+ * 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(--agnostic-btn-font-family, var(--agnostic-font-family-body));
+  font-size: var(--agnostic-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 {
+  --agnostic-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
+
+  padding-inline-start: var(--agnostic-btn-blank-side-padding);
+  padding-inline-end: var(--agnostic-btn-blank-side-padding);
+}
+
+/* A button blank with link color text */
+.btn-link {
+  color: var(--agnostic-btn-primary, var(--agnostic-primary));
+}
+
+.btn-link:hover {
+  cursor: pointer;
+}