svseeds 0.5.0 → 0.5.2

package/_svseeds/_Drawer.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface DrawerProps {
     children: Snippet<[string]>; // Snippet<[variant]>
@@ -17,6 +18,12 @@
   }
   type Position = "top" | "right" | "bottom" | "left";
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole" {id} {...attributes} bind:this={element}>
+    {children}
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface DrawerProps {
@@ -50,8 +57,8 @@
   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}`;
+      ? `--width-from:100%;--width-to:100%;--height-from:0;--height-to:${size};${interpolate}`
+      : `--width-from:0;--width-to:${size};--height-from:100%;--height-to:100%;${interpolate}`;
   }
 
   import { type Snippet, untrack } from "svelte";
@@ -101,7 +108,7 @@
 
 <style>
   [popover] {
-		position: absolute;
+    position: fixed;
     top: var(--top);
     left: var(--left);
     bottom: var(--bottom);

package/_svseeds/_Drawer.svelte.d.ts

@@ -18,7 +18,8 @@ import { type Snippet } from "svelte";
 import { type HTMLAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface DrawerProps {
  *   children: Snippet<[string]>; // Snippet<[variant]>
@@ -35,6 +36,12 @@ import { type SVSClass } from "./core";
  * }
  * type Position = "top" | "right" | "bottom" | "left";
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole" {id} {...attributes} bind:this={element}>
+ *   {children}
+ * </div>
+ * ```
  */
 declare const Drawer: import("svelte").Component<DrawerProps, {}, "variant" | "open" | "element">;
 type Drawer = ReturnType<typeof Drawer>;

