sveltacular 0.0.49 → 0.0.51

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>

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

@@ -1,14 +1,14 @@
 <script>import Overlay from "../../generic/overlay.svelte";
 export let open = false;
-</script>
-
-<div class:open>
-	<Overlay show={open} />
-	<aside>
-		<slot />
-	</aside>
-</div>
-
+</script>
+
+<div class:open>
+	<Overlay show={open} />
+	<aside>
+		<slot />
+	</aside>
+</div>
+
 <style>div aside {
   width: 300px;
   padding: 0;
@@ -33,4 +33,4 @@ div.open {
 }
 div.open aside {
   left: 0;
-}</style>
+}</style>

package/dist/navigation/tabs/tab-group.svelte

@@ -19,25 +19,25 @@ const ctx = {
   register
 };
 setContext(tabContext, ctx);
-</script>
-
-<section class="tab-group {style}">
-	<div class="tab-head">
-		<nav>
-			{#each $tabs as tab}
-				<li class={$active == tab.id ? 'active' : 'inactive'}>
-					<button on:click={() => selectTab(tab.id)}>
-						{tab.name}
-					</button>
-				</li>
-			{/each}
-		</nav>
-	</div>
-	<div class="tab-content">
-		<slot />
-	</div>
-</section>
-
+</script>
+
+<section class="tab-group {style}">
+	<div class="tab-head">
+		<nav>
+			{#each $tabs as tab}
+				<li class={$active == tab.id ? 'active' : 'inactive'}>
+					<button on:click={() => selectTab(tab.id)}>
+						{tab.name}
+					</button>
+				</li>
+			{/each}
+		</nav>
+	</div>
+	<div class="tab-content">
+		<slot />
+	</div>
+</section>
+
 <style>.tab-head {
   height: 2rem;
   position: relative;
@@ -154,4 +154,4 @@ setContext(tabContext, ctx);
 .overline .inactive button {
   border-style: none;
   color: var(--tab-overline-fg, rgb(180, 180, 180));
-}</style>
+}</style>

package/dist/navigation/tabs/tab.svelte

@@ -18,21 +18,21 @@ const unsubscribe = ctx.active.subscribe((selectedId) => {
   }
 });
 onDestroy(() => unsubscribe());
-</script>
-
-<article class:active>
-	{#if active}
-		{#if $$slots.default}
-			<slot />
-		{:else}
-			<Loading />
-		{/if}
-	{/if}
-</article>
-
+</script>
+
+<article class:active>
+	{#if active}
+		{#if $$slots.default}
+			<slot />
+		{:else}
+			<Loading />
+		{/if}
+	{/if}
+</article>
+
 <style>article {
   display: none;
 }
 article.active {
   display: block;
-}</style>
+}</style>

package/dist/navigation/wizard/wizard-step.svelte

@@ -9,17 +9,17 @@ $:
   isCurrentStep = $state.currentStep === step;
 $:
   errors = $state.errors;
-</script>
-
-<div class="step {isCurrentStep ? 'current' : ''}">
-	{#if errors.length}
-		<div class="errors">
-			<Notice style="error" size="md">{errors.join(' ')}</Notice>
-		</div>
-	{/if}
-	<slot />
-</div>
-
+</script>
+
+<div class="step {isCurrentStep ? 'current' : ''}">
+	{#if errors.length}
+		<div class="errors">
+			<Notice style="error" size="md">{errors.join(' ')}</Notice>
+		</div>
+	{/if}
+	<slot />
+</div>
+
 <style>.step {
   display: none;
 }
@@ -31,4 +31,4 @@ $:
   display: flex;
   flex-direction: column;
   gap: 1rem;
-}</style>
+}</style>

package/dist/navigation/wizard/wizard.svelte

@@ -82,32 +82,32 @@ $:
   subtitle = steps[currentStep];
 $:
   total = Object.values(steps).length;
-</script>
-
-<section class:disabled>
-	<Header {title} {subtitle} {level} />
-	<div class="content">
-		<slot />
-	</div>
-	<footer>
-		<div>
-			{#if !isFirstStep}
-				<Button type="button" style="secondary" on:click={previous} {disabled}>Previous</Button>
-			{/if}
-		</div>
-		<div>
-			<div>Step {currentStep} of {total}</div>
-		</div>
-		<div>
-			{#if isLastStep}
-				<Button type="submit" style="primary" on:click={done} {disabled}>Done</Button>
-			{:else}
-				<Button type="button" style="primary" on:click={next} {disabled}>Next</Button>
-			{/if}
-		</div>
-	</footer>
-</section>
-
+</script>
+
+<section class:disabled>
+	<Header {title} {subtitle} {level} />
+	<div class="content">
+		<slot />
+	</div>
+	<footer>
+		<div>
+			{#if !isFirstStep}
+				<Button type="button" style="secondary" on:click={previous} {disabled}>Previous</Button>
+			{/if}
+		</div>
+		<div>
+			<div>Step {currentStep} of {total}</div>
+		</div>
+		<div>
+			{#if isLastStep}
+				<Button type="submit" style="primary" on:click={done} {disabled}>Done</Button>
+			{:else}
+				<Button type="button" style="primary" on:click={next} {disabled}>Next</Button>
+			{/if}
+		</div>
+	</footer>
+</section>
+
 <style>section.disabled {
   opacity: 0.5;
 }
@@ -121,4 +121,4 @@ footer {
 }
 footer div {
   width: 100%;
-}</style>
+}</style>