svseeds 0.3.7 → 0.4.0

package/_svseeds/_CheckField.svelte

@@ -3,12 +3,12 @@
     options: SvelteMap<string, string> | Map<string, string>,
     label?: string,
     extra?: string,
-    aux?: Snippet<[string, string[], HTMLInputElement[] | undefined]>, // Snippet<[status,values,elements]>
+    aux?: Snippet<[string, string[], HTMLInputElement[]]>, // Snippet<[status,values,elements]>
     bottom?: string,
+    descFirst?: boolean, // <false>
     values?: string[], // bindable
     multiple?: boolean, // <true>
-    descFirst?: boolean, // <false>
-    validations?: ((values: string[], validities?: ValidityState[]) => string)[],
+    validations?: CheckFieldValidation[],
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
     attributes?: HTMLInputAttributes,
@@ -17,8 +17,8 @@
   };
   export type CheckFieldReqdProps = "options";
   export type CheckFieldBindProps = "values" | "status" | "elements";
+  export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
 
-  type CheckFieldTarget = { currentTarget: EventTarget & HTMLInputElement };
   const preset = "svs-check-field";
 
   import { type Snippet, untrack } from "svelte";
@@ -44,27 +44,23 @@
   let message = $state(bottom);
 
   // *** Status *** //
-  const phase = { change: false, submit: false };
-  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  let neutral = $state(isNeutral(status) ? status : STATE.DEFAULT);
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
   let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
   let invalid = $derived(status === STATE.INACTIVE ? true : undefined);
-  let errMsg = $derived(status === STATE.INACTIVE ? idErr : undefined);
-  const toInvalid = (msg?: string) => shiftStatus(phase.submit ? STATE.INACTIVE : neutral, msg);
-  const toNonInvalid = () => shiftStatus(phase.change && values.length ? STATE.ACTIVE : neutral);
-  function shiftStatus(stat: string, msg?: string) {
-    status = stat;
-    message = stat === STATE.INACTIVE ? msg ?? bottom : bottom;
-    elements[0]?.setCustomValidity(msg ?? "");
+  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  function shift(oninvalid?: boolean) {
+    const vmsg = elements[0]?.validationMessage ?? "";
+    status = oninvalid && vmsg ? STATE.INACTIVE : (!values.length || vmsg) ? neutral : STATE.ACTIVE;
+    message = status === STATE.INACTIVE ? vmsg ? vmsg : bottom : bottom;
   }
-  function validate(oninvalid?: boolean) {
-    if (!values.length && !oninvalid) return toNonInvalid();
-    const validities = elements.map((x) => x.validity);
+  function verify() {
+    if (!elements[0]) return;
     for (const v of validations) {
-      const msg = v(values, validities);
-      if (msg) return toInvalid(msg);
+      const msg = v(values, elements[0].validity);
+      if (msg) return elements[0].setCustomValidity(msg);
     }
-    toNonInvalid();
+    elements[0].setCustomValidity("");
   }
 
   // *** Bind Handlers *** //
@@ -73,19 +69,20 @@
     values;
     untrack(() => validate());
   });
+  function validate() {
+    verify();
+    shift();
+  }
 
   // *** Event Handlers *** //
