sveltacular 0.0.48 → 0.0.50

package/dist/generic/address/address.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        streetAddress?: string | undefined;
+        city?: string | undefined;
+        region?: string | undefined;
+        postalCode?: string | undefined;
+        country?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddressProps = typeof __propDef.props;
+export type AddressEvents = typeof __propDef.events;
+export type AddressSlots = typeof __propDef.slots;
+export default class Address extends SvelteComponent<AddressProps, AddressEvents, AddressSlots> {
+}
+export {};

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/email/email.svelte

@@ -0,0 +1,30 @@
+<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>
+
+<style>a {
+  color: inherit;
+  text-decoration: none;
+}
+a span {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.5rem;
+}
+a .icon {
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+}
+a:hover .address {
+  text-decoration: underline;
+}</style>

package/dist/generic/email/email.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        emailAddress?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmailProps = typeof __propDef.props;
+export type EmailEvents = typeof __propDef.events;
+export type EmailSlots = typeof __propDef.slots;
+export default class Email extends SvelteComponent<EmailProps, EmailEvents, EmailSlots> {
+}
+export {};

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/menu/menu.svelte

@@ -3,7 +3,7 @@ import FlexItem from "../../layout/flex-item.svelte";
 import FlexRow from "../../layout/flex-row.svelte";
 import { createEventDispatcher } from "svelte";
 export let items = [];
-export let value = "";
+export let value = null;
 export let instructions = "";
 export let open = false;
 export let size = "md";
@@ -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>

package/dist/generic/menu/menu.svelte.d.ts

