wj-elements 0.7.6 → 0.8.0

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.6",
+  "version": "0.8.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -50,7 +50,7 @@
         },
         {
           "name": "wje-accordion-item",
-          "description": "This class represents an Accordion Item element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion Item element.\n- **draw(): _object_** - Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n- **afterDraw()** - Method to execute after the Accordion Item element is drawn.\n- **collapse()** - Collapses the accordion item and updates the headline ARIA state.\n- **expand()** - Expands the accordion item and updates the headline ARIA state.\n\n### **Slots:**\n - **headline** - Slot for the clickable accordion headline content.\n- **description** - Slot for supporting text shown below the headline.\n- **toggle** - Slot for a custom toggle icon or toggle content.\n- **content** - Slot for the expandable panel body.\n\n### **CSS Properties:**\n - **--wje-accordion-background** - Background color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border** - Border color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-radius** - Border radius of the item wrapper. _(default: var(--wje-border-radius-large))_\n- **--wje-accordion-background-hover** - Background color used when the headline is hovered. _(default: var(--wje-color-contrast-1))_\n- **--wje-accordion-border-hover** - Border color used when the headline is hovered. _(default: var(--wje-color-contrast-2))_\n- **--wje-accordion-background-expanded** - Background color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-expanded** - Border color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-headline-color** - Text color of the headline area. _(default: var(--wje-color-contrast-11))_\n- **--wje-accordion-content-color** - Text color of the expandable content area. _(default: var(--wje-color-contrast-6))_\n- **--wje-accordion-marker-rotate** - Rotation applied to the toggle marker icon. // @fires wje-accordion-item:open - Dispatched when the item is expanded. // @fires wje-accordion-item:close - Dispatched when the item is collapsed. _(default: 0deg)_\n\n### **CSS Parts:**\n - **native** - The wrapper of the whole accordion item.\n- **headline** - The clickable headline area.\n- **description** - The description slot container inside the headline.\n- **toggle** - The toggle slot container and fallback chevron area.\n- **content** - The expandable content panel.",
+          "description": "This class represents an Accordion Item element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion Item element.\n- **draw(): _object_** - Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n- **afterDraw()** - Method to execute after the Accordion Item element is drawn.\n- **collapse()** - Collapses the accordion item, updates the headline ARIA state, and makes its content inert.\n- **expand()** - Expands the accordion item, updates the headline ARIA state, and makes its content interactive.\n\n### **Slots:**\n - **headline** - Slot for the clickable accordion headline content.\n- **description** - Slot for supporting text shown below the headline.\n- **toggle** - Slot for a custom toggle icon or toggle content.\n- **content** - Slot for the expandable panel body.\n\n### **CSS Properties:**\n - **--wje-accordion-background** - Background color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border** - Border color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-radius** - Border radius of the item wrapper. _(default: var(--wje-border-radius-large))_\n- **--wje-accordion-background-hover** - Background color used when the headline is hovered. _(default: var(--wje-color-contrast-1))_\n- **--wje-accordion-border-hover** - Border color used when the headline is hovered. _(default: var(--wje-color-contrast-2))_\n- **--wje-accordion-background-expanded** - Background color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-expanded** - Border color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-headline-color** - Text color of the headline area. _(default: var(--wje-color-contrast-11))_\n- **--wje-accordion-content-color** - Text color of the expandable content area. _(default: var(--wje-color-contrast-6))_\n- **--wje-accordion-content-margin** - Margin around the slotted expandable content. _(default: 0 var(--wje-spacing-small, 0.75rem) var(--wje-spacing-small, 0.75rem))_\n- **--wje-accordion-marker-rotate** - Rotation applied to the toggle marker icon. // @fires wje-accordion-item:open - Dispatched when the item is expanded. // @fires wje-accordion-item:close - Dispatched when the item is collapsed. _(default: 0deg)_\n\n### **CSS Parts:**\n - **native** - The wrapper of the whole accordion item.\n- **headline** - The clickable headline area.\n- **description** - The description slot container inside the headline.\n- **toggle** - The toggle slot container and fallback chevron area.\n- **content** - The expandable content panel.",
           "doc-url": "",
           "attributes": [
             {
@@ -760,26 +760,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-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)_",
@@ -837,6 +817,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-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.",
@@ -935,18 +935,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-col",
-          "description": "Col class that extends WJElement.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component element.\n\n### **Slots:**\n - _default_ - The col main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The col main content." }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-color-picker",
           "description": "ColorPicker is a custom web component that extends WJElement.\nIt provides a color picker functionality with a color area, hue slider, alpha slider, and color swatches.\nThe color picker allows users to select a color by moving a marker on the color area, adjusting the hue and alpha sliders, or clicking on a color swatch.\n---\n\n\n### **Methods:**\n - **parseSwatches(value: _string_): _string[]_** - Normalizes swatch colors from a string to an array.\nSupports comma and semicolon separators.\n- **setupAttributes()** - Sets up the attributes for the ColorPicker.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure and components of a custom color picker.\nThe method initializes DOM elements such as divs, sliders, and inputs, with specific classes and attributes,\nand attaches various event listeners to handle user interactions.\n- **afterDraw(): _void_** - Executes after the component is drawn. Initializes some configurations if not already initialized,\nincluding updating slider values, setting marker positions, and applying initial color settings.\nThis method ensures that all necessary visual elements and configurations are properly set up.\n- **createSwatches(node)** - Sets the hue.\n- **setSliders(color)** - Sets the sliders to the given color.\n- **dimension(): _object_** - Retrieves the dimensions and position of the color area element relative to the viewport.\n- **beforeDisconnect(): _void_** - Method executed before disconnecting. Resets the initialization state to false.\n- **getPointerPosition(e): _{x: number, y: number}_** - Gets the pointer position in client coordinates (viewport-relative).\n- **setMarkerPosition(x, y)** - Sets the position of the marker.\n- **clampMarkerPosition(x: _number_, y: _number_): _{x: number, y: number}_** - Clamps marker coordinates to the color area boundaries.\n- **setColorAtPosition(x, y, alpha): _*|tinycolor_** - Sets the color at the given position.\n- **getHueAreaColor(color: _string_): _string_** - Returns fully saturated and bright color for the current hue.\nUsed as base color for the SV area so neutral grays do not black out the palette.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-color-picker-area** - The color of the color area background. _(default: undefined)_\n- **--wje-color-picker-value** - The value of the color picker input. _(default: undefined)_\n- **--wje-color-picker-swatch** - The color of the color swatch button. _(default: undefined)_\n- **--wje-color-picker-size** - The color of the color marker. _(default: undefined)_\n- **--wje-color-picker-radius** - The color of the color anchor. _(default: undefined)_\n\n### **CSS Parts:**\n - **anchor** - The anchor part of the color picker.\n- **picker** - The main part of the color picker.\n- **marker** - The marker part of the color picker.\n- **color-area** - The color area part of the color picker.\n- **hue** - The hue slider part of the color picker.\n- **alpha** - The alpha slider part of the color picker.\n- **color-preview** - The color preview part of the color picker.\n- **input** - The input part of the color picker.",
@@ -1015,6 +1003,18 @@
             "events": []
           }
         },
