sveltacular 0.0.74 → 0.0.76

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

@@ -4,24 +4,24 @@ import FormLabel from "../form-label.svelte";
 export let size = "md";
 export let value;
 export let href = void 0;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel><slot /></FormLabel>
-	{/if}
-	<div class="input">
-		{#if href}
-			<span class="icon">
-				<LinkIcon />
-			</span>
-			<a {href} class="text">{value}</a>
-		{:else}
-			<span class="text">{value}</span>
-		{/if}
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel><slot /></FormLabel>
+	{/if}
+	<div class="input">
+		{#if href}
+			<span class="icon">
+				<LinkIcon />
+			</span>
+			<a {href} class="text">{value}</a>
+		{:else}
+			<span class="text">{value}</span>
+		{/if}
+	</div>
+</FormField>
+
 <style>.input {
   background-color: var(--form-input-disabled-bg, #ccc);
   color: var(--form-input-fg, #000);
@@ -52,4 +52,4 @@ export let href = void 0;
 }
 .input a:hover {
   text-decoration: underline;
-}</style>
+}</style>

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

@@ -102,49 +102,49 @@ const updateText = async () => {
 triggerSearch();
 $:
   open = isMenuOpen && !disabled;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required} {disabled}><slot /></FormLabel>
-	{/if}
-	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
-		<input
-			type="text"
-			{id}
-			bind:value={text}
-			{required}
-			{disabled}
-			{placeholder}
-			readonly={!isSeachable}
-			on:focus={() => (isMenuOpen = true)}
-			on:keyup={onInputKeyPress}
-			data-value={value}
-			data-text={text}
-		/>
-		<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} {disabled}>
-				X
-			</button>
-		{/if}
-		<div class="dropdown">
-			<Menu
-				items={filteredItems}
-				{open}
-				closeAfterSelect={false}
-				searchText={text}
-				on:select={onSelect}
-				size="full"
-				bind:highlightIndex
-				bind:value
-			/>
-		</div>
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required} {disabled}><slot /></FormLabel>
+	{/if}
+	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
+		<input
+			type="text"
+			{id}
+			bind:value={text}
+			{required}
+			{disabled}
+			{placeholder}
+			readonly={!isSeachable}
+			on:focus={() => (isMenuOpen = true)}
+			on:keyup={onInputKeyPress}
+			data-value={value}
+			data-text={text}
+		/>
+		<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} {disabled}>
+				X
+			</button>
+		{/if}
+		<div class="dropdown">
+			<Menu
+				items={filteredItems}
+				{open}
+				closeAfterSelect={false}
+				searchText={text}
+				on:select={onSelect}
+				size="full"
+				bind:highlightIndex
+				bind:value
+			/>
+		</div>
+	</div>
+</FormField>
+
 <style>div {
   position: relative;
 }
@@ -197,4 +197,4 @@ div .dropdown {
   left: 0;
   width: 100%;
   z-index: 3;
-}</style>
+}</style>

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

