wj-elements 0.7.2 → 0.7.3

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.2",
+  "version": "0.7.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -726,26 +726,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-card-title",
-          "description": "CardTitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardTitle.\n- **draw(): _DocumentFragment_** - Draws the CardTitle element.\n\n### **Slots:**\n - _default_ - The card title main content.\n\n### **CSS Properties:**\n - **--wje-card-title-font-size** - Font size of the component; _(default: 24px)_\n- **--wje-card-title-font-weight** - Font weight of the component; _(default: 500)_\n- **--wje-card-title-margin** - Margin of the component; _(default: 0)_\n- **--wje-card-title-padding** - Padding of the component; _(default: 0)_\n- **--wje-card-title-line-height** - Line height of the component; _(default: 1.2)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card title main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the CardTitle.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-card-subtitle",
           "description": "CardSubtitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardSubtitle.\n- **draw(): _DocumentFragment_** - Draws the CardSubtitle element.\n\n### **Slots:**\n - _default_ - The card subtitle main content.\n\n### **CSS Properties:**\n - **--wje-card-subtitle-font-size** - Font size of the component; _(default: 11px)_\n- **--wje-card-subtitle-font-family** - Font family of the component; _(default: var(--wje-font-family-secondary))_\n- **--wje-card-subtitle-padding** - Padding of the component; _(default: 0)_",
@@ -767,19 +747,19 @@
           }
         },
         {
-          "name": "wje-carousel-item",
-          "description": "This class represents CarouselItem element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CarouselItem.\n- **draw(): _DocumentFragment_** - Draws the CarouselItem element.\n- **afterDraw()** - After draw event for the CarouselItem element.\n- **syncContentLayoutMode()** - Keeps a simple layout hint for single-wrapper content.\n\n### **Slots:**\n - _default_ - The carousel item main content.\n\n### **CSS Properties:**\n - **--wje-carousel-item-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-carousel-item-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-carousel-item-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-carousel-item-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-carousel-item-border-style** - Border style of the component; _(default: solid)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-carousel-item-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "name": "wje-card-title",
+          "description": "CardTitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardTitle.\n- **draw(): _DocumentFragment_** - Draws the CardTitle element.\n\n### **Slots:**\n - _default_ - The card title main content.\n\n### **CSS Properties:**\n - **--wje-card-title-font-size** - Font size of the component; _(default: 24px)_\n- **--wje-card-title-font-weight** - Font weight of the component; _(default: 500)_\n- **--wje-card-title-margin** - Margin of the component; _(default: 0)_\n- **--wje-card-title-padding** - Padding of the component; _(default: 0)_\n- **--wje-card-title-line-height** - Line height of the component; _(default: 1.2)_",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The carousel item main content." }
+            { "name": "", "description": "The card title main content." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "Class name for the CarouselItem element.",
+                "description": "Class name for the CardTitle.",
                 "type": "string"
               }
             ],
@@ -823,6 +803,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-carousel-item",
+          "description": "This class represents CarouselItem element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CarouselItem.\n- **draw(): _DocumentFragment_** - Draws the CarouselItem element.\n- **afterDraw()** - After draw event for the CarouselItem element.\n- **syncContentLayoutMode()** - Keeps a simple layout hint for single-wrapper content.\n\n### **Slots:**\n - _default_ - The carousel item main content.\n\n### **CSS Properties:**\n - **--wje-carousel-item-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-carousel-item-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-carousel-item-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-carousel-item-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-carousel-item-border-style** - Border style of the component; _(default: solid)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-carousel-item-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The carousel item main content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "Class name for the CarouselItem element.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-checkbox",
           "description": "This method dispatches a custom event named \"wje-toggle:change\".\nIt is triggered when the input event is fired, which happens when the state of the checkbox changes.\nThe event is dispatched on the current instance of the Checkbox class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the checkbox.\n- **draw(): _DocumentFragment_** - Draws the checkbox element.\n- **afterDraw()** - Adds an event listener after drawing the checkbox.\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 checkbox main content.\n\n### **CSS Properties:**\n - **--wje-checkbox-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-checkbox-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-checkbox-border-style** - Border style of the component; _(default: solid)_\n- **--wje-checkbox-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-checkbox-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
