svseeds 0.3.8 → 0.4.0

package/_svseeds/TagsInput.svelte

@@ -1,153 +1,107 @@
 <script module lang="ts">
   export type TagsInputProps = {
     values?: string[], // bindable
-    type?: "left" | "right" | "bottom", // <"left">
+    value?: string, // bindable
+    type?: "left" | "right", // <"left">
     confirm?: string[], // <["Enter"]>
     trim?: boolean, // <true>
     unique?: boolean, // <true>
-    min?: TagCountValidation,
-    max?: TagCountValidation,
-    validations?: TagsInputValidation[],
+    ariaErrMsgId?: string, // bindable
+    events?: TagsInputEvents,
     status?: string, // bindable <STATE.DEFAULT>
     style?: SVSStyle,
+    attributes?: HTMLInputAttributes,
+    action?: Action,
     element?: HTMLInputElement, // bindable
     deps?: TagsInputDeps,
   };
   export type TagsInputDeps = {
-    svsTextField?: Omit<TextFieldProps, TextFieldReqdProps | TextFieldBindProps>,
     svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">,
   };
   export type TagsInputReqdProps = never;
-  export type TagsInputBindProps = "dark" | "status" | "element";
-  export type TagsInputValidation = (values: string[]) => string;
-  export type TagCountValidation = { value: number, message: string };
+  export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
+  export type TagsInputEvents = { // cancel if true
+    onadd?: (values: string[], value: string) => void | boolean,
+    onremove?: (values: string[], value: string, index: number) => void | boolean,
+  };
 
+  type TagsInputTarget = { currentTarget: EventTarget & HTMLInputElement };
+  type BadgeTarget = { currentTarget: EventTarget & HTMLButtonElement; };
   const preset = "svs-tags-input";
   const CONFIRM_KEY = "Enter";
 
-  import { untrack } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type HTMLInputAttributes } from "svelte/elements";
   import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
