svseeds 0.4.7 → 0.4.8

package/_svseeds/_ContextMenu.svelte

@@ -3,41 +3,41 @@
   default value: `(value)`
   ```ts
   interface ContextMenuProps {
-    children: Snippet;
+    children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false); to observe state, not to control
     lock?: boolean; // bindable (false)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     element?: HTMLElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <script module lang="ts">
   export interface ContextMenuProps {
-    children: Snippet;
+    children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false); to observe state, not to control
     lock?: boolean; // bindable (false)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     element?: HTMLElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ContextMenuReqdProps = "children";
-  export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
+  export type ContextMenuBindProps = "open" | "lock" | "variant" | "element";
 
   const preset = "svs-context-menu";
 
   import { type Snippet } 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), lock = $bindable(false), status = $bindable(""), style, element = $bindable() }: ContextMenuProps = $props();
+  let { children, open = $bindable(false), lock = $bindable(false), element = $bindable(), styling, variant = $bindable("") }: ContextMenuProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   let position = $state({ x: 0, y: 0 });
 
   // *** Bind Handlers *** //
@@ -60,6 +60,6 @@
 <!---------------------------------------->
 <svelte:document oncontextmenu={show} onclick={hide} />
 
-<nav class={cls(PARTS.WHOLE, status)} style={dynStyle} bind:this={element}>
-  {@render children()}
+<nav class={cls(PARTS.WHOLE, variant)} style={dynStyle} bind:this={element}>
+  {@render children(variant)}
 </nav>

package/_svseeds/_ContextMenu.svelte.d.ts

@@ -1,28 +1,28 @@
 export interface ContextMenuProps {
-    children: Snippet;
+    children: Snippet<[string]>;
     open?: boolean;
     lock?: boolean;
-    status?: string;
-    style?: SVSStyle;
     element?: HTMLElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ContextMenuReqdProps = "children";
-export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
+export type ContextMenuBindProps = "open" | "lock" | "variant" | "element";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface ContextMenuProps {
- *   children: Snippet;
+ *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false); to observe state, not to control
  *   lock?: boolean; // bindable (false)
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   element?: HTMLElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open" | "status" | "element" | "lock">;
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "variant" | "open" | "element" | "lock">;
 type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

package/_svseeds/_Disclosure.svelte

@@ -3,34 +3,35 @@
   default value: `(value)`
   ```ts
   interface DisclosureProps {
-    label: string | Snippet<[boolean,string]>; // Snippet<[open,status]>
-    children: Snippet;
+    label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
+    children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
     duration?: number; // (400)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <script module lang="ts">
   export interface DisclosureProps {
-    label: string | Snippet<[boolean,string]>; // Snippet<[open,status]>
-    children: Snippet;
+    label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
+    children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
     duration?: number; // (400)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type DisclosureReqdProps = "label" | "children";
-  export type DisclosureBindProps = "open" | "status" | "element";
+  export type DisclosureBindProps = "open" | "variant" | "element";
 
   type DisclosureTarget = { currentTarget: EventTarget & HTMLDetailsElement };
+  const DEFAULT_DURATION = 400;
   const preset = "svs-disclosure";
 
   const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec));
@@ -49,22 +50,23 @@
   import { type Action } from "svelte/action";
   import { type HTMLDetailsAttributes } from "svelte/elements";
   import { slide } from "svelte/transition";
-  import { type SVSStyle, STATE, PARTS, fnClass, isNeutral, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, isNeutral, isUnsignedInteger, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { label, children, open = $bindable(false), duration = 400, status = $bindable(""), style, attributes, action, element = $bindable() }: DisclosureProps = $props();
+  let { label, children, open = $bindable(false), duration = -1, attributes, action, element = $bindable(), styling, variant = $bindable("") }: DisclosureProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  if (!isUnsignedInteger(duration)) duration = DEFAULT_DURATION;
+  const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "class", "open", "ontoggle");
   const guard = new ToggleGurad();
   let hidden = $state(!open);
