svseeds 0.4.0 → 0.4.3

package/_svseeds/Accordion.svelte

@@ -1,15 +1,32 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface AccordionProps {
+    labels?: string[];
+    current?: number; // bindable <-1>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    deps?: AccordionDeps;
+    [key: string]: unknown | Snippet;
+  }
+  interface AccordionDeps {
+    svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
+  }
+  ```
+-->
 <script module lang="ts">
-  export type AccordionProps = {
-    labels?: string[],
-    current?: number, // bindable <-1>
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    deps?: AccordionDeps,
-    [key: string]: unknown | Snippet,
-  };
-  export type AccordionDeps = {
-    svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>,
-  };
+  export interface AccordionProps {
+    labels?: string[];
+    current?: number; // bindable <-1>
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    deps?: AccordionDeps;
+    [key: string]: unknown | Snippet;
+  }
+  export interface AccordionDeps {
+    svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
+  }
   export type AccordionReqdProps = never;
   export type AccordionBindProps = "current" | "status";
 
@@ -28,7 +45,7 @@
   }
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, AREA, elemId, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, elemId, fnClass, omit } from "./core";
   import Disclosure, { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 </script>
 
@@ -36,7 +53,7 @@
   let { labels = [], current = $bindable(-1), status = $bindable(""), style, deps, ...rest }: AccordionProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const isStrLabel = labels.length > 0;
   const lbls = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
@@ -84,7 +101,7 @@
 <!---------------------------------------->
 
 {#if isValidAccordion}
-  <div class={cls(AREA.WHOLE, status)} role="group">
+  <div class={cls(PARTS.WHOLE, status)} 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,19 +1,35 @@
-export type AccordionProps = {
+export interface AccordionProps {
     labels?: string[];
     current?: number;
     status?: string;
     style?: SVSStyle;
     deps?: AccordionDeps;
     [key: string]: unknown | Snippet;
-};
-export type AccordionDeps = {
+}
+export interface AccordionDeps {
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
-};
+}
 export type AccordionReqdProps = never;
 export type AccordionBindProps = "current" | "status";
 import { type Snippet } from "svelte";
 import { type SVSStyle } from "./core";
 import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface AccordionProps {
+ *   labels?: string[];
+ *   current?: number; // bindable <-1>
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   deps?: AccordionDeps;
+ *   [key: string]: unknown | Snippet;
+ * }
+ * interface AccordionDeps {
+ *   svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
+ * }
+ * ```
+ */
 declare const Accordion: import("svelte").Component<AccordionProps, {}, "status" | "current">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/_svseeds/DarkToggle.svelte