@@ -956,74 +956,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-color-picker",
-          "description": "ColorPicker is a custom web component that extends WJElement.\nIt provides a color picker functionality with a color area, hue slider, alpha slider, and color swatches.\nThe color picker allows users to select a color by moving a marker on the color area, adjusting the hue and alpha sliders, or clicking on a color swatch.\n---\n\n\n### **Methods:**\n - **parseSwatches(value: _string_): _string[]_** - Normalizes swatch colors from a string to an array.\nSupports comma and semicolon separators.\n- **setupAttributes()** - Sets up the attributes for the ColorPicker.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure and components of a custom color picker.\nThe method initializes DOM elements such as divs, sliders, and inputs, with specific classes and attributes,\nand attaches various event listeners to handle user interactions.\n- **afterDraw(): _void_** - Executes after the component is drawn. Initializes some configurations if not already initialized,\nincluding updating slider values, setting marker positions, and applying initial color settings.\nThis method ensures that all necessary visual elements and configurations are properly set up.\n- **createSwatches(node)** - Sets the hue.\n- **setSliders(color)** - Sets the sliders to the given color.\n- **dimension(): _object_** - Retrieves the dimensions and position of the color area element relative to the viewport.\n- **beforeDisconnect(): _void_** - Method executed before disconnecting. Resets the initialization state to false.\n- **getPointerPosition(e): _{x: number, y: number}_** - Gets the pointer position in client coordinates (viewport-relative).\n- **setMarkerPosition(x, y)** - Sets the position of the marker.\n- **clampMarkerPosition(x: _number_, y: _number_): _{x: number, y: number}_** - Clamps marker coordinates to the color area boundaries.\n- **setColorAtPosition(x, y, alpha): _*|tinycolor_** - Sets the color at the given position.\n- **getHueAreaColor(color: _string_): _string_** - Returns fully saturated and bright color for the current hue.\nUsed as base color for the SV area so neutral grays do not black out the palette.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-color-picker-area** - The color of the color area background. _(default: undefined)_\n- **--wje-color-picker-value** - The value of the color picker input. _(default: undefined)_\n- **--wje-color-picker-swatch** - The color of the color swatch button. _(default: undefined)_\n- **--wje-color-picker-size** - The color of the color marker. _(default: undefined)_\n- **--wje-color-picker-radius** - The color of the color anchor. _(default: undefined)_\n\n### **CSS Parts:**\n - **anchor** - The anchor part of the color picker.\n- **picker** - The main part of the color picker.\n- **marker** - The marker part of the color picker.\n- **color-area** - The color area part of the color picker.\n- **hue** - The hue slider part of the color picker.\n- **alpha** - The alpha slider part of the color picker.\n- **color-preview** - The color preview part of the color picker.\n- **input** - The input part of the color picker.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "input-editable",
-              "description": "Enables manual color typing into the input field.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The card header main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "Retrieves the color attribute of the element."
-              },
-              {
-                "name": "markerPosition",
-                "description": "Getter for the marker position."
-              },
-              {
-                "name": "swatches",
-                "description": "Getter for the color swatches."
-              },
-              {
-                "name": "noColorArea",
-                "description": "Getter method to check if the 'no-color-area' attribute is applied."
-              },
-              {
-                "name": "noControls",
-                "description": "Checks if the 'no-controls' attribute is present on the element."
-              },
-              {
-                "name": "noSwatches",
-                "description": "Checks if the 'no-swatches' attribute is present on the element."
-              },
-              {
-                "name": "inputEditable",
-                "description": "Returns true when manual input typing is enabled."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "moveMarker",
-                "description": "Updates the position of the marker based on the pointer event.\nThis function calculates the position of the marker relative to the color area\ndimensions based on the given event. It adjusts the marker position and updates\nthe color associated with the new position. It is intended to handle pointer movement\nevents such as mouse or touch interactions."
-              },
-              {
-                "name": "setMarkerPositionByColor",
-                "description": "Sets the marker position by color."
-              },
-              {
-                "name": "setColor",
-                "description": "Updates the color picker's current color and its associated UI elements."
-              },
-              { "name": "setHue", "description": "Sets the hue." },
-              { "name": "setAlpha", "description": "Sets the alpha." },
-              {
-                "name": "getHSVA",
-                "description": "Converts hue and alpha values into an HSVA color string."
-              }
-            ],
-            "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.",
@@ -1083,20 +1015,68 @@
           }
         },
         {
-          "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)_",
+          "name": "wje-color-picker",
+          "description": "ColorPicker is a custom web component that extends WJElement.\nIt provides a color picker functionality with a color area, hue slider, alpha slider, and color swatches.\nThe color picker allows users to select a color by moving a marker on the color area, adjusting the hue and alpha sliders, or clicking on a color swatch.\n---\n\n\n### **Methods:**\n - **parseSwatches(value: _string_): _string[]_** - Normalizes swatch colors from a string to an array.\nSupports comma and semicolon separators.\n- **setupAttributes()** - Sets up the attributes for the ColorPicker.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure and components of a custom color picker.\nThe method initializes DOM elements such as divs, sliders, and inputs, with specific classes and attributes,\nand attaches various event listeners to handle user interactions.\n- **afterDraw(): _void_** - Executes after the component is drawn. Initializes some configurations if not already initialized,\nincluding updating slider values, setting marker positions, and applying initial color settings.\nThis method ensures that all necessary visual elements and configurations are properly set up.\n- **createSwatches(node)** - Sets the hue.\n- **setSliders(color)** - Sets the sliders to the given color.\n- **dimension(): _object_** - Retrieves the dimensions and position of the color area element relative to the viewport.\n- **beforeDisconnect(): _void_** - Method executed before disconnecting. Resets the initialization state to false.\n- **getPointerPosition(e): _{x: number, y: number}_** - Gets the pointer position in client coordinates (viewport-relative).\n- **setMarkerPosition(x, y)** - Sets the position of the marker.\n- **clampMarkerPosition(x: _number_, y: _number_): _{x: number, y: number}_** - Clamps marker coordinates to the color area boundaries.\n- **setColorAtPosition(x, y, alpha): _*|tinycolor_** - Sets the color at the given position.\n- **getHueAreaColor(color: _string_): _string_** - Returns fully saturated and bright color for the current hue.\nUsed as base color for the SV area so neutral grays do not black out the palette.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-color-picker-area** - The color of the color area background. _(default: undefined)_\n- **--wje-color-picker-value** - The value of the color picker input. _(default: undefined)_\n- **--wje-color-picker-swatch** - The color of the color swatch button. _(default: undefined)_\n- **--wje-color-picker-size** - The color of the color marker. _(default: undefined)_\n- **--wje-color-picker-radius** - The color of the color anchor. _(default: undefined)_\n\n### **CSS Parts:**\n - **anchor** - The anchor part of the color picker.\n- **picker** - The main part of the color picker.\n- **marker** - The marker part of the color picker.\n- **color-area** - The color area part of the color picker.\n- **hue** - The hue slider part of the color picker.\n- **alpha** - The alpha slider part of the color picker.\n- **color-preview** - The color preview part of the color picker.\n- **input** - The input part of the color picker.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "input-editable",
+              "description": "Enables manual color typing into the input field.",
+              "value": { "type": "boolean" }
+            }
+          ],
           "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
