tiny-essentials 1.24.0 → 1.24.1

package/dist/v1/libs/TinyHtml/TinyHtmlButton.d.mts

@@ -0,0 +1,150 @@
+export default TinyHtmlButton;
+/**
+ * TinyHtmlButton is a helper class for <button> elements with full attribute support and validation.
+ * It extends TinyHtmlTemplate for direct DOM manipulation.
+ *
+ * Supported attributes:
+ * - autofocus
+ * - command, commandfor
+ * - disabled
+ * - form, formaction, formenctype, formmethod, formnovalidate, formtarget
+ * - name
+ * - popovertarget, popovertargetaction
+ * - type (button|submit|reset)
+ * - value
+ *
+ * @extends TinyHtmlTemplate<HTMLButtonElement>
+ */
+declare class TinyHtmlButton extends TinyHtmlTemplate<HTMLButtonElement> {
+    /**
+     * Creates a new TinyHtmlButton instance.
+     *
+     * @param {Object} config - Configuration object for the button.
+     * @param {string|Element|TinyHtml<any>} config.label - The text/HTML/element to place inside the button.
+     *   If a non-string Element/TinyHtml is provided, `allowHtml` must be true.
+     * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes to apply.
+     * @param {boolean} [config.allowHtml=false] - Whether to allow HTML or DOM nodes as label.
+     * @param {'button'|'submit'|'reset'} [config.type='button'] - Button type. Allowed values: "button", "submit", "reset".
+     * @param {boolean} [config.autofocus=false] - Whether the button should autofocus on load.
+     * @param {'show-modal'|'close'|'request-close'|'show-popover'|'hide-popover'|'toggle-popover'} [config.command] - Command action (built-ins: "show-modal","close","request-close","show-popover","hide-popover","toggle-popover")
+     *   or a custom command which MUST start with `--` (two hyphens).
+     * @param {string} [config.commandfor] - ID of the element controlled by the command. Must be a non-empty string.
+     * @param {boolean} [config.disabled=false] - Whether the button is disabled.
+     * @param {string} [config.form] - ID of the associated <form>. Must be a non-empty string if provided.
+     * @param {string} [config.formaction] - URL that overrides the form action when this button is used to submit.
+     * @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} [config.formenctype]
+     *   - Encoding type used when the button submits the form.
+     * @param {'get'|'post'|'dialog'} [config.formmethod] - HTTP method used for this button submission.
+     * @param {boolean} [config.formnovalidate=false] - If true, disables validation when this button submits.
+     * @param {'_self'|'_blank'|'_parent'|'_top'|'_unfencedTop'} [config.formtarget] - Target browsing context for this button's submission (keywords or name).
+     * @param {string} [config.name] - Button name (sent with value when submitting).
+     * @param {string} [config.popovertarget] - ID of the popover to control (non-empty string).
+     * @param {'show'|'hide'|'toggle'} [config.popovertargetaction] - Action for popovertarget.
+     * @param {string} [config.value] - Value submitted with the form when this button is used.
+     * @param {string} [config.mainClass=''] - Main CSS class to append to the element.
+     *
+     * @throws {TypeError} If `label` is not a string, Element, or TinyHtml instance.
+     * @throws {Error} If an Element/TinyHtml `label` is passed but `allowHtml` is false.
+     * @throws {TypeError} If `type` is not one of "button", "submit", "reset".
+     * @throws {TypeError} If `allowHtml` is not a boolean.
+     * @throws {TypeError} If `autofocus`, `disabled` or `formnovalidate` are not booleans.
+     * @throws {TypeError} If `command` is not a valid builtin command nor a custom `--*` token.
+     * @throws {TypeError} If `commandfor`, `form`, `formaction`, `name`, `popovertarget`, or `value` are not strings.
+     * @throws {TypeError} If `formenctype` is not one of the allowed encodings.
+     * @throws {TypeError} If `formmethod` is not one of 'get','post','dialog'.
+     * @throws {TypeError} If `formtarget` is not a valid keyword or browsing context name.
+     */
+    constructor({ label, tags, allowHtml, type, autofocus, command, commandfor, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, popovertarget, popovertargetaction, value, mainClass, }: {
+        label: string | Element | TinyHtml<any>;
+        tags?: string | string[] | Set<string> | undefined;
+        allowHtml?: boolean | undefined;
+        type?: "button" | "reset" | "submit" | undefined;
+        autofocus?: boolean | undefined;
+        command?: "close" | "show-modal" | "request-close" | "show-popover" | "hide-popover" | "toggle-popover" | undefined;
+        commandfor?: string | undefined;
+        disabled?: boolean | undefined;
+        form?: string | undefined;
+        formaction?: string | undefined;
+        formenctype?: "text/plain" | "application/x-www-form-urlencoded" | "multipart/form-data" | undefined;
+        formmethod?: "dialog" | "get" | "post" | undefined;
+        formnovalidate?: boolean | undefined;
+        formtarget?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop" | undefined;
+        name?: string | undefined;
+        popovertarget?: string | undefined;
+        popovertargetaction?: "hide" | "show" | "toggle" | undefined;
+        value?: string | undefined;
+        mainClass?: string | undefined;
+    });
+    /** @param {'button'|'submit'|'reset'} val */
+    set type(val: "button" | "submit" | "reset");
+    /** @returns {string|null} */
+    get type(): string | null;
+    /** @param {boolean} state */
+    set autofocus(state: boolean);
+    /** @returns {boolean} */
+    get autofocus(): boolean;
+    /** @param {boolean} state */
+    set disabled(state: boolean);
+    /** @returns {boolean} */
+    get disabled(): boolean;
+    /** @param {boolean} state */
+    set formnovalidate(state: boolean);
+    /** @returns {boolean} */
+    get formnovalidate(): boolean;
+    /** @param {'show-modal'|'close'|'request-close'|'show-popover'|'hide-popover'|'toggle-popover'} cmd */
+    set command(cmd: "show-modal" | "close" | "request-close" | "show-popover" | "hide-popover" | "toggle-popover");
+    /** @returns {string|null} */
+    get command(): string | null;
+    /** @param {string} val */
+    set commandfor(val: string);
+    /** @returns {string|null} */
+    get commandfor(): string | null;
+    /** @param {string} val */
+    set form(val: string);
+    /** @returns {string|null} */
+    get form(): string | null;
+    /** @param {string} val */
+    set formaction(val: string);
+    /** @returns {string|null} */
+    get formaction(): string | null;
+    /** @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} val */
+    set formenctype(val: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain");
+    /** @returns {string|null} */
+    get formenctype(): string | null;
+    /** @param {'get'|'post'|'dialog'} val */
+    set formmethod(val: "get" | "post" | "dialog");
+    /** @returns {string|null} */
+    get formmethod(): string | null;
+    /** @param {'_self'|'_blank'|'_parent'|'_top'|'_unfencedTop'} val */
+    set formtarget(val: "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop");
+    /** @returns {string|null} */
+    get formtarget(): string | null;
+    /** @param {string} val */
+    set name(val: string);
+    /** @returns {string|null} */
+    get name(): string | null;
+    /** @param {string} val */
+    set popovertarget(val: string);
+    /** @returns {string|null} */
+    get popovertarget(): string | null;
+    /** @param {'show'|'hide'|'toggle'} val */
+    set popovertargetaction(val: "show" | "hide" | "toggle");
+    /** @returns {string|null} */
+    get popovertargetaction(): string | null;
+    set value(val: string | null);
+    /** @returns {string|null} */
+    get value(): string | null;
+    /**
+     * Updates the button label with text, HTML, or an element.
+     *
+     * @param {string|Element|TinyHtml<any>} label - The new label.
+     * @param {boolean} [allowHtml=false] - Whether to allow raw HTML or DOM elements.
+     * @returns {this}
+     * @throws {TypeError} If the label is invalid.
+     * @throws {Error} If DOM/HTML is passed but allowHtml=false.
+     */
+    setLabel(label: string | Element | TinyHtml<any>, allowHtml?: boolean): this;
+}
+import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
+import TinyHtml from '../TinyHtml.mjs';
+//# sourceMappingURL=TinyHtmlButton.d.mts.map

package/dist/v1/libs/TinyHtml/TinyHtmlButton.mjs

@@ -0,0 +1,290 @@
+import TinyHtml from '../TinyHtml.mjs';
+import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
+/**
+ * TinyHtmlButton is a helper class for <button> elements with full attribute support and validation.
+ * It extends TinyHtmlTemplate for direct DOM manipulation.
+ *
+ * Supported attributes:
+ * - autofocus
+ * - command, commandfor
+ * - disabled
+ * - form, formaction, formenctype, formmethod, formnovalidate, formtarget
+ * - name
+ * - popovertarget, popovertargetaction
+ * - type (button|submit|reset)
+ * - value
+ *
+ * @extends TinyHtmlTemplate<HTMLButtonElement>
+ */
+class TinyHtmlButton extends TinyHtmlTemplate {
+    /**
+     * Creates a new TinyHtmlButton instance.
+     *
+     * @param {Object} config - Configuration object for the button.
+     * @param {string|Element|TinyHtml<any>} config.label - The text/HTML/element to place inside the button.
+     *   If a non-string Element/TinyHtml is provided, `allowHtml` must be true.
+     * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes to apply.
+     * @param {boolean} [config.allowHtml=false] - Whether to allow HTML or DOM nodes as label.
+     * @param {'button'|'submit'|'reset'} [config.type='button'] - Button type. Allowed values: "button", "submit", "reset".
+     * @param {boolean} [config.autofocus=false] - Whether the button should autofocus on load.
+     * @param {'show-modal'|'close'|'request-close'|'show-popover'|'hide-popover'|'toggle-popover'} [config.command] - Command action (built-ins: "show-modal","close","request-close","show-popover","hide-popover","toggle-popover")
+     *   or a custom command which MUST start with `--` (two hyphens).
+     * @param {string} [config.commandfor] - ID of the element controlled by the command. Must be a non-empty string.
+     * @param {boolean} [config.disabled=false] - Whether the button is disabled.
+     * @param {string} [config.form] - ID of the associated <form>. Must be a non-empty string if provided.
+     * @param {string} [config.formaction] - URL that overrides the form action when this button is used to submit.
+     * @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} [config.formenctype]
+     *   - Encoding type used when the button submits the form.
+     * @param {'get'|'post'|'dialog'} [config.formmethod] - HTTP method used for this button submission.
+     * @param {boolean} [config.formnovalidate=false] - If true, disables validation when this button submits.
+     * @param {'_self'|'_blank'|'_parent'|'_top'|'_unfencedTop'} [config.formtarget] - Target browsing context for this button's submission (keywords or name).
+     * @param {string} [config.name] - Button name (sent with value when submitting).
+     * @param {string} [config.popovertarget] - ID of the popover to control (non-empty string).
+     * @param {'show'|'hide'|'toggle'} [config.popovertargetaction] - Action for popovertarget.
+     * @param {string} [config.value] - Value submitted with the form when this button is used.
+     * @param {string} [config.mainClass=''] - Main CSS class to append to the element.
+     *
+     * @throws {TypeError} If `label` is not a string, Element, or TinyHtml instance.
+     * @throws {Error} If an Element/TinyHtml `label` is passed but `allowHtml` is false.
+     * @throws {TypeError} If `type` is not one of "button", "submit", "reset".
+     * @throws {TypeError} If `allowHtml` is not a boolean.
+     * @throws {TypeError} If `autofocus`, `disabled` or `formnovalidate` are not booleans.
+     * @throws {TypeError} If `command` is not a valid builtin command nor a custom `--*` token.
+     * @throws {TypeError} If `commandfor`, `form`, `formaction`, `name`, `popovertarget`, or `value` are not strings.
+     * @throws {TypeError} If `formenctype` is not one of the allowed encodings.
+     * @throws {TypeError} If `formmethod` is not one of 'get','post','dialog'.
+     * @throws {TypeError} If `formtarget` is not a valid keyword or browsing context name.
+     */
+    constructor({ label, tags = [], allowHtml = false, type = 'button', autofocus = false, command, commandfor, disabled = false, form, formaction, formenctype, formmethod, formnovalidate = false, formtarget, name, popovertarget, popovertargetaction, value, mainClass = '', }) {
+        super(document.createElement('button'), tags, mainClass);
+        if (label === undefined || label === null)
+            throw new TypeError('TinyHtmlButton: "label" is required.');
+        this.setLabel(label, allowHtml);
+        this.type = type;
+        this.autofocus = autofocus;
+        this.disabled = disabled;
+        this.formnovalidate = formnovalidate;
+        if (command !== undefined)
+            this.command = command;
+        if (commandfor !== undefined)
+            this.commandfor = commandfor;
+        if (form !== undefined)
+            this.form = form;
+        if (formaction !== undefined)
+            this.formaction = formaction;
+        if (formenctype !== undefined)
+            this.formenctype = formenctype;
+        if (formmethod !== undefined)
+            this.formmethod = formmethod;
+        if (formtarget !== undefined)
+            this.formtarget = formtarget;
+        if (name !== undefined)
+            this.name = name;
+        if (popovertarget !== undefined)
+            this.popovertarget = popovertarget;
+        if (popovertargetaction !== undefined)
+            this.popovertargetaction = popovertargetaction;
+        if (value !== undefined)
+            this.value = value;
+    }
+    /**
+     * Updates the button label with text, HTML, or an element.
+     *
+     * @param {string|Element|TinyHtml<any>} label - The new label.
+     * @param {boolean} [allowHtml=false] - Whether to allow raw HTML or DOM elements.
+     * @returns {this}
+     * @throws {TypeError} If the label is invalid.
+     * @throws {Error} If DOM/HTML is passed but allowHtml=false.
+     */
+    setLabel(label, allowHtml = false) {
+        if (typeof label === 'string') {
+            if (!allowHtml)
+                this.setText(label);
+            else
+                this.setHtml(label);
+        }
+        else if (label instanceof Element || label instanceof TinyHtml) {
+            if (!allowHtml)
+                throw new Error('setLabel: Passing an Element/TinyHtml requires allowHtml=true.');
+            this.empty().append(label);
+        }
+        else {
+            throw new TypeError("setLabel: 'label' must be a string, Element, or TinyHtml instance.");
+        }
+        return this;
+    }
+    // --- Getters & Setters ---
+    /** @returns {string|null} */
+    get type() {
+        return this.attrString('type');
+    }
+    /** @param {'button'|'submit'|'reset'} val */
+    set type(val) {
+        const allowed = ['button', 'submit', 'reset'];
+        if (typeof val !== 'string' || !allowed.includes(val))
+            throw new TypeError(`TinyHtmlButton.type must be one of: ${allowed.join(', ')}`);
+        this.setAttr('type', val);
+    }
+    /** @returns {boolean} */
+    get disabled() {
+        return this.hasProp('disabled');
+    }
+    /** @param {boolean} state */
+    set disabled(state) {
+        if (typeof state !== 'boolean')
+            throw new TypeError('TinyHtmlButton.disabled must be boolean.');
+        if (state)
+            this.addProp('disabled');
+        else
+            this.removeProp('disabled');
+    }
+    /** @returns {boolean} */
+    get autofocus() {
+        return this.hasProp('autofocus');
+    }
+    /** @param {boolean} state */
+    set autofocus(state) {
+        if (typeof state !== 'boolean')
+            throw new TypeError('TinyHtmlButton.autofocus must be boolean.');
+        if (state)
+            this.addProp('autofocus');
+        else
+            this.removeProp('autofocus');
+    }
+    /** @returns {boolean} */
+    get formnovalidate() {
+        return this.hasProp('formnovalidate');
+    }
+    /** @param {boolean} state */
+    set formnovalidate(state) {
+        if (typeof state !== 'boolean')
+            throw new TypeError('TinyHtmlButton.formnovalidate must be boolean.');
+        if (state)
+            this.addProp('formnovalidate');
+        else
+            this.removeProp('formnovalidate');
+    }
+    /** @returns {string|null} */
+    get command() {
+        return this.attrString('command');
+    }
+    /** @param {'show-modal'|'close'|'request-close'|'show-popover'|'hide-popover'|'toggle-popover'} cmd */
+    set command(cmd) {
+        const builtins = [
+            'show-modal',
+            'close',
+            'request-close',
+            'show-popover',
+            'hide-popover',
+            'toggle-popover',
+        ];
+        if (typeof cmd !== 'string' || (!builtins.includes(cmd) && !cmd.startsWith('--')))
+            throw new TypeError('TinyHtmlButton.command must be a built-in or custom string starting with "--".');
+        this.setAttr('command', cmd);
+    }
+    /** @returns {string|null} */
+    get commandfor() {
+        return this.attrString('commandfor');
+    }
+    /** @param {string} val */
+    set commandfor(val) {
+        if (typeof val !== 'string' || !val.trim())
+            throw new TypeError('TinyHtmlButton.commandfor must be a non-empty string.');
+        this.setAttr('commandfor', val);
+    }
+    /** @returns {string|null} */
+    get form() {
+        return this.attrString('form');
+    }
+    /** @param {string} val */
+    set form(val) {
+        if (typeof val !== 'string' || !val.trim())
+            throw new TypeError('TinyHtmlButton.form must be a non-empty string.');
+        this.setAttr('form', val);
+    }
+    /** @returns {string|null} */
+    get formaction() {
+        return this.attrString('formaction');
+    }
+    /** @param {string} val */
+    set formaction(val) {
+        if (typeof val !== 'string' || !val.trim())
+            throw new TypeError('TinyHtmlButton.formaction must be a non-empty string.');
+        this.setAttr('formaction', val);
+    }
+    /** @returns {string|null} */
+    get formenctype() {
+        return this.attrString('formenctype');
+    }
+    /** @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} val */
+    set formenctype(val) {
+        const valid = ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'];
+        if (!valid.includes(val))
+            throw new TypeError(`TinyHtmlButton.formenctype must be one of: ${valid.join(', ')}`);
+        this.setAttr('formenctype', val);
+    }
+    /** @returns {string|null} */
+    get formmethod() {
+        return this.attrString('formmethod');
+    }
+    /** @param {'get'|'post'|'dialog'} val */
+    set formmethod(val) {
+        const valid = ['get', 'post', 'dialog'];
+        if (typeof val !== 'string' || !valid.includes(val.toLowerCase()))
+            throw new TypeError(`TinyHtmlButton.formmethod must be one of: ${valid.join(', ')}`);
+        this.setAttr('formmethod', val.toLowerCase());
+    }
+    /** @returns {string|null} */
+    get formtarget() {
+        return this.attrString('formtarget');
+    }
+    /** @param {'_self'|'_blank'|'_parent'|'_top'|'_unfencedTop'} val */
+    set formtarget(val) {
+        const validTargets = ['_self', '_blank', '_parent', '_top', '_unfencedTop'];
+        const validName = /^[a-zA-Z_][\w-]*$/;
+        if (typeof val !== 'string' || (!validTargets.includes(val) && !validName.test(val)))
+            throw new TypeError(`TinyHtmlButton.formtarget must be a keyword (${validTargets.join(', ')}) or valid name.`);
+        this.setAttr('formtarget', val);
+    }
+    /** @returns {string|null} */
+    get name() {
+        return this.attr('name');
+    }
+    /** @param {string} val */
+    set name(val) {
+        if (typeof val !== 'string' || !val.trim())
+            throw new TypeError('TinyHtmlButton.name must be a non-empty string.');
+        this.setAttr('name', val);
+    }
+    /** @returns {string|null} */
+    get popovertarget() {
+        return this.attr('popovertarget');
+    }
+    /** @param {string} val */
+    set popovertarget(val) {
+        if (typeof val !== 'string' || !val.trim())
+            throw new TypeError('TinyHtmlButton.popovertarget must be a non-empty string.');
+        this.setAttr('popovertarget', val);
+    }
+    /** @returns {string|null} */
+    get popovertargetaction() {
+        return this.attrString('popovertargetaction');
+    }
+    /** @param {'show'|'hide'|'toggle'} val */
+    set popovertargetaction(val) {
+        const allowed = ['show', 'hide', 'toggle'];
+        if (typeof val !== 'string' || !allowed.includes(val))
+            throw new TypeError(`TinyHtmlButton.popovertargetaction must be one of: ${allowed.join(', ')}`);
+        this.setAttr('popovertargetaction', val);
+    }
+    /** @returns {string|null} */
+    get value() {
+        return this.attr('value');
+    }
+    set value(val) {
+        if (typeof val !== 'string')
+            throw new TypeError('TinyHtmlButton.value must be a string.');
+        this.setAttr('value', val);
+    }
+}
+export default TinyHtmlButton;

package/dist/v1/libs/TinyHtml/TinyHtmlCanvas.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var TinyHtmlTemplate = require('./TinyHtmlTemplate.cjs');
+
+/**
+ * TinyHtmlCanvas is a helper for <canvas> elements,
+ * providing a direct way to configure its size and retrieve the rendering context.
+ *
+ * @example
+ * const canvas = new TinyHtmlCanvas({ width: 800, height: 600 });
+ * const ctx = canvas.getContext('2d');
+ *
+ * @extends TinyHtmlTemplate<HTMLCanvasElement>
+ */
+class TinyHtmlCanvas extends TinyHtmlTemplate {
+  /**
+   * Creates a new TinyHtmlCanvas instance.
+   * @param {Object} config
+   * @param {number} [config.width] - Canvas width in pixels.
+   * @param {number} [config.height] - Canvas height in pixels.
+   * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
+   * @param {string} [config.mainClass=""] - Main CSS class.
+   */
+  constructor({ width, height, tags = [], mainClass = '' } = {}) {
+    super(document.createElement('canvas'), tags, mainClass);
+
+    if (width !== undefined) this.width = width;
+    if (height !== undefined) this.height = height;
+  }
+
+  /**
+   * Gets the rendering context of the canvas.
+   * @param {string} [type="2d"] - Context type ("2d", "webgl", etc.).
+   * @param {any} [options={}] - Context options.
+   * @returns {RenderingContext|null}
+   */
+  getContext(type = '2d', options = {}) {
+    if (typeof type !== 'string') {
+      throw new TypeError(`getContext: "type" must be a string. Got: ${typeof type}`);
+    }
+
+    const el = this.get(0);
+    if (!(el instanceof HTMLCanvasElement)) return null;
+    return el.getContext(type, options);
+  }
+}
+
+module.exports = TinyHtmlCanvas;

package/dist/v1/libs/TinyHtml/TinyHtmlCanvas.d.mts

@@ -0,0 +1,36 @@
+export default TinyHtmlCanvas;
+/**
+ * TinyHtmlCanvas is a helper for <canvas> elements,
+ * providing a direct way to configure its size and retrieve the rendering context.
+ *
+ * @example
+ * const canvas = new TinyHtmlCanvas({ width: 800, height: 600 });
+ * const ctx = canvas.getContext('2d');
+ *
+ * @extends TinyHtmlTemplate<HTMLCanvasElement>
+ */
+declare class TinyHtmlCanvas extends TinyHtmlTemplate<HTMLCanvasElement> {
+    /**
+     * Creates a new TinyHtmlCanvas instance.
+     * @param {Object} config
+     * @param {number} [config.width] - Canvas width in pixels.
+     * @param {number} [config.height] - Canvas height in pixels.
+     * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
+     * @param {string} [config.mainClass=""] - Main CSS class.
+     */
+    constructor({ width, height, tags, mainClass }?: {
+        width?: number | undefined;
+        height?: number | undefined;
+        tags?: string | string[] | Set<string> | undefined;
+        mainClass?: string | undefined;
+    });
+    /**
+     * Gets the rendering context of the canvas.
+     * @param {string} [type="2d"] - Context type ("2d", "webgl", etc.).
+     * @param {any} [options={}] - Context options.
+     * @returns {RenderingContext|null}
+     */
+    getContext(type?: string, options?: any): RenderingContext | null;
+}
+import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
+//# sourceMappingURL=TinyHtmlCanvas.d.mts.map

package/dist/v1/libs/TinyHtml/TinyHtmlCanvas.mjs

@@ -0,0 +1,44 @@
+import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
+/**
+ * TinyHtmlCanvas is a helper for <canvas> elements,
+ * providing a direct way to configure its size and retrieve the rendering context.
+ *
+ * @example
+ * const canvas = new TinyHtmlCanvas({ width: 800, height: 600 });
+ * const ctx = canvas.getContext('2d');
+ *
+ * @extends TinyHtmlTemplate<HTMLCanvasElement>
+ */
+class TinyHtmlCanvas extends TinyHtmlTemplate {
+    /**
+     * Creates a new TinyHtmlCanvas instance.
+     * @param {Object} config
+     * @param {number} [config.width] - Canvas width in pixels.
+     * @param {number} [config.height] - Canvas height in pixels.
+     * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
+     * @param {string} [config.mainClass=""] - Main CSS class.
+     */
+    constructor({ width, height, tags = [], mainClass = '' } = {}) {
+        super(document.createElement('canvas'), tags, mainClass);
+        if (width !== undefined)
+            this.width = width;
+        if (height !== undefined)
+            this.height = height;
+    }
+    /**
+     * Gets the rendering context of the canvas.
+     * @param {string} [type="2d"] - Context type ("2d", "webgl", etc.).
+     * @param {any} [options={}] - Context options.
+     * @returns {RenderingContext|null}
+     */
+    getContext(type = '2d', options = {}) {
+        if (typeof type !== 'string') {
+            throw new TypeError(`getContext: "type" must be a string. Got: ${typeof type}`);
+        }
+        const el = this.get(0);
+        if (!(el instanceof HTMLCanvasElement))
+            return null;
+        return el.getContext(type, options);
+    }
+}
+export default TinyHtmlCanvas;

package/dist/v1/libs/TinyHtml/TinyHtmlDatalist.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+var TinyHtmlTemplate = require('./TinyHtmlTemplate.cjs');
+
+/**
+ * TinyHtmlDatalist is a helper class for creating and managing <datalist> elements.
+ * A <datalist> provides predefined options for <input> elements via the `list` attribute.
+ *
+ * Only <option> children are valid inside <datalist>.
+ *
+ * @example
+ * const datalist = new TinyHtmlDatalist({ id: 'browsers' });
+ * datalist.addOption({ value: 'Firefox' });
+ * datalist.addOption({ value: 'Chrome' });
+ * document.body.appendChild(datalist.el);
+ *
+ * <input list="browsers">
+ *
+ * @extends TinyHtmlTemplate<HTMLDataListElement>
+ */
+class TinyHtmlDatalist extends TinyHtmlTemplate {
+  /**
+   * Creates a new TinyHtmlDatalist instance.
+   * @param {Object} config - Configuration object.
+   * @param {string} [config.id] - The unique identifier for the datalist (to be linked with <input list="...">).
+   * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
+   * @param {string} [config.mainClass=""] - Main CSS class.
+   * @param {Array<{value: string, label?: string}>} [config.options=[]] - Initial <option> elements.
+   */
+  constructor({ id, tags = [], mainClass = '', options = [] } = {}) {
+    super(document.createElement('datalist'), tags, mainClass);
+
+    if (id !== undefined) this.id = id;
+    if (options !== undefined) this.options = options;
+  }
+
+  /** @param {Array<{value: string, label?: string}>} options */
+  set options(options) {
+    if (!Array.isArray(options)) {
+      throw new TypeError('TinyHtmlDatalist: "options" must be an array.');
+    }
+    // limpa opções anteriores
+    this.el.innerHTML = '';
+    for (const opt of options) {
+      this.addOption(opt);
+    }
+  }
+
+  /** @returns {Array<{value: string, label: string|null}>} */
+  get options() {
+    return Array.from(this.el.children)
+      .filter((child) => child instanceof HTMLOptionElement)
+      .map((opt) => ({
+        value: opt.value,
+        label: opt.label || null,
+      }));
+  }
+
+  /**
+   * Adds a new <option> to the datalist.
+   * @param {Object} config - Option configuration.
+   * @param {string} config.value - The value of the option (required).
+   * @param {string} [config.label] - Optional label for accessibility or display.
+   * @returns {HTMLOptionElement} The created <option> element.
+   */
+  addOption({ value, label }) {
+    if (typeof value !== 'string') {
+      throw new TypeError('TinyHtmlDatalist.addOption: "value" must be a string.');
+    }
+    if (label !== undefined && typeof label !== 'string') {
+      throw new TypeError('TinyHtmlDatalist.addOption: "label" must be a string if provided.');
+    }
+
+    const option = document.createElement('option');
+    option.value = value;
+    if (label) option.label = label;
+    this.el.appendChild(option);
+    return option;
+  }
+
+  /**
+   * Removes an option by its value.
+   * @param {string} value - The value of the option to remove.
+   * @returns {boolean} True if an option was removed, false otherwise.
+   */
+  removeOption(value) {
+    if (typeof value !== 'string')
+      throw new TypeError('TinyHtmlDatalist.removeOption: "value" must be a string.');
+
+    const option = Array.from(this.el.children).find(
+      (child) => child instanceof HTMLOptionElement && child.value === value,
+    );
+
+    if (option) {
+      option.remove();
+      return true;
+    }
+    return false;
+  }
+}
+
+module.exports = TinyHtmlDatalist;