wj-elements 0.7.4 → 0.7.6

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "wj-elements",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -305,6 +305,30 @@
             "events": []
           }
         },
+        {
+          "name": "wje-badge",
+          "description": "This class represents a Badge element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes(): _void_** - Configures initial attributes for the Badge element.\n- **draw(): _DocumentFragment_** - Creates the DOM structure for the Badge element.\n\n### **Slots:**\n - _default_ - The badge's main content.\n\n### **CSS Properties:**\n - **--wje-badge-border-radius** - Border radius of the badge element. _(default: var(--wje-border-radius-pill))_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The badge's main content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Badge element.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-breadcrumb",
           "description": "This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Breadcrumb element.\n- **draw(): _object_** - Draw method for the Breadcrumb element.\n- **shouldRenderSeparator(): _boolean_** - Returns whether the separator should be visible after this breadcrumb.\n- **hasVisibleBreadcrumbAfter(): _boolean_** - Returns whether any later breadcrumb is still visible in the rendered trail.\n- **isBreadcrumbVisibleInTrail(breadcrumb: _Element_): _boolean_** - Returns whether a breadcrumb is visible in the rendered trail.\n- **syncNativeAttributes()** - Synchronizes host attributes to the internal anchor.\n- **afterDraw()** - Sets up native anchor listeners after render.\n- **beforeDisconnect()** - Removes native anchor listeners before redraw/disconnect.\n- **handleDisabledNativeClick(e: _MouseEvent_)** - Prevents disabled breadcrumbs from navigating or bubbling click handlers.\n- **drawCollapsedIndicator(): _any_** - Renders the collapsed indicator based on the current collapsed variant.\nIf the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\nMobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.\n- **isMobileCollapsedVariant(): _boolean_** - Returns whether the current collapsed variant is a compact mobile layout.\n- **collapseDropdown(): _HTMLElement_** - Creates and returns a dropdown UI component for collapsed breadcrumbs.\nThis method generates a dropdown element with a button trigger and a menu populated with items corresponding\nto the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\nevents are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\nbreadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n- **createBreadcrumbDropdown({ breadcrumbs, trigger, placement = 'bottom' }, options: _@param {Array<HTMLElement>} options.breadcrumbs Breadcrumb elements to mirror in the menu.\n     * @param {HTMLElement} options.trigger Element assigned to the dropdown trigger slot.\n     * @param {string} options.placement Floating UI placement token for the popup.\n     * _): _HTMLElement_** - Creates a dropdown containing breadcrumb menu items.\n- **createCollapsedBreadcrumbMenu(breadcrumbs: _Array<HTMLElement>_): _HTMLElement_** - Creates the menu used by collapsed dropdown variants.\n- **getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator: _boolean_): _Array<HTMLElement>_** - Returns breadcrumbs that should be exposed in a collapsed menu.\n- **collapseMobileVariant(variant: _string_): _HTMLElement_** - Renders one of the compact mobile breakpoint variants.\n- **collapseMobileText(): _HTMLElement_** - Renders only the current breadcrumb title.\n- **collapseMobileBack(): _HTMLElement_** - Renders a parent back action above the current title.\n- **collapseMobileParentTitle(): _HTMLElement_** - Renders parent context above the current title.\n- **collapseMobileMenuTitle(): _HTMLElement_** - Renders a menu trigger with the current title.\n- **collapseMobileSheet(): _HTMLElement_** - Renders the future sheet variant using the dropdown fallback for now.\n- **createMobileDropdown(trigger: _HTMLElement_): _HTMLElement_** - Creates a dropdown fallback for mobile menu-like variants.\n- **createMobileDropdownTrigger({ icon, iconPosition = 'start', label, ariaLabel, className }, options: _@param {string} options.icon Icon shown next to the title.\n     * @param {string} options.iconPosition Whether the icon renders at the start or end.\n     * @param {string} options.label Current breadcrumb label shown beside the icon.\n     * @param {string} options.ariaLabel Accessible name for the dropdown trigger.\n     * @param {string} options.className Variant-specific class applied to the trigger.\n     * _): _HTMLElement_** - Creates a compact mobile dropdown trigger.\n- **createMobileContainer(className: _string_): _HTMLElement_** - Creates a wrapper for compact mobile breadcrumb variants.\n- **createMobileBreadcrumbControl(breadcrumb: _HTMLElement|null_, className: _string_, { actionable = false, ariaCurrent = false, ariaLabel, icon }, options: _@param {boolean} options.actionable Whether clicks should forward to the source breadcrumb.\n     * @param {boolean} options.ariaCurrent Whether the control marks the current page.\n     * @param {string} options.ariaLabel Accessible name for action controls.\n     * @param {string} options.icon Optional icon shown before the label.\n     * _): _HTMLElement_** - Creates a text or button control for a breadcrumb.\n- **getTrailBreadcrumbs(): _Array<HTMLElement>_** - Returns the full trail of sibling breadcrumbs.\n- **getCurrentBreadcrumb(): _HTMLElement|null_** - Returns the current breadcrumb item.\n- **getParentBreadcrumb(): _HTMLElement|null_** - Returns the parent breadcrumb item.\n- **isBreadcrumbActionable(breadcrumb: _HTMLElement|null_): _boolean_** - Returns whether a breadcrumb has a known action to forward.\n- **forwardBreadcrumbClick(breadcrumb: _HTMLElement|null_)** - Forwards a compact control or menu item click to the original breadcrumb.\n- **createCollapsedDropdownTrigger(isBreakpointMenuIndicator: _boolean_): _HTMLElement_** - Creates the dropdown trigger for collapsed breadcrumbs.\n- **getCollapsedDropdownIcon(isBreakpointMenuIndicator: _boolean_): _string_** - Resolves the icon used by the default dropdown trigger.\n- **populateCollapsedMenuItem(menuItem: _HTMLElement_, breadcrumb: _HTMLElement_)** - Copies breadcrumb content into a collapsed menu item.\n- **getBreadcrumbLabel(breadcrumb: _HTMLElement|null_): _string_** - Resolves a readable label for a breadcrumb item.\n- **getCollapsedMenuItemLabel(breadcrumb: _HTMLElement_): _string_** - Resolves a readable label for icon-only collapsed menu items.\n- **humanizeCollapsedMenuItemLabel(value: _string_): _string_** - Turns a URL segment into a readable menu label.\n- **isBreakpointMenuIndicator(): _boolean_** - Returns whether this collapsed indicator represents the full breakpoint menu.\n- **collapseButton(): _HTMLButtonElement_** - Creates a button element that expands hidden breadcrumbs when clicked.\nThe button is set with appropriate attributes and event listeners to handle\nthe expanding of hidden breadcrumb elements. Clicking the button will remove\nthe button itself, reveal hidden breadcrumbs, and stop the current event\npropagation.\n- **getBreadcrumbs(): _Element_** - Retrieves the breadcrumb trail for the current element by returning its parent element.\n\n### **Slots:**\n - _default_ - The main content of the breadcrumb.\n- **start** - Slot for content at the start of the breadcrumb.\n- **end** - Slot for content at the end of the breadcrumb.\n- **separator** - Slot for a custom separator between breadcrumb items.\n\n### **CSS Properties:**\n - **--wje-breadcrumb-a** - The color of the breadcrumb text. _(default: var(--wje-color-contrast-8))_\n- **--wje-breadcrumb-a-hover** - The color of the breadcrumb separator line. _(default: var(--wje-color-contrast-6))_\n- **--wje-breadcrumb-line-height** - Controls the vertical rhythm of breadcrumb text. _(default: 1.5)_\n- **--wje-breadcrumb-native-line-height** - Controls the line height of the native breadcrumb wrapper. _(default: var(--wje-breadcrumb-line-height))_\n- **--wje-breadcrumb-native-margin** - Sets outer spacing around the native breadcrumb wrapper. _(default: 0)_\n- **--wje-breadcrumb-native-padding** - Sets inner spacing inside the native breadcrumb wrapper. _(default: 0.25rem 0.75rem)_\n- **--wje-breadcrumb-margin** - Backwards-compatible alias for native breadcrumb margin. _(default: var(--wje-breadcrumb-native-margin))_\n- **--wje-breadcrumb-padding** - Backwards-compatible alias for native breadcrumb padding. _(default: var(--wje-breadcrumb-native-padding))_\n\n### **CSS Parts:**\n - **native** - The native wrapper of the breadcrumb component.\n- **separator** - The separator between breadcrumb items.",
@@ -491,33 +515,9 @@
             "events": []
           }
         },
