wj-elements 0.7.5 → 0.7.6

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "wj-elements",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -517,7 +517,7 @@
         },
         {
           "name": "wje-button",
-          "description": "This class represents Button element, extending the WJElement class.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the Button element.\n- **afterDraw()** - After draw method for the Button element.\n- **beforeDisconnect()** - Before disconnect method for the Button element.\n- **syncToggleState()** - Keeps toggle slot visibility aligned with the current value.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n\n### **Slots:**\n - _default_ - The button main content.\n- **icon** - The button icon.\n- **caret** - The button caret.\n- **start** - The button start slot.\n- **end** - The button end slot.\n- **toggle** - The button toggle slot.\n\n### **CSS Properties:**\n - **--wje-button-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-button-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-button-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-button-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-button-border-style** - Border style of the component; _(default: solid)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-button-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "description": "This class represents Button element, extending the WJElement class.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the Button element.\n- **afterDraw()** - After draw method for the Button element.\n- **beforeDisconnect()** - Before disconnect method for the Button element.\n- **syncToggleState()** - Keeps toggle slot visibility aligned with the current value.\n- **syncAria()** - Syncs accessibility attributes on the internal native control.\n\n### **Slots:**\n - _default_ - The button main content.\n- **icon** - The button icon.\n- **icon-only** - The icon used when the button has no visible text.\n- **caret** - The button caret.\n- **start** - The button start slot.\n- **end** - The button end slot.\n- **toggle** - The button toggle slot.\n\n### **CSS Properties:**\n - **--wje-button-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-button-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-button-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-button-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-button-border-style** - Border style of the component; _(default: solid)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-button-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "disabled", "value": { "type": "string" } },
@@ -525,11 +525,21 @@
             { "name": "value", "value": { "type": "string" } },
             { "name": "active", "value": { "type": "string" } },
             { "name": "href", "value": { "type": "string" } },
-            { "name": "toggle", "value": { "type": "string" } }
+            { "name": "toggle", "value": { "type": "string" } },
+            {
+              "name": "label",
+              "description": "Accessible name forwarded to the internal native button or link.",
+              "value": { "type": "string" }
+            },
+            { "name": "aria-label", "value": { "type": "string" } }
           ],
           "slots": [
             { "name": "", "description": "The button main content." },
             { "name": "icon", "description": "The button icon." },
+            {
+              "name": "icon-only",
+              "description": "The icon used when the button has no visible text."
+            },
             { "name": "caret", "description": "The button caret." },
             { "name": "start", "description": "The button start slot." },
             { "name": "end", "description": "The button end slot." },
@@ -559,6 +569,10 @@
                 "name": "tooltip",
                 "description": "Get variant of the Button element."
               },
+              {
+                "name": "label",
+                "description": "Get the accessible label of the Button element."
+              },
               {
                 "name": "dialog",
                 "description": "Get variant of the Button element."
@@ -746,6 +760,26 @@
             "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-carousel",
           "description": "Carousel class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Carousel.\n- **beforeDraw()** - Before draw method for the Carousel.\n- **draw(): _DocumentFragment_** - Draw method for the Carousel.\n- **afterDraw()** - After draw method for the Carousel.\n- **syncActiveToSnapStart()** - Sync `activeSlide` to the slide whose leading edge is closest to the snap start.\n- **syncSlideMetrics()** - Syncs computed CSS variables derived from `slide-per-page`.\n- **getScrollPaddingInlineStart(): _number_** - Returns the inline scroll padding used by the snap area.\n- **getControlBehavior(): _string_** - Returns the interaction scroll behavior for UI controls.\nContinuous multi-slide loops use instant snapping to avoid blank edge states\nwhile the browser is still animating a previous smooth scroll.\n- **setIntersectionObserver()** - Sets up the IntersectionObserver for the Carousel.\n- **goToSlide(index, behavior, next)** - Goes to the slide.\n- **setActiveVisualSlide(vIndex: _number_)** - Sets the active class on the currently targeted visual slide and removes it elsewhere.\n- **syncAria()** - Syncs ARIA attributes on the carousel and slides.\n- **cloneFirstAndLastItems()** - Clones the first and last items.\n- **createLoopClone(item: _HTMLElement_): _HTMLElement_** - Creates a sanitized loop clone that does not inherit transient render state\nsuch as inline `visibility: hidden` from the source slide.\n- **removeLoopClones()** - Removes loop clones so they can be rebuilt for the current configuration.\n- **getLoopCloneCount(totalSlides: _number_): _number_** - Returns how many slides should be cloned on each side when loop is enabled.\n- **scrollToVisualIndex(vIndex: _number_, behavior: _string_)** - Scrolls the carousel to a visual slide index.\n- **removeActiveSlide()** - Goes to the next slide.\n- **changePagination()** - Goes to the next slide.\n- **changeThumbnails()** - Goes to the next slide.\n- **createNextButton(): _Element_** - Goes to the next slide.\n- **createPreviousButton(): _Element_** - Goes to the next slide.\n- **createPagination(): _Element_** - Goes to the next slide.\n- **createThumbnails(): _Element_** - Goes to the next slide.\n- **nextSlide()** - Goes to the next slide.\n- **previousSlide()** - Goes to the previous slide.\n- **getSlides(): _Array_** - Goes to the slide.\n- **getSlidesWithClones(): _Array_** - Goes to the slide.\n- **getVisualIndexForLogical(index)** - Maps logical index to visual index, including leading clones when loop is enabled.\n- **getLogicalIndexForVisual(vIndex)** - Maps visual index to logical index, including edge clones when loop is enabled.\n- **getMaxVisibleStartIndex(totalSlides: _number_): _number_** - Returns the maximum logical slide index that can still render a full viewport.\n- **normalizeLoopIndex(index: _number_, totalSlides: _number_): _number_** - Normalizes a logical index for the active loop mode.\n- **getLoopLogicalCount(totalSlides: _number_): _number_** - Returns how many logical positions are reachable for the current loop mode.\n- **getPaginationIndexes(): _number[]_** - Returns the pagination indexes for the current carousel mode.\n- **canGoNext(): _boolean_** - Goes to the slide.\n- **canGoPrevious(): _boolean_** - Goes to the slide.\n\n### **Slots:**\n - _default_ - The carousel main content.\n\n### **CSS Properties:**\n - **--wje-carousel-size** - Effective size of one carousel item. _(default: 100%)_\n- **--wje-carousel-gap** - Gap between carousel items. _(default: 0.5rem)_",
@@ -803,26 +837,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-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.",
@@ -1002,59 +1016,24 @@
           }
         },
         {
-          "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.",
+          "name": "wje-container",
+          "description": "The Container class is a custom web component that extends WJElement. It is a simple container that can hold other elements or components.\nIt provides a slot for adding child elements or components. The Container class also supports indentation through the `indent` property.\nThe indentation is applied as a CSS variable (`--wje-container-indent`) which can be used in the styles of child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Container.\n- **draw(): _DocumentFragment_** - Draws the Container element.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.\n\n### **CSS Properties:**\n - **--wje-container-indent** - The indentation of the container. _(default: undefined)_",
           "doc-url": "",
-          "attributes": [
-            {
-              "name": "for",
-              "description": "The id of the element to copy content from.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "label",
-              "description": "Accessible label for the button. Also used as fallback tooltip text when the `tooltip` attribute is present without a value.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "label-success",
-              "description": "Text displayed in the tooltip after a successful copy. Used only when the `tooltip` attribute is present.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "tooltip",
-              "description": "Enables the tooltip. When set to a string, the value is used as the default tooltip content.",
-              "value": { "type": "string" }
-            },
+          "attributes": [],
+          "slots": [
             {
-              "name": "value",
-              "description": "The text to be copied.",
-              "value": { "type": "string" }
+              "name": "",
+              "description": "The slot for adding child elements or components."
             }
           ],
-          "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
-          ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Getter for the value property."
-              },
-              { "name": "className", "type": "string" },
-              { "name": "clicked", "description": "Handles the click event." },
-              {
-                "name": "keydown",
-                "description": "Handles the keydown event."
-              },
-              { "name": "focused", "description": "Handles the focus event." },
-              { "name": "blurred", "description": "Handles the blur event." },
-              {
-                "name": "copied",
-                "description": "Handles the copied event.\nYou can override this method to customize the behavior when the text is copied."
-              },
-              { "name": "timeout", "type": "number" }
+                "name": "className",
+                "description": "Class name for the Container.",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -1105,24 +1084,59 @@
           }
         },
         {
-          "name": "wje-container",
-          "description": "The Container class is a custom web component that extends WJElement. It is a simple container that can hold other elements or components.\nIt provides a slot for adding child elements or components. The Container class also supports indentation through the `indent` property.\nThe indentation is applied as a CSS variable (`--wje-container-indent`) which can be used in the styles of child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Container.\n- **draw(): _DocumentFragment_** - Draws the Container element.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.\n\n### **CSS Properties:**\n - **--wje-container-indent** - The indentation of the container. _(default: undefined)_",
+          "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.",
           "doc-url": "",
-          "attributes": [],
-          "slots": [
+          "attributes": [
             {
-              "name": "",
-              "description": "The slot for adding child elements or components."
+              "name": "for",
+              "description": "The id of the element to copy content from.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible label for the button. Also used as fallback tooltip text when the `tooltip` attribute is present without a value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label-success",
+              "description": "Text displayed in the tooltip after a successful copy. Used only when the `tooltip` attribute is present.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "tooltip",
+              "description": "Enables the tooltip. When set to a string, the value is used as the default tooltip content.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "The text to be copied.",
+              "value": { "type": "string" }
             }
           ],
+          "slots": [
+            { "name": "", "description": "This is a default/unnamed slot." }
+          ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "className",
-                "description": "Class name for the Container.",
-                "type": "string"
-              }
+                "name": "value",
+                "description": "Getter for the value property."
+              },
+              { "name": "className", "type": "string" },
+              { "name": "clicked", "description": "Handles the click event." },
+              {
+                "name": "keydown",
+                "description": "Handles the keydown event."
+              },
+              { "name": "focused", "description": "Handles the focus event." },
+              { "name": "blurred", "description": "Handles the blur event." },
+              {
+                "name": "copied",
+                "description": "Handles the copied event.\nYou can override this method to customize the behavior when the text is copied."
+              },
+              { "name": "timeout", "type": "number" }
             ],
             "events": []
           }
