svseeds 0.4.1 → 0.4.3

package/_svseeds/_Modal.svelte

@@ -1,28 +1,44 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ModalProps {
+    children: Snippet;
+    open?: boolean; // bindable <false>
+    closable?: boolean; // <true>
+    trigger?: HTMLElement; // bindable
+    ariaLabel?: string;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLDialogElement; // bindable
+  }
+  ```
+-->
 <script module lang="ts">
-  export type ModalProps = {
-    children: Snippet,
-    label?: string, // for aria-label
-    open?: boolean, // bindable <false>
-    closable?: boolean, // <true>
-    trigger?: HTMLElement, // bindable
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    element?: HTMLDialogElement, // bindable
-  };
+  export interface ModalProps {
+    children: Snippet;
+    open?: boolean; // bindable <false>
+    closable?: boolean; // <true>
+    trigger?: HTMLElement; // bindable
+    ariaLabel?: string;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLDialogElement; // bindable
+  }
   export type ModalReqdProps = "children";
   export type ModalBindProps = "open" | "status" | "element";
 
   const preset = "svs-modal";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, label, open = $bindable(false), closable = true, trigger = $bindable(), status = $bindable(""), style, element = $bindable() }: ModalProps = $props();
+  let { children, open = $bindable(false), closable = true, trigger = $bindable(), ariaLabel, status = $bindable(""), style, element = $bindable() }: ModalProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
 
   // *** Bind Handlers *** //
@@ -48,13 +64,14 @@
   function onclose() {
     open = false;
   }
+  $effect(() => untrack(() => { if (open) element?.showModal(); }));
 </script>
 
 <!---------------------------------------->
 
 <!-- svelte-ignore a11y_autofocus -->
-<dialog bind:this={element} class={cls(AREA.WHOLE, status)} aria-label={label} {onclick} {onkeydown} {onclose} autofocus={true}>
-  <div class={cls(AREA.MAIN, status)}>
+<dialog bind:this={element} class={cls(PARTS.WHOLE, status)} aria-label={ariaLabel} {onclick} {onkeydown} {onclose} autofocus={true}>
+  <div class={cls(PARTS.MAIN, status)}>
     {@render children()}
   </div>
 </dialog>

package/_svseeds/_Modal.svelte.d.ts

@@ -1,17 +1,32 @@
-export type ModalProps = {
+export interface ModalProps {
     children: Snippet;
-    label?: string;
     open?: boolean;
     closable?: boolean;
     trigger?: HTMLElement;
+    ariaLabel?: string;
     status?: string;
     style?: SVSStyle;
     element?: HTMLDialogElement;
-};
+}
 export type ModalReqdProps = "children";
 export type ModalBindProps = "open" | "status" | "element";
 import { type Snippet } from "svelte";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface ModalProps {
+ *   children: Snippet;
+ *   open?: boolean; // bindable <false>
+ *   closable?: boolean; // <true>
+ *   trigger?: HTMLElement; // bindable
+ *   ariaLabel?: string;
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   element?: HTMLDialogElement; // bindable
+ * }
+ * ```
+ */
 declare const Modal: import("svelte").Component<ModalProps, {}, "open" | "status" | "element" | "trigger">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/_svseeds/_ProgressTracker.svelte

