svseeds 0.4.6 → 0.4.8

package/_svseeds/ToggleGroupField.svelte

@@ -1,29 +1,29 @@
 <!--
   @component
-  default value: `<value>`
+  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]>
+    aux?: Snippet<[string[], string]>; // Snippet<[values,variant]>
+    left?: Snippet<[string[], string]>; // Snippet<[values,variant]>
+    right?: Snippet<[string[], string]>; // Snippet<[values,variant]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     values?: string[]; // bindable
-    multiple?: boolean; // <true>
+    multiple?: boolean; // (true)
     validations?: ToggleGroupFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     name?: string;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
   }
   interface ToggleGroupFieldDeps {
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
   }
-  type ToggleGroupFieldValidation = (values: string[]) => string;
+  type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
   ```
 -->
 <script module lang="ts">
@@ -31,17 +31,17 @@
     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]>
+    aux?: Snippet<[string[], string]>; // Snippet<[values,variant]>
+    left?: Snippet<[string[], string]>; // Snippet<[values,variant]>
+    right?: Snippet<[string[], string]>; // Snippet<[values,variant]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     values?: string[]; // bindable
-    multiple?: boolean; // <true>
+    multiple?: boolean; // (true)
     validations?: ToggleGroupFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     name?: string;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
   }
@@ -49,24 +49,24 @@
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
   }
   export type ToggleGroupFieldReqdProps = "options";
-  export type ToggleGroupFieldBindProps = "values" | "status";
-  export type ToggleGroupFieldValidation = (values: string[]) => string;
+  export type ToggleGroupFieldBindProps = "values" | "variant";
+  export type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
 
   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, PARTS, elemId, fnClass, isNeutral } from "./core";
+  import { type SVSClass, VARIANT, PARTS, 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, name, deps, ...rest }: ToggleGroupFieldProps = $props();
+  let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], name, styling, variant = $bindable(""), deps, ...rest }: ToggleGroupFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const idLabel = elemId.get(label?.trim());
   const idDesc = elemId.get(bottom?.trim());
   const idErr = idDesc ?? elemId.id;
@@ -77,19 +77,19 @@
   const svsToggleGroup = {
     ...Object.fromEntries(Object.entries(rest).filter(([_, v]) => typeof v === "function")),
     ariaDescId: idDesc,
-    style: deps?.svsToggleGroup?.style as SVSStyle ?? `${preset} svs-toggle-group`,
+    styling: deps?.svsToggleGroup?.styling as SVSClass ?? `${preset} svs-toggle-group`,
     action: deps?.svsToggleGroup?.action as Action,
   };
 
   // *** Status *** //
-  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);
+  let neutral = $state(isNeutral(variant) ? variant : VARIANT.NEUTRAL);
+  $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
+  let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");
+  let idMsg = $derived(variant === VARIANT.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;
+    variant = oninvalid && vmsg ? VARIANT.INACTIVE : (!values.length || vmsg) ? neutral : VARIANT.ACTIVE;
+    message = variant === VARIANT.INACTIVE ? vmsg ? vmsg : bottom : bottom;
   }
   function verify() {
     if (!element) return;
@@ -121,20 +121,20 @@
 <!---------------------------------------->
 
 {#if options.size}
-  <div class={cls(PARTS.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  <div class={cls(PARTS.WHOLE, variant)} role="group" aria-labelledby={idLabel}>
     {#if aux}
-      <div class={cls(PARTS.TOP, status)}>
+      <div class={cls(PARTS.TOP, variant)}>
         {@render lbl()}
-        <span class={cls(PARTS.AUX, status)}>{@render aux(status, values)}</span>
+        <span class={cls(PARTS.AUX, variant)}>{@render aux(values, variant)}</span>
       </div>
     {:else}
       {@render lbl()}
     {/if}
     {@render desc(descFirst)}
-    <div class={cls(PARTS.MIDDLE, status)}>
+    <div class={cls(PARTS.MIDDLE, variant)}>
       {@render side(PARTS.LEFT, left)}
       {@render fnForm()}
-      <ToggleGroup bind:values bind:ariaErrMsgId={idMsg} bind:status={neutral} {options} {multiple} {...svsToggleGroup} />
+      <ToggleGroup bind:values bind:ariaErrMsgId={idMsg} bind:variant={neutral} {options} {multiple} {...svsToggleGroup} />
       {@render side(PARTS.RIGHT, right)}
     </div>
     {@render desc(!descFirst)}
@@ -143,22 +143,22 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <span class={cls(PARTS.LABEL, status)} id={idLabel}>
+    <span class={cls(PARTS.LABEL, variant)} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, variant)}>{extra}</span>
       {/if}
     </span>
   {/if}
 {/snippet}
-{#snippet side(area: string, body?: Snippet<[string, string[]]>)}
+{#snippet side(area: string, body?: Snippet<[string[], string]>)}
   {#if body}
-    <span class={cls(area, status)}>{@render body(status, values)}</span>
+    <span class={cls(area, variant)}>{@render body(values, variant)}</span>
   {/if}
 {/snippet}
 {#snippet desc(show: boolean)}
   {#if show && message?.trim()}
-    <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}
 {#snippet fnForm()}

package/_svseeds/ToggleGroupField.svelte.d.ts

@@ -2,17 +2,17 @@ export interface ToggleGroupFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[]]>;
-    left?: Snippet<[string, string[]]>;
-    right?: Snippet<[string, 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;
     name?: string;
+    styling?: SVSClass;
+    variant?: string;
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
 }
@@ -20,39 +20,39 @@ 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;
+export type ToggleGroupFieldBindProps = "values" | "variant";
+export type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
 import { type Snippet } from "svelte";
 import { type SvelteMap } from "svelte/reactivity";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_ToggleGroup.svelte";
 /**
- * default value: `<value>`
+ * 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]>
+ *   aux?: Snippet<[string[], string]>; // Snippet<[values,variant]>
+ *   left?: Snippet<[string[], string]>; // Snippet<[values,variant]>
+ *   right?: Snippet<[string[], string]>; // Snippet<[values,variant]>
  *   bottom?: string;
- *   descFirst?: boolean; // <false>
+ *   descFirst?: boolean; // (false)
  *   values?: string[]; // bindable
- *   multiple?: boolean; // <true>
+ *   multiple?: boolean; // (true)
  *   validations?: ToggleGroupFieldValidation[];
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
  *   name?: string;
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: ToggleGroupFieldDeps;
  *   [key: string]: unknown | Snippet;
  * }
  * interface ToggleGroupFieldDeps {
  *   svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
  * }
- * type ToggleGroupFieldValidation = (values: string[]) => string;
+ * type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
  * ```
  */
-declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "status" | "values">;
+declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "variant" | "values">;
 type ToggleGroupField = ReturnType<typeof ToggleGroupField>;
 export default ToggleGroupField;

package/_svseeds/_Button.svelte

@@ -1,52 +1,53 @@
 <!--
   @component
-  default value: `<value>`
+  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">
+    children: Snippet<[string]>; // Snippet<[variant]>
+    left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[variant,element]>
+    right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[variant,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
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <script module lang="ts">
   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">
+    children: Snippet<[string]>; // Snippet<[variant]>
+    left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[variant,element]>
+    right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[variant,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
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ButtonReqdProps = "children";
-  export type ButtonBindProps = "form" | "status" | "element";
+  export type ButtonBindProps = "form" | "variant" | "element";
 
   const preset = "svs-button";
 
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, left, right, type = "button", onclick, form = $bindable(), status = $bindable(STATE.NEUTRAL), style, attributes, action, element = $bindable()}: ButtonProps = $props();
+  let { children, left, right, type = "button", onclick, form = $bindable(), attributes, action, element = $bindable(), styling, variant = $bindable("") }: ButtonProps = $props();
 
   // *** Initialize *** //
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const click = onclick ?? attributes?.["onclick"];
   const attrs = omit(attributes, "class", "type", "onclick");
 
@@ -59,24 +60,24 @@
 <!---------------------------------------->
 
 {#if action}
-  <button bind:this={element} class={cls(PARTS.WHOLE, status)} {type} {onclick} {...attrs} use:action>
+  <button bind:this={element} class={cls(PARTS.WHOLE, variant)} {type} {onclick} {...attrs} use:action>
     {@render whole()}
   </button>
 {:else}
-  <button bind:this={element} class={cls(PARTS.WHOLE, status)} {type} {onclick} {...attrs}>
+  <button bind:this={element} class={cls(PARTS.WHOLE, variant)} {type} {onclick} {...attrs}>
     {@render whole()}
   </button>
 {/if}
 
 {#snippet side(area: string, body?: Snippet<[string, HTMLButtonElement | undefined]>)}
   {#if body}
-    <span class={cls(area, status)}>{@render body(status, element)}</span>
+    <span class={cls(area, variant)}>{@render body(variant, element)}</span>
   {/if}
 {/snippet}
 {#snippet whole()}
   {@render side(PARTS.LEFT, left)}
-  <span class={cls(PARTS.MAIN, status)}>
-    {@render children()}
+  <span class={cls(PARTS.MAIN, variant)}>
+    {@render children(variant)}
   </span>
   {@render side(PARTS.RIGHT, right)}
 {/snippet}

package/_svseeds/_Button.svelte.d.ts

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

package/_svseeds/_CheckField.svelte

@@ -1,24 +1,24 @@
 <!--
   @component
-  default value: `<value>`
+  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]>
+    aux?: Snippet<[string[], string, HTMLInputElement[]]>; // Snippet<[values,variant,elements]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     values?: string[]; // bindable
-    multiple?: boolean; // <true>
+    multiple?: boolean; // (true)
     validations?: CheckFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     elements?: HTMLInputElement[]; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
-  type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
+  type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
   ```
 -->
 <script module lang="ts">
@@ -26,21 +26,21 @@
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement[]]>; // Snippet<[status,values,elements]>
+    aux?: Snippet<[string[], string, HTMLInputElement[]]>; // Snippet<[values,variant,elements]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     values?: string[]; // bindable
-    multiple?: boolean; // <true>
+    multiple?: boolean; // (true)
     validations?: CheckFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     elements?: HTMLInputElement[]; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type CheckFieldReqdProps = "options";
-  export type CheckFieldBindProps = "values" | "status" | "elements";
-  export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
+  export type CheckFieldBindProps = "values" | "variant" | "elements";
+  export type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
 
   const preset = "svs-check-field";
 
@@ -48,15 +48,15 @@
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
+  import { type SVSClass, VARIANT, 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();
+  let { options, label, extra, aux, bottom, values = $bindable([]), multiple = true, descFirst = false, validations = [], attributes, action, elements = $bindable([]), styling, variant = $bindable("") }: CheckFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const type = multiple ? "checkbox" : "radio";
   const name = attributes?.["name"] ? attributes?.["name"] : elemId.id;
   const idLabel = elemId.get(label?.trim());
@@ -67,15 +67,15 @@
   let message = $state(bottom);
 
   // *** Status *** //
-  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);
-  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  let neutral = $state(isNeutral(variant) ? variant : VARIANT.NEUTRAL);
+  $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
+  let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");
+  let invalid = $derived(variant === VARIANT.INACTIVE ? true : undefined);
+  let idMsg = $derived(variant === VARIANT.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;
+    variant = oninvalid && vmsg ? VARIANT.INACTIVE : (!values.length || vmsg) ? neutral : VARIANT.ACTIVE;
+    message = variant === VARIANT.INACTIVE ? vmsg ? vmsg : bottom : bottom;
   }
   function verify() {
     if (!elements[0]) return;
@@ -113,11 +113,11 @@
 <!---------------------------------------->
 
 {#if opts.length}
-  <div class={cls(PARTS.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+  <div class={cls(PARTS.WHOLE, variant)} role="group" aria-labelledby={idLabel}>
     {#if aux}
-      <div class={cls(PARTS.TOP, status)}>
+      <div class={cls(PARTS.TOP, variant)}>
         {@render lbl()}
-        <span class={cls(PARTS.AUX, status)}>{@render aux(status, values, elements)}</span>
+        <span class={cls(PARTS.AUX, variant)}>{@render aux(values, variant, elements)}</span>
       </div>
     {:else}
       {@render lbl()}
@@ -130,18 +130,18 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <span class={cls(PARTS.LABEL, status)} id={idLabel}>
+    <span class={cls(PARTS.LABEL, variant)} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, variant)}>{extra}</span>
       {/if}
     </span>
   {/if}
 {/snippet}
 {#snippet main()}
-  <div class={cls(PARTS.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? idMsg : undefined}>
+  <div class={cls(PARTS.MIDDLE, variant)} 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}
+      {@const stat = checked ? VARIANT.ACTIVE : neutral}
       <label class={cls(PARTS.MAIN, stat)}>
         {#if 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 />
@@ -155,6 +155,6 @@
 {/snippet}
 {#snippet desc(show: boolean)}
   {#if show && message?.trim()}
-    <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/_CheckField.svelte.d.ts

@@ -2,48 +2,48 @@ export interface CheckFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement[]]>;
+    aux?: Snippet<[string[], string, HTMLInputElement[]]>;
     bottom?: string;
     descFirst?: boolean;
     values?: string[];
     multiple?: boolean;
     validations?: CheckFieldValidation[];
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     elements?: HTMLInputElement[];
+    styling?: SVSClass;
+    variant?: string;
 }
 export type CheckFieldReqdProps = "options";
-export type CheckFieldBindProps = "values" | "status" | "elements";
-export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
+export type CheckFieldBindProps = "values" | "variant" | "elements";
+export type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
- * default value: `<value>`
+ * 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]>
+ *   aux?: Snippet<[string[], string, HTMLInputElement[]]>; // Snippet<[values,variant,elements]>
  *   bottom?: string;
- *   descFirst?: boolean; // <false>
+ *   descFirst?: boolean; // (false)
  *   values?: string[]; // bindable
- *   multiple?: boolean; // <true>
+ *   multiple?: boolean; // (true)
  *   validations?: CheckFieldValidation[];
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   elements?: HTMLInputElement[]; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
- * type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
+ * type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
  * ```
  */
-declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "elements" | "status" | "values">;
+declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "variant" | "elements" | "values">;
 type CheckField = ReturnType<typeof CheckField>;
 export default CheckField;