svseeds 0.0.6 → 0.1.0

package/README.md

@@ -1,5 +1,9 @@
-# Svelte components as svelte file
+# SvSeeds - Simple Headless Components for Svelte
 
-Simple headless Svelte components as Svelte files.
+[![npm version](https://img.shields.io/npm/v/svseeds)](https://www.npmjs.com/package/svseeds)
+[![JSR](https://jsr.io/badges/@svseeds/ui)](https://jsr.io/@svseeds/ui)
+[![license](https://img.shields.io/npm/l/svseeds)](LICENSE.md)
+
+SvSeeds is a collection of essential functional components for Svelte development. These components are intentionally designed with minimal styling, giving you complete freedom to apply your own styles based on your project requirements. For specialized needs, you can download the components as .svelte files through our CLI tool and customize their functionality directly.
 
 **WIP**

package/_svseeds/Accordion.svelte

@@ -0,0 +1,91 @@
+<script module lang="ts">
+  export type AccordionProps = {
+    labels?: string[],
+    current?: number, // bindable <-1>
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    deps?: AccordionDeps,
+    [key: string]: unknown | Snippet,
+  };
+  export type AccordionDeps = {
+    svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>,
+  };
+  export type AccordionReqdProps = never;
+  export type AccordionBindProps = "current" | "status";
+
+  type NamedId = { id: string, name: string };
+  const svs = "svs-accordion";
+  const preset: ClassRuleSet = {};
+  const roleLabel = "label";
+  const rolePanel = "panel";
+
+  function getSnippetNames(role: string, rest: Record<string, unknown>): string[] {
+    return Object.keys(rest)
+      .filter((x) => x.startsWith(role) && typeof rest[x] === "function")
+      .toSorted((x,y) => x.localeCompare(y));
+  }
+  function toNamedId(names: string[]): NamedId[] {
+    return names.map((x) => ({ id: elemId.get(true)!, name: x }));
+  }
+
+  import { type Snippet, untrack } from "svelte";
+  import { type ClassRuleSet, STATE, AREA, 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();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  const propsDisclosure = omit(deps?.svsDisclosure, "attributes");
+  const isStrLabel = labels.length > 0;
+  const lbls = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
+  const panels = getSnippetNames(rolePanel, rest);
+  const isValidAccordion = lbls.length && panels.length && lbls.length === panels.length;
+  let guard = current >= 0 && current < lbls.length;
+  let event = false;
+  let opens = $state(Array(lbls.length).fill(false));
+  let elems: HTMLDetailsElement[] = $state([]);
+
+  // *** Bind Handlers *** //
+  $effect.pre(() => {
+    current;
+    untrack(() => toggle());
+  });
+  function toggle() {
+    if (!event) opens = opens.fill(false).map((_, i) => i === current);
+    event = false;
+  }
+  function setCurrent(index: number) {
+    current = index;
+    if (guard) return guard = false;
+    event = true;
+  }
+
+  // *** Event Handlers *** //
+  function exclusiveToggle(index: number): (ev: Event) => void {
+    return (ev) => {
+      deps?.svsDisclosure?.attributes?.ontoggle?.(ev as any);
+      if (opens.every((x) => !x)) return setCurrent(-1);
+      if (elems[index].open) {
+        opens = opens.map((_, i) => i === index);
+        setCurrent(index);
+      }
+    };
+  }
+</script>
+
+<!---------------------------------------->
+
+{#if isValidAccordion}
+  <div class={cls(AREA.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}} {...propsDisclosure}>
+        {@render (rest[panels[i]] as Snippet)()}
+      </Disclosure>
+    {/each}
+  </div>
+{/if}

package/_svseeds/Accordion.svelte.d.ts

@@ -0,0 +1,19 @@
+export type AccordionProps = {
+    labels?: string[];
+    current?: number;
+    status?: string;
+    style?: ClassRuleSet | string;
+    deps?: AccordionDeps;
+    [key: string]: unknown | Snippet;
+};
+export type AccordionDeps = {
+    svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
+};
+export type AccordionReqdProps = never;
+export type AccordionBindProps = "current" | "status";
+import { type Snippet } from "svelte";
+import { type ClassRuleSet } from "./core";
+import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "status" | "current">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/_svseeds/DarkToggle.svelte

@@ -0,0 +1,58 @@
+<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 type DarkToggleReqdProps = never;
+  export type DarkToggleBindProps = "dark" | "status" | "element";
+
+  const ariaLabel = "Toggle theme color";
+
+  import { untrack } from "svelte";
+  import { STATE, omit, theme } from "./core";
+  import Toggle, { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
+</script>
+
+<script lang="ts">
+  let { dark = $bindable(false), status = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const propsToggle = omit(deps?.svsToggle, "main");
+
+  // *** Bind Handlers *** //
+  $effect.pre(() => { dark;
+    untrack(() => theme.switch(dark ? "dark" : "light"));
+  });
+</script>
+
+<!---------------------------------------->
+
+<Toggle bind:value={dark} bind:status bind:element label={ariaLabel} {main} {...propsToggle} />
+{#snippet svgDark()}
+  <svg style="width: 100%; height: 100%;" viewBox="0 0 24 24" aria-hidden="true">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z" />
+  </svg>
+{/snippet}
+{#snippet svgLight()}
+  <svg style="width: 100%; height: 100%;" viewBox="0 0 24 24" aria-hidden="true">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" />
+    <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

@@ -0,0 +1,15 @@
+export type DarkToggleProps = {
+    dark?: boolean;
+    status?: string;
+    element?: HTMLButtonElement;
+    deps?: DarkToggleDeps;
+};
+export type DarkToggleDeps = {
+    svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
+};
+export type DarkToggleReqdProps = never;
+export type DarkToggleBindProps = "dark" | "status" | "element";
+import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
+declare const DarkToggle: import("svelte").Component<DarkToggleProps, {}, "status" | "element" | "dark">;
+type DarkToggle = ReturnType<typeof DarkToggle>;
+export default DarkToggle;

package/_svseeds/TagsInput.svelte

@@ -0,0 +1,136 @@
+<script module lang="ts">
+  export type TagsInputProps = {
+    bottom?: string, // bindable
+    values?: string[], // bindable
+    type?: "left" | "right" | "bottom", // <"left">
+    confirm?: string[],
+    trim?: boolean, // <false>
+    unique?: boolean, // <true>
+    min?: TagCountValidation,
+    max?: TagCountValidation,
+    validations?: ((values: string[]) => string)[],
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    element?: HTMLInputElement, // bindable
+    deps?: TagsInputDeps,
+  };
+  export type TagsInputDeps = {
+    svsTextField?: Omit<TextFieldProps, TextFieldReqdProps | TextFieldBindProps>,
+    svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">,
+  };
+  export type TagsInputReqdProps = never;
+  export type TagsInputBindProps = "dark" | "status" | "element";
+  export type TagCountValidation = { value: number, message: string };
+
+  const svs = "svs-tags-input";
+  const preset: ClassRuleSet = {};
+  const CONFIRM_KEY = "Enter";
+
+  import { untrack } from "svelte";
+  import { type ClassRuleSet, STATE, AREA, fnClass, omit } from "./core";
+  import TextField, { type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_TextField.svelte";
+  import Badge, { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
+</script>
+
+<script lang="ts">
+  let { bottom = $bindable(), values = $bindable([]), type = "left", confirm = [], trim = false, unique = true, min, max, validations = [], status = $bindable(""), style, element = $bindable(), deps }: TagsInputProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  initDeps();
+  const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
+  const onkeydown = deps!.svsTextField!.attributes!.onkeydown;
+  deps!.svsTextField!.attributes!.onkeydown = confirmTag;
+  const onclick = deps!.svsBadge!.onclick;
+  const svsBadge = omit(deps!.svsBadge, "onclick", "right");
+  if (min) validations.push((values) => values.length < min.value ? min.message : "");
+  if (max) deps!.svsTextField!.validations!.push((_) => values.length >= max.value ? max.message : "");
+  let value = $state("");
+
+  function initDeps() {
+    if (!deps) deps = {};
+    if (!deps.svsTextField) deps.svsTextField = {};
+    if (!deps.svsTextField.attributes) deps.svsTextField.attributes = {};
+    if (!deps.svsTextField.validations) deps.svsTextField.validations = [];
+    if (!deps.svsBadge) deps.svsBadge = {};
+  }
+
+  // *** Bind Handlers *** //
+  $effect.pre(() => {
+    values;
+    untrack(() => validate());
+  });
+  function validate() {
+    for (const v of validations) {
+      const msg = v(values);
+      if (msg) return element?.setCustomValidity(msg);
+    }
+  }
+
+  // *** Event Handlers *** //
+  const change = new Event("change", { bubbles: true, cancelable: true });
+  function confirmTag(ev: KeyboardEvent) {
+    onkeydown?.(ev as any);
+    if (!confirmKeys.has(ev.key) || ev.isComposing) return;
+    ev.preventDefault();
+    element?.dispatchEvent(change);
+    if (status === STATE.INACTIVE) return;
+    addTag();
+  }
+  function addTag() {
+    if (unique && values.includes(value)) value = "";
+    if (trim) value = value.trim();
+    if (!value) return;
+    values.push(value);
+    value = "";
+  }
+  function removeTag(index: number): (ev: Event) => void {
+    return (ev) => {
+      onclick?.(ev as any);
+      values.splice(index, 1);
+    };
+  }
+</script>
+
+<!---------------------------------------->
+
+<TextField bind:value bind:status bind:bottom bind:element type="text" {...deps?.svsTextField} {left} {right} />
+{#if type === "bottom"}
+  <div class={cls(AREA.BOTTOM, status)}>
+    {@render tags()}
+  </div>
+{/if}
+
+{#snippet left(status: string)}
+  {#if type === "left"}
+    {@render tags()}
+  {:else}
+    {#if deps?.svsTextField?.left}
+      {@render deps.svsTextField.left(status, "", element)}
+    {/if}
+  {/if}
+{/snippet}
+{#snippet right(status: string)}
+  {#if type === "right"}
+    {@render tags()}
+  {:else}
+    {#if deps?.svsTextField?.right}
+      {@render deps.svsTextField.right(status, "", element)}
+    {/if}
+  {/if}
+{/snippet}
+{#snippet tags()}
+  {#each values as value, i}
+    <Badge type="right" onclick={removeTag(i)} {...svsBadge}>
+      {#snippet right(status)}
+        {#if deps?.svsBadge?.right}
+          {@render deps.svsBadge.right(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>
+        {/if}
+      {/snippet}
+      {value}
+    </Badge>
+  {/each}
+{/snippet}

package/_svseeds/TagsInput.svelte.d.ts

@@ -0,0 +1,31 @@
+export type TagsInputProps = {
+    bottom?: string;
+    values?: string[];
+    type?: "left" | "right" | "bottom";
+    confirm?: string[];
+    trim?: boolean;
+    unique?: boolean;
+    min?: TagCountValidation;
+    max?: TagCountValidation;
+    validations?: ((values: string[]) => string)[];
+    status?: string;
+    style?: ClassRuleSet | string;
+    element?: HTMLInputElement;
+    deps?: TagsInputDeps;
+};
+export type TagsInputDeps = {
+    svsTextField?: Omit<TextFieldProps, TextFieldReqdProps | TextFieldBindProps>;
+    svsBadge?: Omit<BadgeProps, BadgeReqdProps | BadgeBindProps | "type" | "href">;
+};
+export type TagsInputReqdProps = never;
+export type TagsInputBindProps = "dark" | "status" | "element";
+export type TagCountValidation = {
+    value: number;
+    message: string;
+};
+import { type ClassRuleSet } from "./core";
+import { type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_TextField.svelte";
+import { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "bottom" | "status" | "element" | "values">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/_svseeds/_Badge.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  export type 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.DEFAULT>
+    style?: ClassRuleSet | string,
+  };
+  export type BadgeReqdProps = "children";
+  export type BadgeBindProps = "status";
+
+  const svs = "svs-badge";
+  const preset: ClassRuleSet = {};
+
+  import { type Snippet } from "svelte";
+  import { type MouseEventHandler } from "svelte/elements";
+  import { type ClassRuleSet, STATE, AREA, 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.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+</script>
+
+<!---------------------------------------->
+
+{#if type === "link"}
+  <a class={cls(AREA.WHOLE, status)} {href}>
+    {@render whole()}
+  </a>
+{:else}
+  <span class={cls(AREA.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(AREA.LEFT, type === "left", left)}
+  <span class={cls(AREA.MAIN, status)}>
+    {@render children()}
+  </span>
+  {@render side(AREA.RIGHT, type === "right", right)}
+{/snippet}

package/_svseeds/_Badge.svelte.d.ts

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

package/_svseeds/_Button.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+  export type ButtonProps = {
+    children: Snippet,
+    left?: Snippet<[string, HTMLButtonElement | undefined]>, // Snippet<[status,element]>
+    right?: Snippet<[string, HTMLButtonElement | undefined]>, // Snippet<[status,element]>
+    type?: "submit" | "reset" | "button", // <"button">
+    onclick?: MouseEventHandler<HTMLButtonElement> | null,
+    form?: HTMLFormElement, // bindable
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    attributes?: HTMLButtonAttributes,
+    action?: Action,
+    element?: HTMLButtonElement, // bindable
+  };
+  export type ButtonReqdProps = "children";
+  export type ButtonBindProps = "form" | "status" | "element";
+
+  const svs = "svs-button";
+  const preset: ClassRuleSet = {};
+
+  import { type Snippet } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
+  import { type ClassRuleSet, STATE, AREA, fnClass, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { children, left, right, type = "button", onclick, form = $bindable(), status = $bindable(STATE.DEFAULT), style, attributes, action, element = $bindable()}: ButtonProps = $props();
+
+  // *** Initialize *** //
+  const cls = fnClass(svs, preset, style);
+  const click = onclick ?? attributes?.["onclick"];
+  const attrs = omit(attributes, "class", "type", "onclick");
+
+  // *** Event Handlers *** //
+  onclick = (ev) => {
+    if (form?.checkValidity() ?? true) click?.(ev);
+  };
+</script>
+
+<!---------------------------------------->
+
+{#if action}
+  <button bind:this={element} class={cls(AREA.WHOLE, status)} {type} {onclick} {...attrs} use:action>
+    {@render whole()}
+  </button>
+{:else}
+  <button bind:this={element} class={cls(AREA.WHOLE, status)} {type} {onclick} {...attrs}>
+    {@render whole()}
+  </button>
+{/if}
+
+{#snippet side(area: string, body?: Snippet<[string, HTMLButtonElement | undefined]>)}
+  {#if body}
+    <span class={cls(area, status)}>{@render body(status, element)}</span>
+  {/if}
+{/snippet}
+{#snippet whole()}
+  {@render side(AREA.LEFT, left)}
+  <span class={cls(AREA.MAIN, status)}>
+    {@render children()}
+  </span>
+  {@render side(AREA.RIGHT, right)}
+{/snippet}

package/_svseeds/_Button.svelte.d.ts

@@ -0,0 +1,22 @@
+export type ButtonProps = {
+    children: Snippet;
+    left?: Snippet<[string, HTMLButtonElement | undefined]>;
+    right?: Snippet<[string, HTMLButtonElement | undefined]>;
+    type?: "submit" | "reset" | "button";
+    onclick?: MouseEventHandler<HTMLButtonElement> | null;
+    form?: HTMLFormElement;
+    status?: string;
+    style?: ClassRuleSet | string;
+    attributes?: HTMLButtonAttributes;
+    action?: Action;
+    element?: HTMLButtonElement;
+};
+export type ButtonReqdProps = "children";
+export type ButtonBindProps = "form" | "status" | "element";
+import { type Snippet } from "svelte";
+import { type Action } from "svelte/action";
+import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
+import { type ClassRuleSet } from "./core";
+declare const Button: import("svelte").Component<ButtonProps, {}, "form" | "status" | "element">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/_svseeds/_CheckField.svelte

@@ -0,0 +1,142 @@
+<script module lang="ts">
+  export type CheckFieldProps = {
+    options: SvelteMap<string, string> | Map<string, string>,
+    label?: string,
+    extra?: string,
+    aux?: Snippet<[string, string[], HTMLInputElement[] | undefined]>, // Snippet<[status,values,elements]>
+    bottom?: string, // bindable
+    values?: string[], // bindable
+    multiple?: boolean, // <true>
+    descFirst?: boolean, // <false>
+    validations?: ((values: string[], validities?: ValidityState[]) => string)[],
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    attributes?: HTMLInputAttributes,
+    action?: Action,
+    elements?: HTMLInputElement[], // bindable
+  };
+  export type CheckFieldReqdProps = "options";
+  export type CheckFieldBindProps = "bottom" | "values" | "status" | "elements";
+
+  type CheckFieldTarget = { currentTarget: EventTarget & HTMLInputElement };
+  const svs = "svs-check-field";
+  const preset: ClassRuleSet = {};
+
+  import { type Snippet, untrack } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type SvelteMap } from "svelte/reactivity";
+  import { type HTMLInputAttributes } from "svelte/elements";
+  import { type ClassRuleSet, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { options, label, extra, aux, bottom = $bindable(), values = $bindable([]), multiple = true, descFirst = false, validations = [], status = $bindable(""), style, attributes, action, elements = $bindable([])}: CheckFieldProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  const type = multiple ? "checkbox" : "radio";
+  const name = attributes?.["name"] ? attributes?.["name"] : elemId.get(true);
+  const idLabel = elemId.get(label?.trim());
+  const idDesc = elemId.get(bottom?.trim());
+  const idErr = idDesc ?? elemId.get(true);
+  const attrs = omit(attributes, "class", "id", "type", "name", "value", "onchange", "oninvalid");
+  const roleGroup = multiple ? "group" : "radiogroup";
+  const description = bottom;
+
+  // *** Status *** //
+  const phase = { change: false, submit: false };
+  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  let alert = $derived(status === STATE.INACTIVE ? "alert" : undefined);
+  let invalid = $derived(status === STATE.INACTIVE ? true : undefined);
+  let errMsg = $derived(status === STATE.INACTIVE ? idErr : undefined);
+  const toInvalid = (msg?: string) => shiftStatus(phase.submit ? STATE.INACTIVE : neutral, msg);
+  const toNonInvalid = () => shiftStatus(phase.change && values.length ? STATE.ACTIVE : neutral);
+  function shiftStatus(stat: string, msg?: string) {
+    status = stat;
+    bottom = stat === STATE.INACTIVE ? msg ?? description : description;
+    elements[0]?.setCustomValidity(msg ?? "");
+  }
+  function validate() {
+    if (!values.length) return toNonInvalid();
+    const validities = elements.map((x) => x.validity);
+    for (const v of validations) {
+      const msg = v(values, validities);
+      if (msg) return toInvalid(msg);
+    }
+    toNonInvalid();
+  }
+
+  // *** Bind Handlers *** //
+  let opts = $derived([...options.entries().map(([value, text]) => ({ value, text, checked: values.includes(value) }))]);
+  $effect.pre(() => {
+    values;
+    untrack(() => validate());
+  });
+
+  // *** Event Handlers *** //
+  function onchange(ev: Event & CheckFieldTarget) {
+    attributes?.onchange?.(ev);
+    values = elements.filter((elem) => elem.checked).map((elem) => elem.value);
+    phase.change = true;
+  }
+  function oninvalid(ev: Event & CheckFieldTarget) {
+    attributes?.oninvalid?.(ev);
+    ev.preventDefault();
+    phase.submit = true;
+    if (status !== STATE.INACTIVE) toInvalid(elements[0]?.validationMessage);
+  }
+</script>
+
+<!---------------------------------------->
+
+{#if opts.length}
+  {#if label?.trim() || aux || bottom?.trim()}
+    <div class={cls(AREA.WHOLE, status)} role="group" aria-labelledby={idLabel}>
+      {#if aux}
+        <div class={cls(AREA.TOP, status)}>
+          {@render lbl()}
+          <span class={cls(AREA.AUX, status)}>{@render aux(status, values, elements)}</span>
+        </div>
+      {:else}
+        {@render lbl()}
+      {/if}
+      {@render desc(descFirst)}
+      {@render main()}
+      {@render desc(!descFirst)}
+    </div>
+  {:else}
+    {@render main()}
+  {/if}
+{/if}
+
+{#snippet lbl()}
+  {#if label?.trim()}
+    <span class={cls(AREA.LABEL, status)} id={idLabel}>
+      {label}
+      {#if extra?.trim()}
+        <span class={cls(AREA.EXTRA, status)}>{extra}</span>
+      {/if}
+    </span>
+  {/if}
+{/snippet}
+{#snippet main()}
+  <div class={cls(AREA.MIDDLE, status)} role={roleGroup} aria-describedby={idDesc} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple && bottom?.trim() ? errMsg : undefined}>
+    {#each opts as {value, text, checked}, i (value)}
+      <label class={cls(AREA.MAIN, status)}>
+        {#if action}
+          <input bind:this={elements[i]} class={cls(AREA.LEFT, status)} aria-invalid={multiple ? invalid : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} use:action />
+        {:else}
+          <input bind:this={elements[i]} class={cls(AREA.LEFT, status)} aria-invalid={multiple ? invalid : undefined} {value} {name} {type} {checked} {onchange} {oninvalid} {...attrs} />
+        {/if}
+        <span class={cls(AREA.RIGHT, status)}>{text}</span>
+      </label>
+    {/each}
+  </div>
+{/snippet}
+{#snippet desc(show: boolean)}
+  {#if show && bottom?.trim()}
+    <div class={cls(AREA.BOTTOM, status)} id={idDesc ?? idErr} role={alert}>{bottom}</div>
+  {/if}
+{/snippet}