svseeds 0.3.0 → 0.3.2

package/_svseeds/TagsInput.svelte

@@ -1,6 +1,5 @@
 <script module lang="ts">
   export type TagsInputProps = {
-    bottom?: string, // bindable
     values?: string[], // bindable
     type?: "left" | "right" | "bottom", // <"left">
     confirm?: string[],
@@ -33,7 +32,7 @@
 </script>
 
 <script lang="ts">
-  let { bottom = $bindable(), values = $bindable([]), type = "left", confirm = [], trim = false, unique = true, min, max, validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputProps = $props();
+  let { values = $bindable([]), type = "left", confirm = [], trim = false, unique = true, min, max, validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -95,7 +94,7 @@
 
 <!---------------------------------------->
 
-<TextField bind:value bind:status bind:bottom bind:element type="text" {...deps?.svsTextField} {left} {right} />
+<TextField bind:value bind:status bind:element type="text" {...deps?.svsTextField} {left} {right} />
 {#if type === "bottom"}
   <div class={cls(AREA.BOTTOM, status)}>
     {@render tags()}

package/_svseeds/TagsInput.svelte.d.ts

@@ -1,5 +1,4 @@
 export type TagsInputProps = {
-    bottom?: string;
     values?: string[];
     type?: "left" | "right" | "bottom";
     confirm?: string[];
@@ -26,6 +25,6 @@ export type TagCountValidation = {
 import { type ClassRuleSet } from "./core";
 import { type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_TextField.svelte";
 import { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
-declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "bottom" | "status" | "element" | "values">;
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "status" | "element" | "values">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

package/_svseeds/_CheckField.svelte

@@ -4,7 +4,7 @@
     label?: string,
     extra?: string,
     aux?: Snippet<[string, string[], HTMLInputElement[] | undefined]>, // Snippet<[status,values,elements]>
-    bottom?: string, // bindable
+    bottom?: string,
     values?: string[], // bindable
     multiple?: boolean, // <true>
     descFirst?: boolean, // <false>
@@ -16,7 +16,7 @@
     elements?: HTMLInputElement[], // bindable
   };
   export type CheckFieldReqdProps = "options";
-  export type CheckFieldBindProps = "bottom" | "values" | "status" | "elements";
+  export type CheckFieldBindProps = "values" | "status" | "elements";
 
   type CheckFieldTarget = { currentTarget: EventTarget & HTMLInputElement };
   const svs = "svs-check-field";
@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-  let { options, label, extra, aux, bottom = $bindable(), values = $bindable([]), multiple = true, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, elements = $bindable([])}: CheckFieldProps = $props();
+  let { options, label, extra, aux, bottom, values = $bindable([]), multiple = true, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, elements = $bindable([])}: CheckFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -42,7 +42,7 @@
   const idErr = idDesc ?? elemId.id;
   const attrs = omit(attributes, "class", "id", "type", "name", "value", "onchange", "oninvalid");
   const roleGroup = multiple ? "group" : "radiogroup";
-  const description = bottom;
+  let message = $state(bottom);
 
   // *** Status *** //
   const phase = { change: false, submit: false };
@@ -55,7 +55,7 @@
   const toNonInvalid = () => shiftStatus(phase.change && values.length ? STATE.ACTIVE : neutral);
   function shiftStatus(stat: string, msg?: string) {
     status = stat;
-    bottom = stat === STATE.INACTIVE ? msg ?? description : description;
+    message = stat === STATE.INACTIVE ? msg ?? bottom : bottom;
     elements[0]?.setCustomValidity(msg ?? "");
   }
   function validate() {
@@ -118,7 +118,7 @@
   {/if}
 {/snippet}
 {#snippet main()}
-  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple && bottom?.trim() ? errMsg : undefined}>
+  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple && message?.trim() ? errMsg : undefined}>
     {#each opts as {value, text, checked}, i (value)}
       <label class={cls(AREA.MAIN, status)}>
         {#if action}
@@ -132,7 +132,7 @@
   </div>
 {/snippet}
 {#snippet desc(show: boolean)}
-  {#if show && bottom?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{bottom}</div>
+  {#if show && message?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/_CheckField.svelte.d.ts

@@ -15,12 +15,12 @@ export type CheckFieldProps = {
     elements?: HTMLInputElement[];
 };
 export type CheckFieldReqdProps = "options";
-export type CheckFieldBindProps = "bottom" | "values" | "status" | "elements";
+export type CheckFieldBindProps = "values" | "status" | "elements";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type ClassRuleSet } from "./core";
-declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "bottom" | "elements" | "status" | "values">;
+declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "elements" | "status" | "values">;
 type CheckField = ReturnType<typeof CheckField>;
 export default CheckField;

package/_svseeds/_SelectField.svelte

@@ -6,7 +6,7 @@
     aux?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
     left?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
     right?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
-    bottom?: string, // bindable
+    bottom?: string,
     value?: string, // bindable
     descFirst?: boolean, // <false>
     validations?: ((value: string, validity?: ValidityState) => string)[],
@@ -17,7 +17,7 @@
     element?: HTMLSelectElement, // bindable
   };
   export type SelectFieldReqdProps = "options";
-  export type SelectFieldBindProps = "bottom" | "value" | "status" | "element";
+  export type SelectFieldBindProps = "value" | "status" | "element";
 
   type SelectFieldTarget = { currentTarget: EventTarget & HTMLSelectElement };
   const svs = "svs-select-field";
@@ -31,7 +31,7 @@
 </script>
 
 <script lang="ts">
-  let { options, label, extra, aux, left, right, bottom = $bindable(), value = $bindable(""), descFirst = false, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: SelectFieldProps = $props();
+  let { options, label, extra, aux, left, right, bottom, value = $bindable(""), descFirst = false, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: SelectFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -41,7 +41,7 @@
   const idDesc = elemId.get(bottom?.trim());
   const idErr = idDesc ?? elemId.id;
   const attrs = omit(attributes, "class", "id", "value", "oninvalid");
-  const description = bottom;
+  let message = $state(bottom);
 
   // *** Status *** //
   let neutral = isNeutral(status) ? status : STATE.DEFAULT;
@@ -53,7 +53,7 @@
   const toNonInvalid = (stat: string) => shiftStatus(stat);
   function shiftStatus(stat: string, msg?: string) {
     status = stat;
-    bottom = msg ?? description;
+    message = msg ?? bottom;
     element?.setCustomValidity(msg ?? "");
   }
   function validate() {
@@ -120,7 +120,7 @@
 {/snippet}
 {#snippet main()}
   {@const c = cls(AREA.MAIN, status)}
-  {@const msg = bottom?.trim() ? errMsg : undefined}
+  {@const msg = message?.trim() ? errMsg : undefined}
   {#if action}
     <select bind:value bind:this={element} class={c} {id} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={msg} use:action>
       {@render option()}
@@ -137,7 +137,7 @@
   {/each}
 {/snippet}
 {#snippet desc(show: boolean)}
-  {#if show && bottom?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{bottom}</div>
+  {#if show && message?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/_SelectField.svelte.d.ts

@@ -16,12 +16,12 @@ export type SelectFieldProps = {
     element?: HTMLSelectElement;
 };
 export type SelectFieldReqdProps = "options";
-export type SelectFieldBindProps = "bottom" | "value" | "status" | "element";
+export type SelectFieldBindProps = "value" | "status" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLSelectAttributes } from "svelte/elements";
 import { type ClassRuleSet } from "./core";
-declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "bottom" | "value" | "status" | "element">;
+declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "value" | "status" | "element">;
 type SelectField = ReturnType<typeof SelectField>;
 export default SelectField;

package/_svseeds/_TextField.svelte

@@ -5,7 +5,7 @@
     aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
     left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
     right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
-    bottom?: string, // bindable
+    bottom?: string,
     value?: string, // bindable
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number",  // bindable <"text">
     options?: SvelteSet<string> | Set<string>,
@@ -18,7 +18,7 @@
     element?: HTMLInputElement | HTMLTextAreaElement, // bindable
   };
   export type TextFieldReqdProps = never;
-  export type TextFieldBindProps = "bottom" | "value" | "type" | "status" | "element";
+  export type TextFieldBindProps = "value" | "type" | "status" | "element";
 
   const svs = "svs-text-field";
   const preset: ClassRuleSet = {};
@@ -31,7 +31,7 @@
 </script>
 
 <script lang="ts">
-  let { label, extra, aux, left, right, bottom = $bindable(), value = $bindable(""), type = $bindable("text"), options, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: TextFieldProps = $props();
+  let { label, extra, aux, left, right, bottom, value = $bindable(""), type = $bindable("text"), options, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: TextFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -42,7 +42,7 @@
   const idList = elemId.get(options?.size);
   const idErr = idDesc ?? elemId.id;
   const attrs = omit(attributes as any, "class", "id", "type", "value", "list", "onchange", "oninvalid");
-  const description = bottom;
+  let message = $state(bottom);
 
   // *** Status *** //
   let neutral = isNeutral(status) ? status : STATE.DEFAULT;
@@ -54,7 +54,7 @@
   const toNonInvalid = (stat: string) => shiftStatus(stat);
   function shiftStatus(stat: string, msg?: string) {
     status = stat;
-    bottom = msg ?? description;
+    message = msg ?? bottom;
     element?.setCustomValidity(msg ?? "");
   }
   function validate(onchange?: boolean) {
@@ -126,7 +126,7 @@
 {/snippet}
 {#snippet main()}
   {@const c = cls(AREA.MAIN, status)}
-  {@const msg = bottom?.trim() ? errMsg : undefined}
+  {@const msg = message?.trim() ? errMsg : undefined}
   {#if type === "area"}
     {#if action}
       <textarea bind:value bind:this={element} class={c} {id} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={msg} use:action></textarea>
@@ -149,7 +149,7 @@
   {/if}
 {/snippet}
 {#snippet desc(show: boolean)}
-  {#if show && bottom?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{bottom}</div>
+  {#if show && message?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/_TextField.svelte.d.ts

@@ -17,12 +17,12 @@ export type TextFieldProps = {
     element?: HTMLInputElement | HTMLTextAreaElement;
 };
 export type TextFieldReqdProps = never;
-export type TextFieldBindProps = "bottom" | "value" | "type" | "status" | "element";
+export type TextFieldBindProps = "value" | "type" | "status" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
 import { type ClassRuleSet } from "./core";
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "bottom" | "value" | "status" | "element">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "value" | "status" | "element">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/_svseeds/_TogglesField.svelte

@@ -4,7 +4,7 @@
     label?: string,
     extra?: string,
     aux?: Snippet<[string, string[], HTMLButtonElement[] | undefined]>, // Snippet<[status,values,elements]>
-    bottom?: string, // bindable
+    bottom?: string,
     values?: string[], // bindable
     multiple?: boolean, // <true>
     descFirst?: boolean, // <false>
@@ -16,7 +16,7 @@
     elements?: HTMLButtonElement[], // bindable
   };
   export type TogglesFieldReqdProps = "options";
-  export type TogglesFieldBindProps = "bottom" | "values" | "status" | "elements";
+  export type TogglesFieldBindProps = "values" | "status" | "elements";
 
   type TogglesFieldTarget = { currentTarget: EventTarget & HTMLButtonElement };
   const svs = "svs-toggles-field";
@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-  let { options, label, extra, aux, bottom = $bindable(), values = $bindable([]), multiple = true, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, elements = $bindable([]) }: TogglesFieldProps = $props();
+  let { options, label, extra, aux, bottom, values = $bindable([]), multiple = true, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, elements = $bindable([]) }: TogglesFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -41,7 +41,7 @@
   const idErr = idDesc ?? elemId.id;
   const attrs = omit(attributes, "class", "id", "type", "role", "aria-checked", "onclick", "oninvalid");
   const roleGroup = multiple ? "group" : "radiogroup";
-  const description = bottom;
+  let message = $state(bottom);
   let elem: HTMLInputElement | undefined = $state();
 
   // *** Status *** //
@@ -55,7 +55,7 @@
   const toNonInvalid = () => shiftStatus(phase.change && values.length ? STATE.ACTIVE : neutral);
   function shiftStatus(stat: string, msg?: string) {
     status = stat;
-    bottom = stat === STATE.INACTIVE ? msg ?? description : description;
+    message = stat === STATE.INACTIVE ? msg ?? bottom : bottom;
     elem?.setCustomValidity(msg ?? "");
   }
   function validate() {
@@ -123,7 +123,7 @@
 {#snippet main()}
   {@const c = cls(AREA.MAIN, status)}
   <input bind:this={elem} style="display: none;" aria-hidden="true" {oninvalid} />
-  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple && bottom?.trim() ? errMsg : undefined}>
+  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple && message?.trim() ? errMsg : undefined}>
     {#each opts as { value, text, checked }, i (value)}
       {#if action}
         <button bind:this={elements[i]} class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} onclick={updateValues(value)} type="button" {role} {...attrs} use:action>
@@ -138,7 +138,7 @@
   </div>
 {/snippet}
 {#snippet desc(show: boolean)}
-  {#if show && bottom?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{bottom}</div>
+  {#if show && message?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/_TogglesField.svelte.d.ts

@@ -15,12 +15,12 @@ export type TogglesFieldProps = {
     elements?: HTMLButtonElement[];
 };
 export type TogglesFieldReqdProps = "options";
-export type TogglesFieldBindProps = "bottom" | "values" | "status" | "elements";
+export type TogglesFieldBindProps = "values" | "status" | "elements";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLButtonAttributes } from "svelte/elements";
 import { type ClassRuleSet } from "./core";
-declare const TogglesField: import("svelte").Component<TogglesFieldProps, {}, "bottom" | "elements" | "status" | "values">;
+declare const TogglesField: import("svelte").Component<TogglesFieldProps, {}, "elements" | "status" | "values">;
 type TogglesField = ReturnType<typeof TogglesField>;
 export default TogglesField;

package/index.d.ts

@@ -1,4 +1,4 @@
-export { type ClassRuleSet, type ThemePreset, CONST, STATE, AREA, elemId, theme, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
+export { type ClassRuleSet, type ThemePreset, CONST, STATE, AREA, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
 export { default as Accordion, type AccordionProps, type AccordionReqdProps, type AccordionBindProps, type AccordionDeps } from "./_svseeds/Accordion.svelte";
 export { default as Badge, type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_svseeds/_Badge.svelte";
 export { default as Button, type ButtonProps, type ButtonReqdProps, type ButtonBindProps } from "./_svseeds/_Button.svelte";

package/index.js

@@ -1,4 +1,4 @@
-export { CONST, STATE, AREA, elemId, theme, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
+export { CONST, STATE, AREA, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
 export { default as Accordion } from "./_svseeds/Accordion.svelte";
 export { default as Badge } from "./_svseeds/_Badge.svelte";
 export { default as Button } from "./_svseeds/_Button.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Simple headless components for Svelte.",
   "type": "module",
   "main": "./index.js",