@stanko/ctrls 0.4.3 → 0.4.5

package/README.md

@@ -313,7 +313,7 @@ Grid of radio buttons. Can be set to have between one and five columns.
 ```ts
 {
   // Mandatory
-  items: Record<string, string>; // Map of radio items (key, value)
+  items: Record<string, string>; // Map of radio items (key -> value, value -> label)
 
   // Optional
   columns?: number; // default: 3
@@ -481,11 +481,12 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
 ## TODO
 
 * [ ] Add `add/removeEventListener` instead of direct update of `onInput` and `onChange`
+* [ ] Check if `onInput` is triggered when it should
 * [ ] Allow users to pass a custom PRNG lib
 * [ ] Hash storage - check if there is an instance using hash storage already
 * [ ] Storage - local storage
-* [ ] Check if `onInput` si triggered when it should
-* [ ] Use dom helpers everywhere
+* [*] Collapsing animation for the main element and groups
+* [x] Use dom helpers everywhere
 * [x] `toHtmlId(this.name)` => `toHtmlId(this.id)`
 * [x] Add `name` and `id` to inputs
 * [x] TypeDef bug - easing presets should be optional

package/dist/ctrls/ctrl-boolean.d.ts

@@ -1,4 +1,4 @@
-import type { Ctrl, CtrlItemType, CtrlChangeHandler, CtrlConfig } from "./types";
+import type { Ctrl, CtrlChangeHandler, CtrlConfig, CtrlItemType } from "./types";
 export declare class BooleanCtrl implements Ctrl<boolean> {
     type: CtrlItemType;
     id: string;

package/dist/ctrls/ctrl-boolean.js

@@ -1,3 +1,4 @@
+import { dom } from "../utils/dom";
 import { checkIcon } from "../utils/icons";
 import { toHtmlId } from "../utils/string-utils";
 export class BooleanCtrl {
@@ -17,11 +18,11 @@ export class BooleanCtrl {
         };
         this.buildUI = () => {
             const id = toHtmlId(this.id);
-            const input = document.createElement("input");
-            input.classList.add("ctrls__boolean-input");
-            input.setAttribute("type", "checkbox");
-            input.setAttribute("id", id);
-            input.setAttribute("name", id);
+            const input = dom.input("ctrls__boolean-input", {
+                type: "checkbox",
+                id,
+                name: id,
+            });
             input.checked = this.value;
             input.addEventListener("change", () => {
                 this.value = input.checked;
@@ -31,20 +32,18 @@ export class BooleanCtrl {
                 this.value = input.checked;
                 this.onInput(this);
             });
-            const checkmark = document.createElement("span");
-            checkmark.classList.add("ctrls__boolean-checkmark");
-            checkmark.innerHTML = checkIcon;
-            const right = document.createElement("div");
-            right.classList.add("ctrls__control-right");
-            right.appendChild(input);
-            right.appendChild(checkmark);
-            const label = document.createElement("span");
-            label.textContent = this.label;
-            label.classList.add("ctrls__control-label");
-            const element = document.createElement("label");
-            element.classList.add("ctrls__control", "ctrls__control--boolean");
-            element.appendChild(label);
-            element.appendChild(right);
+            const checkmark = dom.span("ctrls__boolean-checkmark", {
+                innerHTML: checkIcon,
+            });
+            const right = dom.div("ctrls__control-right", {
+                children: [input, checkmark],
+            });
+            const label = dom.span("ctrls__control-label", {
+                children: [this.label],
+            });
+            const element = dom.label("ctrls__control ctrls__control--boolean", {
+                children: [label, right],
+            });
             return {
                 element,
                 input,

package/dist/ctrls/ctrl-dual-range.d.ts

@@ -1,5 +1,5 @@
 import DualRangeInput from "@stanko/dual-range-input";
-import type { Ctrl, CtrlChangeHandler, CtrlItemType, ConfigFor } from "./types";
+import type { ConfigFor, Ctrl, CtrlChangeHandler, CtrlItemType } from "./types";
 export type DualRangeControlOptions = {
     min: number;
     max: number;

package/dist/ctrls/ctrl-dual-range.js

@@ -1,5 +1,6 @@
-import random from "../utils/random";
 import DualRangeInput from "@stanko/dual-range-input";
+import { dom } from "../utils/dom";
+import random from "../utils/random";
 import { roundToStep } from "../utils/round-to-step";
 import { toHtmlId } from "../utils/string-utils";
 export class DualRangeCtrl {
@@ -46,43 +47,41 @@ export class DualRangeCtrl {
                 this.update(this.value);
                 this.onInput(this);
             };
-            const minInput = document.createElement("input");
-            minInput.setAttribute("type", "range");
-            minInput.setAttribute("name", `${id}-min`);
-            minInput.setAttribute("id", `${id}-min`);
-            minInput.setAttribute("min", min.toString());
-            minInput.setAttribute("max", max.toString());
-            minInput.setAttribute("step", step.toString());
-            minInput.setAttribute("value", value.min.toString());
+            const minInput = dom.input("", {
+                type: "range",
+                name: `${id}-min`,
+                id: `${id}-min`,
+                min: min,
+                max: max,
+                step: step,
+                value: value.min,
+            });
             minInput.addEventListener("input", inputHandler);
             minInput.addEventListener("change", changeHandler);
-            const maxInput = document.createElement("input");
-            maxInput.setAttribute("type", "range");
-            maxInput.setAttribute("name", `${id}-max`);
-            maxInput.setAttribute("id", `${id}-max`);
-            maxInput.setAttribute("min", min.toString());
-            maxInput.setAttribute("max", max.toString());
-            maxInput.setAttribute("step", step.toString());
-            maxInput.setAttribute("value", value.max.toString());
+            const maxInput = dom.input("", {
+                type: "range",
+                name: `${id}-max`,
+                id: `${id}-max`,
+                min: min,
+                max: max,
+                step: step,
+                value: value.min,
+            });
             maxInput.addEventListener("input", inputHandler);
             maxInput.addEventListener("change", changeHandler);
-            const inputWrapper = document.createElement("div");
-            inputWrapper.classList.add("dual-range-input");
-            inputWrapper.appendChild(minInput);
-            inputWrapper.appendChild(maxInput);
-            const right = document.createElement("div");
-            right.classList.add("ctrls__control-right");
-            right.appendChild(inputWrapper);
-            const label = document.createElement("span");
-            label.textContent = this.label;
-            label.classList.add("ctrls__control-label");
-            const valueSpan = document.createElement("span");
-            valueSpan.classList.add("ctrls__control-value");
-            label.appendChild(valueSpan);
-            const element = document.createElement("div");
-            element.classList.add("ctrls__control", "ctrls__control--dual-range");
-            element.appendChild(label);
-            element.appendChild(right);
+            const inputWrapper = dom.div("dual-range-input", {
+                children: [minInput, maxInput],
+            });
+            const right = dom.div("ctrls__control-right", {
+                children: [inputWrapper],
+            });
+            const valueSpan = dom.span("ctrls__control-value");
+            const label = dom.span("ctrls__control-label", {
+                children: [this.label, valueSpan],
+            });
+            const element = dom.div("ctrls__control ctrls__control--dual-range", {
+                children: [label, right],
+            });
             return {
                 element,
                 valueSpan,

package/dist/ctrls/ctrl-easing.d.ts

@@ -1,4 +1,4 @@
-import type { Ctrl, CtrlChangeHandler, CtrlItemType, ConfigFor } from "./types";
+import type { ConfigFor, Ctrl, CtrlChangeHandler, CtrlItemType } from "./types";
 export type Easing = [number, number, number, number];
 export declare class EasingCtrl implements Ctrl<Easing> {
     type: CtrlItemType;

package/dist/ctrls/ctrl-easing.js

@@ -1,5 +1,6 @@
-import random from "../utils/random";
 import BezierEasing from "bezier-easing";
+import { dom } from "../utils/dom";
+import random from "../utils/random";
 import { toHtmlId } from "../utils/string-utils";
 const easings = {
     EASE: [0.25, 0.1, 0.25, 1],
@@ -53,36 +54,27 @@ export class EasingCtrl {
         this.buildUI = () => {
             const { value } = this;
             const id = toHtmlId(this.id);
-            const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            line1.setAttribute("class", "ctrls__easing-line ctrls__easing-line--1");
-            line1.setAttribute("x1", "0");
-            line1.setAttribute("y1", `${h}`);
-            const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            line2.setAttribute("class", "ctrls__easing-line ctrls__easing-line--2");
-            line2.setAttribute("x1", `${w}`);
-            line2.setAttribute("y1", "0");
-            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            path.setAttribute("class", "ctrls__easing-path");
-            const borders = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            borders.classList.add("easing-borders");
-            borders.setAttribute("d", `M 0 0 h ${w} M 0 ${h} h ${w}`);
-            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
-            svg.appendChild(borders);
-            svg.appendChild(path);
-            svg.appendChild(line1);
-            svg.appendChild(line2);
-            const handle1 = document.createElement("button");
-            handle1.className = "ctrls__easing-handle ctrls__easing-handle--1";
-            handle1.innerHTML = "";
-            const handle2 = document.createElement("button");
-            handle2.className = "ctrls__easing-handle ctrls__easing-handle--2";
-            handle2.innerHTML = "";
-            const control = document.createElement("div");
-            control.className = "ctrls__easing";
-            control.appendChild(svg);
-            control.appendChild(handle1);
-            control.appendChild(handle2);
+            const line1 = dom.line("ctrls__easing-line ctrls__easing-line--1", {
+                x1: 0,
+                y1: h,
+            });
+            const line2 = dom.line("ctrls__easing-line ctrls__easing-line--2", {
+                x1: w,
+                y1: 0,
+            });
+            const path = dom.path("ctrls__easing-path");
+            const borders = dom.path("easing-borders", {
+                d: `M 0 0 h ${w} M 0 ${h} h ${w}`,
+            });
+            const svg = dom.svg("", {
+                viewBox: `0 0 ${w} ${h}`,
+                children: [borders, path, line1, line2],
+            });
+            const handle1 = dom.button("ctrls__easing-handle ctrls__easing-handle--1");
+            const handle2 = dom.button("ctrls__easing-handle ctrls__easing-handle--2");
+            const control = dom.div("ctrls__easing", {
+                children: [svg, handle1, handle2],
+            });
             const addListeners = (handle, index) => {
                 let dragging = false;
                 let dragStart = { x: 0, y: 0 };
@@ -185,51 +177,51 @@ export class EasingCtrl {
             // Presets
             let presetButtons = null;
             if (Object.keys(this.presets).length > 0) {
-                presetButtons = document.createElement("div");
-                presetButtons.classList.add("ctrls__easing-buttons");
-                for (const key of Object.keys(this.presets)) {
-                    const button = document.createElement("button");
-                    button.textContent = key.toLowerCase().replace("ease_", "");
+                const buttons = Object.keys(this.presets).map((key) => {
+                    const button = dom.button("", {
+                        // Remove EASE_ prefix and make it lowercase
+                        // EASE_IN -> in
+                        children: [key.toLowerCase().replace("ease_", "")],
+                    });
                     button.addEventListener("click", () => {
                         this.value = this.presets[key];
                         this.onChange(this);
                         this.update();
                     });
-                    presetButtons.appendChild(button);
-                }
+                    return button;
+                });
+                presetButtons = dom.div("ctrls__easing-buttons", {
+                    children: buttons,
+                });
             }
-            const ticks = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            ticks.classList.add("ctrls__easing-ticks");
-            ticks.setAttribute("viewBox", `0 0 ${w} 5`);
-            ticks.setAttribute("preserveAspectRatio", "none");
             const tickCount = 30;
             const ticksElements = [];
             for (let i = 0; i < tickCount; i++) {
-                const tick = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                tick.setAttribute("y1", "0");
-                tick.setAttribute("y2", "5");
+                const tick = dom.line("", {
+                    y1: 0,
+                    y2: 5,
+                });
                 ticksElements.push(tick);
-                ticks.appendChild(tick);
             }
-            const controlWrapper = document.createElement("div");
-            controlWrapper.classList.add("ctrls__easing-wrapper");
-            controlWrapper.appendChild(ticks);
-            controlWrapper.appendChild(control);
-            controlWrapper.setAttribute("id", id);
-            const right = document.createElement("div");
-            right.classList.add("ctrls__control-right");
-            right.appendChild(controlWrapper);
-            if (presetButtons) {
-                right.appendChild(presetButtons);
-            }
-            const label = document.createElement("span");
-            label.textContent = this.label;
-            label.classList.add("ctrls__control-label");
-            const element = document.createElement("div");
-            element.classList.add("ctrls__control", "ctrls__control--easing");
-            element.setAttribute("data-value", value.join(","));
-            element.appendChild(label);
-            element.appendChild(right);
+            const ticks = dom.svg("ctrls__easing-ticks", {
+                viewBox: `0 0 ${w} 5`,
+                preserveAspectRatio: "none",
+                children: ticksElements,
+            });
+            const controlWrapper = dom.div("ctrls__easing-wrapper", {
+                id,
+                children: [ticks, control],
+            });
+            const right = dom.div("ctrls__control-right", {
+                children: [controlWrapper, presetButtons],
+            });
+            const label = dom.div("ctrls__control-label", {
+                children: [this.label],
+            });
+            const element = dom.div("ctrls__control ctrls__control--easing", {
+                "data-value": value.join(","),
+                children: [label, right],
+            });
             return {
                 element,
                 ticks: ticksElements,

package/dist/ctrls/ctrl-file.js

@@ -1,6 +1,6 @@
+import { dom } from "../utils/dom";
+import { deleteIcon } from "../utils/icons";
 import { toHtmlId } from "../utils/string-utils";
-import { dom } from "./dom";
-import { closeIcon } from "../utils/icons";
 const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "webp", "svg+xml"];
 export class FileCtrl {
     constructor(config, onChange, onInput) {
@@ -17,13 +17,18 @@ export class FileCtrl {
                 this.onChange(this);
                 this.onInput(this);
             });
-            const fakeInput = dom.label("ctrls__file-fake-input ctrls__btn ctrls__btn--sm", { for: id });
-            fakeInput.innerHTML = "select file";
+            const fakeInput = dom.label("ctrls__file-fake-input ctrls__btn ctrls__btn--sm", {
+                for: id,
+                children: ["select file"],
+            });
             if (this.accept) {
-                fakeInput.innerHTML += `<span>${this.accept}</span>`;
+                const acceptSpan = dom.span("", { children: [this.accept] });
+                fakeInput.append(acceptSpan);
             }
-            const clearButton = dom.button("ctrls__file-clear ctrls__btn");
-            clearButton.innerHTML = closeIcon;
+            const clearButton = dom.button("ctrls__file-clear ctrls__btn", {
+                innerHTML: deleteIcon,
+                "aria-label": "Clear file",
+            });
             clearButton.addEventListener("click", () => {
                 if (input.files) {
                     this.update(null);
@@ -31,21 +36,20 @@ export class FileCtrl {
                     this.onInput(this);
                 }
             });
-            const top = dom.div("ctrls__file-top");
-            top.append(input);
-            top.append(fakeInput);
-            top.append(clearButton);
+            const top = dom.div("ctrls__file-top", {
+                children: [input, fakeInput, clearButton],
+            });
             const preview = dom.div("ctrls__file-preview");
-            const right = dom.div("ctrls__control-right");
-            right.append(top);
-            right.append(preview);
+            const right = dom.div("ctrls__control-right", {
+                children: [top, preview],
+            });
             const label = dom.label("ctrls__control-label", {
                 for: id,
+                children: [this.label],
+            });
+            const element = dom.div("ctrls__control ctrls__control--file", {
+                children: [label, right],
             });
-            label.textContent = this.label;
-            const element = dom.div("ctrls__control ctrls__control--file");
-            element.appendChild(label);
-            element.appendChild(right);
             return {
                 element,
                 input,
@@ -55,20 +59,19 @@ export class FileCtrl {
         this.update = (file) => {
             this.value = file;
             if (file) {
-                const item = document.createElement("figure");
-                item.classList.add("ctrls__file-preview-item");
-                if (IMAGE_EXTENSIONS.includes(file.type.split("/")[1])) {
-                    console.log(URL.createObjectURL(file), file);
-                    const img = document.createElement("img");
-                    img.src = URL.createObjectURL(file);
-                    img.alt = file.name;
-                    img.classList.add("ctrls__file-image");
-                    item.appendChild(img);
-                }
-                const label = document.createElement("figcaption");
-                label.classList.add("ctrls__file-label");
-                label.textContent = file.name;
-                item.appendChild(label);
+                const isImage = IMAGE_EXTENSIONS.includes(file.type.split("/")[1]);
+                const img = isImage
+                    ? dom.img("ctrls__file-image", {
+                        src: URL.createObjectURL(file),
+                        alt: file.name,
+                    })
+                    : "";
+                const label = dom.figcaption("ctrls__file-label", {
+                    children: [file.name],
+                });
+                const item = dom.figure("ctrls__file-preview-item", {
+                    children: [img, label],
+                });
                 this.preview.replaceChildren(item);
             }
             else {

package/dist/ctrls/ctrl-html.js

@@ -1,13 +1,13 @@
+import { dom } from "../utils/dom";
 export const getHTMLControlElement = (config) => {
-    const right = document.createElement("div");
-    right.classList.add("ctrls__control-right");
-    right.append(config.html);
-    const label = document.createElement("label");
-    label.textContent = config.label || config.name;
-    label.classList.add("ctrls__control-label");
-    const element = document.createElement("div");
-    element.classList.add("ctrls__control", "ctrls__control--seed");
-    element.appendChild(label);
-    element.appendChild(right);
+    const right = dom.div("ctrls__control-right", {
+        children: [config.html],
+    });
+    const label = dom.label("ctrls__control-label", {
+        children: [config.label || config.name],
+    });
+    const element = dom.div("ctrls__control ctrls__control--seed", {
+        children: [label, right],
+    });
     return element;
 };

package/dist/ctrls/ctrl-radio.js

@@ -1,6 +1,7 @@
 import random from "../utils/random";
 import { toKebabCase } from "../utils/string-utils";
 import { getRandomString } from "../utils/get-random-string";
+import { dom } from "../utils/dom";
 export class RadioCtrl {
     constructor(config, onChange, onInput) {
         this.type = "radio";
@@ -21,11 +22,12 @@ export class RadioCtrl {
         this.buildUI = () => {
             const { items, value } = this;
             const inputs = items.map((item) => {
-                const input = document.createElement("input");
-                input.setAttribute("type", "radio");
-                input.setAttribute("name", this.htmlId);
-                input.setAttribute("id", `${this.htmlId}-${toKebabCase(item.value)}`);
-                input.setAttribute("value", item.value);
+                const input = dom.input("", {
+                    type: "radio",
+                    name: this.htmlId,
+                    id: `${this.htmlId}-${toKebabCase(item.value)}`,
+                    value: item.value,
+                });
                 input.checked = item.value === value;
                 input.addEventListener("change", () => {
                     this.value = this.parse(input.value);
@@ -35,25 +37,24 @@ export class RadioCtrl {
                     this.value = this.parse(input.value);
                     this.onInput(this);
                 });
-                const label = document.createElement("span");
-                label.textContent = item.label;
-                const option = document.createElement("label");
-                option.classList.add("ctrls__radio-label");
-                option.appendChild(input);
-                option.appendChild(label);
+                const label = dom.span("", {
+                    children: [item.label],
+                });
+                const option = dom.label("ctrls__radio-label", {
+                    children: [input, label],
+                });
                 return option;
             });
-            const right = document.createElement("div");
-            right.classList.add("ctrls__control-right");
-            right.style.gridTemplateColumns = `repeat(${this.columns}, 1fr)`;
-            right.append(...inputs);
-            const label = document.createElement("span");
-            label.textContent = this.label;
-            label.classList.add("ctrls__control-label");
-            const element = document.createElement("div");
-            element.classList.add("ctrls__control", "ctrls__control--radio");
-            element.appendChild(label);
-            element.appendChild(right);
+            const right = dom.div("ctrls__control-right", {
+                children: inputs,
+                style: `grid-template-columns: repeat(${this.columns}, 1fr);`,
+            });
+            const label = dom.span("ctrls__control-label", {
+                children: [this.label],
+            });
+            const element = dom.div("ctrls__control ctrls__control--radio", {
+                children: [label, right],
+            });
             return element;
         };
         this.update = (value) => {
@@ -69,10 +70,10 @@ export class RadioCtrl {
             next.checked = true;
         };
         this.items = [];
-        Object.keys(config.items).forEach((key) => {
+        Object.entries(config.items).forEach(([label, value]) => {
             this.items.push({
-                label: key,
-                value: config.items[key],
+                label,
+                value,
             });
         });
         this.columns = config.columns || 3;

package/dist/ctrls/ctrl-range.js

@@ -1,6 +1,7 @@
 import random from "../utils/random";
 import { roundToStep } from "../utils/round-to-step";
 import { toHtmlId } from "../utils/string-utils";
+import { dom } from "../utils/dom";
 export class RangeCtrl {
     constructor(config, onChange, onInput) {
         this.type = "range";
@@ -21,15 +22,15 @@ export class RangeCtrl {
         this.buildUI = () => {
             const { min, max, step, value } = this;
             const id = toHtmlId(this.id);
-            const input = document.createElement("input");
-            input.classList.add("ctrls__range-input");
-            input.setAttribute("type", "range");
-            input.setAttribute("id", id);
-            input.setAttribute("name", id);
-            input.setAttribute("min", min.toString());
-            input.setAttribute("max", max.toString());
-            input.setAttribute("step", step.toString());
-            input.setAttribute("value", value.toString());
+            const input = dom.input("ctrls__range-input", {
+                type: "range",
+                id,
+                name: id,
+                min,
+                max,
+                step,
+                value,
+            });
             input.addEventListener("input", () => {
                 this.value = this.parse(input.value);
                 this.update(this.value);
@@ -45,19 +46,16 @@ export class RangeCtrl {
                 const percentage = ((value - min) / (max - min)) * 100;
                 this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
             });
-            const right = document.createElement("div");
-            right.classList.add("ctrls__control-right");
-            right.append(input);
-            const label = document.createElement("span");
-            label.textContent = this.label;
-            label.classList.add("ctrls__control-label");
-            const valueSpan = document.createElement("span");
-            valueSpan.classList.add("ctrls__control-value");
-            label.appendChild(valueSpan);
-            const element = document.createElement("label");
-            element.classList.add("ctrls__control", "ctrls__control--range");
-            element.appendChild(label);
-            element.appendChild(right);
+            const right = dom.div("ctrls__control-right", {
+                children: [input],
+            });
+            const valueSpan = dom.span("ctrls__control-value");
+            const label = dom.span("ctrls__control-label", {
+                children: [this.label, valueSpan],
+            });
+            const element = dom.label("ctrls__control ctrls__control--range", {
+                children: [label, right],
+            });
             return {
                 element,
                 input,

package/dist/ctrls/ctrl-seed.js

@@ -1,6 +1,7 @@
 import generateSeed from "../utils/generate-seed";
 import { refreshIcon } from "../utils/icons";
 import { toHtmlId } from "../utils/string-utils";
+import { dom } from "../utils/dom";
 export class SeedCtrl {
     constructor(config, onChange, onInput) {
         this.type = "seed";
@@ -22,12 +23,12 @@ export class SeedCtrl {
         this.buildUI = () => {
             const { value } = this;
             const id = toHtmlId(this.id);
-            const input = document.createElement("input");
-            input.classList.add("ctrls__seed-input");
-            input.setAttribute("type", "text");
-            input.setAttribute("value", value.toString());
-            input.setAttribute("id", id);
-            input.setAttribute("name", id);
+            const input = dom.input("ctrls__seed-input", {
+                type: "text",
+                value,
+                id,
+                name: id,
+            });
             input.addEventListener("change", () => {
                 this.value = this.parse(input.value);
                 this.onChange(this);
@@ -36,26 +37,24 @@ export class SeedCtrl {
                 this.value = this.parse(input.value);
                 this.onInput(this);
             });
-            const reload = document.createElement("button");
-            reload.innerHTML = refreshIcon;
-            reload.classList.add("ctrls__seed-new-button", "ctrls__btn");
+            const reload = dom.button("ctrls__seed-new-button ctrls__btn", {
+                innerHTML: refreshIcon,
+            });
             reload.addEventListener("click", () => {
                 this.value = this.getRandomValue();
                 this.update();
                 this.onChange(this);
             });
-            const right = document.createElement("div");
-            right.classList.add("ctrls__control-right");
-            right.append(input);
-            right.append(reload);
-            const label = document.createElement("label");
-            label.textContent = this.label;
-            label.setAttribute("for", id);
-            label.classList.add("ctrls__control-label");
-            const element = document.createElement("div");
-            element.classList.add("ctrls__control", "ctrls__control--seed");
-            element.appendChild(label);
-            element.appendChild(right);
+            const right = dom.div("ctrls__control-right", {
+                children: [input, reload],
+            });
+            const label = dom.label("ctrls__control-label", {
+                for: id,
+                children: [this.label],
+            });
+            const element = dom.div("ctrls__control ctrls__control--seed", {
+                children: [label, right],
+            });
             return {
                 element,
                 input,

package/dist/ctrls/index.d.ts

@@ -10,7 +10,6 @@ export declare class Ctrls<Configs extends readonly ConfigItem[]> {
     constructor(configs: Configs, options?: ControlsOptions);
     processControls: (configs: Configs) => HTMLElement[];
     registerControl: (config: TypedControlConfig, onChangeControlHandler: (control: CtrlComponent) => void, onInputControlHandler: (control: CtrlComponent) => void, group?: string) => CtrlComponent;
-    toggleVisibility: () => void;
     addHashListeners: () => void;
     getHash: () => string;
     setHash: () => void;

package/dist/ctrls/index.js

@@ -11,6 +11,8 @@ import { FileCtrl } from "./ctrl-file";
 import Alea from "../utils/alea";
 import { chevronUpIcon, diceIcon } from "../utils/icons";
 import { getHTMLControlElement } from "./ctrl-html";
+import { dom } from "../utils/dom";
+import { getDrawer } from "../utils/get-drawer";
 const controlMap = {
     boolean: BooleanCtrl,
     range: RangeCtrl,
@@ -41,25 +43,18 @@ export class Ctrls {
             // Processing configs and creating component instances and HTML elements
             configs.map((config) => {
                 if (config.type === "group") {
-                    // Create group element
-                    const groupElement = document.createElement("div");
-                    groupElement.classList.add("ctrls__group");
-                    if (config.isCollapsed) {
-                        groupElement.classList.add("ctrls__group--hidden");
-                    }
-                    const groupTitle = document.createElement("button");
-                    groupTitle.classList.add("ctrls__group-title");
-                    groupTitle.innerHTML =
-                        (config.label || toSpaceCase(config.name)) + chevronUpIcon;
-                    groupTitle.addEventListener("click", () => {
-                        groupTitle.parentElement?.classList.toggle("ctrls__group--hidden");
+                    // Group title
+                    const groupTitle = dom.button("ctrls__group-title", {
+                        innerHTML: (config.label || toSpaceCase(config.name)) + chevronUpIcon,
                     });
-                    // Add title
-                    groupElement.append(groupTitle);
-                    config.controls.forEach((itemConfig) => {
+                    const controlsElements = config.controls.map((itemConfig) => {
                         const control = this.registerControl(itemConfig, onChangeControlHandler, onInputControlHandler, toCamelCase(config.name));
-                        // Add the control elements to the group element
-                        groupElement.append(control?.element);
+                        return control.element;
+                    });
+                    const groupControls = getDrawer("ctrls__group-controls", controlsElements, groupTitle, config.isCollapsed);
+                    // Create group element
+                    const groupElement = dom.div("ctrls__group", {
+                        children: [groupTitle, groupControls],
                     });
                     // Add the group element
                     elements.push(groupElement);
@@ -95,9 +90,6 @@ export class Ctrls {
             this.controls.push(control);
             return control;
         };
-        this.toggleVisibility = () => {
-            this.element.classList.toggle("ctrls--hidden");
-        };
         this.addHashListeners = () => {
             window.addEventListener("hashchange", this.updateFromHash);
             // Update all inputs using initial values from the hash
@@ -172,33 +164,29 @@ export class Ctrls {
             theme: "system",
             ...options,
         };
-        // Main element
-        this.element = document.createElement("div");
-        this.element.classList.add("ctrls");
-        this.element.classList.add(`ctrls--${this.options.theme}-theme`);
         // Title
-        if (this.options.title) {
-            const titleButton = document.createElement("button");
-            titleButton.classList.add("ctrls__title");
-            titleButton.innerHTML = this.options.title + chevronUpIcon;
-            titleButton.addEventListener("click", this.toggleVisibility);
-            this.element.appendChild(titleButton);
-        }
-        // Controls wrapper
-        const controlsContainer = document.createElement("div");
-        controlsContainer.classList.add("ctrls__controls");
-        this.element.appendChild(controlsContainer);
-        // Controls
-        const controlElements = this.processControls(configs);
-        controlsContainer.append(...controlElements);
+        let titleButton = this.options.title
+            ? dom.button("ctrls__title", {
+                innerHTML: this.options.title + chevronUpIcon,
+            })
+            : null;
         // Randomize button
+        let randomizeRow = null;
         if (this.options.showRandomizeButton) {
-            const randomizeButton = document.createElement("button");
-            randomizeButton.classList.add("ctrls__randomize", "ctrls__btn", "ctrls__btn--lg");
-            randomizeButton.innerHTML = `Randomize ${diceIcon}`;
+            const randomizeButton = dom.button("ctrls__randomize ctrls__btn ctrls__btn--lg", { innerHTML: `Randomize ${diceIcon}` });
             randomizeButton.addEventListener("click", this.randomize);
-            controlsContainer.appendChild(randomizeButton);
+            randomizeRow = dom.div("ctrls__control-no-label", {
+                children: [randomizeButton],
+            });
         }
+        // Control elements
+        const controlElements = this.processControls(configs);
+        // Controls wrapper
+        const controlsContainer = getDrawer("ctrls__controls", [...controlElements, randomizeRow], titleButton);
+        // Main element
+        this.element = dom.div(`ctrls ctrls--${this.options.theme}-theme`, {
+            children: [titleButton, controlsContainer],
+        });
         // Append the Ctrls element to the provided parent element
         if (this.options.parent) {
             this.options.parent.appendChild(this.element);

package/dist/ctrls.css

@@ -346,25 +346,43 @@
   width: 1rem;
 }
 
-.ctrls__group-title {
-  padding-block: 0.125rem;
+.ctrls__controls-inner {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
+}
+.ctrls__controls-inner > *:last-child:not(:first-child) {
+  margin-bottom: 0.25rem;
 }
 
-.ctrls--hidden .ctrls__title svg,
-.ctrls__group--hidden .ctrls__group-title svg {
-  transform: rotate(180deg);
+.ctrls__drawer {
+  display: none;
+  align-items: flex-start;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 500ms, opacity 500ms, display 500ms;
+  transition-behavior: allow-discrete;
+  overflow: hidden;
+  opacity: 0;
 }
 
-.ctrls__controls {
-  overflow: auto;
+.ctrls__drawer--expanded {
   display: grid;
-  padding: 0.25rem 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
+  grid-template-rows: 1fr;
+  opacity: 1;
 }
 
-.ctrls--hidden .ctrls__controls {
-  display: none;
+@starting-style {
+  .ctrls__drawer--ready.ctrls__drawer--expanded {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+}
+.ctrls__drawer-inner {
+  overflow: hidden;
+}
+
+.ctrls__drawer-toggle--collapsed svg {
+  transform: rotate(180deg);
 }
 
 .ctrls__group {
@@ -373,19 +391,14 @@
   border-radius: var(--ctrls-radius);
   overflow: hidden;
 }
+.ctrls__group:only-child {
+  margin-block: 0.5rem;
+}
 
 .ctrls__group .ctrls__control {
   grid-template-columns: calc(var(--ctrls-label-width) - 0.5rem) minmax(0, 1fr);
 }
 
-.ctrls__group--hidden {
-  padding-block-end: 0;
-}
-
-.ctrls__group--hidden .ctrls__control {
-  display: none;
-}
-
 .ctrls__control {
   padding: 0.25rem 0.5rem;
   display: grid;
@@ -398,6 +411,13 @@
 .ctrls__control:hover .ctrls__control-label {
   color: var(--ctrls-theme);
 }
+.ctrls__control:only-child {
+  padding-block: 0.5rem;
+}
+
+.ctrls__control-no-label {
+  padding: 0.25rem 0.5rem 0.25rem calc(var(--ctrls-label-width) + 0.5rem);
+}
 
 .ctrls__control-label {
   color: var(--ctrls-text-muted);
@@ -446,8 +466,7 @@
 }
 
 .ctrls__btn--lg {
-  margin-inline-start: calc(var(--ctrls-label-width) + 0.5rem);
-  margin-inline-end: 0.5rem;
+  width: 100%;
   padding: 0.5rem 1rem;
   background: var(--ctrls-btn-bg);
   border: 1px solid var(--ctrls-input-border);
@@ -460,7 +479,7 @@
 }
 
 .ctrls__randomize {
-  margin-block: 0.25rem;
+  grid-column: 2;
 }
 .ctrls__randomize:focus-visible svg, .ctrls__randomize:hover svg {
   transform: rotate(0.5turn);
@@ -776,7 +795,6 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   border: 1px solid var(--ctrls-input-border);
   background: var(--ctrls-input-wrapper-bg);
   border-radius: min(var(--ctrls-radius), 12px);
-  margin-bottom: 0.25rem;
 }
 
 .ctrls__easing {
@@ -820,6 +838,7 @@ label:hover .ctrls__boolean-input:not(:checked) + .ctrls__boolean-checkmark {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 0.25rem;
+  margin-top: 0.25rem;
 }
 
 .ctrls__easing-buttons button {

package/dist/ctrls.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAIJ;EACE;;;AAKA;AAAA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
+{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA,YACE;EAGF;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}

package/dist/utils/dom.d.ts

@@ -0,0 +1,28 @@
+type Attrs = {
+    [key: string]: unknown;
+    for?: string;
+    children?: (HTMLElement | SVGSVGElement | string | undefined | null)[];
+    innerHTML?: string;
+};
+type SVGAttrs = {
+    [key: string]: unknown;
+    for?: string;
+    children?: (SVGElement | string)[];
+    innerHTML?: string;
+};
+export declare const dom: {
+    div: (className?: string, attrs?: Attrs) => HTMLDivElement;
+    span: (className?: string, attrs?: Attrs) => HTMLSpanElement;
+    input: (className?: string, attrs?: Attrs) => HTMLInputElement;
+    label: (className?: string, attrs?: Attrs) => HTMLLabelElement;
+    button: (className?: string, attrs?: Attrs) => HTMLButtonElement;
+    img: (className?: string, attrs?: Attrs) => HTMLImageElement;
+    figure: (className?: string, attrs?: Attrs) => HTMLElement;
+    figcaption: (className?: string, attrs?: Attrs) => HTMLElement;
+    svg: (className?: string, attrs?: SVGAttrs) => SVGSVGElement;
+    path: (className?: string, attrs?: SVGAttrs) => SVGPathElement;
+    line: (className?: string, attrs?: SVGAttrs) => SVGLineElement;
+    circle: (className?: string, attrs?: SVGAttrs) => SVGCircleElement;
+    rect: (className?: string, attrs?: SVGAttrs) => SVGRectElement;
+};
+export {};

package/dist/utils/dom.js

@@ -0,0 +1,61 @@
+// ----- DOM ----- //
+const el = (tag, className = "", attrs = {}) => {
+    const element = document.createElement(tag);
+    element.className = className;
+    // Add children and innerHTML and remove them from attrs
+    if (attrs.children) {
+        attrs.children
+            // Remove falsy children
+            .filter(Boolean)
+            .forEach((child) => {
+            element.append(child);
+        });
+        delete attrs.children;
+    }
+    else if (attrs.innerHTML) {
+        element.innerHTML = attrs.innerHTML;
+        delete attrs.innerHTML;
+    }
+    for (const [key, value] of Object.entries(attrs)) {
+        element.setAttribute(key, String(value));
+    }
+    return element;
+};
+// ----- SVG ----- //
+const svgEl = (tag, className = "", attrs = {}) => {
+    const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    // className is deprecated for SVG elements
+    element.classList.add(...className.split(" ").filter(Boolean));
+    // Add children and innerHTML and remove them from attrs
+    if (attrs.children) {
+        attrs.children.forEach((child) => {
+            element.append(child);
+        });
+        delete attrs.children;
+    }
+    else if (attrs.innerHTML) {
+        element.innerHTML = attrs.innerHTML;
+        delete attrs.innerHTML;
+    }
+    for (const [key, value] of Object.entries(attrs)) {
+        element.setAttribute(key, String(value));
+    }
+    return element;
+};
+// ----- API ----- //
+export const dom = {
+    div: (className = "", attrs = {}) => el("div", className, attrs),
+    span: (className = "", attrs = {}) => el("span", className, attrs),
+    input: (className = "", attrs = {}) => el("input", className, attrs),
+    label: (className = "", attrs = {}) => el("label", className, attrs),
+    button: (className = "", attrs = {}) => el("button", className, attrs),
+    img: (className = "", attrs = {}) => el("img", className, attrs),
+    figure: (className = "", attrs = {}) => el("figure", className, attrs),
+    figcaption: (className = "", attrs = {}) => el("figcaption", className, attrs),
+    // SVG elements
+    svg: (className = "", attrs = {}) => svgEl("svg", className, attrs),
+    path: (className = "", attrs = {}) => svgEl("path", className, attrs),
+    line: (className = "", attrs = {}) => svgEl("line", className, attrs),
+    circle: (className = "", attrs = {}) => svgEl("circle", className, attrs),
+    rect: (className = "", attrs = {}) => svgEl("rect", className, attrs),
+};

package/dist/utils/get-drawer.d.ts

@@ -0,0 +1 @@
+export declare const getDrawer: (className?: string, children?: (HTMLElement | null)[], toggleButton?: HTMLButtonElement | null, isCollapsed?: boolean) => HTMLDivElement;

package/dist/utils/get-drawer.js

@@ -0,0 +1,22 @@
+import { dom } from "./dom";
+export const getDrawer = (className = "", children = [], toggleButton, isCollapsed = false) => {
+    const inner = dom.div(`ctrls__drawer-inner ${className}-inner`, {
+        children,
+    });
+    const outer = dom.div(`ctrls__drawer ${className}`, {
+        children: [inner],
+    });
+    if (isCollapsed) {
+        outer.classList.add("ctrls__drawer--collapsed");
+    }
+    else {
+        outer.classList.add("ctrls__drawer--expanded");
+    }
+    toggleButton?.addEventListener("click", () => {
+        outer.classList.add("ctrls__drawer--ready");
+        outer.classList.toggle("ctrls__drawer--collapsed");
+        outer.classList.toggle("ctrls__drawer--expanded");
+        toggleButton?.classList.toggle("ctrls__drawer-toggle--collapsed");
+    });
+    return outer;
+};

package/dist/utils/icons.d.ts

@@ -1,5 +1,5 @@
 export declare const checkIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
 export declare const refreshIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5\"/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/><path d=\"M8 16H3v5\"/></svg>";
 export declare const diceIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" stroke-width=\"2\"/><path d=\"M16 8h.01\"/><path d=\"M8 8h.01\"/><path d=\"M8 16h.01\"/><path d=\"M16 16h.01\"/><path d=\"M12 12h.01\"/></svg>";
-export declare const closeIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/></svg>";
+export declare const deleteIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/></svg>";
 export declare const chevronUpIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>";

package/dist/utils/icons.js

@@ -2,5 +2,5 @@
 export const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 export const refreshIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>`;
 export const diceIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" stroke-width="2"/><path d="M16 8h.01"/><path d="M8 8h.01"/><path d="M8 16h.01"/><path d="M16 16h.01"/><path d="M12 12h.01"/></svg>`;