-        {
-          "name": "wje-badge",
-          "description": "This class represents a Badge element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes(): _void_** - Configures initial attributes for the Badge element.\n- **draw(): _DocumentFragment_** - Creates the DOM structure for the Badge element.\n\n### **Slots:**\n - _default_ - The badge's main content.\n\n### **CSS Properties:**\n - **--wje-badge-border-radius** - Border radius of the badge element. _(default: var(--wje-border-radius-pill))_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The badge's main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Badge element.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-button",
-          "description": "This class represents Button element, extending the WJElement class.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the Button element.\n- **afterDraw()** - After draw method for the Button element.\n- **beforeDisconnect()** - Before disconnect method for the Button element.\n- **syncToggleState()** - Keeps toggle slot visibility aligned with the current value.\n- **syncAria()** - Syncs ARIA attributes on the host element.\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.",
+          "description": "This class represents Button element, extending the WJElement class.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the Button element.\n- **afterDraw()** - After draw method for the Button element.\n- **beforeDisconnect()** - Before disconnect method for the Button element.\n- **syncToggleState()** - Keeps toggle slot visibility aligned with the current value.\n- **syncAria()** - Syncs accessibility attributes on the internal native control.\n\n### **Slots:**\n - _default_ - The button main content.\n- **icon** - The button icon.\n- **icon-only** - The icon used when the button has no visible text.\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" } },
@@ -525,11 +525,21 @@
             { "name": "value", "value": { "type": "string" } },
             { "name": "active", "value": { "type": "string" } },
             { "name": "href", "value": { "type": "string" } },
-            { "name": "toggle", "value": { "type": "string" } }
+            { "name": "toggle", "value": { "type": "string" } },
+            {
+              "name": "label",
+              "description": "Accessible name forwarded to the internal native button or link.",
+              "value": { "type": "string" }
+            },
+            { "name": "aria-label", "value": { "type": "string" } }
           ],
           "slots": [
             { "name": "", "description": "The button main content." },
             { "name": "icon", "description": "The button icon." },
+            {
+              "name": "icon-only",
+              "description": "The icon used when the button has no visible text."
+            },
             { "name": "caret", "description": "The button caret." },
             { "name": "start", "description": "The button start slot." },
             { "name": "end", "description": "The button end slot." },
@@ -559,6 +569,10 @@
                 "name": "tooltip",
                 "description": "Get variant of the Button element."
               },
+              {
+                "name": "label",
+                "description": "Get the accessible label of the Button element."
+              },
               {
                 "name": "dialog",
                 "description": "Get variant of the Button element."
@@ -1024,6 +1038,51 @@
             "events": []
           }
         },
+        {
+          "name": "wje-dialog",
+          "description": "This element represents a dialog.\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_)** - Draws the component after it has been drawn.\n- **htmlDialogBody(dialog)** - Creates the dialog body.\n- **close(e)** - Closes the dialog.\n- **beforeDisconnect()** - Before the component is disconnected.\n- **beforeOpen(dialog, trigger)** - Before the dialog opens.\n- **afterOpen(dialog, trigger)** - After the dialog opens.\n- **beforeClose(dialog, trigger)** - Before the dialog closes.\n- **afterClose(dialog, trigger)** - After the dialog closes.\n- **registerBlockingEvent(button: _HTMLElement_, promise: _Function_)** - Registers an event listener on the provided button that triggers a blocking UI element\nand executes a given promise when the button is clicked.\n\n### **Slots:**\n - **header** - Slot for the header content.\n- **body** - Slot for the body content.\n- **footer** - Slot for the footer content.\n\n### **CSS Properties:**\n - **--wje-dialog-background** - Specifies the background color of the dialog. _(default: var(--wje-background-color))_\n- **--wje-dialog-color** - Defines the text color within the dialog. _(default: var(--wje-text-color))_\n- **--wje-dialog-padding** - Controls the padding inside the dialog. _(default: 1rem)_\n- **--wje-dialog-border-radius** - Sets the border radius for the dialog's corners. _(default: 0.5rem)_\n- **--wje-dialog-box-shadow** - Applies a shadow effect to the dialog. _(default: 0 2px 10px rgba(0, 0, 0, 0.1))_\n\n### **CSS Parts:**\n - **dialog** - The dialog wrapper.\n- **header** - The header of the dialog.\n- **body** - The body of the dialog.\n- **footer** - The footer of the dialog.\n- **close** - The close button of the dialog.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "header", "description": "Slot for the header content." },
+            { "name": "body", "description": "Slot for the body content." },
+            { "name": "footer", "description": "Slot for the footer content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "headline",
+                "description": "Retrieves the value of the \"headline\" attribute from the element.\nIf the \"headline\" attribute is not present, returns an empty string."
+              },
+              {
+                "name": "placement",
+                "description": "Gets the headline of the dialog."
+              },
+              {
+                "name": "async",
+                "description": "Gets the headline of the dialog."
+              },
+              {
+                "name": "closeHidden",
+                "description": "Gets the headline of the dialog."
+              },
+              { "name": "hiddenHeader" },
+              { "name": "hiddenFooter" },
+              {
+                "name": "className",
+                "description": "Sets the headline of the dialog.",
+                "type": "string"
+              },
+              { "name": "onOpen", "description": "Opens the dialog." },
+              { "name": "onClose", "description": "Closes the dialog." },
+              { "name": "onNativeDialogClose" },
+              { "name": "syncHostOpenState" },
+              { "name": "_opening", "type": "boolean" }
+            ],
+            "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### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CopyButton.\n- **draw(): _DocumentFragment_** - Draws the ColorPicker element.\n- **afterDraw()** - Adds event listeners for the click, focus, and blur events.\n- **syncAria()** - Sync ARIA attributes on host.\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. //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - Styles the button element.",
@@ -1082,51 +1141,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-dialog",
-          "description": "This element represents a dialog.\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_)** - Draws the component after it has been drawn.\n- **htmlDialogBody(dialog)** - Creates the dialog body.\n- **close(e)** - Closes the dialog.\n- **beforeDisconnect()** - Before the component is disconnected.\n- **beforeOpen(dialog, trigger)** - Before the dialog opens.\n- **afterOpen(dialog, trigger)** - After the dialog opens.\n- **beforeClose(dialog, trigger)** - Before the dialog closes.\n- **afterClose(dialog, trigger)** - After the dialog closes.\n- **registerBlockingEvent(button: _HTMLElement_, promise: _Function_)** - Registers an event listener on the provided button that triggers a blocking UI element\nand executes a given promise when the button is clicked.\n\n### **Slots:**\n - **header** - Slot for the header content.\n- **body** - Slot for the body content.\n- **footer** - Slot for the footer content.\n\n### **CSS Properties:**\n - **--wje-dialog-background** - Specifies the background color of the dialog. _(default: var(--wje-background-color))_\n- **--wje-dialog-color** - Defines the text color within the dialog. _(default: var(--wje-text-color))_\n- **--wje-dialog-padding** - Controls the padding inside the dialog. _(default: 1rem)_\n- **--wje-dialog-border-radius** - Sets the border radius for the dialog's corners. _(default: 0.5rem)_\n- **--wje-dialog-box-shadow** - Applies a shadow effect to the dialog. _(default: 0 2px 10px rgba(0, 0, 0, 0.1))_\n\n### **CSS Parts:**\n - **dialog** - The dialog wrapper.\n- **header** - The header of the dialog.\n- **body** - The body of the dialog.\n- **footer** - The footer of the dialog.\n- **close** - The close button of the dialog.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "header", "description": "Slot for the header content." },
-            { "name": "body", "description": "Slot for the body content." },
-            { "name": "footer", "description": "Slot for the footer content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "headline",
-                "description": "Retrieves the value of the \"headline\" attribute from the element.\nIf the \"headline\" attribute is not present, returns an empty string."
-              },
-              {
-                "name": "placement",
-                "description": "Gets the headline of the dialog."
-              },
-              {
-                "name": "async",
-                "description": "Gets the headline of the dialog."
-              },
-              {
-                "name": "closeHidden",
-                "description": "Gets the headline of the dialog."
-              },
-              { "name": "hiddenHeader" },
-              { "name": "hiddenFooter" },
-              {
-                "name": "className",
-                "description": "Sets the headline of the dialog.",
-                "type": "string"
-              },
-              { "name": "onOpen", "description": "Opens the dialog." },
-              { "name": "onClose", "description": "Closes the dialog." },
-              { "name": "onNativeDialogClose" },
-              { "name": "syncHostOpenState" },
-              { "name": "_opening", "type": "boolean" }
-            ],
-            "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(): _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 borderline. _(default: var(--wje-border-color))_\n- **--wje-divider-border-width** - The width of the divider borderline. _(default: var(--wje-border-width, 1px))_\n- **--wje-divider-spacing** - The spacing for the divider. _(default: 0)_",
@@ -1353,23 +1367,6 @@
             ]
           }
         },
-        {
-          "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(): _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", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "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### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\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. //@fires wje-button:click - Dispatches when the delete button is clicked _(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",
@@ -1408,6 +1405,23 @@
             "events": []
           }
         },
