svseeds 0.4.7 → 0.4.8

package/_svseeds/_SelectField.svelte

@@ -6,18 +6,18 @@
     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)
     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 | undefined;
   ```
@@ -27,21 +27,21 @@
     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)
     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 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,20 +9,20 @@ 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 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)`
  * ```ts
@@ -30,22 +30,22 @@ import { type SVSStyle } from "./core";
  *   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)
  *   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 | 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

@@ -4,17 +4,17 @@
   ```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]>
+    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]>
+    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}

package/_svseeds/_Slider.svelte.d.ts

@@ -1,19 +1,19 @@
 export interface SliderProps {
     range: Range;
-    left?: Snippet<[string, number, HTMLInputElement | undefined]>;
-    right?: Snippet<[string, number, HTMLInputElement | undefined]>;
+    left?: Snippet<[number, string, HTMLInputElement | undefined]>;
+    right?: Snippet<[number, string, HTMLInputElement | undefined]>;
     value?: number;
     step?: number | "any";
     options?: SvelteSet<number> | Set<number>;
     background?: Range;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 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;
@@ -22,27 +22,27 @@ import { type Snippet } from "svelte";
 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
  * 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]>
+ *   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 };
  * ```
  */
-declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "status" | "range" | "element">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "variant" | "value" | "range" | "element">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/_svseeds/_Sortable.svelte

@@ -4,18 +4,18 @@
   ```ts
   interface SortableProps {
     items: SortableItems; // wrapper of string array as items to handle DnD
-    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, onpointerdown]>
+    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
     ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
     name?: string;        // name of this group (random string)
-    mode?: SortableMode;  // sort mode ("std"); "std","clone","swap"
+    mode?: SortableMode;  // sort mode ("std")
     accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
     sort?: boolean;       // enable sort within same group (true)
     multiple?: boolean;   // enable multiple select & drag with them (false)
     draggable?: boolean;  // enable default pointerdown handler (true)
     appendable?: boolean; // enable append when enter group area (false)
     confirm?: boolean     // enable confirm interval time to move items (false)