@@ -1431,29 +1445,6 @@
             "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.",
-          "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 Grid 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.",
@@ -1501,6 +1492,29 @@
             "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.",
+          "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 Grid class.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-header",
           "description": "`Header` is a custom web component that represents a header. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the header content\n\n### **CSS Properties:**\n - **--wje-header-background** - The background of the header element. _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header element. _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header element. _(default: 0 0 1px 0)_\n- **--wje-header-border-style** - The border styles of the header _(default: solid)_\n- **--wje-header-top** - The position top of the header _(default: 0)_\n- **--wje-header-height** - The height of the header element. _(default: 60px)_\n- **--wje-header-z-index** - The z-index used when the header is sticky. _(default: 100)_\n\n### **CSS Parts:**\n - **native** - The native part",
@@ -1817,28 +1831,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-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",
@@ -1878,40 +1870,76 @@
           }
         },
         {
-          "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.",
+          "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": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the Kanban board."
-            }
-          ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "dependencies",
-                "description": "Dependencies of the Option component.",
-                "type": "object"
-              },
-              {
-                "name": "response",
-                "description": "Gets the URL for fetching data."
-              },
-              {
-                "name": "selectedItems",
-                "description": "Gets the URL for fetching data."
+                "name": "value",
+                "description": "Gets the value of the input file."
               },
               {
                 "name": "className",
-                "description": "Sets the URL for fetching data.",
+                "description": "The class name for the InputFile class.",
                 "type": "string"
               },
