@functionalcms/svelte-components 3.5.16 → 3.5.18

package/dist/components/agnostic/Header/Header.svelte

@@ -1,111 +0,0 @@
-<style>
-.header,
-.header-base {
-  display: block;
-}
-
-.header-base :global(img),
-.header :global(img) {
-  max-width: 100%;
-  height: auto;
-}
-
-.header,
-.header-skin {
-  background-color: var(--functional-header-background-color, var(--functional-light));
-  box-shadow:
-    var(--functional-header-box-shadow-hor, 0) var(--functional-header-box-shadow-ver, 1px)
-    var(--functional-header-box-shadow-blur, 5px) var(--functional-header-box-shadow-spread, 2px)
-    var(--functional-header-box-shadow-color, rgb(0 0 0 / 10%));
-  font-family: var(--functional-header-font-family, var(--functional-font-family-body));
-  border-bottom: 1px solid var(--functional-header-border-color, var(--functional-gray-light));
-  padding-block-start: var(--functional-vertical-pad, 0.5rem);
-  padding-block-end: var(--functional-vertical-pad, 0.5rem);
-  padding-inline-start: var(--fluid-24);
-  padding-inline-end: var(--fluid-24);
-}
-
-.header-content {
-  width: var(--functional-header-content-width, 960px);
-  max-width: 100%;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  flex-flow: wrap column;
-}
-
-/**
- * If you make your header sticky, you should likely consider that jump links
- * e.g. <h1 id="Jump-Here">... will tuck underneath the header! Here's a recommendation
- * for how to circumnavigate this issue via scroll-margin-top:
-  h1[id],
-  h2[id],
-  h3[id],
-  h4[id],
-  h5[id],
-  h6[id] {
-    scroll-margin-top: 80px;
-  }
- * In this case I have a 64px tall header so I've added 16px for clearance -- you'll need
- * to curate your own use case, but scroll-margin-top is super useful for this use case.
- */
-
-.header-sticky {
-  position: relative;
-  top: 0;
-  z-index: 10;
-}
-
-@media (min-width: 960px) {
-  .header-sticky {
-    position: sticky;
-  }
-
-  .header-content {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .header-content-start {
-    justify-content: flex-start;
-  }
-
-  .header-content-end {
-    justify-content: flex-end;
-  }
-}
-
-</style>
-
-<script lang="ts">
-  export let isSticky = false;
-  export let isSkinned = true;
-  export let isHeaderContentStart = false;
-  export let isHeaderContentEnd = false;
-  export let css = "";
-
-  const klasses: string = [
-    isSkinned ? "header" : "header-base",
-    isSticky ? "header-sticky" : "",
-    css ? `${css}` : "",
-  ]
-    .filter((cl) => cl.length)
-    .join(" ");
-
-  const headerContentClasses: string = [
-    "header-content",
-    isHeaderContentStart ? "header-content-start" : "",
-    isHeaderContentEnd ? "header-content-end" : "",
-  ]
-    .filter((cl) => cl.length)
-    .join(" ");
-</script>
-
-<nav class={klasses}>
-  <div class={headerContentClasses}>
-    <slot name="logoleft" />
-    <slot />
-    <slot name="logoright" />
-  </div>
-</nav>

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

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        isSticky?: boolean;
-        isSkinned?: boolean;
-        isHeaderContentStart?: boolean;
-        isHeaderContentEnd?: boolean;
-        css?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        logoleft: {};
-        default: {};
-        logoright: {};
-    };
-};
-export type HeaderProps = typeof __propDef.props;
-export type HeaderEvents = typeof __propDef.events;
-export type HeaderSlots = typeof __propDef.slots;
-export default class Header extends SvelteComponentTyped<HeaderProps, HeaderEvents, HeaderSlots> {
-}
-export {};

package/dist/components/agnostic/Header/HeaderNav.svelte

