@functionalcms/svelte-components 3.0.5 → 3.0.7

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

@@ -1,139 +1,141 @@
-<script>export let isVertical = false;
-export let justify = "";
-export let type = "";
-export let size = "";
-let slots = $$props.$$slots;
-const dividerClasses = [
-  "divider",
-  isVertical ? "divider-vertical" : "",
-  justify ? `divider-justify-${justify}` : "",
-  size ? `divider-${size}` : "",
-  type ? `divider-${type}` : ""
-].filter((cl) => cl.length).join(" ");
+<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}>
-  {#if slots && slots.dividerContent}
-    <div class="divider-content">
-      <slot name="dividerContent" />
-    </div>
-  {/if}
-</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);
-}
+<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

@@ -2,18 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type { DividerJustify, DividerTypes, DividerSizes } from './api';
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        isVertical?: boolean | undefined;
-        justify?: DividerJustify | undefined;
-        type?: DividerTypes | undefined;
-        size?: DividerSizes | undefined;
+        isVertical?: boolean;
+        justify?: DividerJustify;
+        type?: DividerTypes;
+        size?: DividerSizes;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        dividerContent: {};
-    };
+    slots: {};
 };
 export type DividerProps = typeof __propDef.props;
 export type DividerEvents = typeof __propDef.events;

package/dist/components/agnostic/Drawer/Drawer.svelte

@@ -1,19 +1,23 @@
-<script>import Dialog from "../Dialog/Dialog.svelte";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-let drawerInstance;
-const assignDrawerRef = (ev) => {
-  drawerInstance = ev.detail.instance;
-  dispatch("instance", {
-    instance: drawerInstance
-  });
-};
-export let id;
-export let drawerRoot;
-export let placement;
-export let title;
-export let role = "dialog";
-export let isAnimationFadeIn = true;
+<script lang="ts">
+  import type { DrawerRoles } from './api';
+  import Dialog from "../Dialog/Dialog.svelte";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  let drawerInstance;
+  const assignDrawerRef = (ev) => {
+    drawerInstance = ev.detail.instance;
+    dispatch("instance", {
+      instance: drawerInstance,
+    });
+  };
+
+  export let id;
+  export let drawerRoot;
+  export let placement;
+  export let title;
+  export let role: DrawerRoles = "dialog";
+  export let isAnimationFadeIn = true;
 </script>
 <Dialog
   id={id}

package/dist/components/agnostic/EmptyState/EmptyState.svelte

@@ -28,13 +28,16 @@
 
 </style>
 
-<script>export let isRounded = false;
-export let isBordered = false;
-const emptyClasses = [
-  "empty",
-  isRounded ? "empty-rounded" : "",
-  isBordered ? "empty-bordered" : ""
-].filter((cl) => cl.length).join(" ");
+<script lang="ts">
+  export let isRounded = false;
+  export let isBordered = false;
+  const emptyClasses: string = [
+    "empty",
+    isRounded ? "empty-rounded" : "",
+    isBordered ? "empty-bordered" : "",
+  ]
+    .filter((cl) => cl.length)
+    .join(" ");
 </script>
 
 <div class={emptyClasses}>

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

@@ -78,21 +78,28 @@
 
 </style>
 
-<script>export let isSticky = false;
-export let isSkinned = true;
-export let isHeaderContentStart = false;
-export let isHeaderContentEnd = false;
-export let css = "";
-const klasses = [
-  isSkinned ? "header" : "header-base",
-  isSticky ? "header-sticky" : "",
-  css ? `${css}` : ""
-].filter((cl) => cl.length).join(" ");
-const headerContentClasses = [
-  "header-content",
-  isHeaderContentStart ? "header-content-start" : "",
-  isHeaderContentEnd ? "header-content-end" : ""
-].filter((cl) => cl.length).join(" ");
+<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}>

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

@@ -16,9 +16,10 @@
 
 </style>
   
-  <script>export let css = "";
-const containerClasses = [css ? `${css}` : ""].filter((c) => c.length);
-</script>
+  <script lang="ts">
+    export let css = "";
+    const containerClasses = [css ? `${css}` : ""].filter((c) => c.length);
+  </script>
   
   <nav class={containerClasses}>
     <ul class="header-nav">

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

@@ -21,8 +21,9 @@
 
 </style>
 
-<script>export let css = "";
-let klasses = ["header-nav-item", css ? `${css}` : ""].filter((cl) => cl && cl.length).join(" ");
+<script lang="ts">
+  export let css = "";
+  let klasses: string = ["header-nav-item", css ? `${css}` : ""].filter(cl => cl && cl.length).join(' ');
 </script>
 
 <li class={klasses}>

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

@@ -153,26 +153,34 @@
 }
 </style>
 
-<script>import { onMount } from "svelte";
-export let type = "";
-export let size = 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}`);
-    spanRef.classList.remove("screenreader-only");
-  }
-});
+<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}>

package/dist/components/agnostic/Loader/Loader.svelte

@@ -103,9 +103,12 @@
 }
 
 </style>
-<script>export let ariaLabel = "Loading\u2026";
-export let size = "";
-export let loaderClasses = ["loader", size ? `loader-${size}` : ""].filter((c) => c).join(" ");
+<script lang="ts">
+  export let ariaLabel = "Loading…";
+  export let size: "small" | "large" | "" = "";
+  export let loaderClasses: string = ["loader", size ? `loader-${size}` : ""]
+    .filter((c) => c)
+    .join(" ");
 </script>
 
 <div class={loaderClasses} role="status" aria-live="polite" aria-busy="true">

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

@@ -41,10 +41,11 @@
 
 </style>
 
-<script>export let value = 0;
-export let max;
-export let css = "";
-let klasses = ["progress", css ? `${css}` : ""].filter((cl) => cl && cl.length).join(" ");
+<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/Spinner/Spinner.svelte

@@ -95,9 +95,12 @@
 
 </style>
 
-<script>export let ariaLabel = "Loading\u2026";
-export let size = "";
-$: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""].filter((c) => c).join(" ");
+<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">