@functionalcms/svelte-components 2.34.2 → 2.34.4

package/dist/components/agnostic/Dialog/Dialog.svelte

@@ -1,206 +1,5 @@
-<style>
-
-  /* ---------- GLOBAL STYLES ---------- */
-  /* Note this component requires global styles and doesn't get copied over from copystyles.js
-  and is "locked down". Svelte no longer appears to support <style global> and CSS Modules support
-  isn't built in. So, not ideal, but this is what we'll have to do for this component. */
-  
-  /* These are styles for the case where classNames.closeButton property was NOT
-  passed in and so we're generating the default close 'X' button on the upper right. */
-  :global(.dialog-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-32);
-    height: var(--fluid-32);
-  }
-  
-  :global(.dialog-close-button:hover,
-  .dialog-close-button:active,
-  .dialog-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);
-  }
-  
-  :global(.dialog-close-button:focus) {
-    box-shadow: 0 0 0 3px var(--functional-focus-ring-color);
-    transition: box-shadow var(--functional-timing-fast) ease-out;
-  }
-  
-  @media (prefers-reduced-motion), (update: slow) {
-    :global(.dialog-close-button:focus) {
-      transition-duration: 0.001ms !important;
-    }
-  }
-  
-  :global(.close-button-large > .close) {
-    width: var(--fluid-16);
-    height: var(--fluid-16);
-  }
-  
-  :global(.dialog-close-button:hover .close) {
-    opacity: 100%;
-  }
-  
-  
-  :global(.dialog),
-  :global(.dialog-overlay) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-  
-  :global(.dialog) {
-    z-index: 1001;
-    display: flex;
-  }
-  
-  :global(.dialog[aria-hidden="true"]) {
-    display: none;
-  }
-  
-  :global(.dialog-overlay) {
-    background-color: rgb(50 50 50 / 60%);
-    animation: fade-in var(--functional-timing-fast) both;
-  }
-  
-  :global(.dialog-content) {
-    background-color: var(--functional-light);
-    margin: auto;
-    z-index: 1001;
-    position: relative;
-    padding: var(--fluid-16);
-    max-width: 90%;
-    width: 600px;
-    border-radius: var(--functional-radius);
-  }
-  
-  :global(.dialog-fade-in) {
-    animation: fade-in var(--functional-timing-fast) both;
-  }
-  
-  :global(.dialog-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)
-   */
-  :global(.dialog-slide-up-fade-in) {
-    animation:
-      fade-in var(--functional-timing-fast) both,
-      slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
-  }
-  
-  @media screen and (min-width: 700px) {
-    :global(.dialog-content) {
-      padding: var(--fluid-32);
-    }
-  }
-  
-  @keyframes -global-fade-in {
-    from {
-      opacity: 0%;
-    }
-  }
-  
-  @keyframes -global-slide-up {
-    from {
-      transform: translateY(10%);
-    }
-  }
-  
-  /* Shared with AgnosticUI close buton so only need positioning and transition */
-  :global(.dialog-close) {
-    position: absolute;
-    top: var(--fluid-8);
-    right: var(--fluid-8);
-  }
-  
-  @media (prefers-reduced-motion), (update: slow) {
-    :global(.dialog-slide-up-fade-in, .dialog-fade-in, .dialog-slide-up, .dialog-content) {
-      transition-duration: 0.001ms !important;
-    }
-  }
-  
-  @media only screen and (min-width: 576px) {
-    :global(.dialog-close) {
-      top: var(--fluid-12);
-      right: var(--fluid-12);
-    }
-  }
-  
-  @media screen and (min-width: 768px) {
-    :global(.dialog-close) {
-      top: var(--fluid-16);
-      right: var(--fluid-16);
-    }
-  }
-  
-  /* We use div.drawer-* for specificity battle :( */
-  :global(div.drawer-start) {
-    right: initial;
-  }
-  
-  :global(div.drawer-start[aria-hidden]) {
-    transform: none;
-  }
-  
-  :global(div.drawer-end) {
-    left: initial;
-  }
-  
-  :global(div.drawer-end[aria-hidden]) {
-    transform: none;
-  }
-  
-  :global(div.drawer-top) {
-    bottom: initial;
-    transform: none;
-  }
-  
-  :global(div.drawer-top[aria-hidden]) {
-    transform: none;
-  }
-  
-  :global(div.drawer-bottom) {
-    top: initial;
-    transform: none;
-  }
-  
-  :global(div.drawer-bottom[aria-hidden]) {
-    transform: none;
-  }
-  
-  :global(div.drawer-content) {
-    margin: initial;
-    max-width: initial;
-    border-radius: initial;
-  }
-  
-  :global(div.drawer-start div.drawer-content, div.drawer-end div.drawer-content) {
-    width: 25rem;
-  }
-  
-  :global(div.drawer-top div.drawer-content, div.drawer-bottom div.drawer-content) {
-    height: 25vh;
-    width: 100%;
-  }
-  </style>
-  
-  <script>import Close from "../Close/Close.svelte";
-import SvelteA11yDialog from "svelte-a11y-dialog/SvelteA11yDialog.svelte";
+<script>import Close from "../Close/Close.svelte";
+import SvelteA11yDialog from "./SvelteA11yDialog.svelte";
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 export let id;
@@ -228,10 +27,7 @@ const documentClasses = [
   isAnimationFadeIn && !isAnimationSlideUp ? "dialog-fade-in" : "",
   drawerPlacement.length ? "drawer-content" : ""
 ].filter((c) => c).join(" ");
