svseeds 0.4.8 → 0.4.10

package/_svseeds/TagsInputField.svelte

@@ -15,6 +15,7 @@
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
+    name?: string;
     element?: HTMLInputElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -45,6 +46,7 @@
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
+    name?: string;
     element?: HTMLInputElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -67,7 +69,7 @@
 </script>
 
 <script lang="ts">
-  let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], element = $bindable(), styling, variant = $bindable(""), deps }: TagsInputFieldProps = $props();
+  let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], name, element = $bindable(), styling, variant = $bindable(""), deps }: TagsInputFieldProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -78,6 +80,7 @@
   const idErr = idDesc ?? elemId.id;
   let message = $state(bottom);
   let value = $state("");
+  if (!name) name = deps?.svsTagsInput?.attributes?.name as string | undefined;
   if (max) constraints.unshift(() => values.length >= max.value ? max.message : "");
   if (min) validations.unshift(() => values.length < min.value ? min.message : "");
 
@@ -87,7 +90,7 @@
     events: { onadd, onremove: deps?.svsTagsInput?.events?.onremove },
     styling: deps?.svsTagsInput?.styling ?? `${preset} svs-tags-input`,
     attributes: {
-      ...omit(deps?.svsTagsInput?.attributes, "id", "onchange", "oninvalid", "aria-describedby"),
+      ...omit(deps?.svsTagsInput?.attributes, "id", "name", "onchange", "oninvalid", "aria-describedby"),
       id,
       onchange,
       oninvalid,
@@ -95,7 +98,7 @@
     },
   };
 
-  // *** Status *** //
+  // *** States *** //
   let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
   $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
   let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");
@@ -169,6 +172,7 @@
   {@render desc(descFirst)}
   <div class={cls(PARTS.MIDDLE, variant)}>
     {@render side(PARTS.LEFT, left)}
+    {@render fnForm()}
     <TagsInput bind:values bind:value bind:variant bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} />
     {@render side(PARTS.RIGHT, right)}
   </div>
@@ -195,3 +199,10 @@
     <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}
+{#snippet fnForm()}
+  {#if name}
+    {#each values as value}
+      <input type="hidden" {name} {value} />
+    {/each}
+  {/if}
+{/snippet}

package/_svseeds/TagsInputField.svelte.d.ts

@@ -11,6 +11,7 @@ export interface TagsInputFieldProps {
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
+    name?: string;
     element?: HTMLInputElement;
     styling?: SVSClass;
     variant?: string;
@@ -46,6 +47,7 @@ import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps }
  *   max?: TagsInputFieldCountValidation;
  *   constraints?: TagsInputFieldConstraint[];
  *   validations?: TagsInputFieldValidation[];
+ *   name?: string;
  *   element?: HTMLInputElement; // bindable
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)

package/_svseeds/ToggleGroupField.svelte

@@ -81,7 +81,7 @@
     action: deps?.svsToggleGroup?.action as Action,
   };
 
-  // *** Status *** //
+  // *** States *** //
   let neutral = $state(isNeutral(variant) ? variant : VARIANT.NEUTRAL);
   $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
   let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");
@@ -163,7 +163,9 @@
 {/snippet}
 {#snippet fnForm()}
   <input bind:this={element} style="display: none;" aria-hidden="true" {oninvalid} />
-  {#each values as value}
-    <input type="hidden" {name} {value} />
-  {/each}
+  {#if name}
+    {#each values as value}
+      <input type="hidden" {name} {value} />
+    {/each}
+  {/if}
 {/snippet}

package/_svseeds/_CheckField.svelte

@@ -66,7 +66,7 @@
   const roleGroup = multiple ? "group" : "radiogroup";
   let message = $state(bottom);
 
-  // *** Status *** //
+  // *** States *** //
   let neutral = $state(isNeutral(variant) ? variant : VARIANT.NEUTRAL);
   $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
   let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");

package/_svseeds/_ColorPicker.svelte

@@ -15,7 +15,8 @@
   ```ts
   type RgbColor = [number, number, number];
   function getHex(rgb: RgbColor): string
-  // getHex([255, 123, 34]) => "#ff7b22"
+  // getHex([255, 123, 34])  => "#ff7b22"
+  // getHex([255, 255, 255]) => "#ffffff"
   ```
 -->
 <script module lang="ts">
@@ -82,7 +83,7 @@
 <!---------------------------------------->
 
 <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.MIDDLE, variant)} 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, 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 />

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -30,7 +30,8 @@ import { type SVSClass } from "./core";
  * ```ts
  * type RgbColor = [number, number, number];
  * function getHex(rgb: RgbColor): string
- * // getHex([255, 123, 34]) => "#ff7b22"
+ * // getHex([255, 123, 34])  => "#ff7b22"
+ * // getHex([255, 255, 255]) => "#ffffff"
  * ```
  */
 declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "variant" | "alpha" | "value" | "element">;

package/_svseeds/_ComboBox.svelte

@@ -4,8 +4,10 @@
   ```ts
   interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
+    extra?: Snippet<[boolean, string]>; // Snippet<[expanded,variant]>
     value?: string; // bindable
     expanded?: boolean; // bindable
+    search?: boolean // (true)
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
@@ -17,8 +19,10 @@
 <script module lang="ts">
   export interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
+    extra?: Snippet<[boolean, string]>; // Snippet<[expanded,variant]>
     value?: string; // bindable
     expanded?: boolean; // bindable
+    search?: boolean // (true)
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
@@ -30,9 +34,8 @@
 
   const preset = "svs-combo-box";
   const NA = -1;
-  const optionStyle = "cursor: default; user-select: none;";
 
-  import { untrack } from "svelte";
+  import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type SvelteSet } from "svelte/reactivity";
   import { type HTMLInputAttributes } from "svelte/elements";
@@ -40,7 +43,7 @@
 </script>
 
 <script lang="ts">
-  let { options, value = $bindable(""), expanded = $bindable(false), attributes, action, element = $bindable(), styling, variant = $bindable("") }: ComboBoxProps = $props();
+  let { options, extra, value = $bindable(""), expanded = $bindable(false), search = true, attributes, action, element = $bindable(), styling, variant = $bindable("") }: ComboBoxProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -52,25 +55,24 @@
   let listElem: HTMLUListElement | undefined = $state();
 
   // *** Bind Handlers *** //
-  let listboxStyle = $derived(`position: absolute;visibility: ${expanded ? "visible" : "hidden"};${overflow.x ? "right: 0%;" : ""}${overflow.y ? "bottom: 100%;" : ""}`);
+  let listboxStyle = $derived(`position:absolute;cursor:default;user-select:none;visibility: ${expanded ? "visible" : "hidden"};${overflow.x ? "right:0%;" : ""}${overflow.y ? "bottom:100%;" : ""}`);
   let opts = $derived([...options.keys()]);
-  $effect(() => { options;
-    untrack(() => observeOverflow());
-  });
-  function observeOverflow() {
-    if (!listElem || !window) return;
-    const rect = listElem.getBoundingClientRect();
-    overflow.x = window.innerWidth < rect.right;
-    overflow.y = window.innerHeight < rect.bottom;
-  }
+  let maxlen = $derived(opts.reduce((max, x) => Math.max(max, [...x].length), 0));
 
   // *** Event Handlers *** //
   function open(activate: boolean = false, bottom: boolean = false) {
     if (expanded) return;
     selected = opts.indexOf(value);
     if (activate && selected === NA) selected = bottom ? opts.length - 1 : 0;
+    observeOverflow();
     expanded = true;
   }
+  function observeOverflow() {
+    if (!listElem || !window) return;
+    const rect = listElem.getBoundingClientRect();
+    overflow.x = window.innerWidth < rect.right;
+    overflow.y = window.innerHeight < rect.bottom;
+  }
   function apply() {
     if (!expanded) return;
     value = opts[selected];
@@ -81,25 +83,37 @@
     expanded = false;
     selected = NA;
   }
+  function oninput(ev: Event) {
+    if ((ev as InputEvent).isComposing) return;
+    if ([...value].length > maxlen) return;
+    if (options.has(value)) {
+      selected = opts.indexOf(value);
+      return;
+    }
+    if (!search) return;
+    selected = opts.findIndex((x) => x.startsWith(value));
+  }
   function onkeydown(ev: KeyboardEvent) {
     if (ev.isComposing) return;
     if (ev.ctrlKey || ev.shiftKey || ev.metaKey) return;
     switch (ev.key) {
       case "Escape": if (!ev.altKey && expanded) close(); break;
       case "Enter": if (!ev.altKey && expanded && selected > NA) apply(); break;
-      case "ArrowDown": caseArrowDown(ev.altKey); break;
-      case "ArrowUp": caseArrowUp(ev.altKey); break;
+      case "ArrowDown": caseArrowDown(ev, ev.altKey); break;
+      case "ArrowUp": caseArrowUp(ev, ev.altKey); break;
     }
   }
-  function caseArrowDown(alt: boolean) {
-    if (alt && !expanded) return open();
+  function caseArrowDown(ev: KeyboardEvent, alt: boolean) {
     if (alt && expanded) return;
+    ev.preventDefault();
+    if (alt && !expanded) return open();
     if (!alt && !expanded) return open(true);
     if (selected < opts.length - 1) selected++;
     if (selected === NA) selected = 0;
   }
-  function caseArrowUp(alt: boolean) {
+  function caseArrowUp(ev: KeyboardEvent, alt: boolean) {
     if (alt && !expanded) return;
+    ev.preventDefault();
     if (alt && expanded) return close();
     if (!alt && !expanded) return open(true, true);
     if (selected > 0) selected--;
@@ -108,25 +122,29 @@
 </script>
 
 <!---------------------------------------->
+<svelte:document onscroll={() => close()} />
 
 {#if options.size}
-  <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, 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, 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, variant)} id={idList} role="listbox" style={listboxStyle}>
-        {#each opts as opt, i (opt)}
-          {@const isSelected = i === selected}
-          {@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}
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </div>
+  <span class={cls(PARTS.WHOLE, variant)} style="position:relative;">
+    {#if 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} {oninput} {...attrs} use:action />
+    {:else}
+      <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} {oninput} {...attrs} />
+    {/if}
+    {#if extra}
+      <div class={cls(PARTS.EXTRA, variant)} style="position:absolute;top:50%;right:0%;transform:translateY(-50%);pointer-events:none;">
+        {@render extra(expanded, variant)}
+      </div>
+    {/if}
+    <ul bind:this={listElem} class={cls(PARTS.BOTTOM, expanded ? VARIANT.ACTIVE : variant)} id={idList} role="listbox" style={listboxStyle}>
+      {#each opts as opt, i (opt)}
+        {@const isSelected = i === selected}
+        {@const labelStatus = isSelected ? VARIANT.ACTIVE : variant}
+        {@const onpointerenter = () => selected = i}
+        <li class={cls(PARTS.LABEL, labelStatus)} aria-selected={isSelected} role="option" onpointerdown={apply} {onpointerenter}>
+          {opt}
+        </li>
+      {/each}
+    </ul>
+  </span>
 {/if}

package/_svseeds/_ComboBox.svelte.d.ts

@@ -1,7 +1,9 @@
 export interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
+    extra?: Snippet<[boolean, string]>;
     value?: string;
     expanded?: boolean;
+    search?: boolean;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
@@ -10,6 +12,7 @@ export interface ComboBoxProps {
 }
 export type ComboBoxReqdProps = "options";
 export type ComboBoxBindProps = "value" | "expanded" | "variant" | "element";
+import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
@@ -19,8 +22,10 @@ import { type SVSClass } from "./core";
  * ```ts
  * interface ComboBoxProps {
  *   options: SvelteSet<string> | Set<string>;
+ *   extra?: Snippet<[boolean, string]>; // Snippet<[expanded,variant]>
  *   value?: string; // bindable
  *   expanded?: boolean; // bindable
+ *   search?: boolean // (true)
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable

package/_svseeds/_ContextMenu.svelte

@@ -6,6 +6,7 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false); to observe state, not to control
     lock?: boolean; // bindable (false)
+    target?: HTMLElement;
     element?: HTMLElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -17,6 +18,7 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false); to observe state, not to control
     lock?: boolean; // bindable (false)
+    target?: HTMLElement;
     element?: HTMLElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -26,39 +28,47 @@
 
   const preset = "svs-context-menu";
 
-  import { type Snippet } from "svelte";
+  import { type Snippet, onDestroy } from "svelte";
+  import { on } from "svelte/events";
   import { type SVSClass, VARIANT, PARTS, fnClass } from "./core";
 </script>
 
 <!---------------------------------------->
 
 <script lang="ts">
-  let { children, open = $bindable(false), lock = $bindable(false), element = $bindable(), styling, variant = $bindable("") }: ContextMenuProps = $props();
+  let { children, open = $bindable(false), lock = $bindable(false), target, element = $bindable(), styling, variant = $bindable("") }: ContextMenuProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
   let position = $state({ x: 0, y: 0 });
+  let listeners: (() => void)[] = [];
+  $effect(() => {
+    listeners.push(on(target ?? document, "contextmenu", show));
+    if (target) listeners.push(on(document, "contextmenu", hide));
+  });
+  onDestroy(() => listeners.forEach((x) => x()));
 
   // *** Bind Handlers *** //
-  let visibility = $derived(open ? "visibility: visible;" : "visibility: hidden; z-index: -9999;");
-  let dynStyle = $derived(`position: fixed; left:${position.x}px; top:${position.y}px; ${visibility}`);
+  let dynStyle = $derived(`position:fixed;left:${position.x}px;top:${position.y}px;${open ? "visibility:visible;" : "visibility:hidden;z-index:-9999;"}`);
 
   // *** Event Handlers *** //
-  function show(ev: MouseEvent) {
+  function show(ev: Event) {
     if (lock) return;
     ev.preventDefault();
+    ev.stopPropagation();
 
+    const [x, y] = [(ev as MouseEvent).clientX, (ev as MouseEvent).clientY];
     const menu = { width: element?.offsetWidth ?? 0, height: element?.offsetHeight ?? 0 };
-    position.x = window.innerWidth-ev.clientX < menu.width ? ev.clientX-menu.width : ev.clientX;
-    position.y = window.innerHeight-ev.clientY < menu.height ? (ev.clientY < menu.height ? ev.clientY : ev.clientY-menu.height) : ev.clientY;
+    position.x = window.innerWidth-x < menu.width ? x-menu.width : x;
+    position.y = window.innerHeight-y < menu.height ? (y < menu.height ? y : y-menu.height) : y;
     open = true;
   }
   function hide() { if (!lock) open = false; }
 </script>
 
 <!---------------------------------------->
-<svelte:document oncontextmenu={show} onclick={hide} />
+<svelte:document onclick={hide} />
 
 <nav class={cls(PARTS.WHOLE, variant)} style={dynStyle} bind:this={element}>
   {@render children(variant)}

package/_svseeds/_ContextMenu.svelte.d.ts

@@ -2,6 +2,7 @@ export interface ContextMenuProps {
     children: Snippet<[string]>;
     open?: boolean;
     lock?: boolean;
+    target?: HTMLElement;
     element?: HTMLElement;
     styling?: SVSClass;
     variant?: string;
@@ -17,6 +18,7 @@ import { type SVSClass } from "./core";
  *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false); to observe state, not to control
  *   lock?: boolean; // bindable (false)
+ *   target?: HTMLElement;
  *   element?: HTMLElement; // bindable
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)

package/_svseeds/_Modal.svelte

@@ -8,9 +8,9 @@
     closable?: boolean; // (true)
     trigger?: HTMLElement; // bindable
     ariaLabel?: string;
-    variant?: string; // bindable (VARIANT.NEUTRAL)
-    styling?: SVSClass;
     element?: HTMLDialogElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
@@ -44,7 +44,9 @@
   // *** Bind Handlers *** //
   $effect(() => {
     open;
-    untrack(() => trigger?.focus());
+    untrack(() => {
+      if (!open) trigger?.focus();
+    });
   });
   $effect.pre(() => {
     open;

package/_svseeds/_Modal.svelte.d.ts

@@ -21,9 +21,9 @@ import { type SVSClass } from "./core";
  *   closable?: boolean; // (true)
  *   trigger?: HTMLElement; // bindable
  *   ariaLabel?: string;
- *   variant?: string; // bindable (VARIANT.NEUTRAL)
- *   styling?: SVSClass;
  *   element?: HTMLDialogElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */

package/_svseeds/_ProgressTracker.svelte

@@ -5,11 +5,11 @@
   interface ProgressTrackerProps {
     current: number; // bindable (0)
     labels: string[];
-    aux?: Snippet<[string, number]>; // Snippet<[variant,index]>
-    extra?: Snippet<[string, number]>; // Snippet<[variant,index]>
+    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>;
-    styling?: SVSClass;
   }
   ```
 -->
@@ -41,8 +41,8 @@
   if (!isUnsignedInteger(current)) current = 0;
   const cls = fnClass(preset, styling);
 
-  // *** Status *** //
-  function getEachStatus(index: number): string {
+  // *** States *** //
+  function getEachVariant(index: number): string {
     if (eachVariant?.has(index)) return eachVariant.get(index)!;
     if (index < current) return VARIANT.ACTIVE;
     if (index > current) return VARIANT.INACTIVE;
@@ -55,19 +55,25 @@
 {#if labels.length}
   <ol class={cls(PARTS.WHOLE, variant)}>
     {#each labels as label, i}
-      {@const stat = getEachStatus(i)}
-      {#if i > current}
-        {@render separator(i)}
-      {/if}
+      {@const stat = getEachVariant(i)}
       <li class={cls(PARTS.MAIN, stat)} aria-current={i === current ? "step" : false}>
+        {#if i > current}
+          {@render separator(i)}
+        {/if}
         {#if aux}
-          <div class={cls(PARTS.AUX, stat)}>
-            {@render aux(i, stat)}
+          <div class={cls(PARTS.MIDDLE, stat)}>
+            <div class={cls(PARTS.AUX, stat)}>
+              {@render aux(i, stat)}
+            </div>
+            <div class={cls(PARTS.LABEL, stat)}>
+              {label}
+            </div>
+          </div>
+        {:else}
+          <div class={cls(PARTS.LABEL, stat)}>
+            {label}
           </div>
         {/if}
-        <div class={cls(PARTS.LABEL, stat)}>
-          {label}
-        </div>
       </li>
       {#if i < current}
         {@render separator(i)}
@@ -79,8 +85,8 @@
 {#snippet separator(i: number)}
   {#if extra}
     {@const stat = i < current ? VARIANT.ACTIVE : VARIANT.INACTIVE}
-    <li class={cls(PARTS.EXTRA, stat)} role="separator">
+    <div class={cls(PARTS.EXTRA, stat)} role="separator">
       {@render extra(i, stat)}
-    </li>
+    </div>
   {/if}
 {/snippet}

package/_svseeds/_ProgressTracker.svelte.d.ts

@@ -18,11 +18,11 @@ import { type SVSClass } from "./core";
  * interface ProgressTrackerProps {
  *   current: number; // bindable (0)
  *   labels: string[];
- *   aux?: Snippet<[string, number]>; // Snippet<[variant,index]>
- *   extra?: Snippet<[string, number]>; // Snippet<[variant,index]>
+ *   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>;
- *   styling?: SVSClass;
  * }
  * ```
  */

package/_svseeds/_SelectField.svelte

@@ -66,7 +66,7 @@
   const attrs = omit(attributes, "class", "id", "value", "oninvalid");
   let message = $state(bottom);
 
-  // *** Status *** //
+  // *** States *** //
   let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
   $effect(() => { neutral = isNeutral(variant) ? variant : neutral; });
   let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");
@@ -130,12 +130,12 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <span class={cls(PARTS.LABEL, variant)} id={idLabel}>
+    <label class={cls(PARTS.LABEL, variant)} for={id} id={idLabel}>
       {label}
       {#if extra?.trim()}
         <span class={cls(PARTS.EXTRA, variant)}>{extra}</span>
       {/if}
-    </span>
+    </label>
   {/if}
 {/snippet}
 {#snippet side(area: string, body?: Snippet<[string, string, HTMLSelectElement | undefined]>)}

package/_svseeds/_TagsInput.svelte

@@ -4,7 +4,7 @@
   ```ts
   interface TagsInputProps {
     label?: Snippet<[string, string]>; // Snippet<[value,variant]>
-    aux?: Snippet<[string, string]>; // Snippet<[value,variant]>
+    extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
     values?: string[]; // bindable
     value?: string; // bindable
     type?: "left" | "right"; // ("left")
@@ -28,7 +28,7 @@
 <script module lang="ts">
   export interface TagsInputProps {
     label?: Snippet<[string, string]>; // Snippet<[value,variant]>
-    aux?: Snippet<[string, string]>; // Snippet<[value,variant]>
+    extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
     values?: string[]; // bindable
     value?: string; // bindable
     type?: "left" | "right"; // ("left")
@@ -62,7 +62,7 @@
 </script>
 
 <script lang="ts">
-  let { label, aux, values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, attributes, action, element = $bindable(), styling, variant = $bindable("") }: TagsInputProps = $props();
+  let { label, extra, values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, attributes, action, element = $bindable(), styling, variant = $bindable("") }: TagsInputProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -108,7 +108,7 @@
 
 {#snippet tags(render: boolean)}
   {#if render}
-    <span class={cls(type, variant)}>
+    <span class={cls(PARTS.AUX, variant)}>
       {#each values as value, i}
         <span class={cls(PARTS.LABEL, variant)}>
           {#if label}
@@ -116,9 +116,9 @@
           {:else}
             {value}
           {/if}
-          <button class={cls(PARTS.AUX, variant)} onclick={remove(i)}>
-            {#if aux}
-              {@render aux(value, variant)}
+          <button class={cls(PARTS.EXTRA, variant)} onclick={remove(i)}>
+            {#if extra}
+              {@render extra(value, variant)}
             {:else}
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10"><path d="M511.998 70.682 441.315 0 256.002 185.313 70.685 0 .002 70.692l185.314 185.314L.002 441.318 70.69 512l185.312-185.312L441.315 512l70.683-70.682-185.314-185.312z" /></svg>
             {/if}

package/_svseeds/_TagsInput.svelte.d.ts

@@ -1,6 +1,6 @@
 export interface TagsInputProps {
     label?: Snippet<[string, string]>;
-    aux?: Snippet<[string, string]>;
+    extra?: Snippet<[string, string]>;
     values?: string[];
     value?: string;
     type?: "left" | "right";
@@ -30,7 +30,7 @@ import { type SVSClass } from "./core";
  * ```ts
  * interface TagsInputProps {
  *   label?: Snippet<[string, string]>; // Snippet<[value,variant]>
- *   aux?: Snippet<[string, string]>; // Snippet<[value,variant]>
+ *   extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
  *   values?: string[]; // bindable
  *   value?: string; // bindable
  *   type?: "left" | "right"; // ("left")

package/_svseeds/_TextField.svelte

@@ -5,20 +5,20 @@
   interface TextFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
-    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
-    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
+    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
+    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
+    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
     bottom?: string;
     descFirst?: boolean; // (false)
     value?: string; // bindable
     type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
-    variant?: string; // bindable (VARIANT.NEUTRAL)
-    styling?: SVSClass;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
     element?: HTMLInputElement | HTMLTextAreaElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
   ```
@@ -69,7 +69,7 @@
   const attrs = omit(attributes as any, "class", "id", "type", "value", "list", "onchange", "oninvalid");
   let message = $state(bottom);
 
-  // *** Status *** //
+  // *** States *** //
   let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
   $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
   let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");

package/_svseeds/_TextField.svelte.d.ts

@@ -30,20 +30,20 @@ import { type SVSClass } from "./core";
  * interface TextFieldProps {
  *   label?: string;
  *   extra?: string;
- *   aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
- *   left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
- *   right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[variant,value,element]>
+ *   aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
+ *   left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
+ *   right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[value,variant,element]>
  *   bottom?: string;
  *   descFirst?: boolean; // (false)
  *   value?: string; // bindable
  *   type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
  *   options?: SvelteSet<string> | Set<string>;
  *   validations?: TextFieldValidation[];
- *   variant?: string; // bindable (VARIANT.NEUTRAL)
- *   styling?: SVSClass;
  *   attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement | HTMLTextAreaElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
  * ```

package/_svseeds/_ToggleGroup.svelte

@@ -11,7 +11,7 @@
     action?: Action;
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
-    [key: string]: unknown | Snippet<[string]>; // contents instead of the value
+    [key: string]: unknown | Snippet<[string]>; // contents instead of the text
   }
   ```
 -->
@@ -25,7 +25,7 @@
     action?: Action;
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
-    [key: string]: unknown | Snippet<[string]>; // contents instead of the value
+    [key: string]: unknown | Snippet<[string]>; // contents instead of the text
   }
   export type ToggleGroupReqdProps = "options";
   export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "variant";

package/_svseeds/_ToggleGroup.svelte.d.ts

@@ -27,7 +27,7 @@ import { type SVSClass } from "./core";
  *   action?: Action;
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
- *   [key: string]: unknown | Snippet<[string]>; // contents instead of the value
+ *   [key: string]: unknown | Snippet<[string]>; // contents instead of the text
  * }
  * ```
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",