@@ -172,59 +172,59 @@ const onChange = () => {
     value = max;
   cents = String(centValue).padStart(2, "0");
 };
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id}><slot /></FormLabel>
-	{/if}
-	<div class="input {currency}" class:allowCents {id}>
-		{#if prefix}
-			<span class="prefix">{prefix}</span>
-		{/if}
-
-		<input
-			class="dollars"
-			{placeholder}
-			bind:value={dollars}
-			type="text"
-			on:keypress={onKeyPress}
-			on:keyup={onKeyUp}
-			on:input={onInput}
-			on:change={onChange}
-			on:mouseup={onSaveStateEvent}
-			on:focus={onSaveStateEvent}
-			on:blur={onSaveStateEvent}
-			name="dollars"
-			id="{id}-dollars"
-			inputmode="numeric"
-		/>
-		{#if allowCents}
-			<span class="separator">.</span>
-			<input
-				{placeholder}
-				bind:value={cents}
-				type="text"
-				class="cents"
-				on:keypress={onKeyPress}
-				on:keyup={onKeyUp}
-				on:input={onInput}
-				on:change={onChange}
-				on:mouseup={onSaveStateEvent}
-				on:focus={onSaveStateEvent}
-				on:blur={onSaveStateEvent}
-				name="cents"
-				id="{id}-cents"
-				inputmode="numeric"
-			/>
-		{/if}
-
-		{#if suffix}
-			<span class="suffix">{suffix}</span>
-		{/if}
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id}><slot /></FormLabel>
+	{/if}
+	<div class="input {currency}" class:allowCents {id}>
+		{#if prefix}
+			<span class="prefix">{prefix}</span>
+		{/if}
+
+		<input
+			class="dollars"
+			{placeholder}
+			bind:value={dollars}
+			type="text"
+			on:keypress={onKeyPress}
+			on:keyup={onKeyUp}
+			on:input={onInput}
+			on:change={onChange}
+			on:mouseup={onSaveStateEvent}
+			on:focus={onSaveStateEvent}
+			on:blur={onSaveStateEvent}
+			name="dollars"
+			id="{id}-dollars"
+			inputmode="numeric"
+		/>
+		{#if allowCents}
+			<span class="separator">.</span>
+			<input
+				{placeholder}
+				bind:value={cents}
+				type="text"
+				class="cents"
+				on:keypress={onKeyPress}
+				on:keyup={onKeyUp}
+				on:input={onInput}
+				on:change={onChange}
+				on:mouseup={onSaveStateEvent}
+				on:focus={onSaveStateEvent}
+				on:blur={onSaveStateEvent}
+				name="cents"
+				id="{id}-cents"
+				inputmode="numeric"
+			/>
+		{/if}
+
+		{#if suffix}
+			<span class="suffix">{suffix}</span>
+		{/if}
+	</div>
+</FormField>
+
 <style>.input {
   display: flex;
   align-items: center;
@@ -277,4 +277,4 @@ const onChange = () => {
 }
 .input .suffix {
   border-left: 1px solid var(--form-input-border, black);
-}</style>
+}</style>

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

@@ -45,36 +45,36 @@ const onKeyPress = (e) => {
   if (decimalPart && decimalPart.length > decimals)
     return e.preventDefault();
 };
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id}><slot /></FormLabel>
-	{/if}
-	<div class="input {type}">
-		{#if prefix}
-			<span class="prefix">{prefix}</span>
-		{/if}
-
-		<input
-			{id}
-			{placeholder}
-			bind:value
-			type="number"
-			{step}
-			{min}
-			{max}
-			on:change={valueChanged}
-			on:input={onInput}
-			on:keypress={onKeyPress}
-		/>
-
-		{#if suffix}
-			<span class="suffix">{suffix}</span>
-		{/if}
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id}><slot /></FormLabel>
+	{/if}
+	<div class="input {type}">
+		{#if prefix}
+			<span class="prefix">{prefix}</span>
+		{/if}
+
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			type="number"
+			{step}
+			{min}
+			{max}
+			on:change={valueChanged}
+			on:input={onInput}
+			on:keypress={onKeyPress}
+		/>
+
+		{#if suffix}
+			<span class="suffix">{suffix}</span>
+		{/if}
+	</div>
+</FormField>
+
 <style>.input {
   display: flex;
   align-items: center;
@@ -119,4 +119,4 @@ const onKeyPress = (e) => {
 }
 .input .suffix {
   border-left: 1px solid var(--form-input-border, black);
-}</style>
+}</style>

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

@@ -109,55 +109,55 @@ const keyUp = (event) => {
 setValue(value ?? "");
 $:
   areaCode || localExt || lastFour ? publishChange() : null;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel id="{id}-areaCode"><slot /></FormLabel>
-	{/if}
-	<div class="input">
-		<span class="areaCode segment">
-			<span>(</span>
-			<input
-				id="{id}-areaCode"
-				type="text"
-				on:input={valueChanged}
-				on:keyup={keyUp}
-				on:change={valueChanged}
-				bind:value={areaCode}
-				name="areaCode"
-				data-maxlength="3"
-			/>
-			<span>)</span>
-		</span>
-		<span class="localExt segment">
-			<input
-				id="{id}-localExt"
-				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keyup={keyUp}
-				bind:value={localExt}
-				name="localExt"
-				data-maxlength="3"
-			/>
-		</span>
-		<span class="lastFour segment">
-			<span>-</span>
-			<input
-				id="{id}-lastFour"
-				type="text"
-				on:input={valueChanged}
-				on:change={valueChanged}
-				on:keyup={keyUp}
-				bind:value={lastFour}
-				name="lastFour"
-				data-maxlength="4"
-			/></span
-		>
-	</div>
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel id="{id}-areaCode"><slot /></FormLabel>
+	{/if}
+	<div class="input">
+		<span class="areaCode segment">
+			<span>(</span>
+			<input
+				id="{id}-areaCode"
+				type="text"
+				on:input={valueChanged}
+				on:keyup={keyUp}
+				on:change={valueChanged}
+				bind:value={areaCode}
+				name="areaCode"
+				data-maxlength="3"
+			/>
+			<span>)</span>
+		</span>
+		<span class="localExt segment">
+			<input
+				id="{id}-localExt"
+				type="text"
+				on:input={valueChanged}
+				on:change={valueChanged}
+				on:keyup={keyUp}
+				bind:value={localExt}
+				name="localExt"
+				data-maxlength="3"
+			/>
+		</span>
+		<span class="lastFour segment">
+			<span>-</span>
+			<input
+				id="{id}-lastFour"
+				type="text"
+				on:input={valueChanged}
+				on:change={valueChanged}
+				on:keyup={keyUp}
+				bind:value={lastFour}
+				name="lastFour"
+				data-maxlength="4"
+			/></span
+		>
+	</div>
+</FormField>
+
 <style>.input {
   background-color: var(--form-input-bg, #fff);
   color: var(--form-input-fg, #000);
@@ -199,4 +199,4 @@ $:
 }
 .input input:focus {
   outline: none;
-}</style>
+}</style>

package/dist/forms/radio-group/radio-box.svelte

@@ -4,20 +4,20 @@ export let value = void 0;
 export let group = void 0;
 export let disabled = false;
 const id = uniqueId();
-</script>
-
-<label>
-	<input type="radio" bind:group {value} {disabled} {id} />
-	<span class="checkbox">
-		<span class="checkmark"><CheckIcon /></span>
-	</span>
-	{#if $$slots.default}
-		<div class="text">
-			<slot />
-		</div>
-	{/if}
-</label>
-
+</script>
+
+<label>
+	<input type="radio" bind:group {value} {disabled} {id} />
+	<span class="checkbox">
+		<span class="checkmark"><CheckIcon /></span>
+	</span>
+	{#if $$slots.default}
+		<div class="text">
+			<slot />
+		</div>
+	{/if}
+</label>
+
 <style>label {
   display: flex;
   align-items: center;
@@ -64,4 +64,4 @@ label input:checked + .checkbox {
 label input:checked + .checkbox .checkmark {
   width: 100%;
   height: 100%;
-}</style>
+}</style>

package/dist/forms/radio-group/radio-group.svelte

@@ -8,15 +8,15 @@ export let items = [];
 export let size = "full";
 export let disabled = false;
 export let required = false;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div>
-		{#each items as item}
-			<RadioBox bind:group={group} {disabled} value={item.value}>{item.name}</RadioBox>
-		{/each}
-	</div>
-</FormField>
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div>
+		{#each items as item}
+			<RadioBox bind:group={group} {disabled} value={item.value}>{item.name}</RadioBox>
+		{/each}
+	</div>
+</FormField>

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

@@ -4,21 +4,21 @@ export let checked = false;
 export let size = "full";
 const id = uniqueId();
 const dispatch = createEventDispatcher();
-</script>
-
-<label class="switch-box {checked ? 'checked' : ''} {size}">
-	<input type="checkbox" bind:checked on:change={() => dispatch('change', checked)} {id} />
-	<!-- svelte-ignore a11y-interactive-supports-focus -->
-	<span class="switch">
-		<span class="slider" />
-	</span>
-	{#if $$slots.default}
-		<div class="text">
-			<slot />
-		</div>
-	{/if}
-</label>
-
+</script>
+
+<label class="switch-box {checked ? 'checked' : ''} {size}">
+	<input type="checkbox" bind:checked on:change={() => dispatch('change', checked)} {id} />
+	<!-- svelte-ignore a11y-interactive-supports-focus -->
+	<span class="switch">
+		<span class="slider" />
+	</span>
+	{#if $$slots.default}
+		<div class="text">
+			<slot />
+		</div>
+	{/if}
+</label>
+
 <style>label {
   display: flex;
   align-items: center;
@@ -140,4 +140,4 @@ label.full.checked .slider {
 label.full .text {
   font-size: 1rem;
   margin-left: 0.65rem;
-}</style>
+}</style>

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

@@ -9,15 +9,15 @@ export let rows = 4;
 export let disabled = false;
 export let required = false;
 export let readonly = false;
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<textarea wrap="soft" {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<textarea wrap="soft" {id} {placeholder} {rows} bind:value {required} {disabled} {readonly} />
+</FormField>
+
 <style>textarea {
   width: 100%;
   height: auto;
@@ -36,4 +36,4 @@ export let readonly = false;
 }
 textarea::placeholder {
   color: var(--form-input-placeholder, #a0aec0);
-}</style>
+}</style>

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

@@ -50,39 +50,39 @@ const onInput = (e) => {
   }
   dipatch("input", cleanValue);
 };
-</script>
-
-<FormField {size}>
-	{#if $$slots.default}
-		<FormLabel {id} {required}><slot /></FormLabel>
-	{/if}
-	<div class="input {disabled ? 'disabled' : 'enabled'}">
-		{#if prefix}
-			<div class="prefix">{prefix}</div>
-		{/if}
-		<input
-			{id}
-			{placeholder}
-			bind:value
-			{...{ type }}
-			{disabled}
-			{readonly}
-			{required}
-			{maxlength}
-			{minlength}
-			{pattern}
-			on:keypress={onKeyPress}
-			on:input={onInput}
-		/>
-		{#if suffix}
-			<div class="suffix">{suffix}</div>
-		{/if}
-	</div>
-	{#if helperText}
-		<div class="helper-text">{helperText}</div>
-	{/if}
-</FormField>
-
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel {id} {required}><slot /></FormLabel>
+	{/if}
+	<div class="input {disabled ? 'disabled' : 'enabled'}">
+		{#if prefix}
+			<div class="prefix">{prefix}</div>
+		{/if}
+		<input
+			{id}
+			{placeholder}
+			bind:value
+			{...{ type }}
+			{disabled}
+			{readonly}
+			{required}
+			{maxlength}
+			{minlength}
+			{pattern}
+			on:keypress={onKeyPress}
+			on:input={onInput}
+		/>
+		{#if suffix}
+			<div class="suffix">{suffix}</div>
+		{/if}
+	</div>
+	{#if helperText}
+		<div class="helper-text">{helperText}</div>
+	{/if}
+</FormField>
+
 <style>.input {
   display: flex;
   align-items: center;
@@ -136,4 +136,4 @@ const onInput = (e) => {
   font-size: 0.75rem;
   line-height: 1.25rem;
   padding: 0.25rem;
-}</style>
+}</style>