sveltacular 0.0.38 → 0.0.40

package/dist/forms/form-label.svelte

@@ -1,8 +1,9 @@
 <script>export let id = void 0;
 export let required = false;
+export let disabled = false;
 </script>
 
-<label for={id} class:required><slot /></label>
+<label for={id} class:required class:disabled><slot /></label>
 
 <style>label {
   display: block;
@@ -11,4 +12,8 @@ export let required = false;
 label.required::after {
   content: "*";
   margin-left: 0.25rem;
+}
+label.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }</style>

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         required?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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/forms/list-box/list-box.svelte

@@ -35,11 +35,15 @@ const focusOnInput = () => {
 };
 const toggle = () => open = !open;
 const clickArrow = () => {
+  if (disabled)
+    return;
   toggle();
   if (open)
     focusOnInput();
 };
 const onInputKeyPress = (e) => {
+  if (disabled)
+    return;
   if (e.key == "Escape") {
     open = false;
     return;
@@ -80,6 +84,8 @@ const applyFilter = () => {
   filteredItems = searchText && isSeachable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
 };
 const clear = () => {
+  if (disabled)
+    return;
   text = "";
   value = "";
   triggerSearch();
@@ -97,9 +103,9 @@ triggerSearch();
 
 <FormField {size}>
 	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
+		<FormLabel {id} {required} {disabled}><slot /></FormLabel>
 	{/if}
-	<div class:open>
+	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
 		<input
 			type="text"
 			{id}
@@ -112,11 +118,13 @@ triggerSearch();
 			data-value={value}
 			data-text={text}
 		/>
-		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
+		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow} {disabled}>
 			<AngleUpIcon />
 		</button>
 		{#if text && isSeachable}
-			<button type="button" class="clear" on:click={clear} on:keydown={clear}> X </button>
+			<button type="button" class="clear" on:click={clear} on:keydown={clear} {disabled}>
+				X
+			</button>
 		{/if}
 		<div class="dropdown">
 			<Menu
@@ -136,6 +144,11 @@ triggerSearch();
 <style>div {
   position: relative;
 }
+div.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 div input {
   width: 100%;
   padding: 0.5rem 1rem;

package/dist/generic/card/card.svelte

@@ -13,7 +13,9 @@ const onClick = () => {
   navigateTo(href);
 };
 const container = getContext("CardContainer");
-container.register(id);
+if (container) {
+  container.register(id);
+}
 </script>
 
 <li {role} {id} on:click={onClick} class="{size} {role}">

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/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/layout/grid.svelte

@@ -0,0 +1,17 @@
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: grid;
+		width: 100%;
+		grid-template-columns: repeat(12, 1fr);
+		grid-template-rows: auto;
+		grid-gap: 1rem;
+		justify-content: center;
+		align-items: center;
+		justify-items: center;
+		align-content: center;
+	}
+</style>

package/dist/layout/grid.svelte.d.ts

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

package/dist/navigation/wizard/wizard.svelte

@@ -54,7 +54,7 @@ $:
 $:
   isLastStep = currentStep >= Object.values(steps).length;
 $:
-  subtitle = steps[currentStep - 1];
+  subtitle = steps[currentStep];
 $:
   total = Object.values(steps).length;
 </script>

package/package.json

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