+        {
+          "name": "wje-col",
+          "description": "Col class that extends WJElement.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component element.\n\n### **Slots:**\n - _default_ - The col main content.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "The col main content." }],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-container",
           "description": "The Container class is a custom web component that extends WJElement. It is a simple container that can hold other elements or components.\nIt provides a slot for adding child elements or components. The Container class also supports indentation through the `indent` property.\nThe indentation is applied as a CSS variable (`--wje-container-indent`) which can be used in the styles of child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Container.\n- **draw(): _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)_",
@@ -1083,6 +1083,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-divider",
+          "description": "Divider is a custom web component that extends WJElement.\nIt provides a simple divider line that can be used to separate content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Divider.\n- **draw(): _DocumentFragment_** - Draws the Divider.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-border-width** - The size of the border. _(default: 1px)_\n- **--wje-divider-border-color** - The color of the divider borderline. _(default: var(--wje-border-color))_\n- **--wje-divider-border-width** - The width of the divider borderline. _(default: var(--wje-border-width, 1px))_\n- **--wje-divider-spacing** - The spacing for the divider. _(default: 0)_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "This is a default/unnamed slot." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Divider class.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-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.",
@@ -1141,106 +1161,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-divider",
-          "description": "Divider is a custom web component that extends WJElement.\nIt provides a simple divider line that can be used to separate content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Divider.\n- **draw(): _DocumentFragment_** - Draws the Divider.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-border-width** - The size of the border. _(default: 1px)_\n- **--wje-divider-border-color** - The color of the divider borderline. _(default: var(--wje-border-color))_\n- **--wje-divider-border-width** - The width of the divider borderline. _(default: var(--wje-border-width, 1px))_\n- **--wje-divider-spacing** - The spacing for the divider. _(default: 0)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Divider class.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-dropdown",
-          "description": "This element represents a dropdown menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the dropdown.\n- **beforeDraw()** - Removes the popup element.\n- **draw(): _DocumentFragment_** - Draws the dropdown element and returns the created document fragment.\n- **afterDraw()** - Adds event listeners for the mouseenter and mouseleave events.\n- **afterDisconnect()** - Adds event listeners for the mouseenter and mouseleave events.\n- **syncPopupOwner()** - Assigns the current dropdown instance as the owner of its popup layers.\nOwner metadata is later used to resolve which dropdown should react to\ndelegated menu-item clicks, including portaled popup content.\n- **syncOwnedContentOwner(root: _HTMLElement_)** - Recursively assigns owner metadata to the dropdown content subtree while\nleaving nested dropdown roots untouched, so each nested dropdown can keep\nits own ownership boundary.\n- **getMenuItemOwner(path: _EventTarget[]_, item: _HTMLElement_): _HTMLElement|null_** - Resolves the dropdown that owns a clicked menu item. The lookup prefers\nexplicit owner metadata and falls back to DOM traversal so both regular\nand portaled dropdown content can be scoped correctly.\n- **afterShow()** - This method is called after the dropdown is shown.\n- **syncAria()** - Syncs ARIA attributes for the trigger element.\n\n### **Slots:**\n - **trigger** - The slot for the trigger of the dropdown.\n- _default_ - The default slot for the dropdown.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet dropdowns. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet dropdowns. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n\n### **CSS Parts:**\n - **native** - The native part of the dropdown.\n- **popup-native** - The exported native popup panel part.\n- **backdrop** - The exported mobile bottom sheet backdrop part.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "active", "value": { "type": "string" } },
-            {
-              "name": "mobile-presentation",
-              "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "mobile-break-point",
-              "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\". // @fires wje-dropdown:open - Event fired when the dropdown is opened. // @fires wje-dropdown:close - Event fired when the dropdown is closed.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "trigger",
-              "description": "The slot for the trigger of the dropdown."
-            },
-            { "name": "", "description": "The default slot for the dropdown." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "dependencies",
-                "description": "The placement of the dropdown.",
-                "type": "{\"wje-popup\": Popup}"
-              },
-              {
-                "name": "portaled",
-                "description": "Getter method for the `portaled` property.\nChecks if the `portaled` attribute is present on the element."
-              },
-              {
-                "name": "isPortaled",
-                "description": "Checks whether the element has the 'portaled' attribute."
-              },
-              {
-                "name": "trigger",
-                "description": "Gets the placement of the dropdown."
-              },
-              {
-                "name": "mobilePresentation",
-                "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
-                "type": "string"
-              },
-              {
-                "name": "mobileBreakPoint",
-                "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\".",
-                "type": "string"
-              },
-              {
-                "name": "className",
-                "description": "Sets the placement of the dropdown.",
-                "type": "string"
-              },
-              {
-                "name": "otherDropdownOpennedCallback",
-                "description": "Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled."
-              },
-              {
-                "name": "popupHideCallback",
-                "description": "Handles popup hide events and closes only the dropdown that owns the popup.\nThis prevents nested dropdowns from collapsing their parent dropdown when the\nchild popup is hidden."
-              },
-              {
-                "name": "onMenuItemClick",
-                "description": "Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\nThis works even when the menu is portaled, because we rely on the composed path."
-              },
-              { "name": "toggleCallback" },
-              { "name": "onOpen", "description": "Open the popup element." },
-              { "name": "beforeClose" },
-              { "name": "afterClose" },
-              { "name": "onClose" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-file-upload",
           "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(e: _Event_)** - Method to handle form submission.\n- **addFilesToQueue(files)** - Method to add files to the queue.\n- **uploadFiles()** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **resetFormState()** - Method to reset the form state.\n- **showError(error: _object|Error_)** - Shows a user-facing validation error inside the dropzone.\n- **clearError()** - Clears the currently displayed validation error.\n- **getErrorMessage(error: _object|Error_): _string_** - Resolves a readable upload error message.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-file-upload-padding** - Controls the padding around the native file upload area. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **upload-button** - The label part.",
@@ -1368,83 +1288,140 @@
           }
         },
         {
-          "name": "wje-file-upload-item",
-          "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item. //@fires wje-button:click - Dispatches when the delete button is clicked _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
+          "name": "wje-dropdown",
+          "description": "This element represents a dropdown menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the dropdown.\n- **beforeDraw()** - Removes the popup element.\n- **draw(): _DocumentFragment_** - Draws the dropdown element and returns the created document fragment.\n- **afterDraw()** - Adds event listeners for the mouseenter and mouseleave events.\n- **afterDisconnect()** - Adds event listeners for the mouseenter and mouseleave events.\n- **syncPopupOwner()** - Assigns the current dropdown instance as the owner of its popup layers.\nOwner metadata is later used to resolve which dropdown should react to\ndelegated menu-item clicks, including portaled popup content.\n- **syncOwnedContentOwner(root: _HTMLElement_)** - Recursively assigns owner metadata to the dropdown content subtree while\nleaving nested dropdown roots untouched, so each nested dropdown can keep\nits own ownership boundary.\n- **getMenuItemOwner(path: _EventTarget[]_, item: _HTMLElement_): _HTMLElement|null_** - Resolves the dropdown that owns a clicked menu item. The lookup prefers\nexplicit owner metadata and falls back to DOM traversal so both regular\nand portaled dropdown content can be scoped correctly.\n- **afterShow()** - This method is called after the dropdown is shown.\n- **syncAria()** - Syncs ARIA attributes for the trigger element.\n\n### **Slots:**\n - **trigger** - The slot for the trigger of the dropdown.\n- _default_ - The default slot for the dropdown.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet dropdowns. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet dropdowns. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n\n### **CSS Parts:**\n - **native** - The native part of the dropdown.\n- **popup-native** - The exported native popup panel part.\n- **backdrop** - The exported mobile bottom sheet backdrop part.",
           "doc-url": "",
           "attributes": [
-            { "name": "uploaded", "value": { "type": "string" } },
-            { "name": "is-uploaded", "value": { "type": "string" } }
+            { "name": "active", "value": { "type": "string" } },
+            {
+              "name": "mobile-presentation",
+              "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mobile-break-point",
+              "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\". // @fires wje-dropdown:open - Event fired when the dropdown is opened. // @fires wje-dropdown:close - Event fired when the dropdown is closed.",
+              "value": { "type": "string" }
+            }
           ],
           "slots": [
-            { "name": "img", "description": "Slot for the image" },
-            { "name": "action", "description": "Slot for the action buttons" }
+            {
+              "name": "trigger",
+              "description": "The slot for the trigger of the dropdown."
+            },
+            { "name": "", "description": "The default slot for the dropdown." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "isUploaded",
-                "description": "Checks if the 'is-uploaded' attribute is present on the element."
+                "name": "dependencies",
+                "description": "The placement of the dropdown.",
+                "type": "{\"wje-popup\": Popup}"
               },
               {
-                "name": "size",
-                "description": "Retrieves the value of the 'size' attribute."
+                "name": "portaled",
+                "description": "Getter method for the `portaled` property.\nChecks if the `portaled` attribute is present on the element."
               },
               {
-                "name": "dependencies",
-                "description": "Dependencies for the component.",
-                "type": "object"
+                "name": "isPortaled",
+                "description": "Checks whether the element has the 'portaled' attribute."
               },
-              { "name": "className", "type": "string" },
               {
-                "name": "onDelete",
-                "description": "Handles the delete action."
+                "name": "trigger",
+                "description": "Gets the placement of the dropdown."
               },
-              { "name": "localizer" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-footer",
-          "description": "This element represents a footer. `Footer` is a custom web component that represents a footer.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the footer content\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the footer _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Default slot for the footer content"
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-form",
-          "description": "The Form class is a custom\nweb component that extends WJElement. It is a simple form that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Form.\n- **draw(): _DocumentFragment_** - Draws the Form.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The slot for adding child elements or components."
-            }
+              {
+                "name": "mobilePresentation",
+                "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
+                "type": "string"
+              },
+              {
+                "name": "mobileBreakPoint",
+                "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\".",
+                "type": "string"
+              },
+              {
+                "name": "className",
+                "description": "Sets the placement of the dropdown.",
+                "type": "string"
+              },
+              {
+                "name": "otherDropdownOpennedCallback",
+                "description": "Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled."
+              },
+              {
+                "name": "popupHideCallback",
+                "description": "Handles popup hide events and closes only the dropdown that owns the popup.\nThis prevents nested dropdowns from collapsing their parent dropdown when the\nchild popup is hidden."
+              },
+              {
+                "name": "onMenuItemClick",
+                "description": "Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\nThis works even when the menu is portaled, because we rely on the composed path."
+              },
+              { "name": "toggleCallback" },
+              { "name": "onOpen", "description": "Open the popup element." },
+              { "name": "beforeClose" },
+              { "name": "afterClose" },
+              { "name": "onClose" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-file-upload-item",
+          "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item. //@fires wje-button:click - Dispatches when the delete button is clicked _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
+          "doc-url": "",
+          "attributes": [
+            { "name": "uploaded", "value": { "type": "string" } },
+            { "name": "is-uploaded", "value": { "type": "string" } }
+          ],
+          "slots": [
+            { "name": "img", "description": "Slot for the image" },
+            { "name": "action", "description": "Slot for the action buttons" }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "className",
-                "description": "The class name for the Form class.",
-                "type": "string"
-              }
+                "name": "isUploaded",
+                "description": "Checks if the 'is-uploaded' attribute is present on the element."
+              },
+              {
+                "name": "size",
+                "description": "Retrieves the value of the 'size' attribute."
+              },
+              {
+                "name": "dependencies",
+                "description": "Dependencies for the component.",
+                "type": "object"
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "onDelete",
+                "description": "Handles the delete action."
+              },
+              { "name": "localizer" }
             ],
             "events": []
           }
         },
