svseeds 0.4.11 → 0.5.0

package/_svseeds/ToggleGroupField.svelte

@@ -15,10 +15,10 @@
     multiple?: boolean; // (true)
     validations?: ToggleGroupFieldValidation[];
     name?: string;
+    elements?: HTMLButtonElement[];
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: ToggleGroupFieldDeps;
-    [key: string]: unknown | Snippet;
   }
   interface ToggleGroupFieldDeps {
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
@@ -40,10 +40,10 @@
     multiple?: boolean; // (true)
     validations?: ToggleGroupFieldValidation[];
     name?: string;
+    elements?: HTMLButtonElement[]; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
     deps?: ToggleGroupFieldDeps;
-    [key: string]: unknown | Snippet;
   }
   export interface ToggleGroupFieldDeps {
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
@@ -62,7 +62,7 @@
 </script>
 
 <script lang="ts">
-  let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], name, styling, variant = $bindable(""), deps, ...rest }: ToggleGroupFieldProps = $props();
+  let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], name, elements = $bindable([]), styling, variant = $bindable(""), deps }: ToggleGroupFieldProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -75,7 +75,7 @@
 
   // *** Initialize Deps *** //
   const svsToggleGroup = {
-    ...Object.fromEntries(Object.entries(rest).filter(([_, v]) => typeof v === "function")),
+    children: deps?.svsToggleGroup?.children,
     ariaDescId: idDesc,
     styling: deps?.svsToggleGroup?.styling as SVSClass ?? `${preset} svs-toggle-group`,
     action: deps?.svsToggleGroup?.action as Action,
@@ -134,7 +134,7 @@
     <div class={cls(PARTS.MIDDLE, variant)}>
       {@render side(PARTS.LEFT, left)}
       {@render fnForm()}
-      <ToggleGroup bind:values bind:ariaErrMsgId={idMsg} bind:variant={neutral} {options} {multiple} {...svsToggleGroup} />
+      <ToggleGroup bind:values bind:elements bind:ariaErrMsgId={idMsg} bind:variant={neutral} {options} {multiple} {...svsToggleGroup} />
       {@render side(PARTS.RIGHT, right)}
     </div>
     {@render desc(!descFirst)}

package/_svseeds/ToggleGroupField.svelte.d.ts

@@ -11,10 +11,10 @@ export interface ToggleGroupFieldProps {
     multiple?: boolean;
     validations?: ToggleGroupFieldValidation[];
     name?: string;
+    elements?: HTMLButtonElement[];
     styling?: SVSClass;
     variant?: string;
     deps?: ToggleGroupFieldDeps;
-    [key: string]: unknown | Snippet;
 }
 export interface ToggleGroupFieldDeps {
     svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
@@ -42,10 +42,10 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  *   multiple?: boolean; // (true)
  *   validations?: ToggleGroupFieldValidation[];
  *   name?: string;
+ *   elements?: HTMLButtonElement[];
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   deps?: ToggleGroupFieldDeps;
- *   [key: string]: unknown | Snippet;
  * }
  * interface ToggleGroupFieldDeps {
  *   svsToggleGroup?: Omit<ToggleGroupProps, ToggleGroupReqdProps | ToggleGroupBindProps | "ariaDescId" | "multiple">;
@@ -53,6 +53,6 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  * type ToggleGroupFieldValidation = (values: string[]) => string | undefined;
  * ```
  */
-declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "variant" | "values">;
+declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "variant" | "elements" | "values">;
 type ToggleGroupField = ReturnType<typeof ToggleGroupField>;
 export default ToggleGroupField;

package/_svseeds/_Drawer.svelte

@@ -0,0 +1,123 @@
+<!--
+  @component
+  default value: `(value)`
+  ```ts
+  interface DrawerProps {
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false)
+    position?: Position; // ("left")
+    size?: string; // ("auto")
+    duration?: number; // (200)
+    closable?: boolean; // (true)
+    id?: string;
+    attributes?: HTMLAttributes<HTMLDivElement>;
+    element?: HTMLDivElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+  }
+  type Position = "top" | "right" | "bottom" | "left";
+  ```
+-->
+<script module lang="ts">
+  export interface DrawerProps {
+    children: Snippet<[string]>; // Snippet<[variant]>
+    open?: boolean; // bindable (false)
+    position?: Position; // ("left")
+    size?: string; // ("auto")
+    duration?: number; // (200)
+    closable?: boolean; // (true)
+    id?: string;
+    attributes?: HTMLAttributes<HTMLDivElement>;
+    element?: HTMLDivElement; // bindable
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+  }
+  export type Position = "top" | "right" | "bottom" | "left";
+  export type DrawerReqdProps = "children";
+  export type DrawerBindProps = "open" | "variant" | "element";
+
+  const preset = "svs-drawer";
+
+  const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec));
+  function getPositionProp(position: Position): string {
+    switch (position) {
+      case "top":
+      case "left": return "--top:0;--left:0;--bottom:auto;--right:auto;";
+      case "bottom": return "--top:auto;--left:0;--bottom:0;--right:auto;";
+      case "right": return "--top:0;--left:auto;--bottom:auto;--right:0;";
+    }
+  }
+  function getSizeProp(position: Position, size: string): string {
+    const interpolate = ["auto", "min-content", "max-content", "fit-content", "content"].includes(size) ? "interpolate-size:allow-keywords;" : "";
+    return ["top", "bottom"].includes(position)
+      ? `--width-from:100dvw;--width-to:100dvw;--height-from:0;--height-to:${size};${interpolate}`
+      : `--width-from:0;--width-to:${size};--height-from:100dvh;--height-to:100dvh;${interpolate}`;
+  }
+
+  import { type Snippet, untrack } from "svelte";
+  import { type HTMLAttributes } from "svelte/elements";
+  import { type SVSClass, VARIANT, PARTS, fnClass, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { children, open = $bindable(false), position = "left", size = "auto", duration = 200, closable = true, id, attributes, element = $bindable(), styling, variant = $bindable("") }: DrawerProps = $props();
+
+  // *** Initialize *** //
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
+  const attrs = omit(attributes, "class", "id", "style", "popover", "ontoggle");
+  const popover = closable ? "auto" : "manual";
+  const baseStyle = `${getPositionProp(position)}${getSizeProp(position, size)}--duration:${duration}ms;margin:initial;padding:initial;`;
+  let style = $state(baseStyle);
+
+  // *** Bind Handlers *** //
+  $effect.pre(() => {
+    open;
+    untrack(() => toggle());
+  });
+  function toggle() {
+    if (open) {
+      element?.showPopover();
+    } else {
+      element?.hidePopover();
+    }
+  }
+
+  // *** Event Handlers *** //
+  function ontoggle(ev: ToggleEvent) {
+    attributes?.["ontoggle"]?.(ev as any);
+    open = ev.newState === "open";
+    style = baseStyle + "overflow:hidden;";
+    sleep(duration).finally(() => style = baseStyle);
+  }
+  $effect(() => untrack(() => { if (open) element?.showPopover(); }));
+</script>
+
+<!---------------------------------------->
+
+<div bind:this={element} class={cls(PARTS.WHOLE, variant)} {id} {style} {popover} {ontoggle} {...attrs}>
+  {@render children(variant)}
+</div>
+
+<style>
+  [popover] {
+		position: absolute;
+    top: var(--top);
+    left: var(--left);
+    bottom: var(--bottom);
+    right: var(--right);
+    width: var(--width-from);
+    height: var(--height-from);
+    transition-property: display, width, height;
+    transition-behavior: allow-discrete;
+    transition-duration: var(--duration);
+  }
+  [popover]:popover-open {
+    width: var(--width-to);
+    height: var(--height-to);
+    @starting-style {
+      width: var(--width-from);
+      height: var(--height-from);
+    }
+  }
+</style>

package/_svseeds/_Drawer.svelte.d.ts

@@ -0,0 +1,41 @@
+export interface DrawerProps {
+    children: Snippet<[string]>;
+    open?: boolean;
+    position?: Position;
+    size?: string;
+    duration?: number;
+    closable?: boolean;
+    id?: string;
+    attributes?: HTMLAttributes<HTMLDivElement>;
+    element?: HTMLDivElement;
+    styling?: SVSClass;
+    variant?: string;
+}
+export type Position = "top" | "right" | "bottom" | "left";
+export type DrawerReqdProps = "children";
+export type DrawerBindProps = "open" | "variant" | "element";
+import { type Snippet } from "svelte";
+import { type HTMLAttributes } from "svelte/elements";
+import { type SVSClass } from "./core";
+/**
+ * default value: `(value)`
+ * ```ts
+ * interface DrawerProps {
+ *   children: Snippet<[string]>; // Snippet<[variant]>
+ *   open?: boolean; // bindable (false)
+ *   position?: Position; // ("left")
+ *   size?: string; // ("auto")
+ *   duration?: number; // (200)
+ *   closable?: boolean; // (true)
+ *   id?: string;
+ *   attributes?: HTMLAttributes<HTMLDivElement>;
+ *   element?: HTMLDivElement; // bindable
+ *   styling?: SVSClass;
+ *   variant?: string; // bindable (VARIANT.NEUTRAL)
+ * }
+ * type Position = "top" | "right" | "bottom" | "left";
+ * ```
+ */
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "variant" | "open" | "element">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/_svseeds/_Modal.svelte

@@ -6,8 +6,9 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
     closable?: boolean; // (true)
-    trigger?: HTMLElement; // bindable
+    id?: string;
     ariaLabel?: string;
+    attributes?: HTMLDialogAttributes;
     element?: HTMLDialogElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -19,8 +20,9 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
     closable?: boolean; // (true)
-    trigger?: HTMLElement; // bindable
+    id?: string;
     ariaLabel?: string;
+    attributes?: HTMLDialogAttributes;
     element?: HTMLDialogElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -28,26 +30,25 @@
   export type ModalReqdProps = "children";
   export type ModalBindProps = "open" | "variant" | "element";
 
+  const duration = 200;
   const preset = "svs-modal";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSClass, VARIANT, PARTS, fnClass } from "./core";
+  import { type HTMLDialogAttributes } from "svelte/elements";
+  import { fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { type SVSClass, VARIANT, PARTS, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, open = $bindable(false), closable = true, trigger = $bindable(), ariaLabel, element = $bindable(), styling, variant = $bindable("") }: ModalProps = $props();
+  let { children, open = $bindable(false), closable = true, id, ariaLabel, attributes, element = $bindable(), styling, variant = $bindable("") }: ModalProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
+  const attrs = omit(attributes, "class", "id", "autofocus", "aria-label", "onclick", "onkeydown", "ontoggle");
 
   // *** Bind Handlers *** //
-  $effect(() => {
-    open;
-    untrack(() => {
-      if (!open) trigger?.focus();
-    });
-  });
   $effect.pre(() => {
     open;
     untrack(() => toggle());
@@ -61,25 +62,37 @@
   }
 
   // *** Event Handlers *** //
-  const onclick = closable ? (ev: MouseEvent) => { if (ev.target === element) open = false; } : undefined;
-  const onkeydown = closable ? (ev: KeyboardEvent) => { if (ev.key === "Escape") ev.preventDefault(); } : undefined;
-  function onclose() {
-    open = false;
+  function click(ev: MouseEvent) {
+    attributes?.["onclick"]?.(ev as any);
+    if (ev.target === element) open = false;
+  }
+  function keydown(ev: KeyboardEvent) {
+    attributes?.["onkeydown"]?.(ev as any);
+    if (ev.key === "Escape") ev.preventDefault();
+  }
+  const onclick = closable ? click : attributes?.["onclick"];
+  const onkeydown = closable ? attributes?.["onkeydown"] : keydown;
+  function ontoggle(ev: Event) {
+    attributes?.["ontoggle"]?.(ev as any);
+    open = element?.open ?? false;
   }
   $effect(() => untrack(() => { if (open) element?.showModal(); }));
 </script>
 
 <!---------------------------------------->
 
-<!-- svelte-ignore a11y_autofocus -->
-<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {onclick} {onkeydown} {onclose} autofocus={true}>
-  <div class={cls(PARTS.MAIN, variant)}>
-    {@render children(variant)}
-  </div>
+<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {id} {onclick} {onkeydown} {ontoggle} autofocus={true} {...attrs} style="margin:auto;background-color:transparent;">
+  {#if open}
+    <div class={cls(PARTS.MAIN, variant)} transition:fade={{ duration, easing: cubicOut }}>
+      {@render children(variant)}
+    </div>
+  {/if}
 </dialog>
 
 <style>
-  :global(html:has(dialog[open])) {
-    overflow: hidden;
+  :global {
+    :root:has(dialog[open]) {
+      overflow: hidden;
+    }
   }
 </style>

package/_svseeds/_Modal.svelte.d.ts

@@ -2,8 +2,9 @@ export interface ModalProps {
     children: Snippet<[string]>;
     open?: boolean;
     closable?: boolean;
-    trigger?: HTMLElement;
+    id?: string;
     ariaLabel?: string;
+    attributes?: HTMLDialogAttributes;
     element?: HTMLDialogElement;
     styling?: SVSClass;
     variant?: string;
@@ -11,6 +12,7 @@ export interface ModalProps {
 export type ModalReqdProps = "children";
 export type ModalBindProps = "open" | "variant" | "element";
 import { type Snippet } from "svelte";
+import { type HTMLDialogAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
  * default value: `(value)`
@@ -19,14 +21,15 @@ import { type SVSClass } from "./core";
  *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false)
  *   closable?: boolean; // (true)
- *   trigger?: HTMLElement; // bindable
+ *   id?: string;
  *   ariaLabel?: string;
+ *   attributes?: HTMLDialogAttributes;
  *   element?: HTMLDialogElement; // bindable
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
  */
-declare const Modal: import("svelte").Component<ModalProps, {}, "variant" | "open" | "element" | "trigger">;
+declare const Modal: import("svelte").Component<ModalProps, {}, "variant" | "open" | "element">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/_svseeds/_ProgressTracker.svelte

@@ -5,8 +5,9 @@
   interface ProgressTrackerProps {
     current: number; // bindable (0)
     labels: string[];
-    aux?: Snippet<[number, string]>; // Snippet<[index,variant]>
-    extra?: Snippet<[number, string]>; // Snippet<[index,variant]>
+    children?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
+    aux?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
+    extra?: boolean | Snippet<[number, string, string]>; // (true) Snippet<[index,label,variant]>
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
     eachVariant?: SvelteMap<number, string> | Map<number, string>;
@@ -17,8 +18,9 @@
   export interface ProgressTrackerProps {
     current: number; // bindable (0)
     labels: string[];
-    aux?: Snippet<[number, string]>; // Snippet<[index,variant]>
-    extra?: Snippet<[number, string]>; // Snippet<[index,variant]>
+    children?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
+    aux?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
+    extra?: boolean | Snippet<[number, string, string]>; // (true) Snippet<[index,label,variant]>
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
     eachVariant?: SvelteMap<number, string> | Map<number, string>;
@@ -34,7 +36,7 @@
 </script>
 
 <script lang="ts">
-  let { current = $bindable(-1), labels, aux, extra, styling, variant = $bindable(""), eachVariant }: ProgressTrackerProps = $props();
+  let { current = $bindable(-1), labels, children, aux, extra = true, styling, variant = $bindable(""), eachVariant }: ProgressTrackerProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -56,37 +58,29 @@
   <ol class={cls(PARTS.WHOLE, variant)}>
     {#each labels as label, i}
       {@const stat = getEachVariant(i)}
-      <li class={cls(PARTS.MAIN, stat)} aria-current={i === current ? "step" : false}>
-        {#if i > current}
-          {@render separator(i)}
-        {/if}
-        {#if aux}
-          <div class={cls(PARTS.MIDDLE, stat)}>
+      <li class={cls(PARTS.MIDDLE, stat)} aria-current={i === current ? "step" : false} style={i < labels.length - 1 ? "flex-grow:1;" : undefined}>
+        <div class={cls(PARTS.MAIN, stat)}>
+          {#if aux}
             <div class={cls(PARTS.AUX, stat)}>
-              {@render aux(i, stat)}
+              {@render aux(i, label, stat)}
             </div>
-            <div class={cls(PARTS.LABEL, stat)}>
+          {/if}
+          <div class={cls(PARTS.LABEL, stat)}>
+            {#if children}
+              {@render children(i, label, stat)}
+            {:else}
               {label}
-            </div>
+            {/if}
           </div>
-        {:else}
-          <div class={cls(PARTS.LABEL, stat)}>
-            {label}
+        </div>
+        {#if extra !== false && i < labels.length - 1 }
+          <div class={cls(PARTS.EXTRA, stat)} role="separator">
+            {#if typeof extra === "function"}
+              {@render extra(i, label, stat)}
+            {/if}
           </div>
         {/if}
       </li>
-      {#if i < current}
-        {@render separator(i)}
-      {/if}
     {/each}
   </ol>
 {/if}
-
-{#snippet separator(i: number)}
-  {#if extra}
-    {@const stat = i < current ? VARIANT.ACTIVE : VARIANT.INACTIVE}
-    <div class={cls(PARTS.EXTRA, stat)} role="separator">
-      {@render extra(i, stat)}
-    </div>
-  {/if}
-{/snippet}

package/_svseeds/_ProgressTracker.svelte.d.ts

@@ -1,8 +1,9 @@
 export interface ProgressTrackerProps {
     current: number;
     labels: string[];
-    aux?: Snippet<[number, string]>;
-    extra?: Snippet<[number, string]>;
+    children?: Snippet<[number, string, string]>;
+    aux?: Snippet<[number, string, string]>;
+    extra?: boolean | Snippet<[number, string, string]>;
     styling?: SVSClass;
     variant?: string;
     eachVariant?: SvelteMap<number, string> | Map<number, string>;
@@ -18,8 +19,9 @@ import { type SVSClass } from "./core";
  * interface ProgressTrackerProps {
  *   current: number; // bindable (0)
  *   labels: string[];
- *   aux?: Snippet<[number, string]>; // Snippet<[index,variant]>
- *   extra?: Snippet<[number, string]>; // Snippet<[index,variant]>
+ *   children?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
+ *   aux?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
+ *   extra?: boolean | Snippet<[number, string, string]>; // (true) Snippet<[index,label,variant]>
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  *   eachVariant?: SvelteMap<number, string> | Map<number, string>;

package/_svseeds/_Slider.svelte

@@ -34,8 +34,8 @@
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
-  export type SliderReqdProps = "min" | "max";
-  export type SliderBindProps = "min" | "max" | "value" | "variant" | "element";
+  export type SliderReqdProps = "range";
+  export type SliderBindProps = "range" | "value" | "element" | "variant";
   export type Range = { min: number, max: number };
 
   const preset = "svs-slider";

package/_svseeds/_Slider.svelte.d.ts

@@ -12,8 +12,8 @@ export interface SliderProps {
     styling?: SVSClass;
     variant?: string;
 }
-export type SliderReqdProps = "min" | "max";
-export type SliderBindProps = "min" | "max" | "value" | "variant" | "element";
+export type SliderReqdProps = "range";
+export type SliderBindProps = "range" | "value" | "element" | "variant";
 export type Range = {
     min: number;
     max: number;

package/_svseeds/_Sortable.svelte

@@ -3,22 +3,22 @@
   default value: `(value)`
   ```ts
   interface SortableProps {
-    items: SortableItems; // wrapper of string array as items to handle DnD
+    items: SortableItems; // wrapper around string array to handle drag and drop
     item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
-    ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
+    ghost?: Snippet<[string]>; // custom ghost element while dragging (translucent item); Snippet<[value]>
     name?: string;        // name of this group (random string)
-    mode?: SortableMode;  // sort mode ("std")
-    accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
-    sort?: boolean;       // enable sort within same group (true)
-    multiple?: boolean;   // enable multiple select & drag with them (false)
+    mode?: "std" | "clone" | "swap";  // sort mode ("std")
+    accept?: string[];    // list of accepted group names (undefined); undefined=any,[]=none
+    sort?: boolean;       // enable sorting within the same group (true)
+    multiple?: boolean;   // enable multiple selection and dragging (false)
     draggable?: boolean;  // enable default pointerdown handler (true)
-    appendable?: boolean; // enable append when enter group area (false)
-    confirm?: boolean     // enable confirm interval time to move items (false)
+    appendable?: boolean; // enable appending when entering group area (false)
+    confirm?: boolean     // enable confirmation delay before moving items (false)
     styling?: SVSClass;
     variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
-  type SortableMode = "std" | "clone" | "swap";
-  class SortableItems { // methods are same with array's
+  // Methods have the same functionality as standard array methods
+  class SortableItems {
     constructor(values: string[])
     at(index: number): string | undefined
     replace(index: number, value: string): boolean
@@ -26,8 +26,8 @@
     pop(): string | undefined
     unshift(value: string)
     shift(): string | undefined
-    insert(index: number, value: string) // instead of splice
-    extract(index: number): string | undefined // instead of splice
+    insert(index: number, value: string) // alternative to splice
+    extract(index: number): string | undefined // alternative to splice
     isEmpty(): boolean
     clear(): void
     get length(): number
@@ -50,17 +50,17 @@
 
   type SortableMode = "std" | "clone" | "swap";
   export interface SortableProps {
-    items: SortableItems; // wrapper of string array as items to handle DnD
+    items: SortableItems; // wrapper around string array to handle drag and drop
     item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
-    ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
+    ghost?: Snippet<[string]>; // custom ghost element while dragging (translucent item); Snippet<[value]>
     name?: string;        // name of this group (random string)
     mode?: SortableMode;  // sort mode ("std")
-    accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
-    sort?: boolean;       // enable sort within same group (true)
-    multiple?: boolean;   // enable multiple select & drag with them (false)
+    accept?: string[];    // list of accepted group names (undefined); undefined=any,[]=none
+    sort?: boolean;       // enable sorting within the same group (true)
+    multiple?: boolean;   // enable multiple selection and dragging (false)
     draggable?: boolean;  // enable default pointerdown handler (true)
-    appendable?: boolean; // enable append when enter group area (false)
-    confirm?: boolean     // enable confirm interval time to move items (false)
+    appendable?: boolean; // enable appending when entering group area (false)
+    confirm?: boolean     // enable confirmation delay before moving items (false)
     styling?: SVSClass;
     variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
@@ -651,7 +651,7 @@
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
   const group: KeyValue = SortableItems._newItem(name);
-  const elems: HTMLElement[] = [];
+  const elems: HTMLElement[] = $state([]);
   const shadow = new Shadow(ghost);
   const selector = new MultiSelect(items, multiple, triggerSelect);
   const listener = new ListenerHandler();

package/_svseeds/_Sortable.svelte.d.ts

@@ -61,22 +61,22 @@ import { type SVSClass } from "./core";
  * default value: `(value)`
  * ```ts
  * interface SortableProps {
- *   items: SortableItems; // wrapper of string array as items to handle DnD
+ *   items: SortableItems; // wrapper around string array to handle drag and drop
  *   item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
- *   ghost?: Snippet<[string]>; // custom shadow while dragging (the translucent item); Snippet<[value]>
+ *   ghost?: Snippet<[string]>; // custom ghost element while dragging (translucent item); Snippet<[value]>
  *   name?: string;        // name of this group (random string)
- *   mode?: SortableMode;  // sort mode ("std")
- *   accept?: string[];    // list of accept group names (undefined); undefined=any,[]=none
- *   sort?: boolean;       // enable sort within same group (true)
- *   multiple?: boolean;   // enable multiple select & drag with them (false)
+ *   mode?: "std" | "clone" | "swap";  // sort mode ("std")
+ *   accept?: string[];    // list of accepted group names (undefined); undefined=any,[]=none
+ *   sort?: boolean;       // enable sorting within the same group (true)
+ *   multiple?: boolean;   // enable multiple selection and dragging (false)
  *   draggable?: boolean;  // enable default pointerdown handler (true)
- *   appendable?: boolean; // enable append when enter group area (false)
- *   confirm?: boolean     // enable confirm interval time to move items (false)
+ *   appendable?: boolean; // enable appending when entering group area (false)
+ *   confirm?: boolean     // enable confirmation delay before moving items (false)
  *   styling?: SVSClass;
  *   variant?: string;     // bindable (VARIANT.NEUTRAL)
  * }
- * type SortableMode = "std" | "clone" | "swap";
- * class SortableItems { // methods are same with array's
+ * // Methods have the same functionality as standard array methods
+ * class SortableItems {
  *   constructor(values: string[])
  *   at(index: number): string | undefined
  *   replace(index: number, value: string): boolean
@@ -84,8 +84,8 @@ import { type SVSClass } from "./core";
  *   pop(): string | undefined
  *   unshift(value: string)
  *   shift(): string | undefined
- *   insert(index: number, value: string) // instead of splice
- *   extract(index: number): string | undefined // instead of splice
+ *   insert(index: number, value: string) // alternative to splice
+ *   extract(index: number): string | undefined // alternative to splice
  *   isEmpty(): boolean
  *   clear(): void
  *   get length(): number

package/_svseeds/_TagsInput.svelte

@@ -19,7 +19,7 @@
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
-  interface TagsInputEvents { // cancel if true
+  interface TagsInputEvents { // cancel if returns true
     onadd?: (values: string[], value: string) => void | boolean;
     onremove?: (values: string[], value: string, index: number) => void | boolean;
   }

package/_svseeds/_TagsInput.svelte.d.ts

@@ -45,7 +45,7 @@ import { type SVSClass } from "./core";
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
- * interface TagsInputEvents { // cancel if true
+ * interface TagsInputEvents { // cancel if returns true
  *   onadd?: (values: string[], value: string) => void | boolean;
  *   onremove?: (values: string[], value: string, index: number) => void | boolean;
  * }

package/_svseeds/_Toggle.svelte

@@ -3,11 +3,11 @@
   default value: `(value)`
   ```ts
   interface ToggleProps {
-    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+    children: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     value?: boolean; // bindable (false)
-    type?: "button" | "switch"; // ("button")
+    role?: "button" | "switch"; // ("button")
     ariaLabel?: string;
     attributes?: HTMLButtonAttributes;
     action?: Action;
@@ -19,11 +19,11 @@
 -->
 <script module lang="ts">
   export interface ToggleProps {
-    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+    children: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     value?: boolean; // bindable (false)
-    type?: "button" | "switch"; // ("button")
+    role?: "button" | "switch"; // ("button")
     ariaLabel?: string;
     attributes?: HTMLButtonAttributes;
     action?: Action;
@@ -31,7 +31,7 @@
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
-  export type ToggleReqdProps = never;
+  export type ToggleReqdProps = "children";
   export type ToggleBindProps = "value" | "variant" | "element";
 
   type ToggleTarget = { currentTarget: EventTarget & HTMLButtonElement };
@@ -44,13 +44,14 @@
 </script>
 
 <script lang="ts">
-  let { children, left, right, value = $bindable(false), type = "button", ariaLabel, attributes, action, element = $bindable(), styling, variant = $bindable("") }: ToggleProps = $props();
+  let { children, left, right, value = $bindable(false), role = "button", ariaLabel, attributes, action, element = $bindable(), styling, variant = $bindable("") }: ToggleProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "class", "type", "role", "aria-checked", "aria-pressed", "onclick");
   let neutral = isNeutral(variant) ? variant : VARIANT.NEUTRAL;
+  let state = $derived(role === "button" ? { "aria-pressed": value } : { "aria-checked": value });
 
   // *** Bind Handlers *** //
   $effect(() => { neutral = isNeutral(variant) ? variant : neutral });
@@ -73,11 +74,11 @@
 {#if left || right}
   <span class={cls(PARTS.WHOLE, variant)} role="group">
     {@render side(PARTS.LEFT, left)}
-    {@render button(type)}
+    {@render button()}
     {@render side(PARTS.RIGHT, right)}
   </span>
 {:else}
-  {@render button(type)}
+  {@render button()}
 {/if}
 
 {#snippet side(area: string, body?: Snippet<[boolean, string, HTMLButtonElement | undefined]>)}
@@ -85,38 +86,16 @@
     <span class={cls(area, variant)}>{@render body(value, variant, element)}</span>
   {/if}
 {/snippet}
-{#snippet contents()}
-  {#if children}
-    {@render children(value, variant, element)}
-  {/if}
-{/snippet}
-{#snippet button(role: string)}
+{#snippet button()}
+  {@const r = role === "button" ? undefined : role}
   {@const c = cls(PARTS.MAIN, variant)}
-  {#if role === "button"}
-    {#if action}
-      <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={ariaLabel} {onclick} {...attrs} use:action>
-        {@render contents()}
-      </button>
-    {:else}
-      <button bind:this={element} class={c} type="button" aria-pressed={value} aria-label={ariaLabel} {onclick} {...attrs}>
-        {@render contents()}
-      </button>
-    {/if}
+  {#if action}
+    <button bind:this={element} class={c} type="button" role={r} aria-label={ariaLabel} {onclick} {...state} {...attrs} use:action>
+      {@render children(value, variant, element)}
+    </button>
   {:else}
-    {@const style = "position: relative;"}
-    {#if action}
-      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} aria-label={ariaLabel} {onclick} {...attrs} use:action>
-        {@render thumb()}
-      </button>
-    {:else}
-      <button bind:this={element} class={c} {style} type="button" {role} aria-checked={value} aria-label={ariaLabel} {onclick} {...attrs}>
-        {@render thumb()}
-      </button>
-    {/if}
+    <button bind:this={element} class={c} type="button" role={r} aria-label={ariaLabel} {onclick} {...state} {...attrs}>
+      {@render children(value, variant, element)}
+    </button>
   {/if}
 {/snippet}
-{#snippet thumb()}
-  <span class={cls(PARTS.AUX, variant)} style="position: absolute;">
-    {@render contents()}
-  </span>
-{/snippet}

package/_svseeds/_Toggle.svelte.d.ts

@@ -1,9 +1,9 @@
 export interface ToggleProps {
-    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
+    children: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
     left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
     right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
     value?: boolean;
-    type?: "button" | "switch";
+    role?: "button" | "switch";
     ariaLabel?: string;
     attributes?: HTMLButtonAttributes;
     action?: Action;
@@ -11,7 +11,7 @@ export interface ToggleProps {
     styling?: SVSClass;
     variant?: string;
 }
-export type ToggleReqdProps = never;
+export type ToggleReqdProps = "children";
 export type ToggleBindProps = "value" | "variant" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
@@ -21,11 +21,11 @@ import { type SVSClass } from "./core";
  * default value: `(value)`
  * ```ts
  * interface ToggleProps {
- *   children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
+ *   children: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  *   left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  *   right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  *   value?: boolean; // bindable (false)
- *   type?: "button" | "switch"; // ("button")
+ *   role?: "button" | "switch"; // ("button")
  *   ariaLabel?: string;
  *   attributes?: HTMLButtonAttributes;
  *   action?: Action;

package/_svseeds/_ToggleGroup.svelte

@@ -4,40 +4,36 @@
   ```ts
   interface ToggleGroupProps {
     options: SvelteMap<string, string> | Map<string, string>;
+    children?: Snippet<[string, string, string]>; // Snippet<[value,text,variant]>
     values?: string[]; // bindable
     multiple?: boolean; // (true)
     ariaDescId?: string;
     ariaErrMsgId?: string; // bindable
     action?: Action;
+    elements?: HTMLButtonElement[]; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
-    [key: string]: unknown | Snippet<[string]>; // contents instead of the text
   }
   ```
 -->
 <script module lang="ts">
   export interface ToggleGroupProps {
     options: SvelteMap<string, string> | Map<string, string>;
+    children?: Snippet<[string, string, string]>; // Snippet<[value,text,variant]>
     values?: string[]; // bindable
     multiple?: boolean; // (true)
     ariaDescId?: string;
     ariaErrMsgId?: string; // bindable
     action?: Action;
+    elements?: HTMLButtonElement[]; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
-    [key: string]: unknown | Snippet<[string]>; // contents instead of the text
   }
   export type ToggleGroupReqdProps = "options";
-  export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "variant";
+  export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "elements" | "variant";
 
   const preset = "svs-toggle-group";
 
-  function getSnippet(text: string, rest: Record<string, unknown>): Snippet<[string]> | undefined {
-    if (!Object.hasOwn(rest, text)) return;
-    if (typeof rest[text] !== "function") return;
-    return rest[text] as Snippet<[string]>;
-  }
-
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
@@ -45,7 +41,7 @@
 </script>
 
 <script lang="ts">
-  let { options, values = $bindable([]), multiple = true, ariaDescId, ariaErrMsgId = $bindable(), attributes, action, styling, variant = $bindable(""), ...rest }: ToggleGroupProps = $props();
+  let { options, children, values = $bindable([]), multiple = true, ariaDescId, ariaErrMsgId = $bindable(), action, elements = $bindable([]), styling, variant = $bindable("") }: ToggleGroupProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -70,25 +66,25 @@
 
 {#if opts.length}
   <span class={cls(PARTS.WHOLE, variant)} role={roleGroup} aria-describedby={ariaDescId} aria-invalid={!multiple ? invalid : undefined} aria-errormessage={!multiple ? ariaErrMsgId : undefined}>
-    {#each opts as { value, text, checked } (value)}
-      {@const c = cls(PARTS.MAIN, checked ? VARIANT.ACTIVE : variant)}
+    {#each opts as { value, text, checked }, i (value)}
+      {@const v = checked ? VARIANT.ACTIVE : variant}
+      {@const c = cls(PARTS.MAIN, v)}
       {#if action}
-        <button class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role} use:action>
-          {@render content(value, text)}
+        <button bind:this={elements[i]} class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role} use:action>
+          {@render content(value, text, v)}
         </button>
       {:else}
-        <button class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role}>
-          {@render content(value, text)}
+        <button bind:this={elements[i]} class={c} aria-checked={checked} aria-invalid={multiple ? invalid : undefined} aria-errormessage={multiple ? ariaErrMsgId : undefined} onclick={updateValues(value)} type="button" {role}>
+          {@render content(value, text, v)}
         </button>
       {/if}
     {/each}
   </span>
 {/if}
 
-{#snippet content(value: string, text: string)}
-  {@const snippet = getSnippet(text, rest)}
-  {#if snippet}
-    {@render snippet(value)}
+{#snippet content(value: string, text: string, variant: string)}
+  {#if children}
+    {@render children(value, text, variant)}
   {:else}
     {text}
   {/if}

package/_svseeds/_ToggleGroup.svelte.d.ts

@@ -1,16 +1,17 @@
 export interface ToggleGroupProps {
     options: SvelteMap<string, string> | Map<string, string>;
+    children?: Snippet<[string, string, string]>;
     values?: string[];
     multiple?: boolean;
     ariaDescId?: string;
     ariaErrMsgId?: string;
     action?: Action;
+    elements?: HTMLButtonElement[];
     styling?: SVSClass;
     variant?: string;
-    [key: string]: unknown | Snippet<[string]>;
 }
 export type ToggleGroupReqdProps = "options";
-export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "variant";
+export type ToggleGroupBindProps = "values" | "ariaErrMsgId" | "elements" | "variant";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type SvelteMap } from "svelte/reactivity";
@@ -20,17 +21,18 @@ import { type SVSClass } from "./core";
  * ```ts
  * interface ToggleGroupProps {
  *   options: SvelteMap<string, string> | Map<string, string>;
+ *   children?: Snippet<[string, string, string]>; // Snippet<[value,text,variant]>
  *   values?: string[]; // bindable
  *   multiple?: boolean; // (true)
  *   ariaDescId?: string;
  *   ariaErrMsgId?: string; // bindable
  *   action?: Action;
+ *   elements?: HTMLButtonElement[]; // bindable
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
- *   [key: string]: unknown | Snippet<[string]>; // contents instead of the text
  * }
  * ```
  */
-declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "variant" | "values" | "ariaErrMsgId">;
+declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "variant" | "elements" | "values" | "ariaErrMsgId">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

package/_svseeds/_Tooltip.svelte

@@ -13,7 +13,7 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   type Vector = { x: number, y: number };
-  type Position = "top" | "left" | "bottom" | "right";
+  type Position = "top" | "right" | "bottom" | "left";
   type Align = "start" | "center" | "end";
   ```
 -->
@@ -37,7 +37,7 @@
     return (node) => { return core.action(node, text, delay, cursor, name); };
   }
   export type Vector = { x: number, y: number };
-  export type Position = "top" | "left" | "bottom" | "right";
+  export type Position = "top" | "right" | "bottom" | "left";
   export type Align = "start" | "center" | "end";
 
   type valueof<T> = T[keyof T];

package/_svseeds/_Tooltip.svelte.d.ts

@@ -21,7 +21,7 @@ export type Vector = {
     x: number;
     y: number;
 };
-export type Position = "top" | "left" | "bottom" | "right";
+export type Position = "top" | "right" | "bottom" | "left";
 export type Align = "start" | "center" | "end";
 import { type Snippet } from "svelte";
 import { type Action, type ActionReturn } from "svelte/action";
@@ -40,7 +40,7 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * type Vector = { x: number, y: number };
- * type Position = "top" | "left" | "bottom" | "right";
+ * type Position = "top" | "right" | "bottom" | "left";
  * type Align = "start" | "center" | "end";
  * ```
  */

package/_svseeds/core.js

@@ -1 +1 @@
-export{t as BASE,e as VARIANT,r as PARTS,s as elemId,n as fnClass,u as isNeutral,a as isUnsignedInteger,c as omit,l as debounce,h as throttle,o as UniqueId};const t="base",e=Object.freeze({NEUTRAL:"neutral",ACTIVE:"active",INACTIVE:"inactive"}),r=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"});function n(r,n){const o=i(n)??i(r);return null==o?(t,e)=>{}:"string"==typeof o?(t,e)=>`${o} ${t} ${e}`:(r,n)=>function(r,n,i){const o=r[n]?.[t]??"",s=r[n]?.[i]??r[n]?.[e.NEUTRAL]??"";if(!o&&!s)return;return o&&s?[o,s]:o||s}(o,r,n)}function i(t){if(null==t)return;if("string"==typeof t)return t.trim()?t:void 0;const e=Object.entries(t);return e.length?Object.fromEntries(e.map((([t,e])=>null===e||"object"!=typeof e||Array.isArray(e)?[t,{base:e}]:[t,e]))):void 0}class o{static#t=[...Array.from(Array(25).keys(),(t=>t+65)),...Array.from(Array(25).keys(),(t=>t+97))];#e=new Set;#r=3;#n=1e5;get id(){return this.get(!0)}constructor(t=3,e=1e5){t>2&&(this.#r=t),(e=Math.trunc(e))>0&&e<Math.min(Math.pow(50,this.#r),Number.MAX_SAFE_INTEGER)&&(this.#n=e)}get(t){if(t)return this.#e.size>this.#n&&this.#e.clear(),this.#i()}#o(){return o.#t[Math.trunc(Math.random()*o.#t.length)]}#s(){return String.fromCharCode(...Array(this.#r).fill(null).map((()=>this.#o())))}#i(){let t=this.#s();for(;this.#e.has(t);)t=this.#s();return this.#e.add(t),t}}const s=new o;function u(t){return t!==e.ACTIVE&&t!==e.INACTIVE}function a(t){return Number.isInteger(t)&&t>=0}function c(t,...e){if(!t)return{};const r={...t};return e.forEach((t=>delete r[t])),r}function l(t,e){let r;return(...n)=>{r&&clearTimeout(r),r=setTimeout((()=>{e.call(null,...n)}),t)}}function h(t,e){let r,n=0;const i=()=>Date.now()-n,o=t=>{e.call(null,...t),n=Date.now()};return(...e)=>{if(!n)return o(e);clearTimeout(r),r=setTimeout((()=>{i()>=t&&o(e)}),t-i())}}
+export{t as BASE,e as VARIANT,r as PARTS,s as elemId,n as fnClass,u as isNeutral,a as isUnsignedInteger,c as omit,l as debounce,h as throttle,o as UniqueId};const t="base",e=Object.freeze({NEUTRAL:"neutral",ACTIVE:"active",INACTIVE:"inactive"}),r=Object.freeze({WHOLE:"whole",MIDDLE:"middle",MAIN:"main",TOP:"top",LEFT:"left",RIGHT:"right",BOTTOM:"bottom",LABEL:"label",AUX:"aux",EXTRA:"extra"});function n(r,n){const o=i(n)??i(r);return null==o?(t,e)=>{}:"string"==typeof o?(t,e)=>`${o} ${t} ${e}`:(r,n)=>function(r,n,i){const o=r[n]?.[t]??"",s=r[n]?.[i]??r[n]?.[e.NEUTRAL]??"";if(!o&&!s)return;return o&&s?[o,s]:o||s}(o,r,n)}function i(t){if(null==t)return;if("string"==typeof t)return t.trim()?t:void 0;const e=Object.entries(t);return e.length?Object.fromEntries(e.map(([t,e])=>null===e||"object"!=typeof e||Array.isArray(e)?[t,{base:e}]:[t,e])):void 0}class o{static#t=[...Array.from(Array(25).keys(),t=>t+65),...Array.from(Array(25).keys(),t=>t+97)];#e=new Set;#r=3;#n=1e5;get id(){return this.get(!0)}constructor(t=3,e=1e5){t>2&&(this.#r=t),(e=Math.trunc(e))>0&&e<Math.min(Math.pow(50,this.#r),Number.MAX_SAFE_INTEGER)&&(this.#n=e)}get(t){if(t)return this.#e.size>this.#n&&this.#e.clear(),this.#i()}#o(){return o.#t[Math.trunc(Math.random()*o.#t.length)]}#s(){return String.fromCharCode(...Array(this.#r).fill(null).map(()=>this.#o()))}#i(){let t=this.#s();for(;this.#e.has(t);)t=this.#s();return this.#e.add(t),t}}const s=new o;function u(t){return t!==e.ACTIVE&&t!==e.INACTIVE}function a(t){return Number.isInteger(t)&&t>=0}function c(t,...e){if(!t)return{};const r={...t};return e.forEach(t=>delete r[t]),r}function l(t,e){let r;return(...n)=>{r&&clearTimeout(r),r=setTimeout(()=>{e.call(null,...n)},t)}}function h(t,e){let r,n=0;const i=()=>Date.now()-n,o=t=>{e.call(null,...t),n=Date.now()};return(...e)=>{if(!n)return o(e);clearTimeout(r),r=setTimeout(()=>{i()>=t&&o(e)},t-i())}}

package/index.d.ts

@@ -5,6 +5,7 @@ export { default as ColorPicker, type ColorPickerProps, type ColorPickerReqdProp
 export { default as ComboBox, type ComboBoxProps, type ComboBoxReqdProps, type ComboBoxBindProps } from "./_svseeds/_ComboBox.svelte";
 export { default as ContextMenu, type ContextMenuProps, type ContextMenuReqdProps, type ContextMenuBindProps } from "./_svseeds/_ContextMenu.svelte";
 export { default as Disclosure, type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_svseeds/_Disclosure.svelte";
+export { default as Drawer, type DrawerProps, type Position, type DrawerReqdProps, type DrawerBindProps } from "./_svseeds/_Drawer.svelte";
 export { default as HotkeyCapture, type HotkeyCaptureProps, type HotkeyCaptureReqdProps, type HotkeyCaptureBindProps } from "./_svseeds/_HotkeyCapture.svelte";
 export { default as Modal, type ModalProps, type ModalReqdProps, type ModalBindProps } from "./_svseeds/_Modal.svelte";
 export { default as ProgressTracker, type ProgressTrackerProps, type ProgressTrackerReqdProps, type ProgressTrackerBindProps } from "./_svseeds/_ProgressTracker.svelte";

package/index.js

@@ -5,6 +5,7 @@ export { default as ColorPicker, getHex } from "./_svseeds/_ColorPicker.svelte";
 export { default as ComboBox } from "./_svseeds/_ComboBox.svelte";
 export { default as ContextMenu } from "./_svseeds/_ContextMenu.svelte";
 export { default as Disclosure } from "./_svseeds/_Disclosure.svelte";
+export { default as Drawer } from "./_svseeds/_Drawer.svelte";
 export { default as HotkeyCapture } from "./_svseeds/_HotkeyCapture.svelte";
 export { default as Modal } from "./_svseeds/_Modal.svelte";
 export { default as ProgressTracker } from "./_svseeds/_ProgressTracker.svelte";

package/package.json

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