+            { "name": "", "description": "The card header main content." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "className",
-                "description": "The class name for the Divider class.",
-                "type": "string"
+                "name": "color",
+                "description": "Retrieves the color attribute of the element."
+              },
+              {
+                "name": "markerPosition",
+                "description": "Getter for the marker position."
+              },
+              {
+                "name": "swatches",
+                "description": "Getter for the color swatches."
+              },
+              {
+                "name": "noColorArea",
+                "description": "Getter method to check if the 'no-color-area' attribute is applied."
+              },
+              {
+                "name": "noControls",
+                "description": "Checks if the 'no-controls' attribute is present on the element."
+              },
+              {
+                "name": "noSwatches",
+                "description": "Checks if the 'no-swatches' attribute is present on the element."
+              },
+              {
+                "name": "inputEditable",
+                "description": "Returns true when manual input typing is enabled."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "moveMarker",
+                "description": "Updates the position of the marker based on the pointer event.\nThis function calculates the position of the marker relative to the color area\ndimensions based on the given event. It adjusts the marker position and updates\nthe color associated with the new position. It is intended to handle pointer movement\nevents such as mouse or touch interactions."
+              },
+              {
+                "name": "setMarkerPositionByColor",
+                "description": "Sets the marker position by color."
+              },
+              {
+                "name": "setColor",
+                "description": "Updates the color picker's current color and its associated UI elements."
+              },
+              { "name": "setHue", "description": "Sets the hue." },
+              { "name": "setAlpha", "description": "Sets the alpha." },
+              {
+                "name": "getHSVA",
+                "description": "Converts hue and alpha values into an HSVA color string."
               }
             ],
             "events": []
@@ -1147,6 +1127,26 @@
             "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)_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "This is a default/unnamed slot." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Divider class.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-dropdown",
           "description": "This element represents a dropdown menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the dropdown.\n- **beforeDraw()** - Removes the popup element.\n- **draw(): _DocumentFragment_** - Draws the dropdown element and returns the created document fragment.\n- **afterDraw()** - Adds event listeners for the mouseenter and mouseleave events.\n- **afterDisconnect()** - Adds event listeners for the mouseenter and mouseleave events.\n- **syncPopupOwner()** - Assigns the current dropdown instance as the owner of its popup layers.\nOwner metadata is later used to resolve which dropdown should react to\ndelegated menu-item clicks, including portaled popup content.\n- **syncOwnedContentOwner(root: _HTMLElement_)** - Recursively assigns owner metadata to the dropdown content subtree while\nleaving nested dropdown roots untouched, so each nested dropdown can keep\nits own ownership boundary.\n- **getMenuItemOwner(path: _EventTarget[]_, item: _HTMLElement_): _HTMLElement|null_** - Resolves the dropdown that owns a clicked menu item. The lookup prefers\nexplicit owner metadata and falls back to DOM traversal so both regular\nand portaled dropdown content can be scoped correctly.\n- **afterShow()** - This method is called after the dropdown is shown.\n- **syncAria()** - Syncs ARIA attributes for the trigger element.\n\n### **Slots:**\n - **trigger** - The slot for the trigger of the dropdown.\n- _default_ - The default slot for the dropdown.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet dropdowns. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet dropdowns. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n\n### **CSS Parts:**\n - **native** - The native part of the dropdown.\n- **popup-native** - The exported native popup panel part.\n- **backdrop** - The exported mobile bottom sheet backdrop part.",
