@stanko/ctrls 0.4.4 → 0.4.5

package/README.md

@@ -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/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

@@ -12,6 +12,7 @@ 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,
@@ -46,20 +47,15 @@ export class Ctrls {
                     const groupTitle = dom.button("ctrls__group-title", {
                         innerHTML: (config.label || toSpaceCase(config.name)) + chevronUpIcon,
                     });
-                    groupTitle.addEventListener("click", () => {
-                        groupTitle.parentElement?.classList.toggle("ctrls__group--hidden");
-                    });
                     const controlsElements = config.controls.map((itemConfig) => {
                         const control = this.registerControl(itemConfig, onChangeControlHandler, onInputControlHandler, toCamelCase(config.name));
                         return control.element;
                     });
+                    const groupControls = getDrawer("ctrls__group-controls", controlsElements, groupTitle, config.isCollapsed);
                     // Create group element
                     const groupElement = dom.div("ctrls__group", {
-                        children: [groupTitle, ...controlsElements],
+                        children: [groupTitle, groupControls],
                     });
-                    if (config.isCollapsed) {
-                        groupElement.classList.add("ctrls__group--hidden");
-                    }
                     // Add the group element
                     elements.push(groupElement);
                 }
@@ -94,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,25 +165,24 @@ export class Ctrls {
             ...options,
         };
         // Title
-        let titleButton = null;
-        if (this.options.title) {
-            titleButton = dom.button("ctrls__title", {
+        let titleButton = this.options.title
+            ? dom.button("ctrls__title", {
                 innerHTML: this.options.title + chevronUpIcon,
-            });
-            titleButton.addEventListener("click", this.toggleVisibility);
-        }
+            })
+            : null;
         // Randomize button
-        let randomizeButton = null;
+        let randomizeRow = null;
         if (this.options.showRandomizeButton) {
-            randomizeButton = dom.button("ctrls__randomize ctrls__btn ctrls__btn--lg", { innerHTML: `Randomize ${diceIcon}` });
+            const randomizeButton = dom.button("ctrls__randomize ctrls__btn ctrls__btn--lg", { innerHTML: `Randomize ${diceIcon}` });
             randomizeButton.addEventListener("click", this.randomize);
+            randomizeRow = dom.div("ctrls__control-no-label", {
+                children: [randomizeButton],
+            });
         }
         // Control elements
         const controlElements = this.processControls(configs);
         // Controls wrapper
-        const controlsContainer = dom.div("ctrls__controls", {
-            children: [...controlElements, randomizeButton],
-        });
+        const controlsContainer = getDrawer("ctrls__controls", [...controlElements, randomizeRow], titleButton);
         // Main element
         this.element = dom.div(`ctrls ctrls--${this.options.theme}-theme`, {
             children: [titleButton, controlsContainer],

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "scripts": {
     "test": "vitest",