+        {
+          "name": "wje-footer",
+          "description": "This element represents a footer. `Footer` is a custom web component that represents a footer.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the footer content\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the footer _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Default slot for the footer content"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-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.",
@@ -1492,6 +1469,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-header",
+          "description": "`Header` is a custom web component that represents a header. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the header content\n\n### **CSS Properties:**\n - **--wje-header-background** - The background of the header element. _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header element. _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header element. _(default: 0 0 1px 0)_\n- **--wje-header-border-style** - The border styles of the header _(default: solid)_\n- **--wje-header-top** - The position top of the header _(default: 0)_\n- **--wje-header-height** - The height of the header element. _(default: 60px)_\n- **--wje-header-z-index** - The z-index used when the header is sticky. _(default: 100)_\n\n### **CSS Parts:**\n - **native** - The native part",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Default slot for the header content"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-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.",
@@ -1516,19 +1510,25 @@
           }
         },
         {
-          "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",
+          "name": "wje-form",
+          "description": "The Form class is a custom\nweb component that extends WJElement. It is a simple form that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Form.\n- **draw(): _DocumentFragment_** - Draws the Form.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
-              "name": "default",
-              "description": "Default slot for the header content"
+              "name": "",
+              "description": "The slot for adding child elements or components."
             }
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "className", "type": "string" }],
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Form class.",
+                "type": "string"
+              }
+            ],
             "events": []
           }
         },
