svseeds 0.4.7 → 0.4.8

package/_svseeds/Accordion.svelte

@@ -5,10 +5,10 @@
   interface AccordionProps {
     labels?: string[];
     current?: number; // bindable (-1)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: AccordionDeps;
-    [key: string]: unknown | Snippet; // contents of each disclosure
+    [key: string]: unknown | Snippet; // labels or contents of each disclosure
   }
   interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
@@ -19,16 +19,16 @@
   export interface AccordionProps {
     labels?: string[];
     current?: number; // bindable (-1)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: AccordionDeps;
-    [key: string]: unknown | Snippet; // contents of each disclosure
+    [key: string]: unknown | Snippet; // labels or contents of each disclosure
   }
   export interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
   }
   export type AccordionReqdProps = never;
-  export type AccordionBindProps = "current" | "status";
+  export type AccordionBindProps = "current" | "variant";
 
   type NamedId = { id: string, name: string };
   const preset = "svs-accordion";
@@ -45,16 +45,16 @@
   }
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, omit } from "./core";
   import Disclosure, { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 </script>
 
 <script lang="ts">
-  let { labels = [], current = $bindable(-1), status = $bindable(""), style, deps, ...rest }: AccordionProps = $props();
+  let { labels = [], current = $bindable(-1), styling, variant = $bindable(""), deps, ...rest }: AccordionProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const isStrLabel = labels.length > 0;
   const lbls = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
   const panels = getSnippetNames(rolePanel, rest);
@@ -66,8 +66,8 @@
 
   // *** Initialize Deps *** //
   const svsDisclosure = {
-    ...omit(deps?.svsDisclosure, "attributes", "style"),
-    style: deps?.svsDisclosure?.style ?? `${preset} svs-disclosure`,
+    ...omit(deps?.svsDisclosure, "attributes", "styling"),
+    styling: deps?.svsDisclosure?.styling ?? `${preset} svs-disclosure`,
   };
 
   // *** Bind Handlers *** //
@@ -101,7 +101,7 @@
 <!---------------------------------------->
 
 {#if isValidAccordion}
-  <div class={cls(PARTS.WHOLE, status)} role="group">
+  <div class={cls(PARTS.WHOLE, variant)} role="group">
     {#each lbls as { id, name }, i (id)}
       {@const ontoggle = exclusiveToggle(i)}
       <Disclosure bind:open={opens[i]} bind:element={elems[i]} label={isStrLabel ? name : (rest[name] as Snippet)} attributes={{...deps?.svsDisclosure?.attributes, ontoggle}} {...svsDisclosure}>

package/_svseeds/Accordion.svelte.d.ts

@@ -1,8 +1,8 @@
 export interface AccordionProps {
     labels?: string[];
     current?: number;
-    status?: string;
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;
     deps?: AccordionDeps;
     [key: string]: unknown | Snippet;
 }
@@ -10,9 +10,9 @@ export interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
 }
 export type AccordionReqdProps = never;
-export type AccordionBindProps = "current" | "status";
+export type AccordionBindProps = "current" | "variant";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 /**
  * default value: `(value)`
@@ -20,16 +20,16 @@ import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProp
  * interface AccordionProps {
  *   labels?: string[];
  *   current?: number; // bindable (-1)
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: AccordionDeps;
- *   [key: string]: unknown | Snippet; // contents of each disclosure
+ *   [key: string]: unknown | Snippet; // labels or contents of each disclosure
  * }
  * interface AccordionDeps {
  *   svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
  * }
  * ```
  */
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "status" | "current">;
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "variant" | "current">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/_svseeds/DarkToggle.svelte

@@ -4,8 +4,8 @@
   ```ts
   interface DarkToggleProps {
     dark?: boolean; // bindable (prefers-color-scheme)
-    status?: string; // bindable (STATE.NEUTRAL)
     element?: HTMLButtonElement; // bindable
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: DarkToggleDeps;
   }
   interface DarkToggleDeps {
@@ -16,15 +16,15 @@
 <script module lang="ts">
   export interface DarkToggleProps {
     dark?: boolean; // bindable (prefers-color-scheme)
-    status?: string; // bindable (STATE.NEUTRAL)
     element?: HTMLButtonElement; // bindable
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: DarkToggleDeps;
   }
   export interface DarkToggleDeps {
     svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
   }
   export type DarkToggleReqdProps = never;
-  export type DarkToggleBindProps = "dark" | "status" | "element";
+  export type DarkToggleBindProps = "dark" | "variant" | "element";
 
   export const THEME = { LIGHT: "light", DARK: "dark" } as const;
   export function setThemeToRoot(theme?: string) {
@@ -137,22 +137,22 @@
   }
   const theme = new Theme();
 
-  import { STATE, omit } from "./core";
+  import { VARIANT, omit } from "./core";
   import Toggle, { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
 </script>
 
 <script lang="ts">
-  let { dark = $bindable(), status = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
+  let { dark = $bindable(), variant = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
+  if (!variant) variant = VARIANT.NEUTRAL;
   if (dark === undefined) dark = theme.dark;
   theme.dark = dark;
 
   // *** Initialize Deps *** //
   const svsToggle = {
-    ...omit(deps?.svsToggle, "main", "style", "attributes"),
-    style: deps?.svsToggle?.style ?? `${preset} svs-toggle`,
+    ...omit(deps?.svsToggle, "children", "styling", "attributes"),
+    styling: deps?.svsToggle?.styling ?? `${preset} svs-toggle`,
     ariaLabel,
     attributes: {
       ...deps?.svsToggle?.attributes,
@@ -165,10 +165,10 @@
 
 <!---------------------------------------->
 
-<Toggle bind:value={dark} bind:status bind:element {...svsToggle}>
-  {#snippet main(status: string, value: boolean, element: HTMLButtonElement | undefined)}
-    {#if deps?.svsToggle?.main}
-      {@render deps.svsToggle.main(status, value, element)}
+<Toggle bind:value={dark} bind:variant bind:element {...svsToggle}>
+  {#snippet children(value: boolean, variant: string, element: HTMLButtonElement | undefined)}
+    {#if deps?.svsToggle?.children}
+      {@render deps.svsToggle.children(value, variant, element)}
     {:else}
       {#if value}
         {@render svgDark()}

package/_svseeds/DarkToggle.svelte.d.ts

@@ -1,14 +1,14 @@
 export interface DarkToggleProps {
     dark?: boolean;
-    status?: string;
     element?: HTMLButtonElement;
+    variant?: string;
     deps?: DarkToggleDeps;
 }
 export interface DarkToggleDeps {
     svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
 }
 export type DarkToggleReqdProps = never;
-export type DarkToggleBindProps = "dark" | "status" | "element";
+export type DarkToggleBindProps = "dark" | "variant" | "element";
 export declare const THEME: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
@@ -20,8 +20,8 @@ import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./
  * ```ts
  * interface DarkToggleProps {
  *   dark?: boolean; // bindable (prefers-color-scheme)
- *   status?: string; // bindable (STATE.NEUTRAL)
  *   element?: HTMLButtonElement; // bindable
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: DarkToggleDeps;
  * }
  * interface DarkToggleDeps {
@@ -29,6 +29,6 @@ import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./
  * }
  * ```
  */
-declare const DarkToggle: import("svelte").Component<DarkToggleProps, {}, "status" | "element" | "dark">;
+declare const DarkToggle: import("svelte").Component<DarkToggleProps, {}, "variant" | "element" | "dark">;
 type DarkToggle = ReturnType<typeof DarkToggle>;
 export default DarkToggle;

package/_svseeds/TagsInputField.svelte

@@ -5,9 +5,9 @@
   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]>
+    aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
     bottom?: string;
     descFirst?: boolean; // (false)
     values?: string[]; // bindable
@@ -15,9 +15,9 @@
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: TagsInputFieldDeps;
   }
   interface TagsInputFieldDeps extends TagsInputDeps {
@@ -35,9 +35,9 @@
   export 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]>
+    aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
     bottom?: string;
     descFirst?: boolean; // (false)
     values?: string[]; // bindable
@@ -45,16 +45,16 @@
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: TagsInputFieldDeps;
   }
   export interface TagsInputFieldDeps {
     svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps>;
   }
   export type TagsInputFieldReqdProps = never;
-  export type TagsInputFieldBindProps = "values" | "status" | "element";
+  export type TagsInputFieldBindProps = "values" | "variant" | "element";
   export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
   export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
   export type TagsInputFieldCountValidation = { value: number, message: string };
@@ -62,16 +62,16 @@
   const preset = "svs-tags-input-field";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
   import TagsInput, { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps } 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();
+  let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], element = $bindable(), styling, variant = $bindable(""), deps }: TagsInputFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   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());
@@ -83,9 +83,9 @@
 
   // *** Initialize Deps *** //
   const svsTagsInput = {
-    ...omit(deps?.svsTagsInput, "style", "attributes"),
+    ...omit(deps?.svsTagsInput, "styling", "attributes"),
     events: { onadd, onremove: deps?.svsTagsInput?.events?.onremove },
-    style: deps?.svsTagsInput?.style ?? `${preset} svs-tags-input`,
+    styling: deps?.svsTagsInput?.styling ?? `${preset} svs-tags-input`,
     attributes: {
       ...omit(deps?.svsTagsInput?.attributes, "id", "onchange", "oninvalid", "aria-describedby"),
       id,
@@ -96,19 +96,19 @@
   };
 
   // *** Status *** //
-  let neutral = 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 = 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 = false, msg?: string) {
     const vmsg = element?.validationMessage ?? "";
-    status = getStatus(oninvalid, vmsg, msg);
-    message = status === STATE.INACTIVE ? msg ? msg : vmsg ? vmsg : bottom : bottom;
+    variant = getStatus(oninvalid, vmsg, msg);
+    message = variant === VARIANT.INACTIVE ? msg ? msg : vmsg ? vmsg : bottom : bottom;
   }
   function getStatus(oninvalid: boolean, vmsg: string, msg?: string): string {
-    if (msg || (oninvalid && vmsg)) return STATE.INACTIVE;
+    if (msg || (oninvalid && vmsg)) return VARIANT.INACTIVE;
     if (!values.length || vmsg) return neutral;
-    return STATE.ACTIVE;
+    return VARIANT.ACTIVE;
   }
   function verify() {
     if (!element) return;
@@ -132,9 +132,9 @@
   // *** Event Handlers *** //
   function onadd(values: string[], value: string): void | boolean {
     if (deps?.svsTagsInput?.events?.onadd?.(values, value)) return true;
-    status = neutral;
+    variant = neutral;
     shift(false, check());
-    return status === STATE.INACTIVE;
+    return variant === VARIANT.INACTIVE;
   }
   function check(): string | undefined {
     if (!element) return;
@@ -145,7 +145,7 @@
   }
   function onchange(ev: Event) {
     deps?.svsTagsInput?.attributes?.onchange?.(ev as any);
-    if (!isNeutral(status)) shift();
+    if (!isNeutral(variant)) shift();
   }
   function oninvalid(ev: Event) {
     deps?.svsTagsInput?.attributes?.oninvalid?.(ev as any);
@@ -157,19 +157,19 @@
 
 <!---------------------------------------->
 
-<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, element)}</span>
+      <span class={cls(PARTS.AUX, variant)}>{@render aux(values, variant, element)}</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)}
-    <TagsInput bind:values bind:value bind:status bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} />
+    <TagsInput bind:values bind:value bind:variant bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} />
     {@render side(PARTS.RIGHT, right)}
   </div>
   {@render desc(!descFirst)}
@@ -177,22 +177,21 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <label class={cls(PARTS.LABEL, status)} for={id} id={idLabel}>
+    <label class={cls(PARTS.LABEL, variant)} for={id} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, variant)}>{extra}</span>
       {/if}
     </label>
   {/if}
 {/snippet}
-{#snippet side(area: string, body?: Snippet<[string, string[], HTMLInputElement | undefined]>)}
+{#snippet side(area: string, body?: Snippet<[string[], string, HTMLInputElement | undefined]>)}
   {#if body}
-    <span class={cls(area, status)}>{@render body(status, values, element)}</span>
+    <span class={cls(area, variant)}>{@render body(values, variant, element)}</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}
-

package/_svseeds/TagsInputField.svelte.d.ts

@@ -1,9 +1,9 @@
 export interface TagsInputFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement | undefined]>;
-    left?: Snippet<[string, string[], HTMLInputElement | undefined]>;
-    right?: Snippet<[string, string[], HTMLInputElement | undefined]>;
+    aux?: Snippet<[string[], string, HTMLInputElement | undefined]>;
+    left?: Snippet<[string[], string, HTMLInputElement | undefined]>;
+    right?: Snippet<[string[], string, HTMLInputElement | undefined]>;
     bottom?: string;
     descFirst?: boolean;
     values?: string[];
@@ -11,16 +11,16 @@ export interface TagsInputFieldProps {
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
-    status?: string;
-    style?: SVSStyle;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
     deps?: TagsInputFieldDeps;
 }
 export interface TagsInputFieldDeps {
     svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps>;
 }
 export type TagsInputFieldReqdProps = never;
-export type TagsInputFieldBindProps = "values" | "status" | "element";
+export type TagsInputFieldBindProps = "values" | "variant" | "element";
 export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
 export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
 export type TagsInputFieldCountValidation = {
@@ -28,7 +28,7 @@ export type TagsInputFieldCountValidation = {
     message: string;
 };
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps } from "./_TagsInput.svelte";
 /**
  * default value: `(value)`
@@ -36,9 +36,9 @@ import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps }
  * 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]>
+ *   aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+ *   left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+ *   right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
  *   bottom?: string;
  *   descFirst?: boolean; // (false)
  *   values?: string[]; // bindable
@@ -46,9 +46,9 @@ import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps }
  *   max?: TagsInputFieldCountValidation;
  *   constraints?: TagsInputFieldConstraint[];
  *   validations?: TagsInputFieldValidation[];
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: TagsInputFieldDeps;
  * }
  * interface TagsInputFieldDeps extends TagsInputDeps {
@@ -62,6 +62,6 @@ import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps }
  * };
  * ```
  */
-declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "status" | "element" | "values">;
+declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "variant" | "element" | "values">;
 type TagsInputField = ReturnType<typeof TagsInputField>;
 export default TagsInputField;

package/_svseeds/ToggleGroupField.svelte

@@ -6,17 +6,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)
     values?: string[]; // bindable
     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;
   }
@@ -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)
     values?: string[]; // bindable
     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,7 +49,7 @@
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
   }
   export type ToggleGroupFieldReqdProps = "options";
-  export type ToggleGroupFieldBindProps = "values" | "status";
+  export type ToggleGroupFieldBindProps = "values" | "variant";
   export type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
 
   const preset = "svs-toggle-group-field";
@@ -57,16 +57,16 @@
   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()}