@@ -1,53 +1,81 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface DarkToggleProps {
+    dark?: boolean; // bindable <(prefers-color-scheme)>
+    status?: string; // bindable <STATE.NEUTRAL>
+    element?: HTMLButtonElement; // bindable
+    deps?: DarkToggleDeps;
+  }
+  export interface DarkToggleDeps {
+    svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
+  }
+  ```
+-->
 <script module lang="ts">
-  export type DarkToggleProps = {
-    dark?: boolean, // bindable <true>
-    status?: string, // bindable <STATE.DEFAULT>
-    element?: HTMLButtonElement, // bindable
-    deps?: DarkToggleDeps,
-  };
-  export type DarkToggleDeps = {
-    svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>,
-  };
+  export interface DarkToggleProps {
+    dark?: boolean; // bindable <(prefers-color-scheme)>
+    status?: string; // bindable <STATE.NEUTRAL>
+    element?: HTMLButtonElement; // bindable
+    deps?: DarkToggleDeps;
+  }
+  export interface DarkToggleDeps {
+    svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
+  }
   export type DarkToggleReqdProps = never;
   export type DarkToggleBindProps = "dark" | "status" | "element";
 
-  const label = "Toggle theme color";
+  export const THEME = { LIGHT: "light", DARK: "dark" } as const;
+  export function setThemeToRoot(theme?: string) {
+    if (typeof window === "undefined") return;
+    if (!theme) theme = Theme.getPreferTheme();
+    window.document.documentElement.classList.add(theme);
+  }
+
+  const ariaLabel = "Toggle theme color";
   const preset = "svs-dark-toggle";
 
   class Theme {
-    static #DARK = "dark";
-    static #LIGHT = "light";
+    static #MEDIA_PREFER_DARK = "(prefers-color-scheme: dark)";
     static #REGEX = /\(prefers-color-scheme:\s*(light|dark)\s*\)/i;
     static #SELECTOR = ":root";
     #props: Map<string, Record<string, string>> = new Map();
-    #dark;
+    #theme;
     set dark(bool: boolean) {
       this.#switch(bool);
     }
     get dark(): boolean {
-      return this.#dark;
+      return this.#theme === THEME.DARK;
     }
 
     constructor() {
-      this.#dark = Theme.#isPreferDark();
+      this.#theme = Theme.getPreferTheme();
       this.#initProps();
       this.#setColorScheme();
+      setThemeToRoot(this.#theme);
     }
     #switch(dark: boolean) {
-      const theme = dark ? Theme.#DARK : Theme.#LIGHT;
+      const theme = Theme.#getThemeString(dark);
+      if (this.#theme === theme) return;
       if (!this.#props.has(theme)) return;
-      this.#dark = dark;
-      this.#apply(theme);
+      this.#apply(theme, this.#theme);
+      this.#theme = theme;
     }
-    #apply(theme: string) {
+    #apply(to: string, from: string) {
       if (typeof window === "undefined") return;
-      const style = window.document.documentElement.style;
-      Object.entries(this.#props.get(theme) ?? {})
-        .forEach(([name, value]) => style.setProperty(name, value));
+      const html = window.document.documentElement;
+      Object.entries(this.#props.get(to) ?? {})
+        .forEach(([name, value]) => html.style.setProperty(name, value));
+      if (html.classList.contains(from)) {
+        html.classList.replace(from, to);
+      } else {
+        html.classList.add(to);
+      }
     }
     #setColorScheme() {
       if (typeof window === "undefined") return;
-      const themes = Object.keys(this.#props).filter((x) => x === Theme.#LIGHT || x === Theme.#DARK);
+      const themes = Object.keys(this.#props).filter((x) => x === THEME.LIGHT || x === THEME.DARK);
       window.document.documentElement.style.colorScheme = themes.join(" ");
     }
     #initProps() {
@@ -98,7 +126,13 @@
     }
     static #isPreferDark(): boolean {
       if (typeof window === "undefined") return true;
-      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+      return window.matchMedia(Theme.#MEDIA_PREFER_DARK).matches;
+    }
+    static #getThemeString(dark: boolean): string {
+      return dark ? THEME.DARK : THEME.LIGHT;
+    }
+    static getPreferTheme(): string {
+      return Theme.#getThemeString(Theme.#isPreferDark());
     }
   }
   const theme = new Theme();
@@ -108,25 +142,42 @@
 </script>
 
 <script lang="ts">
-  let { dark = $bindable(false), status = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
+  let { dark = $bindable(), status = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
-  dark = theme.dark;
+  if (!status) status = STATE.NEUTRAL;
+  if (dark === undefined) dark = theme.dark;
+  theme.dark = dark;
 
   // *** Initialize Deps *** //
   const svsToggle = {
-    ...omit(deps?.svsToggle, "main", "style"),
+    ...omit(deps?.svsToggle, "main", "style", "attributes"),
     style: deps?.svsToggle?.style ?? `${preset} svs-toggle`,
+    ariaLabel,
+    attributes: {
+      ...deps?.svsToggle?.attributes,
+    },
   };
 
   // *** Bind Handlers *** //
-  $effect.pre(() => { theme.dark = dark });
+  $effect.pre(() => { theme.dark = dark!; });
 </script>
 
 <!---------------------------------------->
 
-<Toggle bind:value={dark} bind:status bind:element {label} {main} {...svsToggle} />
+<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)}
+    {:else}
+      {#if value}
+        {@render svgDark()}
+      {:else}
+        {@render svgLight()}
+      {/if}
+    {/if}
+  {/snippet}
+</Toggle>
 
 {#snippet svgDark()}
   <svg style="width: 100%; height: 100%;" viewBox="0 0 24 24" aria-hidden="true">
@@ -139,14 +190,3 @@
     <path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V4.06189C12.6724 4.02104 12.3387 4 12 4C11.6613 4 11.3276 4.02104 11 4.06189V0ZM7.0943 5.68018L4.22173 2.80761L2.80752 4.22183L5.6801 7.09441C6.09071 6.56618 6.56608 6.0908 7.0943 5.68018ZM4.06189 11H0V13H4.06189C4.02104 12.6724 4 12.3387 4 12C4 11.6613 4.02104 11.3276 4.06189 11ZM5.6801 16.9056L2.80751 19.7782L4.22173 21.1924L7.0943 18.3198C6.56608 17.9092 6.09071 17.4338 5.6801 16.9056ZM11 19.9381V24H13V19.9381C12.6724 19.979 12.3387 20 12 20C11.6613 20 11.3276 19.979 11 19.9381ZM16.9056 18.3199L19.7781 21.1924L21.1923 19.7782L18.3198 16.9057C17.9092 17.4339 17.4338 17.9093 16.9056 18.3199ZM19.9381 13H24V11H19.9381C19.979 11.3276 20 11.6613 20 12C20 12.3387 19.979 12.6724 19.9381 13ZM18.3198 7.0943L21.1923 4.22183L19.7781 2.80762L16.9056 5.6801C17.4338 6.09071 17.9092 6.56608 18.3198 7.0943Z" />
   </svg>
 {/snippet}
-{#snippet main(status: string, value: boolean, element: HTMLButtonElement | undefined)}
-  {#if deps?.svsToggle?.main}
-    {@render deps.svsToggle.main(status, value, element)}
-  {:else}
-    {#if value}
-      {@render svgDark()}
-    {:else}
-      {@render svgLight()}
-    {/if}
-  {/if}
-{/snippet}

package/_svseeds/DarkToggle.svelte.d.ts

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

package/_svseeds/TagsInput.svelte

@@ -1,29 +1,58 @@
+<!--
+  @component
+  default value: `<value>`
+  ```ts
+  interface TagsInputProps {
+    values?: string[]; // bindable
+    value?: string; // bindable
+    type?: "left" | "right"; // <"left">
+    confirm?: string[]; // <["Enter"]>
+    trim?: boolean; // <true>
+    unique?: boolean; // <true>
+    ariaErrMsgId?: string; // bindable
+    events?: TagsInputEvents;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+    deps?: TagsInputDeps;
+  }
+  interface TagsInputDeps {
+    svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
+  }
+  interface TagsInputEvents { // cancel if true
+    onadd?: (values: string[], value: string) => void | boolean;
+    onremove?: (values: string[], value: string, index: number) => void | boolean;
+  }
+  ```
+-->
 <script module lang="ts">
-  export type TagsInputProps = {
-    values?: string[], // bindable
-    value?: string, // bindable
-    type?: "left" | "right", // <"left">
-    confirm?: string[], // <["Enter"]>
-    trim?: boolean, // <true>
-    unique?: boolean, // <true>
-    ariaErrMsgId?: string, // bindable
-    events?: TagsInputEvents,
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    attributes?: HTMLInputAttributes,
-    action?: Action,
-    element?: HTMLInputElement, // bindable
-    deps?: TagsInputDeps,
-  };
-  export type TagsInputDeps = {
-    svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">,
-  };
+  export interface TagsInputProps {
+    values?: string[]; // bindable
+    value?: string; // bindable
+    type?: "left" | "right"; // <"left">
+    confirm?: string[]; // <["Enter"]>
+    trim?: boolean; // <true>
+    unique?: boolean; // <true>
+    ariaErrMsgId?: string; // bindable
+    events?: TagsInputEvents;
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement; // bindable
+    deps?: TagsInputDeps;
+  }
+  export interface TagsInputDeps {
+    svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
+  }
   export type TagsInputReqdProps = never;
   export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
-  export type TagsInputEvents = { // cancel if true
-    onadd?: (values: string[], value: string) => void | boolean,
-    onremove?: (values: string[], value: string, index: number) => void | boolean,
-  };
+  export interface TagsInputEvents { // cancel if true
+    onadd?: (values: string[], value: string) => void | boolean;
+    onremove?: (values: string[], value: string, index: number) => void | boolean;
+  }
 
   type TagsInputTarget = { currentTarget: EventTarget & HTMLInputElement };
   type BadgeTarget = { currentTarget: EventTarget & HTMLButtonElement; };
@@ -32,7 +61,7 @@
 
   import { type Action } from "svelte/action";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, fnClass, omit } from "./core";
   import Badge, { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
 </script>
 
@@ -40,10 +69,11 @@
   let { values = $bindable([]), value = $bindable(""), type = "left", confirm = [], trim = true, unique = true, ariaErrMsgId = $bindable(), events, status = $bindable(""), style, attributes, action, element = $bindable(), deps }: TagsInputProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const attrs = omit(attributes, "class", "type", "onkeydown");
   const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
+  let invalid = $derived(ariaErrMsgId ? true : undefined);
 
   // *** Initialize Deps *** //
   const svsBadge = {
@@ -77,12 +107,12 @@
 
 <!---------------------------------------->
 
-<div class={cls(AREA.WHOLE, status)}>
+<div class={cls(PARTS.WHOLE, status)}>
   {@render tags(type === "left")}
   {#if action}
-    <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" {onkeydown} {...attrs} use:action />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} use:action />
   {:else}
-    <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" {onkeydown} {...attrs} />
+    <input bind:value bind:this={element} class={cls(PARTS.MAIN, status)} type="text" {onkeydown} aria-invalid={invalid} aria-errormessage={ariaErrMsgId} {...attrs} />
   {/if}
   {@render tags(type === "right")}
 </div>

package/_svseeds/TagsInput.svelte.d.ts

@@ -1,4 +1,4 @@
-export type TagsInputProps = {
+export interface TagsInputProps {
     values?: string[];
     value?: string;
     type?: "left" | "right";
@@ -13,20 +13,48 @@ export type TagsInputProps = {
     action?: Action;
     element?: HTMLInputElement;
     deps?: TagsInputDeps;
-};
-export type TagsInputDeps = {
+}
+export interface TagsInputDeps {
     svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
-};
+}
 export type TagsInputReqdProps = never;
 export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
-export type TagsInputEvents = {
+export interface TagsInputEvents {
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
-};
+}
 import { type Action } from "svelte/action";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
 import { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
+/**
+ * default value: `<value>`
+ * ```ts
+ * interface TagsInputProps {
+ *   values?: string[]; // bindable
+ *   value?: string; // bindable
+ *   type?: "left" | "right"; // <"left">
+ *   confirm?: string[]; // <["Enter"]>
+ *   trim?: boolean; // <true>
+ *   unique?: boolean; // <true>
+ *   ariaErrMsgId?: string; // bindable
+ *   events?: TagsInputEvents;
+ *   status?: string; // bindable <STATE.NEUTRAL>
+ *   style?: SVSStyle;
+ *   attributes?: HTMLInputAttributes;
+ *   action?: Action;
+ *   element?: HTMLInputElement; // bindable
+ *   deps?: TagsInputDeps;
+ * }
+ * interface TagsInputDeps {
+ *   svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
+ * }
+ * interface TagsInputEvents { // cancel if true
+ *   onadd?: (values: string[], value: string) => void | boolean;
+ *   onremove?: (values: string[], value: string, index: number) => void | boolean;
+ * }
+ * ```
+ */
 declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value" | "status" | "element" | "values" | "ariaErrMsgId">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

package/_svseeds/TagsInputField.svelte

@@ -1,25 +1,58 @@
-<script module lang="ts">
-  export type 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]>
-    bottom?: string,
-    descFirst?: boolean, // <false>
-    values?: string[], // bindable
-    min?: TagsInputFieldCountValidation,
-    max?: TagsInputFieldCountValidation,
-    constraints?: TagsInputFieldConstraint[],
-    validations?: TagsInputFieldValidation[],
-    status?: string, // bindable <STATE.DEFAULT>
-    style?: SVSStyle,
-    element?: HTMLInputElement, // bindable
-    deps?: TagsInputFieldDeps,
+<!--
+  @component
+  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]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    values?: string[]; // bindable
+    min?: TagsInputFieldCountValidation;
+    max?: TagsInputFieldCountValidation;
+    constraints?: TagsInputFieldConstraint[];
+    validations?: TagsInputFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLInputElement; // bindable
+    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 TagsInputFieldCountValidation = {
+    value: number;
+    message: string;
   };
-  export type TagsInputFieldDeps = {
-    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">,
-  } & TagsInputDeps;
+  ```
+-->
+<script module lang="ts">
+  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]>
+    bottom?: string;
+    descFirst?: boolean; // <false>
+    values?: string[]; // bindable
+    min?: TagsInputFieldCountValidation;
+    max?: TagsInputFieldCountValidation;
+    constraints?: TagsInputFieldConstraint[];
+    validations?: TagsInputFieldValidation[];
+    status?: string; // bindable <STATE.NEUTRAL>
+    style?: SVSStyle;
+    element?: HTMLInputElement; // bindable
+    deps?: TagsInputFieldDeps;
+  }
+  export interface TagsInputFieldDeps extends TagsInputDeps {
+    svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps | "deps">;
+  }
   export type TagsInputFieldReqdProps = never;
   export type TagsInputFieldBindProps = "values" | "status" | "element";
   export type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string;