-              {
-                "name": "customForeach",
-                "description": "Iterates over a list of items, generates an HTML card for each, and appends it to the specified pool's content area."
+              { "name": "_value", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-label",
+          "description": "This element represents a label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`). _(default: black)_\n- **--wje-label-font-size** - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs. // @fires wje-label:change - Event fired when the label is changed. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the label." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the Kanban board."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "dependencies",
+                "description": "Dependencies of the Option component.",
+                "type": "object"
+              },
+              {
+                "name": "response",
+                "description": "Gets the URL for fetching data."
+              },
+              {
+                "name": "selectedItems",
+                "description": "Gets the URL for fetching data."
+              },
+              {
+                "name": "className",
+                "description": "Sets the URL for fetching data.",
+                "type": "string"
+              },
+              {
+                "name": "customForeach",
+                "description": "Iterates over a list of items, generates an HTML card for each, and appends it to the specified pool's content area."
               },
               {
                 "name": "menuItemClickHandler",
@@ -1940,12 +1968,12 @@
           }
         },
         {
-          "name": "wje-label",
-          "description": "This element represents a label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`). _(default: black)_\n- **--wje-label-font-size** - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs. // @fires wje-label:change - Event fired when the label is changed. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
+          "name": "wje-list",
+          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of attributes to observe for changes.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. Accepts any valid CSS length. _(default: 8px)_\n- **--wje-list-background** - The background of the list. Accepts any valid CSS color value. _(default: var(--wje-background))_",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The default slot for the label." }
+            { "name": "", "description": "The default slot for the list." }
           ],
           "events": [],
           "js": {
@@ -1985,20 +2013,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-list",
-          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of attributes to observe for changes.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. Accepts any valid CSS length. _(default: 8px)_\n- **--wje-list-background** - The background of the list. Accepts any valid CSS color value. _(default: var(--wje-background))_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the list." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-main",
           "description": "This element represents a main section.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the main section.\n\n### **Slots:**\n - _default_ - The default slot for the main section.",
@@ -2103,6 +2117,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-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.",
@@ -2178,26 +2212,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-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.",
@@ -2329,6 +2343,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-orgchart-group",
+          "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart group.\n- **afterDraw()** - After Draws the component for the org chart group.\n\n### **CSS Parts:**\n - **** - Styles the element.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-orgchart",
           "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
@@ -2356,23 +2387,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-orgchart-group",
-          "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart group.\n- **afterDraw()** - After Draws the component for the org chart group.\n\n### **CSS Parts:**\n - **** - Styles the element.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-orgchart-item",
           "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart item.\n- **afterDraw()** - After Draws the component for the org chart item.\n\n### **Slots:**\n - _default_ - The default slot for the orgchart item.\n- **child** - The child slot for the orgchart item.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.\n- **expander** - Styles the expander element. // @fires wje-orgchart-item:click - Emitted when the item card is clicked.",
@@ -2422,7 +2436,7 @@
         },
         {
           "name": "wje-pagination",
-          "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS Parts:**\n - **native** - The wrapper element for the pagination component.",
+          "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS Properties:**\n - **--wje-pagination-gap** - Gap between the summary and page navigation. _(default: 1rem)_\n- **--wje-pagination-summary-gap** - Gap between summary items. _(default: 1rem)_\n- **--wje-pagination-page-size-gap** - Gap between the page-size label and selector. _(default: var(--wje-spacing-small))_\n- **--wje-pagination-mobile-gap** - Gap between pagination rows below the md container width. _(default: var(--wje-spacing-x-large))_\n- **--wje-pagination-page-size-width** - Width of the page-size selector. _(default: 68px)_\n- **--wje-pagination-page-button-width** - Width of pagination buttons. _(default: 32px)_\n- **--wje-pagination-page-button-gap** - Gap between pagination buttons. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The wrapper element for the pagination component.\n- **summary** - The wrapper for the page-size selector and item range.\n- **page-size** - The wrapper for the page-size label and selector.\n- **page-size-label** - The page-size selector label.\n- **page-size-select** - The page-size selector.\n- **info** - The item range information.\n- **pages** - The page navigation wrapper.\n- **page-button** - Any pagination button.\n- **page-number** - A numbered page button.\n- **current-page** - The current page button.\n- **first-button** - The button that navigates to the first page.\n- **previous-button** - The button that navigates to the previous page.\n- **next-button** - The button that navigates to the next page.\n- **last-button** - The button that navigates to the last page.\n- **dots** - The page range ellipsis.",
           "doc-url": "",
           "attributes": [
             { "name": "page", "value": { "type": "string" } },
@@ -2628,41 +2642,40 @@
           }
         },
         {
-          "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.",
+          "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": "checked", "value": { "type": "string" } },
+            { "name": "required", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } }
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } }
           ],
           "slots": [
             {
               "name": "",
-              "description": "Default slot for the radio button label content."
+              "description": "The default slot for the radio group."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "value" },
               {
-                "name": "checked",
-                "description": "Gets the checked property of the radio button."
+                "name": "value",
+                "description": "Getter for the value attribute."
               },
               {
-                "name": "disabled",
-                "description": "Get disabled attribute value."
+                "name": "required",
+                "description": "Getter for the name attribute."
               },
               {
-                "name": "className",
-                "description": "Sets the color of the radio button.",
-                "type": "string"
+                "name": "label",
+                "description": "Getter for the label attribute."
               },
-              {
-                "name": "inputEvent",
-                "description": "Called when an attribute changes."
-              }
+              { "name": "className", "type": "string" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
             ],
             "events": []
           }
@@ -2735,40 +2748,41 @@
           }
         },
         {
-          "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-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.",
           "doc-url": "",
           "attributes": [
-            { "name": "required", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
+            { "name": "checked", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
+            { "name": "value", "value": { "type": "string" } }
           ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the radio group."
+              "description": "Default slot for the radio button label content."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              { "name": "value" },
               {
-                "name": "value",
-                "description": "Getter for the value attribute."
+                "name": "checked",
+                "description": "Gets the checked property of the radio button."
               },
               {
-                "name": "required",
-                "description": "Getter for the name attribute."
+                "name": "disabled",
+                "description": "Get disabled attribute value."
               },
               {
-                "name": "label",
-                "description": "Getter for the label attribute."
+                "name": "className",
+                "description": "Sets the color of the radio button.",
+                "type": "string"
               },
-              { "name": "className", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
+              {
+                "name": "inputEvent",
+                "description": "Called when an attribute changes."
+              }
             ],
             "events": []
           }
@@ -2854,35 +2868,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-dropzone",
           "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
@@ -2907,70 +2892,76 @@
           }
         },
         {
-          "name": "wje-reorder-handle",
-          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
+          "name": "wje-reorder",
+          "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
           "doc-url": "",
-          "attributes": [
-            { "name": "dropzone", "value": { "type": "string" } },
-            { "name": "parent", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder handle."
+              "description": "The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed."
             }
           ],
-          "events": [],
+          "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }],
           "js": {
             "properties": [
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
-              }
+              },
+              { "name": "dragEl", "type": "null" },
+              { "name": "items", "type": "array" },
+              { "name": "originalIndex", "type": "null" },
+              { "name": "isDragging", "type": "boolean" },
+              { "name": "offsetX", "type": "number" },
+              { "name": "offsetY", "type": "number" },
+              { "name": "cloneEl", "type": "null" }
             ],
-            "events": []
+            "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }]
           }
         },
         {
-          "name": "wje-reorder",
-          "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
+          "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": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed."
-            }
+          "attributes": [
+            { "name": "date", "value": { "type": "string" } },
+            { "name": "lang", "value": { "type": "string" } }
           ],
-          "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }],
+          "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": "The class name for the component.",
+                "description": "Sets the lang of the relative time component.",
                 "type": "string"
               },
-              { "name": "dragEl", "type": "null" },
-              { "name": "items", "type": "array" },
-              { "name": "originalIndex", "type": "null" },
-              { "name": "isDragging", "type": "boolean" },
-              { "name": "offsetX", "type": "number" },
-              { "name": "offsetY", "type": "number" },
-              { "name": "cloneEl", "type": "null" }
+              { "name": "localizer" }
             ],
-            "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }]
+            "events": []
           }
         },
         {
-          "name": "wje-reorder-item",
-          "description": "This element represents a reorder item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder item.\n\n### **CSS Parts:**\n - **native-reorder-item** - The native part of the reorder item.\n- **handle-part** - The handle part of the reorder item when the handle slot is present.",
+          "name": "wje-reorder-handle",
+          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "dropzone", "value": { "type": "string" } },
+            { "name": "parent", "value": { "type": "string" } }
+          ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder item."
+              "description": "The default slot for the reorder handle."
             }
           ],
           "events": [],
@@ -3008,6 +2999,29 @@
             "events": []
           }
         },