+        {
+          "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(): _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", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-form",
           "description": "The Form class is a custom\nweb component that extends WJElement. It is a simple form that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Form.\n- **draw(): _DocumentFragment_** - Draws the Form.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
@@ -1501,6 +1515,23 @@
             "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(): _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 element. _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header element. _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header element. _(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 element. _(default: 60px)_\n- **--wje-header-z-index** - The z-index used when the header is sticky. _(default: 100)_\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", "type": "string" }],
+            "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- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Properties:**\n - **--wje-icon-size** - The size of the icon element _(default: 1rem)_\n- **--wje-icon-width** - The width of the icon element _(default: var(--wje-icon-size, 100%))_\n- **--wje-icon-height** - The height of the icon element _(default: var(--wje-icon-size, 100%))_\n\n### **CSS Parts:**\n - **svg** - The SVG part of the icon",
@@ -1522,23 +1553,6 @@
             "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(): _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 element. _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header element. _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header element. _(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 element. _(default: 60px)_\n- **--wje-header-z-index** - The z-index used when the header is sticky. _(default: 100)_\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", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-icon-picker",
           "description": "This element allows users to pick an icon from a set of available options.\n`IconPicker` is a custom web component that represents an interactive icon picker. It features\nsearch functionality, infinite scrolling, and popup-based selection. The component is highly customizable\nand integrates seamlessly with other `WJElement` components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _Promise<void>_** - Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n- **draw(): _DocumentFragment_** - Draws and initializes the native color picker component on the DOM.\nThis method creates and appends the necessary elements, including input and infinite scroll components,\nand sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\nand manages the way icons are displayed based on input.\n- **afterDraw(): _void_** - Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\nand infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n- **syncAria()** - Sync ARIA attributes on host.\n- **initial()** - Initializes the component.\n- **getTags(): _Promise<Array>_** - Gets the tags.\n- **beforeDisconnect()** - Called when the component is disconnected.\n- **clearIconsContainer()** - Clears the icons container.\n- **debounce(fn: _Function_, delay: _number_): _Function_** - Creates a debounced version of the provided function that delays its execution\nuntil after the specified delay has passed since the last time it was invoked.\n\n### **CSS Properties:**\n - **--wje-color-picker-value** - The default color value. _(default: #ff0000)_\n- **--wje-color-picker-area** - The background color of the color picker area. _(default: transparent)_\n- **--wje-color-picker-swatch** - The background color of the swatch picker. _(default: transparent)_\n- **--wje-color-picker-size** - The size of the icons in the picker. _(default: 1rem)_\n- **--wje-color-picker-radius** - The border radius of the picker. _(default: 4px)_\n\n### **CSS Parts:**\n - **native** - The native part of the component.\n- **anchor** - The part representing the anchor button displaying the selected icon.\n- **picker** - The picker part containing the search and icon selection interface.\n- **input** - The input part for searching icons.",
@@ -1597,44 +1611,101 @@
           }
         },
         {
-          "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(): _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. This is the size of the divider. Accepts any valid CSS size. _(default: 12px)_\n- **--wje-img-compare-divider-background** - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs. _(default: white)_\n- **--wje-img-compare-divider-size** - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size. _(default: 2px)_\n- **--wje-img-compare-divider-left** - The left position of the divider. This is the initial position of the divider. _(default: 50%)_\n- **--wje-img-compare-position** - The position of the divider. This is the position of the divider. _(default: 50%)_\n- **--wje-img-compare-clip-path** - The clip path of the divider. This is 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.",
+          "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(): _DocumentFragment_** - Creates and assembles a lazy-loaded image element within a document fragment.\n- **afterDraw(): _void_** - Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\nObserves when the target element becomes visible in the viewport and updates its source with the provided image source.\nRemoves the `lazy` class once the image source is updated and unobserves the element.\nIt also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n- **addAction(name: _string_, func: _Function_): _void_** - Adds a new action to the internal actions object.\n- **removeAction(name: _string_): _void_** - Removes an action from the actions list if it exists.\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": [],
-          "slots": [
-            { "name": "before", "description": "The before image slot." },
-            { "name": "after", "description": "The after image slot." }
+          "attributes": [
+            { "name": "src", "value": { "type": "string" } },
+            { "name": "alt", "value": { "type": "string" } },
+            { "name": "no-lazy", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "dependencies",
-                "description": "Dependencies of the ImgComparer component.",
-                "type": "object"
+                "name": "src",
+                "description": "The source URL of the image.",
+                "type": "string"
               },
-              { "name": "className", "type": "string" },
               {
-                "name": "handleDrag",
-                "description": "Handles the drag event."
+                "name": "alt",
+                "description": "The alternative text for the image.",
+                "type": "string"
               },
               {
-                "name": "clamp",
-                "description": "Clamps a number between a minimum and maximum value."
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-infinite-scroll",
-          "description": "This element allows users to scroll through a potentially infinite amount of content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _void_** - Prepares the component for updates before it is drawn.\nThis method handles the removal of templates for iteration, adjusts the height styling of the component,\nand manages abort signals for loading operations.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure for an infinite scroll component.\nThe structure includes native elements, slots for customization, and optional loading content.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the server.\n- **hideLoader()** - Hides the loader.\n- **showLoader(): _void_** - Displays the loader element by adding the 'show' class to its class list.\nThis method is useful for indicating a loading or processing state in the UI.\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** - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container. _(default: 100%)_\n- **--wje-infinite-scroll-height** - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases. //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked. _(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."
+                "name": "fallout",
+                "description": "The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.",
+                "type": "string"
+              },
+              {
+                "name": "loader",
+                "description": "The URL of the image loader to display while the image is loading.",
+                "type": "string"
+              },
+              {
+                "name": "noLazy",
+                "description": "Disables lazy loading and renders the image source immediately.",
+                "type": "boolean"
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              { "name": "setAvatarInitials" },
+              {
+                "name": "deleteImage",
+                "description": "Deletes the current image by calling the remove method.\nThis function is typically used to trigger the removal of an image element\nor perform cleanup operations related to the image."
+              },
+              {
+                "name": "onerrorFunc",
+                "description": "Handles error scenarios by checking the `fallout` property and performing\ncorresponding actions. If `fallout` is not defined, the function terminates\nearly. Logs the active actions and attempts to assign an error handler\nbased on the `fallout` value. If the `fallout` value does not correspond to\na recognized action, it logs an error message."
+              },
+              { "name": "_fallout", "type": "boolean" },
+              { "name": "actions", "type": "object" }
+            ],
+            "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(): _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. This is the size of the divider. Accepts any valid CSS size. _(default: 12px)_\n- **--wje-img-compare-divider-background** - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs. _(default: white)_\n- **--wje-img-compare-divider-size** - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size. _(default: 2px)_\n- **--wje-img-compare-divider-left** - The left position of the divider. This is the initial position of the divider. _(default: 50%)_\n- **--wje-img-compare-position** - The position of the divider. This is the position of the divider. _(default: 50%)_\n- **--wje-img-compare-clip-path** - The clip path of the divider. This is 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": "dependencies",
+                "description": "Dependencies of the ImgComparer component.",
+                "type": "object"
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "handleDrag",
+                "description": "Handles the drag event."
+              },
+              {
+                "name": "clamp",
+                "description": "Clamps a number between a minimum and maximum value."
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-infinite-scroll",
+          "description": "This element allows users to scroll through a potentially infinite amount of content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _void_** - Prepares the component for updates before it is drawn.\nThis method handles the removal of templates for iteration, adjusts the height styling of the component,\nand manages abort signals for loading operations.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure for an infinite scroll component.\nThe structure includes native elements, slots for customization, and optional loading content.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the server.\n- **hideLoader()** - Hides the loader.\n- **showLoader(): _void_** - Displays the loader element by adding the 'show' class to its class list.\nThis method is useful for indicating a loading or processing state in the UI.\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** - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container. _(default: 100%)_\n- **--wje-infinite-scroll-height** - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases. //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked. _(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": [],
@@ -1686,63 +1757,6 @@
             "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(): _DocumentFragment_** - Creates and assembles a lazy-loaded image element within a document fragment.\n- **afterDraw(): _void_** - Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\nObserves when the target element becomes visible in the viewport and updates its source with the provided image source.\nRemoves the `lazy` class once the image source is updated and unobserves the element.\nIt also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n- **addAction(name: _string_, func: _Function_): _void_** - Adds a new action to the internal actions object.\n- **removeAction(name: _string_): _void_** - Removes an action from the actions list if it exists.\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": [
-            { "name": "src", "value": { "type": "string" } },
-            { "name": "alt", "value": { "type": "string" } },
-            { "name": "no-lazy", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "src",
-                "description": "The source URL of the image.",
-                "type": "string"
-              },
-              {
-                "name": "alt",
-                "description": "The alternative text for the image.",
-                "type": "string"
-              },
-              {
-                "name": "fallout",
-                "description": "The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.",
-                "type": "string"
-              },
-              {
-                "name": "loader",
-                "description": "The URL of the image loader to display while the image is loading.",
-                "type": "string"
-              },
-              {
-                "name": "noLazy",
-                "description": "Disables lazy loading and renders the image source immediately.",
-                "type": "boolean"
-              },
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              },
-              { "name": "setAvatarInitials" },
-              {
-                "name": "deleteImage",
-                "description": "Deletes the current image by calling the remove method.\nThis function is typically used to trigger the removal of an image element\nor perform cleanup operations related to the image."
-              },
-              {
-                "name": "onerrorFunc",
-                "description": "Handles error scenarios by checking the `fallout` property and performing\ncorresponding actions. If `fallout` is not defined, the function terminates\nearly. Logs the active actions and attempts to assign an error handler\nbased on the `fallout` value. If the `fallout` value does not correspond to\na recognized action, it logs an error message."
-              },
-              { "name": "_fallout", "type": "boolean" },
-              { "name": "actions", "type": "object" }
-            ],
-            "events": []
-          }
-        },
         {
           "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### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the input.\n- **draw(): _DocumentFragment_** - Draws the input element.\n- **afterDraw()** - Runs after the input is drawn to the DOM.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **hasSlot(el: _HTMLElement_, slotName: _string_): _boolean_** - Checks whether the input has a slot.\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** - Defines the font family for the input text. _(default: var(--wje-font-family))_\n- **--wje-input-background-color** - Specifies the background color of the input field. _(default: var(--wje-background))_\n- **--wje-input-color** - Sets the text color within the input field. _(default: var(--wje-color))_\n- **--wje-input-color-invalid** - Changes the text color when the input value is invalid. _(default: var(--wje-color-danger))_\n- **--wje-input-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-input-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-input-border-color** - Defines the border color of the input field. _(default: var(--wje-border-color))_\n- **--wje-input-border-color-focus** - Specifies the border color when the input is focused. _(default: var(--wje-color-primary))_\n- **--wje-input-border-width** - Sets the width of the input border. _(default: 1px)_\n- **--wje-input-border-style** - Defines the border style of the input (e.g., solid, dashed). _(default: solid)_\n- **--wje-input-border-radius** - Specifies the border radius, creating rounded corners. _(default: 4px)_\n- **--wje-input-margin-bottom** - Adds spacing below the input field. _(default: .5rem)_\n- **--wje-input-line-height** - Sets the line height of the text within the input field. _(default: 20px)_\n- **--wje-input-slot-padding-inline** - Controls the padding on the left and right of the input slot content. // @fires wje-input:input - Dispatched when the input value changes. // @fires wje-input:clear - Dispatched when the input is cleared. _(default: .5rem)_\n\n### **CSS Parts:**\n - **native** - The native part.\n- **wrapper** - The wrapper part.\n- **input** - The input part.\n- **clear** - The clear part.",
@@ -2346,6 +2360,33 @@
             "events": []
           }
         },