@@ -1639,7 +1639,7 @@
               },
               {
                 "name": "loader",
-                "description": "The URL of the image loader to display while the image is loading.",
+                "description": "The URL of the image loader to display while the image is loading. Defaults to the loader asset resolved from the configured base path.",
                 "type": "string"
               },
               {
@@ -1667,36 +1667,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-img-comparer",
-          "description": "This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\nIt extends from `WJElement` and uses the `Icon` component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **before** - The before image slot.\n- **after** - The after image slot.\n\n### **CSS Properties:**\n - **--wje-img-compare-divider-area** - The area of the divider. This is the size of the divider. Accepts any valid CSS size. _(default: 12px)_\n- **--wje-img-compare-divider-background** - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs. _(default: white)_\n- **--wje-img-compare-divider-size** - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size. _(default: 2px)_\n- **--wje-img-compare-divider-left** - The left position of the divider. This is the initial position of the divider. _(default: 50%)_\n- **--wje-img-compare-position** - The position of the divider. This is the position of the divider. _(default: 50%)_\n- **--wje-img-compare-clip-path** - The clip path of the divider. This is the clip path of the divider. _(default: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0))_\n\n### **CSS Parts:**\n - **divider** - The divider part.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "before", "description": "The before image slot." },
-            { "name": "after", "description": "The after image slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "dependencies",
-                "description": "Dependencies of the ImgComparer component.",
-                "type": "object"
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "handleDrag",
-                "description": "Handles the drag event."
-              },
-              {
-                "name": "clamp",
-                "description": "Clamps a number between a minimum and maximum value."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-infinite-scroll",
           "description": "This element allows users to scroll through a potentially infinite amount of content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _void_** - Prepares the component for updates before it is drawn.\nThis method handles the removal of templates for iteration, adjusts the height styling of the component,\nand manages abort signals for loading operations.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure for an infinite scroll component.\nThe structure includes native elements, slots for customization, and optional loading content.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the server.\n- **hideLoader()** - Hides the loader.\n- **showLoader(): _void_** - Displays the loader element by adding the 'show' class to its class list.\nThis method is useful for indicating a loading or processing state in the UI.\n- **hasMorePages(page: _number_): _boolean_** - Checks if there are more pages to load.\n- **loadPages(page: _number_)** - Loads the pages.\n\n### **Slots:**\n - _default_ - The default slot for the infinite scroll.\n\n### **CSS Properties:**\n - **--wje-infinite-scroll-width** - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container. _(default: 100%)_\n- **--wje-infinite-scroll-height** - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases. //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked. _(default: 300px)_\n\n### **CSS Parts:**\n - **loader** - The loader part of the infinite scroll.",
@@ -1832,79 +1802,35 @@
           }
         },
         {
-          "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",
+          "name": "wje-img-comparer",
+          "description": "This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\nIt extends from `WJElement` and uses the `Icon` component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **before** - The before image slot.\n- **after** - The after image slot.\n\n### **CSS Properties:**\n - **--wje-img-compare-divider-area** - The area of the divider. This is the size of the divider. Accepts any valid CSS size. _(default: 12px)_\n- **--wje-img-compare-divider-background** - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs. _(default: white)_\n- **--wje-img-compare-divider-size** - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size. _(default: 2px)_\n- **--wje-img-compare-divider-left** - The left position of the divider. This is the initial position of the divider. _(default: 50%)_\n- **--wje-img-compare-position** - The position of the divider. This is the position of the divider. _(default: 50%)_\n- **--wje-img-compare-clip-path** - The clip path of the divider. This is the clip path of the divider. _(default: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0))_\n\n### **CSS Parts:**\n - **divider** - The divider part.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "start", "description": "The start slot" },
-            { "name": "end", "description": "The end slot" },
-            { "name": "error", "description": "The error slot" },
-            { "name": "helper", "description": "The helper slot" }
+            { "name": "before", "description": "The before image slot." },
+            { "name": "after", "description": "The after image slot." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "className",
-                "description": "Returns the CSS styles for the component.",
-                "type": "string"
-              },
-              {
-                "name": "hostContext",
-                "description": "Determines if the given element or any of its ancestors matches the specified selector."
+                "name": "dependencies",
+                "description": "Dependencies of the ImgComparer component.",
+                "type": "object"
               },
-              { "name": "labelColorStyles", "type": "object" },
-              { "name": "itemStyles" },
-              { "name": "inheritedAriaAttributes", "type": "object" },
-              { "name": "multipleInputs", "type": "boolean" },
-              { "name": "focusable", "type": "boolean" },
-              { "name": "button", "type": "boolean" },
-              { "name": "detailIcon" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "counter", "type": "boolean" },
-              { "name": "routerDirection", "type": "string" },
-              { "name": "type", "type": "string" }
-            ],
-            "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": "className", "type": "string" },
               {
-                "name": "value",
-                "description": "Gets the value of the input file."
+                "name": "handleDrag",
+                "description": "Handles the drag event."
               },
               {
-                "name": "className",
-                "description": "The class name for the InputFile class.",
-                "type": "string"
-              },
-              { "name": "_value", "type": "string" }
+                "name": "clamp",
+                "description": "Clamps a number between a minimum and maximum value."
+              }
             ],
             "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.",
@@ -1968,12 +1894,12 @@
           }
         },
         {
-          "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))_",
+          "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 list." }
+            { "name": "", "description": "The default slot for the label." }
           ],
           "events": [],
           "js": {
@@ -1982,47 +1908,50 @@
           }
         },
         {
-          "name": "wje-level-indicator",
-          "description": "LevelIndicator is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **afterDraw(): _void_** - Executes any additional operations or updates required after the drawing process is completed.\n- **syncAria()** - Sync ARIA attributes on host.\n- **updateBars(level: _number_, bars: _Array_): _void_** - Updates the class of each bar element based on the specified level.\n- **getColor(level: _number_, bars: _number_): _string | undefined_** - Determines the color indicator based on the given level and bars.\n\n### **CSS Parts:**\n - **** - Styles the element.",
+          "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",
           "doc-url": "",
-          "attributes": [
-            { "name": "level", "value": { "type": "string" } },
-            { "name": "bars", "value": { "type": "string" } }
+          "attributes": [],
+          "slots": [
+            { "name": "start", "description": "The start slot" },
+            { "name": "end", "description": "The end slot" },
+            { "name": "error", "description": "The error slot" },
+            { "name": "helper", "description": "The helper slot" }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "level",
-                "description": "Retrieves the level attribute of an element, with validation to ensure\nit is within the range of 0 to 3. If the level attribute is not present,\nthe default value is 1. The result is parsed as an integer and constrained\nto the valid range."
-              },
-              {
-                "name": "bars",
-                "description": "Retrieves the value of the \"bars\" attribute, parses it as an integer,\nand ensures it is at least 1. If the attribute is not set, defaults to 3."
+                "name": "className",
+                "description": "Returns the CSS styles for the component.",
+                "type": "string"
               },
               {
-                "name": "colorize",
-                "description": "Determines whether the element has the \"colorize\" attribute set."
+                "name": "hostContext",
+                "description": "Determines if the given element or any of its ancestors matches the specified selector."
               },
-              {
-                "name": "reverse",
-                "description": "Getter method to check if the \"reverse\" attribute is present on the element."
-              },
-              { "name": "className", "type": "string" }
+              { "name": "labelColorStyles", "type": "object" },
+              { "name": "itemStyles" },
+              { "name": "inheritedAriaAttributes", "type": "object" },
+              { "name": "multipleInputs", "type": "boolean" },
+              { "name": "focusable", "type": "boolean" },
+              { "name": "button", "type": "boolean" },
+              { "name": "detailIcon" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "counter", "type": "boolean" },
+              { "name": "routerDirection", "type": "string" },
+              { "name": "type", "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.",
+          "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 main section."
-            }
+            { "name": "", "description": "The default slot for the list." }
           ],
           "events": [],
           "js": {
@@ -2030,6 +1959,38 @@
             "events": []
           }
         },
