native-document 1.0.92 → 1.0.94

package/src/core/elements/content-formatter.js

@@ -1,32 +1,169 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
+/**
+ * Creates a `<div>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
+ */
 export const Div = HtmlElementWrapper('div');
+
+/**
+ * Creates a `<span>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
+ */
 export const Span = HtmlElementWrapper('span');
+
+/**
+ * Creates a `<label>` element.
+ * @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
+ */
 export const Label = HtmlElementWrapper('label');
+
+/**
+ * Creates a `<p>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+ */
 export const P = HtmlElementWrapper('p');
+
+/**
+ * Alias for {@link P}.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+ */
 export const Paragraph = P;
+
+/**
+ * Creates a `<strong>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Strong = HtmlElementWrapper('strong');
+
+/**
+ * Creates a `<h1>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H1 = HtmlElementWrapper('h1');
+
+/**
+ * Creates a `<h2>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H2 = HtmlElementWrapper('h2');
+
+/**
+ * Creates a `<h3>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H3 = HtmlElementWrapper('h3');
+
+/**
+ * Creates a `<h4>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H4 = HtmlElementWrapper('h4');
+
+/**
+ * Creates a `<h5>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H5 = HtmlElementWrapper('h5');
+
+/**
+ * Creates a `<h6>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+ */
 export const H6 = HtmlElementWrapper('h6');
 
+/**
+ * Creates a `<br>` element.
+ * @type {function(GlobalAttributes=): HTMLBRElement}
+ */
 export const Br = HtmlElementWrapper('br');
 
+/**
+ * Creates an `<a>` element.
+ * @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
+ */
 export const Link = HtmlElementWrapper('a');
+
+/**
+ * Creates a `<pre>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
+ */
 export const Pre = HtmlElementWrapper('pre');
+
+/**
+ * Creates a `<code>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Code = HtmlElementWrapper('code');
+
+/**
+ * Creates a `<blockquote>` element.
+ * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+ */
 export const Blockquote = HtmlElementWrapper('blockquote');
+
+/**
+ * Creates an `<hr>` element.
+ * @type {function(GlobalAttributes=): HTMLHRElement}
+ */
 export const Hr = HtmlElementWrapper('hr');
+
+/**
+ * Creates an `<em>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Em = HtmlElementWrapper('em');
+
+/**
+ * Creates a `<small>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Small = HtmlElementWrapper('small');
+
+/**
+ * Creates a `<mark>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Mark = HtmlElementWrapper('mark');
+
+/**
+ * Creates a `<del>` element.
+ * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+ */
 export const Del = HtmlElementWrapper('del');
+
+/**
+ * Creates an `<ins>` element.
+ * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+ */
 export const Ins = HtmlElementWrapper('ins');
+
+/**
+ * Creates a `<sub>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Sub = HtmlElementWrapper('sub');
+
+/**
+ * Creates a `<sup>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Sup = HtmlElementWrapper('sup');
+
+/**
+ * Creates an `<abbr>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Abbr = HtmlElementWrapper('abbr');
+
+/**
+ * Creates a `<cite>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Cite = HtmlElementWrapper('cite');
-export const Quote = HtmlElementWrapper('q');
+
+/**
+ * Creates a `<q>` element.
+ * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+ */
+export const Quote = HtmlElementWrapper('q');

package/src/core/elements/control/for-each-array.js

@@ -4,8 +4,26 @@ import Validator from "../../utils/validator";
 import { ElementCreator } from "../../wrappers/ElementCreator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 
