svseeds 0.4.0 → 0.4.3

package/_svseeds/_CheckField.svelte.d.ts

@@ -1,4 +1,4 @@
-export type CheckFieldProps = {
+export interface CheckFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
@@ -13,7 +13,7 @@ export type CheckFieldProps = {
     attributes?: HTMLInputAttributes;
     action?: Action;
     elements?: HTMLInputElement[];
-};
+}
 export type CheckFieldReqdProps = "options";
 export type CheckFieldBindProps = "values" | "status" | "elements";
 export type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
@@ -22,6 +22,28 @@ import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface CheckFieldProps {
+ *   options: SvelteMap<string, string> | Map<string, string>;
+ *   label?: string;
+ *   extra?: string;
+ *   aux?: Snippet<[string, string[], HTMLInputElement[]]>; // Snippet<[status,values,elements]>
+ *   bottom?: string;
+ *   descFirst?: boolean; // <false>
+ *   values?: string[]; // bindable
+ *   multiple?: boolean; // <true>
+ *   validations?: CheckFieldValidation[];
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLInputAttributes;
+ *   action?: Action;
+ *   elements?: HTMLInputElement[]; // bindable
+ * }
+ * type CheckFieldValidation = (values: string[], validity: ValidityState) => string;
+ * ```
+ */
 declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "elements" | "status" | "values">;
 type CheckField = ReturnType<typeof CheckField>;
 export default CheckField;

package/_svseeds/_ColorPicker.svelte

@@ -1,25 +1,46 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ColorPickerProps {
+    value?: string; // bindable <"#000000">
+    alpha?: number; // bindable <1>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+  }
+  ```
+  ```ts
+  type RgbColor = [number, number, number];
+  export function getHex(rgb: RgbColor): string
+  // getHex([255, 123, 34]) => "#ff7b22"
+  ```
+-->
 <script module lang="ts">
-  export type ColorPickerProps = {
-    value?: string, // bindable <"#000">
-    alpha?: number, // bindable <1>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
+  export interface ColorPickerProps {
+    value?: string; // bindable <"#000000">
+    alpha?: number; // bindable <1>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
-    action?: Action,
-    element?: HTMLInputElement, // bindable
-  };
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+  }
   export type ColorPickerReqdProps = never;
   export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
   export function getHex(rgb: RgbColor): string {
-    if (!isValidRgb(rgb)) return "#000";
+    if (!isValidRgb(rgb)) return DEFAULT_COLOR;
     return "#" + (1 << 24 | rgb[0] << 16 | rgb[1] << 8 | rgb[2]).toString(16).slice(1);
   }
 
   type RgbColor = [number, number, number];
+  const DEFAULT_COLOR = "#000000";
   const preset = "svs-color-picker";
 
