sveltacular 0.0.73 → 0.0.75

package/dist/forms/text-box/text-box.svelte

@@ -50,39 +50,39 @@ const onInput = (e) => {
   }
   dipatch("input", cleanValue);
 };
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div class="input {disabled ? 'disabled' : 'enabled'}">
-		{#if prefix}
-			<div class="prefix">{prefix}</div>
-		{/if}
-		<input
-			{id}
-			{placeholder}
-			bind:value
-			{...{ type }}
-			{disabled}
-			{readonly}
-			{required}
-			{maxlength}
-			{minlength}
-			{pattern}
-			on:keypress={onKeyPress}
-			on:input={onInput}
-		/>
-		{#if suffix}
-			<div class="suffix">{suffix}</div>
-		{/if}
-	</div>
-	{#if helperText}
-		<div class="helper-text">{helperText}</div>
-	{/if}
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div class="input {disabled ? 'disabled' : 'enabled'}">
+		{#if prefix}
+			<div class="prefix">{prefix}</div>
+		{/if}
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			{...{ type }}
+			{disabled}
+			{readonly}
+			{required}
+			{maxlength}
+			{minlength}
+			{pattern}
+			on:keypress={onKeyPress}
+			on:input={onInput}
+		/>
+		{#if suffix}
+			<div class="suffix">{suffix}</div>
+		{/if}
+	</div>
+	{#if helperText}
+		<div class="helper-text">{helperText}</div>
+	{/if}
+</FormField>
+
 <style>.input {
   display: flex;
   align-items: center;
@@ -136,4 +136,4 @@ const onInput = (e) => {
   font-size: 0.75rem;
   line-height: 1.25rem;
   padding: 0.25rem;
-}</style>
+}</style>

package/dist/forms/url-box/url-box.svelte

@@ -11,17 +11,17 @@ const onInput = () => {
     value = urlParts[1];
   }
 };
-</script>
-
-<TextBox
-	bind:value
-	type="text"
-	{placeholder}
-	prefix={protocol + '://'}
-	{size}
-	on:input={onInput}
-	on:change={onInput}
-	allowSpaces={false}
->
-	<slot />
-</TextBox>
+</script>
+
+<TextBox
+	bind:value
+	type="text"
+	{placeholder}
+	prefix={protocol + '://'}
+	{size}
+	on:input={onInput}
+	on:change={onInput}
+	allowSpaces={false}
+>
+	<slot />
+</TextBox>

package/dist/generic/address/address.svelte

@@ -11,21 +11,21 @@ $:
   flatAddress = nobr(
     `${streetAddress}, ${city}, ${region} ${postalCode}, ${country}`.replace(/,\s+/g, ", ")
   );
-</script>
-
-<address>
-	<a href="https://maps.google.com/?q={flatAddress}" target="_blank" rel="noopener">
-		{#each streetAddressArray as line}
-			<div>{line}</div>
-		{/each}
-		<div>
-			{city}, {region}
-			{country}
-			{postalCode}
-		</div>
-	</a>
-</address>
-
+</script>
+
+<address>
+	<a href="https://maps.google.com/?q={flatAddress}" target="_blank" rel="noopener">
+		{#each streetAddressArray as line}
+			<div>{line}</div>
+		{/each}
+		<div>
+			{city}, {region}
+			{country}
+			{postalCode}
+		</div>
+	</a>
+</address>
+
 <style>address {
   display: block;
   margin-bottom: 1rem;
@@ -37,4 +37,4 @@ address a {
 }
 address a:hover {
   text-decoration: underline;
-}</style>
+}</style>

package/dist/generic/card/card-container.svelte

@@ -10,12 +10,12 @@ setContext("CardContainer", {
 });
 $:
   count = cards.length;
-</script>
-
-<ul data-count={count} class="{spacing} {align}">
-	<slot />
-</ul>
-
+</script>
+
+<ul data-count={count} class="{spacing} {align}">
+	<slot />
+</ul>
+
 <style>ul {
   list-style: none;
   padding: 0;
@@ -58,4 +58,4 @@ ul.space-between {
 }
 ul.space-around {
   justify-content: space-around;
-}</style>
+}</style>

package/dist/generic/card/card.svelte

@@ -16,15 +16,15 @@ const container = getContext("CardContainer");
 if (container) {
   container.register(id);
 }
-</script>
-
-<li {role} {id} on:click={onClick} class="{size} {role}">
-	{#if title}
-		<strong>{title}</strong>
-	{/if}
-	<slot />
-</li>
-
+</script>
+
+<li {role} {id} on:click={onClick} class="{size} {role}">
+	{#if title}
+		<strong>{title}</strong>
+	{/if}
+	<slot />
+</li>
+
 <style>li {
   display: inline-block;
   vertical-align: top;
@@ -60,4 +60,4 @@ li.lg {
 }
 li.xl {
   max-width: 30rem;
-}</style>
+}</style>

package/dist/generic/date/date-time.svelte

@@ -62,6 +62,6 @@ $:
   })();
 $:
   datetime = date.toISOString();
-</script>
-
-<time {datetime}>{text}</time>
+</script>
+
+<time {datetime}>{text}</time>

package/dist/generic/divider/divider.svelte

@@ -1,9 +1,9 @@
-<hr />
-
+<hr />
+
 <style>hr {
   border: 0;
   height: 0.1rem;
   background: var(--divider-color, rgba(127, 127, 127, 0.5));
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-}</style>
+}</style>

package/dist/generic/dot/dot.svelte

@@ -1,10 +1,10 @@
 <script>export let color = "#b7b7b7";
 export let shadow = false;
 export let size = "md";
-</script>
-
-<span style="background: {color}" class="{size} {shadow ? 'shadow' : ''}" />
-
+</script>
+
+<span style="background: {color}" class="{size} {shadow ? 'shadow' : ''}" />
+
 <style>span {
   display: inline-block;
   width: 0.5rem;
@@ -25,4 +25,4 @@ span.lg {
 span.xl {
   width: 1rem;
   height: 1rem;
-}</style>
+}</style>

package/dist/generic/dropdown-item/dropdown-item.svelte

@@ -0,0 +1,35 @@
+<script>import { createEventDispatcher } from "svelte";
+export let href = void 0;
+export let target = void 0;
+export let tabindex = 0;
+const dispatch = createEventDispatcher();
+const onClick = () => {
+  dispatch("click");
+};
+</script>
+
+{#if !href}
+	<span class="item" on:click={() => onClick()} on:keyup={() => onClick()} role="link" {tabindex}>
+		<slot />
+	</span>
+{:else}
+	<a {href} {target} class="item" on:click={() => onClick()} {tabindex}>
+		<slot />
+	</a>
+{/if}
+
+<style>.item {
+  display: block;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-family: var(--base-font-family, sans-serif);
+  white-space: nowrap;
+}
+.item:hover {
+  background-color: var(--button-secondary-hover-bg, #333);
+  color: var(--button-secondary-hover-fg, #fff);
+}</style>

package/dist/generic/dropdown-item/dropdown-item.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        href?: string | undefined;
+        target?: string | undefined;
+        tabindex?: number | undefined;
+    };
+    events: {
+        click: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DropdownItemProps = typeof __propDef.props;
+export type DropdownItemEvents = typeof __propDef.events;
+export type DropdownItemSlots = typeof __propDef.slots;
+export default class DropdownItem extends SvelteComponent<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
+}
+export {};

package/dist/generic/email/email.svelte

@@ -1,16 +1,16 @@
 <script>import EnvelopeIcon from "../../icons/envelope-icon.svelte";
 export let emailAddress = "";
-</script>
-
-<a href="mailto:{emailAddress}" title="Email Address">
-	<span class="icon">
-		<EnvelopeIcon />
-	</span>
-	<span class="address">
-		{emailAddress}
-	</span>
-</a>
-
+</script>
+
+<a href="mailto:{emailAddress}" title="Email Address">
+	<span class="icon">
+		<EnvelopeIcon />
+	</span>
+	<span class="address">
+		{emailAddress}
+	</span>
+</a>
+
 <style>a {
   color: inherit;
   text-decoration: none;
@@ -27,4 +27,4 @@ a .icon {
 }
 a:hover .address {
   text-decoration: underline;
-}</style>
+}</style>

package/dist/generic/empty/empty.svelte

@@ -3,19 +3,19 @@ export let size = "md";
 export let orientation = "vertical";
 export let reverse = false;
 export let align = "center";
-</script>
-
-<div class="empty {size} {orientation} {reverse ? 'reverse' : ''} {align}">
-	{#if $$slots.default}
-		<div class="icon">
-			<slot />
-		</div>
-	{/if}
-	<div class="text">
-		{text}
-	</div>
-</div>
-
+</script>
+
+<div class="empty {size} {orientation} {reverse ? 'reverse' : ''} {align}">
+	{#if $$slots.default}
+		<div class="icon">
+			<slot />
+		</div>
+	{/if}
+	<div class="text">
+		{text}
+	</div>
+</div>
+
 <style>.empty {
   display: flex;
   flex-direction: column;
@@ -80,4 +80,4 @@ export let align = "center";
 .xl .icon {
   height: 4rem;
   width: 4rem;
-}</style>
+}</style>

package/dist/generic/header/header.svelte

@@ -7,22 +7,22 @@ export let level = section?.level || 2;
 export let title = section?.title || "";
 export let subtitle = "";
 export let underline = false;
-</script>
-
-<header class:underline data-level={level}>
-	<FlexRow>
-		<hgroup>
-			<Headline {level}>{title}</Headline>
-			{#if subtitle}
-				<Subtitle {level}>{subtitle}</Subtitle>
-			{/if}
-		</hgroup>
-		<div>
-			<slot />
-		</div>
-	</FlexRow>
-</header>
-
+</script>
+
+<header class:underline data-level={level}>
+	<FlexRow>
+		<hgroup>
+			<Headline {level}>{title}</Headline>
+			{#if subtitle}
+				<Subtitle {level}>{subtitle}</Subtitle>
+			{/if}
+		</hgroup>
+		<div>
+			<slot />
+		</div>
+	</FlexRow>
+</header>
+
 <style>header {
   margin-bottom: 1rem;
   font-family: var(--base-headline-font-family, sans-serif);
@@ -30,4 +30,4 @@ export let underline = false;
 header.underline {
   padding-bottom: 0.5rem;
   border-bottom: solid 1px #ccc;
-}</style>
+}</style>

package/dist/generic/link/link.svelte

@@ -3,18 +3,18 @@ export let target = void 0;
 export let underline = "none";
 export let disabled = false;
 export let display = "inline";
-</script>
-
-{#if disabled}
-	<span class="link disabled underline-{underline} {display}">
-		<slot />
-	</span>
-{:else}
-	<a {href} {target} class="link underline-{underline} {display}">
-		<slot />
-	</a>
-{/if}
-
+</script>
+
+{#if disabled}
+	<span class="link disabled underline-{underline} {display}">
+		<slot />
+	</span>
+{:else}
+	<a {href} {target} class="link underline-{underline} {display}">
+		<slot />
+	</a>
+{/if}
+
 <style>.link {
   text-decoration: underline;
 }
@@ -33,4 +33,4 @@ export let display = "inline";
 }
 .link[href].underline-hover:hover {
   text-decoration: underline;
-}</style>
+}</style>

package/dist/generic/list/list-item.svelte

@@ -2,22 +2,22 @@
 import { listContext } from "./list.js";
 const ctx = getContext(listContext);
 const listStyle = ctx.style || "none";
-</script>
-
-<li class="{listStyle}">
-    <slot />
-</li>
-
-
-<style>
-	li.striped {
-        background-color: var(--list-row-bg, #fff);
-		color: var(--list-row-fg, #000);
-        padding: 0.5rem;
-
-        &:nth-of-type(odd) {
-            background-color: var(--list-row-alt-bg, #eee);
-            color: var(--list-row-alt-fg, #000);
-        }
-	}
-</style>
+</script>
+
+<li class="{listStyle}">
+    <slot />
+</li>
+
+
+<style>
+	li.striped {
+        background-color: var(--list-row-bg, #fff);
+		color: var(--list-row-fg, #000);
+        padding: 0.5rem;
+
+        &:nth-of-type(odd) {
+            background-color: var(--list-row-alt-bg, #eee);
+            color: var(--list-row-alt-fg, #000);
+        }
+	}
+</style>

package/dist/generic/list/list.svelte

@@ -6,18 +6,18 @@ const ctx = {
   style
 };
 setContext(listContext, ctx);
-</script>
-
-{#if type === 'unordered'}
-    <ul class="{style}">
-        <slot />
-    </ul>
-{:else}
-    <ol>
-        <slot />
-    </ol>
-{/if}
-
+</script>
+
+{#if type === 'unordered'}
+    <ul class="{style}">
+        <slot />
+    </ul>
+{:else}
+    <ol>
+        <slot />
+    </ol>
+{/if}
+
 <style>.none {
   list-style-type: none;
   padding-left: 0.5rem;

package/dist/generic/menu/menu.svelte

@@ -24,43 +24,43 @@ const scrollToItem = (index) => {
 };
 $:
   highlightIndex >= 0 && scrollToItem(highlightIndex);
-</script>
-
-<ul role="listbox" class="menu {open ? 'open' : 'closed'} {size}">
-	{#if instructions}
-		<li class="instructions">{instructions}</li>
-	{/if}
-	{#each items as item, i}
-		<li
-			on:click={() => selectItem(item)}
-			on:keypress={() => selectItem(item)}
-			role="option"
-			aria-selected={item.value === value}
-			data-index={i}
-		>
-			<div class:selected={i == highlightIndex}>
-				<FlexRow>
-					<FlexItem grow>
-						{#if searchText}
-							{@html item.name.replace(
-								new RegExp(searchText, 'gi'),
-								(match) => `<strong>${match}</strong>`
-							)}
-						{:else}
-							{item.name}
-						{/if}
-					</FlexItem>
-					<FlexItem>
-						{#if item.value === value}
-							<span class="check"><CheckIcon /></span>
-						{/if}
-					</FlexItem>
-				</FlexRow>
-			</div>
-		</li>
-	{/each}
-</ul>
-
+</script>
+
+<ul role="listbox" class="menu {open ? 'open' : 'closed'} {size}">
+	{#if instructions}
+		<li class="instructions">{instructions}</li>
+	{/if}
+	{#each items as item, i}
+		<li
+			on:click={() => selectItem(item)}
+			on:keypress={() => selectItem(item)}
+			role="option"
+			aria-selected={item.value === value}
+			data-index={i}
+		>
+			<div class:selected={i == highlightIndex}>
+				<FlexRow>
+					<FlexItem grow>
+						{#if searchText}
+							{@html item.name.replace(
+								new RegExp(searchText, 'gi'),
+								(match) => `<strong>${match}</strong>`
+							)}
+						{:else}
+							{item.name}
+						{/if}
+					</FlexItem>
+					<FlexItem>
+						{#if item.value === value}
+							<span class="check"><CheckIcon /></span>
+						{/if}
+					</FlexItem>
+				</FlexRow>
+			</div>
+		</li>
+	{/each}
+</ul>
+
 <style>.menu {
   position: relative;
   width: 8rem;
@@ -113,4 +113,4 @@ $:
   display: inline-block;
   width: 1rem;
   height: 1rem;
-}</style>
+}</style>