+        {
+          "name": "wje-reorder-item",
+          "description": "This element represents a reorder item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder item.\n\n### **CSS Parts:**\n - **native-reorder-item** - The native part of the reorder item.\n- **handle-part** - The handle part of the reorder item when the handle slot is present.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the reorder item."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-router-link",
           "description": "This element represents a router link in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the router link.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the router link.",
@@ -3074,107 +3088,45 @@
           }
         },
         {
-          "name": "wje-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the select.\n- **afterDraw(): _void_** - Executes post-render logic for the custom element.\nThis includes validation, event listener registration, managing custom attributes, and\nhandling options initialization for the component.\n- **getAllOptions(): _NodeList_** - Returns all the options as HTML.\n- **selectionChanged(options: _Array|null_, length: _number_): _void_** - Handles changes in the selection for a component, updating internal values, input fields,\nand visual presentation (like chips or slots) as per the given selection options.\n- **selections(silence: _boolean_): _void_** - Handles the logic for updating selections based on the current selected options,\nupdating chips content, and dispatching change events if necessary.\n- **counter(): _void_** - Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.\nIf the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.\n- **getChip(option: _object_): _HTMLElement_** - Creates and returns a chip element with specified properties and a label.\n- **htmlOption(item: _object_, map: _@param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * _): _HTMLElement_** - Generates an HTML option element based on the provided item and mapping.\n- **htmlSelectedItem(item: _any_): _any_** - Returns the provided item.\n- **addOption(optionData: _object_, silent: _boolean_, map: _@param {string} [map.value] The key in optionData that represents the value of the option.\n\t * @param {string} [map.text] The key in optionData that represents the text of the option.\n\t * _): _void_** - Adds a new option to the component.\n- **addOptions(optionsData: _Array | object_, silent: _boolean_, map: _@param {string} [map.value] The property in the optionsData that represents the value of the option.\n\t * @param {string} [map.text] The property in the optionsData that represents the text of the option.\n\t * _): _void_** - Adds one or more options to a collection. If the input is an array, it adds each option within the array.\nOtherwise, it adds a single option.\n- **selectOption(value: _string_, silent: _boolean_): _void_** - Selects an option from the available options within the component.\n- **selectOptions(values: _any|any[]_, silent: _boolean_): _void_** - Selects multiple options based on the provided values. If a single value is provided, it selects that option.\nIf an array of values is provided, it iterates through the array and selects each option.\n- **optionCheckSlot(option: _HTMLElement_): _void_** - Clones and appends an icon with the \"check\" slot to the specified option element.\nIf the option already contains a custom element with slot=\"check\" (e.g. <wje-status slot=\"check\">),\nit is left untouched and no template icon is added.\n- **clearSelections(): _void_** - Clears all selected options and resets selections.\nThe method ensures that all options are deselected, updates the internal state, validates the selections,\npropagates the validation status, and indicates invalid state if necessary.\n- **syncAria()** - Syncs ARIA attributes on the host element.",
+          "name": "wje-slider",
+          "description": "Represents a slider component that extends the WJElement class.\nThis slider supports features such as min, max, step values, bubble display, and event handling.\nIt offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the slider.\n- **afterDraw(): _void_** - Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n- Sets the position of the handle.\n- Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n- Dispatches initialization, movement, and change custom events for the slider input element.\n- Updates the bubble position and value dynamically on input changes.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getPercentage(min: _number_, max: _number_, value: _number_): _number_** - Calculates the percentage of a value within a given range.",
           "doc-url": "",
           "attributes": [
-            { "name": "active", "value": { "type": "string" } },
+            { "name": "max", "value": { "type": "string" } },
+            { "name": "min", "value": { "type": "string" } },
+            { "name": "step", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "readonly", "value": { "type": "string" } },
-            { "name": "portaled", "value": { "type": "string" } }
+            { "name": "bubble", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "dependencies",
-                "description": "An object representing component dependencies with their respective classes.\nEach property in the object maps a custom component name (as a string key)\nto its corresponding class or constructor.",
-                "type": "object"
-              },
               {
                 "name": "value",
-                "description": "Retrieves the current value."
-              },
-              {
-                "name": "maxOptions",
-                "description": "Retrieves the maximum number of options allowed.\nParses the value of the 'max-options' attribute from the element and converts it to a number.\nIf the attribute is not present or cannot be converted to a valid number, defaults to 1."
-              },
-              { "name": "defaultValue" },
-              {
-                "name": "portaled",
-                "description": "Getter for the `portaled` attribute value."
-              },
-              {
-                "name": "isPortaled",
-                "description": "Checks whether popup content should be portaled."
-              },
-              {
-                "name": "trigger",
-                "description": "Returns the trigger value."
-              },
-              {
-                "name": "disabled",
-                "description": "Retrieves the current state of the 'disabled' attribute."
-              },
-              {
-                "name": "readonly",
-                "description": "Checks if the 'readonly' attribute is present on the element."
-              },
-              {
-                "name": "maxHeight",
-                "description": "Retrieves the maximum height value, which is determined by the 'max-height' attribute.\nIf the attribute is not set, a default value of '200px' is returned."
-              },
-              {
-                "name": "offset",
-                "description": "Gets the value of the offset attribute of the current element.\nIf the offset attribute is not present, returns a default value of '0'."
-              },
-              {
-                "name": "selectedOptions",
-                "description": "Retrieves the selected options."
-              },
-              {
-                "name": "lazy",
-                "description": "Getter for the 'lazy' property."
+                "description": "Returns the value of the slider."
               },
               {
-                "name": "noSize",
-                "description": "Gets the value of the 'no-size' attribute for the element."
+                "name": "min",
+                "description": "Returns the minimum value of the slider."
               },
               {
-                "name": "customErrorDisplay",
-                "description": "Getter for the customErrorDisplay attribute."
+                "name": "max",
+                "description": "Returns the maximum value of the slider."
               },
               {
-                "name": "options",
-                "description": "Retrieves the complete list of options available for the component.\nThe options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\nIf a `wje-options` element is present within the component, its loaded options are included in the merged list.\nIn the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order."
+                "name": "step",
+                "description": "Returns the step value of the slider."
               },
               { "name": "className", "type": "string" },
               {
-                "name": "optionChange",
-                "description": "Handles the change event for an option element within a select-like component.\nThis method processes user interactions with options and updates the state of the component,\nincluding selection management, validation, and UI updates. Behavior differs based on\nwhether the component supports multiple selections.\nKey functionality:\n- Prevents the default behavior, event propagation, and immediate propagation of the event.\n- Retrieves all options within the component.\n- If the component doesn't support multiple selection:\n  - Marks only the clicked option as selected and deselects others.\n  - Hides the option popup.\n- If the component supports multiple selection:\n  - Processes the clicked option without deselecting others.\n- Updates the selected options and triggers validation.\n- Marks the form state as non-pristine.\n- Propagates the validation state to other relevant parts of the component or system."
-              },
-              {
-                "name": "processClickedOption",
-                "description": "Handles the logic for processing the selection state of a clicked option element."
+                "name": "setHandlePosition",
+                "description": "Sets the handle position of the slider."
               },
               {
-                "name": "removeChip",
-                "description": "Handles the removal of a chip element from the DOM and updates the related state."
-              },
-              { "name": "localizer" },
-              { "name": "native", "type": "HTMLElement|null" },
-              { "name": "popup", "type": "HTMLElement|null" },
-              { "name": "labelElement", "type": "HTMLElement|null" },
-              { "name": "slotStart", "type": "HTMLElement|null" },
-              { "name": "slotEnd", "type": "HTMLElement|null" },
-              { "name": "input", "type": "HTMLElement|null" },
-              { "name": "displayText", "type": "HTMLElement|null" },
-              { "name": "chips", "type": "HTMLElement|null" },
-              { "name": "clear", "type": "HTMLElement|null" },
-              { "name": "list", "type": "HTMLElement|null" },
-              { "name": "emptyState", "type": "HTMLElement|null" },
-              { "name": "_value", "type": "array" },
-              { "name": "_selectedOptions", "type": "array" }
+                "name": "setBubble",
+                "description": "Updates the position and content of a bubble element based on the input value.\n\nThis function calculates the position of the bubble using the percentage representation\nof the input's current value relative to its minimum and maximum bounds. It then adjusts\nthe bubble's left position dynamically for aesthetic purposes and updates its displayed\ncontent to reflect the current input value.\n\nThe function relies on the following elements:\n- `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n- `this.output`: Represents the bubble element to be positioned and updated.\n\nThe left positioning of the bubble ensures precise alignment with the input value indicator."
+              }
             ],
             "events": []
           }
