svseeds 0.4.6 → 0.4.8

package/_svseeds/_HotkeyCapture.svelte.d.ts

@@ -3,27 +3,27 @@ export interface HotkeyCaptureProps {
     placeholder?: string;
     active?: boolean;
     disabled?: boolean;
-    status?: string;
-    style?: SVSStyle;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type HotkeyCaptureReqdProps = never;
-export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "status" | "element";
-import { type SVSStyle } from "./core";
+export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "variant" | "element";
+import { type SVSClass } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface HotkeyCaptureProps {
  *   value?: string; // bindable
  *   placeholder?: string;
- *   active?: boolean; // bindable, <false>
- *   disabled?: boolean; // bindable, <false>
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
+ *   active?: boolean; // bindable, (false)
+ *   disabled?: boolean; // bindable, (false)
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const HotkeyCapture: import("svelte").Component<HotkeyCaptureProps, {}, "active" | "value" | "disabled" | "status" | "element">;
+declare const HotkeyCapture: import("svelte").Component<HotkeyCaptureProps, {}, "variant" | "active" | "value" | "disabled" | "element">;
 type HotkeyCapture = ReturnType<typeof HotkeyCapture>;
 export default HotkeyCapture;

package/_svseeds/_Modal.svelte

@@ -1,45 +1,45 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface ModalProps {
-    children: Snippet;
-    open?: boolean; // bindable <false>
-    closable?: boolean; // <true>
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false)
+    closable?: boolean; // (true)
     trigger?: HTMLElement; // bindable
     ariaLabel?: string;
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    styling?: SVSClass;
     element?: HTMLDialogElement; // bindable
   }
   ```
 -->
 <script module lang="ts">
   export interface ModalProps {
-    children: Snippet;
-    open?: boolean; // bindable <false>
-    closable?: boolean; // <true>
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false)
+    closable?: boolean; // (true)
     trigger?: HTMLElement; // bindable
     ariaLabel?: string;
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     element?: HTMLDialogElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ModalReqdProps = "children";
-  export type ModalBindProps = "open" | "status" | "element";
+  export type ModalBindProps = "open" | "variant" | "element";
 
   const preset = "svs-modal";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, open = $bindable(false), closable = true, trigger = $bindable(), ariaLabel, status = $bindable(""), style, element = $bindable() }: ModalProps = $props();
+  let { children, open = $bindable(false), closable = true, trigger = $bindable(), ariaLabel, element = $bindable(), styling, variant = $bindable("") }: ModalProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
 
   // *** Bind Handlers *** //
   $effect(() => {
@@ -70,9 +70,9 @@
 <!---------------------------------------->
 
 <!-- svelte-ignore a11y_autofocus -->
-<dialog bind:this={element} class={cls(PARTS.WHOLE, status)} aria-label={ariaLabel} {onclick} {onkeydown} {onclose} autofocus={true}>
-  <div class={cls(PARTS.MAIN, status)}>
-    {@render children()}
+<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {onclick} {onkeydown} {onclose} autofocus={true}>
+  <div class={cls(PARTS.MAIN, variant)}>
+    {@render children(variant)}
   </div>
 </dialog>
 

package/_svseeds/_Modal.svelte.d.ts

@@ -1,32 +1,32 @@
 export interface ModalProps {
-    children: Snippet;
+    children: Snippet<[string]>;
     open?: boolean;
     closable?: boolean;
     trigger?: HTMLElement;
     ariaLabel?: string;
-    status?: string;
-    style?: SVSStyle;
     element?: HTMLDialogElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ModalReqdProps = "children";
-export type ModalBindProps = "open" | "status" | "element";
+export type ModalBindProps = "open" | "variant" | "element";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface ModalProps {
- *   children: Snippet;
- *   open?: boolean; // bindable <false>
- *   closable?: boolean; // <true>
+ *   children: Snippet<[string]>; // Snippet<[variant]>
+ *   open?: boolean; // bindable (false)
+ *   closable?: boolean; // (true)
  *   trigger?: HTMLElement; // bindable
  *   ariaLabel?: string;
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ *   styling?: SVSClass;
  *   element?: HTMLDialogElement; // bindable
  * }
  * ```
  */
-declare const Modal: import("svelte").Component<ModalProps, {}, "open" | "status" | "element" | "trigger">;
+declare const Modal: import("svelte").Component<ModalProps, {}, "variant" | "open" | "element" | "trigger">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/_svseeds/_ProgressTracker.svelte

@@ -1,58 +1,59 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface ProgressTrackerProps {
-    current: number; // bindable <0>
+    current: number; // bindable (0)
     labels: string[];
-    aux?: Snippet<[string, number]>; // Snippet<[status,index]>
-    extra?: Snippet<[string, number]>; // Snippet<[status,index]>
-    status?: string; // bindable <STATE.NEUTRAL>
-    eachStatus?: SvelteMap<number, string> | Map<number, string>;
-    style?: SVSStyle;
+    aux?: Snippet<[string, number]>; // Snippet<[variant,index]>
+    extra?: Snippet<[string, number]>; // Snippet<[variant,index]>
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    eachVariant?: SvelteMap<number, string> | Map<number, string>;
+    styling?: SVSClass;
   }
   ```
 -->
 <script module lang="ts">
   export interface ProgressTrackerProps {
-    current: number; // bindable <0>
+    current: number; // bindable (0)
     labels: string[];
-    aux?: Snippet<[string, number]>; // Snippet<[status,index]>
-    extra?: Snippet<[string, number]>; // Snippet<[status,index]>
-    status?: string; // bindable <STATE.NEUTRAL>
-    eachStatus?: SvelteMap<number, string> | Map<number, string>;
-    style?: SVSStyle;
+    aux?: Snippet<[number, string]>; // Snippet<[index,variant]>
+    extra?: Snippet<[number, string]>; // Snippet<[index,variant]>
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    eachVariant?: SvelteMap<number, string> | Map<number, string>;
   }
   export type ProgressTrackerReqdProps = "current" | "labels";
-  export type ProgressTrackerBindProps = "current" | "status";
+  export type ProgressTrackerBindProps = "current" | "variant";
 
   const preset = "svs-progress-tracker";
 
   import { type Snippet } from "svelte";
   import { type SvelteMap } from "svelte/reactivity";
-  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, isUnsignedInteger } from "./core";
 </script>
 
 <script lang="ts">
-  let { current = $bindable(0), labels, aux, extra, status = $bindable(""), eachStatus, style }: ProgressTrackerProps = $props();
+  let { current = $bindable(-1), labels, aux, extra, styling, variant = $bindable(""), eachVariant }: ProgressTrackerProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  if (!isUnsignedInteger(current)) current = 0;
+  const cls = fnClass(preset, styling);
 
   // *** Status *** //
   function getEachStatus(index: number): string {
-    if (eachStatus?.has(index)) return eachStatus.get(index)!;
-    if (index < current) return STATE.ACTIVE;
-    if (index > current) return STATE.INACTIVE;
-    return status;
+    if (eachVariant?.has(index)) return eachVariant.get(index)!;
+    if (index < current) return VARIANT.ACTIVE;
+    if (index > current) return VARIANT.INACTIVE;
+    return variant;
   }
 </script>
 
 <!---------------------------------------->
 
 {#if labels.length}
-  <ol class={cls(PARTS.WHOLE, status)}>
+  <ol class={cls(PARTS.WHOLE, variant)}>
     {#each labels as label, i}
       {@const stat = getEachStatus(i)}
       {#if i > current}
@@ -61,7 +62,7 @@
       <li class={cls(PARTS.MAIN, stat)} aria-current={i === current ? "step" : false}>
         {#if aux}
           <div class={cls(PARTS.AUX, stat)}>
-            {@render aux(stat, i)}
+            {@render aux(i, stat)}
           </div>
         {/if}
         <div class={cls(PARTS.LABEL, stat)}>
@@ -77,9 +78,9 @@
 
 {#snippet separator(i: number)}
   {#if extra}
-    {@const stat = i < current ? STATE.ACTIVE : STATE.INACTIVE}
+    {@const stat = i < current ? VARIANT.ACTIVE : VARIANT.INACTIVE}
     <li class={cls(PARTS.EXTRA, stat)} role="separator">
-      {@render extra(stat, i)}
+      {@render extra(i, stat)}
     </li>
   {/if}
 {/snippet}

package/_svseeds/_ProgressTracker.svelte.d.ts

@@ -1,31 +1,31 @@
 export interface ProgressTrackerProps {
     current: number;
     labels: string[];
-    aux?: Snippet<[string, number]>;
-    extra?: Snippet<[string, number]>;
-    status?: string;
-    eachStatus?: SvelteMap<number, string> | Map<number, string>;
-    style?: SVSStyle;
+    aux?: Snippet<[number, string]>;
+    extra?: Snippet<[number, string]>;
+    styling?: SVSClass;
+    variant?: string;
+    eachVariant?: SvelteMap<number, string> | Map<number, string>;
 }
 export type ProgressTrackerReqdProps = "current" | "labels";
-export type ProgressTrackerBindProps = "current" | "status";
+export type ProgressTrackerBindProps = "current" | "variant";
 import { type Snippet } from "svelte";
 import { type SvelteMap } from "svelte/reactivity";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface ProgressTrackerProps {
- *   current: number; // bindable <0>
+ *   current: number; // bindable (0)
  *   labels: string[];
- *   aux?: Snippet<[string, number]>; // Snippet<[status,index]>
- *   extra?: Snippet<[string, number]>; // Snippet<[status,index]>
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   eachStatus?: SvelteMap<number, string> | Map<number, string>;
- *   style?: SVSStyle;
+ *   aux?: Snippet<[string, number]>; // Snippet<[variant,index]>
+ *   extra?: Snippet<[string, number]>; // Snippet<[variant,index]>
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ *   eachVariant?: SvelteMap<number, string> | Map<number, string>;
+ *   styling?: SVSClass;
  * }
  * ```
  */
-declare const ProgressTracker: import("svelte").Component<ProgressTrackerProps, {}, "status" | "current">;
+declare const ProgressTracker: import("svelte").Component<ProgressTrackerProps, {}, "variant" | "current">;
 type ProgressTracker = ReturnType<typeof ProgressTracker>;
 export default ProgressTracker;

package/_svseeds/_SelectField.svelte

@@ -1,25 +1,25 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface SelectFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
-    left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
+    left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     value?: string; // bindable
     validations?: SelectFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     attributes?: HTMLSelectAttributes;
     action?: Action;
     element?: HTMLSelectElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
-  type SelectFieldValidation = (value: string, validity: ValidityState) => string;
+  type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;
   ```
 -->
 <script module lang="ts">
@@ -27,22 +27,22 @@
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
-    left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
+    left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     value?: string; // bindable
     validations?: SelectFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     attributes?: HTMLSelectAttributes;
     action?: Action;
     element?: HTMLSelectElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type SelectFieldReqdProps = "options";
-  export type SelectFieldBindProps = "value" | "status" | "element";
-  export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
+  export type SelectFieldBindProps = "value" | "variant" | "element";
+  export type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;
 
   const preset = "svs-select-field";
 
@@ -50,15 +50,15 @@
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
   import { type HTMLSelectAttributes } 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, left, right, bottom, descFirst = false, value = $bindable(""), validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: SelectFieldProps = $props();
+  let { options, label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), validations = [], attributes, action, element = $bindable(), styling, variant = $bindable("") }: SelectFieldProps = $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());
@@ -67,15 +67,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;
@@ -109,17 +109,17 @@
 <!---------------------------------------->
 
 {#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, 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)}
@@ -130,21 +130,21 @@
 
 {#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, HTMLSelectElement | 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 action}
     <select bind:value bind:this={element} class={c} {id} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action>
       {@render option()}
@@ -162,6 +162,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/_SelectField.svelte.d.ts

@@ -9,43 +9,43 @@ export interface SelectFieldProps {
     descFirst?: boolean;
     value?: string;
     validations?: SelectFieldValidation[];
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLSelectAttributes;
     action?: Action;
     element?: HTMLSelectElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type SelectFieldReqdProps = "options";
-export type SelectFieldBindProps = "value" | "status" | "element";
-export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
+export type SelectFieldBindProps = "value" | "variant" | "element";
+export type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLSelectAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface SelectFieldProps {
  *   options: SvelteMap<string, string> | Map<string, string>;
  *   label?: string;
  *   extra?: string;
- *   aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
- *   left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
- *   right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+ *   aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
+ *   left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
+ *   right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[value,variant,element]>
  *   bottom?: string;
- *   descFirst?: boolean; // <false>
+ *   descFirst?: boolean; // (false)
  *   value?: string; // bindable
  *   validations?: SelectFieldValidation[];
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
  *   attributes?: HTMLSelectAttributes;
  *   action?: Action;
  *   element?: HTMLSelectElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
- * type SelectFieldValidation = (value: string, validity: ValidityState) => string;
+ * type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;
  * ```
  */
-declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "value" | "status" | "element">;
+declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "variant" | "value" | "element">;
 type SelectField = ReturnType<typeof SelectField>;
 export default SelectField;

package/_svseeds/_Slider.svelte

@@ -1,20 +1,20 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface SliderProps {
     range: Range; // bindable
-    left?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
-    value?: number; // bindable <min+((max-min)/2)>
-    step?: number | "any"; // <1>
+    left?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
+    value?: number; // bindable (min+((max-min)/2))
+    step?: number | "any"; // (1)
     options?: SvelteSet<number> | Set<number>;
-    background?: Range; // <{ min: 5, max: 95 }>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    background?: Range; // ({ min: 5, max: 95 }); linear-gradient rate limit of slider's track
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   type Range = { min: number, max: number };
   ```
@@ -22,20 +22,20 @@
 <script module lang="ts">
   export interface SliderProps {
     range: Range; // bindable
-    left?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
-    right?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
-    value?: number; // bindable <min+((max-min)/2)>
-    step?: number | "any"; // <1>
+    left?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
+    value?: number; // bindable (min+((max-min)/2))
+    step?: number | "any"; // (1)
     options?: SvelteSet<number> | Set<number>;
-    background?: Range; // <{ min: 5, max: 95 }>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    background?: Range; // ({ min: 5, max: 95 }); linear-gradient rate limit of slider's track
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type SliderReqdProps = "min" | "max";
-  export type SliderBindProps = "min" | "max" | "value" | "status" | "element";
+  export type SliderBindProps = "min" | "max" | "value" | "variant" | "element";
   export type Range = { min: number, max: number };
 
   const preset = "svs-slider";
@@ -44,18 +44,19 @@
   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 { range = $bindable(), left, right, value = $bindable(), step = 1, options, background = { min: 5, max: 95 }, status = $bindable(""), style, attributes, action, element = $bindable()}: SliderProps = $props();
+  let { range = $bindable(), left, right, value = $bindable(), step = 1, options, background = { min: 5, max: 95 }, attributes, action, element = $bindable(), styling, variant = $bindable("") }: SliderProps = $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.get(options?.size);
   const attrs = omit(attributes, "class", "type", "value", "min", "max", "step", "list");
   if (range.min > range.max) range = { min: range.max, max: range.min };
+  if (background.min > background.max) background = { min: background.max, max: background.min };
   if (value === undefined || value < range.min || value > range.max) value = range.min + ((range.max - range.min) / 2);
 
   // *** Bind Handlers *** //
@@ -65,12 +66,12 @@
 
 <!---------------------------------------->
 
-<span class={cls(PARTS.WHOLE, status)}>
+<span class={cls(PARTS.WHOLE, variant)}>
   {@render side(PARTS.LEFT, left)}
   {#if action}
-    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} use:action />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} use:action />
   {:else}
-    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} />
   {/if}
   {#if options?.size}
     <datalist id={idList}>
@@ -82,8 +83,8 @@
   {@render side(PARTS.RIGHT, right)}
 </span>
 
-{#snippet side(area: string, body?: Snippet<[string, number, HTMLInputElement | undefined]>)}
+{#snippet side(area: string, body?: Snippet<[number, string, HTMLInputElement | 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}