+        {
+          "name": "wje-level-indicator",
+          "description": "LevelIndicator is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **afterDraw(): _void_** - Executes any additional operations or updates required after the drawing process is completed.\n- **syncAria()** - Sync ARIA attributes on host.\n- **updateBars(level: _number_, bars: _Array_): _void_** - Updates the class of each bar element based on the specified level.\n- **getColor(level: _number_, bars: _number_): _string | undefined_** - Determines the color indicator based on the given level and bars.\n\n### **CSS Parts:**\n - **** - Styles the element.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "level", "value": { "type": "string" } },
+            { "name": "bars", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "level",
+                "description": "Retrieves the level attribute of an element, with validation to ensure\nit is within the range of 0 to 3. If the level attribute is not present,\nthe default value is 1. The result is parsed as an integer and constrained\nto the valid range."
+              },
+              {
+                "name": "bars",
+                "description": "Retrieves the value of the \"bars\" attribute, parses it as an integer,\nand ensures it is at least 1. If the attribute is not set, defaults to 3."
+              },
+              {
+                "name": "colorize",
+                "description": "Determines whether the element has the \"colorize\" attribute set."
+              },
+              {
+                "name": "reverse",
+                "description": "Getter method to check if the \"reverse\" attribute is present on the element."
+              },
+              { "name": "className", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-masonry",
           "description": "This element represents a masonry layout.\n---\n\n\n### **Methods:**\n - **beforeDisconnect()** - Callback for when the element is disconnected.\n- **setupAttributes()** - Sets up the attributes for the element.\n- **draw(): _DocumentFragment_** - Draws the element for the masonry layout.\n- **afterDraw()** - Called after the element is drawn.\n- **renderCols(colCount: _number_)** - Renders the columns.\n- **scheduleLayout(ms: _number_)** - Schedules a layout.\n\n### **Slots:**\n - _default_ - The default slot for the masonry layout.\n\n### **CSS Properties:**\n - **--wje-masonry-layout-gap** - The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem. _(default: 1rem)_\n- **--wje-masonry-layout-col-count** - The count column in the masonry layout. Accepts any valid CSS length. _(default: 1)_\n\n### **CSS Parts:**\n - **native** - The native part of the masonry layout.\n- **column** - The individual columns in the masonry layout.",
@@ -2101,39 +2062,41 @@
           }
         },
         {
-          "name": "wje-menu-button",
-          "description": "This element represents a menu button.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu button.\n- **afterDraw()** - Refreshes the component after drawing. Adds a click event listener that toggles the \"open\" class on the content element.\n\n### **Slots:**\n - _default_ - The default slot for the menu button. // @fires click - Event fired when the menu button is clicked.",
+          "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 menu button. // @fires click - Event fired when the menu button is clicked."
-            }
-          ],
           "events": [],
           "js": {
-            "properties": [{ "name": "className", "type": "string" }],
+            "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-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.",
+          "name": "wje-menu-button",
+          "description": "This element represents a menu button.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu button.\n- **afterDraw()** - Refreshes the component after drawing. Adds a click event listener that toggles the \"open\" class on the content element.\n\n### **Slots:**\n - _default_ - The default slot for the menu button. // @fires click - Event fired when the menu button is clicked.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the menu label."
+              "description": "The default slot for the menu button. // @fires click - Event fired when the menu button is clicked."
             }
           ],
           "events": [],
           "js": {
-            "properties": [
-              { "name": "className", "type": "string" },
-              { "name": "hasSubmenu" }
-            ],
+            "properties": [{ "name": "className", "type": "string" }],
             "events": []
           }
         },
@@ -2212,6 +2175,23 @@
             "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the main section."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "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.",
@@ -2262,6 +2242,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-options",
           "description": "This element represents a set of options.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **processData(data: _object_): _Array_** - Processes the provided data based on the optional array path set in the instance.\n- **filterOutDrawnOptions(response: _object_): _object_** - Filters out options from the response object that have already been drawn, based on the specified option array path.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the provided URL.\n- **findSelectedOptionData(selectedOptionValues: _Array_): _Array_** - Finds the selected option data based on the given selected option values.\n- **addOption(optionData: _object_)** - Adds an option to the element.\n- **addOptions(optionsData: _Array_, silent: _boolean_)** - Adds options to the element.",
@@ -2360,33 +2360,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-orgchart",
-          "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "flat",
-              "description": "Removes the incoming connector spacing for nested charts that should visually continue on the same level.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "flat",
-                "description": "Gets whether the chart omits its incoming connector spacing."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "syncFlatChildren",
-                "description": "Marks direct children that are rendered inside a flat chart."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-orgchart-item",
           "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart item.\n- **afterDraw()** - After Draws the component for the org chart item.\n\n### **Slots:**\n - _default_ - The default slot for the orgchart item.\n- **child** - The child slot for the orgchart item.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.\n- **expander** - Styles the expander element. // @fires wje-orgchart-item:click - Emitted when the item card is clicked.",
@@ -2434,6 +2407,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-panel",
+          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the panel.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the panel." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "className", "type": "string" },
+              { "name": "last", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-pagination",
           "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS 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.",
@@ -2504,23 +2494,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-panel",
-          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the panel.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "type": "string" },
-              { "name": "last", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-popup",
           "description": "This element represents a popup.\n---\n\n\n### **Events:**\n - **wje-portal:restored**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the popup.\n- **afterDraw()** - After Draws the component.\n- **setAnchor()** - Sets the anchor for the popup.\nAdds a click event listener to the anchor element.\n- **showHide()** - Toggles the active attribute of the popup.\n- **reposition()** - Repositions the popup.\nUses the floating-ui library to compute the position.\n- **_mountContentToPortal(): _void_** - Mounts content to a portal container by creating or ensuring a portal root and mirroring\nthe host's classes, attributes, and slot contents onto the portal. This method manages the\nmovement of default and arrow slot content into the portal shadow DOM, while also setting\nup necessary mutation observers to keep attributes in sync.\n- **_restoreContentFromPortal(): _void_** - Restores the content previously moved to a portal back to its original location.\nThis method handles restoring default slot content, arrow placeholders, disconnecting\nattribute mirroring observers, and cleaning up elements and containers related to the portal.\nEnsures all placeholders and native portal elements are properly removed from the DOM.\n- **_ensurePortalRoot(): _void_** - Ensures that a portal root is created and initialized properly with a shadow DOM and attached styles.\nIf the portal root already exists, the method exits early.\nThe method creates a `div` element in the document body and attaches a shadow DOM to it.\nIt also applies the required styles to the shadow DOM, either using constructable stylesheets\nor by appending a `<style>` element. Additionally, it copies CSS custom properties from the\ncomponent's computed styles to the portal host to ensure proper style resolution.\n- **show(dispatchEvent: _boolean_): _void_** - Displays the popup by portaling the content, managing the loader state, and attaching event handlers.\nOptionally dispatches a custom event when the popup is shown.\n- **hide(dispatchEvent)** - Hides the popup.\nRemoves the popup-active class from the floating element.\nCleans up the auto update for repositioning.\n\n### **Slots:**\n - **anchor** - The slot for the anchor of the popup.\n- **arrow** - The slot for the arrow of the popup.\n- _default_ - The default slot for the popup.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet popups. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet popups. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n- **--wje-popup-loader-inset** - Inset used by the popup loader overlay. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native part of the popup.\n- **backdrop** - The backdrop used by mobile bottom sheet presentation.",
@@ -2594,6 +2567,33 @@
             "events": [{ "name": "wje-portal:restored", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "wje-orgchart",
+          "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "flat",
+              "description": "Removes the incoming connector spacing for nested charts that should visually continue on the same level.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "flat",
+                "description": "Gets whether the chart omits its incoming connector spacing."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "syncFlatChildren",
+                "description": "Marks direct children that are rendered inside a flat chart."
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-progress-bar",
           "description": "This element represents a progress bar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **syncAria()** - Sync ARIA attributes on host.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **getCircleDasharray(radius: _number_): _number_** - Returns the dasharray for a circle with the given radius.\n- **getCircleDashoffset(progress: _number_, radius: _number_): _number_** - Returns the dashoffset for a circle with the given progress and radius.\n- **setCircleProgress(percent)** - Sets the progress of the circle.\n\n### **Slots:**\n - _default_ - The default slot for the progress bar.\n- **start** - The start slot of the progress bar.\n- **end** - The end slot of the progress bar.\n\n### **CSS Properties:**\n - **--wje-progress-bar-color** - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables. _(default: var(--wje-color-contrast-6))_\n- **--wje-progress-bar-text-size** - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design. _(default: .75rem)_\n- **--wje-progress-bar-text-color** - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background. _(default: var(--wje-color))_",
@@ -2642,40 +2642,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": []
           }
@@ -2748,41 +2749,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": []
           }
@@ -2869,24 +2869,30 @@
           }
         },
         {
-          "name": "wje-reorder-dropzone",
-          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
+          "name": "wje-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 dropzone."
-            }
+          "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": "The class name for the component.",
+                "description": "Sets the lang of the relative time component.",
                 "type": "string"
