wj-elements 0.1.49 → 0.1.51

package/dist/web-types.json

@@ -1,3122 +0,0 @@
-{
-  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
-  "name": "wj-elements",
-  "version": "0.1.49",
-  "description-markup": "markdown",
-  "contributions": {
-    "html": {
-      "elements": [
-        {
-          "name": "wje-accordion",
-          "description": "This class represents an Accordion element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion element.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Method to draw the Accordion element.\n\n### **Slots:**\n - _default_ - The accordion main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The accordion main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "multiple", "value": {} },
-              {
-                "name": "className",
-                "description": "The class name for the Accordion element.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Method to setup attributes for the Accordion element.",
-                "value": {}
-              },
-              { "name": "beforeDraw", "value": {} },
-              {
-                "name": "draw",
-                "description": "Method to draw the Accordion element.",
-                "value": {}
-              },
-              { "name": "afterDraw", "value": {} },
-              { "name": "collapseAll", "value": {} },
-              { "name": "getAccordions", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-accordion-item",
-          "description": "This class represents an Accordion Item element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion Item element.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Method to draw the Accordion Item element.\n- **afterDraw()** - Method to execute after the Accordion Item element is drawn.\n\n### **Slots:**\n - _default_ - The accordion item main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The accordion item main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Accordion Item element.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Method to setup attributes for the Accordion Item element.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Method to draw the Accordion Item element.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Method to execute after the Accordion Item element is drawn.",
-                "value": {}
-              },
-              { "name": "collapse", "value": {} },
-              { "name": "expand", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-aside",
-          "description": "This class represents an Aside element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Aside element.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Method to draw the Aside element.\n\n### **Slots:**\n - _default_ - The aside main content.\n\n### **CSS Properties:**\n - **--wje-aside-width;** - undefined _(default: undefined)_\n- **--wje-aside-top;** - undefined _(default: undefined)_\n- **--wje-aside-border-color:** - var(--wje-border-color); _(default: undefined)_\n- **--wje-aside-border-width;** - undefined _(default: undefined)_\n- **--wje-aside-border-style;** - undefined _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The aside main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Aside element ddddd.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Method to setup attributes for the Aside element.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Method to draw the Aside element.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-avatar",
-          "description": "This class represents an Avatar element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes\n- **draw(context: _object_, store: _object_, params: _object_): _object_** - Method to draw the avatar\n- **isImage(): _boolean_** - Method to check if the avatar is an image\n\n### **Slots:**\n - _default_ - The avatar main content.\n\n### **CSS Properties:**\n - **--wje-avatar-width;** - undefined _(default: undefined)_\n- **--wje-avatar-height;** - undefined _(default: undefined)_\n- **--wje-avatar-font-size;** - undefined _(default: undefined)_\n- **--wje-avatar-font-weight;** - undefined _(default: undefined)_\n- **--wje-avatar-color;** - undefined _(default: undefined)_\n- **--wje-avatar-background-color;** - undefined _(default: undefined)_\n- **--wje-avatar-border-radius;** - undefined _(default: undefined)_\n- **--wje-avatar-border-color;** - undefined _(default: undefined)_\n- **--wje-avatar-border-width;** - undefined _(default: undefined)_\n- **--wje-avatar-border-style;** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The avatar main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for cssStyleSheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Method to setup attributes",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Method to draw the avatar",
-                "value": {}
-              },
-              {
-                "name": "isImage",
-                "description": "Method to check if the avatar is an image",
-                "value": {}
-              },
-              { "name": "dispatchEvent", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-animation",
-          "description": "This class represents an Animation element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Animation element.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Method to draw the Animation element.\n- **afterDraw()** - Method to perform actions after the Animation element is drawn.\nThis method destroys any existing animation, fetches a new animations array,\nselects the appropriate animation, and applies it to the element.\n- **getAnimationsArray(): _Array_** - Method to fetch and parse the animations array from a CSS file.\n- **destroyAnimation()** - Method to destroy the current animation.\n- **play()** - Method to play the current animation.\n- **cancel()** - Method to cancel the current animation.\n\n### **Slots:**\n - _default_ - The animation main content.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [{ "name": "name", "value": { "type": "string" } }],
-          "slots": [
-            { "name": "", "description": "The animation main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "name", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-badge",
-          "description": "This class represents an Badge element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n\n### **Slots:**\n - _default_ - The badge main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The badge main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-breadcrumb",
-          "description": "This class represents an Breadcrumb element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n- **drawCollapsedIndicator(): _Object_** - Draw collapsed indicator\n- **collapseDropdown(): _Object_** - Collapse dropdown\n- **collapseButton(): _Object_** - Collapse button\n\n### **Slots:**\n - _default_ - The breadcrumb main content.\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "show-collapsed-indicator",
-              "value": { "type": "string" }
-            },
-            { "name": "collapsed", "value": { "type": "string" } },
-            { "name": "last", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The breadcrumb main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "show-collapsed-indicator", "value": {} },
-              { "name": "collapsed", "value": {} },
-              { "name": "last", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-breadcrumbs",
-          "description": "Breadcrumbs class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n- **afterDraw()** - After draw method\n- **getBreadcrumbs(): _Array_** - Get breadcrumbs\n\n### **Slots:**\n - _default_ - The breadcrumb main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The breadcrumb main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} },
-              {
-                "name": "afterDraw",
-                "description": "After draw method",
-                "value": {}
-              },
-              {
-                "name": "getBreadcrumbs",
-                "description": "Get breadcrumbs",
-                "value": {}
-              },
-              {
-                "name": "last",
-                "description": "Last breadcrumb flag",
-                "value": { "type": "boolean" }
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-button",
-          "description": "This class represents an Button element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n- **afterDraw()** - After draw method\n- **beforeDisconnect()** - Before disconnect method\n\n### **Slots:**\n - _default_ - The button main content.\n- **icon** - The button icon.\n- **caret** - The button caret.\n- **start** - The button start slot.\n- **end** - The button end slot.\n- **toggle** - The button toggle slot.\n\n### **CSS Properties:**\n - **--wje-button-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-button-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-button-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-button-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-button-border-style** - Border style of the component; _(default: solid)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-button-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [{ "name": "disabled", "value": { "type": "string" } }],
-          "slots": [
-            { "name": "", "description": "The button main content." },
-            { "name": "icon", "description": "The button icon." },
-            { "name": "caret", "description": "The button caret." },
-            { "name": "start", "description": "The button start slot." },
-            { "name": "end", "description": "The button end slot." },
-            { "name": "toggle", "description": "The button toggle slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "disabled", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-button-group",
-          "description": "ButtonGroup class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n- **afterDraw(context: _Object_, store: _Object_, params: _Object_)** - After draw method\n- **findButton(el: _Object_): _Object_** - Find button method\n\n### **Slots:**\n - _default_ - The button group main content.\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The button group main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} },
-              {
-                "name": "afterDraw",
-                "description": "After draw method",
-                "value": {}
-              },
-              {
-                "name": "findButton",
-                "description": "Find button method",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-card-content",
-          "description": "This class represents an Card Content element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n\n### **Slots:**\n - _default_ - The card content main content.\n\n### **CSS Properties:**\n - **--wje-card-padding** - Padding of the component; _(default: 0)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card content main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-card",
-          "description": "This class represents an Card element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n\n### **Slots:**\n - _default_ - The card main content.\n\n### **CSS Properties:**\n - **--wje-card-margin-top** - Margin top of the component; _(default: 0)_\n- **--wje-card-margin-bottom** - Margin bottom of the component; _(default: 1rem)_\n- **--wje-card-margin-inline** - Margin inline of the component; _(default: 0)_\n- **undefined** - undefined _(default: undefined)_\n- **--wje-card-background** - Background of the component; _(default: #fff)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The card main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-card-header",
-          "description": "CardHeader class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardHeader.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the CardHeader.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-card-header-padding** - Padding of the component; _(default: 1rem 1rem 0.5rem)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card header main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the CardHeader.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the CardHeader.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the CardHeader.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-card-subtitle",
-          "description": "CardSubtitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardSubtitle.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the CardSubtitle.\n\n### **Slots:**\n - _default_ - The card subtitle main content.\n\n### **CSS Properties:**\n - **--wje-card-subtitle-font-size** - Font size of the component; _(default: 11px)_\n- **--wje-card-subtitle-font-family** - Font family of the component; _(default: var(--wje-font-family-secondary))_\n- **--wje-card-subtitle-padding** - Padding of the component; _(default: 0)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card subtitle main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the CardSubtitle.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the CardSubtitle.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the CardSubtitle.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-card-controls",
-          "description": "This class represents an Card Controls element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n\n### **Slots:**\n - _default_ - The card controls main content.\n\n### **CSS Properties:**\n - **--wje-card-controls-font-size** - Font size of the component; _(default: 11px)_\n- **--wje-card-controls-font-family** - Font family of the component; _(default: --wje-font-family-secondary)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card controls main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-card-title",
-          "description": "CardTitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardTitle.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the CardTitle.\n\n### **Slots:**\n - _default_ - The card title main content.\n\n### **CSS Properties:**\n - **--wje-card-title-font-size** - Font size of the component; _(default: 24px)_\n- **--wje-card-title-font-weight** - Font weight of the component; _(default: 500)_\n- **--wje-card-title-margin** - Margin of the component; _(default: 0)_\n- **--wje-card-title-padding** - Padding of the component; _(default: 0)_\n- **--wje-card-title-line-height** - Line height of the component; _(default: 1.2)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card title main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the CardTitle.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the CardTitle.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the CardTitle.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-carousel-item",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "afterDraw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-carousel",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "active-slide", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "active-slide", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-col",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "beforeDraw", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-checkbox",
-          "description": "This method dispatches a custom event named \"wje-checkbox:change\".\nIt is triggered when the input event is fired, which happens when the state of the checkbox changes.\nThe event is dispatched on the current instance of the Checkbox class.\n---\n\n\n### **Events:**\n - **wje-checkbox:change** - Dispatched when the checkbox state changes.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the checkbox.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the checkbox.\n- **afterDraw()** - Adds an event listener after drawing the checkbox.\n\n### **Slots:**\n - _default_ - The checkbox main content.\n\n### **CSS Properties:**\n - **--wje-checkbox-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-checkbox-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-checkbox-border-style** - Border style of the component; _(default: solid)_\n- **--wje-checkbox-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-checkbox-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper. --wje-button-border-radius: var(--wje-border-radius-medium); --wje-button-border-width: 1px; --wje-button-border-style: solid; --wje-button-border-color: var(--wje-color-contrast-1); --wje-button-margin-inline: 0;",
-          "doc-url": "",
-          "attributes": [
-            { "name": "checked", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The checkbox main content." }
-          ],
-          "events": [
-            {
-              "name": "wje-checkbox:change",
-              "description": "Dispatched when the checkbox state changes."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "checked", "value": {} },
-              { "name": "disabled", "value": {} }
-            ],
-            "events": [
-              {
-                "name": "wje-checkbox:change",
-                "description": "Dispatched when the checkbox state changes."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-chip",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "afterDraw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-color-picker",
-          "description": "ColorPicker is a custom web component that extends WJElement.\nIt provides a color picker functionality with a color area, hue slider, alpha slider, and color swatches.\nThe color picker allows users to select a color by moving a marker on the color area, adjusting the hue and alpha sliders, or clicking on a color swatch.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the ColorPicker.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the ColorPicker.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-color-picker-area** - The color of the color area. _(default: undefined)_\n- **--wje-color-picker-value** - The value of the color picker. _(default: undefined)_\n\n### **CSS Parts:**\n - **anchor** - The anchor part of the color picker.\n- **picker** - The main part of the color picker.\n- **marker** - The marker part of the color picker.\n- **color-area** - The color area part of the color picker.\n- **hue** - The hue slider part of the color picker.\n- **alpha** - The alpha slider part of the color picker.\n- **color-preview** - The color preview part of the color picker.\n- **input** - The input part of the color picker.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card header main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "markerPosition",
-                "description": "Getter for the marker position.",
-                "value": {}
-              },
-              {
-                "name": "swatches",
-                "description": "Getter for the color swatches.",
-                "value": {}
-              },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the ColorPicker.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the ColorPicker.",
-                "value": {}
-              },
-              { "name": "createSwatches", "value": {} },
-              { "name": "setSliders", "value": {} },
-              { "name": "afterDraw", "value": {} },
-              { "name": "dimension", "value": {} },
-              { "name": "moveMarker", "value": {} },
-              { "name": "getPointerPosition", "value": {} },
-              { "name": "setMarkerPosition", "value": {} },
-              { "name": "setColorAtPosition", "value": {} },
-              { "name": "setMarkerPositionByColor", "value": {} },
-              { "name": "setColor", "value": {} },
-              { "name": "setHue", "value": {} },
-              { "name": "setAlpha", "value": {} },
-              { "name": "getHSVA", "value": {} },
-              {
-                "name": "_markerPosition",
-                "description": "The position of the color marker.",
-                "value": { "type": "Object" }
-              },
-              {
-                "name": "_swatches",
-                "description": "The color swatches.",
-                "value": { "type": "Array" }
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-container",
-          "description": "The Container class is a custom web component that extends WJElement. It is a simple container that can hold other elements or components.\nIt provides a slot for adding child elements or components. The Container class also supports indentation through the `indent` property.\nThe indentation is applied as a CSS variable (`--wje-container-indent`) which can be used in the styles of child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Container.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the Container.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.\n\n### **CSS Properties:**\n - **--wje-container-indent** - The indentation of the container. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The slot for adding child elements or components."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the Container.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the Container.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the Container.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-dialog",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "placement", "value": {} },
-              { "name": "async", "value": {} },
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "close", "value": {} },
-              { "name": "afterDraw", "value": {} },
-              { "name": "beforeOpen", "value": {} },
-              { "name": "afterOpen", "value": {} },
-              { "name": "beforeClose", "value": {} },
-              { "name": "afterClose", "value": {} },
-              { "name": "onOpen", "value": {} },
-              { "name": "onClose", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-divider",
-          "description": "Divider is a custom web component that extends WJElement.\nIt provides a simple divider line that can be used to separate content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Divider.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the Divider.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-border-width** - The size of the border. _(default: 1px)_\n- **--wje-divider-border-color** - The color of the divider border. _(default: var(--wje-border-color))_\n- **--wje-divider-border-width** - The width of the divider border. _(default: var(--wje-border-width, 1px))_\n- **--wje-divider-spacing** - The spacing for the divider. _(default: 0)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Divider class.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for the CSS stylesheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the Divider.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the Divider.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-copy-button",
-          "description": "CopyButton is a custom web component that extends WJElement.\nIt provides a button that, when clicked, copies a specified text to the clipboard.\nThe text to be copied can be specified through the `value` attribute.\nThe CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.\n---\n\n\n### **Events:**\n - **wje:copy-button** - Dispatched when the button is clicked and the text is copied.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CopyButton.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the ColorPicker.\n- **afterDraw()** - Sets up the event listeners after the CopyButton is drawn.\n- **copy(button: _HTMLElement_)** - Copies the specified text or node.\n- **copyTarget(content: _HTMLElement_): _Promise_** - Copies the target content.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--text-color** - Controls the color of the text. _(default: undefined)_\n- **--background-color** - Controls the background color of the button. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - Styles the button element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "for",
-              "description": "The id of the element to copy content from.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "value",
-              "description": "The text to be copied.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
-          ],
-          "events": [
-            {
-              "name": "wje:copy-button",
-              "description": "Dispatched when the button is clicked and the text is copied."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "for",
-                "description": "The id of the element to copy content from.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "value",
-                "description": "The text to be copied.",
-                "value": { "type": "string" }
-              }
-            ],
-            "events": [
-              {
-                "name": "wje:copy-button",
-                "description": "Dispatched when the button is clicked and the text is copied."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-file-upload",
-          "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Method to draw the component.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(event: _Event_)** - Method to handle form submission.\n- **uploadFiles(files: _FileList_)** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **updateStatusMessage(text: _string_)** - Method to update the status message.\n- **resetFormState()** - Method to reset the form state.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **button** - The upload button part.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "description": "Fires when the file input changes."
-            },
-            {
-              "name": "drop",
-              "description": "Fires when a file is dropped into the component."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "depandencies",
-                "description": "Dependencies",
-                "value": { "type": "Object" }
-              },
-              {
-                "name": "acceptedTypes",
-                "description": "Getter for acceptedTypes attribute.",
-                "value": {}
-              },
-              {
-                "name": "chunkSize",
-                "description": "Getter for chunkSize attribute.",
-                "value": {}
-              },
-              {
-                "name": "maxFileSize",
-                "description": "Getter for maxFileSize attribute.",
-                "value": {}
-              },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for cssStyleSheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Method to setup attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Method to draw the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Method to perform actions after the component is drawn.",
-                "value": {}
-              },
-              {
-                "name": "handleSubmit",
-                "description": "Method to handle form submission.",
-                "value": {}
-              },
-              {
-                "name": "handleDrop",
-                "description": "Method to handle file drop event.",
-                "value": {}
-              },
-              {
-                "name": "handleInputChange",
-                "description": "Method to handle file input change event.",
-                "value": {}
-              },
-              {
-                "name": "uploadFiles",
-                "description": "Method to upload files.",
-                "value": {}
-              },
-              {
-                "name": "createPreview",
-                "description": "Method to create a preview for the file.",
-                "value": {}
-              },
-              {
-                "name": "createThumbnail",
-                "description": "Method to create a thumbnail for the file.",
-                "value": {}
-              },
-              {
-                "name": "assertFilesValid",
-                "description": "Method to validate the files.",
-                "value": {}
-              },
-              {
-                "name": "updateStatusMessage",
-                "description": "Method to update the status message.",
-                "value": {}
-              },
-              {
-                "name": "resetFormState",
-                "description": "Method to reset the form state.",
-                "value": {}
-              },
-              { "name": "localizer", "value": {} }
-            ],
-            "events": [
-              {
-                "name": "change",
-                "description": "Fires when the file input changes."
-              },
-              {
-                "name": "drop",
-                "description": "Fires when a file is dropped into the component."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-footer",
-          "description": "This element represents a footer. `Footer` is a custom web component that represents a footer.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the footer content\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the footer _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Default slot for the footer content"
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-dropdown",
-          "description": "This element represents a dropdown menu.\n---\n\n\n### **Events:**\n - **wje-dropdown:open** - Event fired when the dropdown is opened.\n- **wje-dropdown:close** - Event fired when the dropdown is closed.\n\n### **Methods:**\n - **afterShow()** - This method is called after the dropdown is shown.\n\n### **Slots:**\n - **trigger** - The slot for the trigger of the dropdown.\n- _default_ - The default slot for the dropdown.\n\n### **CSS Parts:**\n - **native** - The native part of the dropdown.",
-          "doc-url": "",
-          "attributes": [{ "name": "active", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "trigger",
-              "description": "The slot for the trigger of the dropdown."
-            },
-            { "name": "", "description": "The default slot for the dropdown." }
-          ],
-          "events": [
-            {
-              "name": "wje-dropdown:open",
-              "description": "Event fired when the dropdown is opened."
-            },
-            {
-              "name": "wje-dropdown:close",
-              "description": "Event fired when the dropdown is closed."
-            }
-          ],
-          "js": {
-            "properties": [{ "name": "active", "value": {} }],
-            "events": [
-              {
-                "name": "wje-dropdown:open",
-                "description": "Event fired when the dropdown is opened."
-              },
-              {
-                "name": "wje-dropdown:close",
-                "description": "Event fired when the dropdown is closed."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-file-upload-item",
-          "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Events:**\n - **wje-button:click** - Dispatches when the delete button is clicked\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Method to draw the component.\n- **afterDraw()** - Called after the component has been drawn.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
-          "doc-url": "",
-          "attributes": [{ "name": "uploaded", "value": { "type": "string" } }],
-          "slots": [
-            { "name": "img", "description": "Slot for the image" },
-            { "name": "action", "description": "Slot for the action buttons" }
-          ],
-          "events": [
-            {
-              "name": "wje-button:click",
-              "description": "Dispatches when the delete button is clicked"
-            }
-          ],
-          "js": {
-            "properties": [{ "name": "uploaded", "value": {} }],
-            "events": [
-              {
-                "name": "wje-button:click",
-                "description": "Dispatches when the delete button is clicked"
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-form",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-format-digital",
-          "description": "\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Prepares the component before drawing.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.",
-          "doc-url": "",
-          "attributes": [{ "name": "value", "value": { "type": "string" } }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "value", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-header",
-          "description": "`Header` is a custom web component that represents a header. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the header content\n\n### **CSS Properties:**\n - **--wje-header-background** - The background of the header _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header _(default: 0 0 1px 0)_\n- **--wje-header-border-style** - The border styles of the header _(default: solid)_\n- **--wje-header-top** - The position top of the header _(default: 0)_\n- **--wje-header-height** - The height of the header _(default: 60px)_\n\n### **CSS Parts:**\n - **native** - The native part",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Default slot for the header content"
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-icon",
-          "description": "This element represents an icon. `IconElement` is a custom web component that represents an icon.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n\n### **CSS Properties:**\n - **--wje-icon-size** - The size of the icon _(default: 1rem)_\n- **--wje-icon-width** - The width of the icon _(default: var(--wje-icon-size, 100%))_\n- **--wje-icon-height** - The height of the icon _(default: var(--wje-icon-size, 100%))_\n\n### **CSS Parts:**\n - **svg** - The SVG part of the icon",
-          "doc-url": "",
-          "attributes": [{ "name": "name", "value": { "type": "string" } }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "name", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-grid",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-icon-picker",
-          "description": "This element allows users to pick an icon. `IconPicker` is a custom web component that represents an icon picker.\nIt extends from `WJElement` and uses the `InfiniteScroll`, `Input`, and `Tooltip` components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Prepares the component before drawing.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n- **initial()** - Initializes the component.\n- **setupInfiniteScroll()** - Sets up the infinite scroll for the component.\n- **getCategory(tags: _Array_): _Array_** - Gets the category of the tags.\n- **getTags(): _Promise<Array>_** - Gets the tags.\n- **clearIconsContainer()** - Clears the icons container.\n\n### **CSS Properties:**\n - **--wje-icon-picker-radius** - The border radius of the icon picker _(default: var(--wje-border-radius-small))_\n- **--wje-icon-picker-icon-size** - The size of the icon picker _(default: 1.5rem)_\n- **--wje-icon-picker-border-width** - The border width of the icon picker _(default: 1px)_\n- **--wje-icon-picker-border-style** - The border style of the icon picker _(default: solid)_\n- **--wje-icon-picker-border-color** - The border color of the icon picker _(default: var(--wje-border-color))_\n- **--wje-icon-picker-padding** - The padding of the icon picker _(default: .25rem .5rem)_\n\n### **CSS Parts:**\n - **native** - The native part\n- **anchor** - The anchor part\n- **picker** - The picker part\n- **input** - The input part",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "depandencies",
-                "description": "Dependencies of the IconPicker component.",
-                "value": { "type": "object" }
-              },
-              {
-                "name": "markerPosition",
-                "description": "Getter for the markerPosition property.",
-                "value": {}
-              },
-              {
-                "name": "swatches",
-                "description": "Getter for the swatches property.",
-                "value": {}
-              },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Prepares the component before drawing.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Called after the component has been drawn.",
-                "value": {}
-              },
-              {
-                "name": "initial",
-                "description": "Initializes the component.",
-                "value": {}
-              },
-              {
-                "name": "setupInfiniteScroll",
-                "description": "Sets up the infinite scroll for the component.",
-                "value": {}
-              },
-              {
-                "name": "getCategory",
-                "description": "Gets the category of the tags.",
-                "value": {}
-              },
-              {
-                "name": "getTags",
-                "description": "Gets the tags.",
-                "value": {}
-              },
-              {
-                "name": "searchIcon",
-                "description": "Event handler for searching icons.",
-                "value": {}
-              },
-              {
-                "name": "clearIconsContainer",
-                "description": "Clears the icons container.",
-                "value": {}
-              },
-              {
-                "name": "onClose",
-                "description": "Closes the component.",
-                "value": {}
-              },
-              {
-                "name": "getTagsUrl",
-                "description": "Gets the URL of the tags.",
-                "value": {}
-              },
-              { "name": "size", "value": { "type": "number" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-inline-edit",
-          "description": "\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the checkbox.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the checkbox.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "checked", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "checked", "value": {} },
-              { "name": "disabled", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-img-comparer",
-          "description": "This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\nIt extends from `WJElement` and uses the `Icon` component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **before** - The before image slot.\n- **after** - The after image slot.\n\n### **CSS Properties:**\n - **--wje-img-compare-divider-area** - The area of the divider.; _(default: 12px)_\n- **undefined** - undefined _(default: undefined)_\n- **--wje-img-compare-divider-size** - The size of the divider.; _(default: 2px)_\n- **--wje-img-compare-divider-left** - The left position of the divider.; _(default: 50%)_\n- **--wje-img-compare-position** - The position of the divider.; _(default: 50%)_\n- **--wje-img-compare-clip-path** - The clip path of the divider.; _(default: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0))_\n\n### **CSS Parts:**\n - **divider** - The divider part.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "before", "description": "The before image slot." },
-            { "name": "after", "description": "The after image slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "depandencies",
-                "description": "Dependencies of the ImgComparer component.",
-                "value": { "type": "object" }
-              },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "handleDrag",
-                "description": "Handles the drag event.",
-                "value": {}
-              },
-              {
-                "name": "clamp",
-                "description": "Clamps a number between a minimum and maximum value.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-img",
-          "description": "This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw(context, store, params)** - Called after the component has been drawn.\n\n### **CSS Properties:**\n - **--img-width** - The width of the image _(default: undefined)_\n- **--img-height** - The height of the image _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Called after the component has been drawn.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-infinite-scroll",
-          "description": "This element allows users to scroll through a potentially infinite amount of content.\n---\n\n\n### **Events:**\n - **wje-infinite-scroll:click-item** - Event fired when an item is clicked.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(context: _Object_, store: _Object_, params: _Object_)** - Prepares the component before drawing.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n- **getPages(page: _number_): _Promise<Object>_** - Fetches the pages from the server.\n- **hideLoader()** - Hides the loader.\n- **showLoader()** - Shows the loader.\n- **hasMorePages(page: _number_): _boolean_** - Checks if there are more pages to load.\n- **loadPages(page: _number_)** - Loads the pages.\n\n### **Slots:**\n - _default_ - The default slot for the infinite scroll.\n\n### **CSS Properties:**\n - **--wje-infinite-scroll-width** - The width of the infinite scroll. _(default: 100%)_\n- **--wje-infinite-scroll-height** - The height of the infinite scroll. _(default: 300px)_\n\n### **CSS Parts:**\n - **loader** - The loader part of the infinite scroll.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the infinite scroll."
-            }
-          ],
-          "events": [
-            {
-              "name": "wje-infinite-scroll:click-item",
-              "description": "Event fired when an item is clicked."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "infiniteScrollTemplate", "value": {} },
-              { "name": "response", "value": {} },
-              { "name": "objectName", "value": {} },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Prepares the component before drawing.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Called after the component has been drawn.",
-                "value": {}
-              },
-              {
-                "name": "scrollEvent",
-                "description": "Adds the scroll event listener.",
-                "value": {}
-              },
-              {
-                "name": "unScrollEvent",
-                "description": "Removes the scroll event listener.",
-                "value": {}
-              },
-              {
-                "name": "onScroll",
-                "description": "Handles the scroll event.",
-                "value": {}
-              },
-              {
-                "name": "getPages",
-                "description": "Fetches the pages from the server.",
-                "value": {}
-              },
-              {
-                "name": "hideLoader",
-                "description": "Hides the loader.",
-                "value": {}
-              },
-              {
-                "name": "showLoader",
-                "description": "Shows the loader.",
-                "value": {}
-              },
-              {
-                "name": "hasMorePages",
-                "description": "Checks if there are more pages to load.",
-                "value": {}
-              },
-              {
-                "name": "loadPages",
-                "description": "Loads the pages.",
-                "value": {}
-              },
-              {
-                "name": "dataToHtml",
-                "description": "Sets the custom data.",
-                "value": {}
-              },
-              { "name": "customForeach", "value": {} },
-              { "name": "totalPages", "value": { "type": "number" } },
-              { "name": "isLoading", "value": { "type": "array" } },
-              { "name": "_response", "value": { "type": "object" } },
-              { "name": "iterate", "value": { "type": "null" } },
-              {
-                "name": "_infiniteScrollTemplate",
-                "value": { "type": "null" }
-              },
-              {
-                "name": "interpolate",
-                "description": "Interpolates a string with the given parameters.",
-                "value": {}
-              }
-            ],
-            "events": [
-              {
-                "name": "wje-infinite-scroll:click-item",
-                "description": "Event fired when an item is clicked."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-input",
-          "description": "This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n---\n\n\n### **Events:**\n - **invalid** - undefined\n- **wje-input:input** - Dispatched when the input value changes.\n- **wje-input:clear** - Dispatched when the input is cleared.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the input.\n- **draw(context: _CanvasRenderingContext2D_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the input.\n- **afterDraw()** - Runs after the input is drawn.\n- **hasSlot(el: _HTMLElement_, slotName: _string_): _boolean_** - Checks whether the input has a slot.\n- **formResetCallback()** - The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\nThis method is responsible for resetting the value of the custom input element to its default value.\nIt also resets the form value and validity state in the form internals.\n- **formStateRestoreCallback(state: _Object_)** - The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\nThis method is responsible for restoring the value of the custom input element to its saved state.\nIt also restores the form value and validity state in the form internals to their saved states.\n- **formStateSaveCallback(): _Object_** - The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\nThis method is responsible for saving the value of the custom input element.\n- **formDisabledCallback(disabled: _boolean_)** - The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\nThis method is not implemented yet.\n\n### **Slots:**\n - **start** - Slot for content at the start of the input.\n- **end** - Slot for content at the end of the input.\n\n### **CSS Properties:**\n - **--wje-input-font-family** - The font family of the input. _(default: var(--wje-font-family))_\n- **--wje-input-background-color** - The background color of the input. _(default: var(--wje-background))_\n- **--wje-input-color** - The color of the input text. _(default: var(--wje-color))_\n- **--wje-input-color-invalid** - The color of the input text when invalid. _(default: var(--wje-color-danger))_\n- **--wje-input-border-color** - The border color of the input. _(default: var(--wje-border-color))_\n- **--wje-input-border-color-focus** - The border color of the input when focused. _(default: var(--wje-color-primary))_\n- **--wje-input-border-width** - The border width of the input. _(default: 1px)_\n- **--wje-input-border-style** - The border style of the input. _(default: solid)_\n- **--wje-input-border-radius** - The border radius of the input. _(default: 4px)_\n- **--wje-input-margin-bottom** - The margin bottom of the input. _(default: .5rem)_\n- **--wje-input-line-height** - The line height of the input. _(default: 20px)_\n- **--wje-input-slot-padding-inline** - The padding inline of the input slot. _(default: .5rem)_\n\n### **CSS Parts:**\n - **native** - The native part.\n- **input** - The input part.\n- **clear** - The clear part.",
-          "doc-url": "",
-          "attributes": [{ "name": "value", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "start",
-              "description": "Slot for content at the start of the input."
-            },
-            {
-              "name": "end",
-              "description": "Slot for content at the end of the input."
-            }
-          ],
-          "events": [
-            { "name": "invalid" },
-            {
-              "name": "wje-input:input",
-              "description": "Dispatched when the input value changes."
-            },
-            {
-              "name": "wje-input:clear",
-              "description": "Dispatched when the input is cleared."
-            }
-          ],
-          "js": {
-            "properties": [{ "name": "value", "value": {} }],
-            "events": [
-              { "name": "invalid" },
-              {
-                "name": "wje-input:input",
-                "description": "Dispatched when the input value changes."
-              },
-              {
-                "name": "wje-input:clear",
-                "description": "Dispatched when the input is cleared."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-input-file",
-          "description": "This element represents a file input.\n---\n\n\n### **Events:**\n - **wje-input-file:change** - Event fired when the file input changes.\n\n### **CSS Parts:**\n - **native** - The native file input wrapper.\n- **input** - The text input.\n- **file-input** - The file input.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [
-            {
-              "name": "wje-input-file:change",
-              "description": "Event fired when the file input changes."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "value", "value": {} },
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "afterDraw", "value": {} },
-              { "name": "_value", "value": { "type": "string" } }
-            ],
-            "events": [
-              {
-                "name": "wje-input-file:change",
-                "description": "Event fired when the file input changes."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-item",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "isClickable", "value": {} },
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "beforeDraw", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "hostContext", "value": {} },
-              { "name": "labelColorStyles", "value": { "type": "object" } },
-              { "name": "itemStyles", "value": {} },
-              {
-                "name": "inheritedAriaAttributes",
-                "value": { "type": "object" }
-              },
-              { "name": "multipleInputs", "value": { "type": "boolean" } },
-              { "name": "focusable", "value": { "type": "boolean" } },
-              { "name": "button", "value": { "type": "boolean" } },
-              { "name": "detailIcon", "value": {} },
-              { "name": "disabled", "value": { "type": "boolean" } },
-              { "name": "counter", "value": { "type": "boolean" } },
-              { "name": "routerDirection", "value": { "type": "string" } },
-              { "name": "type", "value": { "type": "string" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-label",
-          "description": "This element represents a label.\n---\n\n\n### **Events:**\n - **wje-label:change** - Event fired when the label is changed.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(context: _Object_, store: _Object_, params: _Object_)** - Prepares the component before drawing.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - The color of the label. _(default: black)_\n- **--wje-label-font-size** - The font size of the label. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the label." }
-          ],
-          "events": [
-            {
-              "name": "wje-label:change",
-              "description": "Event fired when the label is changed."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Prepares the component before drawing.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": [
-              {
-                "name": "wje-label:change",
-                "description": "Event fired when the label is changed."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-main",
-          "description": "This element represents a main section.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the main section.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the main section."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-list",
-          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. _(default: 8px)_\n- **--wje-list-background** - The background of the list. _(default: var(--wje-background))_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the list." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Called after the component has been drawn.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-menu",
-          "description": "This element represents a menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Refreshes the component after drawing.\n- **beforeDisconnect()** - Cleans up the component before disconnecting.\n\n### **Slots:**\n - _default_ - The default slot for the menu.\n\n### **CSS Properties:**\n - **--wje-menu-background** - The background of the menu. _(default: var(--wje-background))_\n- **--wje-menu-border-width** - The border width of the menu. _(default: 1px)_\n- **--wje-menu-border-style** - The border style of the menu. _(default: solid)_\n- **--wje-menu-border-color** - The border color of the menu. _(default: var(--wje-border-color))_\n- **--wje-menu-border-radius** - The border radius of the menu. _(default: var(--wje-border-radius-small))_\n- **--wje-menu-padding-top** - The padding top of the menu. _(default: .5rem)_\n- **--wje-menu-padding-bottom** - The padding bottom of the menu. _(default: .5rem)_\n- **--wje-menu-padding-inline** - The padding inline of the menu. _(default: 0)_\n- **--wje-menu-margin-top** - The margin top of the menu. _(default: 0)_\n- **--wje-menu-margin-bottom** - The margin bottom of the menu. _(default: 0)_\n- **--wje-menu-margin-inline** - The margin inline of the menu. _(default: 0)_\n- **--wje-menu-collapse-width** - The width of the menu when it is collapsed. _(default: 65px)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "active", "value": { "type": "string" } },
-            { "name": "collapse", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot for the menu." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "active", "value": {} },
-              { "name": "collapse", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-masonry",
-          "description": "This element represents a masonry layout.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the element.\n- **draw(context: _CanvasRenderingContext2D_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the element.\n- **afterDraw()** - Called after the element is drawn.\n- **renderCols(colCount: _number_)** - Renders the columns.\n- **scheduleLayout(ms: _number_)** - Schedules a layout.\n\n### **Slots:**\n - _default_ - The default slot for the masonry layout.\n\n### **CSS Properties:**\n - **--wje-masonry-gap** - The gap between items in the masonry layout. _(default: 1rem)_\n- **--wje-masonry-layout-col-count** - The count column in the masonry layout. _(default: 1)_\n\n### **CSS Parts:**\n - **native** - The native part of the masonry layout.\n- **column** - The individual columns in the masonry layout.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "max-col-width", "value": { "type": "string" } },
-            { "name": "gap", "value": { "type": "string" } },
-            { "name": "cols", "value": { "type": "string" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the masonry layout."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "max-col-width", "value": {} },
-              { "name": "gap", "value": {} },
-              { "name": "cols", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-menu-button",
-          "description": "This element represents a menu button.\n---\n\n\n### **Events:**\n - **click** - Event fired when the menu button is clicked.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Refreshes the component after drawing.\nAdds a click event listener that toggles the \"open\" class on the content element.\n\n### **Slots:**\n - _default_ - The default slot for the menu button.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the menu button."
-            }
-          ],
-          "events": [
-            {
-              "name": "click",
-              "description": "Event fired when the menu button is clicked."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Refreshes the component after drawing.\nAdds a click event listener that toggles the \"open\" class on the content element.",
-                "value": {}
-              }
-            ],
-            "events": [
-              {
-                "name": "click",
-                "description": "Event fired when the menu button is clicked."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-menu-item",
-          "description": "This element represents a menu item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the MenuItem element.\n- **beforeDraw(context, store, params)** - Removes the active attribute from the menu before drawing the MenuItem.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the MenuItem element.\n- **afterDraw()** - Adds event listeners after drawing the MenuItem.\n- **collapseItem(native: _HTMLElement_): _HTMLElement_** - Creates a tooltip for the MenuItem when it is collapsed.\n- **showSubmenu()** - Shows the submenu of the MenuItem.\n- **hideSubmenu()** - Hides the submenu of the MenuItem.\n- **submenuToggle(e: _Event_)** - Toggles the active state of the submenu element.\nIf the submenu is not active, it sets the \"active\" attribute.\nIf the submenu is already active, it removes the \"active\" attribute.\n- **deactivateSubmenu()** - Deactivates the submenu by removing the \"active\" attribute.\n- **activateSubmenu()** - Activates the submenu of the menu item.\n- **beforeDisconnect()** - Clears the innerHTML of the context before disconnecting the MenuItem.\n\n### **Slots:**\n - _default_ - The default slot for the menu item.\n- **start** - The slot for the start of the menu item.\n- **end** - The slot for the end of the menu item.\n- **submenu** - The slot for the submenu of the menu item.\n\n### **CSS Properties:**\n - **--wje-menu-item-color** - The color of the menu item. _(default: var(--wje-color))_\n- **--wje-menu-item-background** - The background of the menu item. _(default: transparent)_\n- **--wje-menu-item-color-hover** - The color of the menu item when hovered. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-hover** - The background of the menu item when hovered. _(default: var(--wje-border-color))_\n- **--wje-menu-item-color-focus** - The color of the menu item when focused. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-focus** - The background of the menu item when focused. _(default: var(--wje-border-color))_\n- **--wje-menu-item-color-active** - The color of the menu item when active. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-active** - The background of the menu item when active. _(default: var(--wje-border-color))_\n- **--wje-menu-item-padding-top** - The padding top of the menu item. _(default: .5rem)_\n- **--wje-menu-item-padding-bottom** - The padding bottom of the menu item. _(default: .5rem)_\n- **--wje-menu-item-line-height** - The line height of the menu item. _(default: 1.8rem)_\n- **--wje-menu-submenu-offset** - The offset of the submenu. _(default: 0)_\n- **--wje-menu-item-icon-visibility** - The visibility of the icon. _(default: hidden)_\n- **--wje-menu-item-safe-triangle-cursor-x** - The x-coordinate of the cursor for the safe triangle. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-cursor-y** - The y-coordinate of the cursor for the safe triangle. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-start-x** - The x-coordinate of the start of the submenu for the safe triangle. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-start-y** - The y-coordinate of the start of the submenu for the safe triangle. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-end-x** - The x-coordinate of the end of the submenu for the safe triangle. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-end-y** - The y-coordinate of the end of the submenu for the safe triangle. _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu item.\n- **submenu** - The submenu part of the menu item.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the menu item."
-            },
-            {
-              "name": "start",
-              "description": "The slot for the start of the menu item."
-            },
-            {
-              "name": "end",
-              "description": "The slot for the end of the menu item."
-            },
-            {
-              "name": "submenu",
-              "description": "The slot for the submenu of the menu item."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "placement",
-                "description": "Getter for placement attribute.",
-                "value": {}
-              },
-              {
-                "name": "offset",
-                "description": "Getter for offset attribute.",
-                "value": {}
-              },
-              {
-                "name": "variant",
-                "description": "Getter for variant attribute.",
-                "value": {}
-              },
-              {
-                "name": "collapse",
-                "description": "Getter for collapse attribute.",
-                "value": {}
-              },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Getter for cssStyleSheet.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the MenuItem element.",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Removes the active attribute from the menu before drawing the MenuItem.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the MenuItem element.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Adds event listeners after drawing the MenuItem.",
-                "value": {}
-              },
-              {
-                "name": "shouldHideSubmenu",
-                "description": "Checks if the submenu should be hidden based on the event.",
-                "value": {}
-              },
-              {
-                "name": "collapseItem",
-                "description": "Creates a tooltip for the MenuItem when it is collapsed.",
-                "value": {}
-              },
-              {
-                "name": "dispatchMove",
-                "description": "Dispatches a mousemove event.",
-                "value": {}
-              },
-              {
-                "name": "dispatchReposition",
-                "description": "Dispatches a reposition event.",
-                "value": {}
-              },
-              {
-                "name": "showSubmenu",
-                "description": "Shows the submenu of the MenuItem.",
-                "value": {}
-              },
-              {
-                "name": "hideSubmenu",
-                "description": "Hides the submenu of the MenuItem.",
-                "value": {}
-              },
-              {
-                "name": "submenuToggle",
-                "description": "Toggles the active state of the submenu element.\nIf the submenu is not active, it sets the \"active\" attribute.\nIf the submenu is already active, it removes the \"active\" attribute.",
-                "value": {}
-              },
-              {
-                "name": "deactivateSubmenu",
-                "description": "Deactivates the submenu by removing the \"active\" attribute.",
-                "value": {}
-              },
-              {
-                "name": "activateSubmenu",
-                "description": "Activates the submenu of the menu item.",
-                "value": {}
-              },
-              {
-                "name": "beforeDisconnect",
-                "description": "Clears the innerHTML of the context before disconnecting the MenuItem.",
-                "value": {}
-              },
-              { "name": "getTextFromElement", "value": {} },
-              { "name": "_collapsible", "value": { "type": "boolean" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-menu-label",
-          "description": "This element represents a menu label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the menu label.\n\n### **CSS Properties:**\n - **--wje-menu-label-font-size** - The font size of the menu label. _(default: .75rem)_\n- **--wje-menu-label-weight** - The font weight of the menu label. _(default: 600)_\n- **--wje-letter-spacing** - The letter spacing of the menu label. _(default: .025rem)_\n- **--wje-menu-label-color** - The color of the menu label. _(default: var(--wje-color-contrast-6))_\n- **--wje-padding-top** - The top padding of the menu label. _(default: 0)_\n- **--wje-padding-bottom** - The bottom padding of the menu label. _(default: 0)_\n- **--wje-padding-start** - The start padding of the menu label. _(default: 1.5rem)_\n- **--wje-padding-end** - The end padding of the menu label. _(default: 1.5rem)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu label.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the menu label."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              { "name": "hasSubmenu", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-option",
-          "description": "This element represents an option.\n---\n\n\n### **Events:**\n - **wje:option-change** - Event fired when the option is clicked.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n\n### **Slots:**\n - **start** - The slot for the start of the option.\n- _default_ - The default slot for the option.\n- **end** - The slot for the end of the option.\n\n### **CSS Parts:**\n - **native** - The native part of the option.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "start",
-              "description": "The slot for the start of the option."
-            },
-            { "name": "", "description": "The default slot for the option." },
-            {
-              "name": "end",
-              "description": "The slot for the end of the option."
-            }
-          ],
-          "events": [
-            {
-              "name": "wje:option-change",
-              "description": "Event fired when the option is clicked."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "depandencies",
-                "description": "Dependencies of the Option component.",
-                "value": { "type": "object" }
-              },
-              {
-                "name": "selected",
-                "description": "Sets the selected attribute of the option.",
-                "value": {}
-              },
-              {
-                "name": "value",
-                "description": "Sets the value attribute of the option.",
-                "value": {}
-              },
-              {
-                "name": "text",
-                "description": "Sets the text content of the option.",
-                "value": {}
-              },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Adds event listeners after the component is drawn.",
-                "value": {}
-              }
-            ],
-            "events": [
-              {
-                "name": "wje:option-change",
-                "description": "Event fired when the option is clicked."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-options",
-          "description": "This element represents a set of options.\n---\n\n\n### **Events:**\n - **wje-options:load** - Event fired when the options are loaded.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Prepares the component before drawing.\nFetches the pages and creates the options elements.\n- **getPages(page: _number_): _Promise<Object>_** - Fetches the pages from the provided URL.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [
-            {
-              "name": "wje-options:load",
-              "description": "Event fired when the options are loaded."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "depandencies", "value": { "type": "object" } },
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Prepares the component before drawing.\nFetches the pages and creates the options elements.",
-                "value": {}
-              },
-              {
-                "name": "getPages",
-                "description": "Fetches the pages from the provided URL.",
-                "value": {}
-              }
-            ],
-            "events": [
-              {
-                "name": "wje-options:load",
-                "description": "Event fired when the options are loaded."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-popup",
-          "description": "This element represents a popup.\n---\n\n\n### **Events:**\n - **wje-popup:reposition** - Event fired when the popup is repositioned.\n- **wje-popup:show** - Event fired when the popup is shown.\n- **wje-popup:hide** - Event fired when the popup is hidden.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **setAnchor()** - Sets the anchor for the popup.\nAdds a click event listener to the anchor element.\n- **showHide()** - Toggles the active attribute of the popup.\n- **reposition()** - Repositions the popup.\nUses the floating-ui library to compute the position.\n- **show()** - Shows the popup.\nAdds the popup-active class to the native element.\nSets up auto update for repositioning.\n- **hide()** - Hides the popup.\nRemoves the popup-active class from the native element.\nCleans up the auto update for repositioning.\n- **onHide()** - Removes the active attribute when the popup is hidden.\n\n### **Slots:**\n - **anchor** - The slot for the anchor of the popup.\n- **arrow** - The slot for the arrow of the popup.\n- _default_ - The default slot for the popup.\n\n### **CSS Parts:**\n - **native** - The native part of the popup.",
-          "doc-url": "",
-          "attributes": [{ "name": "active", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "anchor",
-              "description": "The slot for the anchor of the popup."
-            },
-            {
-              "name": "arrow",
-              "description": "The slot for the arrow of the popup."
-            },
-            { "name": "", "description": "The default slot for the popup." }
-          ],
-          "events": [
-            {
-              "name": "wje-popup:reposition",
-              "description": "Event fired when the popup is repositioned."
-            },
-            {
-              "name": "wje-popup:show",
-              "description": "Event fired when the popup is shown."
-            },
-            {
-              "name": "wje-popup:hide",
-              "description": "Event fired when the popup is hidden."
-            }
-          ],
-          "js": {
-            "properties": [{ "name": "active", "value": {} }],
-            "events": [
-              {
-                "name": "wje-popup:reposition",
-                "description": "Event fired when the popup is repositioned."
-              },
-              {
-                "name": "wje-popup:show",
-                "description": "Event fired when the popup is shown."
-              },
-              {
-                "name": "wje-popup:hide",
-                "description": "Event fired when the popup is hidden."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-progress-bar",
-          "description": "This element represents a progress bar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw(context, store, params)** - Adds event listeners after the component is drawn.\n- **getCircleDasharray(radius: _number_): _number_** - Returns the dasharray for a circle with the given radius.\n- **getCircleDashoffset(progress: _number_, radius: _number_): _number_** - Returns the dashoffset for a circle with the given progress and radius.\n\n### **Slots:**\n - _default_ - The default slot for the progress bar.\n- **start** - The start slot of the progress bar.\n- **end** - The end slot of the progress bar.\n\n### **CSS Properties:**\n - **[--wje-progress-bar-color=var(--wje-color-contrast-6)]-** - The color of the progress bar. _(default: undefined)_\n- **--wje-progress-bar-text-size** - The size of the text in the progress bar. _(default: .75rem)_\n- **--wje-progress-bar-text-color** - The color of the text in the progress bar. _(default: var(--wje-color))_",
-          "doc-url": "",
-          "attributes": [{ "name": "progress", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the progress bar."
-            },
-            {
-              "name": "start",
-              "description": "The start slot of the progress bar."
-            },
-            {
-              "name": "end",
-              "description": "The end slot of the progress bar."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "progress", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-panel",
-          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.",
-                "value": {}
-              },
-              {
-                "name": "getBreadcrumbs",
-                "description": "Returns all the breadcrumb elements in the panel.",
-                "value": {}
-              },
-              { "name": "last", "value": { "type": "boolean" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-rate",
-          "description": "This element represents a rating component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **createIcons(i: _number_): _Element_** - Creates the icons for the rating component.\n- **changeRate()** - Changes the rate of the rating component.\n- **getIcons(index: _number_): _Element_** - Returns the icons for the rating component.\n- **getValueFromXPosition(coordinate: _number_): _number_** - Returns the value from the x position.\n- **roundToPrecision(numberToRound: _number_, precision: _number_): _number_** - Rounds a number to the given precision.\n\n### **CSS Properties:**\n - **--wje-rate-gap** - The gap of the rating component. _(default: .25rem;)_\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.",
-          "doc-url": "",
-          "attributes": [{ "name": "is-hover", "value": { "type": "string" } }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "is-hover", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-radio",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [{ "name": "checked", "value": { "type": "string" } }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "checked", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-radio-group",
-          "description": "This element represents a group of radio buttons.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the selection of radio buttons.\n- **getRadioByValue(value: _string_): _Radio_** - Returns the radio button with the given value.\n- **removeCheck()** - Removes the check from all radio buttons.\n- **setRadioToChekced(radio: _Radio_)** - Sets the given radio button to checked.\n- **getAllElements(): _Array<Element>_** - Returns all the elements in the radio group.\n\n### **Slots:**\n - _default_ - The default slot for the radio group.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the radio group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Adds event listeners after the component is drawn.\nHandles the selection of radio buttons.",
-                "value": {}
-              },
-              {
-                "name": "getRadioByValue",
-                "description": "Returns the radio button with the given value.",
-                "value": {}
-              },
-              {
-                "name": "removeCheck",
-                "description": "Removes the check from all radio buttons.",
-                "value": {}
-              },
-              {
-                "name": "setRadioToChekced",
-                "description": "Sets the given radio button to checked.",
-                "value": {}
-              },
-              {
-                "name": "getAllElements",
-                "description": "Returns all the elements in the radio group.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-relative-time",
-          "description": "This element represents a relative time component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **getRelativeTimeString(date: _string_, lang: _string_): _string_** - Returns the relative time string for the given date.\n- **isISODate(str: _string_): _boolean_** - Checks if the given string is an ISO date.\n\n### **CSS Parts:**\n - **native** - The native part of the relative time component.",
-          "doc-url": "",
-          "attributes": [{ "value": { "type": "string" } }],
-          "events": [],
-          "js": { "properties": [{ "name": "", "value": {} }], "events": [] }
-        },
-        {
-          "name": "wje-qr-code",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "background", "value": { "type": "string" } },
-            { "name": "backgroundAlpha", "value": { "type": "string" } },
-            { "name": "foreground", "value": { "type": "string" } },
-            { "name": "foregroundAlpha", "value": { "type": "string" } },
-            { "name": "level", "value": { "type": "string" } },
-            { "name": "padding", "value": { "type": "string" } },
-            { "name": "size", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "value", "value": {} },
-              { "name": "background", "value": {} },
-              { "name": "backgroundAlpha", "value": {} },
-              { "name": "foreground", "value": {} },
-              { "name": "foregroundAlpha", "value": {} },
-              { "name": "level", "value": {} },
-              { "name": "padding", "value": {} },
-              { "name": "size", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-reorder-dropzone",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-reorder",
-          "description": "\n---\n\n\n### **Events:**\n - **wje-reorder:change** - undefined\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [{ "name": "wje-reorder:change" }],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              { "name": "draw", "value": {} },
-              { "name": "afterDraw", "value": {} },
-              { "name": "attachEventListeners", "value": {} },
-              { "name": "onMouseDown", "value": {} },
-              { "name": "onTouchStart", "value": {} },
-              { "name": "startDragging", "value": {} },
-              { "name": "onMouseMove", "value": {} },
-              { "name": "onTouchMove", "value": {} },
-              { "name": "moveElement", "value": {} },
-              { "name": "onMouseUp", "value": {} },
-              { "name": "onTouchEnd", "value": {} },
-              { "name": "stopDragging", "value": {} },
-              { "name": "onDragStart", "value": {} },
-              { "name": "createClone", "value": {} },
-              { "name": "isMovingDown", "value": {} },
-              { "name": "dispatchChange", "value": {} },
-              { "name": "dragEl", "value": { "type": "null" } },
-              { "name": "items", "value": { "type": "array" } },
-              { "name": "originalIndex", "value": { "type": "null" } },
-              { "name": "isDragging", "value": { "type": "boolean" } },
-              { "name": "offsetX", "value": { "type": "number" } },
-              { "name": "offsetY", "value": { "type": "number" } },
-              { "name": "cloneEl", "value": { "type": "null" } }
-            ],
-            "events": [{ "name": "wje-reorder:change" }]
-          }
-        },
-        {
-          "name": "wje-route",
-          "description": "This element represents a route in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-reorder-item",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-router-link",
-          "description": "This element represents a router link in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the router link.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the router link."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "beforeDisconnect",
-                "description": "Cleans up before the component is disconnected.",
-                "value": {}
-              },
-              { "name": "unbindRouterLinks", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-router-outlet",
-          "description": "This element represents a route in a routing system.\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-router",
-          "description": "This element represents a router in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **afterDraw()** - Sets up the router after the component is drawn.\n- **parseElement(element: _Element_): _Object_** - Parses an element and returns an object representation.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Sets up the router after the component is drawn.",
-                "value": {}
-              },
-              {
-                "name": "parseElement",
-                "description": "Parses an element and returns an object representation.",
-                "value": {}
-              },
-              {
-                "name": "setBreadcrumb",
-                "description": "Sets the breadcrumb for the transition.",
-                "value": {}
-              },
-              {
-                "name": "resetScrollPosition",
-                "description": "Resets the scroll position.",
-                "value": {}
-              },
-              {
-                "name": "beforeDisconnect",
-                "description": "Cleans up before the component is disconnected.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-slider",
-          "description": "This element represents a slider input.\n---\n\n\n### **Events:**\n - **wje:slider-init** - Dispatched when the slider is initialized.\n- **wje:slider-move** - Dispatched when the slider value is changed.\n- **wje:slider-change** - Dispatched when the slider value is changed and the change is committed.\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **getPercentage(value: _number_, min: _number_, max: _number_): _number_** - Returns the percentage of the slider value.\n\n### **Slots:**\n - **label** - Slot for the label of the slider.\n- **start** - Slot for the start value of the slider.\n- **end** - Slot for the end value of the slider.\n\n### **CSS Properties:**\n - **--wje-slider-thumb-color** - The color of the slider thumb. _(default: #000000)_\n- **--wje-slider-thumb-shadow** - The shadow of the slider thumb. _(default: none)_\n- **--wje-slider-thumb-shadow-active** - The shadow of the active slider thumb. _(default: none)_\n- **--wje-slider-track-color** - The color of the slider track. _(default: #000000)_\n- **--wje-slider-track-height** - The height of the slider track. _(default: .25rem)_\n\n### **CSS Parts:**\n - **native** - The native slider wrapper.\n- **slider** - The slider input.",
-          "doc-url": "",
-          "attributes": [{ "name": "max", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "label",
-              "description": "Slot for the label of the slider."
-            },
-            {
-              "name": "start",
-              "description": "Slot for the start value of the slider."
-            },
-            {
-              "name": "end",
-              "description": "Slot for the end value of the slider."
-            }
-          ],
-          "events": [
-            {
-              "name": "wje:slider-init",
-              "description": "Dispatched when the slider is initialized."
-            },
-            {
-              "name": "wje:slider-move",
-              "description": "Dispatched when the slider value is changed."
-            },
-            {
-              "name": "wje:slider-change",
-              "description": "Dispatched when the slider value is changed and the change is committed."
-            }
-          ],
-          "js": {
-            "properties": [{ "name": "max", "value": {} }],
-            "events": [
-              {
-                "name": "wje:slider-init",
-                "description": "Dispatched when the slider is initialized."
-              },
-              {
-                "name": "wje:slider-move",
-                "description": "Dispatched when the slider value is changed."
-              },
-              {
-                "name": "wje:slider-change",
-                "description": "Dispatched when the slider value is changed and the change is committed."
-              }
-            ]
-          }
-        },
-        {
-          "name": "wje-reorder-handle",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "dropzone", "value": { "type": "string" } },
-            { "name": "parent", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "dropzone", "value": {} },
-              { "name": "parent", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-select",
-          "description": "This element represents a select input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw(context: _Object_, store: _Object_, params: _Object_)** - Sets up the event listeners after the component is drawn.\n- **getAllOptions(): _NodeList_** - Returns all the options as HTML.\n- **getSelectedOptions(): _NodeList_** - Returns the selected options as HTML.\n- **getSelected(option: _Element_): _Array_** - Returns the selected options.\n- **selectionChanged(option: _Element_, length: _number_)** - Handles the selection change.\n- **selections(option: _Element_)** - Handles the selections.\n- **counter()** - Handles the counter.\n- **getChip(option: _Element_): _Element_** - Returns a chip element.\n\n### **Slots:**\n - _default_ - The default slot for the select.\n- **anchor** - The slot for the anchor.\n- **arrow** - The slot for the arrow.\n\n### **CSS Properties:**\n - **--wje-select-border-width** - The border width of the select component. _(default: 1px;)_\n- **--wje-select-border-style** - The border style of the select component. _(default: solid;)_\n- **--wje-select-border-color** - The border color of the select component. _(default: var(--wje-border-color);)_\n- **--wje-select-options-border-width** - The border width of the select options. _(default: 1px;)_\n- **--wje-select-options-border-style** - The border style of the select options. _(default: var(--wje-border-style);)_\n- **--wje-select-options-border-color** - The border color of the select options. _(default: var(--wje-border-color);)_\n- **--wje-select-background** - The background of the select component. _(default: var(--wje-background);)_\n- **--wje-select-line-height** - The line height of the select component. _(default: 20px;)_\n- **--wje-select-color** - The color of the select component. _(default: var(--wje-color);)_\n- **--wje-select-border-radius** - The border radius of the select component. _(default: var(--wje-border-radius-medium);)_\n\n### **CSS Parts:**\n - **native** - The native select wrapper.\n- **input** - The input field.\n- **clear** - The clear button.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "active", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot for the select." },
-            { "name": "anchor", "description": "The slot for the anchor." },
-            { "name": "arrow", "description": "The slot for the arrow." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "active", "value": {} },
-              { "name": "value", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-split-view",
-          "description": "This element represents a split view.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **detectSize()** - Detects the size of the split view.\n- **pixelsToPercentage(value: _number_): _number_** - Converts pixels to a percentage.\n\n### **Slots:**\n - **start** - Slot for the start view.\n- **end** - Slot for the end view.\n- **divider** - Slot for the divider.\n\n### **CSS Properties:**\n - **--wje-split-view-divider-area** - The area of the divider. _(default: 12px)_\n- **--wje-split-view-divider-width** - The width of the divider. _(default: 4px)_\n- **--wje-split-view-min** - The minimum size of the split view. _(default: 0%)_\n- **--wje-split-view-max** - The maximum size of the split view. _(default: 100%)_\n- **--wje-split-view-calc-a** - The calculated size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - The calculated size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - The clamp for the first view. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **-wje-split-view-clamp-b** - The clamp for the second view. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - The background of the divider. _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - The size of the divider. _(default: 4px)_\n\n### **CSS Parts:**\n - **native-split-view** - The native split view wrapper.\n- **wje-divider** - The divider of the split view.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "start", "description": "Slot for the start view." },
-            { "name": "end", "description": "Slot for the end view." },
-            { "name": "divider", "description": "Slot for the divider." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Sets up the event listeners after the component is drawn.",
-                "value": {}
-              },
-              {
-                "name": "handleDrag",
-                "description": "Handles the drag event.",
-                "value": {}
-              },
-              {
-                "name": "detectSize",
-                "description": "Detects the size of the split view.",
-                "value": {}
-              },
-              {
-                "name": "pixelsToPercentage",
-                "description": "Converts pixels to a percentage.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-status",
-          "description": "This class represents an Status element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n\n### **Slots:**\n - _default_ - The status main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The status main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-step",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-stepper",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "navigate", "value": {} },
-              { "name": "gotoStep", "value": {} },
-              { "name": "updateBadges", "value": {} },
-              { "name": "currentStep", "value": { "type": "number" } },
-              { "name": "completedSteps", "value": { "type": "array" } }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-row",
-          "description": "This element represents a row in a layout system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(context: _Object_, store: _Object_, params: _Object_)** - Executes before the component is drawn.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the row.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the row." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Executes before the component is drawn.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-tab",
-          "description": "This element represents a tab.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n\n### **CSS Properties:**\n - **--wje-tab-text-transfrom** - The background of the tab. _(default: uppercase)_\n- **--wje-tab-font-weight** - The color of the tab. _(default: 500)_\n- **--wje-tab-letter-spacing** - The background of the tab. _(default: 0.06em)_\n- **--wje-tab-padding-inline** - The color of the tab. _(default: 1rem)_\n- **--wje-tab-padding-top** - The background of the tab. _(default: .75rem)_\n- **--wje-tab-padding-bottom** - The color of the tab. _(default: .75rem)_\n- **--wje-tab-color-active** - The background of the tab. _(default: var(--wje-color-primary-11))_\n- **--wje-tab-color-hover** - The color of the tab. _(default: var(--wje-color-primary-1))_",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Returns the class name of the tab.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Sets up the event listeners after the component is drawn.",
-                "value": {}
-              },
-              {
-                "name": "last",
-                "description": "Indicates whether this is the last tab.",
-                "value": { "type": "boolean" }
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-textarea",
-          "description": "This element represents a textarea input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n\n### **CSS Properties:**\n - **--wje-textarea-font-family** - The font family of the textarea. _(default: var(--wje-font-family))_\n- **--wje-textarea-background-color** - The background color of the textarea. _(default: var(--wje-background))_\n- **--wje-textarea-color** - The color of the textarea. _(default: var(--wje-color))_\n- **--wje-textarea-color-invalid** - The color of the textarea when invalid. _(default: var(--wje-color-danger))_\n- **--wje-textarea-border-width** - The border width of the textarea. _(default: 1px)_\n- **--wje-textarea-border-style** - The border style of the textarea. _(default: solid)_\n- **--wje-textarea-border-color** - The border color of the textarea. _(default: var(--wje-border-color))_\n- **--wje-textarea-border-color-focus** - The border color of the textarea when focused. _(default: var(--wje-color-primary))_\n- **--wje-textarea-border-radius** - The border radius of the textarea. _(default: 4px)_\n- **--wje-textarea-margin-bottom** - The margin bottom of the textarea. _(default: .5rem)_\n- **--wje-textarea-line-height** - The line height of the textarea. _(default: 20px)_\n- **--wje-textarea-padding** - The padding of the textarea. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The native textarea wrapper.\n- **input** - The textarea input.",
-          "doc-url": "",
-          "attributes": [{ "name": "checked", "value": { "type": "string" } }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "checked", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-tab-panel",
-          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the tab panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Returns the class name of the tab panel.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-tab-group",
-          "description": "This element represents a group of tabs.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **removeActiveTab()** - Removes the active attribute from all tabs and panels.\n- **setActiveTab(tab: _string_)** - Sets the active tab and panel.\n- **getActiveTab(): _Element|null_** - Returns the currently active tab.\n- **getTabAll(): _Array<Element>_** - Returns all tabs.\n- **getPanelAll(): _Array<Element>_** - Returns all panels.\n\n### **Slots:**\n - _default_ - The default slot for the tab group.\n- **nav** - Slot for the navigation of the tab group.\n\n### **CSS Properties:**\n - **--wje-tab-group-padding** - The padding of the tab group. _(default: 1rem)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the tab group."
-            },
-            {
-              "name": "nav",
-              "description": "Slot for the navigation of the tab group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              },
-              {
-                "name": "afterDraw",
-                "description": "Sets up the event listeners after the component is drawn.",
-                "value": {}
-              },
-              {
-                "name": "removeActiveTab",
-                "description": "Removes the active attribute from all tabs and panels.",
-                "value": {}
-              },
-              {
-                "name": "setActiveTab",
-                "description": "Sets the active tab and panel.",
-                "value": {}
-              },
-              {
-                "name": "getActiveTab",
-                "description": "Returns the currently active tab.",
-                "value": {}
-              },
-              {
-                "name": "getTabAll",
-                "description": "Returns all tabs.",
-                "value": {}
-              },
-              {
-                "name": "getPanelAll",
-                "description": "Returns all panels.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-thumbnail",
-          "description": "Thumbnail class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **beforeDraw(context: _Object_, store: _Object_, params: _Object_)** - Before draw method\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method\n\n### **Slots:**\n - **thumbnail-slot** - The slot for the thumbnail content.\n\n### **CSS Properties:**\n - **--wje-thumbnail-width** - The width of the thumbnail. _(default: 48px)_\n- **--wje-thumbnail-height** - The height of the thumbnail. _(default: 48px)_\n- **--wje-thumbnail-border-radius** - The border radius of the thumbnail. _(default: var(--wje-border-radius-medium))_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "thumbnail-slot",
-              "description": "The slot for the thumbnail content."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              {
-                "name": "beforeDraw",
-                "description": "Before draw method",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-timeline",
-          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "Slot for the timeline items." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Returns the class name of the tab.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-timeline-item",
-          "description": "This element represents a timeline item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _Object_, store: _Object_, params: _Object_): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - Slot for the content of the timeline item.\n- **status** - Slot for the status of the timeline item.\n\n### **CSS Parts:**\n - **native** - The native part of the timeline item.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "Slot for the content of the timeline item."
-            },
-            {
-              "name": "status",
-              "description": "Slot for the status of the timeline item."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Returns the class name of the tab.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Returns the CSS styles for the component.",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Sets up the attributes for the component.",
-                "value": {}
-              },
-              {
-                "name": "draw",
-                "description": "Draws the component.",
-                "value": {}
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-toast",
-          "description": "This element represents a toast notification.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes\n- **draw(context: _Object_, store: _Object_, params: _Object_): _Object_** - Draw method",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "cssStyleSheet",
-                "description": "Get CSS stylesheet",
-                "value": {}
-              },
-              {
-                "name": "setupAttributes",
-                "description": "Setup attributes",
-                "value": {}
-              },
-              { "name": "draw", "description": "Draw method", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-toolbar-action",
-          "description": "This element represents a toolbar action.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the toolbar action.\n\n### **CSS Parts:**\n - **native** - The native toolbar action wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the toolbar action."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} },
-              { "name": "getActions", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-toolbar",
-          "description": "This element represents a toolbar.\n---\n\n\n### **Slots:**\n - **start** - The start slot for the toolbar.\n- **end** - The end slot for the toolbar.\n\n### **CSS Properties:**\n - **--wje-toolbar-background** - The background of the toolbar. _(default: var(--wje-background))_\n- **--wje-toolbar-height** - The height of the toolbar. _(default: auto)_\n- **--wje-toolbar-min-height** - The min height of the toolbar. _(default: 70px)_\n- **--wje-toolbar-padding-top** - The padding top of the toolbar. _(default: 1rem)_\n- **--wje-toolbar-padding-bottom** - The padding bottom of the toolbar. _(default: 1rem)_\n- **--wje-toolbar-padding-inline** - The padding inline of the toolbar. _(default: 1.5rem)_\n- **--wje-toolbar-border-color** - The border color of the toolbar. _(default: var(--wje-border-color))_\n- **--wje-toolbar-top** - The top of the toolbar. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native toolbar wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "start",
-              "description": "The start slot for the toolbar."
-            },
-            { "name": "end", "description": "The end slot for the toolbar." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-toggle",
-          "description": "This element represents a toggle input.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the toggle.\n\n### **CSS Properties:**\n - **--wje-toggle-color-base** - The base color of the toggle. _(default: var(--wje-color-contrast-3))_\n- **--wje-toggle-width** - The width of the toggle. _(default: 30px)_\n- **--wje-toggle-height** - The height of the toggle. _(default: 18px)_\n- **--wje-toggle-border-radius** - The border radius of the toggle. _(default: 50px)_\n- **--wje-toggle-handle-width** - The width of the toggle handle. _(default: 14px)_\n- **--wje-toggle-handle-height** - The height of the toggle handle. _(default: 14px)_\n- **--wje-toggle-handle-border-radius** - The border radius of the toggle handle. _(default: 9px)_\n- **--wje-toggle-handle-color** - The color of the toggle handle. _(default: #fff)_\n- **--wje-toggle-handle-shadow** - The shadow of the toggle handle. _(default: 1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2))_\n- **--wje-toggle-handle-shadow-checked** - The shadow of the toggle handle when checked. _(default: 1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3))_\n- **--wje-toggle-duration** - The duration of the toggle animation. _(default: 250ms)_\n- **--wje-toggle-curve** - The curve of the toggle animation. _(default: cubic-bezier(.4,0,.2,1))_\n\n### **CSS Parts:**\n - **native** - The native toggle wrapper.\n- **input** - The toggle input.\n- **toggle** - The toggle part.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "checked", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot for the toggle." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "checked", "value": {} },
-              { "name": "disabled", "value": {} }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-tooltip",
-          "description": "This element represents a tooltip.\n---\n\n\n### **Slots:**\n - **arrow** - The arrow slot for the tooltip.\n- **anchor** - The anchor slot for the tooltip.\n\n### **CSS Properties:**\n - **undefined** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The native tooltip wrapper.",
-          "doc-url": "",
-          "attributes": [{ "name": "active", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "arrow",
-              "description": "The arrow slot for the tooltip."
-            },
-            {
-              "name": "anchor",
-              "description": "The anchor slot for the tooltip."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "active", "value": {} }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-visually-hidden",
-          "description": "This element represents a visually hidden element.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the visually hidden element."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "value": { "type": "string" } },
-              { "name": "cssStyleSheet", "value": {} },
-              { "name": "setupAttributes", "value": {} },
-              { "name": "draw", "value": {} }
-            ],
-            "events": []
-          }
-        }
-      ]
-    }
-  }
-}