package/_svseeds/_HotkeyCapture.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface HotkeyCaptureProps {
     value?: string; // bindable
@@ -12,6 +13,10 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <input class="main" type="text" {placeholder} {disabled} bind:value bind:this={element} />
+  ```
 -->
 <script module lang="ts">
   export interface HotkeyCaptureProps {

package/_svseeds/_HotkeyCapture.svelte.d.ts

@@ -11,7 +11,8 @@ export type HotkeyCaptureReqdProps = never;
 export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "variant" | "element";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface HotkeyCaptureProps {
  *   value?: string; // bindable
@@ -23,6 +24,10 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <input class="main" type="text" {placeholder} {disabled} bind:value bind:this={element} />
+ * ```
  */
 declare const HotkeyCapture: import("svelte").Component<HotkeyCaptureProps, {}, "variant" | "active" | "value" | "disabled" | "element">;
 type HotkeyCapture = ReturnType<typeof HotkeyCapture>;

package/_svseeds/_Modal.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ModalProps {
     children: Snippet<[string]>; // Snippet<[variant]>
@@ -14,6 +15,14 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <dialog class="whole" {id} aria-label={ariaLabel} {...attributes} bind:this={element}>
+    <div class="main">
+      {children}
+    </div>
+  </dialog>
+  ```
 -->
 <script module lang="ts">
   export interface ModalProps {

package/_svseeds/_Modal.svelte.d.ts

@@ -15,7 +15,8 @@ import { type Snippet } from "svelte";
 import { type HTMLDialogAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface ModalProps {
  *   children: Snippet<[string]>; // Snippet<[variant]>
@@ -29,6 +30,14 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <dialog class="whole" {id} aria-label={ariaLabel} {...attributes} bind:this={element}>
+ *   <div class="main">
+ *     {children}
+ *   </div>
+ * </dialog>
+ * ```
  */
 declare const Modal: import("svelte").Component<ModalProps, {}, "variant" | "open" | "element">;
 type Modal = ReturnType<typeof Modal>;

package/_svseeds/_ProgressTracker.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ProgressTrackerProps {
     current: number; // bindable (0)
@@ -13,6 +14,20 @@
     eachVariant?: SvelteMap<number, string> | Map<number, string>;
   }
   ```
+  ### Anatomy
+  ```svelte
+  <ol class="whole">
+    {#each labels as label}
+      <li class="middle">
+        <div class="main">
+          <div class="aux" conditional>{aux}</div>
+          <div class="label">{label} or {children}</div>
+        </div>
+        <div class="extra" conditional>{extra}</div>
+      </li>
+    {/each}
+  </ol>
+  ```
 -->
 <script module lang="ts">
   export interface ProgressTrackerProps {

package/_svseeds/_ProgressTracker.svelte.d.ts

@@ -14,7 +14,8 @@ import { type Snippet } from "svelte";
 import { type SvelteMap } from "svelte/reactivity";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface ProgressTrackerProps {
  *   current: number; // bindable (0)
@@ -27,6 +28,20 @@ import { type SVSClass } from "./core";
  *   eachVariant?: SvelteMap<number, string> | Map<number, string>;
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <ol class="whole">
+ *   {#each labels as label}
+ *     <li class="middle">
+ *       <div class="main">
+ *         <div class="aux" conditional>{aux}</div>
+ *         <div class="label">{label} or {children}</div>
+ *       </div>
+ *       <div class="extra" conditional>{extra}</div>
+ *     </li>
+ *   {/each}
+ * </ol>
+ * ```
  */
 declare const ProgressTracker: import("svelte").Component<ProgressTrackerProps, {}, "variant" | "current">;
 type ProgressTracker = ReturnType<typeof ProgressTracker>;

package/_svseeds/_SelectField.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface SelectFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
@@ -21,6 +22,28 @@
   }
   type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    <div class="top" conditional>
+      <label class="label" conditional>
+        {label}
+        <span class="extra" conditional>{extra}</span>
+      </label>
+      <span class="aux" conditional>{aux}</span>
+    </div>
+    <div class="middle">
+      <span class="left" conditional>{left}</span>
+      <select class="main" {...attributes} bind:value bind:this={element} use:action>
+        {#each options as { option, text }}
+          <option value={option}>{text}</option>
+        {/each}
+      </select>
+      <span class="right" conditional>{right}</span>
+    </div>
+    <div class="bottom" conditional>{bottom}</div>
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface SelectFieldProps {

package/_svseeds/_SelectField.svelte.d.ts

@@ -24,7 +24,8 @@ import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLSelectAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface SelectFieldProps {
  *   options: SvelteMap<string, string> | Map<string, string>;
@@ -45,6 +46,28 @@ import { type SVSClass } from "./core";
  * }
  * type SelectFieldValidation = (value: string, validity: ValidityState) => string | undefined;
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole">
+ *   <div class="top" conditional>
+ *     <label class="label" conditional>
+ *       {label}
+ *       <span class="extra" conditional>{extra}</span>
+ *     </label>
+ *     <span class="aux" conditional>{aux}</span>
+ *   </div>
+ *   <div class="middle">
+ *     <span class="left" conditional>{left}</span>
+ *     <select class="main" {...attributes} bind:value bind:this={element} use:action>
+ *       {#each options as { option, text }}
+ *         <option value={option}>{text}</option>
+ *       {/each}
+ *     </select>
+ *     <span class="right" conditional>{right}</span>
+ *   </div>
+ *   <div class="bottom" conditional>{bottom}</div>
+ * </div>
+ * ```
  */
 declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "variant" | "value" | "element">;
 type SelectField = ReturnType<typeof SelectField>;

package/_svseeds/_Slider.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface SliderProps {
     range: Range; // bindable
@@ -18,6 +19,19 @@
   }
   type Range = { min: number, max: number };
   ```
+  ### Anatomy
+  ```svelte
+  <span class={cls(PARTS.WHOLE, variant)}>
+    <span class="left">{left}</span>
+    <input class="main" type="range" min={range.min} max={range.max} {step} {...attrs} bind:value bind:this={element} use:action />
+    <datalist conditional>
+      {#each options as option}
+        <option value={option}></option>
+      {/each}
+    </datalist>
+    <span class="right" conditional>{right}</span>
+  </span>
+  ```
 -->
 <script module lang="ts">
   export interface SliderProps {

package/_svseeds/_Slider.svelte.d.ts

@@ -24,7 +24,8 @@ import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface SliderProps {
  *   range: Range; // bindable
@@ -42,6 +43,19 @@ import { type SVSClass } from "./core";
  * }
  * type Range = { min: number, max: number };
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <span class={cls(PARTS.WHOLE, variant)}>
+ *   <span class="left">{left}</span>
+ *   <input class="main" type="range" min={range.min} max={range.max} {step} {...attrs} bind:value bind:this={element} use:action />
+ *   <datalist conditional>
+ *     {#each options as option}
+ *       <option value={option}></option>
+ *     {/each}
+ *   </datalist>
+ *   <span class="right" conditional>{right}</span>
+ * </span>
+ * ```
  */
 declare const Slider: import("svelte").Component<SliderProps, {}, "variant" | "value" | "range" | "element">;
 type Slider = ReturnType<typeof Slider>;

package/_svseeds/_Sortable.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface SortableProps {
     items: SortableItems; // wrapper around string array to handle drag and drop
@@ -17,6 +18,17 @@
     styling?: SVSClass;
     variant?: string;     // bindable (VARIANT.NEUTRAL)
   }
+  ```
+  ### Anatomy
+  ```svelte
+  <ul class="whole">
+    {#each items.values as value, i}
+      <li class="main">{item(value)}</li>
+    {/each}
+  </ul>
+  ```
+  ### Exports
+  ```ts
   // Methods have the same functionality as standard array methods
   class SortableItems {
     constructor(values: string[])

package/_svseeds/_Sortable.svelte.d.ts

@@ -58,7 +58,8 @@ type DragState = "ready" | "dragging" | "idle";
 import { type Snippet } from "svelte";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface SortableProps {
  *   items: SortableItems; // wrapper around string array to handle drag and drop
@@ -75,6 +76,17 @@ import { type SVSClass } from "./core";
  *   styling?: SVSClass;
  *   variant?: string;     // bindable (VARIANT.NEUTRAL)
  * }
+ * ```
+ * ### Anatomy
+ * ```svelte
+ * <ul class="whole">
+ *   {#each items.values as value, i}
+ *     <li class="main">{item(value)}</li>
+ *   {/each}
+ * </ul>
+ * ```
+ * ### Exports
+ * ```ts
  * // Methods have the same functionality as standard array methods
  * class SortableItems {
  *   constructor(values: string[])

package/_svseeds/_Tabs.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface TabsProps {
     labels?: string[];
@@ -11,6 +12,19 @@
     [key: string]: unknown | Snippet; // labels or contents of each tab
   }
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    <div class="top" aria-orientation={ariaOrientation}>
+      {#each labels as label}
+        <button class="label">{label}</button>
+      {/each}
+    </div>
+    {#each restProps as snippet}
+      <div class="main">{snippet}</div>
+    {/each}
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface TabsProps {

package/_svseeds/_Tabs.svelte.d.ts

@@ -11,7 +11,8 @@ export type TabsBindProps = "current" | "variant";
 import { type Snippet } from "svelte";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface TabsProps {
  *   labels?: string[];
@@ -22,6 +23,19 @@ import { type SVSClass } from "./core";
  *   [key: string]: unknown | Snippet; // labels or contents of each tab
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole">
+ *   <div class="top" aria-orientation={ariaOrientation}>
+ *     {#each labels as label}
+ *       <button class="label">{label}</button>
+ *     {/each}
+ *   </div>
+ *   {#each restProps as snippet}
+ *     <div class="main">{snippet}</div>
+ *   {/each}
+ * </div>
+ * ```
  */
 declare const Tabs: import("svelte").Component<TabsProps, {}, "variant" | "current">;
 type Tabs = ReturnType<typeof Tabs>;

package/_svseeds/_TagsInput.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface TagsInputProps {
     label?: Snippet<[string, string]>; // Snippet<[value,variant]>
@@ -24,6 +25,30 @@
     onremove?: (values: string[], value: string, index: number) => void | boolean;
   }
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    <span class="aux" conditional>
+      {#each values as text, i}
+        <span class="label">
+          {#if label}
+            {label}
+          {:else}
+            {text}
+          {/if}
+          <button class="extra">
+            {#if extra}
+              {extra}
+            {:else}
+              // Default Icon
+            {/if}
+          </button>
+        </span>
+      {/each}
+    </span>
+    <input class="main" type="text" {...attributes} aria-errormessage={ariaErrMsgId} bind:value bind:this={element} use:action />
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface TagsInputProps {

package/_svseeds/_TagsInput.svelte.d.ts

@@ -26,7 +26,8 @@ import { type Action } from "svelte/action";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface TagsInputProps {
  *   label?: Snippet<[string, string]>; // Snippet<[value,variant]>
@@ -50,6 +51,30 @@ import { type SVSClass } from "./core";
  *   onremove?: (values: string[], value: string, index: number) => void | boolean;
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole">
+ *   <span class="aux" conditional>
+ *     {#each values as text, i}
+ *       <span class="label">
+ *         {#if label}
+ *           {label}
+ *         {:else}
+ *           {text}
+ *         {/if}
+ *         <button class="extra">
+ *           {#if extra}
+ *             {extra}
+ *           {:else}
+ *             // Default Icon
+ *           {/if}
+ *         </button>
+ *       </span>
+ *     {/each}
+ *   </span>
+ *   <input class="main" type="text" {...attributes} aria-errormessage={ariaErrMsgId} bind:value bind:this={element} use:action />
+ * </div>
+ * ```
  */
 declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "variant" | "value" | "element" | "values" | "ariaErrMsgId">;
 type TagsInput = ReturnType<typeof TagsInput>;

package/_svseeds/_TextField.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface TextFieldProps {
     label?: string;
@@ -22,6 +23,33 @@
   }
   type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    <div class="top" conditional>
+      <label class="label" conditional>
+        {label}
+        <span class="extra" conditional>{extra}</span>
+      </label>
+      <span class="aux" conditional>{aux}</span>
+    </div>
+    <div class="middle">
+      <span class="left" conditional>{left}</span>
+      {#if type === "area"}
+        <textarea class={"main"} {...attributes} bind:value bind:this={element} use:action></textarea>
+      {:else}
+        <input class={"main"} {type} {...attributes} bind:value bind:this={element} use:action />
+        <datalist conditional>
+          {#each options as option}
+            <option value={option}></option>
+          {/each}
+        </datalist>
+      {/if}
+      <span class="right" conditional>{right}</span>
+    </div>
+    <div class="bottom" conditional>{bottom}</div>
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface TextFieldProps {

package/_svseeds/_TextField.svelte.d.ts

@@ -25,7 +25,8 @@ import { type SvelteSet } from "svelte/reactivity";
 import { type HTMLInputAttributes, type HTMLTextareaAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface TextFieldProps {
  *   label?: string;
@@ -47,6 +48,33 @@ import { type SVSClass } from "./core";
  * }
  * type TextFieldValidation = (value: string, validity: ValidityState) => string | undefined;
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole">
+ *   <div class="top" conditional>
+ *     <label class="label" conditional>
+ *       {label}
+ *       <span class="extra" conditional>{extra}</span>
+ *     </label>
+ *     <span class="aux" conditional>{aux}</span>
+ *   </div>
+ *   <div class="middle">
+ *     <span class="left" conditional>{left}</span>
+ *     {#if type === "area"}
+ *       <textarea class={"main"} {...attributes} bind:value bind:this={element} use:action></textarea>
+ *     {:else}
+ *       <input class={"main"} {type} {...attributes} bind:value bind:this={element} use:action />
+ *       <datalist conditional>
+ *         {#each options as option}
+ *           <option value={option}></option>
+ *         {/each}
+ *       </datalist>
+ *     {/if}
+ *     <span class="right" conditional>{right}</span>
+ *   </div>
+ *   <div class="bottom" conditional>{bottom}</div>
+ * </div>
+ * ```
  */
 declare const TextField: import("svelte").Component<TextFieldProps, {}, "variant" | "type" | "value" | "element">;
 type TextField = ReturnType<typeof TextField>;

package/_svseeds/_Toggle.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ToggleProps {
     children: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
@@ -16,6 +17,16 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <span class="whole" conditional>
+    <span class="left" conditional>{left}</span>
+    <button class="main" aria-pressed={value} aria-label={ariaLabel} {role} {...attributes} bind:this={element} use:action>
+      {children}
+    </button>
+    <span class="right" conditional>{right}</span>
+  </span>
+  ```
 -->
 <script module lang="ts">
   export interface ToggleProps {