@@ -1,29 +0,0 @@
-<style>
-/* Goes on the <ul> */
-.header-nav {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-@media (min-width: 960px) {
-  .header-nav {
-    flex-direction: row;
-  }
-}
-
-</style>
-  
-  <script lang="ts">
-    export let css = "";
-    const containerClasses = [css ? `${css}` : ""].filter((c) => c.length);
-  </script>
-  
-  <nav class={containerClasses}>
-    <ul class="header-nav">
-      <slot />
-    </ul>
-  </nav>
-  

package/dist/components/agnostic/Header/HeaderNav.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        css?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HeaderNavProps = typeof __propDef.props;
-export type HeaderNavEvents = typeof __propDef.events;
-export type HeaderNavSlots = typeof __propDef.slots;
-export default class HeaderNav extends SvelteComponentTyped<HeaderNavProps, HeaderNavEvents, HeaderNavSlots> {
-}
-export {};

package/dist/components/agnostic/Header/HeaderNavItem.svelte

@@ -1,31 +0,0 @@
-<style>
-.header-nav-item {
-  display: inline-block;
-}
-
-.header-nav-item:not(:last-child) {
-  margin-inline-end: initial;
-  margin-block-end: var(--fluid-8);
-}
-
-.header-nav-item :global(a) {
-  color: var(--functional-header-color, var(--functional-font-color));
-}
-
-@media (min-width: 960px) {
-  .header-nav-item:not(:last-child) {
-    margin-inline-end: var(--functional-header-nav-spacing, var(--fluid-32));
-    margin-block-end: initial;
-  }
-}
-
-</style>
-
-<script lang="ts">
-  export let css = "";
-  let klasses: string = ["header-nav-item", css ? `${css}` : ""].filter(cl => cl && cl.length).join(' ');
-</script>
-
-<li class={klasses}>
-  <slot />
-</li>

package/dist/components/agnostic/Header/HeaderNavItem.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        css?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HeaderNavItemProps = typeof __propDef.props;
-export type HeaderNavItemEvents = typeof __propDef.events;
-export type HeaderNavItemSlots = typeof __propDef.slots;
-export default class HeaderNavItem extends SvelteComponentTyped<HeaderNavItemProps, HeaderNavItemEvents, HeaderNavItemSlots> {
-}
-export {};

package/dist/components/agnostic/Icon/Icon.svelte

@@ -1,188 +0,0 @@
-<style>
-.icon-base {
-  display: inline-flex;
-  text-align: center;
-
-  /* Ensures no "stretching" of icons to reach 100% of container's width */
-  max-width: 100%;
-
-  /* Ensure SVGs don't have click events -- typically we want enclosing button to handle */
-  pointer-events: none;
-  user-select: none;
-}
-
-/* We need to make both the span and svg same height (span .icon-svg) */
-.icon,
-.icon-skin {
-  width: var(--fluid-16);
-  height: var(--fluid-16);
-}
-
-.icon-14 {
-  width: var(--fluid-14);
-  height: var(--fluid-14);
-}
-
-.icon-16 {
-  width: var(--fluid-16);
-  height: var(--fluid-16);
-}
-
-.icon-18 {
-  width: var(--fluid-18);
-  height: var(--fluid-18);
-}
-
-.icon-20 {
-  width: var(--fluid-20);
-  height: var(--fluid-20);
-}
-
-.icon-24,
-.icon-svg-24 {
-  width: var(--fluid-24);
-  height: var(--fluid-24);
-}
-
-.icon-32 {
-  width: var(--fluid-32);
-  height: var(--fluid-32);
-}
-
-.icon-36 {
-  width: var(--fluid-36);
-  height: var(--fluid-36);
-}
-
-.icon-40 {
-  width: var(--fluid-40);
-  height: var(--fluid-40);
-}
-
-.icon-48 {
-  width: var(--fluid-48);
-  height: var(--fluid-48);
-}
-
-.icon-56 {
-  width: var(--fluid-56);
-  height: var(--fluid-56);
-}
-
-.icon-64 {
-  width: var(--fluid-64);
-  height: var(--fluid-64);
-}
-
-:global(.icon-svg) {
-  width: var(--fluid-16);
-  height: var(--fluid-16);
-  fill: currentColor;
-}
-
-:global(.icon-svg-14) {
-  width: var(--fluid-14);
-  height: var(--fluid-14);
-}
-
-:global(.icon-svg-16) {
-  width: var(--fluid-16);
-  height: var(--fluid-16);
-}
-
-:global(.icon-svg-18) {
-  width: var(--fluid-18);
-  height: var(--fluid-18);
-}
-
-:global(.icon-svg-20) {
-  width: var(--fluid-20);
-  height: var(--fluid-20);
-}
-
-:global(.icon-svg-24) {
-  width: var(--fluid-24);
-  height: var(--fluid-24);
-}
-
-:global(.icon-svg-32) {
-  width: var(--fluid-32);
-  height: var(--fluid-32);
-}
-
-:global(.icon-svg-36) {
-  width: var(--fluid-36);
-  height: var(--fluid-36);
-}
-
-:global(.icon-svg-40) {
-  width: var(--fluid-40);
-  height: var(--fluid-40);
-}
-
-:global(.icon-svg-48) {
-  width: var(--fluid-48);
-  height: var(--fluid-48);
-}
-
-:global(.icon-svg-56) {
-  width: var(--fluid-56);
-  height: var(--fluid-56);
-}
-
-:global(.icon-svg-64) {
-  width: var(--fluid-64);
-  height: var(--fluid-64);
-}
-
-:global(.icon-svg-info) {
-  color: var(--functional-primary);
-}
-
-:global(.icon-svg-action),
-:global(.icon-svg-success) {
-  color: var(--functional-action);
-}
-
-:global(.icon-svg-warning) {
-  color: var(--functional-warning-border-accent);
-}
-
-:global(.icon-svg-error) {
-  color: var(--functional-error);
-}
-</style>
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import type { IconSize, IconType } from './api';
-  export let type: IconType = '';
-  export let size: IconSize = 14;
-  export let isSkinned = true;
-  let spanRef;
-
-  const iconClasses = [
-    "screenreader-only",
-    isSkinned ? "icon" : "icon-base",
-    type ? `icon-${type}` : "",
-    size ? `icon-${size}` : "",
-  ]
-    .filter((cls) => cls)
-    .join(" ");
-
-  onMount(() => {
-    const svg = spanRef.querySelector("svg");
-    svg.classList.add("icon-svg");
-    if (svg) {
-      if (size) svg.classList.add(`icon-svg-${size}`);
-      if (type) svg.classList.add(`icon-svg-${type}`);
-
-      // Now that we've setup our SVG classes we can visually unhide the icon
-      spanRef.classList.remove("screenreader-only");
-    }
-  });
-</script>
-
-<span bind:this={spanRef} class={iconClasses}>
-  <slot />
-</span>

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

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { IconSize, IconType } from './api';
-declare const __propDef: {
-    props: {
-        type?: IconType;
-        size?: IconSize;
-        isSkinned?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type IconProps = typeof __propDef.props;
-export type IconEvents = typeof __propDef.events;
-export type IconSlots = typeof __propDef.slots;
-export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
-}
-export {};

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

@@ -1,2 +0,0 @@
-export type IconSize = 14 | 16 | 18 | 20 | 24 | 32 | 36 | 40 | 48 | 56 | 64;
-export type IconType = "warning" | "error" | "info" | "success" | "";

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

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

package/dist/components/agnostic/Progress/Progress.svelte

@@ -1,51 +0,0 @@
-<style>
-/* https://stackoverflow.com/questions/45507970/how-can-i-change-the-color-of-a-progress-bar-value-in-html */
-
-/**
- * Most examples show styling directly to the <progress> element itself. However,
- * my tests (chrome, ff, safari on mac mini 2020), showed it's perfectly possibly
- * to use a class selector instead. The reason I'd prefer that here, is that I can
- * then use CSS Modules composes against .progress (e.g. for React/Vue components)
- */
-.progress {
-  appearance: none;
-  height: var(--functional-progress-height, var(--fluid-10, 0.625rem));
-  width: 100%;
-  border: none;
-
-  /* Next couple of rules are required to be here for FF (but not chrome) */
-  background-color: var(--functional-progress-background, var(--functional-gray-light, #ededed));
-  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
-}
-
-.progress[value]::-webkit-progress-bar {
-  /* In my tests chrome requires this whereas FF wants it on the progress {} rule */
-  background-color: var(--functional-progress-background, var(--functional-gray-light, #ededed));
-  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
-}
-
-.progress[value]::-webkit-progress-value {
-  background-color: var(--functional-progress-fill-color, var(--functional-primary, #077acb));
-  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
-}
-
-.progress[value]::-moz-progress-bar {
-  background-color: var(--functional-progress-fill-color, var(--functional-primary, #077acb));
-  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
-}
-
-.progress[value]::-ms-fill {
-  background-color: var(--functional-progress-fill-color, var(--functional-primary, #077acb));
-  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
-}
-
-</style>
-
-<script lang="ts">
-  export let value = 0;
-  export let max;
-  export let css = "";
-  let klasses: string = ["progress", css ? `${css}` : ""].filter(cl => cl && cl.length).join(' ');
-</script>
-
-<progress class={klasses} value={value} max={max}></progress>

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

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: number;
-        max: any;
-        css?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ProgressProps = typeof __propDef.props;
-export type ProgressEvents = typeof __propDef.events;
-export type ProgressSlots = typeof __propDef.slots;
-export default class Progress extends SvelteComponentTyped<ProgressProps, ProgressEvents, ProgressSlots> {
-}
-export {};

package/dist/components/agnostic/Spinner/Spinner.svelte

@@ -1,108 +0,0 @@
-<style>
-.spinner {
-  --spinner-color: var(--functional-spinner-color, var(--functional-dark));
-
-  /**
-   * Inspiration to utilize grid for this from
-   * https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
-   */
-  display: grid;
-  grid-template: "content" 100% / auto;
-  place-items: center;
-  box-sizing: border-box;
-}
-
-.spinner::before,
-.spinner::after {
-  grid-area: content;
-  width: var(--fluid-32);
-  height: var(--fluid-32);
-  content: "";
-  display: block;
-  border-radius: 50%;
-  border-width: 3px;
-  border-style: solid;
-}
-
-.spinner-small::before,
-.spinner-small::after {
-  width: var(--fluid-24);
-  height: var(--fluid-24);
-  border-width: var(--fluid-2);
-}
-
-.spinner-large::before,
-.spinner-large::after {
-  width: var(--fluid-40);
-  height: var(--fluid-40);
-  border-width: var(--fluid-4);
-}
-
-.spinner-xlarge::before,
-.spinner-xlarge::after {
-  width: var(--fluid-56);
-  height: var(--fluid-56);
-  border-width: var(--fluid-6);
-}
-
-/**
- * Before is the muted background
- */
-.spinner::before {
-  opacity: 0%;
-  border-color: var(--spinner-color);
-}
-
-/**
- * After is the inner "snake"
- */
-.spinner::after {
-  opacity: 0%;
-  border-color: transparent var(--spinner-color) transparent transparent;
-  transition: opacity 0.1s;
-  pointer-events: none;
-  animation: loading-circle 1s ease-in-out infinite;
-
-  /* TODO Research the whole null transform hack. It is quite confusing to figure out if it
-  is beneficial or detrimental: See
-  https://newbedev.com/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
-  transform: translateZ(0);
-  will-change: transform; */
-}
-
-/**
- * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
- */
-.spinner[aria-busy="true"]::before {
-  opacity: 12%;
-}
-
-.spinner[aria-busy="true"]::after {
-  opacity: 100%;
-}
-
-@keyframes loading-circle {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .spinner::after {
-    transition-duration: 0.001ms !important;
-  }
-}
-
-</style>
-
-<script lang="ts">
-  export let ariaLabel = "Loading…";
-  export let size: "small" | "large" | "xlarge" | "" = "";
-  $: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""]
-    .filter((c) => c)
-    .join(" ");
-</script>
-
-<div class={spinnerClasses} role="status" aria-live="polite" aria-busy="true">
-  <span class="screenreader-only">{ariaLabel}</span>
-</div>

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

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        ariaLabel?: string;
-        size?: "small" | "large" | "xlarge" | "";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SpinnerProps = typeof __propDef.props;
-export type SpinnerEvents = typeof __propDef.events;
-export type SpinnerSlots = typeof __propDef.slots;
-export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
-}
-export {};

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

@@ -1,43 +0,0 @@
-/** @typedef {typeof __propDef.props}  SwitchProps */
-/** @typedef {typeof __propDef.events}  SwitchEvents */
-/** @typedef {typeof __propDef.slots}  SwitchSlots */
-export default class Switch extends SvelteComponentTyped<{
-    size?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    isBordered?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    css?: string | undefined;
-    labelPosition?: string | undefined;
-    isChecked?: boolean | undefined;
-    isAction?: boolean | undefined;
-}, {
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: string | undefined;
-        label?: string | undefined;
-        id?: string | undefined;
-        isBordered?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        css?: string | undefined;
-        labelPosition?: string | undefined;
-        isChecked?: boolean | undefined;
-        isAction?: boolean | undefined;
-    };
-    events: {
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};