+        {
+          "name": "wje-orgchart",
+          "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "flat",
+              "description": "Removes the incoming connector spacing for nested charts that should visually continue on the same level.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "flat",
+                "description": "Gets whether the chart omits its incoming connector spacing."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "syncFlatChildren",
+                "description": "Marks direct children that are rendered inside a flat chart."
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-orgchart-item",
           "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart item.\n- **afterDraw()** - After Draws the component for the org chart item.\n\n### **Slots:**\n - _default_ - The default slot for the orgchart item.\n- **child** - The child slot for the orgchart item.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.\n- **expander** - Styles the expander element. // @fires wje-orgchart-item:click - Emitted when the item card is clicked.",
@@ -2393,36 +2434,9 @@
             "events": []
           }
         },
-        {
-          "name": "wje-orgchart",
-          "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "flat",
-              "description": "Removes the incoming connector spacing for nested charts that should visually continue on the same level.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "flat",
-                "description": "Gets whether the chart omits its incoming connector spacing."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "syncFlatChildren",
-                "description": "Marks direct children that are rendered inside a flat chart."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-pagination",
-          "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS Parts:**\n - **native** - The wrapper element for the pagination component.",
+          "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS Properties:**\n - **--wje-pagination-gap** - Gap between the summary and page navigation. _(default: 1rem)_\n- **--wje-pagination-summary-gap** - Gap between summary items. _(default: 1rem)_\n- **--wje-pagination-page-size-gap** - Gap between the page-size label and selector. _(default: var(--wje-spacing-small))_\n- **--wje-pagination-mobile-gap** - Gap between pagination rows below the md container width. _(default: var(--wje-spacing-x-large))_\n- **--wje-pagination-page-size-width** - Width of the page-size selector. _(default: 68px)_\n- **--wje-pagination-page-button-width** - Width of pagination buttons. _(default: 32px)_\n- **--wje-pagination-page-button-gap** - Gap between pagination buttons. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The wrapper element for the pagination component.\n- **summary** - The wrapper for the page-size selector and item range.\n- **page-size** - The wrapper for the page-size label and selector.\n- **page-size-label** - The page-size selector label.\n- **page-size-select** - The page-size selector.\n- **info** - The item range information.\n- **pages** - The page navigation wrapper.\n- **page-button** - Any pagination button.\n- **page-number** - A numbered page button.\n- **current-page** - The current page button.\n- **first-button** - The button that navigates to the first page.\n- **previous-button** - The button that navigates to the previous page.\n- **next-button** - The button that navigates to the next page.\n- **last-button** - The button that navigates to the last page.\n- **dots** - The page range ellipsis.",
           "doc-url": "",
           "attributes": [
             { "name": "page", "value": { "type": "string" } },
@@ -2627,6 +2641,45 @@
             "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(): _DocumentFragment_** - Draws the component for the radio group.\n- **afterDraw()** - Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getRadioByValue(value: _string_): _Radio_** - Returns the radio button with the given value.\n- **removeCheck()** - Removes the check from all radio buttons.\n- **checkRadio(radio)** - Sets the given radio button to checked.\n- **getAllElements(): _HTMLElement[]_** - Retrieves all direct child elements of the current element.\n\n### **Slots:**\n - _default_ - The default slot for the radio group.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "required", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the radio group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Getter for the value attribute."
+              },
+              {
+                "name": "required",
+                "description": "Getter for the name attribute."
+              },
+              {
+                "name": "label",
+                "description": "Getter for the label attribute."
+              },
+              { "name": "className", "type": "string" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-qr-code",
           "description": "This element represents a QR code generator.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the QR code component.\n- **afterDraw()** - Called after the component is drawn to generate the QR code.\n- **getAttributeFromAliases(aliases: _string[]_): _string|null_** - Returns first defined attribute value from alias list.\n- **setAliasedAttribute(optionName: _string_, value: _string|number|null|undefined_)** - Writes value to the canonical attribute and clears alternate aliases.\n\n### **Slots:**\n - **top** - The slot for the top content of the QR code.\n- **bottom** - The slot for the bottom content of the QR code.\n\n### **CSS Parts:**\n - **native** - The native part of the QR code.",
@@ -2815,6 +2868,29 @@
             "events": []
           }
         },
+        {
+          "name": "wje-reorder-dropzone",
+          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the reorder dropzone."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-reorder",
           "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
@@ -2875,62 +2951,49 @@
           }
         },
         {
-          "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(): _DocumentFragment_** - Draws the component for the radio group.\n- **afterDraw()** - Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getRadioByValue(value: _string_): _Radio_** - Returns the radio button with the given value.\n- **removeCheck()** - Removes the check from all radio buttons.\n- **checkRadio(radio)** - Sets the given radio button to checked.\n- **getAllElements(): _HTMLElement[]_** - Retrieves all direct child elements of the current element.\n\n### **Slots:**\n - _default_ - The default slot for the radio group.",
+          "name": "wje-reorder-handle",
+          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
           "doc-url": "",
           "attributes": [
-            { "name": "required", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
-          ],
+            { "name": "dropzone", "value": { "type": "string" } },
+            { "name": "parent", "value": { "type": "string" } }
+          ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the radio group."
+              "description": "The default slot for the reorder handle."
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "required",
-                "description": "Getter for the name attribute."
-              },
-              {
-                "name": "label",
-                "description": "Getter for the label attribute."
-              },
-              { "name": "className", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-reorder-dropzone",
-          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
+          "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- **beforeDraw()** - 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": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the reorder dropzone."
-            }
-          ],
           "events": [],
           "js": {
             "properties": [
+              { "name": "routes" },
+              { "name": "rootElement" },
+              { "name": "className", "type": "string" },
               {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
+                "name": "setBreadcrumb",
+                "description": "Sets the breadcrumb for the transition."
+              },
+              {
+                "name": "resetScrollPosition",
+                "description": "Resets the scroll position."
               }
             ],
             "events": []
@@ -2960,51 +3023,19 @@
           }
         },
         {
-          "name": "wje-reorder-handle",
-          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
+          "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(): _DocumentFragment_** - Draws the component for the router link.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the router link.",
           "doc-url": "",
-          "attributes": [
-            { "name": "dropzone", "value": { "type": "string" } },
-            { "name": "parent", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder handle."
+              "description": "The default slot for the router link."
             }
           ],
           "events": [],
           "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "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- **beforeDraw()** - 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": "routes" },
-              { "name": "rootElement" },
-              { "name": "className", "type": "string" },
-              {
-                "name": "setBreadcrumb",
-                "description": "Sets the breadcrumb for the transition."
-              },
-              {
-                "name": "resetScrollPosition",
-                "description": "Resets the scroll position."
-              }
-            ],
+            "properties": [{ "name": "className", "type": "string" }],
             "events": []
           }
         },
