svseeds 0.4.6 → 0.4.8

package/_svseeds/Accordion.svelte

@@ -1,14 +1,14 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface AccordionProps {
     labels?: string[];
-    current?: number; // bindable <-1>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    current?: number; // bindable (-1)
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: AccordionDeps;
-    [key: string]: unknown | Snippet;
+    [key: string]: unknown | Snippet; // labels or contents of each disclosure
   }
   interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
@@ -18,17 +18,17 @@
 <script module lang="ts">
   export interface AccordionProps {
     labels?: string[];
-    current?: number; // bindable <-1>
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
+    current?: number; // bindable (-1)
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: AccordionDeps;
-    [key: string]: unknown | Snippet;
+    [key: string]: unknown | Snippet; // labels or contents of each disclosure
   }
   export interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
   }
   export type AccordionReqdProps = never;
-  export type AccordionBindProps = "current" | "status";
+  export type AccordionBindProps = "current" | "variant";
 
   type NamedId = { id: string, name: string };
   const preset = "svs-accordion";
@@ -45,16 +45,16 @@
   }
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, omit } from "./core";
   import Disclosure, { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 </script>
 
 <script lang="ts">
-  let { labels = [], current = $bindable(-1), status = $bindable(""), style, deps, ...rest }: AccordionProps = $props();
+  let { labels = [], current = $bindable(-1), styling, variant = $bindable(""), deps, ...rest }: AccordionProps = $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 lbls = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
   const panels = getSnippetNames(rolePanel, rest);
@@ -66,8 +66,8 @@
 
   // *** Initialize Deps *** //
   const svsDisclosure = {
-    ...omit(deps?.svsDisclosure, "attributes", "style"),
-    style: deps?.svsDisclosure?.style ?? `${preset} svs-disclosure`,
+    ...omit(deps?.svsDisclosure, "attributes", "styling"),
+    styling: deps?.svsDisclosure?.styling ?? `${preset} svs-disclosure`,
   };
 
   // *** Bind Handlers *** //
@@ -101,7 +101,7 @@
 <!---------------------------------------->
 
 {#if isValidAccordion}
-  <div class={cls(PARTS.WHOLE, status)} role="group">
+  <div class={cls(PARTS.WHOLE, variant)} role="group">
     {#each lbls as { id, name }, i (id)}
       {@const ontoggle = exclusiveToggle(i)}
       <Disclosure bind:open={opens[i]} bind:element={elems[i]} label={isStrLabel ? name : (rest[name] as Snippet)} attributes={{...deps?.svsDisclosure?.attributes, ontoggle}} {...svsDisclosure}>

package/_svseeds/Accordion.svelte.d.ts

@@ -1,8 +1,8 @@
 export interface AccordionProps {
     labels?: string[];
     current?: number;
-    status?: string;
-    style?: SVSStyle;
+    styling?: SVSClass;
+    variant?: string;
     deps?: AccordionDeps;
     [key: string]: unknown | Snippet;
 }
@@ -10,26 +10,26 @@ export interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
 }
 export type AccordionReqdProps = never;
-export type AccordionBindProps = "current" | "status";
+export type AccordionBindProps = "current" | "variant";
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
+import { type SVSClass } from "./core";
 import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface AccordionProps {
  *   labels?: string[];
- *   current?: number; // bindable <-1>
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
+ *   current?: number; // bindable (-1)
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: AccordionDeps;
- *   [key: string]: unknown | Snippet;
+ *   [key: string]: unknown | Snippet; // labels or contents of each disclosure
  * }
  * interface AccordionDeps {
  *   svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
  * }
  * ```
  */
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "status" | "current">;
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "variant" | "current">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/_svseeds/DarkToggle.svelte

@@ -1,11 +1,11 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface DarkToggleProps {
-    dark?: boolean; // bindable <(prefers-color-scheme)>
-    status?: string; // bindable <STATE.NEUTRAL>
+    dark?: boolean; // bindable (prefers-color-scheme)
     element?: HTMLButtonElement; // bindable
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: DarkToggleDeps;
   }
   interface DarkToggleDeps {
@@ -15,16 +15,16 @@
 -->
 <script module lang="ts">
   export interface DarkToggleProps {
-    dark?: boolean; // bindable <(prefers-color-scheme)>
-    status?: string; // bindable <STATE.NEUTRAL>
+    dark?: boolean; // bindable (prefers-color-scheme)
     element?: HTMLButtonElement; // bindable
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: DarkToggleDeps;
   }
   export interface DarkToggleDeps {
     svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
   }
   export type DarkToggleReqdProps = never;
-  export type DarkToggleBindProps = "dark" | "status" | "element";
+  export type DarkToggleBindProps = "dark" | "variant" | "element";
 
   export const THEME = { LIGHT: "light", DARK: "dark" } as const;
   export function setThemeToRoot(theme?: string) {
@@ -137,22 +137,22 @@
   }
   const theme = new Theme();
 
-  import { STATE, omit } from "./core";
+  import { VARIANT, omit } from "./core";
   import Toggle, { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
 </script>
 
 <script lang="ts">
-  let { dark = $bindable(), status = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
+  let { dark = $bindable(), variant = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
+  if (!variant) variant = VARIANT.NEUTRAL;
   if (dark === undefined) dark = theme.dark;
   theme.dark = dark;
 
   // *** Initialize Deps *** //
   const svsToggle = {
-    ...omit(deps?.svsToggle, "main", "style", "attributes"),
-    style: deps?.svsToggle?.style ?? `${preset} svs-toggle`,
+    ...omit(deps?.svsToggle, "children", "styling", "attributes"),
+    styling: deps?.svsToggle?.styling ?? `${preset} svs-toggle`,
     ariaLabel,
     attributes: {
       ...deps?.svsToggle?.attributes,
@@ -165,10 +165,10 @@
 
 <!---------------------------------------->
 
-<Toggle bind:value={dark} bind:status bind:element {...svsToggle}>
-  {#snippet main(status: string, value: boolean, element: HTMLButtonElement | undefined)}
-    {#if deps?.svsToggle?.main}
-      {@render deps.svsToggle.main(status, value, element)}
+<Toggle bind:value={dark} bind:variant bind:element {...svsToggle}>
+  {#snippet children(value: boolean, variant: string, element: HTMLButtonElement | undefined)}
+    {#if deps?.svsToggle?.children}
+      {@render deps.svsToggle.children(value, variant, element)}
     {:else}
       {#if value}
         {@render svgDark()}

package/_svseeds/DarkToggle.svelte.d.ts

@@ -1,14 +1,14 @@
 export interface DarkToggleProps {
     dark?: boolean;
-    status?: string;
     element?: HTMLButtonElement;
+    variant?: string;
     deps?: DarkToggleDeps;
 }
 export interface DarkToggleDeps {
     svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
 }
 export type DarkToggleReqdProps = never;
-export type DarkToggleBindProps = "dark" | "status" | "element";
+export type DarkToggleBindProps = "dark" | "variant" | "element";
 export declare const THEME: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
@@ -16,12 +16,12 @@ export declare const THEME: {
 export declare function setThemeToRoot(theme?: string): void;
 import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface DarkToggleProps {
- *   dark?: boolean; // bindable <(prefers-color-scheme)>
- *   status?: string; // bindable <STATE.NEUTRAL>
+ *   dark?: boolean; // bindable (prefers-color-scheme)
  *   element?: HTMLButtonElement; // bindable
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: DarkToggleDeps;
  * }
  * interface DarkToggleDeps {
@@ -29,6 +29,6 @@ import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./
  * }
  * ```
  */
-declare const DarkToggle: import("svelte").Component<DarkToggleProps, {}, "status" | "element" | "dark">;
+declare const DarkToggle: import("svelte").Component<DarkToggleProps, {}, "variant" | "element" | "dark">;
 type DarkToggle = ReturnType<typeof DarkToggle>;
 export default DarkToggle;

package/_svseeds/TagsInputField.svelte

@@ -1,30 +1,30 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface TagsInputFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
-    left?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
-    right?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
+    aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     values?: string[]; // bindable
     min?: TagsInputFieldCountValidation;
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: TagsInputFieldDeps;
   }
   interface TagsInputFieldDeps extends TagsInputDeps {
     svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
   }
-  type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
-  type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+  type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
+  type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
   type TagsInputFieldCountValidation = {
     value: number;
     message: string;
@@ -35,43 +35,43 @@
   export interface TagsInputFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
-    left?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
-    right?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
+    aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+    right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     values?: string[]; // bindable
     min?: TagsInputFieldCountValidation;
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
     element?: HTMLInputElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: TagsInputFieldDeps;
   }
-  export interface TagsInputFieldDeps extends TagsInputDeps {
-    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
+  export interface TagsInputFieldDeps {
+    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps>;
   }
   export type TagsInputFieldReqdProps = never;
-  export type TagsInputFieldBindProps = "values" | "status" | "element";
-  export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
-  export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+  export type TagsInputFieldBindProps = "values" | "variant" | "element";
+  export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
+  export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
   export type TagsInputFieldCountValidation = { value: number, message: string };
 
   const preset = "svs-tags-input-field";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
-  import TagsInput, { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputDeps } from "./TagsInput.svelte";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
+  import TagsInput, { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps } from "./_TagsInput.svelte";
 </script>
 
 <script lang="ts">
-  let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputFieldProps = $props();
+  let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], element = $bindable(), styling, variant = $bindable(""), deps }: TagsInputFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
   const id = deps?.svsTagsInput?.attributes?.id ? deps.svsTagsInput.attributes.id : elemId.get(label?.trim());
   const idLabel = elemId.get(label?.trim());
   const idDesc = elemId.get(bottom?.trim());