@@ -3425,87 +3377,149 @@
           }
         },
         {
-          "name": "wje-slider",
-          "description": "Represents a slider component that extends the WJElement class.\nThis slider supports features such as min, max, step values, bubble display, and event handling.\nIt offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the slider.\n- **afterDraw(): _void_** - Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n- Sets the position of the handle.\n- Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n- Dispatches initialization, movement, and change custom events for the slider input element.\n- Updates the bubble position and value dynamically on input changes.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getPercentage(min: _number_, max: _number_, value: _number_): _number_** - Calculates the percentage of a value within a given range.",
+          "name": "wje-select",
+          "description": "\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the select.\n- **afterDraw(): _void_** - Executes post-render logic for the custom element.\nThis includes validation, event listener registration, managing custom attributes, and\nhandling options initialization for the component.\n- **getAllOptions(): _NodeList_** - Returns all the options as HTML.\n- **selectionChanged(options: _Array|null_, length: _number_): _void_** - Handles changes in the selection for a component, updating internal values, input fields,\nand visual presentation (like chips or slots) as per the given selection options.\n- **selections(silence: _boolean_): _void_** - Handles the logic for updating selections based on the current selected options,\nupdating chips content, and dispatching change events if necessary.\n- **counter(): _void_** - Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.\nIf the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.\n- **getChip(option: _object_): _HTMLElement_** - Creates and returns a chip element with specified properties and a label.\n- **htmlOption(item: _object_, map: _@param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * _): _HTMLElement_** - Generates an HTML option element based on the provided item and mapping.\n- **htmlSelectedItem(item: _any_): _any_** - Returns the provided item.\n- **addOption(optionData: _object_, silent: _boolean_, map: _@param {string} [map.value] The key in optionData that represents the value of the option.\n\t * @param {string} [map.text] The key in optionData that represents the text of the option.\n\t * _): _void_** - Adds a new option to the component.\n- **addOptions(optionsData: _Array | object_, silent: _boolean_, map: _@param {string} [map.value] The property in the optionsData that represents the value of the option.\n\t * @param {string} [map.text] The property in the optionsData that represents the text of the option.\n\t * _): _void_** - Adds one or more options to a collection. If the input is an array, it adds each option within the array.\nOtherwise, it adds a single option.\n- **selectOption(value: _string_, silent: _boolean_): _void_** - Selects an option from the available options within the component.\n- **selectOptions(values: _any|any[]_, silent: _boolean_): _void_** - Selects multiple options based on the provided values. If a single value is provided, it selects that option.\nIf an array of values is provided, it iterates through the array and selects each option.\n- **optionCheckSlot(option: _HTMLElement_): _void_** - Clones and appends an icon with the \"check\" slot to the specified option element.\nIf the option already contains a custom element with slot=\"check\" (e.g. <wje-status slot=\"check\">),\nit is left untouched and no template icon is added.\n- **clearSelections(): _void_** - Clears all selected options and resets selections.\nThe method ensures that all options are deselected, updates the internal state, validates the selections,\npropagates the validation status, and indicates invalid state if necessary.\n- **syncAria()** - Syncs ARIA attributes on the host element.",
           "doc-url": "",
           "attributes": [
-            { "name": "max", "value": { "type": "string" } },
-            { "name": "min", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
+            { "name": "active", "value": { "type": "string" } },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "bubble", "value": { "type": "string" } }
+            { "name": "readonly", "value": { "type": "string" } },
+            { "name": "portaled", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "dependencies",
+                "description": "An object representing component dependencies with their respective classes.\nEach property in the object maps a custom component name (as a string key)\nto its corresponding class or constructor.",
+                "type": "object"
+              },
               {
                 "name": "value",
-                "description": "Returns the value of the slider."
+                "description": "Retrieves the current value."
               },
               {
-                "name": "min",
-                "description": "Returns the minimum value of the slider."
+                "name": "maxOptions",
+                "description": "Retrieves the maximum number of options allowed.\nParses the value of the 'max-options' attribute from the element and converts it to a number.\nIf the attribute is not present or cannot be converted to a valid number, defaults to 1."
               },
+              { "name": "defaultValue" },
               {
-                "name": "max",
-                "description": "Returns the maximum value of the slider."
+                "name": "portaled",
+                "description": "Getter for the `portaled` attribute value."
               },
               {
-                "name": "step",
-                "description": "Returns the step value of the slider."
+                "name": "isPortaled",
+                "description": "Checks whether popup content should be portaled."
+              },
+              {
+                "name": "trigger",
+                "description": "Returns the trigger value."
+              },
+              {
+                "name": "disabled",
+                "description": "Retrieves the current state of the 'disabled' attribute."
+              },
+              {
+                "name": "readonly",
+                "description": "Checks if the 'readonly' attribute is present on the element."
+              },
+              {
+                "name": "maxHeight",
+                "description": "Retrieves the maximum height value, which is determined by the 'max-height' attribute.\nIf the attribute is not set, a default value of '200px' is returned."
+              },
+              {
+                "name": "offset",
+                "description": "Gets the value of the offset attribute of the current element.\nIf the offset attribute is not present, returns a default value of '0'."
+              },
+              {
+                "name": "selectedOptions",
+                "description": "Retrieves the selected options."
+              },
+              {
+                "name": "lazy",
+                "description": "Getter for the 'lazy' property."
+              },
+              {
+                "name": "noSize",
+                "description": "Gets the value of the 'no-size' attribute for the element."
+              },
+              {
+                "name": "customErrorDisplay",
+                "description": "Getter for the customErrorDisplay attribute."
+              },
+              {
+                "name": "options",
+                "description": "Retrieves the complete list of options available for the component.\nThe options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\nIf a `wje-options` element is present within the component, its loaded options are included in the merged list.\nIn the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order."
               },
               { "name": "className", "type": "string" },
               {
-                "name": "setHandlePosition",
-                "description": "Sets the handle position of the slider."
+                "name": "optionChange",
+                "description": "Handles the change event for an option element within a select-like component.\nThis method processes user interactions with options and updates the state of the component,\nincluding selection management, validation, and UI updates. Behavior differs based on\nwhether the component supports multiple selections.\nKey functionality:\n- Prevents the default behavior, event propagation, and immediate propagation of the event.\n- Retrieves all options within the component.\n- If the component doesn't support multiple selection:\n  - Marks only the clicked option as selected and deselects others.\n  - Hides the option popup.\n- If the component supports multiple selection:\n  - Processes the clicked option without deselecting others.\n- Updates the selected options and triggers validation.\n- Marks the form state as non-pristine.\n- Propagates the validation state to other relevant parts of the component or system."
               },
               {
-                "name": "setBubble",
-                "description": "Updates the position and content of a bubble element based on the input value.\n\nThis function calculates the position of the bubble using the percentage representation\nof the input's current value relative to its minimum and maximum bounds. It then adjusts\nthe bubble's left position dynamically for aesthetic purposes and updates its displayed\ncontent to reflect the current input value.\n\nThe function relies on the following elements:\n- `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n- `this.output`: Represents the bubble element to be positioned and updated.\n\nThe left positioning of the bubble ensures precise alignment with the input value indicator."
-              }
+                "name": "processClickedOption",
+                "description": "Handles the logic for processing the selection state of a clicked option element."
+              },
+              {
+                "name": "removeChip",
+                "description": "Handles the removal of a chip element from the DOM and updates the related state."
+              },
+              { "name": "localizer" },
+              { "name": "native", "type": "HTMLElement|null" },
+              { "name": "popup", "type": "HTMLElement|null" },
+              { "name": "labelElement", "type": "HTMLElement|null" },
+              { "name": "slotStart", "type": "HTMLElement|null" },
+              { "name": "slotEnd", "type": "HTMLElement|null" },
+              { "name": "input", "type": "HTMLElement|null" },
+              { "name": "displayText", "type": "HTMLElement|null" },
+              { "name": "chips", "type": "HTMLElement|null" },
+              { "name": "clear", "type": "HTMLElement|null" },
+              { "name": "list", "type": "HTMLElement|null" },
+              { "name": "emptyState", "type": "HTMLElement|null" },
+              { "name": "_value", "type": "array" },
+              { "name": "_selectedOptions", "type": "array" }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-status",
-          "description": "This class represents Status element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the status.\n\n### **Slots:**\n - _default_ - The status main content.\n- **start** - The status start content.\n- **end** - The status end content.\n\n### **CSS Parts:**\n - **native** - The native part of the status.\n- **bullet** - The bullet part of the status.",
+          "name": "wje-split-view",
+          "description": "This element represents a split view.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the split view.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **detectSize()** - Detects the size of the split view.\n- **pixelsToPercentage(value: _number_): _number_** - Converts pixels to a percentage.\n\n### **Slots:**\n - **start** - Slot for the start view.\n- **end** - Slot for the end view.\n- **divider** - Slot for the divider.\n\n### **CSS Properties:**\n - **--wje-split-view-divider-area** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The status main content." },
-            { "name": "start", "description": "The status start content." },
-            { "name": "end", "description": "The status end content." }
+            { "name": "start", "description": "Slot for the start view." },
+            { "name": "end", "description": "Slot for the end view." },
+            { "name": "divider", "description": "Slot for the divider." }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
+              { "name": "initial" },
+              { "name": "className", "type": "string" },
+              { "name": "handleDrag", "description": "Handles the drag event." }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-split-view",
-          "description": "This element represents a split view.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the split view.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **detectSize()** - Detects the size of the split view.\n- **pixelsToPercentage(value: _number_): _number_** - Converts pixels to a percentage.\n\n### **Slots:**\n - **start** - Slot for the start view.\n- **end** - Slot for the end view.\n- **divider** - Slot for the divider.\n\n### **CSS Properties:**\n - **--wje-split-view-divider-area** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
+          "name": "wje-status",
+          "description": "This class represents Status element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the status.\n\n### **Slots:**\n - _default_ - The status main content.\n- **start** - The status start content.\n- **end** - The status end content.\n\n### **CSS Parts:**\n - **native** - The native part of the status.\n- **bullet** - The bullet part of the status.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "start", "description": "Slot for the start view." },
-            { "name": "end", "description": "Slot for the end view." },
-            { "name": "divider", "description": "Slot for the divider." }
+            { "name": "", "description": "The status main content." },
+            { "name": "start", "description": "The status start content." },
+            { "name": "end", "description": "The status end content." }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "initial" },
-              { "name": "className", "type": "string" },
-              { "name": "handleDrag", "description": "Handles the drag event." }
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -3568,20 +3582,51 @@
                 "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": "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": "currentStep", "type": "number" },