-              }
+              },
+              { "name": "localizer" }
             ],
             "events": []
           }
@@ -2922,30 +2928,47 @@
           }
         },
         {
-          "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.",
+          "name": "wje-reorder-dropzone",
+          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
           "doc-url": "",
-          "attributes": [
-            { "name": "date", "value": { "type": "string" } },
-            { "name": "lang", "value": { "type": "string" } }
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the reorder dropzone."
+            }
           ],
           "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.",
+                "type": "string"
+              }
+            ],
+            "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": "Sets the lang of the relative time component.",
+                "description": "The class name for the component.",
                 "type": "string"
-              },
-              { "name": "localizer" }
+              }
             ],
             "events": []
           }
@@ -2976,6 +2999,17 @@
             "events": []
           }
         },
+        {
+          "name": "wje-route",
+          "description": "This element represents a route in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the route.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-router",
           "description": "This element represents a router in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Sets up the router after the component is drawn.\n- **parseElement(element: _Element_): _object_** - Parses an element and returns an object representation.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.",
@@ -2999,29 +3033,6 @@
             "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.",
@@ -3039,17 +3050,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-route",
-          "description": "This element represents a route in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the route.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-router-outlet",
           "description": "This element represents a route in a routing system.\n---\n",
@@ -3087,6 +3087,112 @@
             "events": []
           }
         },
+        {
+          "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": "active", "value": { "type": "string" } },
+            { "name": "disabled", "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": "Retrieves the current value."
+              },
+              {
+                "name": "maxOptions",
+                "description": "Retrieves the maximum number of options allowed.\nParses the value of the 'max-options' attribute from the element and converts it to a number.\nIf the attribute is not present or cannot be converted to a valid number, defaults to 1."
+              },
+              { "name": "defaultValue" },
+              {
+                "name": "portaled",
+                "description": "Getter for the `portaled` attribute value."
+              },
+              {
+                "name": "isPortaled",
+                "description": "Checks whether popup content should be portaled."
+              },
+              {
+                "name": "trigger",
+                "description": "Returns the trigger value."
+              },
+              {
+                "name": "disabled",
+                "description": "Retrieves the current state of the 'disabled' attribute."
+              },
+              {
+                "name": "readonly",
+                "description": "Checks if the 'readonly' attribute is present on the element."
+              },
+              {
+                "name": "maxHeight",
+                "description": "Retrieves the maximum height value, which is determined by the 'max-height' attribute.\nIf the attribute is not set, a default value of '200px' is returned."
+              },
+              {
+                "name": "offset",
+                "description": "Gets the value of the offset attribute of the current element.\nIf the offset attribute is not present, returns a default value of '0'."
+              },
+              {
+                "name": "selectedOptions",
+                "description": "Retrieves the selected options."
+              },
+              {
+                "name": "lazy",
+                "description": "Getter for the 'lazy' property."
+              },
+              {
+                "name": "noSize",
+                "description": "Gets the value of the 'no-size' attribute for the element."
+              },
+              {
+                "name": "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": "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": "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-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.",
@@ -3362,122 +3468,16 @@
               },
               {
                 "name": "triggerEvent",
-                "description": "Triggers the event based on the target element.\nIf the target element is different from the last caller, it refreshes the children by calling the `open` method.\nIf the target element is the same as the last caller, it toggles the state by calling the `toggle` method."
-              },
-              { "name": "_isOpen", "type": "boolean" },
-              { "name": "_lastCaller", "type": "null" },
-              { "name": "_sheetDrag", "type": "null" },
-              { "name": "_sheetIgnoreDismissUntil", "type": "number" },
-              { "name": "_sheetBackdropGesture", "type": "null" },
-              { "name": "_sheetBackdropHandledUntil", "type": "number" },
-              { "name": "_bottomSheetScopeFrame", "type": "null" },
-              { "name": "_resizeObserver" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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": "active", "value": { "type": "string" } },
-            { "name": "disabled", "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": "Retrieves the current value."
-              },
-              {
-                "name": "maxOptions",
-                "description": "Retrieves the maximum number of options allowed.\nParses the value of the 'max-options' attribute from the element and converts it to a number.\nIf the attribute is not present or cannot be converted to a valid number, defaults to 1."
-              },
-              { "name": "defaultValue" },
-              {
-                "name": "portaled",
-                "description": "Getter for the `portaled` attribute value."
-              },
-              {
-                "name": "isPortaled",
-                "description": "Checks whether popup content should be portaled."
-              },
-              {
-                "name": "trigger",
-                "description": "Returns the trigger value."
-              },
-              {
-                "name": "disabled",
-                "description": "Retrieves the current state of the 'disabled' attribute."
-              },
-              {
-                "name": "readonly",
-                "description": "Checks if the 'readonly' attribute is present on the element."
-              },
-              {
-                "name": "maxHeight",
-                "description": "Retrieves the maximum height value, which is determined by the 'max-height' attribute.\nIf the attribute is not set, a default value of '200px' is returned."
-              },
-              {
-                "name": "offset",
-                "description": "Gets the value of the offset attribute of the current element.\nIf the offset attribute is not present, returns a default value of '0'."
-              },
-              {
-                "name": "selectedOptions",
-                "description": "Retrieves the selected options."
-              },
-              {
-                "name": "lazy",
-                "description": "Getter for the 'lazy' property."
-              },
-              {
-                "name": "noSize",
-                "description": "Gets the value of the 'no-size' attribute for the element."
-              },
-              {
-                "name": "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": "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": "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" }
+                "description": "Triggers the event based on the target element.\nIf the target element is different from the last caller, it refreshes the children by calling the `open` method.\nIf the target element is the same as the last caller, it toggles the state by calling the `toggle` method."
+              },
+              { "name": "_isOpen", "type": "boolean" },
+              { "name": "_lastCaller", "type": "null" },
+              { "name": "_sheetDrag", "type": "null" },
+              { "name": "_sheetIgnoreDismissUntil", "type": "number" },
+              { "name": "_sheetBackdropGesture", "type": "null" },
+              { "name": "_sheetBackdropHandledUntil", "type": "number" },
+              { "name": "_bottomSheetScopeFrame", "type": "null" },
+              { "name": "_resizeObserver" }
             ],
             "events": []
           }
