@functionalcms/svelte-components 2.33.1 → 2.34.1

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

@@ -0,0 +1,46 @@
+<style>
+.empty-base,
+.empty {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+}
+
+.empty {
+  padding: calc(2 * var(--functional-side-padding));
+  background: var(--functional-gray-extra-light);
+}
+
+.empty-bordered {
+  background: transparent;
+  border: 1px solid var(--functional-gray-light);
+}
+
+.empty-rounded {
+  border-radius: var(--functional-radius);
+}
+
+.empty-actions {
+  margin-block-start: var(--spacing-24);
+}
+
+</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>
+
+<div class={emptyClasses}>
+  <slot name="header" />
+  <slot name="body" />
+  <div class="empty-actions">
+    <slot name="footer" />
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isRounded?: boolean;
+        isBordered?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        body: {};
+        footer: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EmptyStateProps = typeof __propDef.props;
+export type EmptyStateEvents = typeof __propDef.events;
+export type EmptyStateSlots = typeof __propDef.slots;
+export default class EmptyState extends SvelteComponent<EmptyStateProps, EmptyStateEvents, EmptyStateSlots> {
+}
+export {};

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

@@ -0,0 +1,104 @@
+<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>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>
+
+<nav class={klasses}>
+  <div class={headerContentClasses}>
+    <slot name="logoleft" />
+    <slot />
+    <slot name="logoright" />
+  </div>
+</nav>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } 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: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
+}
+export {};

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

@@ -0,0 +1,28 @@
+<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>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

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

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

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

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

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

@@ -0,0 +1,180 @@
+<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>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>
+
+<span bind:this={spanRef} class={iconClasses}>
+  <slot />
+</span>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } 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: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

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

@@ -0,0 +1,2 @@
+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

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