-              { "name": "localizer" },
-              { "name": "steps", "type": "array" },
-              { "name": "headerSteps", "type": "array" },
-              { "name": "_stepperId", "type": "number" }
+              { "name": "_hasPanel", "type": "boolean" }
             ],
-            "events": [
-              { "name": "stepper:next", "type": "CustomEvent" },
-              { "name": "stepper:prev", "type": "CustomEvent" },
-              { "name": "stepper:finish", "type": "CustomEvent" }
-            ]
+            "events": []
           }
         },
         {
@@ -3619,50 +3664,89 @@
           }
         },
         {
-          "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))_",
+          "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": "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"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-timeline",
+          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "Slot for the timeline items." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
-              },
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-thumbnail",
+          "description": "Thumbnail class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the thumbnail.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **thumbnail-slot** - The slot for the thumbnail content.\n\n### **CSS Properties:**\n - **--wje-thumbnail-width** - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`. _(default: 48px)_\n- **--wje-thumbnail-height** - Specifies the height of the thumbnail. Accepts any valid CSS length unit. _(default: 48px)_\n- **--wje-thumbnail-border-radius** - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable. _(default: var(--wje-border-radius-medium))_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "thumbnail-slot",
+              "description": "The slot for the thumbnail content."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "last",
-                "description": "Indicates whether this is the last tab.",
-                "type": "boolean"
-              },
-              { "name": "_hasPanel", "type": "boolean" }
+                "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.",
+          "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": "The default slot for the tab panel." }
+            {
+              "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": "The class name for the component.",
+                "description": "Returns the class name of the tab.",
                 "type": "string"
               }
             ],
@@ -3715,53 +3799,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-timeline",
-          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "Slot for the timeline items." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-timeline-item",
-          "description": "This element represents a timeline item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline item.\n\n### **Slots:**\n - _default_ - Slot for the content of the timeline item.\n- **status** - Slot for the status of the timeline item.\n\n### **CSS Parts:**\n - **native** - The native part of the timeline item.\n- **content-container** - The content container part of the timeline item.\n- **default-icon** - The default icon part of the timeline item.",
-          "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"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-toast",
           "description": "This element represents a toast notification.\n---\n\n\n### **Methods:**\n - **createToastStack(): _HTMLDivElement_** - Creates a toast stack container.\n- **getToastStackKey(): _string_** - Returns the key of the toast stack.\n- **applyToastStackPlacement(stack: _HTMLDivElement_)** - Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n- **syncToastStack(stack: _HTMLDivElement_)** - Applies the current toast stack configuration to a stack element.\n- **clearStackItemStyles(toast: _Toast_)** - Clears transient stack styling from a toast.\n- **getToastVisualHeight(toast: _Toast_): _number_** - Measures the rendered height of a toast for stack overlap calculations.\n- **updateToastStack(stack: _HTMLDivElement_)** - Recomputes the visual order of toasts inside the stack.\n- **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw()** - After draw method for the toast notification.\n- **beforeDisconnect()** - Before disconnect method\nThis method is called before the element is disconnected from the document.\n- **startTimer()** - Starts the timer.\nThis method sets the `startTime` property to the current time and sets\nthe `timeoutID` property to the ID of the timeout. The method also\ndispatches the `wje-toast:after-hide` custom event when the timeout\nexpires.\n- **stopTimer()** - Stops the timer.\nThis method clears the timeout and calculates the remaining time.\nThe method is called when the toast notification is paused.\n- **resumeTimer()** - Resumes the timer.\nThis method resumes the timer if the remaining time is greater\nthan zero. The method is called when the toast notification is resumed.\n- **removeChildAndStack()** - Removes the toast notification and the toast stack.\n\nThis method removes the toast notification from the toast stack and\nremoves the toast stack from the document body if the toast stack is\nempty.\n\n### **Slots:**\n - _default_ - The content of the toast.\n- **media** - The media of the toast.\n\n### **CSS Properties:**\n - **--wje-toast-stack-width** - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts. // @fires wje-toast:after-show - Fired after the toast is shown. // @fires wje-toast:after-hide - Fired after the toast is hidden. _(default: 300px)_\n\n### **CSS Parts:**\n - **native** - The native part",
