svseeds 0.4.7 → 0.4.9

package/_svseeds/_Slider.svelte.d.ts

@@ -1,19 +1,19 @@
 export interface SliderProps {
     range: Range;
-    left?: Snippet<[string, number, HTMLInputElement | undefined]>;
-    right?: Snippet<[string, number, HTMLInputElement | undefined]>;
+    left?: Snippet<[number, string, HTMLInputElement | undefined]>;
+    right?: Snippet<[number, string, HTMLInputElement | undefined]>;
     value?: number;
     step?: number | "any";
     options?: SvelteSet<number> | Set<number>;
     background?: Range;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type SliderReqdProps = "min" | "max";
-export type SliderBindProps = "min" | "max" | "value" | "status" | "element";
+export type SliderBindProps = "min" | "max" | "value" | "variant" | "element";
 export type Range = {
     min: number;
     max: number;
@@ -22,27 +22,27 @@ 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 SliderProps {
  *   range: Range; // bindable
- *   left?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
- *   right?: Snippet<[string, number, HTMLInputElement | undefined]>; // Snippet<[status,value,element]>
+ *   left?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
+ *   right?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,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;
+ *   background?: Range; // ({ min: 5, max: 95 }); linear-gradient rate limit of slider's track
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * type Range = { min: number, max: number };
  * ```
  */
-declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "status" | "range" | "element">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "variant" | "value" | "range" | "element">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/_svseeds/_Sortable.svelte

@@ -4,18 +4,18 @@
   ```ts
   interface SortableProps {
     items: SortableItems; // wrapper of string array as items to handle DnD
-    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, onpointerdown]>
+    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
     ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
     name?: string;        // name of this group (random string)
-    mode?: SortableMode;  // sort mode ("std"); "std","clone","swap"
+    mode?: SortableMode;  // sort mode ("std")
     accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
     sort?: boolean;       // enable sort within same group (true)
     multiple?: boolean;   // enable multiple select & drag with them (false)
     draggable?: boolean;  // enable default pointerdown handler (true)
     appendable?: boolean; // enable append when enter group area (false)
     confirm?: boolean     // enable confirm interval time to move items (false)
-    status?: string;      // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
   type SortableMode = "std" | "clone" | "swap";
   class SortableItems { // methods are same with array's
@@ -51,21 +51,21 @@
   type SortableMode = "std" | "clone" | "swap";
   export interface SortableProps {
     items: SortableItems; // wrapper of string array as items to handle DnD
-    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, onpointerdown]>
+    item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
     ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
     name?: string;        // name of this group (random string)
-    mode?: SortableMode;  // sort mode ("std"); "std","clone","swap"
+    mode?: SortableMode;  // sort mode ("std")
     accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
     sort?: boolean;       // enable sort within same group (true)
     multiple?: boolean;   // enable multiple select & drag with them (false)
     draggable?: boolean;  // enable default pointerdown handler (true)
     appendable?: boolean; // enable append when enter group area (false)
     confirm?: boolean     // enable confirm interval time to move items (false)
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
   export type SortableReqdProps = "items" | "item";
-  export type SortableBindProps = "status";
+  export type SortableBindProps = "variant";
 
   export class SortableItems {
     #inner: KeyValue[] = $state([]);
@@ -641,15 +641,15 @@
   import { on } from "svelte/events";
   import { type EasingFunction, crossfade } from "svelte/transition";
   import { flip } from "svelte/animate";
-  import { type SVSStyle, STATE, PARTS, fnClass, throttle } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, throttle } from "./core";
 </script>
 
 <script lang="ts">
-  let { items, item, ghost, name, mode = "std", accept, sort = true, multiple = false, draggable = true, appendable = false, confirm = false, status = $bindable(""), style }: SortableProps = $props();
+  let { items, item, ghost, name, mode = "std", accept, sort = true, multiple = false, draggable = true, appendable = false, confirm = false, styling, variant = $bindable("") }: SortableProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const group: KeyValue = SortableItems._newItem(name);
   const elems: HTMLElement[] = [];
   const shadow = new Shadow(ghost);
@@ -757,26 +757,26 @@
 
 <!---------------------------------------->
 
-<ul class={cls(PARTS.WHOLE, status)} onpointerenter={drag.active ? groupenter : undefined} onpointerleave={drag.active ? groupleave : undefined}>
+<ul class={cls(PARTS.WHOLE, variant)} onpointerenter={drag.active ? groupenter : undefined} onpointerleave={drag.active ? groupleave : undefined}>
   {#each items._inner as {key, value}, i (key)}
     {@const style = "touch-action:none;"}
-    {@const itemStatus = isSelected(key) ? STATE.ACTIVE : status}
+    {@const itemStatus = isSelected(key) ? VARIANT.ACTIVE : variant}
     {@const onpointerdown = draggable ? downF(key, elems[i]) : undefined}
     {@const onpointerenter = drag.active ? enterF(key) : undefined}
     {@const onpointerleave = drag.active ? leave : undefined}
     <li bind:this={elems[i]} class={cls(PARTS.MAIN, itemStatus)} in:s={{key}} out:r={{key}} animate:flip={tp} {style} {onpointerdown} {onpointerenter} {onpointerleave} {ondragstart}>
-      {@render item(itemStatus, value, downF(key, elems[i]))}
+      {@render item(value, itemStatus, downF(key, elems[i]))}
     </li>
   {/each}
 </ul>
 {#if shadow.rendering}
   {@const style = `opacity: 0.5; pointer-events: none; position: fixed; left: ${shadow.pt.x}px; top: ${shadow.pt.y}px; ${shadow.cssVisibility} ${shadow.cssSize}`}
   <ul style="display: contents;">
-    <li bind:this={shadow.elem} class={shadow.isGhost ? undefined : cls(PARTS.MAIN, status)} {style}>
+    <li bind:this={shadow.elem} class={shadow.isGhost ? undefined : cls(PARTS.MAIN, variant)} {style}>
       {#if shadow.isGhost}
         {@render ghost!(items._value(drag.key))}
       {:else}
-        {@render item(status, items._value(drag.key), ()=>cleanup())}
+        {@render item(items._value(drag.key), variant, ()=>cleanup())}
       {/if}
     </li>
   </ul>

package/_svseeds/_Sortable.svelte.d.ts

@@ -12,11 +12,11 @@ export interface SortableProps {
     draggable?: boolean;
     appendable?: boolean;
     confirm?: boolean;
-    status?: string;
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type SortableReqdProps = "items" | "item";
-export type SortableBindProps = "status";
+export type SortableBindProps = "variant";
 export declare class SortableItems {
     #private;
     constructor(values: string[]);
@@ -56,24 +56,24 @@ type KeyValue = {
 };
 type DragState = "ready" | "dragging" | "idle";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
  * interface SortableProps {
  *   items: SortableItems; // wrapper of string array as items to handle DnD
- *   item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[status, value, onpointerdown]>
+ *   item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
  *   ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
  *   name?: string;        // name of this group (random string)
- *   mode?: SortableMode;  // sort mode ("std"); "std","clone","swap"
+ *   mode?: SortableMode;  // sort mode ("std")
  *   accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
  *   sort?: boolean;       // enable sort within same group (true)
  *   multiple?: boolean;   // enable multiple select & drag with them (false)
  *   draggable?: boolean;  // enable default pointerdown handler (true)
  *   appendable?: boolean; // enable append when enter group area (false)
  *   confirm?: boolean     // enable confirm interval time to move items (false)
- *   status?: string;      // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
+ *   styling?: SVSClass;
+ *   variant?: string;     // bindable (VARIANT.NEUTRAL)
  * }
  * type SortableMode = "std" | "clone" | "swap";
  * class SortableItems { // methods are same with array's
@@ -94,6 +94,6 @@ import { type SVSStyle } from "./core";
  * }
  * ```
  */
-declare const Sortable: import("svelte").Component<SortableProps, {}, "status">;
+declare const Sortable: import("svelte").Component<SortableProps, {}, "variant">;
 type Sortable = ReturnType<typeof Sortable>;
 export default Sortable;

package/_svseeds/_Tabs.svelte

@@ -6,9 +6,9 @@
     labels?: string[];
     current?: number; // bindable (0)
     ariaOrientation?: "horizontal" | "vertical";
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
-    [key: string]: unknown | Snippet;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    [key: string]: unknown | Snippet; // labels or contents of each tab
   }
   ```
 -->
@@ -17,12 +17,12 @@
     labels?: string[];
     current?: number; // bindable (0)
     ariaOrientation?: "horizontal" | "vertical";
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
-    [key: string]: unknown | Snippet;
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+    [key: string]: unknown | Snippet; // labels or contents of each tab
   }
   export type TabsReqdProps = never;
-  export type TabsBindProps = "current" | "status";
+  export type TabsBindProps = "current" | "variant";
 
   type NamedId = { id: string, name: string };
   const preset = "svs-tabs";
@@ -37,27 +37,27 @@
   function toNamedId(names: string[]): NamedId[] {
     return names.map((x) => ({ id: elemId.id, name: x }));
   }
-  function correctCurrent(active: number, labels: string[]): number {
-    if (active <= 0) return 0;
-    if (active >= labels.length) return labels.length - 1;
-    return active;
+  function correctCurrent(current: number, tabs: NamedId[]): number {
+    if (!isUnsignedInteger(current)) return 0;
+    if (current >= tabs.length) return tabs.length - 1;
+    return current;
   }
 
   import { type Snippet } from "svelte";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, isUnsignedInteger } from "./core";
 </script>
 
 <script lang="ts">
-  let { labels = [], current = $bindable(0), ariaOrientation, status = $bindable(""), style, ...rest }: TabsProps = $props();
+  let { labels = [], current = $bindable(0), ariaOrientation, styling, variant = $bindable(""), ...rest }: TabsProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const isStrLabel = labels.length > 0;
   const tabs = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
   const panels = toNamedId(getSnippetNames(rolePanel, rest));
   const elems: HTMLButtonElement[] = [];
-  current = correctCurrent(current, labels);
+  current = correctCurrent(current, tabs);
   const isValidTabs = $derived(tabs.length && panels.length && tabs.length === panels.length);
 
   // *** Event Handlers *** //
@@ -79,11 +79,11 @@
 <!---------------------------------------->
 
 {#if isValidTabs}
-  <div class={cls(PARTS.WHOLE, status)}>
-    <div class={cls(PARTS.TOP, status)} role="tablist" aria-orientation={ariaOrientation}>
+  <div class={cls(PARTS.WHOLE, variant)}>
+    <div class={cls(PARTS.TOP, variant)} role="tablist" aria-orientation={ariaOrientation}>
       {#each tabs as { id, name }, i (id)}
         {@const selected = i === current}
-        {@const tabStatus = selected ? STATE.ACTIVE : status}
+        {@const tabStatus = selected ? VARIANT.ACTIVE : variant}
         <button bind:this={elems[i]} class={cls(PARTS.LABEL, tabStatus)} onclick={activate(i)} onkeydown={moveFocus(i)} tabindex={selected ? 0 : -1} aria-selected={selected} aria-controls={panels[i].id} type="button" role="tab" {id}>
           {#if isStrLabel}
             {name}
@@ -96,7 +96,7 @@
     {#each panels as { id, name }, i (id)}
       {@const selected = i === current}
       {@const style = selected ? undefined : "display: none;"}
-      <div class={cls(PARTS.MAIN, status)} aria-labelledby={tabs[i].id} role="tabpanel" tabindex={0} hidden={!selected} {id} {style}>
+      <div class={cls(PARTS.MAIN, variant)} aria-labelledby={tabs[i].id} role="tabpanel" tabindex={0} hidden={!selected} {id} {style}>
         {@render (rest[name] as Snippet)()}
       </div>
     {/each}

package/_svseeds/_Tabs.svelte.d.ts

@@ -2,14 +2,14 @@ export interface TabsProps {
     labels?: string[];
     current?: number;
     ariaOrientation?: "horizontal" | "vertical";
-    status?: string;
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;
     [key: string]: unknown | Snippet;
 }
 export type TabsReqdProps = never;
-export type TabsBindProps = "current" | "status";
+export type TabsBindProps = "current" | "variant";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
  * ```ts
@@ -17,12 +17,12 @@ import { type SVSStyle } from "./core";
  *   labels?: string[];
  *   current?: number; // bindable (0)
  *   ariaOrientation?: "horizontal" | "vertical";
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
- *   [key: string]: unknown | Snippet;
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ *   [key: string]: unknown | Snippet; // labels or contents of each tab
  * }
  * ```
  */
-declare const Tabs: import("svelte").Component<TabsProps, {}, "status" | "current">;
+declare const Tabs: import("svelte").Component<TabsProps, {}, "variant" | "current">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/_svseeds/_TagsInput.svelte

@@ -3,8 +3,8 @@
   default value: `(value)`
   ```ts
   interface TagsInputProps {
-    label?: Snippet<[string, string]>; // Snippet<[value,status]>
-    aux?: Snippet<[string, string]>; // Snippet<[value,status]>
+    label?: Snippet<[string, string]>; // Snippet<[value,variant]>
+    extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
     values?: string[]; // bindable
     value?: string; // bindable
     type?: "left" | "right"; // ("left")
@@ -13,11 +13,11 @@
     unique?: boolean; // (true)
     ariaErrMsgId?: string; // bindable
     events?: TagsInputEvents;
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   interface TagsInputEvents { // cancel if true
     onadd?: (values: string[], value: string) => void | boolean;
@@ -27,8 +27,8 @@
 -->
 <script module lang="ts">
   export interface TagsInputProps {
-    label?: Snippet<[string, string]>; // Snippet<[value,status]>
-    aux?: Snippet<[string, string]>; // Snippet<[value,status]>
+    label?: Snippet<[string, string]>; // Snippet<[value,variant]>
+    extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
     values?: string[]; // bindable
     value?: string; // bindable
     type?: "left" | "right"; // ("left")
@@ -37,14 +37,14 @@
     unique?: boolean; // (true)
     ariaErrMsgId?: string; // bindable
     events?: TagsInputEvents;
-    status?: string; // bindable (STATE.NEUTRAL)
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   export type TagsInputReqdProps = never;
-  export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
+  export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "variant" | "element";
   export interface TagsInputEvents { // cancel if true
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
@@ -58,15 +58,15 @@
   import { type Snippet } from "svelte";
   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 { label, aux, values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, status = $bindable(""), style, attributes, action, element = $bindable() }: TagsInputProps = $props();
+  let { label, extra, values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, attributes, action, element = $bindable(), styling, variant = $bindable("") }: TagsInputProps = $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, "class", "type", "onkeydown");
   const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
   let invalid = $derived(ariaErrMsgId ? true : undefined);
@@ -96,29 +96,29 @@
 
 <!---------------------------------------->
 
-<div class={cls(PARTS.WHOLE, status)}>
+<div class={cls(PARTS.WHOLE, variant)}>
   {@render tags(type === "left")}
   {#if action}
-    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} use:action />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} use:action />
   {:else}
-    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} />
   {/if}
   {@render tags(type === "right")}
 </div>
 
 {#snippet tags(render: boolean)}
   {#if render}
-    <span class={cls(type, status)}>
+    <span class={cls(PARTS.AUX, variant)}>
       {#each values as value, i}
-        <span class={cls(PARTS.LABEL, status)}>
+        <span class={cls(PARTS.LABEL, variant)}>
           {#if label}
-            {@render label(value, status)}
+            {@render label(value, variant)}
           {:else}
             {value}
           {/if}
-          <button class={cls(PARTS.AUX, status)} onclick={remove(i)}>
-            {#if aux}
-              {@render aux(value, status)}
+          <button class={cls(PARTS.EXTRA, variant)} onclick={remove(i)}>
+            {#if extra}
+              {@render extra(value, variant)}
             {:else}
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10"><path d="M511.998 70.682 441.315 0 256.002 185.313 70.685 0 .002 70.692l185.314 185.314L.002 441.318 70.69 512l185.312-185.312L441.315 512l70.683-70.682-185.314-185.312z" /></svg>
             {/if}

package/_svseeds/_TagsInput.svelte.d.ts

@@ -1,6 +1,6 @@
 export interface TagsInputProps {
     label?: Snippet<[string, string]>;
-    aux?: Snippet<[string, string]>;
+    extra?: Snippet<[string, string]>;
     values?: string[];
     value?: string;
     type?: "left" | "right";
@@ -9,14 +9,14 @@ export interface TagsInputProps {
     unique?: boolean;
     ariaErrMsgId?: string;
     events?: TagsInputEvents;
-    status?: string;
-    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
 }
 export type TagsInputReqdProps = never;
-export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
+export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "variant" | "element";
 export interface TagsInputEvents {
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
@@ -24,13 +24,13 @@ export interface TagsInputEvents {
 import { type Snippet } from "svelte";
 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 TagsInputProps {
- *   label?: Snippet<[string, string]>; // Snippet<[value,status]>
- *   aux?: Snippet<[string, string]>; // Snippet<[value,status]>
+ *   label?: Snippet<[string, string]>; // Snippet<[value,variant]>
+ *   extra?: Snippet<[string, string]>; // Snippet<[value,variant]>
  *   values?: string[]; // bindable
  *   value?: string; // bindable
  *   type?: "left" | "right"; // ("left")
@@ -39,11 +39,11 @@ import { type SVSStyle } from "./core";
  *   unique?: boolean; // (true)
  *   ariaErrMsgId?: string; // bindable
  *   events?: TagsInputEvents;
- *   status?: string; // bindable (STATE.NEUTRAL)
- *   style?: SVSStyle;
  *   attributes?: HTMLInputAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * interface TagsInputEvents { // cancel if true
  *   onadd?: (values: string[], value: string) => void | boolean;
@@ -51,6 +51,6 @@ import { type SVSStyle } from "./core";
  * }
  * ```
  */
-declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value" | "status" | "element" | "values" | "ariaErrMsgId">;
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "variant" | "value" | "element" | "values" | "ariaErrMsgId">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;