svseeds 0.4.1 → 0.4.3

package/_svseeds/_Sortable.svelte

@@ -1,3 +1,41 @@
+<!--
+  @component
+  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]>
+    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">;
+    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;
+  }
+  type SortableMode = "std" | "clone" | "swap";
+  class SortableItems { // methods are same with array's
+    constructor(values: string[])
+    at(index: number): string | undefined
+    replace(index: number, value: string): boolean
+    push(value: string)
+    pop(): string | undefined
+    unshift(value: string)
+    shift(): string | undefined
+    insert(index: number, value: string) // instead of splice
+    extract(index: number): string | undefined // instead of splice
+    isEmpty(): boolean
+    clear(): void
+    get length(): number
+    get values(): string[]
+    set values(values: string[])
+  }
+  ```
+-->
 <script module lang="ts">
   import { cubicOut } from "svelte/easing";
   const tp: TransitionParams = { duration: 300, easing: cubicOut }; // config of transition
@@ -11,21 +49,21 @@
   /***************************************************************/
 
   type SortableMode = "std" | "clone" | "swap";
-  export type SortableProps = {
-    items: SortableItems, // wrapper of string array as items to handle DnD
-    item: Snippet<[string, string, PointerEventHandler]>, // Snippet<[status, value, 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"
-    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>
+  export interface SortableProps {
+    items: SortableItems; // wrapper of string array as items to handle DnD
+    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, 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"
+    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.DEFAULT>
-    style?: SVSStyle,
-  };
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+  }
   export type SortableReqdProps = "items" | "item";
   export type SortableBindProps = "status";
 
@@ -603,14 +641,14 @@
   import { on } from "svelte/events";
   import { type EasingFunction, crossfade } from "svelte/transition";
   import { flip } from "svelte/animate";
-  import { type SVSStyle, STATE, AREA, fnClass, throttle } from "./core";
+  import { type SVSStyle, STATE, 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();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const group: KeyValue = SortableItems._newItem(name);
   const elems: HTMLElement[] = [];
@@ -719,14 +757,14 @@
 
 <!---------------------------------------->
 
-<ul class={cls(AREA.WHOLE, status)} onpointerenter={drag.active ? groupenter : undefined} onpointerleave={drag.active ? groupleave : undefined}>
+<ul class={cls(PARTS.WHOLE, status)} 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 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(AREA.MAIN, itemStatus)} in:s={{key}} out:r={{key}} animate:flip={tp} {style} {onpointerdown} {onpointerenter} {onpointerleave} {ondragstart}>
+    <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]))}
     </li>
   {/each}
@@ -734,7 +772,7 @@
 {#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(AREA.MAIN, status)} {style}>
+    <li bind:this={shadow.elem} class={shadow.isGhost ? undefined : cls(PARTS.MAIN, status)} {style}>
       {#if shadow.isGhost}
         {@render ghost!(items._value(drag.key))}
       {:else}

package/_svseeds/_Sortable.svelte.d.ts

@@ -1,6 +1,6 @@
 /***************************************************************/
 type SortableMode = "std" | "clone" | "swap";
-export type SortableProps = {
+export interface SortableProps {
     items: SortableItems;
     item: Snippet<[string, string, PointerEventHandler]>;
     ghost?: Snippet<[string]>;
@@ -14,7 +14,7 @@ export type SortableProps = {
     confirm?: boolean;
     status?: string;
     style?: SVSStyle;
-};
+}
 export type SortableReqdProps = "items" | "item";
 export type SortableBindProps = "status";
 export declare class SortableItems {
@@ -57,6 +57,43 @@ type KeyValue = {
 type DragState = "ready" | "dragging" | "idle";
 import { type Snippet } from "svelte";
 import { type SVSStyle } 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]>
+ *   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">;
+ *   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;
+ * }
+ * type SortableMode = "std" | "clone" | "swap";
+ * class SortableItems { // methods are same with array's
+ *   constructor(values: string[])
+ *   at(index: number): string | undefined
+ *   replace(index: number, value: string): boolean
+ *   push(value: string)
+ *   pop(): string | undefined
+ *   unshift(value: string)
+ *   shift(): string | undefined
+ *   insert(index: number, value: string) // instead of splice
+ *   extract(index: number): string | undefined // instead of splice
+ *   isEmpty(): boolean
+ *   clear(): void
+ *   get length(): number
+ *   get values(): string[]
+ *   set values(values: string[])
+ * }
+ * ```
+ */
 declare const Sortable: import("svelte").Component<SortableProps, {}, "status">;
 type Sortable = ReturnType<typeof Sortable>;
 export default Sortable;