@@ -82,14 +82,10 @@
   if (min) validations.unshift(() => values.length < min.value ? min.message : "");
 
   // *** Initialize Deps *** //
-  const svsBadge = {
-    ...omit(deps?.svsBadge, "style"),
-    style: deps?.svsBadge?.style ?? `${preset} svs-tags-input svs-badge`,
-  };
   const svsTagsInput = {
-    ...omit(deps?.svsTagsInput, "style", "attributes"),
+    ...omit(deps?.svsTagsInput, "styling", "attributes"),
     events: { onadd, onremove: deps?.svsTagsInput?.events?.onremove },
-    style: deps?.svsTagsInput?.style ?? `${preset} svs-tags-input`,
+    styling: deps?.svsTagsInput?.styling ?? `${preset} svs-tags-input`,
     attributes: {
       ...omit(deps?.svsTagsInput?.attributes, "id", "onchange", "oninvalid", "aria-describedby"),
       id,
@@ -100,19 +96,19 @@
   };
 
   // *** Status *** //
-  let neutral = isNeutral(status) ? status : STATE.NEUTRAL;
-  $effect(() => { neutral = isNeutral(status) ? status : neutral });
-  let live = $derived(status === STATE.INACTIVE ? "alert" : "status");
-  let idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
+  let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
+  $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
+  let live = $derived(variant === VARIANT.INACTIVE ? "alert" : "status");
+  let idMsg = $derived(variant === VARIANT.INACTIVE && message?.trim() ? idErr : undefined);
   function shift(oninvalid: boolean = false, msg?: string) {
     const vmsg = element?.validationMessage ?? "";
-    status = getStatus(oninvalid, vmsg, msg);
-    message = status === STATE.INACTIVE ? msg ? msg : vmsg ? vmsg : bottom : bottom;
+    variant = getStatus(oninvalid, vmsg, msg);
+    message = variant === VARIANT.INACTIVE ? msg ? msg : vmsg ? vmsg : bottom : bottom;
   }
   function getStatus(oninvalid: boolean, vmsg: string, msg?: string): string {
-    if (msg || (oninvalid && vmsg)) return STATE.INACTIVE;
+    if (msg || (oninvalid && vmsg)) return VARIANT.INACTIVE;
     if (!values.length || vmsg) return neutral;
-    return STATE.ACTIVE;
+    return VARIANT.ACTIVE;
   }
   function verify() {
     if (!element) return;
@@ -136,9 +132,9 @@
   // *** Event Handlers *** //
   function onadd(values: string[], value: string): void | boolean {
     if (deps?.svsTagsInput?.events?.onadd?.(values, value)) return true;
-    status = neutral;
+    variant = neutral;
     shift(false, check());
-    return status === STATE.INACTIVE;
+    return variant === VARIANT.INACTIVE;
   }
   function check(): string | undefined {
     if (!element) return;
@@ -149,7 +145,7 @@
   }
   function onchange(ev: Event) {
     deps?.svsTagsInput?.attributes?.onchange?.(ev as any);
-    if (!isNeutral(status)) shift();
+    if (!isNeutral(variant)) shift();
   }
   function oninvalid(ev: Event) {
     deps?.svsTagsInput?.attributes?.oninvalid?.(ev as any);
@@ -161,19 +157,19 @@
 
 <!---------------------------------------->
 
-<div class={cls(PARTS.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+<div class={cls(PARTS.WHOLE, variant)} role="group" aria-labelledby={idLabel}>
   {#if aux}
-    <div class={cls(PARTS.TOP, status)}>
+    <div class={cls(PARTS.TOP, variant)}>
       {@render lbl()}
-      <span class={cls(PARTS.AUX, status)}>{@render aux(status, values, element)}</span>
+      <span class={cls(PARTS.AUX, variant)}>{@render aux(values, variant, element)}</span>
     </div>
   {:else}
     {@render lbl()}
   {/if}
   {@render desc(descFirst)}
-  <div class={cls(PARTS.MIDDLE, status)}>
+  <div class={cls(PARTS.MIDDLE, variant)}>
     {@render side(PARTS.LEFT, left)}
-    <TagsInput bind:values bind:value bind:status bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} deps={{ svsBadge }} />
+    <TagsInput bind:values bind:value bind:variant bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} />
     {@render side(PARTS.RIGHT, right)}
   </div>
   {@render desc(!descFirst)}
@@ -181,22 +177,21 @@
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <label class={cls(PARTS.LABEL, status)} for={id} id={idLabel}>
+    <label class={cls(PARTS.LABEL, variant)} for={id} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, variant)}>{extra}</span>
       {/if}
     </label>
   {/if}
 {/snippet}
-{#snippet side(area: string, body?: Snippet<[string, string[], HTMLInputElement | undefined]>)}
+{#snippet side(area: string, body?: Snippet<[string[], string, HTMLInputElement | undefined]>)}
   {#if body}
-    <span class={cls(area, status)}>{@render body(status, values, element)}</span>
+    <span class={cls(area, variant)}>{@render body(values, variant, element)}</span>
   {/if}
 {/snippet}
 {#snippet desc(show: boolean)}
   {#if show && message?.trim()}
-    <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}
-

package/_svseeds/TagsInputField.svelte.d.ts

@@ -1,9 +1,9 @@
 export interface TagsInputFieldProps {
     label?: string;
     extra?: string;
-    aux?: Snippet<[string, string[], HTMLInputElement | undefined]>;
-    left?: Snippet<[string, string[], HTMLInputElement | undefined]>;
-    right?: Snippet<[string, string[], HTMLInputElement | undefined]>;
+    aux?: Snippet<[string[], string, HTMLInputElement | undefined]>;
+    left?: Snippet<[string[], string, HTMLInputElement | undefined]>;
+    right?: Snippet<[string[], string, HTMLInputElement | undefined]>;
     bottom?: string;
     descFirst?: boolean;
     values?: string[];
@@ -11,57 +11,57 @@ export interface TagsInputFieldProps {
     max?: TagsInputFieldCountValidation;
     constraints?: TagsInputFieldConstraint[];
     validations?: TagsInputFieldValidation[];
-    status?: string;
-    style?: SVSStyle;
     element?: HTMLInputElement;
+    styling?: SVSClass;
+    variant?: string;
     deps?: TagsInputFieldDeps;
 }
-export interface TagsInputFieldDeps extends TagsInputDeps {
-    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
+export interface TagsInputFieldDeps {
+    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps>;
 }
 export type TagsInputFieldReqdProps = never;
-export type TagsInputFieldBindProps = "values" | "status" | "element";
-export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
-export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+export type TagsInputFieldBindProps = "values" | "variant" | "element";
+export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
+export type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
 export type TagsInputFieldCountValidation = {
     value: number;
     message: string;
 };
 import { type Snippet } from "svelte";
-import { type SVSStyle } from "./core";
-import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputDeps } from "./TagsInput.svelte";
+import { type SVSClass } from "./core";
+import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps } from "./_TagsInput.svelte";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface TagsInputFieldProps {
  *   label?: string;
  *   extra?: string;
- *   aux?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
- *   left?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
- *   right?: Snippet<[string, string[], HTMLInputElement | undefined]>; // Snippet<[status,values,element]>
+ *   aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+ *   left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
+ *   right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
  *   bottom?: string;
- *   descFirst?: boolean; // <false>
+ *   descFirst?: boolean; // (false)
  *   values?: string[]; // bindable
  *   min?: TagsInputFieldCountValidation;
  *   max?: TagsInputFieldCountValidation;
  *   constraints?: TagsInputFieldConstraint[];
  *   validations?: TagsInputFieldValidation[];
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
  *   element?: HTMLInputElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: TagsInputFieldDeps;
  * }
  * interface TagsInputFieldDeps extends TagsInputDeps {
  *   svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
  * }
- * type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
- * type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string;
+ * type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
+ * type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
  * type TagsInputFieldCountValidation = {
  *   value: number;
  *   message: string;
  * };
  * ```
  */
-declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "status" | "element" | "values">;
+declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "variant" | "element" | "values">;
 type TagsInputField = ReturnType<typeof TagsInputField>;
 export default TagsInputField;