@@ -3927,29 +3964,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-thumbnail",
-          "description": "Thumbnail class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the thumbnail.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **thumbnail-slot** - The slot for the thumbnail content.\n\n### **CSS Properties:**\n - **--wje-thumbnail-width** - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`. _(default: 48px)_\n- **--wje-thumbnail-height** - Specifies the height of the thumbnail. Accepts any valid CSS length unit. _(default: 48px)_\n- **--wje-thumbnail-border-radius** - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable. _(default: var(--wje-border-radius-medium))_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "thumbnail-slot",
-              "description": "The slot for the thumbnail content."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-toolbar",
           "description": "This element represents a toolbar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar.\n- **afterDraw()** - Initializes responsive layout observers.\n- **afterDisconnect()** - Cleans up responsive layout observers.\n- **syncAria()** - Sync ARIA attributes on host.\n- **scheduleResponsiveLayout()** - Schedules responsive layout recalculation.\n- **updateResponsiveLayout(): _Promise<void>_** - Updates slotted breadcrumbs and actions to fit the toolbar width.\n- **measureBreadcrumbs(breadcrumbs: _HTMLElement_): _Promise<{count: number, fullWidth: number, compactWidth: number}>_** - Measures breadcrumbs in their full state.\n- **ensureBreadcrumbState(breadcrumbs: _HTMLElement_, count: _number_): _{compactMaxItems: number}_** - Stores original breadcrumb settings used as responsive compact target.\n- **setBreadcrumbCompactState(breadcrumbs: _HTMLElement|null_, compact: _boolean_)** - Applies the compact or full breadcrumb state.\n- **setBreadcrumbMaxItems(breadcrumbs: _HTMLElement_, value: _number_)** - Sets breadcrumb max-items only when it changed.\n- **getVisibleActionsForWidth(actionMetrics: _object_, width: _number_): _number_** - Finds how many actions fit into the available width.\n- **setVisibleActions(action: _HTMLElement|null_, count: _number_)** - Applies visible action count.\n- **clearVisibleActions(action: _HTMLElement|null_)** - Clears toolbar-managed visible action state when actions manage themselves.\n- **getToolbarAction(): _HTMLElement|null_** - Returns the slotted toolbar action.\n- **getBreadcrumbs(): _HTMLElement|null_** - Returns the slotted breadcrumbs.\n- **isSelfManagedAction(action: _HTMLElement|null_): _boolean_** - Returns whether toolbar actions are managed by their own breakpoint logic.\n- **isSelfManagedBreadcrumbs(breadcrumbs: _HTMLElement|null_, action): _boolean_** - Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n- **nextFrame(): _Promise<void>_** - Waits for one animation frame.\n\n### **Slots:**\n - **start** - The start slot for the toolbar.\n- **end** - The end slot for the toolbar.\n\n### **CSS Properties:**\n - **--wje-toolbar-background** - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-background))_\n- **--wje-toolbar-height** - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content. _(default: auto)_\n- **--wje-toolbar-min-height** - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. _(default: 70px)_\n- **--wje-toolbar-padding-top** - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. _(default: 1rem)_\n- **--wje-toolbar-padding-bottom** - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. _(default: 1rem)_\n- **--wje-toolbar-padding-inline** - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. _(default: 1.5rem)_\n- **--wje-toolbar-margin-block** - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-margin-inline** - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-border-color** - Sets the color of the toolbar's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-toolbar-top** - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native toolbar wrapper.",