@@ -1229,7 +1229,7 @@
         },
         {
           "name": "wje-file-upload",
-          "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(e: _Event_)** - Method to handle form submission.\n- **addFilesToQueue(files)** - Method to add files to the queue.\n- **uploadFiles()** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **resetFormState()** - Method to reset the form state.\n- **showError(error: _object|Error_)** - Shows a user-facing validation error inside the dropzone.\n- **clearError()** - Clears the currently displayed validation error.\n- **getErrorMessage(error: _object|Error_): _string_** - Resolves a readable upload error message.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **upload-button** - The label part.",
+          "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(e: _Event_)** - Method to handle form submission.\n- **addFilesToQueue(files)** - Method to add files to the queue.\n- **uploadFiles()** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **resetFormState()** - Method to reset the form state.\n- **showError(error: _object|Error_)** - Shows a user-facing validation error inside the dropzone.\n- **clearError()** - Clears the currently displayed validation error.\n- **getErrorMessage(error: _object|Error_): _string_** - Resolves a readable upload error message.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-file-upload-padding** - Controls the padding around the native file upload area. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **upload-button** - The label part.",
           "doc-url": "",
           "attributes": [
             { "name": "label", "value": { "type": "string" } },
@@ -1408,29 +1408,6 @@
             "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The slot for adding child elements or components."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Form class.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-format-digital",
           "description": "This element formats and displays digital values such as file sizes or data transfer rates.\n`FormatDigital` is a custom web component that represents a formatted digital value with units like\nbytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\nInitializes the shadow DOM.\n- **beforeDraw()** - Prepares the component before rendering.\nComputes the formatted value based on the input value and unit.\n- **draw(): _DocumentFragment_** - Renders the component and returns a document fragment.\nThe rendered structure includes a formatted value wrapped in a container\nwith slots for additional customization.\n\n### **CSS Parts:**\n - **native** - The native part of the component.\n- **formatted** - The part representing the formatted value.\n- **start** - Slot for content before the formatted value.\n- **end** - Slot for content after the formatted value.",
@@ -1478,6 +1455,29 @@
             "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The slot for adding child elements or components."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Form class.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-grid",
           "description": "The Grid class is a custom web component that extends WJElement. It is a simple grid 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 Grid.\n- **draw(): _DocumentFragment_** - Draws the Grid element.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
@@ -1654,22 +1654,52 @@
           }
         },
         {
-          "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.",
+          "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": "",
-              "description": "The default slot for the infinite scroll."
-            }
+            { "name": "before", "description": "The before image slot." },
+            { "name": "after", "description": "The after image slot." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "infiniteScrollTemplate",
-                "description": "Getter for the infiniteScrollTemplate property."
+                "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": [],
+          "js": {
+            "properties": [
+              {
+                "name": "infiniteScrollTemplate",
+                "description": "Getter for the infiniteScrollTemplate property."
               },
               {
                 "name": "response",
@@ -1787,6 +1817,28 @@
             "events": []
           }
         },
+        {
+          "name": "wje-input-file",
+          "description": "This element represents a file input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component.\n- **afterDraw()** - After draw method for the InputFile class.\n\n### **CSS Parts:**\n - **native** - The native file input wrapper.\n- **input** - The text input.\n- **file-input** - The file input element. // @fires wje-input-file:change - Event fired when the file input changes.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Gets the value of the input file."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the InputFile class.",
+                "type": "string"
+              },
+              { "name": "_value", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-item",
           "description": "This element represents an item.\n---\n\n\n### **Methods:**\n - **isClickable(): _boolean_** - Returns the CSS styles for the component.\n- **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the item.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **start** - The start slot\n- **end** - The end slot\n- **error** - The error slot\n- **helper** - The helper slot\n\n### **CSS Properties:**\n - **--wje-item-background** - Sets the background color of the item. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-item-color** - Defines the text color for the item. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-item-padding-start** - Specifies the left padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-padding-end** - Specifies the right padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-padding-top** - Specifies the top padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-padding-bottom** - Specifies the bottom padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-start** - Specifies the left inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-end** - Specifies the right inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-top** - Specifies the top inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-bottom** - Specifies the bottom inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-border-radius** - Defines the border radius, providing rounded corners for the item. _(default: var(--wje-border-radius))_\n- **--wje-item-border-width** - Sets the border width of the item. Accepts any valid CSS length. _(default: var(--wje-border-width))_\n- **--wje-item-border-style** - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`. _(default: var(--wje-border-style))_\n- **--wje-item-border-color** - Defines the color of the item's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-item-min-height** - Sets the minimum height of the item to ensure consistent layout. _(default: var(--wje-min-height))_\n- **--wje-item-transition** - Specifies the transition effects for the item, such as for hover or focus states. _(default: var(--wje-transition))_\n- **--wje-item-inner-box-shadow** - Adds a shadow effect inside the item for a 3D appearance. _(default: var(--wje-box-shadow))_\n\n### **CSS Parts:**\n - **native** - The native part\n- **inner** - The inner part",
@@ -1825,28 +1877,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-input-file",
-          "description": "This element represents a file input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component.\n- **afterDraw()** - After draw method for the InputFile class.\n\n### **CSS Parts:**\n - **native** - The native file input wrapper.\n- **input** - The text input.\n- **file-input** - The file input element. // @fires wje-input-file:change - Event fired when the file input changes.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Gets the value of the input file."
-              },
-              {
-                "name": "className",
-                "description": "The class name for the InputFile class.",
-                "type": "string"
-              },
-              { "name": "_value", "type": "string" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-kanban",
           "description": "This element represents a Kanban board.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(context: _object_, store: _object_, params: _object_)** - Prepares the component before drawing.\n- **draw(): _DocumentFragment_** - Draws the component after it has been prepared.\n- **syncAria()** - Sync ARIA attributes on host.\n- **afterDraw()** - Called after the component has been drawn.\n- **setupDragAndDropEvents()** - Sets up the drag and drop events for the component.\n- **setupSelectAllCardsEvent()** - Sets up the select all cards event for the component.\n- **setupMenuItemClickEvents()** - Sets up the menu item click events for the component.\n- **updateSelectedCards(pool: _HTMLElement_, isChecked: _boolean_)** - Updates the selected cards in the pool.\n- **handlePoolAction(action: _string_, pool: _HTMLElement_)** - Handles the pool action.\n- **movePool(pool: _HTMLElement_, direction: _string_)** - Moves the pool in the specified direction.\n- **renamePool(pool: _HTMLElement_)** - Renames the pool.\n- **getCardPlaceholder(): _null|*_** - Gets the card placeholder.\n- **live(eventType: _string_, selector: _string_, callback: _function_)** - Adds a live event listener to the component.\n- **setSelectedCards(isChecked: _boolean_, card: _HTMLElement_)** - Sets the selected cards.\n- **setSelectedItems()** - Sets the selected items.\n- **getPages(page): _Promise<any>_** - Fetches the pages.\n\n### **Slots:**\n - _default_ - The default slot for the Kanban board.\n\n### **CSS Parts:**\n - **native-infinite-scroll** - Styles the native part of the Kanban board.",
@@ -1923,36 +1953,6 @@
             "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-level-indicator",
           "description": "LevelIndicator 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_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **afterDraw(): _void_** - Executes any additional operations or updates required after the drawing process is completed.\n- **syncAria()** - Sync ARIA attributes on host.\n- **updateBars(level: _number_, bars: _Array_): _void_** - Updates the class of each bar element based on the specified level.\n- **getColor(level: _number_, bars: _number_): _string | undefined_** - Determines the color indicator based on the given level and bars.\n\n### **CSS Parts:**\n - **** - Styles the element.",
@@ -2103,26 +2103,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-menu-label",
-          "description": "This element represents a menu label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu label.\n\n### **Slots:**\n - _default_ - The default slot for the menu label.\n\n### **CSS Properties:**\n - **--wje-menu-label-font-size** - Sets the font size of the menu label. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`). _(default: .75rem)_\n- **--wje-menu-label-weight** - Specifies the font weight of the menu label. Accepts values such as `normal`, `bold`, or numeric values (e.g., `400`, `600`). _(default: 600)_\n- **--wje-letter-spacing** - Defines the spacing between letters in the menu label. Accepts any valid CSS length unit. Default value ensures slight spacing for improved readability. _(default: .025rem)_\n- **--wje-menu-label-color** - Specifies the text color of the menu label. Accepts any valid CSS color value, including variables and named colors. _(default: var(--wje-color-contrast-6))_\n- **--wje-padding-top** - Sets the top padding of the menu label. Accepts any valid CSS length value to control spacing above the label. _(default: 0)_\n- **--wje-padding-bottom** - Sets the bottom padding of the menu label. Accepts any valid CSS length value to control spacing below the label. _(default: 0)_\n- **--wje-padding-start** - Specifies the left padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the right padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n- **--wje-padding-end** - Specifies the right padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the left padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu label.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the menu label."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "type": "string" },
-              { "name": "hasSubmenu" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-menu-item",
           "description": "This element represents a menu item.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the MenuItem element.\n- **beforeDraw()** - Removes the active attribute from the menu before drawing the MenuItem.\n- **draw(): _DocumentFragment_** - Draws the MenuItem element and sets the variant and collapse attributes.\n- **afterDraw()** - Adds event listeners after drawing the MenuItem.\n- **syncAria()** - Syncs ARIA attributes based on menu item state.\n- **collapseItem(native: _HTMLElement_): _HTMLElement_** - Creates a tooltip for the MenuItem when it is collapsed.\n- **showSubmenu()** - Shows the submenu of the MenuItem.\n- **hideSubmenu()** - Hides the submenu of the MenuItem.\n- **submenuToggle(e: _Event_)** - Toggles the active state of the submenu element.\nIf the submenu is not active, it sets the \"active\" attribute.\nIf the submenu is already active, it removes the \"active\" attribute.\n- **deactivateSubmenu()** - Deactivates the submenu by removing the \"active\" attribute.\n- **activateSubmenu()** - Activates the submenu of the menu item.\n- **beforeDisconnect()** - Gets the text from the element and returns it.\n- **getTextFromElement(element: _HTMLElement_): _string_** - Extracts and returns the concatenated text content from all text nodes within the specified element.\n\n### **Slots:**\n - _default_ - The default slot for the menu item.\n- **start** - The slot for the start of the menu item.\n- **end** - The slot for the end of the menu item.\n- **submenu** - The slot for the submenu of the menu item.\n\n### **CSS Properties:**\n - **--wje-menu-item-color** - Sets the text color of a menu item. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-menu-item-background** - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value. _(default: transparent)_\n- **--wje-menu-item-color-hover** - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-hover** - Sets the background color of a menu item when hovered. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-item-color-focus** - Defines the text color of a menu item when focused. Accepts any valid CSS color value. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-focus** - Specifies the background color of a menu item when focused. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-item-color-active** - Sets the text color of a menu item when active. Accepts any valid CSS color value. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-active** - Specifies the background color of a menu item when active. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-item-padding-top** - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`). _(default: .5rem)_\n- **--wje-menu-item-padding-bottom** - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`). _(default: .5rem)_\n- **--wje-menu-item-line-height** - Sets the line height for the text within a menu item. Accepts any valid CSS length value. _(default: 1.8rem)_\n- **--wje-menu-submenu-offset** - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-menu-item-icon-visibility** - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`. _(default: hidden)_\n- **--wje-menu-item-safe-triangle-cursor-x** - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-cursor-y** - Specifies the y-coordinate of the cursor for the safe triangle area. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-start-x** - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-start-y** - Defines the y-coordinate where the submenu's safe triangle starts. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-end-x** - Specifies the x-coordinate where the submenu's safe triangle ends. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-end-y** - Specifies the y-coordinate where the submenu's safe triangle ends. _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu item.\n- **submenu** - The submenu part of the menu item.",
@@ -2198,6 +2178,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-menu-label",
+          "description": "This element represents a menu label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu label.\n\n### **Slots:**\n - _default_ - The default slot for the menu label.\n\n### **CSS Properties:**\n - **--wje-menu-label-font-size** - Sets the font size of the menu label. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`). _(default: .75rem)_\n- **--wje-menu-label-weight** - Specifies the font weight of the menu label. Accepts values such as `normal`, `bold`, or numeric values (e.g., `400`, `600`). _(default: 600)_\n- **--wje-letter-spacing** - Defines the spacing between letters in the menu label. Accepts any valid CSS length unit. Default value ensures slight spacing for improved readability. _(default: .025rem)_\n- **--wje-menu-label-color** - Specifies the text color of the menu label. Accepts any valid CSS color value, including variables and named colors. _(default: var(--wje-color-contrast-6))_\n- **--wje-padding-top** - Sets the top padding of the menu label. Accepts any valid CSS length value to control spacing above the label. _(default: 0)_\n- **--wje-padding-bottom** - Sets the bottom padding of the menu label. Accepts any valid CSS length value to control spacing below the label. _(default: 0)_\n- **--wje-padding-start** - Specifies the left padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the right padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n- **--wje-padding-end** - Specifies the right padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the left padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu label.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the menu label."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "className", "type": "string" },
+              { "name": "hasSubmenu" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-option",
           "description": "This element represents an option.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the option.\n- **afterDraw(): _void_** - Method executed after the drawing process is completed.\nSets up an event listener for 'click' events, linking them to the specified callback function.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect(): _void_** - Handles operations or cleanup tasks that need to occur before disconnecting.\nRemoves an event listener associated with the 'click' event and a specified callback function.\n- **optionClickCallback(e: _Event_): _void_** - Handles the click event on an option element and dispatches a custom event when triggered.\n\n### **Slots:**\n - **start** - The slot for the start of the option.\n- _default_ - The default slot for the option.\n- **end** - The slot for the end of the option. // @fires wje-option:change - Event fired when the option is clicked.\n\n### **CSS Parts:**\n - **native** - The native part of the option.",
@@ -2420,6 +2420,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-panel",
+          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the panel.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the panel." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "className", "type": "string" },
+              { "name": "last", "type": "boolean" }
+            ],
+            "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.",
@@ -2490,23 +2507,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-panel",
-          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the panel.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "type": "string" },
-              { "name": "last", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-popup",
           "description": "This element represents a popup.\n---\n\n\n### **Events:**\n - **wje-portal:restored**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the popup.\n- **afterDraw()** - After Draws the component.\n- **setAnchor()** - Sets the anchor for the popup.\nAdds a click event listener to the anchor element.\n- **showHide()** - Toggles the active attribute of the popup.\n- **reposition()** - Repositions the popup.\nUses the floating-ui library to compute the position.\n- **_mountContentToPortal(): _void_** - Mounts content to a portal container by creating or ensuring a portal root and mirroring\nthe host's classes, attributes, and slot contents onto the portal. This method manages the\nmovement of default and arrow slot content into the portal shadow DOM, while also setting\nup necessary mutation observers to keep attributes in sync.\n- **_restoreContentFromPortal(): _void_** - Restores the content previously moved to a portal back to its original location.\nThis method handles restoring default slot content, arrow placeholders, disconnecting\nattribute mirroring observers, and cleaning up elements and containers related to the portal.\nEnsures all placeholders and native portal elements are properly removed from the DOM.\n- **_ensurePortalRoot(): _void_** - Ensures that a portal root is created and initialized properly with a shadow DOM and attached styles.\nIf the portal root already exists, the method exits early.\nThe method creates a `div` element in the document body and attaches a shadow DOM to it.\nIt also applies the required styles to the shadow DOM, either using constructable stylesheets\nor by appending a `<style>` element. Additionally, it copies CSS custom properties from the\ncomponent's computed styles to the portal host to ensure proper style resolution.\n- **show(dispatchEvent: _boolean_): _void_** - Displays the popup by portaling the content, managing the loader state, and attaching event handlers.\nOptionally dispatches a custom event when the popup is shown.\n- **hide(dispatchEvent)** - Hides the popup.\nRemoves the popup-active class from the floating element.\nCleans up the auto update for repositioning.\n\n### **Slots:**\n - **anchor** - The slot for the anchor of the popup.\n- **arrow** - The slot for the arrow of the popup.\n- _default_ - The default slot for the popup.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet popups. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet popups. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n- **--wje-popup-loader-inset** - Inset used by the popup loader overlay. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native part of the popup.\n- **backdrop** - The backdrop used by mobile bottom sheet presentation.",
@@ -2627,73 +2627,6 @@
             "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "top",
-              "description": "The slot for the top content of the QR code."
-            },
-            {
-              "name": "bottom",
-              "description": "The slot for the bottom content of the QR code."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Content encoded into the QR code.",
-                "type": "string"
-              },
-              {
-                "name": "background",
-                "description": "Background color of the QR code.",
-                "type": "string|null"
-              },
-              {
-                "name": "backgroundAlpha",
-                "description": "Background alpha channel in range 0-1.\nSupports aliases: background-alpha, backgroundalpha, backgroundAlpha.",
-                "type": "number|null"
-              },
-              {
-                "name": "foreground",
-                "description": "Foreground color of the QR code.",
-                "type": "string|null"
-              },
-              {
-                "name": "foregroundAlpha",
-                "description": "Foreground alpha channel in range 0-1.\nSupports aliases: foreground-alpha, foregroundalpha, foregroundAlpha.",
-                "type": "number|null"
-              },
-              {
-                "name": "level",
-                "description": "Error correction level. Accepted values: L, M, Q, H.",
-                "type": "string|null"
-              },
-              {
-                "name": "padding",
-                "description": "Padding around the QR code in pixels.",
-                "type": "number|null"
-              },
-              {
-                "name": "size",
-                "description": "Output QR code size in pixels.",
-                "type": "number|null"
-              },
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-radio",
           "description": "This class represents a Radio button element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the radio button.\n- **afterDraw()** - Sets up the event listeners for the component.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Toggles the radio button.\n\n### **Slots:**\n - _default_ - Default slot for the radio button label content.\n\n### **CSS Properties:**\n - **--wje-radio-margin-inline** - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component. _(default: 0)_\n- **--wje-radio-margin-top** - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component. _(default: 0)_\n- **--wje-radio-margin-bottom** - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component. // @fires wje-radio:change - Dispatched when the radio button's state changes. // @fires wje-radio:input - Dispatched when the radio button is interacted with. _(default: 0)_\n\n### **CSS Parts:**\n - **native-radio** - The native wrapper for the radio button.",
@@ -2735,13 +2668,119 @@
           }
         },
         {
-          "name": "wje-rate",
-          "description": "This element represents a rating component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the rating component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **createIcons(i: _number_): _Element_** - Creates the icons for the rating component.\n- **changeRate()** - Changes the rate of the rating component.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getIcons(index: _number_): _Element_** - Returns the icons for the rating component.\n- **getValueFromXPosition(coordinate: _number_): _number_** - Returns the value from the x position.\n- **roundToPrecision(numberToRound: _number_, precision: _number_): _number_** - Rounds a given number to the nearest specified precision.\n\n### **CSS Properties:**\n - **--wje-rate-gap** - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements. _(default: .25rem)_\n- **--wje-rate-color** - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables. _(default: var(--wje-color-contrast-11))_\n- **--wje-rate-selected-color** - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value. _(default: var(--wje-color-danger-9))_\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.",
+          "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": "is-hover", "value": { "type": "string" } },
+            { "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "top",
+              "description": "The slot for the top content of the QR code."
+            },
+            {
+              "name": "bottom",
+              "description": "The slot for the bottom content of the QR code."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Content encoded into the QR code.",
+                "type": "string"
+              },
+              {
+                "name": "background",
+                "description": "Background color of the QR code.",
+                "type": "string|null"
+              },
+              {
+                "name": "backgroundAlpha",
+                "description": "Background alpha channel in range 0-1.\nSupports aliases: background-alpha, backgroundalpha, backgroundAlpha.",
+                "type": "number|null"
+              },
+              {
+                "name": "foreground",
+                "description": "Foreground color of the QR code.",
+                "type": "string|null"
+              },
+              {
+                "name": "foregroundAlpha",
+                "description": "Foreground alpha channel in range 0-1.\nSupports aliases: foreground-alpha, foregroundalpha, foregroundAlpha.",
+                "type": "number|null"
+              },
+              {
+                "name": "level",
+                "description": "Error correction level. Accepted values: L, M, Q, H.",
+                "type": "string|null"
+              },
+              {
+                "name": "padding",
+                "description": "Padding around the QR code in pixels.",
+                "type": "number|null"
+              },
+              {
+                "name": "size",
+                "description": "Output QR code size in pixels.",
+                "type": "number|null"
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-rate",
+          "description": "This element represents a rating component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the rating component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **createIcons(i: _number_): _Element_** - Creates the icons for the rating component.\n- **changeRate()** - Changes the rate of the rating component.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getIcons(index: _number_): _Element_** - Returns the icons for the rating component.\n- **getValueFromXPosition(coordinate: _number_): _number_** - Returns the value from the x position.\n- **roundToPrecision(numberToRound: _number_, precision: _number_): _number_** - Rounds a given number to the nearest specified precision.\n\n### **CSS Properties:**\n - **--wje-rate-gap** - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements. _(default: .25rem)_\n- **--wje-rate-color** - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables. _(default: var(--wje-color-contrast-11))_\n- **--wje-rate-selected-color** - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value. _(default: var(--wje-color-danger-9))_\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "is-hover", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            {
               "name": "max",
               "description": "The maximum value of the rating component.",
               "value": { "type": "number" }
@@ -2816,40 +2855,30 @@
           }
         },
         {
-          "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-relative-time",
+          "description": "This element represents a relative time component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the relative time.\n- **getRelativeTimeString(lang)** - Returns the relative time string for the given date.\n- **isISODate(str: _string_): _boolean_** - Checks if the given string is an ISO date.\n\n### **CSS Parts:**\n - **native** - The native part of the relative time component.",
           "doc-url": "",
           "attributes": [
-            { "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."
-            }
+            { "name": "date", "value": { "type": "string" } },
+            { "name": "lang", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Getter for the value attribute."
+                "name": "date",
+                "description": "Gets the date of the relative time component."
               },
               {
-                "name": "required",
-                "description": "Getter for the name attribute."
+                "name": "objectDate",
+                "description": "Gets the object date of the relative time component."
               },
               {
-                "name": "label",
-                "description": "Getter for the label attribute."
+                "name": "className",
+                "description": "Sets the lang of the relative time component.",
+                "type": "string"
               },
-              { "name": "className", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
+              { "name": "localizer" }
             ],
             "events": []
           }
@@ -2907,35 +2936,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-relative-time",
-          "description": "This element represents a relative time component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the relative time.\n- **getRelativeTimeString(lang)** - Returns the relative time string for the given date.\n- **isISODate(str: _string_): _boolean_** - Checks if the given string is an ISO date.\n\n### **CSS Parts:**\n - **native** - The native part of the relative time component.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "date", "value": { "type": "string" } },
-            { "name": "lang", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "date",
-                "description": "Gets the date of the relative time component."
-              },
-              {
-                "name": "objectDate",
-                "description": "Gets the object date of the relative time component."
-              },
-              {
-                "name": "className",
-                "description": "Sets the lang of the relative time component.",
-                "type": "string"
-              },
-              { "name": "localizer" }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",
@@ -3036,6 +3036,70 @@
             "events": []
           }
         },