-  function onchange(ev: Event & CheckFieldTarget) {
-    attributes?.onchange?.(ev);
-    values = elements.filter((elem) => elem.checked).map((elem) => elem.value);
-    phase.change = true;
+  function onchange(ev: Event) {
+    attributes?.onchange?.(ev as any);
+    values = elements.filter((el) => el.checked).map((el) => el.value);
   }
-  function oninvalid(ev: Event & CheckFieldTarget) {
-    attributes?.oninvalid?.(ev);
+  function oninvalid(ev: Event) {
+    attributes?.oninvalid?.(ev as any);
     ev.preventDefault();
-    phase.submit = true;
-    validate(true);
-    if (status !== STATE.INACTIVE) toInvalid(elements[0]?.validationMessage);
+    shift(true);
   }
 </script>
 
@@ -118,15 +115,16 @@
   {/if}
 {/snippet}
 {#snippet main()}
-  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple && message?.trim() ? errMsg : undefined}>
+  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? idMsg : undefined}>
     {#each opts as {value, text, checked}, i (value)}
-      <label class={cls(AREA.MAIN, status)}>
+      {@const stat = checked ? STATE.ACTIVE : neutral}
+      <label class={cls(AREA.MAIN, stat)}>
         {#if action}
-          <input bind:this={elements[i]} class={cls(AREA.LEFT, status)} aria-invalid={multiple ? invalid : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} use:action />
+          <input bind:this={elements[i]} class={cls(AREA.LEFT, stat)} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? idMsg : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} use:action />
         {:else}
-          <input bind:this={elements[i]} class={cls(AREA.LEFT, status)} aria-invalid={multiple ? invalid : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} />
+          <input bind:this={elements[i]} class={cls(AREA.LEFT, stat)} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? idMsg : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} />
         {/if}
-        <span class={cls(AREA.RIGHT, status)}>{text}</span>
+        <span class={cls(AREA.RIGHT, stat)}>{text}</span>
       </label>
     {/each}
   </div>

package/_svseeds/_CheckField.svelte.d.ts

@@ -2,12 +2,12 @@ export type CheckFieldProps = {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement[] | undefined]>;
+    aux?: Snippet<[string, string[], HTMLInputElement[]]>;
     bottom?: string;
+    descFirst?: boolean;
     values?: string[];
     multiple?: boolean;
-    descFirst?: boolean;
-    validations?: ((values: string[], validities?: ValidityState[]) => string)[];
+    validations?: CheckFieldValidation[];
     status?: string;
     style?: SVSStyle;
     attributes?: HTMLInputAttributes;
@@ -16,6 +16,7 @@ export type CheckFieldProps = {
 };
 export type CheckFieldReqdProps = "options";
 export type CheckFieldBindProps = "values" | "status" | "elements";
+export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";

package/_svseeds/_SelectField.svelte

@@ -7,9 +7,9 @@
     left?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
     right?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
     bottom?: string,
-    value?: string, // bindable
     descFirst?: boolean, // <false>
-    validations?: ((value: string, validity?: ValidityState) => string)[],
+    value?: string, // bindable
+    validations?: SelectFieldValidation[],
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
     attributes?: HTMLSelectAttributes;
@@ -18,8 +18,8 @@
   };
   export type SelectFieldReqdProps = "options";
   export type SelectFieldBindProps = "value" | "status" | "element";
+  export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
 
-  type SelectFieldTarget = { currentTarget: EventTarget & HTMLSelectElement };
   const preset = "svs-select-field";
 
   import { type Snippet, untrack } from "svelte";
@@ -30,7 +30,7 @@
 </script>
 
 <script lang="ts">
