sveltacular 0.0.30 → 0.0.32

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

@@ -15,11 +15,12 @@ export let readonly = false;
 	{#if $$slots.default}
 		<FormLabel {id} {required}><slot /></FormLabel>
 	{/if}
-	<textarea {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
+	<textarea wrap="soft" {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
 </FormField>
 
 <style>textarea {
   width: 100%;
+  height: auto;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
   border: 1px solid var(--form-input-border, black);
@@ -30,7 +31,8 @@ export let readonly = false;
   line-height: 1.25rem;
   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, box-shadow 0.2s ease-in-out;
   user-select: none;
-  white-space: nowrap;
+  resize: vertical;
+  white-space: normal;
 }
 textarea::placeholder {
   color: var(--form-input-placeholder, #a0aec0);

package/dist/generic/card/card.svelte

@@ -20,6 +20,7 @@ const onClick = () => {
 
 <style>li {
   display: inline-block;
+  vertical-align: top;
   position: relative;
   width: 100%;
   margin-right: 1rem;
@@ -39,7 +40,6 @@ li[role=link] {
 }
 li[role=link]:hover {
   transform: translateY(-0.25rem);
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
 }
 li.sm {
   max-width: 15rem;

package/dist/generic/menu/menu.svelte

@@ -71,7 +71,6 @@ $:
   z-index: 999;
   margin: 0;
   padding: 0;
-  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
   max-width: 100%;
   max-height: 15rem;
   overflow-y: auto;

package/dist/generic/scorecard/scorecard.svelte

@@ -1,29 +1,91 @@
-<script>export let value;
+<script>import { navigateTo } from "../../index.js";
+export let value;
+export let caption = "below";
+export let href = void 0;
+const onClick = () => {
+  if (!href)
+    return;
+  navigateTo(href);
+};
+$:
+  formattedValue = typeof value === "number" ? value.toLocaleString() : value;
+$:
+  isLink = !!href;
 </script>
 
-<figure>
-	<div>{value}</div>
-	<figcaption><slot /></figcaption>
-</figure>
+<button on:click={onClick} class:isLink>
+	<figure class={caption}>
+		<span class="value">{formattedValue}</span>
+		<figcaption><slot /></figcaption>
+	</figure>
+</button>
 
-<style>figure {
+<style>button {
   display: inline-block;
-  text-align: center;
+  margin-right: 1rem;
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--base-font-family, sans-serif);
+  appearance: none;
+  transition: transform 0.2s ease-in-out;
+  user-select: text;
+}
+button.isLink {
+  cursor: pointer;
+}
+button.isLink:hover {
+  transform: translateY(-0.25rem);
+}
+button figure {
+  min-width: 6rem;
+  margin: 0;
+  display: flex;
+  gap: 0.5rem;
   background: #fff;
   border-radius: 0.25rem;
   padding: 1rem;
   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);
+  text-align: center;
 }
-figure div {
+button figure .value {
   font-size: 2.5rem;
   font-weight: 500;
   color: #000;
+  flex-grow: 1;
 }
-figure figcaption {
+button figure figcaption {
   font-size: 0.875rem;
   font-weight: 300;
   color: #4a5568;
+}
+button figure.above {
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+}
+button figure.below {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+}
+button figure.left {
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: center;
+  text-align: left;
+  gap: 0.5rem;
+}
+button figure.right {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: right;
+  gap: 0.5rem;
 }</style>

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

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value: string | number;
+        caption?: "above" | "below" | "left" | "right" | undefined;
+        href?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/timeline/timeline-item.svelte

@@ -2,9 +2,9 @@
 export let dateType = "datetime";
 export let dateStyle = "medium";
 export let iconSize = "md";
-export let date;
-export let title;
-export let summary;
+export let date = void 0;
+export let title = void 0;
+export let summary = void 0;
 </script>
 
 <li class="icon-{iconSize}">
@@ -12,15 +12,21 @@ export let summary;
 		<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>
+		{#if date}
+			<div class="date">
+				<DateTime value={date} type={dateType} style={dateStyle} />
+			</div>
+		{/if}
+		{#if title}
+			<div class="title">
+				{title}
+			</div>
+		{/if}
+		{#if summary}
+			<div class="summary">
+				{summary}
+			</div>
+		{/if}
 	</div>
 </li>
 
@@ -29,7 +35,7 @@ export let summary;
   position: relative;
 }
 li .content {
-  padding-left: 1rem;
+  padding-left: 1.25rem;
   padding-top: 0.25rem;
 }
 li .content .date {
@@ -67,6 +73,7 @@ li .timeline-icon {
   left: -0.75rem;
 }
 li.icon-sm .content {
+  padding-left: 1rem;
   padding-top: 0;
 }
 li.icon-sm .timeline-icon {

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

@@ -5,9 +5,9 @@ declare const __propDef: {
         dateType?: DateType | undefined;
         dateStyle?: DateTimeStyle | undefined;
         iconSize?: "sm" | "md" | "lg" | undefined;
-        date: string | number | Date;
-        title: string;
-        summary: string;
+        date?: string | number | Date | undefined;
+        title?: string | undefined;
+        summary?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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