-    status?: string;      // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
   type SortableMode = "std" | "clone" | "swap";
   class SortableItems { // methods are same with array's
@@ -51,21 +51,21 @@
   type SortableMode = "std" | "clone" | "swap";
   export interface SortableProps {
     items: SortableItems; // wrapper of string array as items to handle DnD
-    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, onpointerdown]>
+    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
     ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
     name?: string;        // name of this group (random string)
-    mode?: SortableMode;  // sort mode ("std"); "std","clone","swap"
+    mode?: SortableMode;  // sort mode ("std")
     accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
     sort?: boolean;       // enable sort within same group (true)
     multiple?: boolean;   // enable multiple select & drag with them (false)
     draggable?: boolean;  // enable default pointerdown handler (true)
     appendable?: boolean; // enable append when enter group area (false)
     confirm?: boolean     // enable confirm interval time to move items (false)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
   export type SortableReqdProps = "items" | "item";
-  export type SortableBindProps = "status";
+  export type SortableBindProps = "variant";
 
   export class SortableItems {
     #inner: KeyValue[] = $state([]);
@@ -641,15 +641,15 @@
   import { on } from "svelte/events";
   import { type EasingFunction, crossfade } from "svelte/transition";
   import { flip } from "svelte/animate";
-  import { type SVSStyle, STATE, PARTS, fnClass, throttle } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, throttle } from "./core";
 </script>
 
 <script lang="ts">
-  let { items, item, ghost, name, mode = "std", accept, sort = true, multiple = false, draggable = true, appendable = false, confirm = false, status = $bindable(""), style }: SortableProps = $props();
+  let { items, item, ghost, name, mode = "std", accept, sort = true, multiple = false, draggable = true, appendable = false, confirm = false, styling, variant = $bindable("") }: SortableProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const group: KeyValue = SortableItems._newItem(name);
   const elems: HTMLElement[] = [];
   const shadow = new Shadow(ghost);
@@ -757,26 +757,26 @@
 
 <!---------------------------------------->
 
-<ul class={cls(PARTS.WHOLE, status)} onpointerenter={drag.active ? groupenter : undefined} onpointerleave={drag.active ? groupleave : undefined}>
+<ul class={cls(PARTS.WHOLE, variant)} onpointerenter={drag.active ? groupenter : undefined} onpointerleave={drag.active ? groupleave : undefined}>
   {#each items._inner as {key, value}, i (key)}
     {@const style = "touch-action:none;"}
-    {@const itemStatus = isSelected(key) ? STATE.ACTIVE : status}
+    {@const itemStatus = isSelected(key) ? VARIANT.ACTIVE : variant}
     {@const onpointerdown = draggable ? downF(key, elems[i]) : undefined}
     {@const onpointerenter = drag.active ? enterF(key) : undefined}
     {@const onpointerleave = drag.active ? leave : undefined}
     <li bind:this={elems[i]} class={cls(PARTS.MAIN, itemStatus)} in:s={{key}} out:r={{key}} animate:flip={tp} {style} {onpointerdown} {onpointerenter} {onpointerleave} {ondragstart}>
-      {@render item(itemStatus, value, downF(key, elems[i]))}
+      {@render item(value, itemStatus, downF(key, elems[i]))}
     </li>
   {/each}
 </ul>
 {#if shadow.rendering}
   {@const style = `opacity: 0.5; pointer-events: none; position: fixed; left: ${shadow.pt.x}px; top: ${shadow.pt.y}px; ${shadow.cssVisibility} ${shadow.cssSize}`}
   <ul style="display: contents;">
-    <li bind:this={shadow.elem} class={shadow.isGhost ? undefined : cls(PARTS.MAIN, status)} {style}>
+    <li bind:this={shadow.elem} class={shadow.isGhost ? undefined : cls(PARTS.MAIN, variant)} {style}>
       {#if shadow.isGhost}
         {@render ghost!(items._value(drag.key))}
       {:else}
-        {@render item(status, items._value(drag.key), ()=>cleanup())}
+        {@render item(items._value(drag.key), variant, ()=>cleanup())}
       {/if}
     </li>
   </ul>

package/_svseeds/_Sortable.svelte.d.ts

@@ -12,11 +12,11 @@ export interface SortableProps {
     draggable?: boolean;
     appendable?: boolean;
     confirm?: boolean;
-    status?: string;
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type SortableReqdProps = "items" | "item";
-export type SortableBindProps = "status";
+export type SortableBindProps = "variant";
 export declare class SortableItems {
     #private;
     constructor(values: string[]);
@@ -56,24 +56,24 @@ type KeyValue = {
 };
 type DragState = "ready" | "dragging" | "idle";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface SortableProps {
  *   items: SortableItems; // wrapper of string array as items to handle DnD
- *   item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, onpointerdown]>
+ *   item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
  *   ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
  *   name?: string;        // name of this group (random string)
- *   mode?: SortableMode;  // sort mode ("std"); "std","clone","swap"
+ *   mode?: SortableMode;  // sort mode ("std")
  *   accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
  *   sort?: boolean;       // enable sort within same group (true)
  *   multiple?: boolean;   // enable multiple select & drag with them (false)
  *   draggable?: boolean;  // enable default pointerdown handler (true)
  *   appendable?: boolean; // enable append when enter group area (false)
  *   confirm?: boolean     // enable confirm interval time to move items (false)
- *   status?: string;      // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
+ *   styling?: SVSClass;
+ *   variant?: string;     // bindable (VARIANT.NEUTRAL)
  * }
  * type SortableMode = "std" | "clone" | "swap";
  * class SortableItems { // methods are same with array's
@@ -94,6 +94,6 @@ import { type SVSStyle } from "./core";
  * }
  * ```
  */
-declare const Sortable: import("svelte").Component<SortableProps, {}, "status">;
+declare const Sortable: import("svelte").Component<SortableProps, {}, "variant">;
 type Sortable = ReturnType<typeof Sortable>;
 export default Sortable;

package/_svseeds/_Tabs.svelte

@@ -6,9 +6,9 @@
     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
   }
   ```
 -->
@@ -17,12 +17,12 @@
     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
   }
   export type TabsReqdProps = never;
-  export type TabsBindProps = "current" | "status";
+  export type TabsBindProps = "current" | "variant";
 
   type NamedId = { id: string, name: string };
   const preset = "svs-tabs";
@@ -37,27 +37,27 @@
   function toNamedId(names: string[]): NamedId[] {
     return names.map((x) => ({ id: elemId.id, name: x }));
   }
-  function correctCurrent(active: number, labels: string[]): number {
-    if (active <= 0) return 0;
-    if (active >= labels.length) return labels.length - 1;
-    return active;
+  function correctCurrent(current: number, tabs: NamedId[]): number {
+    if (!isUnsignedInteger(current)) return 0;
+    if (current >= tabs.length) return tabs.length - 1;
+    return current;
   }
 
   import { type Snippet } from "svelte";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, isUnsignedInteger } from "./core";
 </script>
 
 <script lang="ts">
-  let { labels = [], current = $bindable(0), ariaOrientation, status = $bindable(""), style, ...rest }: TabsProps = $props();
+  let { labels = [], current = $bindable(0), ariaOrientation, styling, variant = $bindable(""), ...rest }: TabsProps = $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 tabs = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
   const panels = toNamedId(getSnippetNames(rolePanel, rest));
   const elems: HTMLButtonElement[] = [];
-  current = correctCurrent(current, labels);
+  current = correctCurrent(current, tabs);
   const isValidTabs = $derived(tabs.length && panels.length && tabs.length === panels.length);
 
   // *** Event Handlers *** //
@@ -79,11 +79,11 @@
 <!---------------------------------------->
 
 {#if isValidTabs}
-  <div class={cls(PARTS.WHOLE, status)}>
-    <div class={cls(PARTS.TOP, status)} role="tablist" aria-orientation={ariaOrientation}>
+  <div class={cls(PARTS.WHOLE, variant)}>
+    <div class={cls(PARTS.TOP, variant)} role="tablist" aria-orientation={ariaOrientation}>
       {#each tabs as { id, name }, i (id)}
         {@const selected = i === current}
-        {@const tabStatus = selected ? STATE.ACTIVE : status}
+        {@const tabStatus = selected ? VARIANT.ACTIVE : variant}
         <button bind:this={elems[i]} class={cls(PARTS.LABEL, tabStatus)} onclick={activate(i)} onkeydown={moveFocus(i)} tabindex={selected ? 0 : -1} aria-selected={selected} aria-controls={panels[i].id} type="button" role="tab" {id}>
           {#if isStrLabel}
             {name}
@@ -96,7 +96,7 @@
     {#each panels as { id, name }, i (id)}
       {@const selected = i === current}
       {@const style = selected ? undefined : "display: none;"}
-      <div class={cls(PARTS.MAIN, status)} aria-labelledby={tabs[i].id} role="tabpanel" tabindex={0} hidden={!selected} {id} {style}>
+      <div class={cls(PARTS.MAIN, variant)} aria-labelledby={tabs[i].id} role="tabpanel" tabindex={0} hidden={!selected} {id} {style}>
         {@render (rest[name] as Snippet)()}
       </div>
     {/each}