svseeds 0.3.8 → 0.4.1

package/_svseeds/_CheckField.svelte

@@ -3,11 +3,11 @@
     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?: CheckFieldValidation[],
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
@@ -17,9 +17,8 @@
   };
   export type CheckFieldReqdProps = "options";
   export type CheckFieldBindProps = "values" | "status" | "elements";
-  export type CheckFieldValidation = (values: string[], validities?: ValidityState[]) => string;
+  export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
 
-  type CheckFieldTarget = { currentTarget: EventTarget & HTMLInputElement };
   const preset = "svs-check-field";
 
   import { type Snippet, untrack } from "svelte";
@@ -45,28 +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();
-    if (!elements[0] || !validations.length) return;
-    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 *** //
@@ -75,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);
-    toInvalid(elements[0]?.validationMessage);
+    shift(true);
   }
 </script>
 
@@ -120,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,11 +2,11 @@ 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?: CheckFieldValidation[];
     status?: string;
     style?: SVSStyle;
@@ -16,7 +16,7 @@ export type CheckFieldProps = {
 };
 export type CheckFieldReqdProps = "options";
 export type CheckFieldBindProps = "values" | "status" | "elements";
-export type CheckFieldValidation = (values: string[], validities?: ValidityState[]) => string;
+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,8 +7,8 @@
     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>
+    value?: string, // bindable
     validations?: SelectFieldValidation[],
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
@@ -18,9 +18,8 @@
   };
   export type SelectFieldReqdProps = "options";
   export type SelectFieldBindProps = "value" | "status" | "element";
-  export type SelectFieldValidation = (value: string, validity?: ValidityState) => string;
+  export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
 
-  type SelectFieldTarget = { currentTarget: EventTarget & HTMLSelectElement };
   const preset = "svs-select-field";
 
   import { type Snippet, untrack } from "svelte";
@@ -31,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;
@@ -45,25 +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);
-    if (!element || !validations.length) return;
+  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 *** //
@@ -72,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);
-    toInvalid(element?.validationMessage);
+    shift(true);
   }
+  $effect(() => untrack(() => verify()));
 </script>
 
 <!---------------------------------------->
@@ -121,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,8 +6,8 @@ export type SelectFieldProps = {
     left?: Snippet<[string, string, HTMLSelectElement | undefined]>;
     right?: Snippet<[string, string, HTMLSelectElement | undefined]>;
     bottom?: string;
-    value?: string;
     descFirst?: boolean;
+    value?: string;
     validations?: SelectFieldValidation[];
     status?: string;
     style?: SVSStyle;
@@ -17,7 +17,7 @@ export type SelectFieldProps = {
 };
 export type SelectFieldReqdProps = "options";
 export type SelectFieldBindProps = "value" | "status" | "element";
-export type SelectFieldValidation = (value: string, validity?: ValidityState) => string;
+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,10 +6,10 @@
     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?: TextFieldValidation[],
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
@@ -19,7 +19,7 @@
   };
   export type TextFieldReqdProps = never;
   export type TextFieldBindProps = "value" | "type" | "status" | "element";
-  export type TextFieldValidation = (value: string, validity?: ValidityState) => string;
+  export type TextFieldValidation = (value: string, validity: ValidityState) => string;
 
   const preset = "svs-text-field";
 
@@ -31,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;
@@ -49,32 +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);
-    if (!element || !validations.length) return;
+  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 *** //
@@ -85,9 +83,9 @@
   function oninvalid(ev: Event) {
     attributes?.oninvalid?.(ev as any);
     ev.preventDefault();
-    validate(true);
-    toInvalid(element?.validationMessage);
+    shift(true);
   }
+  $effect(() => untrack(() => verify()));
 </script>
 
 <!---------------------------------------->
@@ -127,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,10 +5,10 @@ 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?: TextFieldValidation[];
     status?: string;
     style?: SVSStyle;
@@ -18,7 +18,7 @@ export type TextFieldProps = {
 };
 export type TextFieldReqdProps = never;
 export type TextFieldBindProps = "value" | "type" | "status" | "element";
-export type TextFieldValidation = (value: string, validity?: ValidityState) => string;
+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/index.d.ts

@@ -15,8 +15,10 @@ export { default as Sortable, type SortableProps, type SortableReqdProps, type S
 export { default as Tabs, type TabsProps, type TabsReqdProps, type TabsBindProps } from "./_svseeds/_Tabs.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, type TogglesFieldValidation } 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 TagsInputValidation, 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";

package/package.json

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