svseeds 0.4.7 → 0.4.8

package/_svseeds/_Tabs.svelte.d.ts

@@ -2,14 +2,14 @@ export interface TabsProps {
     labels?: string[];
     current?: number;
     ariaOrientation?: "horizontal" | "vertical";
-    status?: string;
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;
     [key: string]: unknown | Snippet;
 }
 export type TabsReqdProps = never;
-export type TabsBindProps = "current" | "status";
+export type TabsBindProps = "current" | "variant";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
@@ -17,12 +17,12 @@ import { type SVSStyle } from "./core";
  *   labels?: string[];
  *   current?: number; // bindable (0)
  *   ariaOrientation?: "horizontal" | "vertical";
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
- *   [key: string]: unknown | Snippet;
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ *   [key: string]: unknown | Snippet; // labels or contents of each tab
  * }
  * ```
  */
-declare const Tabs: import("svelte").Component<TabsProps, {}, "status" | "current">;
+declare const Tabs: import("svelte").Component<TabsProps, {}, "variant" | "current">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/_svseeds/_TagsInput.svelte

@@ -3,8 +3,8 @@
   default value: `(value)`
   ```ts
   interface TagsInputProps {
-    label?: Snippet<[string, string]>; // Snippet<[value,status]>
-    aux?: Snippet<[string, string]>; // Snippet<[value,status]>
+    label?: Snippet<[string, string]>; // Snippet<[value,variant]>
+    aux?: Snippet<[string, string]>; // Snippet<[value,variant]>
     values?: string[]; // bindable
     value?: string; // bindable
     type?: "left" | "right"; // ("left")
@@ -13,11 +13,11 @@
     unique?: boolean; // (true)
     ariaErrMsgId?: string; // bindable
     events?: TagsInputEvents;
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   interface TagsInputEvents { // cancel if true
     onadd?: (values: string[], value: string) => void | boolean;
@@ -27,8 +27,8 @@
 -->
 <script module lang="ts">
   export interface TagsInputProps {
-    label?: Snippet<[string, string]>; // Snippet<[value,status]>
-    aux?: Snippet<[string, string]>; // Snippet<[value,status]>
+    label?: Snippet<[string, string]>; // Snippet<[value,variant]>
+    aux?: Snippet<[string, string]>; // Snippet<[value,variant]>
     values?: string[]; // bindable
     value?: string; // bindable
     type?: "left" | "right"; // ("left")
@@ -37,14 +37,14 @@
     unique?: boolean; // (true)
     ariaErrMsgId?: string; // bindable
     events?: TagsInputEvents;
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type TagsInputReqdProps = never;
-  export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
+  export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "variant" | "element";
   export interface TagsInputEvents { // cancel if true
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
@@ -58,15 +58,15 @@
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type HTMLInputAttributes } 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 { label, aux, values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, status = $bindable(""), style, attributes, action, element = $bindable() }: TagsInputProps = $props();
+  let { label, aux, values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, attributes, action, element = $bindable(), styling, variant = $bindable("") }: TagsInputProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "class", "type", "onkeydown");
   const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
   let invalid = $derived(ariaErrMsgId ? true : undefined);
@@ -96,29 +96,29 @@
 
 <!---------------------------------------->
 
-<div class={cls(PARTS.WHOLE, status)}>
+<div class={cls(PARTS.WHOLE, variant)}>
   {@render tags(type === "left")}
   {#if action}
-    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} use:action />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} use:action />
   {:else}
-    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} />
   {/if}
   {@render tags(type === "right")}
 </div>
 
 {#snippet tags(render: boolean)}
   {#if render}
-    <span class={cls(type, status)}>
+    <span class={cls(type, variant)}>
       {#each values as value, i}
-        <span class={cls(PARTS.LABEL, status)}>
+        <span class={cls(PARTS.LABEL, variant)}>
           {#if label}
-            {@render label(value, status)}
+            {@render label(value, variant)}
           {:else}
             {value}
           {/if}
-          <button class={cls(PARTS.AUX, status)} onclick={remove(i)}>
+          <button class={cls(PARTS.AUX, variant)} onclick={remove(i)}>
             {#if aux}
-              {@render aux(value, status)}
+              {@render aux(value, variant)}
             {:else}
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10"><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}

package/_svseeds/_TagsInput.svelte.d.ts

@@ -9,14 +9,14 @@ export interface TagsInputProps {
     unique?: boolean;
     ariaErrMsgId?: string;
     events?: TagsInputEvents;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type TagsInputReqdProps = never;
-export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
+export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "variant" | "element";
 export interface TagsInputEvents {
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
@@ -24,13 +24,13 @@ export interface TagsInputEvents {
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type HTMLInputAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface TagsInputProps {
- *   label?: Snippet<[string, string]>; // Snippet<[value,status]>
- *   aux?: Snippet<[string, string]>; // Snippet<[value,status]>
+ *   label?: Snippet<[string, string]>; // Snippet<[value,variant]>
+ *   aux?: Snippet<[string, string]>; // Snippet<[value,variant]>
  *   values?: string[]; // bindable
  *   value?: string; // bindable
  *   type?: "left" | "right"; // ("left")
@@ -39,11 +39,11 @@ import { type SVSStyle } from "./core";
  *   unique?: boolean; // (true)
  *   ariaErrMsgId?: string; // bindable
  *   events?: TagsInputEvents;
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * interface TagsInputEvents { // cancel if true
  *   onadd?: (values: string[], value: string) => void | boolean;
@@ -51,6 +51,6 @@ import { type SVSStyle } from "./core";
  * }
  * ```
  */
-declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value" | "status" | "element" | "values" | "ariaErrMsgId">;
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "variant" | "value" | "element" | "values" | "ariaErrMsgId">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

package/_svseeds/_TextField.svelte

@@ -5,17 +5,17 @@
   interface TextFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
-    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
+    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
+    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
     bottom?: string;
     descFirst?: boolean; // (false)
     value?: string; // bindable
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    styling?: SVSClass;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
     element?: HTMLInputElement | HTMLTextAreaElement; // bindable
@@ -27,23 +27,23 @@
   export interface TextFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
-    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
+    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
     bottom?: string;
     descFirst?: boolean; // (false)
     value?: string; // bindable
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
     element?: HTMLInputElement | HTMLTextAreaElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type TextFieldReqdProps = never;
-  export type TextFieldBindProps = "value" | "type" | "status" | "element";
+  export type TextFieldBindProps = "value" | "type" | "variant" | "element";
   export type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
 
   const preset = "svs-text-field";
@@ -52,15 +52,15 @@
   import { type Action } from "svelte/action";
   import { type SvelteSet } from "svelte/reactivity";
   import { type HTMLInputAttributes, type HTMLTextareaAttributes } 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 { label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), type = $bindable("text"), options, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: TextFieldProps = $props();
+  let { label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), type = $bindable("text"), options, validations = [], attributes, action, element = $bindable(), styling, variant = $bindable("") }: TextFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const id = attributes?.id ? attributes.id : elemId.get(label?.trim());
   const idLabel = elemId.get(label?.trim());
   const idDesc = elemId.get(bottom?.trim());
@@ -70,15 +70,15 @@
   let message = $state(bottom);
 
   // *** Status *** //
-  let neutral = 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 = 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 = element?.validationMessage ?? "";
-    status = !value && !oninvalid ? neutral : vmsg ? STATE.INACTIVE : STATE.ACTIVE;
-    message = status === STATE.INACTIVE ? vmsg ? vmsg : bottom : bottom;
+    variant = !value && !oninvalid ? neutral : vmsg ? VARIANT.INACTIVE : VARIANT.ACTIVE;
+    message = variant === VARIANT.INACTIVE ? vmsg ? vmsg : bottom : bottom;
   }
   function verify() {
     if (!element) return;
@@ -95,7 +95,7 @@
     untrack(() => validate(true));
   });
   function validate(effect?: boolean) {
-    if (effect && isNeutral(status)) return;
+    if (effect && isNeutral(variant)) return;
     verify();
     shift();
   }
@@ -115,17 +115,17 @@
 
 <!---------------------------------------->
 
-<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, value, element)}</span>
+      <span class={cls(PARTS.AUX, variant)}>{@render aux(value, 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)}
     {@render main()}
     {@render side(PARTS.RIGHT, right)}
@@ -135,21 +135,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 | HTMLTextAreaElement | undefined]>)}
   {#if body}
-    <span class={cls(area, status)}>{@render body(status, value, element)}</span>
+    <span class={cls(area, variant)}>{@render body(value, variant, element)}</span>
   {/if}
 {/snippet}
 {#snippet main()}
-  {@const c = cls(PARTS.MAIN, status)}
+  {@const c = cls(PARTS.MAIN, variant)}
   {#if type === "area"}
     {#if action}
       <textarea bind:value bind:this={element} class={c} {id} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action></textarea>
@@ -173,6 +173,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/_TextField.svelte.d.ts

@@ -10,37 +10,37 @@ export interface TextFieldProps {
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
     element?: HTMLInputElement | HTMLTextAreaElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type TextFieldReqdProps = never;
-export type TextFieldBindProps = "value" | "type" | "status" | "element";
+export type TextFieldBindProps = "value" | "type" | "variant" | "element";
 export type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface TextFieldProps {
  *   label?: string;
  *   extra?: string;
- *   aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
- *   left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
- *   right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+ *   aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
+ *   left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
+ *   right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
  *   bottom?: string;
  *   descFirst?: boolean; // (false)
  *   value?: string; // bindable
  *   type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
  *   options?: SvelteSet<string> | Set<string>;
  *   validations?: TextFieldValidation[];
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ *   styling?: SVSClass;
  *   attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement | HTMLTextAreaElement; // bindable
@@ -48,6 +48,6 @@ import { type SVSStyle } from "./core";
  * type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
  * ```
  */
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "value" | "status" | "element">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "variant" | "type" | "value" | "element">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/_svseeds/_Toggle.svelte

@@ -3,38 +3,36 @@
   default value: `(value)`
   ```ts
   interface ToggleProps {
-    main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
-    left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+    left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     value?: boolean; // bindable (false)
     type?: "button" | "switch"; // ("button")
     ariaLabel?: string;
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement; // bindable
-    children?: Snippet;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <script module lang="ts">
   export interface ToggleProps {
-    main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
-    left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+    left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     value?: boolean; // bindable (false)
     type?: "button" | "switch"; // ("button")
     ariaLabel?: string;
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement; // bindable
-    children?: Snippet;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ToggleReqdProps = never;
-  export type ToggleBindProps = "value" | "status" | "element";
+  export type ToggleBindProps = "value" | "variant" | "element";
 
   type ToggleTarget = { currentTarget: EventTarget & HTMLButtonElement };
   const preset = "svs-toggle";
@@ -42,25 +40,25 @@
   import { type Snippet, untrack } from "svelte";
   import { type Action } from "svelte/action";
   import { type HTMLButtonAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, fnClass, isNeutral, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, isNeutral, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { main, left, right, value = $bindable(false), type = "button", ariaLabel, status = $bindable(""), style, attributes, action, element = $bindable(), children }: ToggleProps = $props();
+  let { children, left, right, value = $bindable(false), type = "button", ariaLabel, attributes, action, element = $bindable(), styling, variant = $bindable("") }: ToggleProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "class", "type", "role", "aria-checked", "aria-pressed", "onclick");
-  let neutral = isNeutral(status) ? status : STATE.NEUTRAL;
+  let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
 
   // *** Bind Handlers *** //
-  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
   $effect.pre(() => { value;
     untrack(() => toggle());
   });
   function toggle() {
-    status = value ? STATE.ACTIVE : neutral;
+    variant = value ? VARIANT.ACTIVE : neutral;
   }
 
   // *** Event Handlers *** //
@@ -73,7 +71,7 @@
 <!---------------------------------------->
 
 {#if left || right}
-  <span class={cls(PARTS.WHOLE, status)} role="group">
+  <span class={cls(PARTS.WHOLE, variant)} role="group">
     {@render side(PARTS.LEFT, left)}
     {@render button(type)}
     {@render side(PARTS.RIGHT, right)}
@@ -82,20 +80,18 @@
   {@render button(type)}
 {/if}
 
-{#snippet side(area: string, body?: Snippet<[string, boolean, HTMLButtonElement | undefined]>)}
+{#snippet side(area: string, body?: Snippet<[boolean, string, HTMLButtonElement | undefined]>)}
   {#if body}
-    <span class={cls(area, status)}>{@render body(status, value, element)}</span>
+    <span class={cls(area, variant)}>{@render body(value, variant, element)}</span>
   {/if}
 {/snippet}
 {#snippet contents()}
-  {#if main}
-    {@render main(status, value, element)}
-  {:else if children}
-    {@render children()}
+  {#if children}
+    {@render children(value, variant, element)}
   {/if}
 {/snippet}
 {#snippet button(role: string)}
-  {@const c = cls(PARTS.MAIN, status)}
+  {@const c = cls(PARTS.MAIN, variant)}
   {#if role === "button"}
     {#if action}
       <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={ariaLabel} {onclick} {...attrs} use:action>
@@ -120,7 +116,7 @@
   {/if}
 {/snippet}
 {#snippet thumb()}
-  <span class={cls(PARTS.AUX, status)} style="position: absolute;">
+  <span class={cls(PARTS.AUX, variant)} style="position: absolute;">
     {@render contents()}
   </span>
 {/snippet}

package/_svseeds/_Toggle.svelte.d.ts

@@ -1,42 +1,40 @@
 export interface ToggleProps {
-    main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>;
-    left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>;
-    right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>;
+    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
+    left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
+    right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
     value?: boolean;
     type?: "button" | "switch";
     ariaLabel?: string;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement;
-    children?: Snippet;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ToggleReqdProps = never;
-export type ToggleBindProps = "value" | "status" | "element";
+export type ToggleBindProps = "value" | "variant" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type HTMLButtonAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface ToggleProps {
- *   main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
- *   left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
- *   right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+ *   children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+ *   left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+ *   right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  *   value?: boolean; // bindable (false)
  *   type?: "button" | "switch"; // ("button")
  *   ariaLabel?: string;
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   attributes?: HTMLButtonAttributes;
  *   action?: Action;
  *   element?: HTMLButtonElement; // bindable
- *   children?: Snippet;
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const Toggle: import("svelte").Component<ToggleProps, {}, "value" | "status" | "element">;
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "variant" | "value" | "element">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;