-  import TextField, { type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_TextField.svelte";
   import Badge, { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
 </script>
 
 <script lang="ts">
-  let { values = $bindable([]), type = "left", confirm = [], trim = true, unique = true, min, max, validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputProps = $props();
+  let { values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, status = $bindable(""), style, attributes, action, element = $bindable(), deps }: TagsInputProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
   const cls = fnClass(preset, style);
+  const attrs = omit(attributes, "class", "type", "onkeydown");
   const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
-  const textValidations = deps?.svsTextField?.validations ?? [];
-  if (max) textValidations.unshift((_) => values.length >= max.value ? max.message : "");
-  if (min) validations.unshift((values) => values.length < min.value ? min.message : "");
-
-  const left = type === "left" || deps?.svsTextField?.left ? sideLeft : undefined;
-  const right = type === "right" || deps?.svsTextField?.right ? sideRight : undefined;
-  let value = $state("");
 
   // *** Initialize Deps *** //
   const svsBadge = {
     ...omit(deps?.svsBadge, "onclick", "right", "style"),
     style: deps?.svsBadge?.style ?? `${preset} svs-badge`,
   };
-  const svsTextField = {
-    ...omit(deps?.svsTextField, "validations", "style", "attributes"),
-    style: deps?.svsTextField?.style ?? `${preset} svs-text-field`,
-    attributes: { ...deps?.svsTextField?.attributes, onkeydown },
-  };
-
-  // *** Bind Handlers *** //
-  $effect.pre(() => {
-    values;
-    untrack(() => validateTags());
-  });
-  function validateText(): boolean {
-    if (!element) return false;
-    for (const v of textValidations) {
-      const msg = v(value);
-      if (msg) return showMessageTemporarily(msg);
-    }
-    return true;
-  }
-  function showMessageTemporarily(msg: string): boolean {
-    element?.setCustomValidity(msg);
-    element?.checkValidity();
-    element?.setCustomValidity("");
-    return false;
-  }
-  function validateTags() {
-    if (!element) return;
-    for (const v of validations) {
-      const msg = v(values);
-      if (msg) return element.setCustomValidity(msg);
-    }
-  }
 
   // *** Event Handlers *** //
-  function onkeydown(ev: KeyboardEvent) {
-    deps?.svsTextField?.attributes?.onkeydown?.(ev as any);
+  function onkeydown(ev: KeyboardEvent & TagsInputTarget) {
+    attributes?.onkeydown?.(ev);
     if (!confirmKeys.has(ev.key) || ev.isComposing) return;
     ev.preventDefault();
+    if (events?.onadd?.(values, value)) return;
     if (trim) value = value.trim();
-    const valid = validateText();
-    if (valid) addTag();
-    validateTags();
+    add();
   }
-  function addTag() {
+  function add() {
     if (unique && values.includes(value)) value = "";
     if (!value) return;
-    values.push(value);
+    values = [...values, value];
     value = "";
   }
-  function removeTag(index: number): (ev: Event) => void {
+  function remove(index: number): (ev: MouseEvent & BadgeTarget) => void {
     return (ev) => {
-      deps?.svsBadge?.onclick?.(ev as any);
-      values.splice(index, 1);
-      validateTags();
+      deps?.svsBadge?.onclick?.(ev);
+      if (events?.onremove?.(values, values[index], index)) return;
+      values = values.filter((_, i) => i !== index);
     };
   }
-  $effect(() => untrack(() => validateTags()))
 </script>
 
 <!---------------------------------------->
 
-<TextField bind:value bind:status bind:element type="text" {left} {right} {...svsTextField} />
-{#if type === "bottom"}
-  <div class={cls(AREA.BOTTOM, status)}>
-    {@render tags()}
-  </div>
-{/if}
-
-{#snippet sideLeft(status: string)}
-  {#if type === "left"}
-    {@render tags()}
+<div class={cls(AREA.WHOLE, status)}>
+  {@render tags(type === "left")}
+  {#if action}
+    <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" {onkeydown} {...attrs} use:action />
   {:else}
-    {#if deps?.svsTextField?.left}
-      {@render deps.svsTextField.left(status, "", element)}
-    {/if}
+    <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" {onkeydown} {...attrs} />
   {/if}
-{/snippet}
-{#snippet sideRight(status: string)}
-  {#if type === "right"}
-    {@render tags()}
-  {:else}
-    {#if deps?.svsTextField?.right}
-      {@render deps.svsTextField.right(status, "", element)}
-    {/if}
+  {@render tags(type === "right")}
+</div>
+
+{#snippet tags(render: boolean)}
+  {#if render}
+    <span class={cls(type, status)}>
+      {#each values as value, i}
+        <Badge bind:status type="right" onclick={remove(i)} {...svsBadge}>
+          {value}
+          {#snippet right(status)}
+            {#if deps?.svsBadge?.right}
+              {@render deps.svsBadge.right(status)}
+            {:else}
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="min-width: 5px; min-height: 5px;"><path d="M511.998 70.682 441.315 0 256.002 185.313 70.685 0 .002 70.692l185.314 185.314L.002 441.318 70.69 512l185.312-185.312L441.315 512l70.683-70.682-185.314-185.312z" /></svg>
+            {/if}
+          {/snippet}
+        </Badge>
+      {/each}
+    </span>
   {/if}
 {/snippet}
-{#snippet tags()}
-  {#each values as value, i}
-    <Badge type="right" onclick={removeTag(i)} {...svsBadge}>
-      {#snippet right(status)}
-        {#if deps?.svsBadge?.right}
-          {@render deps.svsBadge.right(status)}
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="min-width: 5px; min-height: 5px;"><path d="M511.998 70.682 441.315 0 256.002 185.313 70.685 0 .002 70.692l185.314 185.314L.002 441.318 70.69 512l185.312-185.312L441.315 512l70.683-70.682-185.314-185.312z" /></svg>
-        {/if}
-      {/snippet}
-      {value}
-    </Badge>
-  {/each}
-{/snippet}

package/_svseeds/TagsInput.svelte.d.ts

@@ -1,31 +1,32 @@
 export type TagsInputProps = {
     values?: string[];
-    type?: "left" | "right" | "bottom";
+    value?: string;
+    type?: "left" | "right";
     confirm?: string[];
     trim?: boolean;
     unique?: boolean;
-    min?: TagCountValidation;
-    max?: TagCountValidation;
-    validations?: TagsInputValidation[];
+    ariaErrMsgId?: string;
+    events?: TagsInputEvents;
     status?: string;
     style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
     element?: HTMLInputElement;
     deps?: TagsInputDeps;
 };
 export type TagsInputDeps = {
-    svsTextField?: Omit<TextFieldProps, TextFieldReqdProps | TextFieldBindProps>;
     svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
 };
 export type TagsInputReqdProps = never;
-export type TagsInputBindProps = "dark" | "status" | "element";
-export type TagsInputValidation = (values: string[]) => string;
-export type TagCountValidation = {
-    value: number;
-    message: string;
+export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
+export type TagsInputEvents = {
+    onadd?: (values: string[], value: string) => void | boolean;
+    onremove?: (values: string[], value: string, index: number) => void | boolean;
 };
+import { type Action } from "svelte/action";
+import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSStyle } 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, {}, "status" | "element" | "values">;
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value" | "status" | "element" | "values" | "ariaErrMsgId">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

package/_svseeds/TagsInputField.svelte

@@ -0,0 +1,169 @@
+<script module lang="ts">
+  export type TagsInputFieldProps = {
+    label?: string,
+    extra?: string,
+    aux?: Snippet<[string, string[], HTMLInputElement | undefined]>, // Snippet<[status,values,element]>
+    left?: Snippet<[string, string[], HTMLInputElement | undefined]>, // Snippet<[status,values,element]>
+    right?: Snippet<[string, string[], HTMLInputElement | undefined]>, // Snippet<[status,values,element]>
+    bottom?: string,
+    descFirst?: boolean, // <false>
+    values?: string[], // bindable
+    min?: TagsInputFieldCountValidation,
+    max?: TagsInputFieldCountValidation,
+    constraints?: TagsInputFieldConstraint[],
+    validations?: TagsInputFieldValidation[],
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: SVSStyle,
+    element?: HTMLInputElement, // bindable
+    deps?: TagsInputFieldDeps,
+  };
+  export type TagsInputFieldDeps = {
+    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">,
+  } & TagsInputDeps;
+  export type TagsInputFieldReqdProps = never;
+  export type TagsInputFieldBindProps = "values" | "status" | "element";
+  export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
+  export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+  export type TagsInputFieldCountValidation = { value: number, message: string };
+
+  const preset = "svs-tags-input-field";
+
+  import { type Snippet, untrack } from "svelte";
+  import { type SVSStyle, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
+  import TagsInput, { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputDeps } from "./TagsInput.svelte";
+</script>
+
+<script lang="ts">
+  let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputFieldProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(preset, style);
+  const id = deps?.svsTagsInput?.attributes?.id ? deps.svsTagsInput.attributes.id : elemId.get(label?.trim());
+  const idLabel = elemId.get(label?.trim());
+  const idDesc = elemId.get(bottom?.trim());
+  const idErr = idDesc ?? elemId.id;
+  let message = $state(bottom);
+  let value = $state("");
+  if (max) constraints.unshift(() => values.length >= max.value ? max.message : "");
+  if (min) validations.unshift(() => values.length < min.value ? min.message : "");
+
+  // *** Initialize Deps *** //
+  const svsBadge = {
+    ...omit(deps?.svsBadge, "style"),
+    style: deps?.svsBadge?.style ?? `${preset} svs-tags-input svs-badge`,
+  };
+  const svsTagsInput = {
+    ...omit(deps?.svsTagsInput, "style", "attributes"),
+    events: { onadd, onremove: deps?.svsTagsInput?.events?.onremove },
+    style: deps?.svsTagsInput?.style ?? `${preset} svs-tags-input`,
+    attributes: {
+      ...omit(deps?.svsTagsInput?.attributes, "id", "onchange", "oninvalid", "aria-describedby"),
+      id,
+      onchange,
+      oninvalid,
+      "aria-describedby": idDesc,
+    },
+  };
+
+  // *** Status *** //
+  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
+  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  function shift(oninvalid: boolean = false, msg?: string) {
+    const vmsg = element?.validationMessage ?? "";
+    status = getStatus(oninvalid, vmsg, msg);
+    message = status === STATE.INACTIVE ? msg ? msg : vmsg ? vmsg : bottom : bottom;
+  }
+  function getStatus(oninvalid: boolean, vmsg: string, msg?: string): string {
+    if (msg || (oninvalid && vmsg)) return STATE.INACTIVE;
+    if (!values.length || vmsg) return neutral;
+    return STATE.ACTIVE;
+  }
+  function verify() {
+    if (!element) return;
+    for (const v of validations) {
+      const msg = v(values, element.validity);
+      if (msg) return element.setCustomValidity(msg);
+    }
+    element.setCustomValidity("");
+  }
+
+  // *** Bind Handlers *** //
+  $effect.pre(() => {
+    values;
+    untrack(() => validate());
+  });
+  function validate() {
+    verify();
+    shift();
+  }
+
+  // *** Event Handlers *** //
+  function onadd(values: string[], value: string): void | boolean {
+    if (deps?.svsTagsInput?.events?.onadd?.(values, value)) return true;
+    status = neutral;
+    shift(false, check());
+    return status === STATE.INACTIVE;
+  }
+  function check(): string | undefined {
+    if (!element) return;
+    for (const c of constraints) {
+      const msg = c(value, element.validity);
+      if (msg) return msg;
+    }
+  }
+  function onchange(ev: Event) {
+    deps?.svsTagsInput?.attributes?.onchange?.(ev as any);
+    if (!isNeutral(status)) shift();
+  }
+  function oninvalid(ev: Event) {
+    deps?.svsTagsInput?.attributes?.oninvalid?.(ev as any);
+    ev.preventDefault();
+    shift(true);
+  }
+  $effect(() => untrack(() => verify()));
+</script>
+
+<!---------------------------------------->
+
+<div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  {#if aux}
+    <div class={cls(AREA.TOP, status)}>
+      {@render lbl()}
+      <span class={cls(AREA.AUX, status)}>{@render aux(status, values, element)}</span>
+    </div>
+  {:else}
+    {@render lbl()}
+  {/if}
+  {@render desc(descFirst)}
+  <div class={cls(AREA.MIDDLE, status)}>
+    {@render side(AREA.LEFT, left)}
+    <TagsInput bind:values bind:value bind:status bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} deps={{ svsBadge }} />
+    {@render side(AREA.RIGHT, right)}
+  </div>
+  {@render desc(!descFirst)}
+</div>
+
+{#snippet lbl()}
+  {#if label?.trim()}
+    <label class={cls(AREA.LABEL, status)} for={id} id={idLabel}>
+      {label}
+      {#if extra?.trim()}
+        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+      {/if}
+    </label>
+  {/if}
+{/snippet}
+{#snippet side(area: string, body?: Snippet<[string, string[], HTMLInputElement | undefined]>)}
+  {#if body}
+    <span class={cls(area, status)}>{@render body(status, values, element)}</span>
+  {/if}
+{/snippet}
+{#snippet desc(show: boolean)}
+  {#if show && message?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+  {/if}
+{/snippet}
+

package/_svseeds/TagsInputField.svelte.d.ts

@@ -0,0 +1,35 @@
+export type TagsInputFieldProps = {
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string[], HTMLInputElement | undefined]>;
+    left?: Snippet<[string, string[], HTMLInputElement | undefined]>;
+    right?: Snippet<[string, string[], HTMLInputElement | undefined]>;
+    bottom?: string;
+    descFirst?: boolean;
+    values?: string[];
+    min?: TagsInputFieldCountValidation;
+    max?: TagsInputFieldCountValidation;
+    constraints?: TagsInputFieldConstraint[];
+    validations?: TagsInputFieldValidation[];
+    status?: string;
+    style?: SVSStyle;
+    element?: HTMLInputElement;
+    deps?: TagsInputFieldDeps;
+};
+export type TagsInputFieldDeps = {
+    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
+} & TagsInputDeps;
+export type TagsInputFieldReqdProps = never;
+export type TagsInputFieldBindProps = "values" | "status" | "element";
+export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
+export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+export type TagsInputFieldCountValidation = {
+    value: number;
+    message: string;
+};
+import { type Snippet } from "svelte";
+import { type SVSStyle } from "./core";
+import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputDeps } from "./TagsInput.svelte";
+declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "status" | "element" | "values">;
+type TagsInputField = ReturnType<typeof TagsInputField>;
+export default TagsInputField;

package/_svseeds/ToggleGroupField.svelte

@@ -0,0 +1,134 @@
+<script module lang="ts">
+  export type ToggleGroupFieldProps = {
+    options: SvelteMap<string, string> | Map<string, string>,
+    label?: string,
+    extra?: string,
+    aux?: Snippet<[string, string[]]>, // Snippet<[status,values]>
+    left?: Snippet<[string, string[]]>, // Snippet<[status,values]>
+    right?: Snippet<[string, string[]]>, // Snippet<[status,values]>
+    bottom?: string,
+    descFirst?: boolean, // <false>
+    values?: string[], // bindable
+    multiple?: boolean, // <true>
+    validations?: ToggleGroupFieldValidation[],
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: SVSStyle,
+    deps?: ToggleGroupFieldDeps,
+    [key: string]: unknown | Snippet,
+  };
+  export type ToggleGroupFieldDeps = {
+    svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">,
+  };
+  export type ToggleGroupFieldReqdProps = "options";
+  export type ToggleGroupFieldBindProps = "values" | "status";
+  export type ToggleGroupFieldValidation = (values: string[]) => string;
+
+  const preset = "svs-toggle-group-field";
+
+  import { type Snippet, untrack } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type SvelteMap } from "svelte/reactivity";
+  import { type SVSStyle, STATE, AREA, elemId, fnClass, isNeutral } from "./core";
+  import ToggleGroup, { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_ToggleGroup.svelte";
+</script>
+
+<script lang="ts">
+  let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], status = $bindable(""), style, attributes, elements = $bindable([]), deps, ...rest }: ToggleGroupFieldProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(preset, style);
+  const idLabel = elemId.get(label?.trim());
+  const idDesc = elemId.get(bottom?.trim());
+  const idErr = idDesc ?? elemId.id;
+  let message = $state(bottom);
+  let element: HTMLInputElement | undefined = $state();
+
+  // *** Initialize Deps *** //
+  const svsToggleGroup = {
+    ...Object.fromEntries(Object.entries(rest).filter(([_, v]) => typeof v === "function")),
+    ariaDescId: idDesc,
+    style: deps?.svsToggleGroup?.style as SVSStyle ?? `${preset} svs-toggle-group`,
+    action: deps?.svsToggleGroup?.action as Action,
+  };
+
+  // *** Status *** //
+  let neutral = $state(isNeutral(status) ? status : STATE.DEFAULT);
+  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
+  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  function shift(oninvalid?: boolean) {
+    const vmsg = element?.validationMessage ?? "";
+    status = oninvalid && vmsg ? STATE.INACTIVE : (!values.length || vmsg) ? neutral : STATE.ACTIVE;
+    message = status === STATE.INACTIVE ? vmsg ? vmsg : bottom : bottom;
+  }
+  function verify() {
+    if (!element) return;
+    for (const v of validations) {
+      const msg = v(values);
+      if (msg) return element.setCustomValidity(msg);
+    }
+    element.setCustomValidity("");
+  }
+
+  // *** Bind Handlers *** //
+  $effect.pre(() => {
+    values;
+    untrack(() => validate());
+  });
+  function validate() {
+    verify();
+    shift();
+  }
+
+  // *** Event Handlers *** //
+  function oninvalid(ev: Event) {
+    ev.preventDefault();
+    shift(true)
+  }
+  $effect(() => untrack(() => verify()));
+</script>
+
+<!---------------------------------------->
+
+{#if options.size}
+  <div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+    {#if aux}
+      <div class={cls(AREA.TOP, status)}>
+        {@render lbl()}
+        <span class={cls(AREA.AUX, status)}>{@render aux(status, values)}</span>
+      </div>
+    {:else}
+      {@render lbl()}
+    {/if}
+    {@render desc(descFirst)}
+    <div class={cls(AREA.MIDDLE, status)}>
+      {@render side(AREA.LEFT, left)}
+      <input bind:this={element} style="display: none;" aria-hidden="true" {oninvalid} />
+      <ToggleGroup bind:values bind:ariaErrMsgId={idMsg} bind:status={neutral} {options} {multiple} {...svsToggleGroup} />
+      {@render side(AREA.RIGHT, right)}
+    </div>
+    {@render desc(!descFirst)}
+  </div>
+{/if}
+
+{#snippet lbl()}
+  {#if label?.trim()}
+    <span class={cls(AREA.LABEL, status)} id={idLabel}>
+      {label}
+      {#if extra?.trim()}
+        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+      {/if}
+    </span>
+  {/if}
+{/snippet}
+{#snippet side(area: string, body?: Snippet<[string, string[]]>)}
+  {#if body}
+    <span class={cls(area, status)}>{@render body(status, values)}</span>
+  {/if}
+{/snippet}
+{#snippet desc(show: boolean)}
+  {#if show && message?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+  {/if}
+{/snippet}

package/_svseeds/ToggleGroupField.svelte.d.ts

@@ -0,0 +1,30 @@
+export type ToggleGroupFieldProps = {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string[]]>;
+    left?: Snippet<[string, string[]]>;
+    right?: Snippet<[string, string[]]>;
+    bottom?: string;
+    descFirst?: boolean;
+    values?: string[];
+    multiple?: boolean;
+    validations?: ToggleGroupFieldValidation[];
+    status?: string;
+    style?: SVSStyle;
+    deps?: ToggleGroupFieldDeps;
+    [key: string]: unknown | Snippet;
+};
+export type ToggleGroupFieldDeps = {
+    svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
+};
+export type ToggleGroupFieldReqdProps = "options";
+export type ToggleGroupFieldBindProps = "values" | "status";
+export type ToggleGroupFieldValidation = (values: string[]) => string;
+import { type Snippet } from "svelte";
+import { type SvelteMap } from "svelte/reactivity";
+import { type SVSStyle } from "./core";
+import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_ToggleGroup.svelte";
+declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "elements" | "status" | "values">;
+type ToggleGroupField = ReturnType<typeof ToggleGroupField>;
+export default ToggleGroupField;