svseeds 0.4.7 → 0.4.9

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -1,38 +1,39 @@
 export interface ColorPickerProps {
     value?: string;
     alpha?: number;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ColorPickerReqdProps = never;
-export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
+export type ColorPickerBindProps = "value" | "alpha" | "variant" | "element";
 export declare function getHex(rgb: RgbColor): string;
 type RgbColor = [number, number, number];
 import { type Action } from "svelte/action";
 import { type HTMLInputAttributes } from "svelte/elements";
-import { type SVSStyle } from "./core";
+import { type SVSClass } 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
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  * ```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, {}, "alpha" | "value" | "status" | "element">;
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "variant" | "alpha" | "value" | "element">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/_svseeds/_ComboBox.svelte

@@ -4,47 +4,51 @@
   ```ts
   interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
+    extra?: Snippet<[boolean, string]>; // Snippet<[expanded,variant]>
     value?: string; // bindable
     expanded?: boolean; // bindable
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    search?: boolean // (true)
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <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
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    search?: boolean // (true)
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ComboBoxReqdProps = "options";
-  export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
+  export type ComboBoxBindProps = "value" | "expanded" | "variant" | "element";
 
   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";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { options, value = $bindable(""), expanded = $bindable(false), status = $bindable(""), style, attributes, action, element = $bindable() }: ComboBoxProps = $props();
+  let { options, extra, value = $bindable(""), expanded = $bindable(false), search = true, attributes, action, element = $bindable(), styling, variant = $bindable("") }: ComboBoxProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const idList = elemId.id;
   const attrs = omit(attributes, "class", "type", "value", "list", "role", "aria-haspopup", "aria-autocomplete", "aria-controls", "aria-expanded");
   let selected = $state(NA);
@@ -52,25 +56,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;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 +84,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 +123,29 @@
 </script>
 
 <!---------------------------------------->
+<svelte:document onscroll={() => close()} />
 
 {#if options.size}
-  <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(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(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(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(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;margin:auto 0;top:0%;right:0%;">
+        {@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" style={optionStyle} onpointerdown={apply} {onpointerenter}>
+          {opt}
+        </li>
+      {/each}
+    </ul>
+  </span>
 {/if}

package/_svseeds/_ComboBox.svelte.d.ts

@@ -1,34 +1,39 @@
 export interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
+    extra?: Snippet<[boolean, string]>;
     value?: string;
     expanded?: boolean;
-    status?: string;
-    style?: SVSStyle;
+    search?: boolean;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type ComboBoxReqdProps = "options";
-export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
+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";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface ComboBoxProps {
  *   options: SvelteSet<string> | Set<string>;
+ *   extra?: Snippet<[boolean, string]>; // Snippet<[expanded,variant]>
  *   value?: string; // bindable
  *   expanded?: boolean; // bindable
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
+ *   search?: boolean // (true)
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "expanded" | "value" | "status" | "element">;
+declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "variant" | "expanded" | "value" | "element">;
 type ComboBox = ReturnType<typeof ComboBox>;
 export default ComboBox;

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} />