@@ -3019,23 +3050,6 @@
             "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(): _DocumentFragment_** - Draws the component for the router link.\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", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-router-outlet",
           "description": "This element represents a route in a routing system.\n---\n",
@@ -3074,107 +3088,45 @@
           }
         },
         {
-          "name": "wje-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the select.\n- **afterDraw(): _void_** - Executes post-render logic for the custom element.\nThis includes validation, event listener registration, managing custom attributes, and\nhandling options initialization for the component.\n- **getAllOptions(): _NodeList_** - Returns all the options as HTML.\n- **selectionChanged(options: _Array|null_, length: _number_): _void_** - Handles changes in the selection for a component, updating internal values, input fields,\nand visual presentation (like chips or slots) as per the given selection options.\n- **selections(silence: _boolean_): _void_** - Handles the logic for updating selections based on the current selected options,\nupdating chips content, and dispatching change events if necessary.\n- **counter(): _void_** - Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.\nIf the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.\n- **getChip(option: _object_): _HTMLElement_** - Creates and returns a chip element with specified properties and a label.\n- **htmlOption(item: _object_, map: _@param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * _): _HTMLElement_** - Generates an HTML option element based on the provided item and mapping.\n- **htmlSelectedItem(item: _any_): _any_** - Returns the provided item.\n- **addOption(optionData: _object_, silent: _boolean_, map: _@param {string} [map.value] The key in optionData that represents the value of the option.\n\t * @param {string} [map.text] The key in optionData that represents the text of the option.\n\t * _): _void_** - Adds a new option to the component.\n- **addOptions(optionsData: _Array | object_, silent: _boolean_, map: _@param {string} [map.value] The property in the optionsData that represents the value of the option.\n\t * @param {string} [map.text] The property in the optionsData that represents the text of the option.\n\t * _): _void_** - Adds one or more options to a collection. If the input is an array, it adds each option within the array.\nOtherwise, it adds a single option.\n- **selectOption(value: _string_, silent: _boolean_): _void_** - Selects an option from the available options within the component.\n- **selectOptions(values: _any|any[]_, silent: _boolean_): _void_** - Selects multiple options based on the provided values. If a single value is provided, it selects that option.\nIf an array of values is provided, it iterates through the array and selects each option.\n- **optionCheckSlot(option: _HTMLElement_): _void_** - Clones and appends an icon with the \"check\" slot to the specified option element.\nIf the option already contains a custom element with slot=\"check\" (e.g. <wje-status slot=\"check\">),\nit is left untouched and no template icon is added.\n- **clearSelections(): _void_** - Clears all selected options and resets selections.\nThe method ensures that all options are deselected, updates the internal state, validates the selections,\npropagates the validation status, and indicates invalid state if necessary.\n- **syncAria()** - Syncs ARIA attributes on the host element.",
+          "name": "wje-slider",
+          "description": "Represents a slider component that extends the WJElement class.\nThis slider supports features such as min, max, step values, bubble display, and event handling.\nIt offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the slider.\n- **afterDraw(): _void_** - Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n- Sets the position of the handle.\n- Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n- Dispatches initialization, movement, and change custom events for the slider input element.\n- Updates the bubble position and value dynamically on input changes.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getPercentage(min: _number_, max: _number_, value: _number_): _number_** - Calculates the percentage of a value within a given range.",
           "doc-url": "",
           "attributes": [
-            { "name": "active", "value": { "type": "string" } },
+            { "name": "max", "value": { "type": "string" } },
+            { "name": "min", "value": { "type": "string" } },
+            { "name": "step", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "readonly", "value": { "type": "string" } },
-            { "name": "portaled", "value": { "type": "string" } }
+            { "name": "bubble", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "dependencies",
-                "description": "An object representing component dependencies with their respective classes.\nEach property in the object maps a custom component name (as a string key)\nto its corresponding class or constructor.",
-                "type": "object"
-              },
               {
                 "name": "value",
-                "description": "Retrieves the current value."
-              },
-              {
-                "name": "maxOptions",
-                "description": "Retrieves the maximum number of options allowed.\nParses the value of the 'max-options' attribute from the element and converts it to a number.\nIf the attribute is not present or cannot be converted to a valid number, defaults to 1."
-              },
-              { "name": "defaultValue" },
-              {
-                "name": "portaled",
-                "description": "Getter for the `portaled` attribute value."
-              },
-              {
-                "name": "isPortaled",
-                "description": "Checks whether popup content should be portaled."
-              },
-              {
-                "name": "trigger",
-                "description": "Returns the trigger value."
-              },
-              {
-                "name": "disabled",
-                "description": "Retrieves the current state of the 'disabled' attribute."
-              },
-              {
-                "name": "readonly",
-                "description": "Checks if the 'readonly' attribute is present on the element."
-              },
-              {
-                "name": "maxHeight",
-                "description": "Retrieves the maximum height value, which is determined by the 'max-height' attribute.\nIf the attribute is not set, a default value of '200px' is returned."
-              },
-              {
-                "name": "offset",
-                "description": "Gets the value of the offset attribute of the current element.\nIf the offset attribute is not present, returns a default value of '0'."
-              },
-              {
-                "name": "selectedOptions",
-                "description": "Retrieves the selected options."
-              },
-              {
-                "name": "lazy",
-                "description": "Getter for the 'lazy' property."
+                "description": "Returns the value of the slider."
               },
               {
-                "name": "noSize",
-                "description": "Gets the value of the 'no-size' attribute for the element."
+                "name": "min",
+                "description": "Returns the minimum value of the slider."
               },
               {
-                "name": "customErrorDisplay",
-                "description": "Getter for the customErrorDisplay attribute."
+                "name": "max",
+                "description": "Returns the maximum value of the slider."
               },
               {
-                "name": "options",
-                "description": "Retrieves the complete list of options available for the component.\nThe options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\nIf a `wje-options` element is present within the component, its loaded options are included in the merged list.\nIn the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order."
+                "name": "step",
+                "description": "Returns the step value of the slider."
               },
               { "name": "className", "type": "string" },
               {
-                "name": "optionChange",
-                "description": "Handles the change event for an option element within a select-like component.\nThis method processes user interactions with options and updates the state of the component,\nincluding selection management, validation, and UI updates. Behavior differs based on\nwhether the component supports multiple selections.\nKey functionality:\n- Prevents the default behavior, event propagation, and immediate propagation of the event.\n- Retrieves all options within the component.\n- If the component doesn't support multiple selection:\n  - Marks only the clicked option as selected and deselects others.\n  - Hides the option popup.\n- If the component supports multiple selection:\n  - Processes the clicked option without deselecting others.\n- Updates the selected options and triggers validation.\n- Marks the form state as non-pristine.\n- Propagates the validation state to other relevant parts of the component or system."
-              },
-              {
-                "name": "processClickedOption",
-                "description": "Handles the logic for processing the selection state of a clicked option element."
+                "name": "setHandlePosition",
+                "description": "Sets the handle position of the slider."
               },
               {
-                "name": "removeChip",
-                "description": "Handles the removal of a chip element from the DOM and updates the related state."
-              },
-              { "name": "localizer" },
-              { "name": "native", "type": "HTMLElement|null" },
-              { "name": "popup", "type": "HTMLElement|null" },
-              { "name": "labelElement", "type": "HTMLElement|null" },
-              { "name": "slotStart", "type": "HTMLElement|null" },
-              { "name": "slotEnd", "type": "HTMLElement|null" },
-              { "name": "input", "type": "HTMLElement|null" },
-              { "name": "displayText", "type": "HTMLElement|null" },
-              { "name": "chips", "type": "HTMLElement|null" },
-              { "name": "clear", "type": "HTMLElement|null" },
-              { "name": "list", "type": "HTMLElement|null" },
-              { "name": "emptyState", "type": "HTMLElement|null" },
-              { "name": "_value", "type": "array" },
-              { "name": "_selectedOptions", "type": "array" }
+                "name": "setBubble",
+                "description": "Updates the position and content of a bubble element based on the input value.\n\nThis function calculates the position of the bubble using the percentage representation\nof the input's current value relative to its minimum and maximum bounds. It then adjusts\nthe bubble's left position dynamically for aesthetic purposes and updates its displayed\ncontent to reflect the current input value.\n\nThe function relies on the following elements:\n- `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n- `this.output`: Represents the bubble element to be positioned and updated.\n\nThe left positioning of the bubble ensures precise alignment with the input value indicator."
+              }
             ],
             "events": []
           }