-  let { options, label, extra, aux, left, right, bottom, value = $bindable(""), descFirst = false, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: SelectFieldProps = $props();
+  let { options, label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: SelectFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -44,24 +44,22 @@
 
   // *** Status *** //
   let neutral = isNeutral(status) ? status : STATE.DEFAULT;
-  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  $effect(() => { neutral = isNeutral(status) ? status : neutral; });
   let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
   let invalid = $derived(status === STATE.INACTIVE ? true : undefined);
-  let errMsg = $derived(status === STATE.INACTIVE ? idErr : undefined);
-  const toInvalid = (msg?: string) => shiftStatus(STATE.INACTIVE, msg);
-  const toNonInvalid = (stat: string) => shiftStatus(stat);
-  function shiftStatus(stat: string, msg?: string) {
-    status = stat;
-    message = msg ?? bottom;
-    element?.setCustomValidity(msg ?? "");
+  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  function shift(oninvalid?: boolean) {
+    const vmsg = element?.validationMessage ?? "";
+    status = !value && !oninvalid ? neutral : vmsg ? STATE.INACTIVE : STATE.ACTIVE;
+    message = status === STATE.INACTIVE ? vmsg ? vmsg : bottom : bottom;
   }
-  function validate(oninvalid?: boolean) {
-    if (!value && !oninvalid) return toNonInvalid(neutral);
+  function verify() {
+    if (!element) return;
     for (const v of validations) {
-      const msg = v(value, element?.validity);
-      if (msg) return toInvalid(msg);
+      const msg = v(value, element.validity);
+      if (msg) return element.setCustomValidity(msg);
     }
-    toNonInvalid(STATE.ACTIVE);
+    element.setCustomValidity("");
   }
 
   // *** Bind Handlers *** //
@@ -70,14 +68,18 @@
     value;
     untrack(() => validate());
   });
+  function validate() {
+    verify();
+    shift();
+  }
 
   /*** Handle events ***/
-  function oninvalid(ev: Event & SelectFieldTarget) {
-    attributes?.oninvalid?.(ev);
+  function oninvalid(ev: Event) {
+    attributes?.oninvalid?.(ev as any);
     ev.preventDefault();
-    validate(true);
-    if (status !== STATE.INACTIVE) toInvalid(element?.validationMessage);
+    shift(true);
   }
+  $effect(() => untrack(() => verify()));
 </script>
 
 <!---------------------------------------->
@@ -119,13 +121,12 @@
 {/snippet}
 {#snippet main()}
   {@const c = cls(AREA.MAIN, status)}
-  {@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>
+    <select bind:value bind:this={element} class={c} {id} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action>
       {@render option()}
     </select>
   {:else}
-    <select bind:value bind:this={element} class={c} {id} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={msg}>
+    <select bind:value bind:this={element} class={c} {id} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg}>
       {@render option()}
     </select>
   {/if}

package/_svseeds/_SelectField.svelte.d.ts

@@ -6,9 +6,9 @@ export type SelectFieldProps = {
     left?: Snippet<[string, string, HTMLSelectElement | undefined]>;
     right?: Snippet<[string, string, HTMLSelectElement | undefined]>;
     bottom?: string;
-    value?: string;
     descFirst?: boolean;
-    validations?: ((value: string, validity?: ValidityState) => string)[];
+    value?: string;
+    validations?: SelectFieldValidation[];
     status?: string;
     style?: SVSStyle;
     attributes?: HTMLSelectAttributes;
@@ -17,6 +17,7 @@ export type SelectFieldProps = {
 };
 export type SelectFieldReqdProps = "options";
 export type SelectFieldBindProps = "value" | "status" | "element";
+export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";

package/_svseeds/_TextField.svelte

@@ -6,11 +6,11 @@
     left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
     right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
     bottom?: string,
+    descFirst?: boolean, // <false>
     value?: string, // bindable
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number",  // bindable <"text">
     options?: SvelteSet<string> | Set<string>,
-    descFirst?: boolean, // <false>
-    validations?: ((value: string, validity?: ValidityState) => string)[],
+    validations?: TextFieldValidation[],
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes,
@@ -19,6 +19,7 @@
   };
   export type TextFieldReqdProps = never;
   export type TextFieldBindProps = "value" | "type" | "status" | "element";
+  export type TextFieldValidation = (value: string, validity: ValidityState) => string;
 
   const preset = "svs-text-field";
 
@@ -30,7 +31,7 @@
 </script>
 
 <script lang="ts">
-  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();
+  let { label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), type = $bindable("text"), options, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: TextFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -48,31 +49,30 @@
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
   let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
   let invalid = $derived(status === STATE.INACTIVE ? true : undefined);
-  let errMsg = $derived(status === STATE.INACTIVE ? idErr : undefined);
-  const toInvalid = (msg?: string) => shiftStatus(STATE.INACTIVE, msg);
-  const toNonInvalid = (stat: string) => shiftStatus(stat);
-  function shiftStatus(stat: string, msg?: string) {
-    status = stat;
-    message = msg ?? bottom;
-    element?.setCustomValidity(msg ?? "");
+  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  function shift(oninvalid?: boolean) {
+    const vmsg = element?.validationMessage ?? "";
+    status = !value && !oninvalid ? neutral : vmsg ? STATE.INACTIVE : STATE.ACTIVE;
+    message = status === STATE.INACTIVE ? vmsg ? vmsg : bottom : bottom;
   }
-  function validate(oninvalid?: boolean) {
-    if (!value && !oninvalid) return toNonInvalid(neutral);
+  function verify() {
+    if (!element) return;
     for (const v of validations) {
-      const msg = v(value, element?.validity);
-      if (msg) return toInvalid(msg);
+      const msg = v(value, element.validity);
+      if (msg) return element.setCustomValidity(msg);
     }
-    toNonInvalid(STATE.ACTIVE);
+    element.setCustomValidity("");
   }
 
   // *** Bind Handlers *** //
   $effect.pre(() => {
     value;
-    untrack(() => conditionalValidate());
+    untrack(() => validate(true));
   });
-  function conditionalValidate() {
-    if (isNeutral(status)) return;
-    validate();
+  function validate(effect?: boolean) {
+    if (effect && isNeutral(status)) return;
+    verify();
+    shift();
   }
 
   // *** Event Handlers *** //
@@ -83,9 +83,9 @@
   function oninvalid(ev: Event) {
     attributes?.oninvalid?.(ev as any);
     ev.preventDefault();
-    validate(true);
-    if (status !== STATE.INACTIVE) toInvalid(element?.validationMessage);
+    shift(true);
   }
+  $effect(() => untrack(() => verify()));
 </script>
 
 <!---------------------------------------->
@@ -125,18 +125,17 @@
 {/snippet}
 {#snippet main()}
   {@const c = cls(AREA.MAIN, status)}
-  {@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>
+      <textarea bind:value bind:this={element} class={c} {id} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action></textarea>
     {:else}
-      <textarea bind:value bind:this={element} class={c} {id} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={msg}></textarea>
+      <textarea bind:value bind:this={element} class={c} {id} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg}></textarea>
     {/if}
   {:else}
     {#if action}
-      <input bind:value bind:this={element} class={c} list={idList} {id} {type} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={msg} use:action />
+      <input bind:value bind:this={element} class={c} list={idList} {id} {type} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action />
     {:else}
-      <input bind:value bind:this={element} class={c} list={idList} {id} {type} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={msg} />
+      <input bind:value bind:this={element} class={c} list={idList} {id} {type} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} />
     {/if}
     {#if options?.size}
       <datalist id={idList}>

package/_svseeds/_TextField.svelte.d.ts

@@ -5,11 +5,11 @@ export type TextFieldProps = {
     left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>;
     right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>;
     bottom?: string;
+    descFirst?: boolean;
     value?: string;
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";
     options?: SvelteSet<string> | Set<string>;
-    descFirst?: boolean;
-    validations?: ((value: string, validity?: ValidityState) => string)[];
+    validations?: TextFieldValidation[];
     status?: string;
     style?: SVSStyle;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
@@ -18,6 +18,7 @@ export type TextFieldProps = {
 };
 export type TextFieldReqdProps = never;
 export type TextFieldBindProps = "value" | "type" | "status" | "element";
+export type TextFieldValidation = (value: string, validity: ValidityState) => string;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";

package/_svseeds/_Toggle.svelte

@@ -1,6 +1,5 @@
 <script module lang="ts">
   export type ToggleProps = {
-    label?: string, // for aria-label; should be used if no label tag or no text in main
     main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>, // Snippet<[status,value,element]>
     left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>, // Snippet<[status,value,element]>
     right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>, // Snippet<[status,value,element]>
@@ -25,7 +24,7 @@
 </script>
 
 <script lang="ts">
-  let { label, main, left, right, value = $bindable(false), type = "button", status = $bindable(""), style, attributes, action, element = $bindable() }: ToggleProps = $props();
+  let { main, left, right, value = $bindable(false), type = "button", status = $bindable(""), style, attributes, action, element = $bindable() }: ToggleProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
@@ -75,22 +74,22 @@
   {@const c = cls(AREA.MAIN, status)}
   {#if role === "button"}
     {#if action}
-      <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={label} {onclick} {...attrs} use:action>
+      <button bind:this={element} class={c} type="button" aria-pressed={value} {onclick} {...attrs} use:action>
         {@render contents()}
       </button>
     {:else}
-      <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={label} {onclick} {...attrs}>
+      <button bind:this={element} class={c} type="button" aria-pressed={value} {onclick} {...attrs}>
         {@render contents()}
       </button>
     {/if}
   {:else}
     {@const style = "position: relative;"}
     {#if action}
-      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} aria-label={label} {onclick} {...attrs} use:action>
+      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} {onclick} {...attrs} use:action>
         {@render thumb()}
       </button>
     {:else}
-      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} aria-label={label} {onclick} {...attrs}>
+      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} {onclick} {...attrs}>
         {@render thumb()}
       </button>
     {/if}

package/_svseeds/_Toggle.svelte.d.ts

@@ -1,5 +1,4 @@
 export type ToggleProps = {
-    label?: string;
     main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>;
     left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>;
     right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>;

package/_svseeds/_ToggleGroup.svelte

@@ -0,0 +1,78 @@
+<script module lang="ts">
+  export type ToggleGroupProps = {
+    options: SvelteMap<string, string> | Map<string, string>,
+    values?: string[], // bindable
+    multiple?: boolean, // <true>
+    ariaDescId?: string,
+    ariaErrMsgId?: string, // bindable
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: SVSStyle,
+    action?: Action,
+    [key: string]: unknown | Snippet<[string]>,
+  };
+  export type ToggleGroupReqdProps = "options";
+  export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "status";
+
+  const preset = "svs-toggle-group";
+
+  function getSnippet(text: string, rest: Record<string, unknown>): Snippet<[string]> | undefined {
+    if (!Object.hasOwn(rest, text)) return;
+    if (typeof rest[text] !== "function") return;
+    return rest[text] as Snippet<[string]>;
+  }
+
+  import { type Snippet } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type SvelteMap } from "svelte/reactivity";
+  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
+</script>
+
+<script lang="ts">
+  let { options, values = $bindable([]), multiple = true, ariaDescId, ariaErrMsgId = $bindable(), status = $bindable(""), style, attributes, action, ...rest }: ToggleGroupProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(preset, style);
+  const role = multiple ? "checkbox" : "radio";
+  const roleGroup = multiple ? "group" : "radiogroup";
+
+  // *** Bind Handlers *** //
+  let opts = $derived([...options.entries().map(([value, text]) => ({ value, text, checked: values.includes(value) }))]);
+  let invalid = $derived(ariaErrMsgId ? true : undefined);
+
+  // *** Event Handlers *** //
+  const update = multiple
+    ? (value: string) => (values.includes(value) ? values.filter((x) => x !== value) : opts.map((x) => x.value).filter((x) => [...values, value].includes(x)))
+    : (value: string) => (values.includes(value) ? [] : [value]);
+  function updateValues(value: string): () => void {
+    return () => values = update(value);
+  }
+</script>
+
+<!---------------------------------------->
+
+{#if opts.length}
+  <span class={cls(AREA.WHOLE, status)} role={roleGroup} aria-describedby={ariaDescId} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? ariaErrMsgId : undefined}>
+    {#each opts as { value, text, checked } (value)}
+      {@const c = cls(AREA.MAIN, checked ? STATE.ACTIVE : status)}
+      {#if action}
+        <button class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role} use:action>
+          {@render content(value, text)}
+        </button>
+      {:else}
+        <button class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role}>
+          {@render content(value, text)}
+        </button>
+      {/if}
+    {/each}
+  </span>
+{/if}
+
+{#snippet content(value: string, text: string)}
+  {@const snippet = getSnippet(text, rest)}
+  {#if snippet}
+    {@render snippet(value)}
+  {:else}
+    {text}
+  {/if}
+{/snippet}

package/_svseeds/_ToggleGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+export type ToggleGroupProps = {
+    options: SvelteMap<string, string> | Map<string, string>;
+    values?: string[];
+    multiple?: boolean;
+    ariaDescId?: string;
+    ariaErrMsgId?: string;
+    status?: string;
+    style?: SVSStyle;
+    action?: Action;
+    [key: string]: unknown | Snippet<[string]>;
+};
+export type ToggleGroupReqdProps = "options";
+export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "status";
+import { type Snippet } from "svelte";
+import { type Action } from "svelte/action";
+import { type SvelteMap } from "svelte/reactivity";
+import { type SVSStyle } from "./core";
+declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "status" | "values" | "ariaErrMsgId">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/_svseeds/core.d.ts

@@ -1,7 +1,6 @@
 export { type SVSStyle, CONST, STATE, AREA, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId, };
-type ClassRule = Record<string, string>;
-type ClassRuleSet = Partial<Record<string, ClassRule>>;
-type SVSStyle = ClassRuleSet | ClassRule | string;
+type ClassRule = Record<string, string> | string;
+type SVSStyle = Record<string, ClassRule> | string;
 declare const CONST = "const";
 declare const STATE: Readonly<{
     DEFAULT: "default";

package/_svseeds/core.js

@@ -1 +1 @@
-var t=this&&this.__assign||function(){return t=Object.assign||function(t){for(var r,e=1,n=arguments.length;e<n;e++)for(var i in r=arguments[e])Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i]);return t},t.apply(this,arguments)},r=this&&this.__classPrivateFieldSet||function(t,r,e,n,i){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?t!==r||!i:!r.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?i.call(t,e):i?i.value=e:r.set(t,e),e},e=this&&this.__classPrivateFieldGet||function(t,r,e,n){if("a"===e&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?t!==r||!n:!r.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?n:"a"===e?n.call(t):n?n.value:r.get(t)},n=this&&this.__spreadArray||function(t,r,e){if(e||2===arguments.length)for(var n,i=0,o=r.length;i<o;i++)!n&&i in r||(n||(n=Array.prototype.slice.call(r,0,i)),n[i]=r[i]);return t.concat(n||Array.prototype.slice.call(r))};export{i as CONST,o as STATE,a as AREA,u as elemId,l as fnClass,s as isNeutral,h as omit,v as debounce,d as throttle,c as UniqueId};var i="const",o=Object.freeze({DEFAULT:"default",ACTIVE:"active",INACTIVE:"inactive"}),a=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"}),c=function(){function t(t){void 0===t&&(t=4),i.add(this),c.set(this,new Set),u.set(this,4),t>2&&r(this,u,t,"f")}var i,o,a,c,u,l,f,s;return Object.defineProperty(t.prototype,"id",{get:function(){return this.get(!0)},enumerable:!1,configurable:!0}),t.prototype.get=function(t){if(t)return e(this,c,"f").size>1e4&&e(this,c,"f").clear(),e(this,i,"m",s).call(this)},o=t,c=new WeakMap,u=new WeakMap,i=new WeakSet,l=function(){return e(o,o,"f",a)[Math.trunc(Math.random()*e(o,o,"f",a).length)]},f=function(){var t=this;return String.fromCharCode.apply(String,Array(e(this,u,"f")).fill(null).map((function(){return e(t,i,"m",l).call(t)})))},s=function(){for(var t=e(this,i,"m",f).call(this);e(this,c,"f").has(t);)t=e(this,i,"m",f).call(this);return e(this,c,"f").add(t),t},a={value:n(n([],Array.from(Array(25).keys(),(function(t){return t+65})),!0),Array.from(Array(25).keys(),(function(t){return t+97})),!0)},t}(),u=new c;function l(t,r){var e,n=null!==(e=f(r))&&void 0!==e?e:f(t);return null==n?function(t,r){}:"string"==typeof n?function(t,r){return"".concat(n," ").concat(t," ").concat(r)}:function(t,r){return function(t,r,e){var n,a,c,u,l,f,s=null!==(a=null===(n=t[r])||void 0===n?void 0:n[i])&&void 0!==a?a:"",h=null!==(f=null!==(u=null===(c=t[r])||void 0===c?void 0:c[e])&&void 0!==u?u:null===(l=t[r])||void 0===l?void 0:l[o.DEFAULT])&&void 0!==f?f:"";if(!s&&!h)return;return"".concat(s).concat(s&&h?" ":"").concat(h)}(n,t,r)}}function f(t){if(null!=t){if("string"==typeof t)return t.trim()?t:void 0;var r=Object.values(t);if(r.length)return"string"!=typeof r[0]?t:Object.fromEntries(Object.entries(t).map((function(t){return[t[0],{const:t[1]}]})))}}function s(t){return t!==o.ACTIVE&&t!==o.INACTIVE}function h(r){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];if(!r)return{};var i=t({},r);return e.forEach((function(t){return delete i[t]})),i}function v(t,r){var e;return function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];e&&clearTimeout(e),e=setTimeout((function(){r.call.apply(r,n([null],i,!1))}),t)}}function d(t,r){var e,i=0,o=function(){return Date.now()-i},a=function(t){r.call.apply(r,n([null],t,!1)),i=Date.now()};return function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];if(!i)return a(r);clearTimeout(e),e=setTimeout((function(){o()>=t&&a(r)}),t-o())}}
+var t=this&&this.__assign||function(){return t=Object.assign||function(t){for(var r,n=1,e=arguments.length;n<e;n++)for(var i in r=arguments[n])Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i]);return t},t.apply(this,arguments)},r=this&&this.__classPrivateFieldSet||function(t,r,n,e,i){if("m"===e)throw new TypeError("Private method is not writable");if("a"===e&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?t!==r||!i:!r.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===e?i.call(t,n):i?i.value=n:r.set(t,n),n},n=this&&this.__classPrivateFieldGet||function(t,r,n,e){if("a"===n&&!e)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?t!==r||!e:!r.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?e:"a"===n?e.call(t):e?e.value:r.get(t)},e=this&&this.__spreadArray||function(t,r,n){if(n||2===arguments.length)for(var e,i=0,o=r.length;i<o;i++)!e&&i in r||(e||(e=Array.prototype.slice.call(r,0,i)),e[i]=r[i]);return t.concat(e||Array.prototype.slice.call(r))};export{i as CONST,o as STATE,a as AREA,u as elemId,l as fnClass,s as isNeutral,h as omit,v as debounce,d as throttle,c as UniqueId};var i="const",o=Object.freeze({DEFAULT:"default",ACTIVE:"active",INACTIVE:"inactive"}),a=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"}),c=function(){function t(t){void 0===t&&(t=4),i.add(this),c.set(this,new Set),u.set(this,4),t>2&&r(this,u,t,"f")}var i,o,a,c,u,l,f,s;return Object.defineProperty(t.prototype,"id",{get:function(){return this.get(!0)},enumerable:!1,configurable:!0}),t.prototype.get=function(t){if(t)return n(this,c,"f").size>1e4&&n(this,c,"f").clear(),n(this,i,"m",s).call(this)},o=t,c=new WeakMap,u=new WeakMap,i=new WeakSet,l=function(){return n(o,o,"f",a)[Math.trunc(Math.random()*n(o,o,"f",a).length)]},f=function(){var t=this;return String.fromCharCode.apply(String,Array(n(this,u,"f")).fill(null).map((function(){return n(t,i,"m",l).call(t)})))},s=function(){for(var t=n(this,i,"m",f).call(this);n(this,c,"f").has(t);)t=n(this,i,"m",f).call(this);return n(this,c,"f").add(t),t},a={value:e(e([],Array.from(Array(25).keys(),(function(t){return t+65})),!0),Array.from(Array(25).keys(),(function(t){return t+97})),!0)},t}(),u=new c;function l(t,r){var n,e=null!==(n=f(r))&&void 0!==n?n:f(t);return null==e?function(t,r){}:"string"==typeof e?function(t,r){return"".concat(e," ").concat(t," ").concat(r)}:function(t,r){return function(t,r,n){var e,a,c,u,l,f,s=null!==(a=null===(e=t[r])||void 0===e?void 0:e[i])&&void 0!==a?a:"",h=null!==(f=null!==(u=null===(c=t[r])||void 0===c?void 0:c[n])&&void 0!==u?u:null===(l=t[r])||void 0===l?void 0:l[o.DEFAULT])&&void 0!==f?f:"";if(!s&&!h)return;return"".concat(s).concat(s&&h?" ":"").concat(h)}(e,t,r)}}function f(t){if(null!=t){if("string"==typeof t)return t.trim()?t:void 0;var r=Object.entries(t);if(r.length)return Object.fromEntries(r.map((function(t){var r=t[0],n=t[1];return"string"==typeof n?[r,{const:n}]:[r,n]})))}}function s(t){return t!==o.ACTIVE&&t!==o.INACTIVE}function h(r){for(var n=[],e=1;e<arguments.length;e++)n[e-1]=arguments[e];if(!r)return{};var i=t({},r);return n.forEach((function(t){return delete i[t]})),i}function v(t,r){var n;return function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];n&&clearTimeout(n),n=setTimeout((function(){r.call.apply(r,e([null],i,!1))}),t)}}function d(t,r){var n,i=0,o=function(){return Date.now()-i},a=function(t){r.call.apply(r,e([null],t,!1)),i=Date.now()};return function(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];if(!i)return a(r);clearTimeout(n),n=setTimeout((function(){o()>=t&&a(r)}),t-o())}}

package/index.d.ts

@@ -1,7 +1,7 @@
 export { type SVSStyle, CONST, STATE, AREA, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
 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";
-export { default as CheckField, type CheckFieldProps, type CheckFieldReqdProps, type CheckFieldBindProps } from "./_svseeds/_CheckField.svelte";
+export { default as CheckField, type CheckFieldProps, type CheckFieldReqdProps, type CheckFieldBindProps, type CheckFieldValidation } from "./_svseeds/_CheckField.svelte";
 export { default as ColorPicker, type ColorPickerProps, type ColorPickerReqdProps, type ColorPickerBindProps, getHex } from "./_svseeds/_ColorPicker.svelte";
 export { default as ComboBox, type ComboBoxProps, type ComboBoxReqdProps, type ComboBoxBindProps } from "./_svseeds/_ComboBox.svelte";
 export { default as ContextMenu, type ContextMenuProps, type ContextMenuReqdProps, type ContextMenuBindProps } from "./_svseeds/_ContextMenu.svelte";
@@ -9,14 +9,16 @@ export { default as Disclosure, type DisclosureProps, type DisclosureReqdProps,
 export { default as HotkeyCapture, type HotkeyCaptureProps, type HotkeyCaptureReqdProps, type HotkeyCaptureBindProps } from "./_svseeds/_HotkeyCapture.svelte";
 export { default as Modal, type ModalProps, type ModalReqdProps, type ModalBindProps } from "./_svseeds/_Modal.svelte";
 export { default as ProgressTracker, type ProgressTrackerProps, type ProgressTrackerReqdProps, type ProgressTrackerBindProps } from "./_svseeds/_ProgressTracker.svelte";
-export { default as SelectField, type SelectFieldProps, type SelectFieldReqdProps, type SelectFieldBindProps } from "./_svseeds/_SelectField.svelte";
+export { default as SelectField, type SelectFieldProps, type SelectFieldReqdProps, type SelectFieldBindProps, type SelectFieldValidation } from "./_svseeds/_SelectField.svelte";
 export { default as Slider, type SliderProps, type SliderReqdProps, type SliderBindProps, type Range } from "./_svseeds/_Slider.svelte";
 export { default as Sortable, type SortableProps, type SortableReqdProps, type SortableBindProps, SortableItems } from "./_svseeds/_Sortable.svelte";
 export { default as Tabs, type TabsProps, type TabsReqdProps, type TabsBindProps } from "./_svseeds/_Tabs.svelte";
-export { default as TextField, type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_svseeds/_TextField.svelte";
+export { default as TextField, type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps, type TextFieldValidation } from "./_svseeds/_TextField.svelte";
 export { default as Toggle, type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_svseeds/_Toggle.svelte";
-export { default as TogglesField, type TogglesFieldProps, type TogglesFieldReqdProps, type TogglesFieldBindProps } from "./_svseeds/_TogglesField.svelte";
+export { default as ToggleGroup, type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, type TooltipProps, type TooltipReqdProps, type TooltipBindProps, type Vector, type Position, type Align, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";
 export { default as Accordion, type AccordionProps, type AccordionDeps, type AccordionReqdProps, type AccordionBindProps } from "./_svseeds/Accordion.svelte";
 export { default as DarkToggle, type DarkToggleProps, type DarkToggleDeps, type DarkToggleReqdProps, type DarkToggleBindProps } from "./_svseeds/DarkToggle.svelte";
-export { default as TagsInput, type TagsInputProps, type TagsInputDeps, type TagsInputReqdProps, type TagsInputBindProps, type TagCountValidation } from "./_svseeds/TagsInput.svelte";
+export { default as TagsInput, type TagsInputProps, type TagsInputDeps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputEvents } from "./_svseeds/TagsInput.svelte";
+export { default as TagsInputField, type TagsInputFieldProps, type TagsInputFieldDeps, type TagsInputFieldReqdProps, type TagsInputFieldBindProps, type TagsInputFieldConstraint, type TagsInputFieldValidation, type TagsInputFieldCountValidation } from "./_svseeds/TagsInputField.svelte";
+export { default as ToggleGroupField, type ToggleGroupFieldProps, type ToggleGroupFieldDeps, type ToggleGroupFieldReqdProps, type ToggleGroupFieldBindProps, type ToggleGroupFieldValidation } from "./_svseeds/ToggleGroupField.svelte";

package/index.js

@@ -15,8 +15,10 @@ export { default as Sortable, SortableItems } from "./_svseeds/_Sortable.svelte"
 export { default as Tabs } from "./_svseeds/_Tabs.svelte";
 export { default as TextField } from "./_svseeds/_TextField.svelte";
 export { default as Toggle } from "./_svseeds/_Toggle.svelte";
-export { default as TogglesField } from "./_svseeds/_TogglesField.svelte";
+export { default as ToggleGroup } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";
 export { default as Accordion } from "./_svseeds/Accordion.svelte";
 export { default as DarkToggle } from "./_svseeds/DarkToggle.svelte";
 export { default as TagsInput } from "./_svseeds/TagsInput.svelte";
+export { default as TagsInputField } from "./_svseeds/TagsInputField.svelte";
+export { default as ToggleGroupField } from "./_svseeds/ToggleGroupField.svelte";