@@ -29,7 +62,7 @@
   const preset = "svs-tags-input-field";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSStyle, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
+  import { type SVSStyle, STATE, PARTS, elemId, fnClass, isNeutral, omit } from "./core";
   import TagsInput, { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputDeps } from "./TagsInput.svelte";
 </script>
 
@@ -37,7 +70,7 @@
   let { label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), min, max, constraints = [], validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputFieldProps = $props();
 
   // *** Initialize *** //
-  if (!status) status = STATE.DEFAULT;
+  if (!status) status = STATE.NEUTRAL;
   const cls = fnClass(preset, style);
   const id = deps?.svsTagsInput?.attributes?.id ? deps.svsTagsInput.attributes.id : elemId.get(label?.trim());
   const idLabel = elemId.get(label?.trim());
@@ -67,7 +100,7 @@
   };
 
   // *** 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 idMsg = $derived(status === STATE.INACTIVE && message?.trim() ? idErr : undefined);
@@ -128,30 +161,30 @@
 
 <!---------------------------------------->
 
-<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, values, element)}</span>
+      <span class={cls(PARTS.AUX, status)}>{@render aux(status, values, 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)}
     <TagsInput bind:values bind:value bind:status bind:element bind:ariaErrMsgId={idMsg} {...svsTagsInput} deps={{ svsBadge }} />
-    {@render side(AREA.RIGHT, right)}
+    {@render side(PARTS.RIGHT, right)}
   </div>
   {@render desc(!descFirst)}
 </div>
 
 {#snippet lbl()}
   {#if label?.trim()}
-    <label class={cls(AREA.LABEL, status)} for={id} id={idLabel}>
+    <label class={cls(PARTS.LABEL, status)} for={id} id={idLabel}>
       {label}
       {#if extra?.trim()}
-        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+        <span class={cls(PARTS.EXTRA, status)}>{extra}</span>
       {/if}
     </label>
   {/if}
@@ -163,7 +196,7 @@
 {/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}