-  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(() => {
     open;
     untrack(() => toggleOpen());
@@ -81,7 +83,7 @@
     if (!element) return;
     element.open = bool;
     hidden = !element.open;
-    status = bool ? STATE.ACTIVE : neutral;
+    variant = bool ? VARIANT.ACTIVE : neutral;
   }
 
   // *** Event Handlers *** //
@@ -104,31 +106,31 @@
 <!---------------------------------------->
 
 {#if action}
-  <details bind:this={element} class={cls(PARTS.WHOLE, status)} {ontoggle} {...attrs} use:action>
+  <details bind:this={element} class={cls(PARTS.WHOLE, variant)} {ontoggle} {...attrs} use:action>
     {@render inner()}
   </details>
 {:else}
-  <details bind:this={element} class={cls(PARTS.WHOLE, status)} {ontoggle} {...attrs}>
+  <details bind:this={element} class={cls(PARTS.WHOLE, variant)} {ontoggle} {...attrs}>
     {@render inner()}
   </details>
 {/if}
 
 {#snippet inner()}
-  <summary class={cls(PARTS.LABEL, status)} {onclick}>
+  <summary class={cls(PARTS.LABEL, variant)} {onclick}>
     {#if typeof label === "string"}
       {label}
     {:else if typeof label === "function"}
-      {@render label(open, status)}
+      {@render label(open, variant)}
     {/if}
   </summary>
   {#if open}
-    <div class={cls(PARTS.MAIN, status)} transition:slide={{ duration }}>
-      {@render children()}
+    <div class={cls(PARTS.MAIN, variant)} transition:slide={{ duration }}>
+      {@render children(variant)}
     </div>
   {/if}
   {#if hidden}
-    <div class={cls(PARTS.MAIN, status)}>
-      {@render children()}
+    <div class={cls(PARTS.MAIN, variant)}>
+      {@render children(variant)}
     </div>
   {/if}
 {/snippet}

package/_svseeds/_Disclosure.svelte.d.ts

@@ -1,36 +1,36 @@
 export interface DisclosureProps {
     label: string | Snippet<[boolean, string]>;
-    children: Snippet;
+    children: Snippet<[string]>;
     open?: boolean;
     duration?: number;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type DisclosureReqdProps = "label" | "children";
-export type DisclosureBindProps = "open" | "status" | "element";
+export type DisclosureBindProps = "open" | "variant" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type HTMLDetailsAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface DisclosureProps {
- *   label: string | Snippet<[boolean,string]>; // Snippet<[open,status]>
- *   children: Snippet;
+ *   label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
+ *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false)
  *   duration?: number; // (400)
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   attributes?: HTMLDetailsAttributes;
  *   action?: Action;
  *   element?: HTMLDetailsElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "open" | "status" | "element">;
+declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "variant" | "open" | "element">;
 type Disclosure = ReturnType<typeof Disclosure>;
 export default Disclosure;

package/_svseeds/_HotkeyCapture.svelte

@@ -7,9 +7,9 @@
     placeholder?: string;
     active?: boolean; // bindable, (false)
     disabled?: boolean; // bindable, (false)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
@@ -19,12 +19,12 @@
     placeholder?: string;
     active?: boolean; // bindable, (false)
     disabled?: boolean; // bindable, (false)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type HotkeyCaptureReqdProps = never;
-  export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "status" | "element";
+  export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "variant" | "element";
 
   const preset = "svs-hotkey-capture";
   const KEY_MODIFIER = new Set(["Control", "Alt", "Shift", "Meta"]);
@@ -36,19 +36,19 @@
   }
 
   import { untrack } from "svelte";
-  import { type SVSStyle, STATE, PARTS, fnClass, isNeutral } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, isNeutral } from "./core";
 </script>
 
 <script lang="ts">
-  let { value = $bindable(""), placeholder, active = $bindable(false), disabled = $bindable(false), status = $bindable(""), style, element = $bindable() }: HotkeyCaptureProps = $props();
+  let { value = $bindable(""), placeholder, active = $bindable(false), disabled = $bindable(false), element = $bindable(), styling, variant = $bindable("") }: HotkeyCaptureProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
-  let neutral = isNeutral(status) ? status : STATE.NEUTRAL;
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
+  let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
 
   // *** Bind Handlers *** //
-  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
   $effect.pre(() => {
     disabled;
     untrack(() => shiftStatus());
@@ -67,8 +67,8 @@
     }
   }
   function shiftStatus() {
-    if (disabled) return status = STATE.INACTIVE;
-    status = active ? STATE.ACTIVE : neutral;
+    if (disabled) return variant = VARIANT.INACTIVE;
+    variant = active ? VARIANT.ACTIVE : neutral;
   }
 
   // *** Event Handlers *** //
@@ -105,4 +105,4 @@
 
 <!---------------------------------------->
 
-<input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" readonly={true} {placeholder} {disabled} {onkeydown} {onpointerdown} {onwheel} {oncontextmenu} {onfocus} {onblur} />
+<input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" readonly={true} {placeholder} {disabled} {onkeydown} {onpointerdown} {onwheel} {oncontextmenu} {onfocus} {onblur} />

package/_svseeds/_HotkeyCapture.svelte.d.ts

@@ -3,13 +3,13 @@ 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)`
  * ```ts
@@ -18,12 +18,12 @@ import { type SVSStyle } from "./core";
  *   placeholder?: string;
  *   active?: boolean; // bindable, (false)
  *   disabled?: boolean; // bindable, (false)
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   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

@@ -3,43 +3,43 @@
   default value: `(value)`
   ```ts
   interface ModalProps {
-    children: Snippet;
+    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;
+    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)`
  * ```ts
  * interface ModalProps {
- *   children: Snippet;
+ *   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

@@ -5,11 +5,11 @@
   interface ProgressTrackerProps {
     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;
   }
   ```
 -->
@@ -17,42 +17,43 @@
   export interface ProgressTrackerProps {
     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)`
  * ```ts
  * interface ProgressTrackerProps {
  *   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;