svseeds 0.4.6 → 0.4.7

package/_svseeds/{TagsInput.svelte → _TagsInput.svelte}

@@ -1,25 +1,23 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface TagsInputProps {
+    label?: Snippet<[string, string]>; // Snippet<[value,status]>
+    aux?: Snippet<[string, string]>; // Snippet<[value,status]>
     values?: string[]; // bindable
     value?: string; // bindable
-    type?: "left" | "right"; // <"left">
-    confirm?: string[]; // <["Enter"]>
-    trim?: boolean; // <true>
-    unique?: boolean; // <true>
+    type?: "left" | "right"; // ("left")
+    confirm?: string[]; // (["Enter"])
+    trim?: boolean; // (true)
+    unique?: boolean; // (true)
     ariaErrMsgId?: string; // bindable
     events?: TagsInputEvents;
-    status?: string; // bindable <STATE.NEUTRAL>
+    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;
@@ -29,23 +27,21 @@
 -->
 <script module lang="ts">
   export interface TagsInputProps {
+    label?: Snippet<[string, string]>; // Snippet<[value,status]>
+    aux?: Snippet<[string, string]>; // Snippet<[value,status]>
     values?: string[]; // bindable
     value?: string; // bindable
-    type?: "left" | "right"; // <"left">
-    confirm?: string[]; // <["Enter"]>
-    trim?: boolean; // <true>
-    unique?: boolean; // <true>
+    type?: "left" | "right"; // ("left")
+    confirm?: string[]; // (["Enter"])
+    trim?: boolean; // (true)
+    unique?: boolean; // (true)
     ariaErrMsgId?: string; // bindable
     events?: TagsInputEvents;
-    status?: string; // bindable <STATE.NEUTRAL>
+    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";
@@ -59,14 +55,14 @@
   const preset = "svs-tags-input";
   const CONFIRM_KEY = "Enter";
 
+  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 Badge, { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
 </script>
 
 <script lang="ts">
-  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();
+  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();
 
   // *** Initialize *** //
   if (!status) status = STATE.NEUTRAL;
@@ -75,12 +71,6 @@
   const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
   let invalid = $derived(ariaErrMsgId ? true : undefined);
 
-  // *** Initialize Deps *** //
-  const svsBadge = {
-    ...omit(deps?.svsBadge, "onclick", "right", "style"),
-    style: deps?.svsBadge?.style ?? `${preset} svs-badge`,
-  };
-
   // *** Event Handlers *** //
   function onkeydown(ev: KeyboardEvent & TagsInputTarget) {
     attributes?.onkeydown?.(ev);
@@ -97,8 +87,7 @@
     value = "";
   }
   function remove(index: number): (ev: MouseEvent & BadgeTarget) => void {
-    return (ev) => {
-      deps?.svsBadge?.onclick?.(ev);
+    return () => {
       if (events?.onremove?.(values, values[index], index)) return;
       values = values.filter((_, i) => i !== index);
     };
@@ -121,16 +110,20 @@
   {#if render}
     <span class={cls(type, status)}>
       {#each values as value, i}
-        <Badge bind:status type="right" onclick={remove(i)} {...svsBadge}>
-          {value}
-          {#snippet right(status)}
-            {#if deps?.svsBadge?.right}
-              {@render deps.svsBadge.right(status)}
+        <span class={cls(PARTS.LABEL, status)}>
+          {#if label}
+            {@render label(value, status)}
+          {:else}
+            {value}
+          {/if}
+          <button class={cls(PARTS.AUX, status)} onclick={remove(i)}>
+            {#if aux}
+              {@render aux(value, status)}
             {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="min-width: 5px; min-height: 5px;"><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>
+              <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}
-          {/snippet}
-        </Badge>
+          </button>
+        </span>
       {/each}
     </span>
   {/if}

package/_svseeds/{TagsInput.svelte.d.ts → _TagsInput.svelte.d.ts}

@@ -1,4 +1,6 @@
 export interface TagsInputProps {
+    label?: Snippet<[string, string]>;
+    aux?: Snippet<[string, string]>;
     values?: string[];
     value?: string;
     type?: "left" | "right";
@@ -12,10 +14,6 @@ export interface TagsInputProps {
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
-    deps?: TagsInputDeps;
-}
-export interface TagsInputDeps {
-    svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
 }
 export type TagsInputReqdProps = never;
 export type TagsInputBindProps = "values" | "value" | "ariaErrMsgId" | "status" | "element";
@@ -23,31 +21,29 @@ export interface TagsInputEvents {
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
 }
+import { type Snippet } from "svelte";
 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>`
+ * default value: `(value)`
  * ```ts
  * interface TagsInputProps {
+ *   label?: Snippet<[string, string]>; // Snippet<[value,status]>
+ *   aux?: Snippet<[string, string]>; // Snippet<[value,status]>
  *   values?: string[]; // bindable
  *   value?: string; // bindable
- *   type?: "left" | "right"; // <"left">
- *   confirm?: string[]; // <["Enter"]>
- *   trim?: boolean; // <true>
- *   unique?: boolean; // <true>
+ *   type?: "left" | "right"; // ("left")
+ *   confirm?: string[]; // (["Enter"])
+ *   trim?: boolean; // (true)
+ *   unique?: boolean; // (true)
  *   ariaErrMsgId?: string; // bindable
  *   events?: TagsInputEvents;
- *   status?: string; // bindable <STATE.NEUTRAL>
+ *   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;

package/_svseeds/_TextField.svelte

@@ -1,6 +1,6 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface TextFieldProps {
     label?: string;
@@ -9,18 +9,18 @@
     left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
     right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     value?: string; // bindable
-    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";  // bindable <"text">
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
     element?: HTMLInputElement | HTMLTextAreaElement; // bindable
   }
-  type TextFieldValidation = (value: string, validity: ValidityState) => string;
+  type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
   ```
 -->
 <script module lang="ts">
@@ -31,12 +31,12 @@
     left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
     right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
     bottom?: string;
-    descFirst?: boolean; // <false>
+    descFirst?: boolean; // (false)
     value?: string; // bindable
-    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";  // bindable <"text">
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
-    status?: string; // bindable <STATE.NEUTRAL>
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
     action?: Action;
@@ -44,7 +44,7 @@
   }
   export type TextFieldReqdProps = never;
   export type TextFieldBindProps = "value" | "type" | "status" | "element";
-  export type TextFieldValidation = (value: string, validity: ValidityState) => string;
+  export type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
 
   const preset = "svs-text-field";
 

package/_svseeds/_TextField.svelte.d.ts

@@ -7,7 +7,7 @@ export interface TextFieldProps {
     bottom?: string;
     descFirst?: boolean;
     value?: string;
-    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";
+    type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";
     options?: SvelteSet<string> | Set<string>;
     validations?: TextFieldValidation[];
     status?: string;
@@ -18,14 +18,14 @@ export interface TextFieldProps {
 }
 export type TextFieldReqdProps = never;
 export type TextFieldBindProps = "value" | "type" | "status" | "element";
-export type TextFieldValidation = (value: string, validity: ValidityState) => string;
+export type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface TextFieldProps {
  *   label?: string;
@@ -34,18 +34,18 @@ import { type SVSStyle } from "./core";
  *   left?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
  *   right?: Snippet<[string, string, HTMLInputElement | HTMLTextAreaElement | undefined]>; // Snippet<[status,value,element]>
  *   bottom?: string;
- *   descFirst?: boolean; // <false>
+ *   descFirst?: boolean; // (false)
  *   value?: string; // bindable
- *   type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url" | "number";  // bindable <"text">
+ *   type?: "text" | "area" | "email" | "password" | "search" | "tel" | "url";  // bindable ("text")
  *   options?: SvelteSet<string> | Set<string>;
  *   validations?: TextFieldValidation[];
- *   status?: string; // bindable <STATE.NEUTRAL>
+ *   status?: string; // bindable (STATE.NEUTRAL)
  *   style?: SVSStyle;
  *   attributes?: HTMLInputAttributes | HTMLTextareaAttributes;
  *   action?: Action;
  *   element?: HTMLInputElement | HTMLTextAreaElement; // bindable
  * }
- * type TextFieldValidation = (value: string, validity: ValidityState) => string;
+ * type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
  * ```
  */
 declare const TextField: import("svelte").Component<TextFieldProps, {}, "type" | "value" | "status" | "element">;

package/_svseeds/_Toggle.svelte

@@ -1,15 +1,15 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface ToggleProps {
     main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
     left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
     right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
-    value?: boolean; // bindable <false>
-    type?: "button" | "switch"; // <"button">
+    value?: boolean; // bindable (false)
+    type?: "button" | "switch"; // ("button")
     ariaLabel?: string;
-    status?: string; // bindable <STATE.NEUTRAL>
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
     action?: Action;
@@ -23,10 +23,10 @@
     main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
     left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
     right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
-    value?: boolean; // bindable <false>
-    type?: "button" | "switch"; // <"button">
+    value?: boolean; // bindable (false)
+    type?: "button" | "switch"; // ("button")
     ariaLabel?: string;
-    status?: string; // bindable <STATE.NEUTRAL>
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
     action?: Action;

package/_svseeds/_Toggle.svelte.d.ts

@@ -19,16 +19,16 @@ import { type Action } from "svelte/action";
 import { type HTMLButtonAttributes } from "svelte/elements";
 import { type SVSStyle } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface ToggleProps {
  *   main?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
  *   left?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
  *   right?: Snippet<[string, boolean, HTMLButtonElement | undefined]>; // Snippet<[status,value,element]>
- *   value?: boolean; // bindable <false>
- *   type?: "button" | "switch"; // <"button">
+ *   value?: boolean; // bindable (false)
+ *   type?: "button" | "switch"; // ("button")
  *   ariaLabel?: string;
- *   status?: string; // bindable <STATE.NEUTRAL>
+ *   status?: string; // bindable (STATE.NEUTRAL)
  *   style?: SVSStyle;
  *   attributes?: HTMLButtonAttributes;
  *   action?: Action;

package/_svseeds/_ToggleGroup.svelte

@@ -1,14 +1,14 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface ToggleGroupProps {
     options: SvelteMap<string, string> | Map<string, string>;
     values?: string[]; // bindable
-    multiple?: boolean; // <true>
+    multiple?: boolean; // (true)
     ariaDescId?: string;
     ariaErrMsgId?: string; // bindable
-    status?: string; // bindable <STATE.NEUTRAL>
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     action?: Action;
     [key: string]: unknown | Snippet<[string]>;
@@ -19,10 +19,10 @@
   export interface ToggleGroupProps {
     options: SvelteMap<string, string> | Map<string, string>;
     values?: string[]; // bindable
-    multiple?: boolean; // <true>
+    multiple?: boolean; // (true)
     ariaDescId?: string;
     ariaErrMsgId?: string; // bindable
-    status?: string; // bindable <STATE.NEUTRAL>
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     action?: Action;
     [key: string]: unknown | Snippet<[string]>;

package/_svseeds/_ToggleGroup.svelte.d.ts

@@ -16,15 +16,15 @@ import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
 import { type SVSStyle } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface ToggleGroupProps {
  *   options: SvelteMap<string, string> | Map<string, string>;
  *   values?: string[]; // bindable
- *   multiple?: boolean; // <true>
+ *   multiple?: boolean; // (true)
  *   ariaDescId?: string;
  *   ariaErrMsgId?: string; // bindable
- *   status?: string; // bindable <STATE.NEUTRAL>
+ *   status?: string; // bindable (STATE.NEUTRAL)
  *   style?: SVSStyle;
  *   action?: Action;
  *   [key: string]: unknown | Snippet<[string]>;

package/_svseeds/_Tooltip.svelte

@@ -1,14 +1,14 @@
 <!--
   @component
-  default value: `<value>`
+  default value: `(value)`
   ```ts
   interface TooltipProps {
     main?: Snippet<[string, string, boolean]>; // Snippet<[status,text,isFlipped]>
     name?: string;
-    position?: Position; // "top"
-    align?: Align; // "center"
-    offset?: Vector; // <{ x: 0, y: 0 }>
-    status?: string; // bindable <STATE.NEUTRAL>
+    position?: Position; // ("top")
+    align?: Align; // ("center")
+    offset?: Vector; // ({ x: 0, y: 0 })
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     element?: HTMLDivElement; // bindable
   }
@@ -21,10 +21,10 @@
   export interface TooltipProps {
     main?: Snippet<[string, string, boolean]>; // Snippet<[status,text,isFlipped]>
     name?: string;
-    position?: Position; // "top"
-    align?: Align; // "center"
-    offset?: Vector; // <{ x: 0, y: 0 }>
-    status?: string; // bindable <STATE.NEUTRAL>
+    position?: Position; // ("top")
+    align?: Align; // ("center")
+    offset?: Vector; // ({ x: 0, y: 0 })
+    status?: string; // bindable (STATE.NEUTRAL)
     style?: SVSStyle;
     element?: HTMLDivElement; // bindable
   }

package/_svseeds/_Tooltip.svelte.d.ts

@@ -27,15 +27,15 @@ import { type Snippet } from "svelte";
 import { type Action, type ActionReturn } from "svelte/action";
 import { type SVSStyle } from "./core";
 /**
- * default value: `<value>`
+ * default value: `(value)`
  * ```ts
  * interface TooltipProps {
  *   main?: Snippet<[string, string, boolean]>; // Snippet<[status,text,isFlipped]>
  *   name?: string;
- *   position?: Position; // "top"
- *   align?: Align; // "center"
- *   offset?: Vector; // <{ x: 0, y: 0 }>
- *   status?: string; // bindable <STATE.NEUTRAL>
+ *   position?: Position; // ("top")
+ *   align?: Align; // ("center")
+ *   offset?: Vector; // ({ x: 0, y: 0 })
+ *   status?: string; // bindable (STATE.NEUTRAL)
  *   style?: SVSStyle;
  *   element?: HTMLDivElement; // bindable
  * }

package/_svseeds/core.d.ts

@@ -130,7 +130,7 @@ declare class UniqueId {
      *
      * @example
      * ```typescript
-     * const generator = new UniqueId();
+     * const generator = new UniqueId(4);
      * const id1 = generator.get(true);        // "AbCd"
      * const id2 = generator.get(false);       // undefined
      * const id3 = generator.get("hello");     // "XyAb"

package/index.d.ts

@@ -1,5 +1,4 @@
 export { type SVSStyle, BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
-export { default as Badge, type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_svseeds/_Badge.svelte";
 export { default as Button, type ButtonProps, type ButtonReqdProps, type ButtonBindProps } from "./_svseeds/_Button.svelte";
 export { default as CheckField, type CheckFieldProps, type CheckFieldReqdProps, type CheckFieldBindProps, type CheckFieldValidation } from "./_svseeds/_CheckField.svelte";
 export { default as ColorPicker, type ColorPickerProps, type ColorPickerReqdProps, type ColorPickerBindProps, getHex } from "./_svseeds/_ColorPicker.svelte";
@@ -13,12 +12,12 @@ export { default as SelectField, type SelectFieldProps, type SelectFieldReqdProp
 export { default as Slider, type SliderProps, type SliderReqdProps, type SliderBindProps, type Range } from "./_svseeds/_Slider.svelte";
 export { default as Sortable, type SortableProps, type SortableReqdProps, type SortableBindProps, SortableItems } from "./_svseeds/_Sortable.svelte";
 export { default as Tabs, type TabsProps, type TabsReqdProps, type TabsBindProps } from "./_svseeds/_Tabs.svelte";
+export { default as TagsInput, type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputEvents } from "./_svseeds/_TagsInput.svelte";
 export { default as TextField, type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps, type TextFieldValidation } from "./_svseeds/_TextField.svelte";
 export { default as Toggle, type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_svseeds/_Toggle.svelte";
 export { default as ToggleGroup, type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, type TooltipProps, type TooltipReqdProps, type TooltipBindProps, type Vector, type Position, type Align, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";
 export { default as Accordion, type AccordionProps, type AccordionDeps, type AccordionReqdProps, type AccordionBindProps } from "./_svseeds/Accordion.svelte";
 export { default as DarkToggle, type DarkToggleProps, type DarkToggleDeps, type DarkToggleReqdProps, type DarkToggleBindProps, THEME, setThemeToRoot } from "./_svseeds/DarkToggle.svelte";
-export { default as TagsInput, type TagsInputProps, type TagsInputDeps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputEvents } from "./_svseeds/TagsInput.svelte";
-export { default as TagsInputField, type TagsInputFieldProps, type TagsInputFieldReqdProps, type TagsInputFieldBindProps, type TagsInputFieldConstraint, type TagsInputFieldValidation, type TagsInputFieldCountValidation } from "./_svseeds/TagsInputField.svelte";
+export { default as TagsInputField, type TagsInputFieldProps, type TagsInputFieldDeps, type TagsInputFieldReqdProps, type TagsInputFieldBindProps, type TagsInputFieldConstraint, type TagsInputFieldValidation, type TagsInputFieldCountValidation } from "./_svseeds/TagsInputField.svelte";
 export { default as ToggleGroupField, type ToggleGroupFieldProps, type ToggleGroupFieldDeps, type ToggleGroupFieldReqdProps, type ToggleGroupFieldBindProps, type ToggleGroupFieldValidation } from "./_svseeds/ToggleGroupField.svelte";

package/index.js

@@ -1,5 +1,4 @@
 export { BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttle, UniqueId } from "./_svseeds/core";
-export { default as Badge } from "./_svseeds/_Badge.svelte";
 export { default as Button } from "./_svseeds/_Button.svelte";
 export { default as CheckField } from "./_svseeds/_CheckField.svelte";
 export { default as ColorPicker, getHex } from "./_svseeds/_ColorPicker.svelte";
@@ -13,12 +12,12 @@ export { default as SelectField } from "./_svseeds/_SelectField.svelte";
 export { default as Slider } from "./_svseeds/_Slider.svelte";
 export { default as Sortable, SortableItems } from "./_svseeds/_Sortable.svelte";
 export { default as Tabs } from "./_svseeds/_Tabs.svelte";
+export { default as TagsInput } from "./_svseeds/_TagsInput.svelte";
 export { default as TextField } from "./_svseeds/_TextField.svelte";
 export { default as Toggle } from "./_svseeds/_Toggle.svelte";
 export { default as ToggleGroup } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";
 export { default as Accordion } from "./_svseeds/Accordion.svelte";
 export { default as DarkToggle, THEME, setThemeToRoot } from "./_svseeds/DarkToggle.svelte";
-export { default as TagsInput } from "./_svseeds/TagsInput.svelte";
 export { default as TagsInputField } from "./_svseeds/TagsInputField.svelte";
 export { default as ToggleGroupField } from "./_svseeds/ToggleGroupField.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",

package/_svseeds/_Badge.svelte

@@ -1,73 +0,0 @@
-<!--
-  @component
-  default value: `<value>`
-  ```ts
-  interface BadgeProps {
-    children: Snippet;
-    left?: Snippet<[string]>; // Snippet<[status]>
-    right?: Snippet<[string]>; // Snippet<[status]>
-    type?: "plain" | "link" | "left" | "right"; // <"plain">
-    href?: string;
-    onclick?: MouseEventHandler<HTMLButtonElement> | null;
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
-  }
-  ```
--->
-<script module lang="ts">
-  export interface BadgeProps {
-    children: Snippet;
-    left?: Snippet<[string]>; // Snippet<[status]>
-    right?: Snippet<[string]>; // Snippet<[status]>
-    type?: "plain" | "link" | "left" | "right"; // <"plain">
-    href?: string;
-    onclick?: MouseEventHandler<HTMLButtonElement> | null;
-    status?: string; // bindable <STATE.NEUTRAL>
-    style?: SVSStyle;
-  }
-  export type BadgeReqdProps = "children";
-  export type BadgeBindProps = "status";
-
-  const preset = "svs-badge";
-
-  import { type Snippet } from "svelte";
-  import { type MouseEventHandler } from "svelte/elements";
-  import { type SVSStyle, STATE, PARTS, fnClass } from "./core";
-</script>
-
-<script lang="ts">
-  let { children, left, right, type = "plain", href = "", onclick, status = $bindable(""), style }: BadgeProps = $props();
-
-  // *** Initialize *** //
-  if (!status) status = STATE.NEUTRAL;
-  const cls = fnClass(preset, style);
-</script>
-
-<!---------------------------------------->
-
-{#if type === "link"}
-  <a class={cls(PARTS.WHOLE, status)} {href}>
-    {@render whole()}
-  </a>
-{:else}
-  <span class={cls(PARTS.WHOLE, status)}>
-    {@render whole()}
-  </span>
-{/if}
-
-{#snippet side(area: string, btn: boolean, body?: Snippet<[string]>)}
-  {#if body}
-    {#if btn}
-      <button class={cls(area, status)} {onclick}>{@render body(status)}</button>
-    {:else}
-      <span class={cls(area, status)}>{@render body(status)}</span>
-    {/if}
-  {/if}
-{/snippet}
-{#snippet whole()}
-  {@render side(PARTS.LEFT, type === "left", left)}
-  <span class={cls(PARTS.MAIN, status)}>
-    {@render children()}
-  </span>
-  {@render side(PARTS.RIGHT, type === "right", right)}
-{/snippet}

package/_svseeds/_Badge.svelte.d.ts

@@ -1,33 +0,0 @@
-export interface BadgeProps {
-    children: Snippet;
-    left?: Snippet<[string]>;
-    right?: Snippet<[string]>;
-    type?: "plain" | "link" | "left" | "right";
-    href?: string;
-    onclick?: MouseEventHandler<HTMLButtonElement> | null;
-    status?: string;
-    style?: SVSStyle;
-}
-export type BadgeReqdProps = "children";
-export type BadgeBindProps = "status";
-import { type Snippet } from "svelte";
-import { type MouseEventHandler } from "svelte/elements";
-import { type SVSStyle } from "./core";
-/**
- * default value: `<value>`
- * ```ts
- * interface BadgeProps {
- *   children: Snippet;
- *   left?: Snippet<[string]>; // Snippet<[status]>
- *   right?: Snippet<[string]>; // Snippet<[status]>
- *   type?: "plain" | "link" | "left" | "right"; // <"plain">
- *   href?: string;
- *   onclick?: MouseEventHandler<HTMLButtonElement> | null;
- *   status?: string; // bindable <STATE.NEUTRAL>
- *   style?: SVSStyle;
- * }
- * ```
- */
-declare const Badge: import("svelte").Component<BadgeProps, {}, "status">;
-type Badge = ReturnType<typeof Badge>;
-export default Badge;