+        {
+          "name": "wje-row",
+          "description": "This element represents a row in a layout system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the row.\n\n### **Slots:**\n - _default_ - The default slot for the row.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the row." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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": "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": "bubble", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Returns the value of the slider."
+              },
+              {
+                "name": "min",
+                "description": "Returns the minimum value of the slider."
+              },
+              {
+                "name": "max",
+                "description": "Returns the maximum value of the slider."
+              },
+              {
+                "name": "step",
+                "description": "Returns the step value of the slider."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "setHandlePosition",
+                "description": "Sets the handle position of the slider."
+              },
+              {
+                "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": []
+          }
+        },
         {
           "name": "wje-router-outlet",
           "description": "This element represents a route in a routing system.\n---\n",
@@ -3159,50 +3223,6 @@
             "events": []
           }
         },
-        {
-          "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": "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": "bubble", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Returns the value of the slider."
-              },
-              {
-                "name": "min",
-                "description": "Returns the minimum value of the slider."
-              },
-              {
-                "name": "max",
-                "description": "Returns the maximum value of the slider."
-              },
-              {
-                "name": "step",
-                "description": "Returns the step value of the slider."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "setHandlePosition",
-                "description": "Sets the handle position of the slider."
-              },
-              {
-                "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": []
-          }
-        },
         {
           "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.",
@@ -3537,102 +3557,31 @@
           "js": {
             "properties": [
               {
-                "name": "startIndex",
-                "description": "Retrieves the starting index value stored as an attribute.\nIf the attribute 'start-index' exists and is not null, it parses the value as an integer and returns it.\nIf the attribute does not exist, it returns the default value of 0."
-              },
-              { "name": "active" },
-              { "name": "done" },
-              { "name": "className", "type": "string" },
-              {
-                "name": "beforeOpen",
-                "description": "A callback function that is executed before opening a step in a process.\nThis allows for custom behavior or logic to be applied before the step is displayed."
-              },
-              {
-                "name": "afterOpen",
-                "description": "Callback function executed after a step is opened.\nThis function can be overridden to implement custom behavior\nthat should take place immediately after a step is opened."
-              },
-              { "name": "currentStep", "type": "number" },
-              { "name": "localizer" },
-              { "name": "steps", "type": "array" },
-              { "name": "headerSteps", "type": "array" },
-              { "name": "_stepperId", "type": "number" }
-            ],
-            "events": [
-              { "name": "stepper:next", "type": "CustomEvent" },
-              { "name": "stepper:prev", "type": "CustomEvent" },
-              { "name": "stepper:finish", "type": "CustomEvent" }
-            ]
-          }
-        },
-        {
-          "name": "wje-tab",
-          "description": "This element represents a tab.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab.\n- **afterDraw()** - Sets up event listeners after the component is rendered.\n//\n- **syncAriaLabel()** - Sync aria-label on host based on slotted text when not provided.\n- **setRovingTabIndex(value: _number_)** - Sets the roving tabindex on the internal focusable anchor.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **CSS Properties:**\n - **--wje-tab-text-transform** - The text transformation for the tab (e.g., uppercase, lowercase). _(default: uppercase)_\n- **--wje-tab-font-weight** - The font weight of the tab text. _(default: 500)_\n- **--wje-tab-letter-spacing** - The letter spacing of the tab text. _(default: 0.06em)_\n- **--wje-tab-padding-inline** - The horizontal padding of the tab. _(default: 1rem)_\n- **--wje-tab-padding-top** - The top padding of the tab text. _(default: .75rem)_\n- **--wje-tab-padding-bottom** - The bottom padding of the tab text. _(default: .75rem)_\n- **--wje-tab-color-active** - The text color of the active tab. _(default: var(--wje-color-primary-11))_\n- **--wje-tab-color-hover** - The text color of the tab when hovered. //@fires wje-tab:change - Dispatched when the tab is changed. _(default: var(--wje-color-primary-1))_",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "panel",
-                "description": "Retrieves the value of the 'panel' attribute of the element."
-              },
-              {
-                "name": "route",
-                "description": "Retrieves the value of the 'route' attribute.\nIf the 'route' attribute is not set, it returns null."
-              },
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              },
-              {
-                "name": "last",
-                "description": "Indicates whether this is the last tab.",
-                "type": "boolean"
-              },
-              { "name": "_hasPanel", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-row",
-          "description": "This element represents a row in a layout system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the row.\n\n### **Slots:**\n - _default_ - The default slot for the row.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the row." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-tab-panel",
-          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the tab panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
+                "name": "startIndex",
+                "description": "Retrieves the starting index value stored as an attribute.\nIf the attribute 'start-index' exists and is not null, it parses the value as an integer and returns it.\nIf the attribute does not exist, it returns the default value of 0."
+              },
+              { "name": "active" },
+              { "name": "done" },
+              { "name": "className", "type": "string" },
+              {
+                "name": "beforeOpen",
+                "description": "A callback function that is executed before opening a step in a process.\nThis allows for custom behavior or logic to be applied before the step is displayed."
+              },
+              {
+                "name": "afterOpen",
+                "description": "Callback function executed after a step is opened.\nThis function can be overridden to implement custom behavior\nthat should take place immediately after a step is opened."
+              },
+              { "name": "currentStep", "type": "number" },
+              { "name": "localizer" },
+              { "name": "steps", "type": "array" },
+              { "name": "headerSteps", "type": "array" },
+              { "name": "_stepperId", "type": "number" }
             ],
