sveltacular 0.0.15 → 0.0.17

package/dist/forms/button/button.svelte

@@ -41,6 +41,7 @@ const click = () => {
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
   user-select: none;
   white-space: nowrap;
+  font-family: var(--base-font-family, sans-serif);
 }
 button.flex {
   flex-grow: 1;

package/dist/forms/form-field.svelte

@@ -19,4 +19,5 @@ $:
 <style>div {
   margin-bottom: 1rem;
   margin-right: 1rem;
+  font-family: var(--base-font-family, sans-serif);
 }</style>

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

@@ -81,7 +81,7 @@ $:
 			on:focus={() => (open = true)}
 			on:keyup={onInputKeyPress}
 		/>
-		<button class="icon" on:click={toggle} on:keydown={toggle}>
+		<button type="button" class="icon" on:click={toggle} on:keydown={toggle}>
 			<AngleUpIcon />
 		</button>
 		<div class="dropdown">

package/dist/generic/card/card.svelte

@@ -28,8 +28,8 @@ const onClick = () => {
   border-radius: 0.5rem;
   background-color: #fff;
   color: #555;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  font-family: var(--base-font-family, sans-serif);
 }
 li strong {
   display: block;

package/dist/generic/date/{date.svelte → date-time.svelte}

@@ -65,3 +65,9 @@ $:
 </script>
 
 <time {datetime}>{text}</time>
+
+<style>
+	time {
+		font-family: var(--base-font-family, sans-serif);
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { DateTimeStyle, DateType } from '../../types/date.js';
+declare const __propDef: {
+    props: {
+        value?: string | number | Date | undefined;
+        lang?: string | undefined;
+        type?: DateType | undefined;
+        style?: DateTimeStyle | undefined;
+        dateTimeSeparator?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateTimeProps = typeof __propDef.props;
+export type DateTimeEvents = typeof __propDef.events;
+export type DateTimeSlots = typeof __propDef.slots;
+export default class DateTime extends SvelteComponent<DateTimeProps, DateTimeEvents, DateTimeSlots> {
+}
+export {};

package/dist/generic/header/header.svelte

@@ -23,6 +23,7 @@ export let underline = false;
 
 <style>header {
   margin-bottom: 1rem;
+  font-family: var(--base-headline-font-family, sans-serif);
 }
 header.underline {
   padding-bottom: 0.5rem;

package/dist/generic/menu/menu.svelte

@@ -75,6 +75,7 @@ $:
   max-width: 100%;
   max-height: 15rem;
   overflow-y: auto;
+  font-family: var(--base-font-family, sans-serif);
 }
 .menu.closed {
   display: none;

package/dist/generic/overlay.svelte

@@ -1,8 +1,18 @@
-<script>
-	export let show = true;
+<script>import { createEventDispatcher } from "svelte";
+export let show = true;
+const dispatch = createEventDispatcher();
+const onClick = () => {
+  dispatch("click");
+};
+const onKeyPress = (event) => {
+  if (event.key === "Escape") {
+    onClick();
+  }
+};
 </script>
 
-<div class:show>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class:show on:click={onClick} on:keypress={onKeyPress}>
 	<slot />
 </div>
 

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

@@ -1,27 +1,20 @@
-/** @typedef {typeof __propDef.props}  OverlayProps */
-/** @typedef {typeof __propDef.events}  OverlayEvents */
-/** @typedef {typeof __propDef.slots}  OverlaySlots */
-export default class Overlay extends SvelteComponent<{
-    show?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type OverlayProps = typeof __propDef.props;
-export type OverlayEvents = typeof __propDef.events;
-export type OverlaySlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         show?: boolean | undefined;
     };
     events: {
+        click: CustomEvent<void>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
+export type OverlayProps = typeof __propDef.props;
+export type OverlayEvents = typeof __propDef.events;
+export type OverlaySlots = typeof __propDef.slots;
+export default class Overlay extends SvelteComponent<OverlayProps, OverlayEvents, OverlaySlots> {
+}
 export {};

package/dist/generic/panel/panel.svelte

@@ -15,6 +15,7 @@ export let border = true;
   padding: 1rem;
   border: soild 1px rgba(100, 100, 100, 0.5);
   border-radius: 0.5rem;
+  font-family: var(--base-font-family, sans-serif);
 }
 fieldset.no-border {
   border: none;
@@ -24,4 +25,5 @@ fieldset legend {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1rem;
+  font-family: var(--base-headline-font-family, sans-serif);
 }</style>

package/dist/generic/pill/pill.svelte

@@ -14,6 +14,7 @@ export let style = "standard";
   font-size: 0.75rem;
   font-weight: 500;
   color: #4a5568;
+  font-family: var(--base-font-family, sans-serif);
 }
 .pill.sm {
   font-size: 0.625rem;

package/dist/generic/scorecard/scorecard.svelte

@@ -15,6 +15,7 @@
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
   font-family: sans-serif;
   min-width: 6rem;
+  font-family: var(--base-font-family, sans-serif);
 }
 figure div {
   font-size: 2.5rem;

package/dist/generic/section/section.svelte

@@ -5,4 +5,5 @@
 <style>section {
   padding: 0;
   margin: 1rem 1rem;
+  font-family: var(--base-font-family, sans-serif);
 }</style>

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { default as Overlay } from './generic/overlay.svelte';
 export { default as Image } from './images/image.svelte';
 export { default as Icon } from './images/icon.svelte';
 export { default as Menu } from './generic/menu/menu.svelte';
-export { default as Date } from './generic/date/date.svelte';
+export { default as DateTime } from './generic/date/date-time.svelte';
 export { default as Panel } from './generic/panel/panel.svelte';
 export { default as Section } from './generic/section/section.svelte';
 export { default as Header } from './generic/header/header.svelte';
@@ -38,6 +38,7 @@ export { default as DialogBody } from './modals/dialog-body.svelte';
 export { default as DialogFooter } from './modals/dialog-footer.svelte';
 export { default as DialogHeader } from './modals/dialog-header.svelte';
 export { default as DialogWindow } from './modals/dialog-window.svelte';
+export { default as Modal } from './modals/modal.svelte';
 export { default as Accordian } from './navigation/accordian/accordian.svelte';
 export { default as AppBar } from './navigation/app-bar/app-bar.svelte';
 export { default as Breadcrumbs } from './navigation/breadcrumbs/breadcrumbs.svelte';
@@ -64,7 +65,10 @@ export { default as Subtitle } from './typography/subtitle.svelte';
 export { default as Text } from './typography/text.svelte';
 export { default as CodeBlock } from './typography/code-block.svelte';
 export { default as Paragraph } from './typography/paragraph.svelte';
+export { default as Timeline } from './timeline/timeline.svelte';
+export { default as TimelineItem } from './timeline/timeline-item.svelte';
 export * from './types/data.js';
+export * from './types/date.js';
 export * from './types/form.js';
 export * from './helpers/date.js';
 export * from './helpers/navigate-to.js';

package/dist/index.js

@@ -25,7 +25,7 @@ export { default as Overlay } from './generic/overlay.svelte';
 export { default as Image } from './images/image.svelte';
 export { default as Icon } from './images/icon.svelte';
 export { default as Menu } from './generic/menu/menu.svelte';
-export { default as Date } from './generic/date/date.svelte';
+export { default as DateTime } from './generic/date/date-time.svelte';
 export { default as Panel } from './generic/panel/panel.svelte';
 export { default as Section } from './generic/section/section.svelte';
 export { default as Header } from './generic/header/header.svelte';
@@ -42,6 +42,7 @@ export { default as DialogBody } from './modals/dialog-body.svelte';
 export { default as DialogFooter } from './modals/dialog-footer.svelte';
 export { default as DialogHeader } from './modals/dialog-header.svelte';
 export { default as DialogWindow } from './modals/dialog-window.svelte';
+export { default as Modal } from './modals/modal.svelte';
 // Navigation
 export { default as Accordian } from './navigation/accordian/accordian.svelte';
 export { default as AppBar } from './navigation/app-bar/app-bar.svelte';
@@ -71,8 +72,12 @@ export { default as Subtitle } from './typography/subtitle.svelte';
 export { default as Text } from './typography/text.svelte';
 export { default as CodeBlock } from './typography/code-block.svelte';
 export { default as Paragraph } from './typography/paragraph.svelte';
+// Timeline
+export { default as Timeline } from './timeline/timeline.svelte';
+export { default as TimelineItem } from './timeline/timeline-item.svelte';
 // Types
 export * from './types/data.js';
+export * from './types/date.js';
 export * from './types/form.js';
 // Helpers
 export * from './helpers/date.js';

package/dist/modals/alert.svelte

@@ -5,6 +5,7 @@ import Dialog from "./dialog-window.svelte";
 import Divider from "../generic/divider/divider.svelte";
 import Overlay from "../generic/overlay.svelte";
 import Button from "../forms/button/button.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
 export let open = false;
 export let title = void 0;
 export let size = "md";
@@ -14,14 +15,15 @@ const close = () => open = false;
 </script>
 
 {#if open}
-	<Overlay>
+	<Overlay on:click={close}>
 		<Dialog {size}>
 			{#if title}
-				<DialogHeader on:close={close} {showCloseButton}>
+				<DialogHeader>
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={close} />
 			<DialogBody>
 				<slot />
 			</DialogBody>

package/dist/modals/confirm.svelte

@@ -6,6 +6,7 @@ import Overlay from "../generic/overlay.svelte";
 import { createEventDispatcher } from "svelte";
 import Button from "../forms/button/button.svelte";
 import Divider from "../generic/divider/divider.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
 export let open = false;
 export let title = void 0;
 export let size = "md";
@@ -24,14 +25,15 @@ const yes = () => {
 </script>
 
 {#if open}
-	<Overlay>
+	<Overlay on:click={no}>
 		<Dialog {size}>
 			{#if title}
-				<DialogHeader on:close={no} {showCloseButton}>
+				<DialogHeader>
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={no} />
 			<DialogBody>
 				<slot />
 			</DialogBody>

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

@@ -0,0 +1,32 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let show = true;
+const onClick = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  dispatch("click");
+};
+</script>
+
+{#if show}
+	<button type="button" on:click={onClick}>X</button>
+{/if}
+
+<style>button {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font-size: 1rem;
+  cursor: pointer;
+  position: absolute;
+  top: 0.7rem;
+  right: 0.7rem;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+button:hover {
+  background-color: #eee;
+}</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DialogCloseButtonProps = typeof __propDef.props;
+export type DialogCloseButtonEvents = typeof __propDef.events;
+export type DialogCloseButtonSlots = typeof __propDef.slots;
+export default class DialogCloseButton extends SvelteComponent<DialogCloseButtonProps, DialogCloseButtonEvents, DialogCloseButtonSlots> {
+}
+export {};

package/dist/modals/dialog-header.svelte

@@ -1,15 +1,5 @@
-<script>import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let showCloseButton = true;
-</script>
-
 <header>
 	<h1><slot /></h1>
-	{#if showCloseButton}
-		<div>
-			<button on:click={() => dispatch('close')}>X</button>
-		</div>
-	{/if}
 </header>
 
 <style>header {
@@ -19,20 +9,11 @@ export let showCloseButton = true;
   height: 1.75rem;
   overflow: hidden;
   color: #000;
+  font-family: var(--base-headline-font-family, sans-serif);
 }
 header h1 {
   margin: 0;
   flex-grow: 1;
   font-size: 1.25rem;
   line-height: 1.75rem;
-}
-header div {
-  text-align: right;
-}
-header div button {
-  appearance: none;
-  border: none;
-  background-color: transparent;
-  font-size: 1.5rem;
-  cursor: pointer;
 }</style>

package/dist/modals/dialog-header.svelte.d.ts

@@ -1,20 +1,27 @@
+/** @typedef {typeof __propDef.props}  DialogHeaderProps */
+/** @typedef {typeof __propDef.events}  DialogHeaderEvents */
+/** @typedef {typeof __propDef.slots}  DialogHeaderSlots */
+export default class DialogHeader extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DialogHeaderProps = typeof __propDef.props;
+export type DialogHeaderEvents = typeof __propDef.events;
+export type DialogHeaderSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        showCloseButton?: boolean | undefined;
+        [x: string]: never;
     };
     events: {
-        close: CustomEvent<void>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
-export type DialogHeaderProps = typeof __propDef.props;
-export type DialogHeaderEvents = typeof __propDef.events;
-export type DialogHeaderSlots = typeof __propDef.slots;
-export default class DialogHeader extends SvelteComponent<DialogHeaderProps, DialogHeaderEvents, DialogHeaderSlots> {
-}
 export {};

package/dist/modals/dialog-window.svelte

@@ -15,6 +15,7 @@
   width: 20rem;
   max-width: 70%;
   z-index: 9999;
+  font-family: var(--base-font-family, sans-serif);
 }
 div.sm {
   width: 15rem;

package/dist/modals/modal.svelte

@@ -0,0 +1,20 @@
+<script>import DialogBody from "./dialog-body.svelte";
+import Dialog from "./dialog-window.svelte";
+import Overlay from "../generic/overlay.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
+export let open = false;
+export let size = "md";
+export let showCloseButton = true;
+const close = () => open = false;
+</script>
+
+{#if open}
+	<Overlay on:click={close}>
+		<Dialog {size}>
+			<DialogCloseButton show={showCloseButton} on:click={close} />
+			<DialogBody>
+				<slot />
+			</DialogBody>
+		</Dialog>
+	</Overlay>
+{/if}

package/dist/modals/modal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../types/form.js';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        showCloseButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/dist/modals/prompt.svelte

@@ -7,6 +7,7 @@ import { createEventDispatcher } from "svelte";
 import Button from "../forms/button/button.svelte";
 import Divider from "../generic/divider/divider.svelte";
 import TextBox from "../forms/text-box/text-box.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
 export let open = false;
 export let title = void 0;
 export let size = "md";
@@ -19,6 +20,7 @@ export let required = false;
 let value = "";
 const dispatch = createEventDispatcher();
 const no = () => {
+  console.log("no");
   open = false;
   dispatch("cancel");
 };
@@ -31,14 +33,15 @@ const yes = () => {
 </script>
 
 {#if open}
-	<Overlay>
+	<Overlay on:click={no}>
 		<Dialog {size}>
 			{#if title}
-				<DialogHeader on:close={no} {showCloseButton}>
+				<DialogHeader>
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={no} />
 			<DialogBody>
 				<TextBox bind:value {placeholder} {type} {required} size="full">
 					<slot />

package/dist/navigation/accordian/accordian.svelte

@@ -4,7 +4,7 @@ export let expanded = false;
 </script>
 
 <div class:expanded class="accordian">
-	<button on:click={() => (expanded = !expanded)}>
+	<button type="button" on:click={() => (expanded = !expanded)}>
 		<span class="title">
 			{title}
 		</span>

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

@@ -11,7 +11,7 @@ const click = () => {
 };
 </script>
 
-<button class={$open ? 'open' : 'closed'} on:click={click}>
+<button type="button" class={$open ? 'open' : 'closed'} on:click={click}>
 	{#if $$slots.default}
 		<div class="icon">
 			<slot />
@@ -28,6 +28,7 @@ const click = () => {
   gap: 0.2rem;
   align-items: center;
   height: 100%;
+  font-family: var(--nav-font-family, sans-serif);
   color: var(--nav-link-fg, black);
   text-decoration: none;
   appearance: none;

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

@@ -11,7 +11,7 @@ const collapse = context.position !== "bottom" ? "collapse" : "";
 </script>
 
 <div class="icon {$open ? 'open' : 'closed'} {collapse}">
-	<button on:click={toggle}>
+	<button type="button" on:click={toggle}>
 		<HamburgerIcon />
 	</button>
 </div>
@@ -32,6 +32,7 @@ nav {
   width: 100%;
   align-items: center;
   justify-content: center;
+  font-family: var(--nav-font-family, sans-serif);
 }
 nav.left, nav.start {
   justify-content: flex-start;

package/dist/navigation/breadcrumbs/breadcrumbs.svelte

@@ -41,7 +41,7 @@ const getCrumLabel = (crumb) => {
   padding: 0;
   margin: 0;
   line-height: 1.5rem;
-  font-family: sans-serif;
+  font-family: var(--breadcrumbs-font-family, sans-serif);
 }
 nav li {
   display: flex;

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

@@ -26,6 +26,7 @@ export let open = false;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
+  font-family: var(--nav-font-family, sans-serif);
 }
 div.open {
   display: block;

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

@@ -15,4 +15,5 @@ setContext(tabContext, ctx);
   position: relative;
   display: block;
   width: 100%;
+  font-family: var(--base-font-family, sans-serif);
 }</style>

package/dist/navigation/tabs/tab.svelte

@@ -17,7 +17,7 @@ ctx.active.subscribe((value) => {
 
 <section class:active>
 	<header>
-		<button on:click={selectThisTab} type="button">
+		<button type="button" on:click={selectThisTab}>
 			{title}
 		</button>
 	</header>

package/dist/tables/data-grid.svelte

@@ -89,10 +89,10 @@ $:
 					{#if hasActionRow}
 						<TableCell type="actions">
 							{#if editRow}
-								<button on:click={() => clickEdit(row)}>Edit</button>
+								<button type="button" on:click={() => clickEdit(row)}>Edit</button>
 							{/if}
 							{#if deleteRow}
-								<button on:click={() => clickDelete(row)}>Delete</button>
+								<button type="button" on:click={() => clickDelete(row)}>Delete</button>
 							{/if}
 						</TableCell>
 					{/if}

package/dist/tables/table.svelte

@@ -6,5 +6,6 @@
 	table {
 		width: 100%;
 		border-collapse: collapse;
+		font-family: var(--base-font-family, sans-serif);
 	}
 </style>

package/dist/timeline/timeline-item.svelte

@@ -0,0 +1,85 @@
+<script>import DateTime from "../generic/date/date-time.svelte";
+export let dateType = "datetime";
+export let dateStyle = "medium";
+export let iconSize = "md";
+export let date;
+export let title;
+export let summary;
+</script>
+
+<li class="icon-{iconSize}">
+	<div class="timeline-icon">
+		<slot name="icon" />
+	</div>
+	<div class="content">
+		<div class="date">
+			<DateTime value={date} type={dateType} style={dateStyle} />
+		</div>
+		<div class="title">
+			{title}
+		</div>
+		<div class="summary">
+			{summary}
+		</div>
+	</div>
+</li>
+
+<style>li {
+  margin-bottom: 2rem;
+  position: relative;
+}
+li .content {
+  padding-left: 1rem;
+  padding-top: 0.25rem;
+}
+li .content .date {
+  font-size: 0.8rem;
+  font-weight: 300;
+  margin-bottom: 0.3rem;
+  opacity: 0.7;
+  text-transform: uppercase;
+  line-height: 1.4em;
+}
+li .content .title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  line-height: 1.4em;
+  font-family: var(--base-headline-font-family, sans-serif);
+}
+li .content .summary {
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.4em;
+  opacity: 0.7;
+}
+li .timeline-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  border-color: #000;
+  border-style: solid;
+  border-width: 0.2rem;
+  background-color: #fff;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: -0.75rem;
+}
+li.icon-sm .content {
+  padding-top: 0;
+}
+li.icon-sm .timeline-icon {
+  width: 1rem;
+  height: 1rem;
+  left: -0.5rem;
+}
+li.icon-lg .content {
+  padding-top: 0.5rem;
+  padding-left: 1.5rem;
+}
+li.icon-lg .timeline-icon {
+  width: 2rem;
+  height: 2rem;
+  left: -1rem;
+}</style>

package/dist/timeline/timeline-item.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { DateTimeStyle, DateType } from '../index.js';
+declare const __propDef: {
+    props: {
+        dateType?: DateType | undefined;
+        dateStyle?: DateTimeStyle | undefined;
+        iconSize?: "sm" | "md" | "lg" | undefined;
+        date: string | number | Date;
+        title: string;
+        summary: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+    };
+};
+export type TimelineItemProps = typeof __propDef.props;
+export type TimelineItemEvents = typeof __propDef.events;
+export type TimelineItemSlots = typeof __propDef.slots;
+export default class TimelineItem extends SvelteComponent<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
+}
+export {};

package/dist/timeline/timeline.svelte

@@ -0,0 +1,13 @@
+<ul>
+	<slot />
+</ul>
+
+<style>ul {
+  list-style: none;
+  padding-left: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin: 0;
+  border-left: 0.2rem solid #000;
+  font-family: var(--base-font-family, sans-serif);
+}</style>

package/dist/timeline/timeline.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TimelineProps */
+/** @typedef {typeof __propDef.events}  TimelineEvents */
+/** @typedef {typeof __propDef.slots}  TimelineSlots */
+export default class Timeline extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TimelineProps = typeof __propDef.props;
+export type TimelineEvents = typeof __propDef.events;
+export type TimelineSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/types/date.d.ts

@@ -0,0 +1,3 @@
+export type DateTimeStyle = 'full' | 'long' | 'short' | 'medium';
+export type TZStyle = 'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric';
+export type DateType = 'date' | 'time' | 'datetime' | 'ago' | 'ymd' | 'ymdhm' | 'ymdhms' | 'ymdhmt' | 'ymdhmst';

package/dist/types/date.js

@@ -0,0 +1 @@
+export {};

package/dist/typography/code-block.svelte

@@ -10,7 +10,7 @@
   color: #fff;
   padding: 1rem;
   border-radius: 0.25rem;
-  font-family: "Fira Code", monospace;
+  font-family: var(--base-mono-font-family, monospace);
   font-size: 0.875rem;
   line-height: 1.5;
   overflow-x: auto;

package/dist/typography/heading.svelte

@@ -26,6 +26,7 @@ h4,
 h5,
 h6 {
   margin: 0;
+  font-family: var(--base-headline-font-family, sans-serif);
 }
 
 h1 {

package/dist/typography/paragraph.svelte

@@ -8,5 +8,6 @@
 		margin-bottom: 1rem;
 		font-weight: 300;
 		font-size: 1rem;
+		font-family: var(--base-font-family, sans-serif);
 	}
 </style>

package/dist/typography/subtitle.svelte

@@ -12,6 +12,7 @@ export let level = 1;
   font-weight: 500;
   line-height: 2rem;
   letter-spacing: 0.1rem;
+  font-family: var(--base-headline-font-family, sans-serif);
 }
 div.level1 {
   font-size: 1.5rem;

package/dist/typography/text.svelte

@@ -5,7 +5,10 @@
 	<slot />
 </div>
 
-<style>div.uppercase {
+<style>div {
+  font-family: var(--base-font-family, sans-serif);
+}
+div.uppercase {
   text-transform: uppercase;
 }
 div.lowercase {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",

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

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: string | number | undefined;
-        lang?: string | undefined;
-        type?: "date" | "time" | "datetime" | "ago" | "ymd" | "ymdhm" | "ymdhms" | "ymdhmt" | "ymdhmst" | undefined;
-        style?: ("full" | "long" | "short" | "medium") | undefined;
-        dateTimeSeparator?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DateProps = typeof __propDef.props;
-export type DateEvents = typeof __propDef.events;
-export type DateSlots = typeof __propDef.slots;
-export default class Date extends SvelteComponent<DateProps, DateEvents, DateSlots> {
-}
-export {};