svseeds 0.4.7 → 0.4.8

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,11 +20,11 @@ export interface ToggleGroupFieldDeps {
     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;
 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)`
@@ -33,17 +33,17 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  *   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;
  * }
@@ -53,6 +53,6 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  * 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

@@ -3,50 +3,51 @@
   default value: `(value)`
   ```ts
   interface ButtonProps {
-    children: Snippet;
-    left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
-    right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+    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]>
+    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)`
  * ```ts
  * interface ButtonProps {
- *   children: Snippet;
- *   left?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
- *   right?: Snippet<[string, HTMLButtonElement | undefined]>; // Snippet<[status,element]>
+ *   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

@@ -6,17 +6,17 @@
     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)
     values?: string[]; // bindable
     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 | undefined;
   ```
@@ -26,20 +26,20 @@
     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)
     values?: string[]; // bindable
     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 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,26 +2,26 @@ 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 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)`
  * ```ts
@@ -29,21 +29,21 @@ import { type SVSStyle } from "./core";
  *   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)
  *   values?: string[]; // bindable
  *   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 | 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;

package/_svseeds/_ColorPicker.svelte

@@ -5,11 +5,11 @@
   interface ColorPickerProps {
     value?: string; // bindable ("#000000")
     alpha?: number; // bindable (1)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
   ```ts
@@ -22,14 +22,14 @@
   export interface ColorPickerProps {
     value?: string; // bindable ("#000000")
     alpha?: number; // bindable (1)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ColorPickerReqdProps = never;
-  export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
+  export type ColorPickerBindProps = "value" | "alpha" | "variant" | "element";
   export function getHex(rgb: RgbColor): string {
     if (!isValidRgb(rgb)) return DEFAULT_COLOR;
     return "#" + (1 << 24 | rgb[0] << 16 | rgb[1] << 8 | rgb[2]).toString(16).slice(1);
@@ -62,15 +62,15 @@
 
   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 { value = $bindable(DEFAULT_COLOR), alpha = $bindable(1), status = $bindable(""), style, attributes, action, element = $bindable() }: ColorPickerProps = $props();
+  let { value = $bindable(DEFAULT_COLOR), alpha = $bindable(1), attributes, action, element = $bindable(), styling, variant = $bindable("") }: ColorPickerProps = $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, "type");
   value = castValidHex(value) ?? DEFAULT_COLOR;
 
@@ -81,9 +81,9 @@
 
 <!---------------------------------------->
 
-<label class={cls(PARTS.WHOLE, status)}>
+<label class={cls(PARTS.WHOLE, variant)}>
   <div style="display: inline-block; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0px;">
-    <div class={cls(PARTS.MAIN, status)} style={`background-color: rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alp})`}>
+    <div class={cls(PARTS.MAIN, variant)} style={`background-color: rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alp})`}>
       {#if action}
         <input bind:value bind:this={element} type="color" style="visibility: hidden;" {...attrs} use:action />
       {:else}

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -1,30 +1,30 @@
 export interface ColorPickerProps {
     value?: string;
     alpha?: number;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ColorPickerReqdProps = never;
-export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
+export type ColorPickerBindProps = "value" | "alpha" | "variant" | "element";
 export declare function getHex(rgb: RgbColor): string;
 type RgbColor = [number, number, number];
 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 ColorPickerProps {
  *   value?: string; // bindable ("#000000")
  *   alpha?: number; // bindable (1)
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  * ```ts
@@ -33,6 +33,6 @@ import { type SVSStyle } from "./core";
  * // getHex([255, 123, 34]) => "#ff7b22"
  * ```
  */
-declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "alpha" | "value" | "status" | "element">;
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "variant" | "alpha" | "value" | "element">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/_svseeds/_ComboBox.svelte

@@ -6,11 +6,11 @@
     options: SvelteSet<string> | Set<string>;
     value?: string; // bindable
     expanded?: boolean; // bindable
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
@@ -19,14 +19,14 @@
     options: SvelteSet<string> | Set<string>;
     value?: string; // bindable
     expanded?: boolean; // bindable
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ComboBoxReqdProps = "options";
-  export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
+  export type ComboBoxBindProps = "value" | "expanded" | "variant" | "element";
 
   const preset = "svs-combo-box";
   const NA = -1;
@@ -36,15 +36,15 @@
   import { type Action } from "svelte/action";
   import { type SvelteSet } from "svelte/reactivity";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { options, value = $bindable(""), expanded = $bindable(false), status = $bindable(""), style, attributes, action, element = $bindable() }: ComboBoxProps = $props();
+  let { options, value = $bindable(""), expanded = $bindable(false), attributes, action, element = $bindable(), styling, variant = $bindable("") }: ComboBoxProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const idList = elemId.id;
   const attrs = omit(attributes, "class", "type", "value", "list", "role", "aria-haspopup", "aria-autocomplete", "aria-controls", "aria-expanded");
   let selected = $state(NA);
@@ -110,17 +110,17 @@
 <!---------------------------------------->
 
 {#if options.size}
-  <div class={cls(PARTS.WHOLE, status)}>
+  <div class={cls(PARTS.WHOLE, variant)}>
     <div style="position: relative; width: fit-content; height: fit-content;">
       {#if action}
-        <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} use:action />
+        <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} use:action />
       {:else}
-        <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} />
+        <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} />
       {/if}
-      <ul bind:this={listElem} class={cls(PARTS.BOTTOM, status)} id={idList} role="listbox" style={listboxStyle}>
+      <ul bind:this={listElem} class={cls(PARTS.BOTTOM, variant)} id={idList} role="listbox" style={listboxStyle}>
         {#each opts as opt, i (opt)}
           {@const isSelected = i === selected}
-          {@const labelStatus = isSelected ? STATE.ACTIVE : status}
+          {@const labelStatus = isSelected ? VARIANT.ACTIVE : variant}
           {@const onpointerenter = () => selected = i}
           <li class={cls(PARTS.LABEL, labelStatus)} aria-selected={isSelected} role="option" style={optionStyle} onpointerdown={apply} {onpointerenter}>
             {opt}

package/_svseeds/_ComboBox.svelte.d.ts

@@ -2,18 +2,18 @@ export interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
     value?: string;
     expanded?: boolean;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ComboBoxReqdProps = "options";
-export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
+export type ComboBoxBindProps = "value" | "expanded" | "variant" | "element";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
@@ -21,14 +21,14 @@ import { type SVSStyle } from "./core";
  *   options: SvelteSet<string> | Set<string>;
  *   value?: string; // bindable
  *   expanded?: boolean; // bindable
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "expanded" | "value" | "status" | "element">;
+declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "variant" | "expanded" | "value" | "element">;
 type ComboBox = ReturnType<typeof ComboBox>;
 export default ComboBox;