@@ -3425,87 +3377,149 @@
           }
         },
         {
-          "name": "wje-slider",
-          "description": "Represents a slider component that extends the WJElement class.\nThis slider supports features such as min, max, step values, bubble display, and event handling.\nIt offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the slider.\n- **afterDraw(): _void_** - Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n- Sets the position of the handle.\n- Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n- Dispatches initialization, movement, and change custom events for the slider input element.\n- Updates the bubble position and value dynamically on input changes.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getPercentage(min: _number_, max: _number_, value: _number_): _number_** - Calculates the percentage of a value within a given range.",
+          "name": "wje-select",
+          "description": "\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the select.\n- **afterDraw(): _void_** - Executes post-render logic for the custom element.\nThis includes validation, event listener registration, managing custom attributes, and\nhandling options initialization for the component.\n- **getAllOptions(): _NodeList_** - Returns all the options as HTML.\n- **selectionChanged(options: _Array|null_, length: _number_): _void_** - Handles changes in the selection for a component, updating internal values, input fields,\nand visual presentation (like chips or slots) as per the given selection options.\n- **selections(silence: _boolean_): _void_** - Handles the logic for updating selections based on the current selected options,\nupdating chips content, and dispatching change events if necessary.\n- **counter(): _void_** - Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.\nIf the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.\n- **getChip(option: _object_): _HTMLElement_** - Creates and returns a chip element with specified properties and a label.\n- **htmlOption(item: _object_, map: _@param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * _): _HTMLElement_** - Generates an HTML option element based on the provided item and mapping.\n- **htmlSelectedItem(item: _any_): _any_** - Returns the provided item.\n- **addOption(optionData: _object_, silent: _boolean_, map: _@param {string} [map.value] The key in optionData that represents the value of the option.\n\t * @param {string} [map.text] The key in optionData that represents the text of the option.\n\t * _): _void_** - Adds a new option to the component.\n- **addOptions(optionsData: _Array | object_, silent: _boolean_, map: _@param {string} [map.value] The property in the optionsData that represents the value of the option.\n\t * @param {string} [map.text] The property in the optionsData that represents the text of the option.\n\t * _): _void_** - Adds one or more options to a collection. If the input is an array, it adds each option within the array.\nOtherwise, it adds a single option.\n- **selectOption(value: _string_, silent: _boolean_): _void_** - Selects an option from the available options within the component.\n- **selectOptions(values: _any|any[]_, silent: _boolean_): _void_** - Selects multiple options based on the provided values. If a single value is provided, it selects that option.\nIf an array of values is provided, it iterates through the array and selects each option.\n- **optionCheckSlot(option: _HTMLElement_): _void_** - Clones and appends an icon with the \"check\" slot to the specified option element.\nIf the option already contains a custom element with slot=\"check\" (e.g. <wje-status slot=\"check\">),\nit is left untouched and no template icon is added.\n- **clearSelections(): _void_** - Clears all selected options and resets selections.\nThe method ensures that all options are deselected, updates the internal state, validates the selections,\npropagates the validation status, and indicates invalid state if necessary.\n- **syncAria()** - Syncs ARIA attributes on the host element.",
           "doc-url": "",
           "attributes": [
-            { "name": "max", "value": { "type": "string" } },
-            { "name": "min", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
+            { "name": "active", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "bubble", "value": { "type": "string" } }
+            { "name": "readonly", "value": { "type": "string" } },
+            { "name": "portaled", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "dependencies",
+                "description": "An object representing component dependencies with their respective classes.\nEach property in the object maps a custom component name (as a string key)\nto its corresponding class or constructor.",
+                "type": "object"
+              },
               {
                 "name": "value",
-                "description": "Returns the value of the slider."
+                "description": "Retrieves the current value."
+              },
+              {
+                "name": "maxOptions",
+                "description": "Retrieves the maximum number of options allowed.\nParses the value of the 'max-options' attribute from the element and converts it to a number.\nIf the attribute is not present or cannot be converted to a valid number, defaults to 1."
+              },
+              { "name": "defaultValue" },
+              {
+                "name": "portaled",
+                "description": "Getter for the `portaled` attribute value."
+              },
+              {
+                "name": "isPortaled",
+                "description": "Checks whether popup content should be portaled."
+              },
+              {
+                "name": "trigger",
+                "description": "Returns the trigger value."
+              },
+              {
+                "name": "disabled",
+                "description": "Retrieves the current state of the 'disabled' attribute."
+              },
+              {
+                "name": "readonly",
+                "description": "Checks if the 'readonly' attribute is present on the element."
+              },
+              {
+                "name": "maxHeight",
+                "description": "Retrieves the maximum height value, which is determined by the 'max-height' attribute.\nIf the attribute is not set, a default value of '200px' is returned."
+              },
+              {
+                "name": "offset",
+                "description": "Gets the value of the offset attribute of the current element.\nIf the offset attribute is not present, returns a default value of '0'."
+              },
+              {
+                "name": "selectedOptions",
+                "description": "Retrieves the selected options."
+              },
+              {
+                "name": "lazy",
+                "description": "Getter for the 'lazy' property."
+              },
+              {
+                "name": "noSize",
+                "description": "Gets the value of the 'no-size' attribute for the element."
               },
               {
-                "name": "min",
-                "description": "Returns the minimum value of the slider."
+                "name": "customErrorDisplay",
+                "description": "Getter for the customErrorDisplay attribute."
               },
               {
-                "name": "max",
-                "description": "Returns the maximum value of the slider."
+                "name": "options",
+                "description": "Retrieves the complete list of options available for the component.\nThe options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\nIf a `wje-options` element is present within the component, its loaded options are included in the merged list.\nIn the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order."
               },
+              { "name": "className", "type": "string" },
               {
-                "name": "step",
-                "description": "Returns the step value of the slider."
+                "name": "optionChange",
+                "description": "Handles the change event for an option element within a select-like component.\nThis method processes user interactions with options and updates the state of the component,\nincluding selection management, validation, and UI updates. Behavior differs based on\nwhether the component supports multiple selections.\nKey functionality:\n- Prevents the default behavior, event propagation, and immediate propagation of the event.\n- Retrieves all options within the component.\n- If the component doesn't support multiple selection:\n  - Marks only the clicked option as selected and deselects others.\n  - Hides the option popup.\n- If the component supports multiple selection:\n  - Processes the clicked option without deselecting others.\n- Updates the selected options and triggers validation.\n- Marks the form state as non-pristine.\n- Propagates the validation state to other relevant parts of the component or system."
               },
-              { "name": "className", "type": "string" },
               {
-                "name": "setHandlePosition",
-                "description": "Sets the handle position of the slider."
+                "name": "processClickedOption",
+                "description": "Handles the logic for processing the selection state of a clicked option element."
               },
               {
-                "name": "setBubble",
-                "description": "Updates the position and content of a bubble element based on the input value.\n\nThis function calculates the position of the bubble using the percentage representation\nof the input's current value relative to its minimum and maximum bounds. It then adjusts\nthe bubble's left position dynamically for aesthetic purposes and updates its displayed\ncontent to reflect the current input value.\n\nThe function relies on the following elements:\n- `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n- `this.output`: Represents the bubble element to be positioned and updated.\n\nThe left positioning of the bubble ensures precise alignment with the input value indicator."
-              }
+                "name": "removeChip",
+                "description": "Handles the removal of a chip element from the DOM and updates the related state."
+              },
+              { "name": "localizer" },
+              { "name": "native", "type": "HTMLElement|null" },
+              { "name": "popup", "type": "HTMLElement|null" },
+              { "name": "labelElement", "type": "HTMLElement|null" },
+              { "name": "slotStart", "type": "HTMLElement|null" },
+              { "name": "slotEnd", "type": "HTMLElement|null" },
+              { "name": "input", "type": "HTMLElement|null" },
+              { "name": "displayText", "type": "HTMLElement|null" },
+              { "name": "chips", "type": "HTMLElement|null" },
+              { "name": "clear", "type": "HTMLElement|null" },
+              { "name": "list", "type": "HTMLElement|null" },
+              { "name": "emptyState", "type": "HTMLElement|null" },
+              { "name": "_value", "type": "array" },
+              { "name": "_selectedOptions", "type": "array" }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-status",
-          "description": "This class represents Status element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the status.\n\n### **Slots:**\n - _default_ - The status main content.\n- **start** - The status start content.\n- **end** - The status end content.\n\n### **CSS Parts:**\n - **native** - The native part of the status.\n- **bullet** - The bullet part of the status.",
+          "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(): _DocumentFragment_** - Draws the component for the split view.\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** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The status main content." },
-            { "name": "start", "description": "The status start content." },
-            { "name": "end", "description": "The status end content." }
+            { "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",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
+              { "name": "initial" },
+              { "name": "className", "type": "string" },
+              { "name": "handleDrag", "description": "Handles the drag event." }
             ],
             "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(): _DocumentFragment_** - Draws the component for the split view.\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** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
+          "name": "wje-status",
+          "description": "This class represents Status element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the status.\n\n### **Slots:**\n - _default_ - The status main content.\n- **start** - The status start content.\n- **end** - The status end content.\n\n### **CSS Parts:**\n - **native** - The native part of the status.\n- **bullet** - The bullet part of the status.",
           "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." }