@@ -3,7 +3,7 @@ import type { FormFieldSizeOptions, MenuOption } from '../../index.js';
 declare const __propDef: {
     props: {
         items?: MenuOption[] | undefined;
-        value?: string | undefined;
+        value?: string | null | undefined;
         instructions?: string | undefined;
         open?: boolean | undefined;
         size?: FormFieldSizeOptions | undefined;

package/dist/generic/notice/notice.svelte

@@ -19,30 +19,30 @@ const onClick = (e) => {
   e.stopPropagation();
   goodbye();
 };
-</script>
-
-<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {fading ? 'fading' : ''}">
-	{#if $$slots.icon}
-		<div class="icon">
-			<slot name="icon" />
-		</div>
-	{/if}
-	<div class="content">
-		{#if title}
-			<strong>{title}</strong>
-		{/if}
-		<div class="message">
-			<slot />
-		</div>
-	</div>
-
-	{#if dismissable}
-		<div class="dismiss">
-			<button type="button" on:click={onClick}>X</button>
-		</div>
-	{/if}
-</div>
-
+</script>
+
+<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {fading ? 'fading' : ''}">
+	{#if $$slots.icon}
+		<div class="icon">
+			<slot name="icon" />
+		</div>
+	{/if}
+	<div class="content">
+		{#if title}
+			<strong>{title}</strong>
+		{/if}
+		<div class="message">
+			<slot />
+		</div>
+	</div>
+
+	{#if dismissable}
+		<div class="dismiss">
+			<button type="button" on:click={onClick}>X</button>
+		</div>
+	{/if}
+</div>
+
 <style>.notice {
   display: flex;
   flex-direction: row;
@@ -155,4 +155,4 @@ button {
 }
 button:hover {
   font-weight: bold;
-}</style>
+}</style>

package/dist/generic/overlay.svelte

@@ -9,13 +9,13 @@ const onKeyPress = (event) => {
     onClick();
   }
 };
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class:show on:click={onClick} on:keypress={onKeyPress}>
-	<slot />
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class:show on:click={onClick} on:keypress={onKeyPress}>
+	<slot />
+</div>
+
 <style>div {
   display: none;
   position: fixed;
@@ -30,4 +30,4 @@ div.show {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>

package/dist/generic/panel/panel.svelte

@@ -1,14 +1,14 @@
 <script>export let title = void 0;
 export let border = true;
-</script>
-
-<fieldset class={border ? 'border' : 'no-border'}>
-	{#if title}
-		<legend>{title}</legend>
-	{/if}
-	<slot />
-</fieldset>
-
+</script>
+
+<fieldset class={border ? 'border' : 'no-border'}>
+	{#if title}
+		<legend>{title}</legend>
+	{/if}
+	<slot />
+</fieldset>
+
 <style>fieldset {
   position: relative;
   margin-bottom: 1rem;
@@ -28,4 +28,4 @@ fieldset legend {
   letter-spacing: 0.1rem;
   color: var(--base-fg, #ccc);
   font-family: var(--base-headline-font-family, sans-serif);
-}</style>
+}</style>

package/dist/generic/phone/phone.svelte

@@ -0,0 +1,56 @@
+<script>import { capitalize } from "../../helpers/capitalize.js";
+import MobilePhoneIcon from "../../icons/mobile-phone-icon.svelte";
+import PhoneIcon from "../../icons/phone-icon.svelte";
+export let phoneNumber;
+export let type = "mobile";
+const getDigits = (phoneNumber2) => {
+  return phoneNumber2.replace(/[^0-9]/g, "");
+};
+const formatPhoneNumber = (phoneNumber2) => {
+  const cleaned = getDigits(phoneNumber2);
+  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    return "(" + match[1] + ") " + match[2] + "-" + match[3];
+  }
+  return phoneNumber2;
+};
+$:
+  formattedPhoneNumber = formatPhoneNumber(phoneNumber);
+$:
+  phoneNumberDigits = getDigits(phoneNumber);
+$:
+  protocol = type === "sms" ? "sms:" : "tel:";
+$:
+  isCellPhone = type == "mobile" || type == "sms";
+</script>
+
+<a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
+	<span class="icon">
+		{#if isCellPhone}
+			<MobilePhoneIcon />
+		{:else}
+			<PhoneIcon />
+		{/if}
+	</span>
+	<span class="number">
+		{formattedPhoneNumber}
+	</span>
+</a>
+
+<style>a {
+  color: inherit;
+  text-decoration: none;
+}
+a span {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.5rem;
+}
+a .icon {
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+}
+a:hover .number {
+  text-decoration: underline;
+}</style>

package/dist/generic/phone/phone.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        phoneNumber: string;
+        type?: "sms" | "mobile" | "home" | "work" | "fax" | "other" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PhoneProps = typeof __propDef.props;
+export type PhoneEvents = typeof __propDef.events;
+export type PhoneSlots = typeof __propDef.slots;
+export default class Phone extends SvelteComponent<PhoneProps, PhoneEvents, PhoneSlots> {
+}
+export {};

package/dist/generic/pill/pill.svelte

@@ -1,11 +1,11 @@
 <script>export let size = "md";
 export let style = "standard";
-</script>
-
-<span class="pill {size} {style}">
-	<slot />
-</span>
-
+</script>
+
+<span class="pill {size} {style}">
+	<slot />
+</span>
+
 <style>.pill {
   display: inline-block;
   padding: 0.25rem 0.5rem;
@@ -33,4 +33,4 @@ export let style = "standard";
 }
 .pill.square {
   border-radius: 0;
-}</style>
+}</style>

package/dist/generic/scorecard/scorecard.svelte

@@ -17,15 +17,15 @@ $:
   formattedValue = typeof value === "number" ? value.toLocaleString() : value;
 $:
   isLink = !!href;
-</script>
-
-<button on:click={onClick} class:isLink {id}>
-	<figure class={caption}>
-		<span class="value">{formattedValue}</span>
-		<figcaption><slot /></figcaption>
-	</figure>
-</button>
-
+</script>
+
+<button on:click={onClick} class:isLink {id}>
+	<figure class={caption}>
+		<span class="value">{formattedValue}</span>
+		<figcaption><slot /></figcaption>
+	</figure>
+</button>
+
 <style>button {
   display: inline-block;
   margin-right: 1rem;
@@ -95,4 +95,4 @@ button figure.right {
   justify-content: center;
   text-align: right;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/generic/section/section.svelte

@@ -4,15 +4,15 @@ export let title = void 0;
 export let level = 2;
 export let size = "full";
 setContext("section", { level, title });
-</script>
-
-<section class="level-{level} {size}">
-	{#if title}
-		<Header />
-	{/if}
-	<slot />
-</section>
-
+</script>
+
+<section class="level-{level} {size}">
+	{#if title}
+		<Header />
+	{/if}
+	<slot />
+</section>
+
 <style>section {
   padding: 0;
   margin-top: 1rem;
@@ -33,4 +33,4 @@ section.xl {
 }
 section.full {
   width: 100%;
-}</style>
+}</style>