sveltacular 0.0.16 → 0.0.18

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

@@ -0,0 +1,19 @@
+<script>import { createEventDispatcher } from "svelte";
+import ListBox from "../list-box/list-box.svelte";
+const dispatch = createEventDispatcher();
+export let value = false;
+export let options = ["Yes", "No"];
+export let size = "md";
+let stringValue = value ? "true" : "false";
+const onChange = () => {
+  value = stringValue == "true";
+  dispatch("change", value);
+};
+$:
+  items = [
+    { value: "true", name: options[0] },
+    { value: "false", name: options[1] }
+  ];
+</script>
+
+<ListBox {items} bind:value={stringValue} {size} on:change={onChange}><slot /></ListBox>

package/dist/forms/bool-box/bool-box.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        value?: boolean | undefined;
+        options?: [yes: string, no: string] | undefined;
+        size?: FormFieldSizeOptions | undefined;
+    };
+    events: {
+        change: CustomEvent<boolean>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BoolBoxProps = typeof __propDef.props;
+export type BoolBoxEvents = typeof __propDef.events;
+export type BoolBoxSlots = typeof __propDef.slots;
+export default class BoolBox extends SvelteComponent<BoolBoxProps, BoolBoxEvents, BoolBoxSlots> {
+}
+export {};

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/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

@@ -3,6 +3,7 @@ export { default as CheckBox } from './forms/check-box/check-box.svelte';
 export { default as CheckBoxGroup } from './forms/check-box/check-box-group.svelte';
 export { default as DateBox } from './forms/date-box/date-box.svelte';
 export { default as ListBox } from './forms/list-box/list-box.svelte';
+export { default as BoolBox } from './forms/bool-box/bool-box.svelte';
 export { default as FileBox } from './forms/file-box/file-box.svelte';
 export { default as FileArea } from './forms/file-area/file-area.svelte';
 export { default as NumberBox } from './forms/number-box/number-box.svelte';
@@ -23,7 +24,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';
@@ -65,7 +66,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

@@ -4,6 +4,7 @@ export { default as CheckBox } from './forms/check-box/check-box.svelte';
 export { default as CheckBoxGroup } from './forms/check-box/check-box-group.svelte';
 export { default as DateBox } from './forms/date-box/date-box.svelte';
 export { default as ListBox } from './forms/list-box/list-box.svelte';
+export { default as BoolBox } from './forms/bool-box/bool-box.svelte';
 export { default as FileBox } from './forms/file-box/file-box.svelte';
 export { default as FileArea } from './forms/file-area/file-area.svelte';
 export { default as NumberBox } from './forms/number-box/number-box.svelte';
@@ -25,7 +26,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';
@@ -72,8 +73,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/dialog-close-button.svelte

@@ -9,7 +9,7 @@ const onClick = (e) => {
 </script>
 
 {#if show}
-	<button on:click={onClick}>X</button>
+	<button type="button" on:click={onClick}>X</button>
 {/if}
 
 <style>button {

package/dist/modals/dialog-header.svelte

@@ -9,6 +9,7 @@
   height: 1.75rem;
   overflow: hidden;
   color: #000;
+  font-family: var(--base-headline-font-family, sans-serif);
 }
 header h1 {
   margin: 0;

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/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.16",
+	"version": "0.0.18",
 	"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 {};