+            { "name": "", "description": "The status main content." },
+            { "name": "start", "description": "The status start content." },
+            { "name": "end", "description": "The status end content." }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "initial" },
-              { "name": "className", "type": "string" },
-              { "name": "handleDrag", "description": "Handles the drag event." }
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -3670,47 +3684,21 @@
           }
         },
         {
-          "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(): _DocumentFragment_** - Draws the component for the textarea.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Disconnects the component.\n\n### **CSS Properties:**\n - **--wje-textarea-font-family** - Specifies the font family used for the textarea. Accepts any valid CSS font-family value. _(default: var(--wje-font-family))_\n- **--wje-textarea-background-color** - Sets the background color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-textarea-color** - Defines the text color within the textarea. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-textarea-color-invalid** - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors. _(default: var(--wje-color-danger))_\n- **--wje-textarea-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-textarea-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-textarea-border-width** - Specifies the width of the textarea's border. Accepts any valid CSS length unit. _(default: 1px)_\n- **--wje-textarea-border-style** - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`. _(default: solid)_\n- **--wje-textarea-border-color** - Defines the border color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-textarea-border-color-focus** - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback. _(default: var(--wje-color-primary))_\n- **--wje-textarea-border-radius** - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit. _(default: 4px)_\n- **--wje-textarea-margin-bottom** - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements. _(default: .5rem)_\n- **--wje-textarea-line-height** - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text. _(default: 20px)_\n- **--wje-textarea-padding** - Defines the padding inside the textarea. Controls the spacing between the content and the border. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The native textarea wrapper.\n- **input** - The textarea input.\n- **wrapper** - The textarea wrapper.",
+          "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(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
           "doc-url": "",
-          "attributes": [
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "placeholder", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "required", "value": { "type": "string" } },
-            { "name": "readonly", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "rows", "value": { "type": "string" } }
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "Slot for the timeline items." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "label",
-                "description": "Retrieves the value of the 'label' attribute if it exists.\nIf the 'label' attribute is not set, it returns false."
-              },
-              {
-                "name": "validateOnChange",
-                "description": "Getter for the validateOnChange attribute."
-              },
-              { "name": "placeholder" },
-              { "name": "className", "type": "string" },
-              {
-                "name": "setTextareaHeight",
-                "description": "Sets the height of the textarea."
-              },
-              {
-                "name": "counterFn",
-                "description": "Updates the counter for the textarea."
-              },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -3738,26 +3726,6 @@
             "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(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "Slot for the timeline items." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "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(): _DocumentFragment_** - Draws the component for the timeline item.\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.\n- **content-container** - The content container part of the timeline item.\n- **default-icon** - The default icon part of the timeline item.",
@@ -3786,16 +3754,19 @@
           }
         },
         {
-          "name": "wje-toggle",
-          "description": "This element represents a toggle input.\n---\n\n\n### **Methods:**\n - **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Removes the event listener when the checkbox is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the toggle.\n\n### **CSS Properties:**\n - **--wje-toggle-color-base** - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state. _(default: var(--wje-color-contrast-3))_\n- **--wje-toggle-width** - The overall width of the toggle switch. Determines how wide the toggle component appears. _(default: 30px)_\n- **--wje-toggle-height** - The overall height of the toggle switch. Specifies how tall the toggle component appears. _(default: 18px)_\n- **--wje-toggle-border-radius** - The border radius of the toggle. Controls how rounded the corners of the toggle are. _(default: 50px)_\n- **--wje-toggle-handle-width** - The width of the toggle handle (knob). Determines the size of the handle for user interaction. _(default: 14px)_\n- **--wje-toggle-handle-height** - The height of the toggle handle (knob). Specifies the vertical size of the handle. _(default: 14px)_\n- **--wje-toggle-handle-border-radius** - The border radius of the toggle handle. Controls how rounded the handle is. _(default: 9px)_\n- **--wje-toggle-handle-color** - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`. _(default: #fff)_\n- **--wje-toggle-handle-shadow** - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity. _(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 applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state. _(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 in milliseconds. Controls how long the toggle animation lasts during state changes. _(default: 250ms)_\n- **--wje-toggle-curve** - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions. _(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.",
+          "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(): _DocumentFragment_** - Draws the component for the textarea.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Disconnects the component.\n\n### **CSS Properties:**\n - **--wje-textarea-font-family** - Specifies the font family used for the textarea. Accepts any valid CSS font-family value. _(default: var(--wje-font-family))_\n- **--wje-textarea-background-color** - Sets the background color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-textarea-color** - Defines the text color within the textarea. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-textarea-color-invalid** - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors. _(default: var(--wje-color-danger))_\n- **--wje-textarea-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-textarea-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-textarea-border-width** - Specifies the width of the textarea's border. Accepts any valid CSS length unit. _(default: 1px)_\n- **--wje-textarea-border-style** - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`. _(default: solid)_\n- **--wje-textarea-border-color** - Defines the border color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-textarea-border-color-focus** - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback. _(default: var(--wje-color-primary))_\n- **--wje-textarea-border-radius** - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit. _(default: 4px)_\n- **--wje-textarea-margin-bottom** - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements. _(default: .5rem)_\n- **--wje-textarea-line-height** - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text. _(default: 20px)_\n- **--wje-textarea-padding** - Defines the padding inside the textarea. Controls the spacing between the content and the border. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The native textarea wrapper.\n- **input** - The textarea input.\n- **wrapper** - The textarea wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "checked", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "required", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot for the toggle." }
+            { "name": "placeholder", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "required", "value": { "type": "string" } },
+            { "name": "readonly", "value": { "type": "string" } },
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "rows", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
@@ -3805,18 +3776,23 @@
                 "description": "Getter for the value attribute."
               },
               {
-                "name": "customErrorDisplay",
-                "description": "Getter for the customErrorDisplay attribute."
+                "name": "label",
+                "description": "Retrieves the value of the 'label' attribute if it exists.\nIf the 'label' attribute is not set, it returns false."
               },
               {
                 "name": "validateOnChange",
                 "description": "Getter for the validateOnChange attribute."
               },
+              { "name": "placeholder" },
+              { "name": "className", "type": "string" },
+              {
+                "name": "setTextareaHeight",
+                "description": "Sets the height of the textarea."
+              },
               {
-                "name": "defaultValue",
-                "description": "Getter for the defaultValue attribute.\nThis method retrieves the 'value' attribute of the custom input element.\nThe 'value' attribute represents the default value of the input element.\nIf the 'value' attribute is not set, it returns an empty string."
+                "name": "counterFn",
+                "description": "Updates the counter for the textarea."
               },
-              { "name": "checked", "description": "Get checked attribute." },
               { "name": "invalid", "type": "boolean" },
               { "name": "pristine", "type": "boolean" }
             ],