@@ -3524,26 +3524,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-step",
-          "description": "This element represents a step.\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 step.\n\n### **CSS Parts:**\n - **native** - The native part of the step.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the step." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-stepper",
           "description": "This element represents a stepper.\n---\n\n\n### **Events:**\n - **stepper:next**\n- **stepper:prev**\n- **stepper:finish**\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component for the stepper.\n- **afterDraw()** - Sets up the attributes for the component.\n- **navigate(direction: _number_)** - Navigates to a different step in a multi-step process based on the provided direction.\n- **goToStep(stepIndex: _number_): _void_** - Navigates to a specific step in a workflow or process.\nExecutes a set of operations before and after the step transition.\n- **setStepDefault(nav: _HTMLElement_, badge: _HTMLElement|null_, stepIndex: _number_)** - Resets a step to its default state by clearing its active and done attributes.\nUpdates the step's badge to show its index and removes any color styling.\n- **setStepActive(nav: _HTMLElement_, badge: _HTMLElement|null_, stepIndex: _number|null_)** - Sets a step as active by adding the `active` attribute and updating the step's badge.\n- **setContentActive(stepIndex: _number_)** - Activates the content of a specific step by displaying it and hiding all others.\n- **getStepElement(stepIndex: _number_): _HTMLElement_** - Returns the DOM element of a step by index.\n- **renderStepContent(stepIndex: _number_, content: _Node|string|Node[]_, options: _{ replace?: boolean }_)** - Appends or replaces content inside the step container.\n- **setStepDone(nav: _HTMLElement_, badge: _HTMLElement|null_)** - Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n\n### **Slots:**\n - _default_ - The default slot for the stepper.\n\n### **CSS Parts:**\n - **native** - The native part of the stepper.\n- **header** - The header part of the stepper.\n- **content** - The content part of the stepper.",
@@ -3629,6 +3609,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-step",
+          "description": "This element represents a step.\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 step.\n\n### **CSS Parts:**\n - **native** - The native part of the step.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the step." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-tab-group",
           "description": "This element represents a group of tabs.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Sets up the event listeners before the component is drawn.\nThis method is called before the component is drawn.\nIt is used to set up event listeners.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing a structured layout for a tab group.\nThe tab group layout includes a `header` section with navigational elements,\na `section` element for tab panels, and slots for customization such as additional navigation items,\ndropdowns, and more.\nThe structure comprises:\n- A `div` container with relevant styling and part attributes.\n- A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).\n- A `section` for tab panels with a customizable `slot`.\nThis function also initializes the `nav` and `moreDropdown` properties for external use.\n- **afterDraw(): _void_** - Executes necessary initializations and attaches event listeners after a drawing operation.\nHandles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.\n- **removeActiveTab(): _void_** - Removes the 'active' class from all panel and tab elements.\n- **setActiveTab(tab: _string_)** - Sets the active tab and panel.\n- **getActiveTab(): _Element|null_** - Returns the currently active tab.\n- **getTabAll(): _Array<Element>_** - Returns all tabs.\n- **getAllTabs(): _Array<Element>_** - Returns all tabs, including those moved to \"more\".\n- **getPanelAll(): _Array<Element>_** - Returns all panels.\n- **getPanelAllName(): _Array<string>_** - Returns the names of all tabs.\n- **toggleMoreVisibility(): _void_** - Toggles the visibility of the \"more\" dropdown based on the presence of tabs in the \"more\" slot.\n- **initTabMetrics(): _void_** - Initializes metrics for tabs within the component. Assigns each tab to the navigation slot\nand calculates their dimensions for further operations.\n- **measureTabMetrics(): _Array<{el: Element, width: number}>_** - Measures current tab widths while all tabs are temporarily placed into the main nav slot.\n- **measureMoreWidth(): _void_** - Stores the measured width of the more dropdown trigger when available.\n- **checkOverflow(): _void_** - Checks if the tabs within a navigation bar overflow the available space.\nMoves overflowing tabs into a dropdown menu and updates their state accordingly.\n- **dropdownActive(el: _HTMLElement_): _void_** - Toggles the \"dropdown-active\" class on the element based on its \"active\" status\nand the value of its \"slot\" attribute.\n- **syncAria()** - Syncs ARIA attributes on tabs and panels.\n\n### **Slots:**\n - _default_ - The default slot for the tab group.\n- **nav** - Slot for the navigation of the tab group.\n\n### **CSS Properties:**\n - **--wje-tab-group-padding** - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`). _(default: 1rem)_",
@@ -3683,6 +3683,52 @@
             "events": []
           }
         },