-const containerClasses = [
-  "dialog",
-  drawerPlacement ? `drawer-${drawerPlacement}` : ""
-].filter((c) => c).join(" ");
+const containerClasses = ["dialog", drawerPlacement ? `drawer-${drawerPlacement}` : ""].filter((c) => c).join(" ");
 const defaultClassNames = {
   container: containerClasses,
   document: documentClasses,
@@ -245,21 +41,216 @@ $: getClassNames = () => {
   return { ...defaultClassNames, ...classNames };
 };
 </script>
-  
-  <SvelteA11yDialog
-    id={id}
-    dialogRoot={dialogRoot}
-    closeButtonLabel={closeButtonLabel}
-    closeButtonPosition={closeButtonPosition}
-    title={title}
-    titleId={titleId}
-    role={role}
-    classNames={getClassNames()}
-    on:instance={assignDialogInstance}
-  >
-    <slot name="closeButtonContent" slot="closeButtonContent">
-      <Close isFaux size="large" />
-    </slot>
-    <slot />
-  </SvelteA11yDialog>
-  
+
+<SvelteA11yDialog
+	{id}
+	{dialogRoot}
+	{closeButtonLabel}
+	{closeButtonPosition}
+	{title}
+	{titleId}
+	{role}
+	classNames={getClassNames()}
+	on:instance={assignDialogInstance}
+>
+	<slot name="closeButtonContent" slot="closeButtonContent">
+		<Close isFaux size="large" />
+	</slot>
+	<slot />
+</SvelteA11yDialog>
+
+<style>
+	/* ---------- GLOBAL STYLES ---------- */
+	/* Note this component requires global styles and doesn't get copied over from copystyles.js
+  and is "locked down". Svelte no longer appears to support <style global> and CSS Modules support
+  isn't built in. So, not ideal, but this is what we'll have to do for this component. */
+
+	/* These are styles for the case where classNames.closeButton property was NOT
+  passed in and so we're generating the default close 'X' button on the upper right. */
+	:global(.dialog-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-32);
+		height: var(--fluid-32);
+	}
+
+	:global(.dialog-close-button:hover, .dialog-close-button:active, .dialog-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);
+	}
+
+	:global(.dialog-close-button:focus) {
+		box-shadow: 0 0 0 3px var(--functional-focus-ring-color);
+		transition: box-shadow var(--functional-timing-fast) ease-out;
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		:global(.dialog-close-button:focus) {
+			transition-duration: 0.001ms !important;
+		}
+	}
+
+	:global(.close-button-large > .close) {
+		width: var(--fluid-16);
+		height: var(--fluid-16);
+	}
+
+	:global(.dialog-close-button:hover .close) {
+		opacity: 100%;
+	}
+
+	:global(.dialog),
+	:global(.dialog-overlay) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
+	:global(.dialog) {
+		z-index: 1001;
+		display: flex;
+	}
+
+	:global(.dialog[aria-hidden='true']) {
+		display: none;
+	}
+
+	:global(.dialog-overlay) {
+		background-color: rgb(50 50 50 / 60%);
+		animation: fade-in var(--functional-timing-fast) both;
+	}
+
+	:global(.dialog-content) {
+		background-color: var(--functional-light);
+		margin: auto;
+		z-index: 1001;
+		position: relative;
+		padding: var(--fluid-16);
+		max-width: 90%;
+		width: 600px;
+		border-radius: var(--functional-radius);
+	}
+
+	:global(.dialog-fade-in) {
+		animation: fade-in var(--functional-timing-fast) both;
+	}
+
+	:global(.dialog-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)
+   */
+	:global(.dialog-slide-up-fade-in) {
+		animation:
+			fade-in var(--functional-timing-fast) both,
+			slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
+	}
+
+	@media screen and (min-width: 700px) {
+		:global(.dialog-content) {
+			padding: var(--fluid-32);
+		}
+	}
+
+	@keyframes -global-fade-in {
+		from {
+			opacity: 0%;
+		}
+	}
+
+	@keyframes -global-slide-up {
+		from {
+			transform: translateY(10%);
+		}
+	}
+
+	/* Shared with AgnosticUI close buton so only need positioning and transition */
+	:global(.dialog-close) {
+		position: absolute;
+		top: var(--fluid-8);
+		right: var(--fluid-8);
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		:global(.dialog-slide-up-fade-in, .dialog-fade-in, .dialog-slide-up, .dialog-content) {
+			transition-duration: 0.001ms !important;
+		}
+	}
+
+	@media only screen and (min-width: 576px) {
+		:global(.dialog-close) {
+			top: var(--fluid-12);
+			right: var(--fluid-12);
+		}
+	}
+
+	@media screen and (min-width: 768px) {
+		:global(.dialog-close) {
+			top: var(--fluid-16);
+			right: var(--fluid-16);
+		}
+	}
+
+	/* We use div.drawer-* for specificity battle :( */
+	:global(div.drawer-start) {
+		right: initial;
+	}
+
+	:global(div.drawer-start[aria-hidden]) {
+		transform: none;
+	}
+
+	:global(div.drawer-end) {
+		left: initial;
+	}
+
+	:global(div.drawer-end[aria-hidden]) {
+		transform: none;
+	}
+
+	:global(div.drawer-top) {
+		bottom: initial;
+		transform: none;
+	}
+
+	:global(div.drawer-top[aria-hidden]) {
+		transform: none;
+	}
+
+	:global(div.drawer-bottom) {
+		top: initial;
+		transform: none;
+	}
+
+	:global(div.drawer-bottom[aria-hidden]) {
+		transform: none;
+	}
+
+	:global(div.drawer-content) {
+		margin: initial;
+		max-width: initial;
+		border-radius: initial;
+	}
+
+	:global(div.drawer-start div.drawer-content, div.drawer-end div.drawer-content) {
+		width: 25rem;
+	}
+
+	:global(div.drawer-top div.drawer-content, div.drawer-bottom div.drawer-content) {
+		height: 25vh;
+		width: 100%;
+	}
+</style>

