svseeds 0.4.6 → 0.4.8

package/_svseeds/_ColorPicker.svelte

@@ -1,15 +1,15 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface ColorPickerProps {
-    value?: string; // bindable <"#000000">
-    alpha?: number; // bindable <1>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    value?: string; // bindable ("#000000")
+    alpha?: number; // bindable (1)
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
   ```ts
@@ -20,16 +20,16 @@
 -->
 <script module lang="ts">
   export interface ColorPickerProps {
-    value?: string; // bindable <"#000000">
-    alpha?: number; // bindable <1>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    value?: string; // bindable ("#000000")
+    alpha?: number; // bindable (1)
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type ColorPickerReqdProps = never;
-  export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
+  export type ColorPickerBindProps = "value" | "alpha" | "variant" | "element";
   export function getHex(rgb: RgbColor): string {
     if (!isValidRgb(rgb)) return DEFAULT_COLOR;
     return "#" + (1 << 24 | rgb[0] << 16 | rgb[1] << 8 | rgb[2]).toString(16).slice(1);
@@ -62,15 +62,15 @@
 
   import { type Action } from "svelte/action";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { value = $bindable(DEFAULT_COLOR), alpha = $bindable(1), status = $bindable(""), style, attributes, action, element = $bindable() }: ColorPickerProps = $props();
+  let { value = $bindable(DEFAULT_COLOR), alpha = $bindable(1), attributes, action, element = $bindable(), styling, variant = $bindable("") }: ColorPickerProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "type");
   value = castValidHex(value) ?? DEFAULT_COLOR;
 
@@ -81,9 +81,9 @@
 
 <!---------------------------------------->
 
-<label class={cls(PARTS.WHOLE, status)}>
+<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.MAIN, status)} style={`background-color: rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alp})`}>
+    <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 />
       {:else}

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -1,30 +1,30 @@
 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>`
+ * default value: `(value)`
  * ```ts
  * interface ColorPickerProps {
- *   value?: string; // bindable <"#000000">
- *   alpha?: number; // bindable <1>
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
+ *   value?: string; // bindable ("#000000")
+ *   alpha?: number; // bindable (1)
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  * ```ts
@@ -33,6 +33,6 @@ import { type SVSStyle } from "./core";
  * // getHex([255, 123, 34]) => "#ff7b22"
  * ```
  */
-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

@@ -1,16 +1,16 @@
 <!--
   @component
-  default value: `<value>`
+  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
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
@@ -19,14 +19,14 @@
     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
+    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;
@@ -36,15 +36,15 @@
   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, value = $bindable(""), expanded = $bindable(false), 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);
@@ -110,17 +110,17 @@
 <!---------------------------------------->
 
 {#if options.size}
-  <div class={cls(PARTS.WHOLE, status)}>
+  <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, 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, 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, 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, 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, status)} id={idList} role="listbox" style={listboxStyle}>
+      <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 ? STATE.ACTIVE : status}
+          {@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}

package/_svseeds/_ComboBox.svelte.d.ts

@@ -2,33 +2,33 @@ export interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
     value?: string;
     expanded?: boolean;
-    status?: string;
-    style?: SVSStyle;
     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 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>`
+ * 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
+ *   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

@@ -1,43 +1,43 @@
 <!--
   @component
-  default value: `<value>`
+  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;
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false); to observe state, not to control
+    lock?: boolean; // bindable (false)
     element?: HTMLElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <script module lang="ts">
   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;
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false); to observe state, not to control
+    lock?: boolean; // bindable (false)
     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>`
+ * 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;
+ *   children: Snippet<[string]>; // Snippet<[variant]>
+ *   open?: boolean; // bindable (false); to observe state, not to control
+ *   lock?: boolean; // bindable (false)
  *   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

@@ -1,36 +1,37 @@
 <!--
   @component
-  default value: `<value>`
+  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;
+    label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false)
+    duration?: number; // (400)
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
 <script module lang="ts">
   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;
+    label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false)
+    duration?: number; // (400)
     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(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<[string]>;
-    children: Snippet;
+    label: string | Snippet<[boolean, string]>;
+    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>`
+ * 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;
+ *   label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
+ *   children: Snippet<[string]>; // Snippet<[variant]>
+ *   open?: boolean; // bindable (false)
+ *   duration?: number; // (400)
  *   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

@@ -1,15 +1,15 @@
 <!--
   @component
-  default value: `<value>`
+  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;
+    active?: boolean; // bindable, (false)
+    disabled?: boolean; // bindable, (false)
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
 -->
@@ -17,14 +17,14 @@
   export interface HotkeyCaptureProps {
     value?: string; // bindable
     placeholder?: string;
-    active?: boolean; // bindable, <false>
-    disabled?: boolean; // bindable, <false>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    active?: boolean; // bindable, (false)
+    disabled?: boolean; // bindable, (false)
     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} />