@@ -4021,50 +4035,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-tree-item",
-          "description": "Represents a single item in a tree structure.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - Custom logic executed before the draw process begins.\nDetermines and sets the appropriate slot if the current item is nested.\n- **syncNestingState(): _void_** - Synchronizes the nesting-related state on the host element.\nSets the \"slot\" to children for nested items and updates\nthe nesting depth used to compute visual indentation.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment representing the structure of a tree item component.\nThe method constructs the DOM elements including the native container, indentation, toggle button,\nselection checkbox, label, and children container, along with their respective slots and attributes.\nIt dynamically handles the creation of expand and collapse icons, as well as appending slots for\nchild components.\n- **afterDraw(): _void_** - Executes operations to be performed after the draw action is completed.\nIf the state indicates it is expanded, toggles its children.\nAdditionally, sets up an event listener on the button element to handle toggling children upon click.\n- **isNestedItem(): _boolean_** - Determines if the current item is a nested item within a tree structure.\nChecks if the item's parent element exists and is also a tree item.\n- **getNestingDepth(): _number_** - Calculates nesting depth based on ancestor tree items.\nRoot items have depth 0, direct children depth 1, etc.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether the given node is a tree item.\n- **toggleChildren(): _void_** - Toggles the visibility state of the children element and updates the class of the parent element.\nThe method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\neffectively showing or hiding the children and indicating the expanded state.\n- **setChildrenExpanded(expanded: _boolean_, options: _@param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * _): _void_** - Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getChildrenItems(options: _@param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * _): _Array_** - Retrieves the child items from the `childrenSlot` that match specific criteria.\n- **getAllChildrenFlat(options: _object_): _Array_** - Retrieves all descendant children of the current object in a flattened array structure.\n\n### **Slots:**\n - _default_ - Default slot for rendering the tree item's content (e.g., text or custom elements).\n\n### **CSS Properties:**\n - **--wje-tree-item-indent** - Defines the indentation for nested tree items. _(default: var(--wje-spacing-large))_\n- **--wje-tree-item-indent-guid-width** - Specifies the width of the guide element shown next to a tree item. _(default: 0px)_\n- **--wje-tree-item-indent-guid-style** - Defines the guide border style for nested tree items. _(default: solid)_\n- **--wje-tree-item-indent-guid-color** - Defines the guide border color for nested tree items. _(default: var(--wje-border-color))_\n- **--wje-tree-item-border-radius** - Sets the border radius of the tree item's container. _(default: var(--wje-border-radius-medium))_\n- **--wje-tree-item-border-width** - Sets the border width of the tree item row. _(default: 0px)_\n- **--wje-tree-item-border-style** - Sets the border style of the tree item row. _(default: solid)_\n- **--wje-tree-item-border-color** - Sets the border color of the tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-hover** - Sets the border color of the hovered tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-selected** - Sets the border color of the selected tree item row. _(default: transparent)_\n- **--wje-tree-item-drop-color** - Sets the color of reorder drop indicators. _(default: var(--wje-color-primary))_\n- **--wje-tree-item-drop-line-width** - Sets the thickness of before/after reorder drop indicators. _(default: 2px)_\n- **--wje-tree-item-drop-line-border-radius** - Sets the radius of before/after reorder drop indicators. _(default: var(--wje-border-radius-pill))_\n- **--wje-tree-item-drop-border-width** - Sets the width of the inside reorder drop border. _(default: 1px)_\n- **--wje-tree-item-drop-border-style** - Sets the style of the inside reorder drop border. _(default: solid)_\n- **--wje-tree-item-drop-border-color** - Sets the color of the inside reorder drop border. _(default: var(--wje-tree-item-drop-color))_\n- **--wje-tree-item-drop-border-radius** - Sets the radius of the inside reorder drop border. _(default: inherit)_\n\n### **CSS Parts:**\n - **native** - The native container of the tree item.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "selected", "value": { "type": "string" } },
-            { "name": "indeterminate", "value": { "type": "string" } },
-            { "name": "expanded", "value": { "type": "string" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Default slot for rendering the tree item's content (e.g., text or custom elements)."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "expanded",
-                "description": "Retrieves the value of the 'expanded' state for the current element.\nThis getter checks whether the 'expanded' attribute is present on the element.\nIf the attribute exists, it returns true, representing that the element is expanded.\nOtherwise, it returns false, indicating that the element is not expanded."
-              },
-              {
-                "name": "selected",
-                "description": "Getter method for determining if the 'selected' attribute is present on the element."
-              },
-              {
-                "name": "selection",
-                "description": "Retrieves the current selection."
-              },
-              {
-                "name": "indeterminate",
-                "description": "Retrieves the state of the indeterminate attribute."
-              },
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              },
-              { "name": "_selection", "type": "string" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-tooltip",
           "description": "This element represents a tooltip.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the tooltip.\n- **afterDraw()** - Draws the component for the tooltip.\n- **checkSelector(anchorEl: _HTMLElement_): _HTMLElement|null_** - Validates if the specified selector exists within the provided element.\nLogs an error if the selector is not found and returns the found element or `null`.\n\n### **Slots:**\n - **arrow** - The arrow slot for the tooltip.\n- **anchor** - The anchor slot for the tooltip.\n\n### **CSS Properties:**\n - **--wje-tooltip-arrow-color** - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-color-contrast-11))_\n\n### **CSS Parts:**\n - **native** - The native tooltip wrapper.",
@@ -4199,6 +4169,50 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "wje-tree-item",
+          "description": "Represents a single item in a tree structure.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - Custom logic executed before the draw process begins.\nDetermines and sets the appropriate slot if the current item is nested.\n- **syncNestingState(): _void_** - Synchronizes the nesting-related state on the host element.\nSets the \"slot\" to children for nested items and updates\nthe nesting depth used to compute visual indentation.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment representing the structure of a tree item component.\nThe method constructs the DOM elements including the native container, indentation, toggle button,\nselection checkbox, label, and children container, along with their respective slots and attributes.\nIt dynamically handles the creation of expand and collapse icons, as well as appending slots for\nchild components.\n- **afterDraw(): _void_** - Executes operations to be performed after the draw action is completed.\nIf the state indicates it is expanded, toggles its children.\nAdditionally, sets up an event listener on the button element to handle toggling children upon click.\n- **isNestedItem(): _boolean_** - Determines if the current item is a nested item within a tree structure.\nChecks if the item's parent element exists and is also a tree item.\n- **getNestingDepth(): _number_** - Calculates nesting depth based on ancestor tree items.\nRoot items have depth 0, direct children depth 1, etc.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether the given node is a tree item.\n- **toggleChildren(): _void_** - Toggles the visibility state of the children element and updates the class of the parent element.\nThe method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\neffectively showing or hiding the children and indicating the expanded state.\n- **setChildrenExpanded(expanded: _boolean_, options: _@param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * _): _void_** - Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getChildrenItems(options: _@param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * _): _Array_** - Retrieves the child items from the `childrenSlot` that match specific criteria.\n- **getAllChildrenFlat(options: _object_): _Array_** - Retrieves all descendant children of the current object in a flattened array structure.\n\n### **Slots:**\n - _default_ - Default slot for rendering the tree item's content (e.g., text or custom elements).\n\n### **CSS Properties:**\n - **--wje-tree-item-indent** - Defines the indentation for nested tree items. _(default: var(--wje-spacing-large))_\n- **--wje-tree-item-indent-guid-width** - Specifies the width of the guide element shown next to a tree item. _(default: 0px)_\n- **--wje-tree-item-indent-guid-style** - Defines the guide border style for nested tree items. _(default: solid)_\n- **--wje-tree-item-indent-guid-color** - Defines the guide border color for nested tree items. _(default: var(--wje-border-color))_\n- **--wje-tree-item-border-radius** - Sets the border radius of the tree item's container. _(default: var(--wje-border-radius-medium))_\n- **--wje-tree-item-border-width** - Sets the border width of the tree item row. _(default: 0px)_\n- **--wje-tree-item-border-style** - Sets the border style of the tree item row. _(default: solid)_\n- **--wje-tree-item-border-color** - Sets the border color of the tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-hover** - Sets the border color of the hovered tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-selected** - Sets the border color of the selected tree item row. _(default: transparent)_\n- **--wje-tree-item-drop-color** - Sets the color of reorder drop indicators. _(default: var(--wje-color-primary))_\n- **--wje-tree-item-drop-line-width** - Sets the thickness of before/after reorder drop indicators. _(default: 2px)_\n- **--wje-tree-item-drop-line-border-radius** - Sets the radius of before/after reorder drop indicators. _(default: var(--wje-border-radius-pill))_\n- **--wje-tree-item-drop-border-width** - Sets the width of the inside reorder drop border. _(default: 1px)_\n- **--wje-tree-item-drop-border-style** - Sets the style of the inside reorder drop border. _(default: solid)_\n- **--wje-tree-item-drop-border-color** - Sets the color of the inside reorder drop border. _(default: var(--wje-tree-item-drop-color))_\n- **--wje-tree-item-drop-border-radius** - Sets the radius of the inside reorder drop border. _(default: inherit)_\n\n### **CSS Parts:**\n - **native** - The native container of the tree item.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "selected", "value": { "type": "string" } },
+            { "name": "indeterminate", "value": { "type": "string" } },
+            { "name": "expanded", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot for rendering the tree item's content (e.g., text or custom elements)."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "expanded",
+                "description": "Retrieves the value of the 'expanded' state for the current element.\nThis getter checks whether the 'expanded' attribute is present on the element.\nIf the attribute exists, it returns true, representing that the element is expanded.\nOtherwise, it returns false, indicating that the element is not expanded."
+              },
+              {
+                "name": "selected",
+                "description": "Getter method for determining if the 'selected' attribute is present on the element."
+              },
+              {
+                "name": "selection",
+                "description": "Retrieves the current selection."
+              },
+              {
+                "name": "indeterminate",
+                "description": "Retrieves the state of the indeterminate attribute."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              { "name": "_selection", "type": "string" }
+            ],
+            "events": []
+          }
         }
       ]
     }