@@ -1,13 +1,28 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface ProgressTrackerProps {
+    current: number; // bindable <0>
+    labels: string[];
+    aux?: Snippet<[string, number]>; // Snippet<[status,index]>
+    extra?: Snippet<[string, number]>; // Snippet<[status,index]>
+    status?: string; // bindable <STATE.NEUTRAL>
+    eachStatus?: SvelteMap<number, string> | Map<number, string>;
+    style?: SVSStyle;
+  }
+  ```
+-->
 <script module lang="ts">
-  export type ProgressTrackerProps = {
-    current: number, // bindable <0>
-    labels: string[],
-    aux?: Snippet<[string, number]>, // Snippet<[status,index]>
-    extra?: Snippet<[string, number]>, // Snippet<[status,index]>
-    status?: string, // bindable <STATE.DEFAULT>
-    eachStatus?: SvelteMap<number, string> | Map<number, string>,
-    style?: SVSStyle,
-  };
+  export interface ProgressTrackerProps {
+    current: number; // bindable <0>
+    labels: string[];
+    aux?: Snippet<[string, number]>; // Snippet<[status,index]>
+    extra?: Snippet<[string, number]>; // Snippet<[status,index]>
+    status?: string; // bindable <STATE.NEUTRAL>
+    eachStatus?: SvelteMap<number, string> | Map<number, string>;
+    style?: SVSStyle;
+  }
   export type ProgressTrackerReqdProps = "current" | "labels";
   export type ProgressTrackerBindProps = "current" | "status";
 
@@ -15,14 +30,14 @@
 
   import { type Snippet } from "svelte";
   import { type SvelteMap } from "svelte/reactivity";
-  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
 </script>
 
 <script lang="ts">
   let { current = $bindable(0), labels, aux, extra, status = $bindable(""), eachStatus, style }: ProgressTrackerProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
 
   // *** Status *** //
@@ -37,19 +52,19 @@
 <!---------------------------------------->
 
 {#if labels.length}
-  <ol class={cls(AREA.WHOLE, status)}>
+  <ol class={cls(PARTS.WHOLE, status)}>
     {#each labels as label, i}
       {@const stat = getEachStatus(i)}
       {#if i > current}
         {@render separator(i)}
       {/if}
-      <li class={cls(AREA.MAIN, stat)} aria-current={i === current ? "step" : false}>
+      <li class={cls(PARTS.MAIN, stat)} aria-current={i === current ? "step" : false}>
         {#if aux}
-          <div class={cls(AREA.AUX, stat)}>
+          <div class={cls(PARTS.AUX, stat)}>
             {@render aux(stat, i)}
           </div>
         {/if}
-        <div class={cls(AREA.LABEL, stat)}>
+        <div class={cls(PARTS.LABEL, stat)}>
           {label}
         </div>
       </li>
@@ -63,7 +78,7 @@
 {#snippet separator(i: number)}
   {#if extra}
     {@const stat = i < current ? STATE.ACTIVE : STATE.INACTIVE}
-    <li class={cls(AREA.EXTRA, stat)} role="separator">
+    <li class={cls(PARTS.EXTRA, stat)} role="separator">
       {@render extra(stat, i)}
     </li>
   {/if}

package/_svseeds/_ProgressTracker.svelte.d.ts

@@ -1,4 +1,4 @@
-export type ProgressTrackerProps = {
+export interface ProgressTrackerProps {
     current: number;
     labels: string[];
     aux?: Snippet<[string, number]>;
@@ -6,12 +6,26 @@ export type ProgressTrackerProps = {
     status?: string;
     eachStatus?: SvelteMap<number, string> | Map<number, string>;
     style?: SVSStyle;
-};
+}
 export type ProgressTrackerReqdProps = "current" | "labels";
 export type ProgressTrackerBindProps = "current" | "status";
 import { type Snippet } from "svelte";
 import { type SvelteMap } from "svelte/reactivity";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface ProgressTrackerProps {
+ *   current: number; // bindable <0>
+ *   labels: string[];
+ *   aux?: Snippet<[string, number]>; // Snippet<[status,index]>
+ *   extra?: Snippet<[string, number]>; // Snippet<[status,index]>
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   eachStatus?: SvelteMap<number, string> | Map<number, string>;
+ *   style?: SVSStyle;
+ * }
+ * ```
+ */
 declare const ProgressTracker: import("svelte").Component<ProgressTrackerProps, {}, "status" | "current">;
 type ProgressTracker = ReturnType<typeof ProgressTracker>;
 export default ProgressTracker;

package/_svseeds/_SelectField.svelte