package/dist/components/menu/FlatMenu.svelte

@@ -1,13 +1,15 @@
 <script>import { HeaderNavigationItem } from "./Menu.js";
 import { page } from "$app/stores";
 import { isSelected } from "./MenuFunctions.js";
+import ColumnMenu from "./ColumnMenu.svelte";
+import { Orientation } from "../Styling.js";
 export let css = "";
 export let localPages = [];
 export let includeSubpagesForSelect = false;
-const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).join(" ");
 </script>
 
-<ul class={klasses}>
+<ColumnMenu localPages={localPages} orientation={Orientation.DynamicRow} css={css}/>
+<!-- <ul class={klasses}>
 	{#each localPages as pageItem}
 		<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
 			<span class="screenreader-only">Navigate to {pageItem.name}</span>
@@ -16,7 +18,7 @@ const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).jo
 			</a>
 		</li>
 	{/each}
-</ul>
+</ul> -->
 
 <style>
 	ul {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.34.2",
+	"version": "2.34.4",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -50,6 +50,7 @@
 		"@sveltejs/adapter-auto": "^3.1.0",
 		"@sveltejs/package": "^2.2.5",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"ioredis": "^5.4.1",
 		"npm-watch": "^0.11.0",
 		"publint": "^0.2.7",
 		"sass": "^1.69.7",