svseeds 0.4.1 → 0.4.4

package/_svseeds/TagsInputField.svelte.d.ts

@@ -1,4 +1,4 @@
-export type TagsInputFieldProps = {
+export interface TagsInputFieldProps {
     label?: string;
     extra?: string;
     aux?: Snippet<[string, string[], HTMLInputElement | undefined]>;
@@ -15,10 +15,10 @@ export type TagsInputFieldProps = {
     style?: SVSStyle;
     element?: HTMLInputElement;
     deps?: TagsInputFieldDeps;
-};
-export type TagsInputFieldDeps = {
+}
+export interface TagsInputFieldDeps extends TagsInputDeps {
     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;
@@ -30,6 +30,38 @@ export type TagsInputFieldCountValidation = {
 import { type Snippet } from "svelte";
 import { type SVSStyle } from "./core";
 import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputDeps } from "./TagsInput.svelte";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface 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.NEUTRAL>
+ *   style?: SVSStyle;
+ *   element?: HTMLInputElement; // bindable
+ *   deps?: TagsInputFieldDeps;
+ * }
+ * interface TagsInputFieldDeps extends TagsInputDeps {
+ *   svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
+ * }
+ * type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
+ * type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+ * type TagsInputFieldCountValidation = {
+ *   value: number;
+ *   message: string;
+ * };
+ * ```
+ */
 declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "status" | "element" | "values">;
 type TagsInputField = ReturnType<typeof TagsInputField>;
 export default TagsInputField;

package/_svseeds/ToggleGroupField.svelte

@@ -1,24 +1,51 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface 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.NEUTRAL>
+    style?: SVSStyle;
+    deps?: ToggleGroupFieldDeps;
+    [key: string]: unknown | Snippet;
+  }
+  interface ToggleGroupFieldDeps {
+    svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
+  }
+  type ToggleGroupFieldValidation = (values: string[]) => string;
+  ```
+-->
 <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 interface 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.NEUTRAL>
+    style?: SVSStyle;
+    deps?: ToggleGroupFieldDeps;
+    [key: string]: unknown | Snippet;
+  }
+  export interface ToggleGroupFieldDeps {
+    svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
+  }
   export type ToggleGroupFieldReqdProps = "options";
   export type ToggleGroupFieldBindProps = "values" | "status";
   export type ToggleGroupFieldValidation = (values: string[]) => string;
@@ -28,7 +55,7 @@
   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 { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral } from "./core";
   import ToggleGroup, { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_ToggleGroup.svelte";
 </script>
 
@@ -36,7 +63,7 @@
   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;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const idLabel = elemId.get(label?.trim());
   const idDesc = elemId.get(bottom?.trim());
@@ -53,7 +80,7 @@
   };
 
   // *** Status *** //
-  let neutral = $state(isNeutral(status) ? status : STATE.DEFAULT);
+  let neutral = $state(isNeutral(status) ? status : STATE.NEUTRAL);
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
   let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
   let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
@@ -92,21 +119,21 @@
 <!---------------------------------------->
 
 {#if options.size}
-  <div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  <div class={cls(PARTS.WHOLE, status)} role="group" aria-labelledby={idLabel}>
     {#if aux}
-      <div class={cls(AREA.TOP, status)}>
+      <div class={cls(PARTS.TOP, status)}>
         {@render lbl()}
-        <span class={cls(AREA.AUX, status)}>{@render aux(status, values)}</span>
+        <span class={cls(PARTS.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)}
+    <div class={cls(PARTS.MIDDLE, status)}>
+      {@render side(PARTS.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)}
+      {@render side(PARTS.RIGHT, right)}
     </div>
     {@render desc(!descFirst)}
   </div>
@@ -114,10 +141,10 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <span class={cls(AREA.LABEL, status)} id={idLabel}>
+    <span class={cls(PARTS.LABEL, status)} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
       {/if}
     </span>
   {/if}
@@ -129,6 +156,6 @@
 {/snippet}
 {#snippet desc(show: boolean)}
   {#if show && message?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/ToggleGroupField.svelte.d.ts

@@ -1,4 +1,4 @@
-export type ToggleGroupFieldProps = {
+export interface ToggleGroupFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
@@ -14,10 +14,10 @@ export type ToggleGroupFieldProps = {
     style?: SVSStyle;
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
-};
-export type ToggleGroupFieldDeps = {
+}
+export interface ToggleGroupFieldDeps {
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
-};
+}
 export type ToggleGroupFieldReqdProps = "options";
 export type ToggleGroupFieldBindProps = "values" | "status";
 export type ToggleGroupFieldValidation = (values: string[]) => string;
@@ -25,6 +25,32 @@ 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";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface 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.NEUTRAL>
+ *   style?: SVSStyle;
+ *   deps?: ToggleGroupFieldDeps;
+ *   [key: string]: unknown | Snippet;
+ * }
+ * interface ToggleGroupFieldDeps {
+ *   svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
+ * }
+ * type ToggleGroupFieldValidation = (values: string[]) => string;
+ * ```
+ */
 declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "elements" | "status" | "values">;
 type ToggleGroupField = ReturnType<typeof ToggleGroupField>;
 export default ToggleGroupField;

package/_svseeds/_Badge.svelte

@@ -1,14 +1,30 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface BadgeProps {
+    children: Snippet;
+    left?: Snippet<[string]>; // Snippet<[status]>
+    right?: Snippet<[string]>; // Snippet<[status]>
+    type?: "plain" | "link" | "left" | "right"; // <"plain">
+    href?: string;
+    onclick?: MouseEventHandler<HTMLButtonElement> | null;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+  }
+  ```
+-->
 <script module lang="ts">
-  export type BadgeProps = {
-    children: Snippet,
-    left?: Snippet<[string]>, // Snippet<[status]>
-    right?: Snippet<[string]>, // Snippet<[status]>
-    type?: "plain" | "link" | "left" | "right", // <"plain">
-    href?: string,
-    onclick?: MouseEventHandler<HTMLButtonElement> | null,
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-  };
+  export interface BadgeProps {
+    children: Snippet;
+    left?: Snippet<[string]>; // Snippet<[status]>
+    right?: Snippet<[string]>; // Snippet<[status]>
+    type?: "plain" | "link" | "left" | "right"; // <"plain">
+    href?: string;
+    onclick?: MouseEventHandler<HTMLButtonElement> | null;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+  }
   export type BadgeReqdProps = "children";
   export type BadgeBindProps = "status";
 
@@ -16,25 +32,25 @@
 
   import { type Snippet } from "svelte";
   import { type MouseEventHandler } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
 </script>
 
 <script lang="ts">
   let { children, left, right, type = "plain", href = "", onclick, status = $bindable(""), style }: BadgeProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
 </script>
 
 <!---------------------------------------->
 
 {#if type === "link"}
-  <a class={cls(AREA.WHOLE, status)} {href}>
+  <a class={cls(PARTS.WHOLE, status)} {href}>
     {@render whole()}
   </a>
 {:else}
-  <span class={cls(AREA.WHOLE, status)}>
+  <span class={cls(PARTS.WHOLE, status)}>
     {@render whole()}
   </span>
 {/if}
@@ -49,9 +65,9 @@
   {/if}
 {/snippet}
 {#snippet whole()}
-  {@render side(AREA.LEFT, type === "left", left)}
-  <span class={cls(AREA.MAIN, status)}>
+  {@render side(PARTS.LEFT, type === "left", left)}
+  <span class={cls(PARTS.MAIN, status)}>
     {@render children()}
   </span>
-  {@render side(AREA.RIGHT, type === "right", right)}
+  {@render side(PARTS.RIGHT, type === "right", right)}
 {/snippet}

package/_svseeds/_Badge.svelte.d.ts

@@ -1,4 +1,4 @@
-export type BadgeProps = {
+export interface BadgeProps {
     children: Snippet;
     left?: Snippet<[string]>;
     right?: Snippet<[string]>;
@@ -7,12 +7,27 @@ export type BadgeProps = {
     onclick?: MouseEventHandler<HTMLButtonElement> | null;
     status?: string;
     style?: SVSStyle;
-};
+}
 export type BadgeReqdProps = "children";
 export type BadgeBindProps = "status";
 import { type Snippet } from "svelte";
 import { type MouseEventHandler } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface BadgeProps {
+ *   children: Snippet;
+ *   left?: Snippet<[string]>; // Snippet<[status]>
+ *   right?: Snippet<[string]>; // Snippet<[status]>
+ *   type?: "plain" | "link" | "left" | "right"; // <"plain">
+ *   href?: string;
+ *   onclick?: MouseEventHandler<HTMLButtonElement> | null;
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ * }
+ * ```
+ */
 declare const Badge: import("svelte").Component<BadgeProps, {}, "status">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/_svseeds/_Button.svelte

@@ -1,17 +1,36 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ButtonProps {
+    children: Snippet;
+    left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+    right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+    type?: "submit" | "reset" | "button"; // <"button">
+    onclick?: MouseEventHandler<HTMLButtonElement> | null;
+    form?: HTMLFormElement; // bindable
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLButtonAttributes;
+    action?: Action;
+    element?: HTMLButtonElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type ButtonProps = {
-    children: Snippet,
-    left?: Snippet<[string, HTMLButtonElement | undefined]>, // Snippet<[status,element]>
-    right?: Snippet<[string, HTMLButtonElement | undefined]>, // Snippet<[status,element]>
-    type?: "submit" | "reset" | "button", // <"button">
-    onclick?: MouseEventHandler<HTMLButtonElement> | null,
-    form?: HTMLFormElement, // bindable
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    attributes?: HTMLButtonAttributes,
-    action?: Action,
-    element?: HTMLButtonElement, // bindable
-  };
+  export interface ButtonProps {
+    children: Snippet;
+    left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+    right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+    type?: "submit" | "reset" | "button"; // <"button">
+    onclick?: MouseEventHandler<HTMLButtonElement> | null;
+    form?: HTMLFormElement; // bindable
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLButtonAttributes;
+    action?: Action;
+    element?: HTMLButtonElement; // bindable
+  }
   export type ButtonReqdProps = "children";
   export type ButtonBindProps = "form" | "status" | "element";
 
@@ -20,11 +39,11 @@
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, left, right, type = "button", onclick, form = $bindable(), status = $bindable(STATE.DEFAULT), style, attributes, action, element = $bindable()}: ButtonProps = $props();
+  let { children, left, right, type = "button", onclick, form = $bindable(), status = $bindable(STATE.NEUTRAL), style, attributes, action, element = $bindable()}: ButtonProps = $props();
 
   // *** Initialize *** //
   const cls = fnClass(preset, style);
@@ -40,11 +59,11 @@
 <!---------------------------------------->
 
 {#if action}
-  <button bind:this={element} class={cls(AREA.WHOLE, status)} {type} {onclick} {...attrs} use:action>
+  <button bind:this={element} class={cls(PARTS.WHOLE, status)} {type} {onclick} {...attrs} use:action>
     {@render whole()}
   </button>
 {:else}
-  <button bind:this={element} class={cls(AREA.WHOLE, status)} {type} {onclick} {...attrs}>
+  <button bind:this={element} class={cls(PARTS.WHOLE, status)} {type} {onclick} {...attrs}>
     {@render whole()}
   </button>
 {/if}
@@ -55,9 +74,9 @@
   {/if}
 {/snippet}
 {#snippet whole()}
-  {@render side(AREA.LEFT, left)}
-  <span class={cls(AREA.MAIN, status)}>
+  {@render side(PARTS.LEFT, left)}
+  <span class={cls(PARTS.MAIN, status)}>
     {@render children()}
   </span>
-  {@render side(AREA.RIGHT, right)}
+  {@render side(PARTS.RIGHT, right)}
 {/snippet}

package/_svseeds/_Button.svelte.d.ts

@@ -1,4 +1,4 @@
-export type ButtonProps = {
+export interface ButtonProps {
     children: Snippet;
     left?: Snippet<[string, HTMLButtonElement | undefined]>;
     right?: Snippet<[string, HTMLButtonElement | undefined]>;
@@ -10,13 +10,31 @@ export type ButtonProps = {
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement;
-};
+}
 export type ButtonReqdProps = "children";
 export type ButtonBindProps = "form" | "status" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface ButtonProps {
+ *   children: Snippet;
+ *   left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+ *   right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+ *   type?: "submit" | "reset" | "button"; // <"button">
+ *   onclick?: MouseEventHandler<HTMLButtonElement> | null;
+ *   form?: HTMLFormElement; // bindable
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLButtonAttributes;
+ *   action?: Action;
+ *   element?: HTMLButtonElement; // bindable
+ * }
+ * ```
+ */
 declare const Button: import("svelte").Component<ButtonProps, {}, "form" | "status" | "element">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/_svseeds/_CheckField.svelte

@@ -1,20 +1,43 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface CheckFieldProps {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string[], HTMLInputElement[]]>; // Snippet<[status,values,elements]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    values?: string[]; // bindable
+    multiple?: boolean; // <true>
+    validations?: CheckFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    elements?: HTMLInputElement[]; // bindable
+  }
+  type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
+  ```
+-->
 <script module lang="ts">
-  export type CheckFieldProps = {
-    options: SvelteMap<string, string> | Map<string, string>,
-    label?: string,
-    extra?: string,
-    aux?: Snippet<[string, string[], HTMLInputElement[]]>, // Snippet<[status,values,elements]>
-    bottom?: string,
-    descFirst?: boolean, // <false>
-    values?: string[], // bindable
-    multiple?: boolean, // <true>
-    validations?: CheckFieldValidation[],
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    attributes?: HTMLInputAttributes,
-    action?: Action,
-    elements?: HTMLInputElement[], // bindable
-  };
+  export interface CheckFieldProps {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string[], HTMLInputElement[]]>; // Snippet<[status,values,elements]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    values?: string[]; // bindable
+    multiple?: boolean; // <true>
+    validations?: CheckFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    elements?: HTMLInputElement[]; // bindable
+  }
   export type CheckFieldReqdProps = "options";
   export type CheckFieldBindProps = "values" | "status" | "elements";
   export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
@@ -25,14 +48,14 @@
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
 </script>
 
 <script lang="ts">
   let { options, label, extra, aux, bottom, values = $bindable([]), multiple = true, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, elements = $bindable([])}: CheckFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const type = multiple ? "checkbox" : "radio";
   const name = attributes?.["name"] ? attributes?.["name"] : elemId.id;
@@ -44,7 +67,7 @@
   let message = $state(bottom);
 
   // *** Status *** //
-  let neutral = $state(isNeutral(status) ? status : STATE.DEFAULT);
+  let neutral = $state(isNeutral(status) ? status : STATE.NEUTRAL);
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
   let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
   let invalid = $derived(status === STATE.INACTIVE ? true : undefined);
@@ -84,16 +107,17 @@
     ev.preventDefault();
     shift(true);
   }
+  $effect(() => untrack(() => verify()));
 </script>
 
 <!---------------------------------------->
 
 {#if opts.length}
-  <div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  <div class={cls(PARTS.WHOLE, status)} role="group" aria-labelledby={idLabel}>
     {#if aux}
-      <div class={cls(AREA.TOP, status)}>
+      <div class={cls(PARTS.TOP, status)}>
         {@render lbl()}
-        <span class={cls(AREA.AUX, status)}>{@render aux(status, values, elements)}</span>
+        <span class={cls(PARTS.AUX, status)}>{@render aux(status, values, elements)}</span>
       </div>
     {:else}
       {@render lbl()}
@@ -106,31 +130,31 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <span class={cls(AREA.LABEL, status)} id={idLabel}>
+    <span class={cls(PARTS.LABEL, status)} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
       {/if}
     </span>
   {/if}
 {/snippet}
 {#snippet main()}
-  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? idMsg : undefined}>
+  <div class={cls(PARTS.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)}
       {@const stat = checked ? STATE.ACTIVE : neutral}
-      <label class={cls(AREA.MAIN, stat)}>
+      <label class={cls(PARTS.MAIN, stat)}>
         {#if 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 />
+          <input bind:this={elements[i]} class={cls(PARTS.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, stat)} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? idMsg : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} />
+          <input bind:this={elements[i]} class={cls(PARTS.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, stat)}>{text}</span>
+        <span class={cls(PARTS.RIGHT, stat)}>{text}</span>
       </label>
     {/each}
   </div>
 {/snippet}
 {#snippet desc(show: boolean)}
   {#if show && message?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}