+        {
+          "name": "wje-textarea",
+          "description": "This element represents a textarea input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the textarea.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Disconnects the component.\n\n### **CSS Properties:**\n - **--wje-textarea-font-family** - Specifies the font family used for the textarea. Accepts any valid CSS font-family value. _(default: var(--wje-font-family))_\n- **--wje-textarea-background-color** - Sets the background color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-textarea-color** - Defines the text color within the textarea. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-textarea-color-invalid** - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors. _(default: var(--wje-color-danger))_\n- **--wje-textarea-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-textarea-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-textarea-border-width** - Specifies the width of the textarea's border. Accepts any valid CSS length unit. _(default: 1px)_\n- **--wje-textarea-border-style** - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`. _(default: solid)_\n- **--wje-textarea-border-color** - Defines the border color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-textarea-border-color-focus** - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback. _(default: var(--wje-color-primary))_\n- **--wje-textarea-border-radius** - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit. _(default: 4px)_\n- **--wje-textarea-margin-bottom** - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements. _(default: .5rem)_\n- **--wje-textarea-line-height** - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text. _(default: 20px)_\n- **--wje-textarea-padding** - Defines the padding inside the textarea. Controls the spacing between the content and the border. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The native textarea wrapper.\n- **input** - The textarea input.\n- **wrapper** - The textarea wrapper.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "placeholder", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } },
+            { "name": "required", "value": { "type": "string" } },
+            { "name": "readonly", "value": { "type": "string" } },
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "rows", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Getter for the value attribute."
+              },
+              {
+                "name": "label",
+                "description": "Retrieves the value of the 'label' attribute if it exists.\nIf the 'label' attribute is not set, it returns false."
+              },
+              {
+                "name": "validateOnChange",
+                "description": "Getter for the validateOnChange attribute."
+              },
+              { "name": "placeholder" },
+              { "name": "className", "type": "string" },
+              {
+                "name": "setTextareaHeight",
+                "description": "Sets the height of the textarea."
+              },
+              {
+                "name": "counterFn",
+                "description": "Updates the counter for the textarea."
+              },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
+            ],
+            "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.",
@@ -3753,52 +3799,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-textarea",
-          "description": "This element represents a textarea input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the textarea.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Disconnects the component.\n\n### **CSS Properties:**\n - **--wje-textarea-font-family** - Specifies the font family used for the textarea. Accepts any valid CSS font-family value. _(default: var(--wje-font-family))_\n- **--wje-textarea-background-color** - Sets the background color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-textarea-color** - Defines the text color within the textarea. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-textarea-color-invalid** - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors. _(default: var(--wje-color-danger))_\n- **--wje-textarea-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-textarea-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-textarea-border-width** - Specifies the width of the textarea's border. Accepts any valid CSS length unit. _(default: 1px)_\n- **--wje-textarea-border-style** - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`. _(default: solid)_\n- **--wje-textarea-border-color** - Defines the border color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-textarea-border-color-focus** - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback. _(default: var(--wje-color-primary))_\n- **--wje-textarea-border-radius** - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit. _(default: 4px)_\n- **--wje-textarea-margin-bottom** - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements. _(default: .5rem)_\n- **--wje-textarea-line-height** - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text. _(default: 20px)_\n- **--wje-textarea-padding** - Defines the padding inside the textarea. Controls the spacing between the content and the border. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The native textarea wrapper.\n- **input** - The textarea input.\n- **wrapper** - The textarea wrapper.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "placeholder", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "required", "value": { "type": "string" } },
-            { "name": "readonly", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "rows", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "label",
-                "description": "Retrieves the value of the 'label' attribute if it exists.\nIf the 'label' attribute is not set, it returns false."
-              },
-              {
-                "name": "validateOnChange",
-                "description": "Getter for the validateOnChange attribute."
-              },
-              { "name": "placeholder" },
-              { "name": "className", "type": "string" },
-              {
-                "name": "setTextareaHeight",
-                "description": "Sets the height of the textarea."
-              },
-              {
-                "name": "counterFn",
-                "description": "Updates the counter for the textarea."
-              },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
-            ],
-            "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",
@@ -4035,58 +4035,6 @@
             "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.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "active", "value": { "type": "string" } },
-            {
-              "name": "content",
-              "description": "The content of the tooltip element. Accepts any valid string value.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "arrow",
-              "description": "The arrow slot for the tooltip."
-            },
-            {
-              "name": "anchor",
-              "description": "The anchor slot for the tooltip."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "dependencies",
-                "description": "Dependencies of the Button element.",
-                "type": "object"
-              },
-              {
-                "name": "content",
-                "description": "Get active attribute for the tooltip element."
-              },
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              },
-              { "name": "popupHideCallback" },
-              {
-                "name": "onShow",
-                "description": "Handles the logic for showing the component's popup or tooltip.\nAdds the `active` class, invokes lifecycle hooks, and manages the popup visibility."
-              },
-              {
-                "name": "onHide",
-                "description": "Hides the component's popup or tooltip.\nRemoves the `active` class from the component and hides the popup element."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-tree",
           "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the tree.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **appendTemplateSlot(item: _HTMLElement_, template: _HTMLTemplateElement|null_, slotName: _string_): _void_** - Retrieves and appends a template slot to a tree item.\n- **getTemplateSlotClass(slotName: _string_): _string_** - Returns the internal class used to identify cloned template slot content.\n- **setupReorderHandle(item: _HTMLElement_): _void_** - Marks direct start slot content as the drag handle for reorderable trees.\n- **getTreeItemFromEvent(e: _Event_): _HTMLElement|null_** - Finds a tree item from a composed event path.\n- **isReorderHandleEvent(e: _Event_): _boolean_** - Checks whether the event started from a reorder handle.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether a node is a tree item element.\n- **getDirectTreeItems(parent: _HTMLElement_): _HTMLElement[]_** - Returns direct tree item children for a tree or tree item parent.\n- **getTreeItemIndex(item: _HTMLElement_): _number_** - Gets the index of a tree item among direct tree item siblings.\n- **canDrop(draggedItem: _HTMLElement_, targetItem: _HTMLElement_): _boolean_** - Determines whether the dragged item can be dropped on the target.\n- **getDropPosition(e: _DragEvent_, target: _HTMLElement|null_): _'before'|'inside'|'after'_** - Resolves the drop position against the visible tree item row.\n- **setDropState(target: _HTMLElement_, position: _string_): _void_** - Applies the visual drop position to the current target item.\n- **clearDropState(): _void_** - Clears visual drop target state.\n- **clearDragState(): _void_** - Clears the active drag state.\n- **getDropPositionClass(position: _'before'|'inside'|'after'_): _string_** - Returns the internal class used to render a drop marker.\n- **moveItem(draggedItem: _HTMLElement_, targetItem: _HTMLElement_, position: _'before'|'inside'|'after'_): _object|null_** - Moves a tree item relative to another tree item and syncs nesting metadata.\n- **getOrderElements(parent: _HTMLElement_): _HTMLElement[]_** - Returns cloned direct tree item children for an event detail.\n- **getOrderIds(parent: _HTMLElement_): _Array<string|null>_** - Returns stable ids for direct tree item children when they are available.\n- **getItemId(item: _HTMLElement|null_): _string|null_** - Gets an application-facing id from a tree item.\n- **syncTreeItems(): _void_** - Syncs item selection mode and nesting metadata after a DOM move.\n- **refreshMovedItems(items: _HTMLElement[]_): _void_** - Redraws affected parent items so expand/collapse affordances match current children.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
@@ -4148,23 +4096,52 @@
           }
         },
         {
-          "name": "wje-visually-hidden",
-          "description": "This element represents a visually hidden element.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the visually hidden element.\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",
+          "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.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "active", "value": { "type": "string" } },
+            {
+              "name": "content",
+              "description": "The content of the tooltip element. Accepts any valid string value.",
+              "value": { "type": "string" }
+            }
+          ],
           "slots": [
             {
-              "name": "",
-              "description": "The default slot for the visually hidden element."
+              "name": "arrow",
+              "description": "The arrow slot for the tooltip."
+            },
+            {
+              "name": "anchor",
+              "description": "The anchor slot for the tooltip."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "dependencies",
+                "description": "Dependencies of the Button element.",
+                "type": "object"
+              },
+              {
+                "name": "content",
+                "description": "Get active attribute for the tooltip element."
+              },
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
+              },
+              { "name": "popupHideCallback" },
+              {
+                "name": "onShow",
+                "description": "Handles the logic for showing the component's popup or tooltip.\nAdds the `active` class, invokes lifecycle hooks, and manages the popup visibility."
+              },
+              {
+                "name": "onHide",
+                "description": "Hides the component's popup or tooltip.\nRemoves the `active` class from the component and hides the popup element."
               }
             ],
             "events": []
@@ -4213,6 +4190,29 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "wje-visually-hidden",
+          "description": "This element represents a visually hidden element.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the visually hidden element.\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the visually hidden element."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
         }
       ]
     }