svseeds 0.5.1 → 0.5.3

package/README.md

@@ -6,4 +6,10 @@
 
 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**
+## Documentation
+
+Visit https://svseeds.dev to view the documentation.
+
+## License
+
+Licensed under the [MIT license](https://github.com/scirexs/svseeds-ui/blob/main/LICENSE).

package/_svseeds/Accordion.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface AccordionProps {
     labels?: string[];
@@ -14,6 +15,16 @@
     svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
   }
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    {#each labels as label, i}
+      <Disclosure {label}>
+        {@render restProps[i]()}
+      </Disclosure>
+    {/each}
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface AccordionProps {

package/_svseeds/Accordion.svelte.d.ts

@@ -15,7 +15,8 @@ import { type Snippet } from "svelte";
 import { type SVSClass } from "./core";
 import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface AccordionProps {
  *   labels?: string[];
@@ -29,6 +30,16 @@ import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProp
  *   svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole">
+ *   {#each labels as label, i}
+ *     <Disclosure {label}>
+ *       {@render restProps[i]()}
+ *     </Disclosure>
+ *   {/each}
+ * </div>
+ * ```
  */
 declare const Accordion: import("svelte").Component<AccordionProps, {}, "variant" | "current">;
 type Accordion = ReturnType<typeof Accordion>;

package/_svseeds/DarkToggle.svelte

@@ -1,8 +1,10 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface DarkToggleProps {
+    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     dark?: boolean; // bindable (prefers-color-scheme)
     element?: HTMLButtonElement; // bindable
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -12,9 +14,20 @@
     svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
   }
   ```
+  ### Anatomy
+  ```svelte
+  <Toggle {...deps.svsToggle} bind:value={dark} bind:element>
+    {#if children}
+      {children}
+    {:else}
+      // Default Icon
+    {/if}
+  </Toggle>
+  ```
 -->
 <script module lang="ts">
   export interface DarkToggleProps {
+    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
     dark?: boolean; // bindable (prefers-color-scheme)
     element?: HTMLButtonElement; // bindable
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -171,12 +184,13 @@
   const twColors = new Set<string>();
   const theme = new Theme();
 
+  import { type Snippet } from "svelte";
   import { VARIANT, omit } from "./core";
   import Toggle, { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
 </script>
 
 <script lang="ts">
-  let { dark = $bindable(), variant = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
+  let { children, dark = $bindable(), variant = $bindable(""), element = $bindable(), deps }: DarkToggleProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
@@ -185,7 +199,8 @@
 
   // *** Initialize Deps *** //
   const svsToggle = {
-    ...omit(deps?.svsToggle, "children", "styling", "attributes"),
+    ...omit(deps?.svsToggle, "styling", "attributes"),
+    children: main,
     styling: deps?.svsToggle?.styling ?? `${preset} svs-toggle`,
     ariaLabel,
     attributes: {
@@ -199,20 +214,19 @@
 
 <!---------------------------------------->
 
-<Toggle bind:value={dark} bind:variant bind:element {...svsToggle}>
-  {#snippet children(value: boolean, variant: string, element: HTMLButtonElement | undefined)}
-    {#if deps?.svsToggle?.children}
-      {@render deps.svsToggle.children(value, variant, element)}
+<Toggle bind:value={dark} bind:variant bind:element {...svsToggle} />
+
+{#snippet main(value: boolean, variant: string, element: HTMLButtonElement | undefined)}
+  {#if children}
+    {@render children(value, variant, element)}
+  {:else}
+    {#if value}
+      {@render svgDark()}
     {:else}
-      {#if value}
-        {@render svgDark()}
-      {:else}
-        {@render svgLight()}
-      {/if}
+      {@render svgLight()}
     {/if}
-  {/snippet}
-</Toggle>
-
+  {/if}
+{/snippet}
 {#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" />

package/_svseeds/DarkToggle.svelte.d.ts

@@ -1,4 +1,5 @@
 export interface DarkToggleProps {
+    children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>;
     dark?: boolean;
     element?: HTMLButtonElement;
     variant?: string;
@@ -14,11 +15,14 @@ export declare const THEME: {
     readonly DARK: "dark";
 };
 export declare function setThemeToRoot(theme?: string): void;
+import { type Snippet } from "svelte";
 import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_Toggle.svelte";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface DarkToggleProps {
+ *   children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  *   dark?: boolean; // bindable (prefers-color-scheme)
  *   element?: HTMLButtonElement; // bindable
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -28,6 +32,16 @@ import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./
  *   svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <Toggle {...deps.svsToggle} bind:value={dark} bind:element>
+ *   {#if children}
+ *     {children}
+ *   {:else}
+ *     // Default Icon
+ *   {/if}
+ * </Toggle>
+ * ```
  */
 declare const DarkToggle: import("svelte").Component<DarkToggleProps, {}, "variant" | "element" | "dark">;
 type DarkToggle = ReturnType<typeof DarkToggle>;

package/_svseeds/TagsInputField.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface TagsInputFieldProps {
     label?: string;
@@ -31,6 +32,24 @@
     message: string;
   };
   ```
+  ### 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>
+      <TagsInput bind:values bind:element {...deps.svsTagsInput} />
+      <span class="right" conditional>{right}</span>
+    </div>
+    <div class="bottom" conditional>{bottom}</div>
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface TagsInputFieldProps {

package/_svseeds/TagsInputField.svelte.d.ts

@@ -32,7 +32,8 @@ import { type Snippet } from "svelte";
 import { type SVSClass } from "./core";
 import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps } from "./_TagsInput.svelte";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface TagsInputFieldProps {
  *   label?: string;
@@ -63,6 +64,24 @@ import { type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps }
  *   message: string;
  * };
  * ```
+ * ### 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>
+ *     <TagsInput bind:values bind:element {...deps.svsTagsInput} />
+ *     <span class="right" conditional>{right}</span>
+ *   </div>
+ *   <div class="bottom" conditional>{bottom}</div>
+ * </div>
+ * ```
  */
 declare const TagsInputField: import("svelte").Component<TagsInputFieldProps, {}, "variant" | "element" | "values">;
 type TagsInputField = ReturnType<typeof TagsInputField>;

package/_svseeds/ToggleGroupField.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ToggleGroupFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
@@ -25,6 +26,24 @@
   }
   type ToggleGroupFieldValidation = (values: string[]) => 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>
+      <ToggleGroup {options} {multiple} {...deps.svsToggleGroup} {...restProps} bind:values />
+      <span class="right" conditional>{right}</span>
+    </div>
+    <div class="bottom" conditional>{bottom}</div>
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface ToggleGroupFieldProps {

package/_svseeds/ToggleGroupField.svelte.d.ts

@@ -27,7 +27,8 @@ import { type SvelteMap } from "svelte/reactivity";
 import { type SVSClass } from "./core";
 import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_ToggleGroup.svelte";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface ToggleGroupFieldProps {
  *   options: SvelteMap<string, string> | Map<string, string>;
@@ -52,6 +53,24 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  * }
  * type ToggleGroupFieldValidation = (values: string[]) => 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>
+ *     <ToggleGroup {options} {multiple} {...deps.svsToggleGroup} {...restProps} bind:values />
+ *     <span class="right" conditional>{right}</span>
+ *   </div>
+ *   <div class="bottom" conditional>{bottom}</div>
+ * </div>
+ * ```
  */
 declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "variant" | "elements" | "values">;
 type ToggleGroupField = ReturnType<typeof ToggleGroupField>;

package/_svseeds/_Button.svelte

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

package/_svseeds/_Button.svelte.d.ts

@@ -18,7 +18,8 @@ import { type Action } from "svelte/action";
 import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface ButtonProps {
  *   children: Snippet<[string]>; // Snippet<[variant]>
@@ -34,6 +35,14 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <button class="whole" {type} {onclick} {...attributes} bind:this={element} use:action>
+ *   <span class="left" conditional>{left}</span>
+ *   <span class="main">{children}</span>
+ *   <span class="right" conditional>{right}</span>
+ * </button>
+ * ```
  */
 declare const Button: import("svelte").Component<ButtonProps, {}, "variant" | "form" | "element">;
 type Button = ReturnType<typeof Button>;

package/_svseeds/_CheckField.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface CheckFieldProps {
     options: SvelteMap<string, string> | Map<string, string>;
@@ -20,6 +21,27 @@
   }
   type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
   ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    <div class="top" conditional>
+      <span class="label" conditional>
+        {label}
+        <span class="extra" conditional>{extra}</span>
+      </span>
+      <span class="aux" conditional>{aux}</span>
+    </div>
+    <div class="middle">
+      {#each options as { value, text }, i}
+        <label class="main">
+          <input class="left" bind:this={elements[i]} use:action />
+          <span class="right">{text}</span>
+        </label>
+      {/each}
+    </div>
+    <div class="bottom" conditional>{bottom}</div>
+  </div>
+  ```
 -->
 <script module lang="ts">
   export interface CheckFieldProps {

package/_svseeds/_CheckField.svelte.d.ts

@@ -23,7 +23,8 @@ import { type SvelteMap } from "svelte/reactivity";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface CheckFieldProps {
  *   options: SvelteMap<string, string> | Map<string, string>;
@@ -43,6 +44,27 @@ import { type SVSClass } from "./core";
  * }
  * type CheckFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole">
+ *   <div class="top" conditional>
+ *     <span class="label" conditional>
+ *       {label}
+ *       <span class="extra" conditional>{extra}</span>
+ *     </span>
+ *     <span class="aux" conditional>{aux}</span>
+ *   </div>
+ *   <div class="middle">
+ *     {#each options as { value, text }, i}
+ *       <label class="main">
+ *         <input class="left" bind:this={elements[i]} use:action />
+ *         <span class="right">{text}</span>
+ *       </label>
+ *     {/each}
+ *   </div>
+ *   <div class="bottom" conditional>{bottom}</div>
+ * </div>
+ * ```
  */
 declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "variant" | "elements" | "values">;
 type CheckField = ReturnType<typeof CheckField>;

package/_svseeds/_ColorPicker.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ColorPickerProps {
     value?: string; // bindable ("#000000")
@@ -12,6 +13,17 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <label class="whole">
+    <div class="middle"> // this middle element is background for transparency color
+      <div class="main"> // this main element is color sample
+        <input type="color" {...attributes} bind:value bind:this={element} use:action />
+      </div>
+    </div>
+  </label>
+  ```
+  ### Exports
   ```ts
   type RgbColor = [number, number, number];
   function getHex(rgb: RgbColor): string

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -15,7 +15,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 ColorPickerProps {
  *   value?: string; // bindable ("#000000")
@@ -27,6 +28,17 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <label class="whole">
+ *   <div class="middle"> // this middle element is background for transparency color
+ *     <div class="main"> // this main element is color sample
+ *       <input type="color" {...attributes} bind:value bind:this={element} use:action />
+ *     </div>
+ *   </div>
+ * </label>
+ * ```
+ * ### Exports
  * ```ts
  * type RgbColor = [number, number, number];
  * function getHex(rgb: RgbColor): string

package/_svseeds/_ComboBox.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ComboBoxProps {
     options: SvelteSet<string> | Set<string>;
@@ -15,6 +16,18 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <span class="whole">
+    <input class="main" type="text" {...attributes} bind:value bind:this={element} use:action />
+    <div class="extra" conditional>{extra}</div>
+    <ul class="bottom">
+      {#each options as option}
+        <li class="label">{option}</li>
+      {/each}
+    </ul>
+  </span>
+  ```
 -->
 <script module lang="ts">
   export interface ComboBoxProps {

package/_svseeds/_ComboBox.svelte.d.ts

@@ -18,7 +18,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 ComboBoxProps {
  *   options: SvelteSet<string> | Set<string>;
@@ -33,6 +34,18 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <span class="whole">
+ *   <input class="main" type="text" {...attributes} bind:value bind:this={element} use:action />
+ *   <div class="extra" conditional>{extra}</div>
+ *   <ul class="bottom">
+ *     {#each options as option}
+ *       <li class="label">{option}</li>
+ *     {/each}
+ *   </ul>
+ * </span>
+ * ```
  */
 declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "variant" | "expanded" | "value" | "element">;
 type ComboBox = ReturnType<typeof ComboBox>;

package/_svseeds/_ContextMenu.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface ContextMenuProps {
     children: Snippet<[string]>; // Snippet<[variant]>
@@ -12,6 +13,12 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <nav class="whole" bind:this={element}>
+    {children}
+  </nav>
+  ```
 -->
 <script module lang="ts">
   export interface ContextMenuProps {

package/_svseeds/_ContextMenu.svelte.d.ts

@@ -12,7 +12,8 @@ export type ContextMenuBindProps = "open" | "lock" | "variant" | "element";
 import { type Snippet } from "svelte";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface ContextMenuProps {
  *   children: Snippet<[string]>; // Snippet<[variant]>
@@ -24,6 +25,12 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <nav class="whole" bind:this={element}>
+ *   {children}
+ * </nav>
+ * ```
  */
 declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "variant" | "open" | "element" | "lock">;
 type ContextMenu = ReturnType<typeof ContextMenu>;

package/_svseeds/_Disclosure.svelte

@@ -1,6 +1,7 @@
 <!--
   @component
-  default value: `(value)`
+  ### Types
+  default value: *`(value)`*
   ```ts
   interface DisclosureProps {
     label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
@@ -14,6 +15,17 @@
     variant?: string; // bindable (VARIANT.NEUTRAL)
   }
   ```
+  ### Anatomy
+  ```svelte
+  <details class="whole" {...attributes} bind:this={element} use:action>
+    <summary class="label">
+      {label}
+    </summary>
+    <div class="main" transition:slide={{ duration }}>
+      {children}
+    </div>
+  </details>
+  ```
 -->
 <script module lang="ts">
   export interface DisclosureProps {

package/_svseeds/_Disclosure.svelte.d.ts

@@ -16,7 +16,8 @@ import { type Action } from "svelte/action";
 import { type HTMLDetailsAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
 /**
- * default value: `(value)`
+ * ### Types
+ * default value: *`(value)`*
  * ```ts
  * interface DisclosureProps {
  *   label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
@@ -30,6 +31,17 @@ import { type SVSClass } from "./core";
  *   variant?: string; // bindable (VARIANT.NEUTRAL)
  * }
  * ```
+ * ### Anatomy
+ * ```svelte
+ * <details class="whole" {...attributes} bind:this={element} use:action>
+ *   <summary class="label">
+ *     {label}
+ *   </summary>
+ *   <div class="main" transition:slide={{ duration }}>
+ *     {children}
+ *   </div>
+ * </details>
+ * ```
  */
 declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "variant" | "open" | "element">;
 type Disclosure = ReturnType<typeof Disclosure>;