@@ -1,21 +1,45 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface SelectFieldProps {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    value?: string; // bindable
+    validations?: SelectFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLSelectAttributes;
+    action?: Action;
+    element?: HTMLSelectElement; // bindable
+  }
+  type SelectFieldValidation = (value: string, validity: ValidityState) => string;
+  ```
+-->
 <script module lang="ts">
-  export type SelectFieldProps = {
-    options: SvelteMap<string, string> | Map<string, string>,
-    label?: string,
-    extra?: string,
-    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
-    left?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
-    right?: Snippet<[string, string, HTMLSelectElement | undefined]>, // Snippet<[status,value,element]>
-    bottom?: string,
-    descFirst?: boolean, // <false>
-    value?: string, // bindable
-    validations?: SelectFieldValidation[],
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
+  export interface SelectFieldProps {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    value?: string; // bindable
+    validations?: SelectFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
     attributes?: HTMLSelectAttributes;
-    action?: Action,
-    element?: HTMLSelectElement, // bindable
-  };
+    action?: Action;
+    element?: HTMLSelectElement; // bindable
+  }
   export type SelectFieldReqdProps = "options";
   export type SelectFieldBindProps = "value" | "status" | "element";
   export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
@@ -26,14 +50,14 @@
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
   import { type HTMLSelectAttributes } 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 { options, label, extra, aux, left, right, bottom, descFirst = false, value = $bindable(""), validations = [], status = $bindable(""), style, attributes, action, element = $bindable() }: SelectFieldProps = $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());
@@ -43,7 +67,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);
@@ -85,20 +109,20 @@
 <!---------------------------------------->
 
 {#if opts.length}
-  <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>
@@ -106,10 +130,10 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <span class={cls(AREA.LABEL, status)} id={idLabel}>
+    <span class={cls(PARTS.LABEL, status)} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
       {/if}
     </span>
   {/if}
@@ -120,7 +144,7 @@
   {/if}
 {/snippet}
 {#snippet main()}
-  {@const c = cls(AREA.MAIN, status)}
+  {@const c = cls(PARTS.MAIN, status)}
   {#if action}
     <select bind:value bind:this={element} class={c} {id} {oninvalid} {...attrs} aria-describedby={idDesc} aria-invalid={invalid} aria-errormessage={idMsg} use:action>
       {@render option()}
@@ -138,6 +162,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/_SelectField.svelte.d.ts

@@ -1,4 +1,4 @@
-export type SelectFieldProps = {
+export interface SelectFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
     label?: string;
     extra?: string;
@@ -14,7 +14,7 @@ export type SelectFieldProps = {
     attributes?: HTMLSelectAttributes;
     action?: Action;
     element?: HTMLSelectElement;
-};
+}
 export type SelectFieldReqdProps = "options";
 export type SelectFieldBindProps = "value" | "status" | "element";
 export type SelectFieldValidation = (value: string, validity: ValidityState) => string;
@@ -23,6 +23,29 @@ import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLSelectAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface SelectFieldProps {
+ *   options: SvelteMap<string, string> | Map<string, string>;
+ *   label?: string;
+ *   extra?: string;
+ *   aux?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+ *   left?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+ *   right?: Snippet<[string, string, HTMLSelectElement | undefined]>; // Snippet<[status,value,element]>
+ *   bottom?: string;
+ *   descFirst?: boolean; // <false>
+ *   value?: string; // bindable
+ *   validations?: SelectFieldValidation[];
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLSelectAttributes;
+ *   action?: Action;
+ *   element?: HTMLSelectElement; // bindable
+ * }
+ * type SelectFieldValidation = (value: string, validity: ValidityState) => string;
+ * ```
+ */
 declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "value" | "status" | "element">;
 type SelectField = ReturnType<typeof SelectField>;
 export default SelectField;

package/_svseeds/_Slider.svelte

