@functionalcms/svelte-components 2.33.2 → 2.34.2

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

@@ -0,0 +1,8 @@
+/**
+ * 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/Card/Card.svelte

@@ -0,0 +1,133 @@
+<style>
+/**
+ * Cards
+ *
+ * I drew some inspiration from the article on media-query less cards:
+ * https://css-tricks.com/how-to-make-a-media-query-less-card-component/
+ */
+.card,
+.card-base {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.card-border {
+  border: 1px solid var(--functional-card-border-color, var(--functional-gray-light));
+}
+
+.card-rounded {
+  border-radius: var(--functional-radius, 0.25rem);
+}
+
+.card-shadow {
+  box-shadow:
+    var(--functional-card-boxshadow1-offset-x, 0)
+    var(--functional-card-boxshadow1-offset-y, 0.375rem)
+    var(--functional-card-boxshadow1-blur, 0.5625rem)
+    var(--functional-card-boxshadow1-color, rgb(6 6 6 / 7.5%)),
+    var(--functional-card-boxshadow2-offset-x, 0) var(--functional-card-boxshadow2-offset-y, 0)
+    var(--functional-card-boxshadow2-blur, 1px)
+    var(--functional-card-boxshadow2-color, rgb(5 5 5 / 10%));
+  border-radius: var(--functional-card-border-radius, var(--functional-radius, 0.25rem));
+  overflow: hidden;
+}
+
+.card-shadow:hover {
+  box-shadow:
+    var(--functional-card-boxshadow1-offset-x, 0)
+    var(--functional-card-boxshadow1-offset-y, 0.375rem)
+    var(--functional-card-boxshadow1-blur, 0.875rem)
+    var(--functional-card-boxshadow1-color, rgb(4 4 4 / 10%)),
+    var(--functional-card-boxshadow2-offset-x, 0) var(--functional-card-boxshadow2-offset-y, 0)
+    var(--functional-card-boxshadow2-blur, 2px)
+    var(--functional-card-boxshadow2-color, rgb(3 3 3 / 10%));
+}
+
+/**
+ * Animates the y position and box shadow on hover
+ */
+.card-animated {
+  transition:
+    box-shadow ease-out 5s,
+    transform var(--functional-timing-fast)
+    cubic-bezier(
+      var(--functional-card-cubic-1, 0.39),
+      var(--functional-card-cubic-2, 0.575),
+      var(--functional-card-cubic-3, 0.565),
+      var(--functional-card-cubic-4, 1)
+    );
+}
+
+.card-animated:hover {
+  transform: translateY(var(--functional-card-translate-y-hover, -3px));
+  transition:
+    box-shadow ease-out var(--functional-timing-fast),
+    transform var(--functional-timing-slow)
+    cubic-bezier(
+      var(--functional-card-cubic-1, 0.39),
+      var(--functional-card-cubic-2, 0.575),
+      var(--functional-card-cubic-3, 0.565),
+      var(--functional-card-cubic-4, 1)
+    );
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .card-animated,
+  .card-animated:hover {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+.card-stacked {
+  flex-direction: column;
+}
+
+.card-success {
+  background: var(--functional-action-light);
+  color: var(--functional-action-dark);
+}
+
+.card-info {
+  background: var(--functional-primary-light);
+  color: var(--functional-primary-dark);
+}
+
+.card-error {
+  background: var(--functional-error-light);
+  color: var(--functional-error-dark);
+}
+
+.card-warning {
+  background: var(--functional-warning-light);
+  color: var(--functional-warning-dark);
+}
+
+</style>
+  
+<script>export let isAnimated = false;
+export let isSkinned = true;
+export let isStacked = false;
+export let isShadow = false;
+export let isBorder = false;
+export let isRounded = false;
+export let type = "";
+export let css = "";
+let klasses = [
+  isSkinned ? "card" : "card-base",
+  isAnimated ? "card-animated" : "",
+  isStacked ? "card-stacked" : "",
+  isShadow ? "card-shadow" : "",
+  isRounded ? "card-rounded" : "",
+  isBorder ? "card-border" : "",
+  type ? `card-${type}` : "",
+  css ? `${css}` : ""
+].filter((klass) => klass.length).join(" ");
+</script>
+
+<div class={klasses} on:click on:focus on:blur>
+  <slot />
+</div>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isAnimated?: boolean;
+        isSkinned?: boolean;
+        isStacked?: boolean;
+        isShadow?: boolean;
+        isBorder?: boolean;
+        isRounded?: boolean;
+        type?: string;
+        css?: string;
+    };
+    events: {
+        click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/dist/components/agnostic/ChoiceInput/ChoiceInput.svelte

@@ -0,0 +1,337 @@
+<style>
+/**
+ * These radio and checkbox customizations are an amalgamation of various resources I've
+ * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
+ * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
+ * of inclusive hiding and custom radio/checkbox inputs.
+ */
+.checkbox-group,
+.radio-group {
+  --width-28: calc(7 * var(--fluid-4)); /* 1.75rem/28px */
+
+  border: 1px solid var(--functional-checkbox-border-color, var(--functional-gray-light));
+  padding: var(--fluid-24);
+  padding-top: var(--fluid-14);
+  border-radius: var(--fluid-8);
+}
+
+.checkbox-group-large,
+.radio-group-large {
+  padding: var(--width-28);
+  padding-top: var(--fluid-16);
+}
+
+.checkbox-legend,
+.radio-legend {
+  padding: var(--fluid-2) var(--fluid-14);
+  border-radius: var(--fluid-2);
+}
+
+/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
+ */
+.checkbox,
+.radio {
+  position: absolute;
+  width: var(--fluid-14);
+  height: var(--fluid-14);
+  opacity: 0%;
+}
+
+.checkbox-small,
+.radio-small {
+  width: var(--fluid-12);
+  height: var(--fluid-12);
+}
+
+.checkbox-large,
+.radio-large {
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+}
+
+.checkbox-label-wrap,
+.radio-label-wrap {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox-label-wrap-inline,
+.radio-label-wrap-inline {
+  display: inline-flex;
+}
+
+.checkbox-label-wrap-inline:not(:last-child),
+.radio-label-wrap-inline:not(:last-child) {
+  margin-inline-end: var(--fluid-8);
+}
+
+/* These are not actual <label> elements but the <span> label copy elements */
+.checkbox-label-copy,
+.radio-label-copy,
+.checkbox-label,
+.radio-label {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.checkbox-label-copy-small,
+.radio-label-copy-small {
+  font-size: var(--functional-small); /* 0.875rem */
+}
+
+.checkbox-label-copy-large,
+.radio-label-copy-large {
+  font-size: calc(var(--functional-body) + 2px); /* 1rem + 2px (~18px) */
+}
+
+/* The checkmark itself */
+.checkbox-label::after {
+  content: "";
+  position: absolute;
+  left: var(--fluid-6);
+  top: 1px;
+  width: var(--fluid-6);
+  height: var(--fluid-12);
+  border: solid var(--functional-light);
+  border-width: 0 var(--fluid-2) var(--fluid-2) 0;
+  transform-origin: center center;
+  transform: rotate(40deg) scale(0);
+  transition-property: border, background-color, transform;
+  transition-duration: var(--functional-timing-fast);
+  transition-timing-function: ease-in-out;
+}
+
+.checkbox-label::before,
+.radio-label::before {
+  content: "";
+  display: inline-block;
+  margin-inline-end: var(--functional-checkbox-spacing-end, 0.75rem);
+  transition: var(--functional-timing-fast) ease-out all;
+}
+
+/* Since we build up the radio size outwardly, it's naturally larger then the checkboxes
+ so we add a multiplyer to even those out initially */
+.checkbox-label::before {
+  border: 2px solid var(--functional-checkbox-border-color, var(--functional-gray-light));
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+  transition: box-shadow var(--functional-timing-fast) ease-out;
+}
+
+.radio-label::before {
+  width: var(--fluid-14);
+  height: var(--fluid-14);
+  vertical-align: calc(-1 * var(--fluid-2));
+  border-radius: 50%;
+  border: var(--fluid-2) solid var(--functional-checkbox-light, var(--functional-light));
+  box-shadow: 0 0 0 var(--fluid-2) var(--functional-checkbox-border-color, var(--functional-gray-light));
+  transition: box-shadow var(--functional-timing-fast) ease-out;
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .checkbox-label::after,
+  .checkbox-label::before,
+  .radio-label::before {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+.checkbox-label-small::after {
+  left: calc(1.25 * var(--fluid-4));
+  top: 0;
+}
+
+.checkbox-label-small::before {
+  width: var(--fluid-14);
+  height: var(--fluid-14);
+}
+
+.radio-label-small::before {
+  width: var(--fluid-12);
+  height: var(--fluid-12);
+}
+
+.checkbox-label-large::after {
+  left: calc(1.75 * var(--fluid-4));
+}
+
+.checkbox-label-large::before {
+  width: var(--fluid-18);
+  height: var(--fluid-18);
+}
+
+.radio-label-large::before {
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+}
+
+/* the checked style using the :checked pseudo class */
+.radio:checked + .radio-label::before {
+  background: var(--functional-checkbox-fill-color, #08a880);
+  box-shadow: 0 0 0 var(--fluid-2) var(--functional-checkbox-border-color, var(--functional-gray-light));
+}
+
+.radio:focus + .radio-label::before {
+  /* stylelint-disable-next-line max-line-length */
+  box-shadow: 0 0 0 var(--fluid-2) var(--functional-checkbox-border-color, var(--functional-gray-light)), 0 0 0 calc(1.5 * var(--fluid-2)) var(--functional-light), 0 0 0 calc(2.25 * var(--fluid-2)) var(--functional-focus-ring-color);
+}
+
+.checkbox:focus + .checkbox-label::before {
+  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+
+  /* Needed for High Contrast mode */
+  /* stylelint-disable-next-line max-line-length */
+  outline: var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style) var(--functional-focus-ring-outline-color);
+}
+
+.checkbox:checked + .checkbox-label::after {
+  transform: rotate(40deg) scale(1);
+}
+
+.checkbox:checked + .checkbox-label::before {
+  background: var(--functional-checkbox-fill-color, #08a880);
+  border: 2px solid var(--functional-checkbox-fill-color, #08a880);
+}
+
+/**
+  * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
+  * utilities.css if they're design requires it.
+  */
+.checkbox-group-hidden,
+.radio-group-hidden {
+  border: 0;
+  margin-block-start: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  padding-block-end: 0;
+}
+
+/* Targets both the label container and the span label that is used
+to style the custom radio / checkbox. Note it does NOT target the input
+itself. */
+.checkbox[disabled] ~ .checkbox-label-copy,
+.radio[disabled] ~ .radio-label-copy,
+.checkbox-label-wrap[class="disabled"],
+.radio-label-wrap[class="disabled"],
+.checkbox-label-wrap-inline[class="disabled"],
+.radio-label-wrap-inline[class="disabled"] {
+  color: var(--functional-input-disabled-color, var(--functional-disabled-color)) !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+  opacity: 80% !important;
+}
+
+.choice-input-error {
+  color: var(--functional-input-error-color, var(--functional-error));
+}
+
+@media screen and (-ms-high-contrast: active) {
+  /* High contrast mode outline hacks */
+  .checkbox-label-wrap[class="disabled"],
+  .radio-label-wrap[class="disabled"],
+  .checkbox-label-wrap-inline[class="disabled"],
+  .radio-label-wrap-inline[class="disabled"] {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+}
+
+</style>
+
+<script>export let id;
+export let isSkinned = true;
+export let isFieldset = true;
+export let isInline = false;
+export let isDisabled = void 0;
+export let isInvalid = false;
+export let options = [];
+export let disabledOptions = [];
+export let checkedOptions = [];
+export let type = "checkbox";
+export let legendLabel = type || "choice input";
+export let size = "";
+export let checked = [];
+$: labelClasses = [
+  type ? `${type}-label-wrap` : "",
+  isInline ? `${type}-label-wrap-inline` : "",
+  isDisabled ? "disabled" : ""
+].filter((c) => c.length).join(" ");
+$: labelSpanClasses = [
+  type ? `${type}-label` : "",
+  isInvalid ? "choice-input-error" : "",
+  size ? `${type}-label-${size}` : ""
+].filter((c) => c.length).join(" ");
+$: skin = isSkinned ? `${type}-legend` : "";
+$: labelCopyClasses = [
+  // Will also need to work in the small
+  // and large sizes here for the text copy
+  type ? `${type}-label-copy` : "",
+  size ? `${type}-label-copy-${size}` : "",
+  isInvalid ? "choice-input-error" : ""
+].filter((c) => c.length).join(" ");
+$: legendClasses = [
+  skin,
+  // .screenreader-only is expected to be globally available via common.min.css
+  isFieldset === false ? "screenreader-only" : ""
+].filter((c) => c).join(" ");
+$: fieldsetClasses = () => {
+  const skin2 = isSkinned ? `${type}-group` : "";
+  const sizeSkin = isSkinned && size === "large" ? `${type}-group-${size}` : "";
+  let klasses = [
+    skin2,
+    sizeSkin,
+    isFieldset === false ? `${type}-group-hidden` : ""
+  ];
+  klasses = klasses.filter((klass) => klass.length);
+  return klasses.join(" ");
+};
+$: inputClasses = () => {
+  let inputKlasses = [
+    type ? `${type}` : "",
+    size ? `${type}-${size}` : ""
+    // isDisabled ? "disabled" : "",
+  ];
+  inputKlasses = inputKlasses.filter((klass) => klass.length);
+  return inputKlasses.join(" ");
+};
+$: onChange = (e) => {
+  checked = Array.from(document.getElementsByName(e.target.name)).filter((el) => el.checked).map((el) => el.value);
+};
+</script>
+
+<fieldset class={fieldsetClasses()}>
+  <legend class={legendClasses}>{legendLabel}</legend>
+  {#each options as { name, value, label }, index}
+    <label
+      class={labelClasses}
+      class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
+    >
+      <input
+        class={inputClasses()}
+        id="{id}-{name}-{index}"
+        type={type}
+        name={name}
+        value={value}
+        disabled={isDisabled || disabledOptions.includes(value)}
+        checked={checkedOptions.includes(value)}
+        on:blur
+        on:change={onChange}
+        on:input
+        on:click
+        on:focus
+        {...$$restProps}
+      />
+      <span class={labelSpanClasses} aria-hidden="true"></span>
+      <span class={labelCopyClasses}>{label}</span>
+    </label>
+  {/each}
+</fieldset>

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

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType } from './api';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: any;
+        isSkinned?: boolean | undefined;
+        isFieldset?: boolean | undefined;
+        isInline?: boolean | undefined;
+        isDisabled?: undefined;
+        isInvalid?: boolean | undefined;
+        options?: ChoiceInputOption[] | undefined;
+        disabledOptions?: any[] | undefined;
+        checkedOptions?: any[] | undefined;
+        type?: ChoiceInputType | undefined;
+        legendLabel?: ChoiceInputType | undefined;
+        size?: ChoiceInputSize | undefined;
+        checked?: any[] | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        input: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ChoiceInputProps = typeof __propDef.props;
+export type ChoiceInputEvents = typeof __propDef.events;
+export type ChoiceInputSlots = typeof __propDef.slots;
+export default class ChoiceInput extends SvelteComponent<ChoiceInputProps, ChoiceInputEvents, ChoiceInputSlots> {
+}
+export {};

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

@@ -0,0 +1,7 @@
+export type ChoiceInputOption = {
+    name: string;
+    value: string;
+    label: string;
+};
+export type ChoiceInputType = "checkbox" | "radio";
+export type ChoiceInputSize = "small" | "large" | "";

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

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

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

@@ -0,0 +1,120 @@
+<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>export let size = "";
+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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { CloseSizes } from './api';
+declare const __propDef: {
+    props: {
+        size?: CloseSizes;
+        isFaux?: boolean;
+        color?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CloseProps = typeof __propDef.props;
+export type CloseEvents = typeof __propDef.events;
+export type CloseSlots = typeof __propDef.slots;
+export default class Close extends SvelteComponent<CloseProps, CloseEvents, CloseSlots> {
+}
+export {};

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

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