sveltacular 0.0.37 → 0.0.39

package/dist/forms/form.svelte

@@ -3,6 +3,7 @@ import Section from "../generic/section/section.svelte";
 export let method = "get";
 export let title = void 0;
 export let action = void 0;
+export let size = "full";
 const dispatch = createEventDispatcher();
 const onSubmit = (e) => {
   e.preventDefault();
@@ -10,7 +11,7 @@ const onSubmit = (e) => {
 };
 </script>
 
-<Section {title}>
+<Section {title} {size}>
 	<form {method} {action} on:submit={onSubmit}>
 		<slot />
 	</form>

package/dist/forms/form.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../index.js';
 declare const __propDef: {
     props: {
         method?: "get" | "post" | "put" | "delete" | undefined;
         title?: string | undefined;
         action?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
     };
     events: {
         submit: CustomEvent<void>;

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

@@ -0,0 +1,3 @@
+export type CardContainerContext = {
+    register: (id: string) => void;
+};

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

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

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

@@ -1,18 +1,61 @@
-<ul>
+<script>import { setContext } from "svelte";
+export let align = "left";
+export let spacing = "space-around";
+let cards = [];
+const register = (id) => {
+  cards = [...cards, id];
+};
+setContext("CardContainer", {
+  register
+});
+$:
+  count = cards.length;
+</script>
+
+<ul data-count={count} class="{spacing} {align}">
 	<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>
+<style>ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  align-content: stretch;
+  row-gap: 1rem;
+  column-gap: 1rem;
+}
+ul.left, ul.start {
+  justify-content: flex-start;
+}
+ul.center {
+  justify-content: center;
+}
+ul.right {
+  justify-content: flex-end;
+}
+ul.none {
+  gap: 0;
+}
+ul.tight {
+  gap: 0.5rem;
+}
+ul.compact {
+  gap: 1rem;
+}
+ul.loose {
+  gap: 2rem;
+}
+ul.space-evenly {
+  justify-content: space-evenly;
+}
+ul.space-between {
+  justify-content: space-between;
+}
+ul.space-around {
+  justify-content: space-around;
+}</style>

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

@@ -1,21 +1,8 @@
-/** @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;
+        align?: "center" | "end" | "start" | "left" | "right" | undefined;
+        spacing?: "none" | "tight" | "compact" | "loose" | "space-evenly" | "space-around" | "space-between" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type CardContainerProps = typeof __propDef.props;
+export type CardContainerEvents = typeof __propDef.events;
+export type CardContainerSlots = typeof __propDef.slots;
+export default class CardContainer extends SvelteComponent<CardContainerProps, CardContainerEvents, CardContainerSlots> {
+}
 export {};

package/dist/generic/card/card.svelte

@@ -1,17 +1,24 @@
 <script>import { navigateTo } from "../../helpers/navigate-to.js";
+import { uniqueId } from "../../index.js";
+import { getContext } from "svelte";
 export let title = void 0;
 export let href = void 0;
 export let size = "md";
 $:
   role = href ? "link" : "listitem";
+const id = uniqueId();
 const onClick = () => {
   if (!href)
     return;
   navigateTo(href);
 };
+const container = getContext("CardContainer");
+if (container) {
+  container.register(id);
+}
 </script>
 
-<li {role} on:click={onClick} class="{size} {role}">
+<li {role} {id} on:click={onClick} class="{size} {role}">
 	{#if title}
 		<strong>{title}</strong>
 	{/if}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { FormFieldSizeOptions } from '../../index.js';
+import { type FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
         title?: string | undefined;

package/dist/generic/scorecard/scorecard.svelte

@@ -1,4 +1,5 @@
-<script>import { navigateTo } from "../../index.js";
+<script>import { navigateTo, uniqueId } from "../../index.js";
+import { getContext } from "svelte";
 export let value;
 export let caption = "below";
 export let href = void 0;
@@ -7,13 +8,18 @@ const onClick = () => {
     return;
   navigateTo(href);
 };
+const id = uniqueId();
+const container = getContext("CardContainer");
+if (container) {
+  container.register(id);
+}
 $:
   formattedValue = typeof value === "number" ? value.toLocaleString() : value;
 $:
   isLink = !!href;
 </script>
 
-<button on:click={onClick} class:isLink>
+<button on:click={onClick} class:isLink {id}>
 	<figure class={caption}>
 		<span class="value">{formattedValue}</span>
 		<figcaption><slot /></figcaption>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value: string | number;
-        caption?: "above" | "below" | "left" | "right" | undefined;
+        caption?: "left" | "right" | "above" | "below" | undefined;
         href?: string | undefined;
     };
     events: {

package/dist/generic/section/section.svelte

@@ -2,10 +2,11 @@
 import Header from "../header/header.svelte";
 export let title = void 0;
 export let level = 2;
+export let size = "full";
 setContext("section", { level, title });
 </script>
 
-<section class="level-{level}">
+<section class="level-{level} {size}">
 	{#if title}
 		<Header />
 	{/if}
@@ -17,4 +18,19 @@ setContext("section", { level, title });
   margin-top: 1rem;
   margin-bottom: 1rem;
   font-family: var(--base-font-family, sans-serif);
+}
+section.sm {
+  max-width: 25rem;
+}
+section.md {
+  max-width: 35rem;
+}
+section.lg {
+  max-width: 50rem;
+}
+section.xl {
+  max-width: 65rem;
+}
+section.full {
+  width: 100%;
 }</style>

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

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
 import type { SectionLevel } from '../../types/generic.js';
+import type { FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
         title?: string | undefined;
         level?: SectionLevel | undefined;
+        size?: FormFieldSizeOptions | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as FileArea } from './forms/file-area/file-area.svelte';
 export { default as NumberBox } from './forms/number-box/number-box.svelte';
 export { default as MoneyBox } from './forms/money-box/money-box.svelte';
 export { default as RadioGroup } from './forms/radio-group/radio-group.svelte';
+export { default as RadioBox } from './forms/radio-group/radio-box.svelte';
 export { default as TextArea } from './forms/text-area/text-area.svelte';
 export { default as TextBox } from './forms/text-box/text-box.svelte';
 export { default as FormField } from './forms/form-field.svelte';

package/dist/index.js

@@ -10,6 +10,7 @@ export { default as FileArea } from './forms/file-area/file-area.svelte';
 export { default as NumberBox } from './forms/number-box/number-box.svelte';
 export { default as MoneyBox } from './forms/money-box/money-box.svelte';
 export { default as RadioGroup } from './forms/radio-group/radio-group.svelte';
+export { default as RadioBox } from './forms/radio-group/radio-box.svelte';
 export { default as TextArea } from './forms/text-area/text-area.svelte';
 export { default as TextBox } from './forms/text-box/text-box.svelte';
 export { default as FormField } from './forms/form-field.svelte';

package/dist/layout/flex-row.svelte

@@ -21,7 +21,7 @@ export let wrap = false;
   flex-wrap: nowrap;
   column-gap: 1rem;
 }
-div *.auto {
+div.auto {
   width: auto;
 }
 div.wrap {

package/dist/modals/dialog-window.svelte

@@ -17,26 +17,28 @@ const captureClick = (e) => {
   background-color: #fff;
   border-radius: 1rem;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  width: 20rem;
-  max-width: 70%;
   z-index: 9999;
   font-family: var(--base-font-family, sans-serif);
 }
 div.sm {
-  width: 15rem;
-  max-width: 50%;
-}
-div.lg {
   width: 25rem;
   max-width: 80%;
 }
-div.xl {
-  width: 90%;
+div.md {
+  width: 35rem;
+  max-width: 85%;
+}
+div.lg {
+  width: 50rem;
   max-width: 90%;
 }
+div.xl {
+  width: 65rem;
+  max-width: 95%;
+}
 div.full {
-  width: 100%;
-  max-width: 100%;
+  width: 98%;
+  max-width: 98%;
 }
 
 @media (max-width: 640px) {

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         align?: "center" | "end" | "start" | "left" | "right" | undefined;
-        spacing?: "none" | "medium" | "tight" | "loose" | "space-evenly" | "space-around" | "space-between" | undefined;
+        spacing?: "none" | "tight" | "loose" | "space-evenly" | "space-around" | "space-between" | "medium" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/navigation/tabs/tab.svelte

@@ -75,7 +75,6 @@ $:
   left: 0;
   border-top: solid 0.2rem var(--tab-content-border, rgb(220, 220, 230));
   padding-top: 1rem;
-  z-index: 1;
   font-size: 1rem;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.37",
+	"version": "0.0.39",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",