sveltacular 0.0.31 → 0.0.33

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

@@ -0,0 +1,18 @@
+<ul>
+	<slot />
+</ul>
+
+<style>
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: row;
+		align-items: stretch;
+		justify-content: space-around;
+		align-content: stretch;
+		row-gap: 1rem;
+	}
+</style>

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

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

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/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/index.d.ts

@@ -20,6 +20,7 @@ export { default as FormSection } from './forms/form-section.svelte';
 export { default as InfoBox } from './forms/info-box/info-box.svelte';
 export { default as UrlBox } from './forms/url-box/url-box.svelte';
 export { default as Card } from './generic/card/card.svelte';
+export { default as CardContainer } from './generic/card/card-container.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';
 export { default as Link } from './generic/link/link.svelte';
 export { default as Pill } from './generic/pill/pill.svelte';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as InfoBox } from './forms/info-box/info-box.svelte';
 export { default as UrlBox } from './forms/url-box/url-box.svelte';
 // Generic
 export { default as Card } from './generic/card/card.svelte';
+export { default as CardContainer } from './generic/card/card-container.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';
 export { default as Link } from './generic/link/link.svelte';
 export { default as Pill } from './generic/pill/pill.svelte';

package/package.json

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