@@ -3951,46 +3927,39 @@
           }
         },
         {
-          "name": "wje-toolbar-action",
-          "description": "This element represents a toolbar action.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar action.\n- **afterDraw()** - Applies the current visible action limit after the component is drawn.\n- **afterDisconnect()** - Removes listeners after disconnect.\n- **scheduleOverflow(doubleFrame: _boolean_)** - Schedules overflow application after layout settles.\n- **getActions(): _Array<HTMLElement>_** - Returns the actions for the toolbar action.\n- **getAssignedElements(): _Array<HTMLElement>_** - Returns direct children assigned to the default slot.\n- **getExistingDropdown(): _HTMLElement|null_** - Returns an existing top-level dropdown if present.\n- **observeExistingDropdown()** - Observes the external dropdown for late menu/content changes.\n- **getOverflowDropdown(): _HTMLElement_** - Returns the dropdown that should receive overflow items.\n- **getOverflowMenu(): _HTMLElement|null_** - Returns the menu used for overflow items.\n- **getVisibleLimit(): _number_** - Gets the number of actions that should stay visible.\n- **shouldCollapseByBreakpoint(): _boolean_** - Returns whether the toolbar action should collapse based on the configured breakpoint.\n- **isCollapsedByBreakpoint(): _boolean_** - Returns the cached breakpoint collapse state.\n- **handleBreakpointResize(): _void_** - Reacts to viewport resize only when the breakpoint mode actually changes.\n- **getBreakpointWidth(): _number|null_** - Resolves the configured breakpoint to a pixel width.\n- **applyOverflow(): _void_** - Updates visible actions and the overflow dropdown.\n- **restoreManagedActions(actions: _Array<HTMLElement>_)** - Restores buttons hidden by this component.\n- **restoreManagedOverflowContent()** - Removes overflow menu nodes that were previously injected by this component.\n- **createMenuItem(action: _HTMLElement_): _HTMLElement_** - Creates a dropdown menu proxy for an overflowed button.\n- **cloneActionMenuNode(node: _Node_): _Node_** - Clones action content for menu usage and normalizes button icon slots.\n- **normalizeActionMenuIconSlot(element: _Element_)** - Moves button-only icon slots to the menu item start slot.\n- **getActionLabel(action: _HTMLElement_): _string_** - Resolves readable text for a toolbar action copied into an overflow menu.\n- **createOverflowDivider(): _HTMLElement_** - Creates a divider separating existing dropdown actions from responsive overflow actions.\n- **handleMenuItemClick(e: _Event_, action: _HTMLElement_)** - Forwards menu item activation to the original button.\n- **measureActionMetrics(): _{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}_** - Measures action widths while preserving current overflow state.\n- **measureMoreWidth(): _number_** - Measures the overflow dropdown trigger.\n\n### **Slots:**\n - _default_ - The default slot for the toolbar action.\n\n### **CSS Parts:**\n - **native** - The native toolbar action wrapper.",
+          "name": "wje-toggle",
+          "description": "This element represents a toggle input.\n---\n\n\n### **Methods:**\n - **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Removes the event listener when the checkbox is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the toggle.\n\n### **CSS Properties:**\n - **--wje-toggle-color-base** - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state. _(default: var(--wje-color-contrast-3))_\n- **--wje-toggle-width** - The overall width of the toggle switch. Determines how wide the toggle component appears. _(default: 30px)_\n- **--wje-toggle-height** - The overall height of the toggle switch. Specifies how tall the toggle component appears. _(default: 18px)_\n- **--wje-toggle-border-radius** - The border radius of the toggle. Controls how rounded the corners of the toggle are. _(default: 50px)_\n- **--wje-toggle-handle-width** - The width of the toggle handle (knob). Determines the size of the handle for user interaction. _(default: 14px)_\n- **--wje-toggle-handle-height** - The height of the toggle handle (knob). Specifies the vertical size of the handle. _(default: 14px)_\n- **--wje-toggle-handle-border-radius** - The border radius of the toggle handle. Controls how rounded the handle is. _(default: 9px)_\n- **--wje-toggle-handle-color** - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`. _(default: #fff)_\n- **--wje-toggle-handle-shadow** - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity. _(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 applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state. _(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 in milliseconds. Controls how long the toggle animation lasts during state changes. _(default: 250ms)_\n- **--wje-toggle-curve** - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions. _(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": "breakpoint", "value": { "type": "string" } },
-            { "name": "max-items", "value": { "type": "string" } },
-            { "name": "visible-items", "value": { "type": "string" } }
+            { "name": "checked", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "required", "value": { "type": "string" } }
           ],
           "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the toolbar action."
-            }
+            { "name": "", "description": "The default slot for the toggle." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
+                "name": "value",
+                "description": "Getter for the value attribute."
               },
               {
-                "name": "breakpoint",
-                "description": "Gets the collapse breakpoint token or value."
+                "name": "customErrorDisplay",
+                "description": "Getter for the customErrorDisplay attribute."
               },
               {
-                "name": "maxItems",
-                "description": "Gets the maximum number of visible actions."
+                "name": "validateOnChange",
+                "description": "Getter for the validateOnChange attribute."
               },
               {
-                "name": "visibleItems",
-                "description": "Gets the responsive visible action count."
+                "name": "defaultValue",
+                "description": "Getter for the defaultValue attribute.\nThis method retrieves the 'value' attribute of the custom input element.\nThe 'value' attribute represents the default value of the input element.\nIf the 'value' attribute is not set, it returns an empty string."
               },
-              { "name": "_managedHiddenActions" },
-              { "name": "_isCollapsedByBreakpoint", "type": "null" },
-              { "name": "_managedOverflowNodes" },
-              { "name": "_overflowRetryFrame", "type": "null" },
-              { "name": "_applyOverflowFrame", "type": "null" },
-              { "name": "_observedDropdown", "type": "null" }
+              { "name": "checked", "description": "Get checked attribute." },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
             ],
             "events": []
           }
@@ -4021,6 +3990,51 @@
             "events": []
           }
         },
+        {
+          "name": "wje-toolbar-action",
+          "description": "This element represents a toolbar action.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar action.\n- **afterDraw()** - Applies the current visible action limit after the component is drawn.\n- **afterDisconnect()** - Removes listeners after disconnect.\n- **scheduleOverflow(doubleFrame: _boolean_)** - Schedules overflow application after layout settles.\n- **getActions(): _Array<HTMLElement>_** - Returns the actions for the toolbar action.\n- **getAssignedElements(): _Array<HTMLElement>_** - Returns direct children assigned to the default slot.\n- **getExistingDropdown(): _HTMLElement|null_** - Returns an existing top-level dropdown if present.\n- **observeExistingDropdown()** - Observes the external dropdown for late menu/content changes.\n- **getOverflowDropdown(): _HTMLElement_** - Returns the dropdown that should receive overflow items.\n- **getOverflowMenu(): _HTMLElement|null_** - Returns the menu used for overflow items.\n- **getVisibleLimit(): _number_** - Gets the number of actions that should stay visible.\n- **shouldCollapseByBreakpoint(): _boolean_** - Returns whether the toolbar action should collapse based on the configured breakpoint.\n- **isCollapsedByBreakpoint(): _boolean_** - Returns the cached breakpoint collapse state.\n- **handleBreakpointResize(): _void_** - Reacts to viewport resize only when the breakpoint mode actually changes.\n- **getBreakpointWidth(): _number|null_** - Resolves the configured breakpoint to a pixel width.\n- **applyOverflow(): _void_** - Updates visible actions and the overflow dropdown.\n- **restoreManagedActions(actions: _Array<HTMLElement>_)** - Restores buttons hidden by this component.\n- **restoreManagedOverflowContent()** - Removes overflow menu nodes that were previously injected by this component.\n- **createMenuItem(action: _HTMLElement_): _HTMLElement_** - Creates a dropdown menu proxy for an overflowed button.\n- **cloneActionMenuNode(node: _Node_): _Node_** - Clones action content for menu usage and normalizes button icon slots.\n- **normalizeActionMenuIconSlot(element: _Element_)** - Moves button-only icon slots to the menu item start slot.\n- **getActionLabel(action: _HTMLElement_): _string_** - Resolves readable text for a toolbar action copied into an overflow menu.\n- **createOverflowDivider(): _HTMLElement_** - Creates a divider separating existing dropdown actions from responsive overflow actions.\n- **handleMenuItemClick(e: _Event_, action: _HTMLElement_)** - Forwards menu item activation to the original button.\n- **measureActionMetrics(): _{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}_** - Measures action widths while preserving current overflow state.\n- **measureMoreWidth(): _number_** - Measures the overflow dropdown trigger.\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": [
+            { "name": "breakpoint", "value": { "type": "string" } },
+            { "name": "max-items", "value": { "type": "string" } },
+            { "name": "visible-items", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the toolbar action."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              {
+                "name": "breakpoint",
+                "description": "Gets the collapse breakpoint token or value."
+              },
+              {
+                "name": "maxItems",
+                "description": "Gets the maximum number of visible actions."
+              },
+              {
+                "name": "visibleItems",
+                "description": "Gets the responsive visible action count."
+              },
+              { "name": "_managedHiddenActions" },
+              { "name": "_isCollapsedByBreakpoint", "type": "null" },
+              { "name": "_managedOverflowNodes" },
+              { "name": "_overflowRetryFrame", "type": "null" },
+              { "name": "_applyOverflowFrame", "type": "null" },
+              { "name": "_observedDropdown", "type": "null" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-tooltip",
           "description": "This element represents a tooltip.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the tooltip.\n- **afterDraw()** - Draws the component for the tooltip.\n- **checkSelector(anchorEl: _HTMLElement_): _HTMLElement|null_** - Validates if the specified selector exists within the provided element.\nLogs an error if the selector is not found and returns the found element or `null`.\n\n### **Slots:**\n - **arrow** - The arrow slot for the tooltip.\n- **anchor** - The anchor slot for the tooltip.\n\n### **CSS Properties:**\n - **--wje-tooltip-arrow-color** - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-color-contrast-11))_\n\n### **CSS Parts:**\n - **native** - The native tooltip wrapper.",