package/_svseeds/_Tabs.svelte

@@ -1,12 +1,26 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface TabsProps {
+    labels?: string[];
+    current?: number; // bindable <0>
+    ariaOrientation?: "horizontal" | "vertical";
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    [key: string]: unknown | Snippet;
+  }
+  ```
+-->
 <script module lang="ts">
-  export type TabsProps = {
-    orientation?: "horizontal" | "vertical", // for aria-orientation
-    labels?: string[],
-    current?: number, // bindable <0>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    [key: string]: unknown | Snippet,
-  };
+  export interface TabsProps {
+    labels?: string[];
+    current?: number; // bindable <0>
+    ariaOrientation?: "horizontal" | "vertical";
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    [key: string]: unknown | Snippet;
+  }
   export type TabsReqdProps = never;
   export type TabsBindProps = "current" | "status";
 
@@ -30,14 +44,14 @@
   }
 
   import { type Snippet } from "svelte";
-  import { type SVSStyle, STATE, AREA, elemId, fnClass } from "./core";
+  import { type SVSStyle, STATE, PARTS, elemId, fnClass } from "./core";
 </script>
 
 <script lang="ts">
-  let { orientation, labels = [], current = $bindable(0), status = $bindable(""), style, ...rest }: TabsProps = $props();
+  let { labels = [], current = $bindable(0), ariaOrientation, status = $bindable(""), style, ...rest }: TabsProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const isStrLabel = labels.length > 0;
   const tabs = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
@@ -52,8 +66,8 @@
   }
   const isNextKey = (key: string) => key === "ArrowRight" || key === "ArrowDown";
   const isPrevKey = (key: string) => key === "ArrowLeft" || key === "ArrowUp";
-  const nextTabElem = (i: number) => i++ >= tabs.length ? elems[0] : elems[i++];
-  const prevTabElem = (i: number) => i-- < 0 ? elems[tabs.length--] : elems[i--];
+  const nextTabElem = (i: number) => i + 1 >= tabs.length ? elems[0] : elems[i + 1];
+  const prevTabElem = (i: number) => i - 1 < 0 ? elems[tabs.length - 1] : elems[i - 1];
   function moveFocus(index: number): (ev: KeyboardEvent) => void {
     return (ev: KeyboardEvent) => {
       if (isNextKey(ev.key)) nextTabElem(index)?.focus();
@@ -65,12 +79,12 @@
 <!---------------------------------------->
 
 {#if isValidTabs}
-  <div class={cls(AREA.WHOLE, status)}>
-    <div class={cls(AREA.TOP, status)} role="tablist" aria-orientation={orientation}>
+  <div class={cls(PARTS.WHOLE, status)}>
+    <div class={cls(PARTS.TOP, status)} role="tablist" aria-orientation={ariaOrientation}>
       {#each tabs as { id, name }, i (id)}
         {@const selected = i === current}
         {@const tabStatus = selected ? STATE.ACTIVE : status}
-        <button bind:this={elems[i]} class={cls(AREA.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}>
+        <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}
           {:else}
@@ -82,7 +96,7 @@
     {#each panels as { id, name }, i (id)}
       {@const selected = i === current}
       {@const style = selected ? undefined : "display: none;"}
-      <div class={cls(AREA.MAIN, status)} aria-labelledby={tabs[i].id} role="tabpanel" tabindex={0} hidden={!selected} {id} {style}>
+      <div class={cls(PARTS.MAIN, status)} aria-labelledby={tabs[i].id} role="tabpanel" tabindex={0} hidden={!selected} {id} {style}>
         {@render (rest[name] as Snippet)()}
       </div>
     {/each}

package/_svseeds/_Tabs.svelte.d.ts

@@ -1,15 +1,28 @@
-export type TabsProps = {
-    orientation?: "horizontal" | "vertical";
+export interface TabsProps {
     labels?: string[];
     current?: number;
+    ariaOrientation?: "horizontal" | "vertical";
     status?: string;
     style?: SVSStyle;
     [key: string]: unknown | Snippet;
-};
+}
 export type TabsReqdProps = never;
 export type TabsBindProps = "current" | "status";
 import { type Snippet } from "svelte";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface TabsProps {
+ *   labels?: string[];
+ *   current?: number; // bindable <0>
+ *   ariaOrientation?: "horizontal" | "vertical";
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   [key: string]: unknown | Snippet;
+ * }
+ * ```
+ */
 declare const Tabs: import("svelte").Component<TabsProps, {}, "status" | "current">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/_svseeds/_TextField.svelte