-            "events": []
+            "events": [
+              { "name": "stepper:next", "type": "CustomEvent" },
+              { "name": "stepper:prev", "type": "CustomEvent" },
+              { "name": "stepper:finish", "type": "CustomEvent" }
+            ]
           }
         },
         {
@@ -3669,6 +3618,37 @@
             "events": []
           }
         },
+        {
+          "name": "wje-tab",
+          "description": "This element represents a tab.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab.\n- **afterDraw()** - Sets up event listeners after the component is rendered.\n//\n- **syncAriaLabel()** - Sync aria-label on host based on slotted text when not provided.\n- **setRovingTabIndex(value: _number_)** - Sets the roving tabindex on the internal focusable anchor.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **CSS Properties:**\n - **--wje-tab-text-transform** - The text transformation for the tab (e.g., uppercase, lowercase). _(default: uppercase)_\n- **--wje-tab-font-weight** - The font weight of the tab text. _(default: 500)_\n- **--wje-tab-letter-spacing** - The letter spacing of the tab text. _(default: 0.06em)_\n- **--wje-tab-padding-inline** - The horizontal padding of the tab. _(default: 1rem)_\n- **--wje-tab-padding-top** - The top padding of the tab text. _(default: .75rem)_\n- **--wje-tab-padding-bottom** - The bottom padding of the tab text. _(default: .75rem)_\n- **--wje-tab-color-active** - The text color of the active tab. _(default: var(--wje-color-primary-11))_\n- **--wje-tab-color-hover** - The text color of the tab when hovered. //@fires wje-tab:change - Dispatched when the tab is changed. _(default: var(--wje-color-primary-1))_",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "panel",
+                "description": "Retrieves the value of the 'panel' attribute of the element."
+              },
+              {
+                "name": "route",
+                "description": "Retrieves the value of the 'route' attribute.\nIf the 'route' attribute is not set, it returns null."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              {
+                "name": "last",
+                "description": "Indicates whether this is the last tab.",
+                "type": "boolean"
+              },
+              { "name": "_hasPanel", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-textarea",
           "description": "This element represents a textarea input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _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.",
@@ -3715,6 +3695,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-tab-panel",
+          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the tab panel." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "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.",
@@ -3759,39 +3759,28 @@
           }
         },
         {
-          "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-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.",
           "doc-url": "",
-          "attributes": [
-            { "name": "checked", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "required", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
-            { "name": "", "description": "The default slot for the toggle." }
+            {
+              "name": "",
+              "description": "Slot for the content of the timeline item."
+            },
+            {
+              "name": "status",
+              "description": "Slot for the status of the timeline item."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "customErrorDisplay",
-                "description": "Getter for the customErrorDisplay attribute."
-              },
-              {
-                "name": "validateOnChange",
-                "description": "Getter for the validateOnChange attribute."
-              },
-              {
-                "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": "checked", "description": "Get checked attribute." },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
+                "name": "className",
+                "description": "Returns the class name of the tab.",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -3950,73 +3939,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" }
-            ],
-            "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "Slot for the content of the timeline item."
-            },
-            {
-              "name": "status",
-              "description": "Slot for the status of the timeline item."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Returns the class name of the tab.",
-                "type": "string"
-              }
+              { "name": "checked", "description": "Get checked attribute." },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
             ],
             "events": []
           }