+/**
+ * Renders items from an ObservableArray with optimized array-specific updates.
+ * Provides index observables and handles array mutations efficiently.
+ *
+ * @param {ObservableArray} data - ObservableArray to iterate over
+ * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, indexObservable) => ValidChild
+ * @param {Object} [configs={}] - Configuration options
+ * @param {boolean} [configs.shouldKeepItemsInCache] - Whether to cache rendered items
+ * @param {boolean} [configs.isParentUniqueChild] - When it's the only child of the parent
+ * @returns {AnchorDocumentFragment} Fragment managing the list rendering
+ * @example
+ * const items = Observable.array([1, 2, 3]);
+ * ForEachArray(items, (item, index) =>
+ *   Div({}, `Item ${item} at index ${index.val()}`)
+ * );
+ *
+ * items.push(4); // Automatically updates DOM
+ */
 export function ForEachArray(data, callback, configs = {}) {
-    const element = Anchor('ForEach Array');
+    const element = Anchor('ForEach Array', configs.isParentUniqueChild);
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
 
@@ -180,7 +198,7 @@ export function ForEachArray(data, callback, configs = {}) {
                     elementBeforeFirst = firstChildRemoved?.previousSibling;
 
                     for(let i = 0; i < deleted.length; i++) {
-                        firstItem(deleted[i], garbageFragment);
+                        removeByItem(deleted[i], garbageFragment);
                     }
                 }
             } else {

package/src/core/elements/control/for-each.js

@@ -7,12 +7,24 @@ import { ElementCreator } from "../../wrappers/ElementCreator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 
 /**
+ * Renders a list of items from an observable array or object, automatically updating when data changes.
+ * Efficiently manages DOM updates by tracking items with keys.
  *
- * @param {Array|Object|ObservableItem} data
- * @param {Function} callback
- * @param {?Function|?string} key
- * @param {{shouldKeepItemsInCache: boolean}?} configs
- * @returns {DocumentFragment}
+ * @param {ObservableItem<Array|Object>} data - Observable containing array or object to iterate over
+ * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, index) => ValidChild
+ * @param {string|Function} [key] - Property name or function to generate unique keys for items
+ * @param {Object} [options={}] - Configuration options
+ * @param {boolean} [options.shouldKeepItemsInCache=false] - Whether to cache rendered items
+ * @returns {AnchorDocumentFragment} Fragment managing the list rendering
+ * @example
+ * const users = Observable([
+ *   { id: 1, name: 'John' },
+ *   { id: 2, name: 'Jane' }
+ * ]);
+ * ForEach(users, (user) => Div({}, user.name), 'id');
+ *
+ * // With function key
+ * ForEach(items, (item) => Div({}, item), (item) => item.id);
  */
 export function ForEach(data, callback, key, { shouldKeepItemsInCache = false } = {}) {
     const element = Anchor('ForEach');

package/src/core/elements/control/show-if.js

@@ -5,12 +5,18 @@ import Anchor from "../../elements/anchor";
 import {ElementCreator} from "../../wrappers/ElementCreator";
 
 /**
- * Show the element if the condition is true
+ * Conditionally shows an element based on an observable condition.
+ * The element is mounted/unmounted from the DOM as the condition changes.
  *
- * @param {ObservableItem|ObservableChecker} condition
- * @param {*} child
- * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} configs
- * @returns {DocumentFragment}
+ * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
+ * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
+ * @param {Object} [options={}] - Configuration options
+ * @param {string|null} [options.comment=null] - Comment for debugging
+ * @param {boolean} [options.shouldKeepInCache=true] - Whether to cache the element when hidden
+ * @returns {AnchorDocumentFragment} Anchor fragment managing the conditional content
+ * @example
+ * const isVisible = Observable(false);
+ * ShowIf(isVisible, Div({}, 'Hello World'));
  */
 export const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
     if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
@@ -47,11 +53,18 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
 }
 
 /**
- * Hide the element if the condition is true
- * @param {ObservableItem|ObservableChecker} condition
- * @param child
- * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} configs
- * @returns {DocumentFragment}
+ * Conditionally hides an element when the observable condition is true.
+ * Inverse of ShowIf - element is shown when condition is false.
+ *
+ * @param {ObservableItem<boolean>|ObservableChecker<boolean>} condition - Observable condition to watch
+ * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
+ * @param {Object} [configs] - Configuration options
+ * @param {string|null} [configs.comment] - Comment for debugging
+ * @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
+ * @returns {AnchorDocumentFragment} Anchor fragment managing the conditional content
+ * @example
+ * const hasError = Observable(false);
+ * HideIf(hasError, Div({}, 'Content'));
  */
 export const HideIf = function(condition, child, configs) {
     const hideCondition = Observable(!condition.val());
@@ -61,12 +74,15 @@ export const HideIf = function(condition, child, configs) {
 }
 
 /**
- * Hide the element if the condition is false
+ * Conditionally hides an element when the observable condition is false.
+ * Same as ShowIf - element is shown when condition is true.
  *
- * @param {ObservableItem|ObservableChecker} condition
- * @param {*} child
- * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} configs
- * @returns {DocumentFragment}
+ * @param {ObservableItem<boolean>|ObservableChecker<boolean>|ObservableWhen} condition - Observable condition to watch
+ * @param {NdChild|(() => NdChild)} child - Element or content to show/hide
+ * @param {Object} [configs] - Configuration options
+ * @param {string|null} [configs.comment] - Comment for debugging
+ * @param {boolean} [configs.shouldKeepInCache] - Whether to cache element when hidden
+ * @returns {AnchorDocumentFragment} Anchor fragment managing the conditional content
  */
 export const HideIfNot = function(condition, child, configs) {
     return ShowIf(condition, child, configs);

package/src/core/elements/control/show-when.js

@@ -2,6 +2,29 @@ import Validator from "../../utils/validator.js";
 import NativeDocumentError from "../../errors/NativeDocumentError.js";
 import {ShowIf} from "./show-if.js";
 
+/**
+ * Shows content when an observable equals a specific value.
+ * Can be called with 2 or 3 arguments.
+ *
+ * @overload
+ * @param {ObservableWhen} observerWhenResult - Result from observable.when(value)
+ * @param {NdChild|(() => NdChild)} view - Content to show when condition matches
+ * @returns {AnchorDocumentFragment}
+ *
+ * @overload
+ * @param {ObservableItem} observer - Observable to watch
+ * @param {*} target - Value to match
+ * @param {NdChild|(() => NdChild)} view - Content to show when observable equals target
+ * @returns {AnchorDocumentFragment}
+ *
+ * @example
+ * // 2 arguments
+ * const status = Observable('idle');
+ * ShowWhen(status.when('loading'), LoadingSpinner());
+ *
+ * // 3 arguments
+ * ShowWhen(status, 'loading', LoadingSpinner());
+ */
 export const ShowWhen = function() {
     if(arguments.length === 2) {
         const [observer, target] = arguments;

package/src/core/elements/control/switch.js

@@ -6,11 +6,24 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
 
 
 /**
+ * Displays different content based on the current value of an observable.
+ * Like a switch statement for UI - shows the content corresponding to current value.
  *
- * @param {ObservableItem|ObservableChecker} $condition
- * @param {{[key]: *}} values
- * @param {Boolean} shouldKeepInCache
- * @returns {DocumentFragment}
+ * @param {ObservableItem|ObservableChecker} $condition - Observable to watch
+ * @param {Object<string|number, NdChild|(() => NdChild)>} values - Map of values to their corresponding content
+ * @param {boolean} [shouldKeepInCache=true] - Whether to cache rendered views
+ * @returns {AnchorDocumentFragment & {add: Function, remove: Function}} Fragment with dynamic methods
+ * @example
+ * const status = Observable('idle');
+ * const view = Match(status, {
+ *   idle: Div({}, 'Ready'),
+ *   loading: Div({}, 'Loading...'),
+ *   error: Div({}, 'Error occurred')
+ * });
+ *
+ * // Dynamic addition
+ * view.add('success', Div({}, 'Success!'));
+ * view.remove('idle');
  */
 export const Match = function($condition, values, shouldKeepInCache = true) {
 
@@ -67,11 +80,19 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
 
 
 /**
+ * Displays one of two views based on a boolean observable condition.
+ * Simplified version of Match for true/false cases.
  *
- * @param {ObservableItem|ObservableChecker} $condition
- * @param {*} onTrue
- * @param {*} onFalse
- * @returns {DocumentFragment}
+ * @param {ObservableItem<boolean>|ObservableChecker<boolean>} $condition - Boolean observable to watch
+ * @param {ValidChild} onTrue - Content to show when condition is true
+ * @param {ValidChild} onFalse - Content to show when condition is false
+ * @returns {AnchorDocumentFragment} Fragment managing the conditional content
+ * @example
+ * const isLoggedIn = Observable(false);
+ * Switch(isLoggedIn,
+ *   Div({}, 'Welcome back!'),
+ *   Div({}, 'Please login')
+ * );
  */
 export const Switch = function ($condition, onTrue, onFalse) {
     if(!Validator.isObservable($condition)) {
@@ -85,9 +106,15 @@ export const Switch = function ($condition, onTrue, onFalse) {
 }
 
 /**
+ * Provides a fluent API for conditional rendering with show/otherwise pattern.
  *
- * @param {ObservableItem|ObservableChecker} $condition
- * @returns {{show: Function, otherwise: (((*) => {}):DocumentFragment)}
+ * @param {ObservableItem<boolean>|ObservableChecker<boolean>} $condition - Boolean observable to watch
+ * @returns {{show: Function, otherwise: Function}} Object with fluent methods
+ * @example
+ * const isLoading = Observable(false);
+ * When(isLoading)
+ *   .show(LoadingSpinner())
+ *   .otherwise(Content());
  */
 export const When = function($condition) {
     if(!Validator.isObservable($condition)) {
@@ -105,6 +132,9 @@ export const When = function($condition) {
         otherwise(onFalse) {
             $onFalse = onFalse;
             return Switch($condition, $onTrue, $onFalse);
+        },
+        toNdElement() {
+            return Switch($condition, $onTrue, $onFalse);
         }
     }
 }

package/src/core/elements/description-list.js

@@ -1,5 +1,19 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
+/**
+ * Creates a `<dl>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
+ */
 export const Dl = HtmlElementWrapper('dl');
+
+/**
+ * Creates a `<dt>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Dt = HtmlElementWrapper('dt');
+
+/**
+ * Creates a `<dd>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+ */
 export const Dd = HtmlElementWrapper('dd');

package/src/core/elements/form.js

@@ -1,6 +1,16 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
 
+/**
+ * Creates a `<form>` element.
+ * Extended with fluent methods: `.submit()`, `.post()`, `.get()`, `.multipartFormData()`.
+ * @type {function(FormAttributes=, NdChild|NdChild[]=): HTMLFormElement & {
+ *   submit: (actionOrFn: string | ((e: SubmitEvent) => void)) => HTMLFormElement,
+ *   post: (action: string) => HTMLFormElement,
+ *   get: (action: string) => HTMLFormElement,
+ *   multipartFormData: () => HTMLFormElement,
+ * }}
+ */
 export const Form = HtmlElementWrapper('form', function(el) {
 
     el.submit = function(action) {
@@ -30,42 +40,216 @@ export const Form = HtmlElementWrapper('form', function(el) {
     return el;
 });
 
+/**
+ * Creates an `<input>` element.
+ * @type {function(InputAttributes=): HTMLInputElement}
+ */
 export const Input = HtmlElementWrapper('input');
 
+/**
+ * Creates a `<textarea>` element.
+ * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+ */
 export const TextArea = HtmlElementWrapper('textarea');
+
+/**
+ * Alias for {@link TextArea}.
+ * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+ */
 export const TextInput = TextArea;
 
+/**
+ * Creates a `<select>` element.
+ * @type {function(SelectAttributes=, NdChild|NdChild[]=): HTMLSelectElement}
+ */
 export const Select = HtmlElementWrapper('select');
-export const FieldSet = HtmlElementWrapper('fieldset', );
+
+/**
+ * Creates a `<fieldset>` element.
+ * @type {function(GlobalAttributes & { disabled?: Observable<boolean>|boolean }=, NdChild|NdChild[]=): HTMLFieldSetElement}
+ */
+export const FieldSet = HtmlElementWrapper('fieldset');
+
+/**
+ * Creates an `<option>` element.
+ * @type {function(OptionAttributes=, NdChild|NdChild[]=): HTMLOptionElement}
+ */
 export const Option = HtmlElementWrapper('option');
+
+/**
+ * Creates a `<legend>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLLegendElement}
+ */
 export const Legend = HtmlElementWrapper('legend');
+
+/**
+ * Creates a `<datalist>` element.
+ * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDataListElement}
+ */
 export const Datalist = HtmlElementWrapper('datalist');
+
+/**
+ * Creates an `<output>` element.
+ * @type {function(OutputAttributes=, NdChild|NdChild[]=): HTMLOutputElement}
+ */
 export const Output = HtmlElementWrapper('output');
+
+/**
+ * Creates a `<progress>` element.
+ * @type {function(ProgressAttributes=, NdChild|NdChild[]=): HTMLProgressElement}
+ */
 export const Progress = HtmlElementWrapper('progress');
+
+/**
+ * Creates a `<meter>` element.
+ * @type {function(MeterAttributes=, NdChild|NdChild[]=): HTMLMeterElement}
+ */
 export const Meter = HtmlElementWrapper('meter');
 
+/**
+ * Creates an `<input readonly>` element.
+ * @param {Omit<InputAttributes, 'type'|'readonly'|'readOnly'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const ReadonlyInput = (attributes) => Input({ readonly: true, ...attributes });
-export const HiddenInput = (attributes) => Input({type: 'hidden', ...attributes });
+
+/**
+ * Creates an `<input type="hidden">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
+export const HiddenInput = (attributes) => Input({ type: 'hidden', ...attributes });
+
+/**
+ * Creates an `<input type="file">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const FileInput = (attributes) => Input({ type: 'file', ...attributes });
+
+/**
+ * Creates an `<input type="password">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const PasswordInput = (attributes) => Input({ type: 'password', ...attributes });
+
+/**
+ * Creates an `<input type="checkbox">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const Checkbox = (attributes) => Input({ type: 'checkbox', ...attributes });
+
+/**
+ * Creates an `<input type="radio">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const Radio = (attributes) => Input({ type: 'radio', ...attributes });
 
+/**
+ * Creates an `<input type="range">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const RangeInput = (attributes) => Input({ type: 'range', ...attributes });
+
+/**
+ * Creates an `<input type="color">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const ColorInput = (attributes) => Input({ type: 'color', ...attributes });
+
+/**
+ * Creates an `<input type="date">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const DateInput = (attributes) => Input({ type: 'date', ...attributes });
+
+/**
+ * Creates an `<input type="time">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const TimeInput = (attributes) => Input({ type: 'time', ...attributes });
+
+/**
+ * Creates an `<input type="datetime-local">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const DateTimeInput = (attributes) => Input({ type: 'datetime-local', ...attributes });
+
+/**
+ * Creates an `<input type="week">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const WeekInput = (attributes) => Input({ type: 'week', ...attributes });
+
+/**
+ * Creates an `<input type="month">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const MonthInput = (attributes) => Input({ type: 'month', ...attributes });
+
+/**
+ * Creates an `<input type="search">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const SearchInput = (attributes) => Input({ type: 'search', ...attributes });
+
+/**
+ * Creates an `<input type="tel">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const TelInput = (attributes) => Input({ type: 'tel', ...attributes });
+
+/**
+ * Creates an `<input type="url">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const UrlInput = (attributes) => Input({ type: 'url', ...attributes });
+
+/**
+ * Creates an `<input type="email">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
 export const EmailInput = (attributes) => Input({ type: 'email', ...attributes });
-export const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
 
+/**
+ * Creates an `<input type="number">` element.
+ * @param {Omit<InputAttributes, 'type'>} [attributes]
+ * @returns {HTMLInputElement}
+ */
+export const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
 
+/**
+ * Creates a `<button>` element.
+ * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
+ */
 export const Button = HtmlElementWrapper('button');
+
+/**
+ * Creates a `<button type="button">` element.
+ * @param {NdChild|NdChild[]} [child]
+ * @param {Omit<ButtonAttributes, 'type'>} [attributes]
+ * @returns {HTMLButtonElement}
+ */
 export const SimpleButton = (child, attributes) => Button(child, { type: 'button', ...attributes });
-export const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });
 
+/**
+ * Creates a `<button type="submit">` element.
+ * @param {NdChild|NdChild[]} [child]
+ * @param {Omit<ButtonAttributes, 'type'>} [attributes]
+ * @returns {HTMLButtonElement}
+ */
+export const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });