@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Alert/Alert.svelte

@@ -0,0 +1,310 @@
+<style>
+.alert-base,
+.alert {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+}
+
+.alert-end {
+  justify-content: flex-end;
+}
+
+.alert-skin,
+.alert {
+  padding: var(--functional-side-padding);
+  background: var(--functional-gray-light);
+}
+
+.alert-icon {
+  color: var(--functional-gray-mid-dark);
+  margin-inline-end: var(--fluid-8);
+
+  /* Ensures our icon doesn't flex grow or shrink */
+  flex: 0 0 var(--fluid-24);
+}
+
+.alert-border-top {
+  border-top: var(--fluid-8) solid var(--functional-gray-mid-dark);
+}
+
+.alert-border-left {
+  border-left: var(--fluid-8) solid var(--functional-gray-mid-dark);
+}
+
+.alert-border-bottom {
+  border-bottom: var(--fluid-8) solid var(--functional-gray-mid-dark);
+}
+
+.alert-border-right {
+  border-right: var(--fluid-8) solid var(--functional-gray-mid-dark);
+}
+
+.alert-border-all {
+  border: var(--fluid-2) solid var(--functional-gray-mid-dark);
+}
+
+.alert-rounded {
+  border-radius: var(--functional-alert-radius, var(--functional-radius, 0.25rem));
+}
+
+.alert-dark {
+  color: var(--functional-light);
+  background: var(--functional-dark);
+}
+
+.alert-dark .alert-icon,
+.alert-dark {
+  color: var(--functional-light);
+}
+
+.alert-warning {
+  background: var(--functional-warning-light);
+  color: var(--functional-warning-dark);
+}
+
+.alert-warning-icon {
+  color: var(--functional-warning-border-accent);
+  margin-inline-end: var(--fluid-8);
+
+  /* Ensures our icon doesn't flex grow or shrink */
+  flex: 0 0 var(--fluid-24);
+}
+
+.alert-warning.alert-border-top {
+  border-top-color: var(--functional-warning-border-accent);
+}
+
+.alert-warning.alert-border-left {
+  border-left-color: var(--functional-warning-border-accent);
+}
+
+.alert-warning.alert-border-bottom {
+  border-bottom-color: var(--functional-warning-border-accent);
+}
+
+.alert-warning.alert-border-right {
+  border-right-color: var(--functional-warning-border-accent);
+}
+
+.alert-warning.alert-border-all {
+  border: var(--fluid-2) solid var(--functional-warning-border);
+}
+
+.alert-info {
+  background: var(--functional-primary-light);
+  color: var(--functional-primary-dark);
+}
+
+.alert-info-icon {
+  color: var(--functional-primary-dark);
+  margin-inline-end: var(--fluid-8);
+
+  /* Ensures our icon doesn't flex grow or shrink */
+  flex: 0 0 var(--fluid-24);
+}
+
+.alert-info.alert-border-top {
+  border-top-color: var(--functional-primary-dark);
+}
+
+.alert-info.alert-border-left {
+  border-left-color: var(--functional-primary-dark);
+}
+
+.alert-info.alert-border-bottom {
+  border-bottom-color: var(--functional-primary-dark);
+}
+
+.alert-info.alert-border-right {
+  border-right-color: var(--functional-primary-dark);
+}
+
+.alert-info.alert-border-all {
+  border: var(--fluid-2) solid var(--functional-primary-border);
+}
+
+.alert-error {
+  background: var(--functional-error-light);
+  color: var(--functional-error-dark);
+}
+
+.alert-error-icon {
+  color: var(--functional-error-dark);
+  margin-inline-end: var(--fluid-8);
+
+  /* Ensures our icon doesn't flex grow or shrink */
+  flex: 0 0 var(--fluid-24);
+}
+
+.alert-error.alert-border-top {
+  border-top-color: var(--functional-error-dark);
+}
+
+.alert-error.alert-border-left {
+  border-left-color: var(--functional-error-dark);
+}
+
+.alert-error.alert-border-bottom {
+  border-bottom-color: var(--functional-error-dark);
+}
+
+.alert-error.alert-border-right {
+  border-right-color: var(--functional-error-dark);
+}
+
+.alert-error.alert-border-all {
+  border: var(--fluid-2) solid var(--functional-error-border);
+}
+
+.alert-success {
+  background: var(--functional-action-light);
+  color: var(--functional-action-dark);
+}
+
+.alert-success-icon {
+  color: var(--functional-action-dark);
+  margin-inline-end: var(--fluid-8);
+
+  /* Ensures our icon doesn't flex grow or shrink */
+  flex: 0 0 var(--fluid-24);
+}
+
+.alert-success.alert-border-top {
+  border-top-color: var(--functional-action-dark);
+}
+
+.alert-success.alert-border-left {
+  border-left-color: var(--functional-action-dark);
+}
+
+.alert-success.alert-border-bottom {
+  border-bottom-color: var(--functional-action-dark);
+}
+
+.alert-success.alert-border-right {
+  border-right-color: var(--functional-action-dark);
+}
+
+.alert-success.alert-border-all {
+  border: var(--fluid-2) solid var(--functional-action-border);
+}
+
+/**
+ * This is not in toast.css because it's actually applied on the Alert child element
+ * conditionally if the Alert is a Toast alert :-)
+ */
+.alert-toast-shadow {
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 6%), 0 3px 8px 0 rgb(0 0 0 / 7%), 0 6px 18px 0 rgb(0 0 0 / 6%);
+}
+
+.fade-in {
+	animation: fade-in var(--functional-timing-fast) both;
+}
+
+.slide-up {
+	animation: slide-up var(--functional-timing-slow) var(--functional-timing-fast)
+		both;
+}
+
+/**
+ * Cannot use two separate CSS classes with animation: foo, bar
+ * as the later class will overwrite the first (so this combines)
+ */
+.slide-up-fade-in {
+	animation: fade-in var(--functional-timing-fast) both,
+		slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0%;
+	}
+}
+
+@keyframes slide-up {
+	from {
+		transform: translateY(10%);
+	}
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+	.slide-up-fade-in,
+	.fade-in,
+	.slide-up {
+		transition-duration: 0.001ms !important;
+	}
+}
+
+</style>
+
+<script>export let isAnimationFadeIn = true;
+export let isAnimationSlideUp = false;
+export let isToast = false;
+export let isRounded = false;
+export let isBorderAll = false;
+export let isBorderLeft = false;
+export let isBorderRight = false;
+export let isBorderTop = false;
+export let isBorderBottom = false;
+export let isBlockEnd = false;
+export let type = "";
+let typeClass;
+switch (type) {
+  case "warning":
+    typeClass = "alert-warning";
+    break;
+  case "dark":
+    typeClass = "alert-dark";
+    break;
+  case "error":
+    typeClass = "alert-error";
+    break;
+  case "info":
+    typeClass = "alert-info";
+    break;
+  case "success":
+    typeClass = "alert-success";
+    break;
+  default:
+    typeClass = "";
+}
+const ariaAtomicValue = isToast ? true : void 0;
+$: ariaLiveValue = () => {
+  let liveValue;
+  if (isToast && type === "error") {
+    liveValue = "assertive";
+  } else if (isToast) {
+    liveValue = "polite";
+  } else {
+    liveValue = "off";
+  }
+  return liveValue;
+};
+const classes = [
+  "alert",
+  typeClass,
+  isRounded ? "alert-rounded" : "",
+  isBorderAll ? "alert-border-all" : "",
+  isBorderLeft ? "alert-border-left" : "",
+  isBorderRight ? "alert-border-right" : "",
+  isBorderTop ? "alert-border-top" : "",
+  isBorderBottom ? "alert-border-bottom" : "",
+  isBlockEnd ? "alert-end" : "",
+  isAnimationFadeIn && !isAnimationSlideUp ? "fade-in" : "",
+  !isAnimationFadeIn && isAnimationSlideUp ? "slide-up" : "",
+  isAnimationFadeIn && isAnimationSlideUp ? "slide-up-fade-in" : ""
+].filter((klass) => klass.length).join(" ");
+</script>
+
+<div
+	class="{classes}"
+	role="alert"
+	aria-atomic="{ariaAtomicValue}"
+	aria-live="{ariaLiveValue()}"
+>
+	<slot name="icon" />
+	<slot />
+</div>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isAnimationFadeIn?: boolean;
+        isAnimationSlideUp?: boolean;
+        isToast?: boolean;
+        isRounded?: boolean;
+        isBorderAll?: boolean;
+        isBorderLeft?: boolean;
+        isBorderRight?: boolean;
+        isBorderTop?: boolean;
+        isBorderBottom?: boolean;
+        isBlockEnd?: boolean;
+        type?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/dist/components/agnostic/Avatar/Avatar.svelte

@@ -0,0 +1,123 @@
+<style>
+.avatar,
+.avatar-base {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar,
+.avatar-skin {
+  width: var(--fluid-40);
+  height: var(--fluid-40);
+  max-width: 100%;
+  background: var(--functional-gray-extra-light);
+  border-radius: 50%;
+}
+
+.avatar-square {
+  border-radius: 0;
+}
+
+.avatar-rounded {
+  border-radius: var(--functional-radius);
+}
+
+.avatar-small {
+  font-size: var(--fluid-12);
+  width: var(--fluid-32);
+  height: var(--fluid-32);
+}
+
+.avatar-large {
+  width: var(--fluid-48);
+  height: var(--fluid-48);
+}
+
+.avatar-xlarge {
+  font-size: var(--fluid-20);
+  width: var(--fluid-64);
+  height: var(--fluid-64);
+}
+
+.avatar::before {
+  content: attr(data-text);
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-info {
+  background: var(--functional-primary-light);
+  color: var(--functional-primary-dark);
+}
+
+.avatar-warning {
+  background: var(--functional-warning-light);
+  color: var(--functional-warning-dark);
+}
+
+.avatar-success {
+  background: var(--functional-action-light);
+  color: var(--functional-action-dark);
+}
+
+.avatar-error {
+  background: var(--functional-error-light);
+  color: var(--functional-error-dark);
+}
+
+/* Must come after avatar-success, avatatar-warning, etc. so specificity is higher */
+.avatar-transparent {
+  background: transparent;
+}
+
+.avatar-group {
+  display: flex;
+  flex-direction: row;
+
+  /* TBD -- should we stack these on mobile? */
+}
+
+/* Helpful for Vue / Svelte SFC where the .avatar child will not be a global
+but CSS Modules class. Unfortunately, it means those have to be spans though.
+This should be ok -- it's our Avatar.vue and Avatar.svelte, for example, that
+respectively generate the <span> tag in their own templates (not the consumer) */
+.avatar-group > span,
+.avatar-group .avatar {
+  border: 2px solid var(--functional-light);
+}
+
+.avatar-group > span:not(:first-child),
+.avatar-group .avatar:not(:first-child) {
+  margin-inline-start: calc(-1 * var(--fluid-10));
+}
+
+</style>
+
+<script>export let isRounded = false;
+export let isTransparent = false;
+export let isSquare = false;
+export let type = "";
+export let size = "";
+export let text = "";
+export let imgUrl = "";
+const avatarClasses = [
+  "avatar",
+  isRounded ? "avatar-rounded" : "",
+  isTransparent ? "avatar-transparent" : "",
+  isSquare ? "avatar-square" : "",
+  type ? `avatar-${type}` : "",
+  size ? `avatar-${size}` : ""
+].filter((cls) => cls).join(" ");
+</script>
+
+<span class={avatarClasses} data-text={text || null}>
+  {#if imgUrl}<img src={imgUrl} class="avatar-image" alt="" />{/if}
+  <slot />
+</span>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isRounded?: boolean;
+        isTransparent?: boolean;
+        isSquare?: boolean;
+        type?: string;
+        size?: string;
+        text?: string;
+        imgUrl?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/dist/components/agnostic/Avatar/AvatarGroup.svelte

@@ -0,0 +1,106 @@
+<style>
+.avatar,
+.avatar-base {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar,
+.avatar-skin {
+  width: var(--fluid-40);
+  height: var(--fluid-40);
+  max-width: 100%;
+  background: var(--functional-gray-extra-light);
+  border-radius: 50%;
+}
+
+.avatar-square {
+  border-radius: 0;
+}
+
+.avatar-rounded {
+  border-radius: var(--functional-radius);
+}
+
+.avatar-small {
+  font-size: var(--fluid-12);
+  width: var(--fluid-32);
+  height: var(--fluid-32);
+}
+
+.avatar-large {
+  width: var(--fluid-48);
+  height: var(--fluid-48);
+}
+
+.avatar-xlarge {
+  font-size: var(--fluid-20);
+  width: var(--fluid-64);
+  height: var(--fluid-64);
+}
+
+.avatar::before {
+  content: attr(data-text);
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-info {
+  background: var(--functional-primary-light);
+  color: var(--functional-primary-dark);
+}
+
+.avatar-warning {
+  background: var(--functional-warning-light);
+  color: var(--functional-warning-dark);
+}
+
+.avatar-success {
+  background: var(--functional-action-light);
+  color: var(--functional-action-dark);
+}
+
+.avatar-error {
+  background: var(--functional-error-light);
+  color: var(--functional-error-dark);
+}
+
+/* Must come after avatar-success, avatatar-warning, etc. so specificity is higher */
+.avatar-transparent {
+  background: transparent;
+}
+
+.avatar-group {
+  display: flex;
+  flex-direction: row;
+
+  /* TBD -- should we stack these on mobile? */
+}
+
+/* Helpful for Vue / Svelte SFC where the .avatar child will not be a global
+but CSS Modules class. Unfortunately, it means those have to be spans though.
+This should be ok -- it's our Avatar.vue and Avatar.svelte, for example, that
+respectively generate the <span> tag in their own templates (not the consumer) */
+.avatar-group > :global(span),
+.avatar-group .avatar {
+  border: 2px solid var(--functional-light);
+}
+
+.avatar-group > :global(span:not(:first-child)),
+.avatar-group .avatar:not(:first-child) {
+  margin-inline-start: calc(-1 * var(--fluid-10));
+}
+
+</style>
+  
+  <div class="avatar-group">
+    <slot />
+  </div>
+  

package/dist/components/agnostic/Avatar/AvatarGroup.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  AvatarGroupProps */
+/** @typedef {typeof __propDef.events}  AvatarGroupEvents */
+/** @typedef {typeof __propDef.slots}  AvatarGroupSlots */
+export default class AvatarGroup extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AvatarGroupProps = typeof __propDef.props;
+export type AvatarGroupEvents = typeof __propDef.events;
+export type AvatarGroupSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/agnostic/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,56 @@
+<style>
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-inline-start: var(--fluid-6);
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  padding-inline-end: var(--fluid-6);
+  color: var(--functional-gray-mid-dark);
+  content: "\203A";
+}
+
+.breadcrumb-slash .breadcrumb-item + .breadcrumb-item::before {
+  content: "\0002f";
+}
+
+.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
+  content: "\02192";
+}
+
+.breadcrumb-bullet .breadcrumb-item + .breadcrumb-item::before {
+  content: "\02022";
+}
+
+</style>
+
+<script>export let routes = [];
+export let type = "";
+const breadcrumbClasses = ["breadcrumb", type ? `breadcrumb-${type}` : ""].filter((cls) => cls).join(" ");
+const isLast = (idx) => {
+  return idx === routes.length - 1;
+};
+const crumbClasses = (index) => {
+  const isLastCrumb = isLast(index);
+  return ["breadcrumb-item", isLastCrumb ? "active" : ""].filter((cl) => cl).join(" ");
+};
+</script>
+
+<nav aria-label="breadcrumbs">
+  <ol class={breadcrumbClasses}>
+    {#each routes as route, i}
+      <li class={crumbClasses(i)}>
+        {#if !isLast(i) && route.url}
+          <a href={route.url}>{route.label}</a>
+        {:else}<span v-else>{route.label}</span>{/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { BreadcrumbRoute } from './api';
+declare const __propDef: {
+    props: {
+        routes?: BreadcrumbRoute[];
+        type?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

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

@@ -0,0 +1,4 @@
+export type BreadcrumbRoute = {
+    label: string;
+    url: string;
+};

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

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