@@ -1,22 +1,47 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface TextFieldProps {
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    value?: string; // bindable
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";  // bindable <"text">
+    options?: SvelteSet<string> | Set<string>;
+    validations?: TextFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
+    action?: Action;
+    element?: HTMLInputElement | HTMLTextAreaElement; // bindable
+  }
+  type TextFieldValidation = (value: string, validity: ValidityState) => string;
+  ```
+-->
 <script module lang="ts">
-  export type TextFieldProps = {
-    label?: string,
-    extra?: string,
-    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
-    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
-    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>, // Snippet<[status,value,element]>
-    bottom?: string,
-    descFirst?: boolean, // <false>
-    value?: string, // bindable
-    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number",  // bindable <"text">
-    options?: SvelteSet<string> | Set<string>,
-    validations?: TextFieldValidation[],
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    attributes?: HTMLInputAttributes | HTMLTextareaAttributes,
-    action?: Action,
-    element?: HTMLInputElement | HTMLTextAreaElement, // bindable
-  };
+  export interface TextFieldProps {
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    value?: string; // bindable
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";  // bindable <"text">
+    options?: SvelteSet<string> | Set<string>;
+    validations?: TextFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
+    action?: Action;
+    element?: HTMLInputElement | HTMLTextAreaElement; // bindable
+  }
   export type TextFieldReqdProps = never;
   export type TextFieldBindProps = "value" | "type" | "status" | "element";
   export type TextFieldValidation = (value: string, validity: ValidityState) => string;
@@ -27,14 +52,14 @@
   import { type Action } from "svelte/action";
   import { type SvelteSet } from "svelte/reactivity";
   import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
 </script>
 
 <script lang="ts">
   let { label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), type = $bindable("text"), options, validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: TextFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const id = attributes?.id ? attributes.id : elemId.get(label?.trim());
   const idLabel = elemId.get(label?.trim());
@@ -45,7 +70,7 @@
   let message = $state(bottom);
 
   // *** Status *** //
-  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  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);
@@ -90,30 +115,30 @@
 
 <!---------------------------------------->
 
-<div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+<div class={cls(PARTS.WHOLE, status)} role="group" aria-labelledby={idLabel}>
   {#if aux}
-    <div class={cls(AREA.TOP, status)}>
+    <div class={cls(PARTS.TOP, status)}>
       {@render lbl()}
-      <span class={cls(AREA.AUX, status)}>{@render aux(status, value, element)}</span>
+      <span class={cls(PARTS.AUX, status)}>{@render aux(status, value, element)}</span>
     </div>
   {:else}
     {@render lbl()}
   {/if}
   {@render desc(descFirst)}
-  <div class={cls(AREA.MIDDLE, status)}>
-    {@render side(AREA.LEFT, left)}
+  <div class={cls(PARTS.MIDDLE, status)}>
+    {@render side(PARTS.LEFT, left)}
     {@render main()}
-    {@render side(AREA.RIGHT, right)}
+    {@render side(PARTS.RIGHT, right)}
   </div>
   {@render desc(!descFirst)}
 </div>
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <label class={cls(AREA.LABEL, status)} for={id} id={idLabel}>
+    <label class={cls(PARTS.LABEL, status)} for={id} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
       {/if}
     </label>
   {/if}
@@ -124,7 +149,7 @@
   {/if}
 {/snippet}
 {#snippet main()}
-  {@const c = cls(AREA.MAIN, status)}
+  {@const c = cls(PARTS.MAIN, status)}
   {#if type === "area"}
     {#if action}
       <textarea bind:value bind:this={element} class={c} {id} {onchange} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action></textarea>
@@ -148,6 +173,6 @@
 {/snippet}
 {#snippet desc(show: boolean)}
   {#if show && message?.trim()}
-    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}

package/_svseeds/_TextField.svelte.d.ts

@@ -1,4 +1,4 @@
-export type TextFieldProps = {
+export interface TextFieldProps {
     label?: string;
     extra?: string;
     aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>;
@@ -15,7 +15,7 @@ export type TextFieldProps = {
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
     element?: HTMLInputElement | HTMLTextAreaElement;
-};
+}
 export type TextFieldReqdProps = never;
 export type TextFieldBindProps = "value" | "type" | "status" | "element";
 export type TextFieldValidation = (value: string, validity: ValidityState) => string;
@@ -24,6 +24,30 @@ import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface TextFieldProps {
+ *   label?: string;
+ *   extra?: string;
+ *   aux?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+ *   left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+ *   right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
+ *   bottom?: string;
+ *   descFirst?: boolean; // <false>
+ *   value?: string; // bindable
+ *   type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";  // bindable <"text">
+ *   options?: SvelteSet<string> | Set<string>;
+ *   validations?: TextFieldValidation[];
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
+ *   action?: Action;
+ *   element?: HTMLInputElement | HTMLTextAreaElement; // bindable
+ * }
+ * type TextFieldValidation = (value: string, validity: ValidityState) => string;
+ * ```
+ */
 declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "value" | "status" | "element">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/_svseeds/_Toggle.svelte