@@ -4074,32 +4029,46 @@
           }
         },
         {
-          "name": "wje-tree",
-          "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **getExpandCollapseIcon(item: _HTMLElement_, status: _string_): _void_** - Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
+          "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": [],
+          "attributes": [
+            { "name": "breakpoint", "value": { "type": "string" } },
+            { "name": "max-items", "value": { "type": "string" } },
+            { "name": "visible-items", "value": { "type": "string" } }
+          ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot to place `wje-tree-item` child components."
+              "description": "The default slot for the toolbar action."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "selection",
-                "description": "Gets the current selection mode for the element.\nIf no selection is explicitly set, it defaults to 'single'."
-              },
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
               },
               {
-                "name": "handleClick",
-                "description": "Handles the click event triggered by the user interaction.\nIdentifies the closest tree item element to the event target and sets it\nas the selected item. Ensures that only one item is selected at a time, resetting\nthe selection state for all other items."
-              }
+                "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": []
           }
@@ -4147,6 +4116,37 @@
             "events": []
           }
         },
+        {
+          "name": "wje-tree",
+          "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **getExpandCollapseIcon(item: _HTMLElement_, status: _string_): _void_** - Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot to place `wje-tree-item` child components."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "selection",
+                "description": "Gets the current selection mode for the element.\nIf no selection is explicitly set, it defaults to 'single'."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              {
+                "name": "handleClick",
+                "description": "Handles the click event triggered by the user interaction.\nIdentifies the closest tree item element to the event target and sets it\nas the selected item. Ensures that only one item is selected at a time, resetting\nthe selection state for all other items."
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-visually-hidden",
           "description": "This element represents a visually hidden element.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the visually hidden element.\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",