-export const closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
+export const deleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
 export const chevronUpIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "scripts": {
     "test": "vitest",
@@ -10,7 +10,8 @@
     "build-lib": "rm -rf ./dist && tsc -p ./tsconfig-lib.json && npm run build-css",
     "parse-markdown": "node ./parse-markdown.js",
     "preview": "vite preview",
-    "prepare": "cp ./pre-commit ./.git/hooks/pre-commit && chmod +x ./.git/hooks/pre-commit"
+    "prepare": "cp ./pre-commit ./.git/hooks/pre-commit && chmod +x ./.git/hooks/pre-commit",
+    "prepublish": "npm run build-lib"
   },
   "types": "./dist/ctrls/index.d.ts",
   "main": "./dist/ctrls/index.js",

package/dist/ctrls/dom.d.ts

@@ -1,12 +0,0 @@
-type Attrs = Record<string, string | number> & {
-    for?: string;
-};
-export declare const dom: {
-    el: <T extends keyof HTMLElementTagNameMap>(tag: T, className?: string, attrs?: Attrs) => HTMLElementTagNameMap[T];
-    div: (className?: string, attrs?: Attrs) => HTMLDivElement;
-    span: (className?: string, attrs?: Attrs) => HTMLSpanElement;
-    input: (className?: string, attrs?: Attrs) => HTMLInputElement;
-    label: (className?: string, attrs?: Attrs) => HTMLLabelElement;
-    button: (className?: string, attrs?: Attrs) => HTMLButtonElement;
-};
-export {};

package/dist/ctrls/dom.js

@@ -1,16 +0,0 @@
-const el = (tag, className = "", attrs = {}) => {
-    const element = document.createElement(tag);
-    element.className = className;
-    for (const [key, value] of Object.entries(attrs)) {
-        element.setAttribute(key, value.toString());
-    }
-    return element;
-};
-export const dom = {
-    el,
-    div: (className = "", attrs = {}) => el("div", className, attrs),
-    span: (className = "", attrs = {}) => el("span", className, attrs),
-    input: (className = "", attrs = {}) => el("input", className, attrs),
-    label: (className = "", attrs = {}) => el("label", className, attrs),
-    button: (className = "", attrs = {}) => el("button", className, attrs),
-};