@@ -1,16 +1,36 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ToggleProps {
+    main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    value?: boolean; // bindable <false>
+    type?: "button" | "switch"; // <"button">
+    ariaLabel?: string;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLButtonAttributes;
+    action?: Action;
+    element?: HTMLButtonElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type ToggleProps = {
-    main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>, // Snippet<[status,value,element]>
-    left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>, // Snippet<[status,value,element]>
-    right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>, // Snippet<[status,value,element]>
-    value?: boolean, // bindable <true>
-    type?: "button" | "switch", // <"button">
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
+  export interface ToggleProps {
+    main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
+    value?: boolean; // bindable <false>
+    type?: "button" | "switch"; // <"button">
+    ariaLabel?: string;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
-    action?: Action,
-    element?: HTMLButtonElement, // bindable
-  };
+    action?: Action;
+    element?: HTMLButtonElement; // bindable
+  }
   export type ToggleReqdProps = never;
   export type ToggleBindProps = "value" | "status" | "element";
 
@@ -20,17 +40,17 @@
   import { type Snippet, untrack } from "svelte";
   import { type Action } from "svelte/action";
   import { type HTMLButtonAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, fnClass, isNeutral, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass, isNeutral, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { main, left, right, value = $bindable(false), type = "button", status = $bindable(""), style, attributes, action, element = $bindable() }: ToggleProps = $props();
+  let { main, left, right, value = $bindable(false), type = "button", ariaLabel, status = $bindable(""), style, attributes, action, element = $bindable() }: ToggleProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
-  const attrs = omit(attributes, "class", "id", "type", "role", "aria-checked", "onclick");
-  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  const attrs = omit(attributes, "class", "type", "role", "aria-checked", "aria-pressed", "onclick");
+  let neutral = isNeutral(status) ? status : STATE.NEUTRAL;
 
   // *** Bind Handlers *** //
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
@@ -51,10 +71,10 @@
 <!---------------------------------------->
 
 {#if left || right}
-  <span class={cls(AREA.WHOLE, status)} role="group">
-    {@render side(AREA.LEFT, left)}
+  <span class={cls(PARTS.WHOLE, status)} role="group">
+    {@render side(PARTS.LEFT, left)}
     {@render button(type)}
-    {@render side(AREA.RIGHT, right)}
+    {@render side(PARTS.RIGHT, right)}
   </span>
 {:else}
   {@render button(type)}
@@ -71,32 +91,32 @@
   {/if}
 {/snippet}
 {#snippet button(role: string)}
-  {@const c = cls(AREA.MAIN, status)}
+  {@const c = cls(PARTS.MAIN, status)}
   {#if role === "button"}
     {#if action}
-      <button bind:this={element} class={c} type="button" aria-pressed={value} {onclick} {...attrs} use:action>
+      <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={ariaLabel} {onclick} {...attrs} use:action>
         {@render contents()}
       </button>
     {:else}
-      <button bind:this={element} class={c} type="button" aria-pressed={value} {onclick} {...attrs}>
+      <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={ariaLabel} {onclick} {...attrs}>
         {@render contents()}
       </button>
     {/if}
   {:else}
     {@const style = "position: relative;"}
     {#if action}
-      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} {onclick} {...attrs} use:action>
+      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} aria-label={ariaLabel} {onclick} {...attrs} use:action>
         {@render thumb()}
       </button>
     {:else}
-      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} {onclick} {...attrs}>
+      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} aria-label={ariaLabel} {onclick} {...attrs}>
         {@render thumb()}
       </button>
     {/if}
   {/if}
 {/snippet}
 {#snippet thumb()}
-  <span class={cls(AREA.AUX, status)} style="position: absolute;">
+  <span class={cls(PARTS.AUX, status)} style="position: absolute;">
     {@render contents()}
   </span>
 {/snippet}