@@ -1,18 +1,39 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface SliderProps {
+    range: Range; // bindable
+    left?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+    value?: number; // bindable <min+((max-min)/2)>
+    step?: number | "any"; // <1>
+    options?: SvelteSet<number> | Set<number>;
+    background?: Range; // <{ min: 5, max: 95 }>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+  }
+  type Range = { min: number, max: number };
+  ```
+-->
 <script module lang="ts">
-  export type SliderProps = {
-    range: Range, // bindable
-    left?: Snippet<[string, number, HTMLInputElement | undefined]>, // Snippet<[status,value,element]>
-    right?: Snippet<[string, number, HTMLInputElement | undefined]>, // Snippet<[status,value,element]>
-    value?: number, // bindable <min+((max-min)/2)>
-    step?: number | "any", // <1>
-    options?: SvelteSet<number> | Set<number>,
-    background?: Range, // <{ min: 5, max: 95 }>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    attributes?: HTMLInputAttributes,
-    action?: Action,
-    element?: HTMLInputElement, // bindable
-  };
+  export interface SliderProps {
+    range: Range; // bindable
+    left?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+    right?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+    value?: number; // bindable <min+((max-min)/2)>
+    step?: number | "any"; // <1>
+    options?: SvelteSet<number> | Set<number>;
+    background?: Range; // <{ min: 5, max: 95 }>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+  }
   export type SliderReqdProps = "min" | "max";
   export type SliderBindProps = "min" | "max" | "value" | "status" | "element";
   export type Range = { min: number, max: number };
@@ -23,14 +44,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 { range = $bindable(), left, right, value = $bindable(), step = 1, options, background = { min: 5, max: 95 }, status = $bindable(""), style, attributes, action, element = $bindable()}: SliderProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const idList = elemId.get(options?.size);
   const attrs = omit(attributes, "class", "type", "value", "min", "max", "step", "list");
@@ -39,17 +60,17 @@
 
   // *** Bind Handlers *** //
   let rate = $derived(Math.trunc(background.min + ((value - range.min) / (range.max - range.min)) * (background.max - background.min)));
-  let dynStyle = $derived(`background:linear-gradient(to right, var(--color-active) ${rate}%, var(--color-inactive) ${rate}%);`);
+  let dynStyle = $derived(`background: linear-gradient(to right, var(--color-active) ${rate}%, var(--color-inactive) ${rate}%);`);
 </script>
 
 <!---------------------------------------->
 
-<span class={cls(AREA.WHOLE, status)}>
-  {@render side(AREA.LEFT, left)}
+<span class={cls(PARTS.WHOLE, status)}>
+  {@render side(PARTS.LEFT, left)}
   {#if action}
-    <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} use:action />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} use:action />
   {:else}
-    <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} style={dynStyle} list={idList} type="range" min={range.min} max={range.max} {step} {...attrs} />
   {/if}
   {#if options?.size}
     <datalist id={idList}>
@@ -58,7 +79,7 @@
       {/each}
     </datalist>
   {/if}
-  {@render side(AREA.RIGHT, right)}
+  {@render side(PARTS.RIGHT, right)}
 </span>
 
 {#snippet side(area: string, body?: Snippet<[string, number, HTMLInputElement | undefined]>)}

package/_svseeds/_Slider.svelte.d.ts

@@ -1,4 +1,4 @@
-export type SliderProps = {
+export interface SliderProps {
     range: Range;
     left?: Snippet<[string, number, HTMLInputElement | undefined]>;
     right?: Snippet<[string, number, HTMLInputElement | undefined]>;
@@ -11,7 +11,7 @@ export type SliderProps = {
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
-};
+}
 export type SliderReqdProps = "min" | "max";
 export type SliderBindProps = "min" | "max" | "value" | "status" | "element";
 export type Range = {
@@ -23,6 +23,26 @@ 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 SliderProps {
+ *   range: Range; // bindable
+ *   left?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+ *   right?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+ *   value?: number; // bindable <min+((max-min)/2)>
+ *   step?: number | "any"; // <1>
+ *   options?: SvelteSet<number> | Set<number>;
+ *   background?: Range; // <{ min: 5, max: 95 }>
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLInputAttributes;
+ *   action?: Action;
+ *   element?: HTMLInputElement; // bindable
+ * }
+ * type Range = { min: number, max: number };
+ * ```
+ */
 declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "status" | "range" | "element">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;