-  function isValidHex(hex: string): boolean {
-    return Boolean(formatHex(hex));
+  function castValidHex(hex: string): string | undefined {
+    return `#${formatHex(hex)?.filter((x) => x.length === 2).join("")}`;
   }
   function castHexToRgb(hex: string): RgbColor {
     const rgb = formatHex(hex)?.filter((x) => x.length === 2);
@@ -41,17 +62,17 @@
 
   import { type Action } from "svelte/action";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { value = $bindable("#000"), alpha = $bindable(1), status = $bindable(""), style, attributes, action, element = $bindable() }: ColorPickerProps = $props();
+  let { value = $bindable(DEFAULT_COLOR), alpha = $bindable(1), status = $bindable(""), style, attributes, action, element = $bindable() }: ColorPickerProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const attrs = omit(attributes, "type");
-  if (!isValidHex(value)) value = "#000";
+  value = castValidHex(value) ?? DEFAULT_COLOR;
 
   // *** Bind Handlers *** //
   let rgb = $derived(castHexToRgb(value));
@@ -60,9 +81,9 @@
 
 <!---------------------------------------->
 
-<label class={cls(AREA.WHOLE, status)}>
+<label class={cls(PARTS.WHOLE, status)}>
   <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(AREA.MAIN, status)} style={`background-color: rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alp})`}>
+    <div class={cls(PARTS.MAIN, status)} 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 />
       {:else}

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -1,4 +1,4 @@
-export type ColorPickerProps = {
+export interface ColorPickerProps {
     value?: string;
     alpha?: number;
     status?: string;
@@ -6,7 +6,7 @@ export type ColorPickerProps = {
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
-};
+}
 export type ColorPickerReqdProps = never;
 export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
 export declare function getHex(rgb: RgbColor): string;
@@ -14,6 +14,25 @@ type RgbColor = [number, number, number];
 import { type Action } from "svelte/action";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface ColorPickerProps {
+ *   value?: string; // bindable <"#000000">
+ *   alpha?: number; // bindable <1>
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLInputAttributes;
+ *   action?: Action;
+ *   element?: HTMLInputElement; // bindable
+ * }
+ * ```
+ * ```ts
+ * type RgbColor = [number, number, number];
+ * export function getHex(rgb: RgbColor): string
+ * // getHex([255, 123, 34]) => "#ff7b22"
+ * ```
+ */
 declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "alpha" | "value" | "status" | "element">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/_svseeds/_ComboBox.svelte

@@ -1,14 +1,30 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ComboBoxProps {
+    options: SvelteSet<string> | Set<string>;
+    value?: string; // bindable
+    expanded?: boolean; // bindable
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type ComboBoxProps = {
-    options: SvelteSet<string> | Set<string>,
-    value?: string, // bindable
-    expanded?: boolean, // bindable
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    attributes?: HTMLInputAttributes,
-    action?: Action,
-    element?: HTMLInputElement, // bindable
-  };
+  export interface ComboBoxProps {
+    options: SvelteSet<string> | Set<string>;
+    value?: string; // bindable
+    expanded?: boolean; // bindable
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+  }
   export type ComboBoxReqdProps = "options";
   export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
 
@@ -20,14 +36,14 @@
   import { type Action } from "svelte/action";
   import { type SvelteSet } from "svelte/reactivity";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, elemId, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, elemId, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
   let { options, value = $bindable(""), expanded = $bindable(false), status = $bindable(""), style, attributes, action, element = $bindable() }: ComboBoxProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const idList = elemId.id;
   const attrs = omit(attributes, "class", "type", "value", "list", "role", "aria-haspopup", "aria-autocomplete", "aria-controls", "aria-expanded");
@@ -52,7 +68,7 @@
   function open(activate: boolean = false, bottom: boolean = false) {
     if (expanded) return;
     selected = opts.indexOf(value);
-    if (activate && selected === NA) selected = bottom ? opts.length-- : 0;
+    if (activate && selected === NA) selected = bottom ? opts.length - 1 : 0;
     expanded = true;
   }
   function apply() {
@@ -79,32 +95,34 @@
     if (alt && !expanded) return open();
     if (alt && expanded) return;
     if (!alt && !expanded) return open(true);
-    if (selected + 1 < opts.length) selected++;
+    if (selected < opts.length - 1) selected++;
+    if (selected === NA) selected = 0;
   }
   function caseArrowUp(alt: boolean) {
     if (alt && !expanded) return;
     if (alt && expanded) return close();
     if (!alt && !expanded) return open(true, true);
-    if (selected - 1 >= 0) selected--;
+    if (selected > 0) selected--;
+    if (selected === NA) selected = opts.length - 1;
   }
 </script>
 
 <!---------------------------------------->
 
 {#if options.size}
-  <div class={cls(AREA.WHOLE, status)}>
+  <div class={cls(PARTS.WHOLE, status)}>
     <div style="position: relative; width: fit-content; height: fit-content;">
       {#if action}
-        <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} use:action />
+        <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} 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(AREA.MAIN, status)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} />
+        <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} 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(AREA.BOTTOM, status)} id={idList} role="listbox" style={listboxStyle}>
+      <ul bind:this={listElem} class={cls(PARTS.BOTTOM, status)} id={idList} role="listbox" style={listboxStyle}>
         {#each opts as opt, i (opt)}
           {@const isSelected = i === selected}
           {@const labelStatus = isSelected ? STATE.ACTIVE : status}
           {@const onpointerenter = () => selected = i}
-          <li class={cls(AREA.LABEL, labelStatus)} aria-selected={isSelected} role="option" style={optionStyle} onpointerdown={apply} {onpointerenter}>
+          <li class={cls(PARTS.LABEL, labelStatus)} aria-selected={isSelected} role="option" style={optionStyle} onpointerdown={apply} {onpointerenter}>
             {opt}
           </li>
         {/each}

package/_svseeds/_ComboBox.svelte.d.ts

@@ -1,4 +1,4 @@
-export type ComboBoxProps = {
+export interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
     value?: string;
     expanded?: boolean;
@@ -7,13 +7,28 @@ export type ComboBoxProps = {
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
-};
+}
 export type ComboBoxReqdProps = "options";
 export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface ComboBoxProps {
+ *   options: SvelteSet<string> | Set<string>;
+ *   value?: string; // bindable
+ *   expanded?: boolean; // bindable
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLInputAttributes;
+ *   action?: Action;
+ *   element?: HTMLInputElement; // bindable
+ * }
+ * ```
+ */
 declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "expanded" | "value" | "status" | "element">;
 type ComboBox = ReturnType<typeof ComboBox>;
 export default ComboBox;

package/_svseeds/_ContextMenu.svelte

@@ -1,19 +1,33 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ContextMenuProps {
+    children: Snippet;
+    open?: boolean; // bindable <false>; to observe state, not to control
+    lock?: boolean; // bindable <false>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type ContextMenuProps = {
-    children: Snippet,
-    open?: boolean, // bindable <false>; to observe state, not to control
-    lock?: boolean, // bindable <false>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    element?: HTMLElement, // bindable
-  };
+  export interface ContextMenuProps {
+    children: Snippet;
+    open?: boolean; // bindable <false>; to observe state, not to control
+    lock?: boolean; // bindable <false>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLElement; // bindable
+  }
   export type ContextMenuReqdProps = "children";
   export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
 
   const preset = "svs-context-menu";
 
   import { type Snippet } from "svelte";
-  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
 </script>
 
 <!---------------------------------------->
@@ -22,12 +36,12 @@
   let { children, open = $bindable(false), lock = $bindable(false), status = $bindable(""), style, element = $bindable() }: ContextMenuProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   let position = $state({ x: 0, y: 0 });
 
   // *** Bind Handlers *** //
-  let visibility = $derived(open ? "visibility: open;" : "visibility: hidden; z-index: -9999;");
+  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}`);
 
   // *** Event Handlers *** //
@@ -46,6 +60,6 @@
 <!---------------------------------------->
 <svelte:document oncontextmenu={show} onclick={hide} />
 
-<nav class={cls(AREA.WHOLE, status)} style={dynStyle} bind:this={element}>
+<nav class={cls(PARTS.WHOLE, status)} style={dynStyle} bind:this={element}>
   {@render children()}
 </nav>

package/_svseeds/_ContextMenu.svelte.d.ts

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

package/_svseeds/_Disclosure.svelte

@@ -1,17 +1,34 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface DisclosureProps {
+    label: string | Snippet<[string]>; // Snippet<[status]>
+    children: Snippet;
+    open?: boolean; // bindable <false>
+    duration?: number; // <400>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLDetailsAttributes;
+    action?: Action;
+    element?: HTMLDetailsElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type DisclosureProps = {
-    label: string | Snippet<[string]>, // Snippet<[status]>
-    children: Snippet,
-    open?: boolean, // bindable <false>
-    duration?: number, // <400>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
+  export interface DisclosureProps {
+    label: string | Snippet<[string]>; // Snippet<[status]>
+    children: Snippet;
+    open?: boolean; // bindable <false>
+    duration?: number; // <400>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
     attributes?: HTMLDetailsAttributes;
-    action?: Action,
-    element?: HTMLDetailsElement, // bindable
-  };
+    action?: Action;
+    element?: HTMLDetailsElement; // bindable
+  }
   export type DisclosureReqdProps = "label" | "children";
-  export type DisclosureBindProps = "open" | "status" | "elementent";
+  export type DisclosureBindProps = "open" | "status" | "element";
 
   type DisclosureTarget = { currentTarget: EventTarget & HTMLDetailsElement };
   const preset = "svs-disclosure";
@@ -32,21 +49,19 @@
   import { type Action } from "svelte/action";
   import { type HTMLDetailsAttributes } from "svelte/elements";
   import { slide } from "svelte/transition";
-  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 { label, children, open = $bindable(false), duration = 400, status = $bindable(""), style, attributes, action, element = $bindable() }: DisclosureProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const attrs = omit(attributes, "class", "open", "ontoggle");
   const guard = new ToggleGurad();
   let hidden = $state(!open);
-  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
-  const initOpen = () => { if (element) element.open = open };
-  $effect(() => untrack(() => initOpen()));
+  let neutral = isNeutral(status) ? status : STATE.NEUTRAL;
 
   // *** Bind Handlers *** //
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
@@ -83,22 +98,23 @@
       open = true;
     }
   }
+  $effect(() => untrack(() => toggle(open)));
 </script>
 
 <!---------------------------------------->
 
 {#if action}
-  <details bind:this={element} class={cls(AREA.WHOLE, status)} {ontoggle} {...attrs} use:action>
+  <details bind:this={element} class={cls(PARTS.WHOLE, status)} {ontoggle} {...attrs} use:action>
     {@render inner()}
   </details>
 {:else}
-  <details bind:this={element} class={cls(AREA.WHOLE, status)} {ontoggle} {...attrs}>
+  <details bind:this={element} class={cls(PARTS.WHOLE, status)} {ontoggle} {...attrs}>
     {@render inner()}
   </details>
 {/if}
 
 {#snippet inner()}
-  <summary class={cls(AREA.LABEL, status)} {onclick}>
+  <summary class={cls(PARTS.LABEL, status)} {onclick}>
     {#if typeof label === "string"}
       {label}
     {:else if typeof label === "function"}
@@ -106,12 +122,12 @@
     {/if}
   </summary>
   {#if open}
-    <div class={cls(AREA.MAIN, status)} transition:slide={{ duration }}>
+    <div class={cls(PARTS.MAIN, status)} transition:slide={{ duration }}>
       {@render children()}
     </div>
   {/if}
   {#if hidden}
-    <div class={cls(AREA.MAIN, status)}>
+    <div class={cls(PARTS.MAIN, status)}>
       {@render children()}
     </div>
   {/if}

package/_svseeds/_Disclosure.svelte.d.ts

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

package/_svseeds/_HotkeyCapture.svelte

@@ -1,13 +1,28 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface HotkeyCaptureProps {
+    value?: string; // bindable
+    placeholder?: string;
+    active?: boolean; // bindable, <false>
+    disabled?: boolean; // bindable, <false>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLInputElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type HotkeyCaptureProps = {
-    value?: string, // bindable
-    placeholder?: string,
-    active?: boolean, // bindable, <false>
-    disabled?: boolean, // bindable, <false>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    element?: HTMLInputElement, // bindable
-  };
+  export interface HotkeyCaptureProps {
+    value?: string; // bindable
+    placeholder?: string;
+    active?: boolean; // bindable, <false>
+    disabled?: boolean; // bindable, <false>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLInputElement; // bindable
+  }
   export type HotkeyCaptureReqdProps = never;
   export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "status" | "element";
 
@@ -21,16 +36,16 @@
   }
 
   import { untrack } from "svelte";
-  import { type SVSStyle, STATE, AREA, fnClass, isNeutral } from "./core";
+  import { type SVSStyle, STATE, 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();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
-  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  let neutral = isNeutral(status) ? status : STATE.NEUTRAL;
 
   // *** Bind Handlers *** //
   $effect(() => { neutral = isNeutral(status) ? status : neutral });
@@ -90,4 +105,4 @@
 
 <!---------------------------------------->
 
-<input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" readonly={true} {placeholder} {disabled} {onkeydown} {onpointerdown} {onwheel} {oncontextmenu} {onfocus} {onblur} />
+<input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" readonly={true} {placeholder} {disabled} {onkeydown} {onpointerdown} {onwheel} {oncontextmenu} {onfocus} {onblur} />

package/_svseeds/_HotkeyCapture.svelte.d.ts

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