sveltacular 0.0.48 → 0.0.50

package/dist/modals/alert.svelte

@@ -17,27 +17,27 @@ const close = () => {
   dispatch("close");
   open = false;
 };
-</script>
-
-{#if open}
-	<Overlay on:click={close}>
-		<Dialog {size}>
-			{#if title}
-				<DialogHeader>
-					{title}
-				</DialogHeader>
-				<Divider />
-			{/if}
-			<DialogCloseButton show={showCloseButton} on:click={close} />
-			<DialogBody>
-				<slot />
-			</DialogBody>
-			<Divider />
-			<DialogFooter>
-				<Button on:click={close} size="full">
-					{buttonText}
-				</Button>
-			</DialogFooter>
-		</Dialog>
-	</Overlay>
-{/if}
+</script>
+
+{#if open}
+	<Overlay on:click={close}>
+		<Dialog {size}>
+			{#if title}
+				<DialogHeader>
+					{title}
+				</DialogHeader>
+				<Divider />
+			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={close} />
+			<DialogBody>
+				<slot />
+			</DialogBody>
+			<Divider />
+			<DialogFooter>
+				<Button on:click={close} size="full">
+					{buttonText}
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	</Overlay>
+{/if}

package/dist/modals/confirm.svelte

@@ -22,30 +22,30 @@ const yes = () => {
   dispatch("yes");
   open = false;
 };
-</script>
-
-{#if open}
-	<Overlay on:click={no}>
-		<Dialog {size}>
-			{#if title}
-				<DialogHeader>
-					{title}
-				</DialogHeader>
-				<Divider />
-			{/if}
-			<DialogCloseButton show={showCloseButton} on:click={no} />
-			<DialogBody>
-				<slot />
-			</DialogBody>
-			<Divider />
-			<DialogFooter>
-				<Button on:click={no} style="secondary" size="full">
-					{noText}
-				</Button>
-				<Button on:click={yes} style="primary" size="full">
-					{yesText}
-				</Button>
-			</DialogFooter>
-		</Dialog>
-	</Overlay>
-{/if}
+</script>
+
+{#if open}
+	<Overlay on:click={no}>
+		<Dialog {size}>
+			{#if title}
+				<DialogHeader>
+					{title}
+				</DialogHeader>
+				<Divider />
+			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={no} />
+			<DialogBody>
+				<slot />
+			</DialogBody>
+			<Divider />
+			<DialogFooter>
+				<Button on:click={no} style="secondary" size="full">
+					{noText}
+				</Button>
+				<Button on:click={yes} style="primary" size="full">
+					{yesText}
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	</Overlay>
+{/if}

package/dist/modals/dialog-body.svelte

@@ -1,9 +1,9 @@
-<div>
-	<slot />
-</div>
-
+<div>
+	<slot />
+</div>
+
 <style>div {
   color: #000;
   margin-top: 1rem;
   margin-bottom: 1rem;
-}</style>
+}</style>

package/dist/modals/dialog-close-button.svelte

@@ -6,12 +6,12 @@ const onClick = (e) => {
   e.stopPropagation();
   dispatch("click");
 };
-</script>
-
-{#if show}
-	<button type="button" on:click={onClick}>X</button>
-{/if}
-
+</script>
+
+{#if show}
+	<button type="button" on:click={onClick}>X</button>
+{/if}
+
 <style>button {
   appearance: none;
   border: none;
@@ -29,4 +29,4 @@ const onClick = (e) => {
 }
 button:hover {
   background-color: #eee;
-}</style>
+}</style>

package/dist/modals/dialog-footer.svelte

@@ -1,9 +1,9 @@
-<script>
-	import FlexRow from '../layout/flex-row.svelte';
-</script>
-
-<footer>
-	<FlexRow layout="stretch">
-		<slot />
-	</FlexRow>
-</footer>
+<script>
+	import FlexRow from '../layout/flex-row.svelte';
+</script>
+
+<footer>
+	<FlexRow layout="stretch">
+		<slot />
+	</FlexRow>
+</footer>

package/dist/modals/dialog-header.svelte

@@ -1,7 +1,7 @@
-<header>
-	<h1><slot /></h1>
-</header>
-
+<header>
+	<h1><slot /></h1>
+</header>
+
 <style>header {
   display: flex;
   justify-content: space-between;
@@ -16,4 +16,4 @@ header h1 {
   flex-grow: 1;
   font-size: 1.25rem;
   line-height: 1.75rem;
-}</style>
+}</style>

package/dist/modals/dialog-window.svelte

@@ -2,14 +2,14 @@
 const captureClick = (e) => {
   e.stopPropagation();
 };
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class={size} on:click={captureClick}>
-	<slot />
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class={size} on:click={captureClick}>
+	<slot />
+</div>
+
 <style>div {
   position: relative;
   border: solid 0.1rem #000;
@@ -45,4 +45,4 @@ div.full {
   div {
     max-width: 100%;
   }
-}</style>
+}</style>

package/dist/modals/modal.svelte

@@ -11,15 +11,15 @@ const close = () => {
   dispatch("close");
   open = false;
 };
-</script>
-
-{#if open}
-	<Overlay on:click={close}>
-		<Dialog {size}>
-			<DialogCloseButton show={showCloseButton} on:click={close} />
-			<DialogBody>
-				<slot />
-			</DialogBody>
-		</Dialog>
-	</Overlay>
-{/if}
+</script>
+
+{#if open}
+	<Overlay on:click={close}>
+		<Dialog {size}>
+			<DialogCloseButton show={showCloseButton} on:click={close} />
+			<DialogBody>
+				<slot />
+			</DialogBody>
+		</Dialog>
+	</Overlay>
+{/if}

package/dist/modals/prompt.svelte

@@ -29,32 +29,32 @@ const yes = () => {
   open = false;
   dispatch("ok", value);
 };
-</script>
-
-{#if open}
-	<Overlay on:click={no}>
-		<Dialog {size}>
-			{#if title}
-				<DialogHeader>
-					{title}
-				</DialogHeader>
-				<Divider />
-			{/if}
-			<DialogCloseButton show={showCloseButton} on:click={no} />
-			<DialogBody>
-				<TextBox bind:value {placeholder} {type} {required} size="full">
-					<slot />
-				</TextBox>
-			</DialogBody>
-			<Divider />
-			<DialogFooter>
-				<Button on:click={no} style="secondary" size="full">
-					{cancelText}
-				</Button>
-				<Button on:click={yes} style="primary" size="full">
-					{okText}
-				</Button>
-			</DialogFooter>
-		</Dialog>
-	</Overlay>
-{/if}
+</script>
+
+{#if open}
+	<Overlay on:click={no}>
+		<Dialog {size}>
+			{#if title}
+				<DialogHeader>
+					{title}
+				</DialogHeader>
+				<Divider />
+			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={no} />
+			<DialogBody>
+				<TextBox bind:value {placeholder} {type} {required} size="full">
+					<slot />
+				</TextBox>
+			</DialogBody>
+			<Divider />
+			<DialogFooter>
+				<Button on:click={no} style="secondary" size="full">
+					{cancelText}
+				</Button>
+				<Button on:click={yes} style="primary" size="full">
+					{okText}
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	</Overlay>
+{/if}

package/dist/navigation/accordian/accordian.svelte

@@ -1,22 +1,22 @@
 <script>import AngleUpIcon from "../../icons/angle-up-icon.svelte";
 export let title;
 export let expanded = false;
-</script>
-
-<div class:expanded class="accordian">
-	<button type="button" on:click={() => (expanded = !expanded)}>
-		<span class="title">
-			{title}
-		</span>
-		<span class="icon">
-			<AngleUpIcon />
-		</span>
-	</button>
-	<div class="menu">
-		<slot />
-	</div>
-</div>
-
+</script>
+
+<div class:expanded class="accordian">
+	<button type="button" on:click={() => (expanded = !expanded)}>
+		<span class="title">
+			{title}
+		</span>
+		<span class="icon">
+			<AngleUpIcon />
+		</span>
+	</button>
+	<div class="menu">
+		<slot />
+	</div>
+</div>
+
 <style>.accordian {
   background: #eee;
   color: #000;
@@ -59,4 +59,4 @@ export let expanded = false;
 }
 .accordian.expanded .icon {
   transform: rotate(180deg);
-}</style>
+}</style>

package/dist/navigation/app-bar/app-bar.svelte

@@ -9,12 +9,12 @@ setContext("app-bar", {
   size,
   padding
 });
-</script>
-
-<header class="{position} {size} padding-{padding} {isFixed ? 'fixed' : 'absolute'}">
-	<slot />
-</header>
-
+</script>
+
+<header class="{position} {size} padding-{padding} {isFixed ? 'fixed' : 'absolute'}">
+	<slot />
+</header>
+
 <style>header {
   display: flex;
   align-items: center;
@@ -72,4 +72,4 @@ header.padding-xl {
 header.isTransparent {
   background: transparent;
   color: inherit;
-}</style>
+}</style>

package/dist/navigation/app-bar/app-branding.svelte

@@ -1,20 +1,20 @@
 <script>import { setContext } from "svelte";
 setContext("app-branding", true);
-</script>
-
-<div class="branding">
-	<slot />
-</div>
-
-<style>
-	div {
-		display: flex;
-		align-items: flex-start;
-		justify-content: center;
-		flex-direction: column;
-		width: 100%;
-		height: 100%;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-	}
-</style>
+</script>
+
+<div class="branding">
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
+</style>

package/dist/navigation/app-bar/app-logo.svelte

@@ -2,16 +2,16 @@
 export let src = void 0;
 export let alt;
 export let href;
-</script>
-
-<div class="logo">
-	{#if src}
-		<Image {src} {alt} {href} align="left" />
-	{:else}
-		<a {href} title={alt}><slot /></a>
-	{/if}
-</div>
-
+</script>
+
+<div class="logo">
+	{#if src}
+		<Image {src} {alt} {href} align="left" />
+	{:else}
+		<a {href} title={alt}><slot /></a>
+	{/if}
+</div>
+
 <style>div {
   display: block;
   width: 100%;
@@ -27,4 +27,4 @@ div a {
 }
 div a:hover {
   color: var(--nav-link-hover, #333);
-}</style>
+}</style>

package/dist/navigation/app-bar/app-nav-item.svelte

@@ -9,19 +9,19 @@ const click = () => {
     navigateTo(href);
   dispatch("click");
 };
-</script>
-
-<button type="button" class={$open ? 'open' : 'closed'} on:click={click}>
-	{#if $$slots.default}
-		<div class="icon">
-			<slot />
-		</div>
-	{/if}
-	<div class="title">
-		{title}
-	</div>
-</button>
-
+</script>
+
+<button type="button" class={$open ? 'open' : 'closed'} on:click={click}>
+	{#if $$slots.default}
+		<div class="icon">
+			<slot />
+		</div>
+	{/if}
+	<div class="title">
+		{title}
+	</div>
+</button>
+
 <style>button {
   display: flex;
   flex-direction: column;
@@ -66,4 +66,4 @@ button .icon {
   button.open .icon {
     width: 1.5rem;
   }
-}</style>
+}</style>

package/dist/navigation/app-bar/app-nav.svelte

@@ -8,17 +8,17 @@ setContext("app-nav-state", open);
 const toggle = () => open.set(!get(open));
 const context = getContext("app-bar");
 const collapse = context.position !== "bottom" ? "collapse" : "";
-</script>
-
-<div class="icon {$open ? 'open' : 'closed'} {collapse}">
-	<button type="button" on:click={toggle}>
-		<HamburgerIcon />
-	</button>
-</div>
-<nav class="{align} {spacing} {collapse} {$open ? 'open' : 'closed'}">
-	<slot />
-</nav>
-
+</script>
+
+<div class="icon {$open ? 'open' : 'closed'} {collapse}">
+	<button type="button" on:click={toggle}>
+		<HamburgerIcon />
+	</button>
+</div>
+<nav class="{align} {spacing} {collapse} {$open ? 'open' : 'closed'}">
+	<slot />
+</nav>
+
 <style>.icon {
   display: none;
 }
@@ -108,4 +108,4 @@ nav.space-around {
     padding: 0;
     gap: 0;
   }
-}</style>
+}</style>

package/dist/navigation/breadcrumbs/breadcrumbs.svelte

@@ -8,30 +8,30 @@ const getCrumLabel = (crumb) => {
     return crumb;
   return crumb.label;
 };
-</script>
-
-<nav class={size}>
-	{#if homeUrl}
-		<li class="home">
-			<a href={homeUrl}><HomeIcon /></a>
-		</li>
-	{/if}
-	{#each crumbs as crumb, i}
-		{#if typeof crumb === 'string' || !crumb.href}
-			<li>{getCrumLabel(crumb)}</li>
-		{:else}
-			<li>
-				<a href={crumb.href}>
-					{crumb.label}
-				</a>
-			</li>
-		{/if}
-		{#if i < crumbs.length - 1}
-			<li class="separator">{separator}</li>
-		{/if}
-	{/each}
-</nav>
-
+</script>
+
+<nav class={size}>
+	{#if homeUrl}
+		<li class="home">
+			<a href={homeUrl}><HomeIcon /></a>
+		</li>
+	{/if}
+	{#each crumbs as crumb, i}
+		{#if typeof crumb === 'string' || !crumb.href}
+			<li>{getCrumLabel(crumb)}</li>
+		{:else}
+			<li>
+				<a href={crumb.href}>
+					{crumb.label}
+				</a>
+			</li>
+		{/if}
+		{#if i < crumbs.length - 1}
+			<li class="separator">{separator}</li>
+		{/if}
+	{/each}
+</nav>
+
 <style>nav {
   display: flex;
   align-items: center;
@@ -72,4 +72,4 @@ nav.lg li {
 }
 nav.lg li.home {
   width: 16px;
-}</style>
+}</style>

package/dist/navigation/pagination/pagination.svelte

@@ -31,32 +31,32 @@ $:
   showFirst = currentPage > 4;
 $:
   showLast = currentPage < totalPages - 3;
-</script>
-
-<nav class="{align} {style} {size}">
-	{#if currentPage > 1}
-		<button on:click={() => changePage(currentPage - 1)} class="previous page">Previous</button>
-	{/if}
-	{#if showFirst}
-		<button on:click={() => changePage(1)} class="first page">1</button>
-		<div class="ellipsis page">···</div>
-	{/if}
-	{#each previousPages as page}
-		<button on:click={() => changePage(page)} class="pre page">{page}</button>
-	{/each}
-	<div class="current page">{currentPage}</div>
-	{#each nextPages as page}
-		<button on:click={() => changePage(page)} class="pro numbered page">{page}</button>
-	{/each}
-	{#if showLast}
-		<div class="ellipsis page">···</div>
-		<button on:click={() => changePage(totalPages)} class="last page">{totalPages}</button>
-	{/if}
-	{#if currentPage < totalPages}
-		<button on:click={() => changePage(currentPage + 1)} class="next page">Next</button>
-	{/if}
-</nav>
-
+</script>
+
+<nav class="{align} {style} {size}">
+	{#if currentPage > 1}
+		<button on:click={() => changePage(currentPage - 1)} class="previous page">Previous</button>
+	{/if}
+	{#if showFirst}
+		<button on:click={() => changePage(1)} class="first page">1</button>
+		<div class="ellipsis page">···</div>
+	{/if}
+	{#each previousPages as page}
+		<button on:click={() => changePage(page)} class="pre page">{page}</button>
+	{/each}
+	<div class="current page">{currentPage}</div>
+	{#each nextPages as page}
+		<button on:click={() => changePage(page)} class="pro numbered page">{page}</button>
+	{/each}
+	{#if showLast}
+		<div class="ellipsis page">···</div>
+		<button on:click={() => changePage(totalPages)} class="last page">{totalPages}</button>
+	{/if}
+	{#if currentPage < totalPages}
+		<button on:click={() => changePage(currentPage + 1)} class="next page">Next</button>
+	{/if}
+</nav>
+
 <style>nav {
   display: flex;
   flex-direction: row;
@@ -126,4 +126,4 @@ nav.flat button:hover {
   nav .pro {
     display: none;
   }
-}</style>
+}</style>