wj-elements 0.7.2 → 0.7.4

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "wj-elements",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -305,30 +305,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-badge",
-          "description": "This class represents a Badge element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes(): _void_** - Configures initial attributes for the Badge element.\n- **draw(): _DocumentFragment_** - Creates the DOM structure for the Badge element.\n\n### **Slots:**\n - _default_ - The badge's main content.\n\n### **CSS Properties:**\n - **--wje-badge-border-radius** - Border radius of the badge element. _(default: var(--wje-border-radius-pill))_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The badge's main content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Badge element.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-breadcrumb",
           "description": "This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Breadcrumb element.\n- **draw(): _object_** - Draw method for the Breadcrumb element.\n- **shouldRenderSeparator(): _boolean_** - Returns whether the separator should be visible after this breadcrumb.\n- **hasVisibleBreadcrumbAfter(): _boolean_** - Returns whether any later breadcrumb is still visible in the rendered trail.\n- **isBreadcrumbVisibleInTrail(breadcrumb: _Element_): _boolean_** - Returns whether a breadcrumb is visible in the rendered trail.\n- **syncNativeAttributes()** - Synchronizes host attributes to the internal anchor.\n- **afterDraw()** - Sets up native anchor listeners after render.\n- **beforeDisconnect()** - Removes native anchor listeners before redraw/disconnect.\n- **handleDisabledNativeClick(e: _MouseEvent_)** - Prevents disabled breadcrumbs from navigating or bubbling click handlers.\n- **drawCollapsedIndicator(): _any_** - Renders the collapsed indicator based on the current collapsed variant.\nIf the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\nMobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.\n- **isMobileCollapsedVariant(): _boolean_** - Returns whether the current collapsed variant is a compact mobile layout.\n- **collapseDropdown(): _HTMLElement_** - Creates and returns a dropdown UI component for collapsed breadcrumbs.\nThis method generates a dropdown element with a button trigger and a menu populated with items corresponding\nto the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\nevents are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\nbreadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n- **createBreadcrumbDropdown({ breadcrumbs, trigger, placement = 'bottom' }, options: _@param {Array<HTMLElement>} options.breadcrumbs Breadcrumb elements to mirror in the menu.\n     * @param {HTMLElement} options.trigger Element assigned to the dropdown trigger slot.\n     * @param {string} options.placement Floating UI placement token for the popup.\n     * _): _HTMLElement_** - Creates a dropdown containing breadcrumb menu items.\n- **createCollapsedBreadcrumbMenu(breadcrumbs: _Array<HTMLElement>_): _HTMLElement_** - Creates the menu used by collapsed dropdown variants.\n- **getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator: _boolean_): _Array<HTMLElement>_** - Returns breadcrumbs that should be exposed in a collapsed menu.\n- **collapseMobileVariant(variant: _string_): _HTMLElement_** - Renders one of the compact mobile breakpoint variants.\n- **collapseMobileText(): _HTMLElement_** - Renders only the current breadcrumb title.\n- **collapseMobileBack(): _HTMLElement_** - Renders a parent back action above the current title.\n- **collapseMobileParentTitle(): _HTMLElement_** - Renders parent context above the current title.\n- **collapseMobileMenuTitle(): _HTMLElement_** - Renders a menu trigger with the current title.\n- **collapseMobileSheet(): _HTMLElement_** - Renders the future sheet variant using the dropdown fallback for now.\n- **createMobileDropdown(trigger: _HTMLElement_): _HTMLElement_** - Creates a dropdown fallback for mobile menu-like variants.\n- **createMobileDropdownTrigger({ icon, iconPosition = 'start', label, ariaLabel, className }, options: _@param {string} options.icon Icon shown next to the title.\n     * @param {string} options.iconPosition Whether the icon renders at the start or end.\n     * @param {string} options.label Current breadcrumb label shown beside the icon.\n     * @param {string} options.ariaLabel Accessible name for the dropdown trigger.\n     * @param {string} options.className Variant-specific class applied to the trigger.\n     * _): _HTMLElement_** - Creates a compact mobile dropdown trigger.\n- **createMobileContainer(className: _string_): _HTMLElement_** - Creates a wrapper for compact mobile breadcrumb variants.\n- **createMobileBreadcrumbControl(breadcrumb: _HTMLElement|null_, className: _string_, { actionable = false, ariaCurrent = false, ariaLabel, icon }, options: _@param {boolean} options.actionable Whether clicks should forward to the source breadcrumb.\n     * @param {boolean} options.ariaCurrent Whether the control marks the current page.\n     * @param {string} options.ariaLabel Accessible name for action controls.\n     * @param {string} options.icon Optional icon shown before the label.\n     * _): _HTMLElement_** - Creates a text or button control for a breadcrumb.\n- **getTrailBreadcrumbs(): _Array<HTMLElement>_** - Returns the full trail of sibling breadcrumbs.\n- **getCurrentBreadcrumb(): _HTMLElement|null_** - Returns the current breadcrumb item.\n- **getParentBreadcrumb(): _HTMLElement|null_** - Returns the parent breadcrumb item.\n- **isBreadcrumbActionable(breadcrumb: _HTMLElement|null_): _boolean_** - Returns whether a breadcrumb has a known action to forward.\n- **forwardBreadcrumbClick(breadcrumb: _HTMLElement|null_)** - Forwards a compact control or menu item click to the original breadcrumb.\n- **createCollapsedDropdownTrigger(isBreakpointMenuIndicator: _boolean_): _HTMLElement_** - Creates the dropdown trigger for collapsed breadcrumbs.\n- **getCollapsedDropdownIcon(isBreakpointMenuIndicator: _boolean_): _string_** - Resolves the icon used by the default dropdown trigger.\n- **populateCollapsedMenuItem(menuItem: _HTMLElement_, breadcrumb: _HTMLElement_)** - Copies breadcrumb content into a collapsed menu item.\n- **getBreadcrumbLabel(breadcrumb: _HTMLElement|null_): _string_** - Resolves a readable label for a breadcrumb item.\n- **getCollapsedMenuItemLabel(breadcrumb: _HTMLElement_): _string_** - Resolves a readable label for icon-only collapsed menu items.\n- **humanizeCollapsedMenuItemLabel(value: _string_): _string_** - Turns a URL segment into a readable menu label.\n- **isBreakpointMenuIndicator(): _boolean_** - Returns whether this collapsed indicator represents the full breakpoint menu.\n- **collapseButton(): _HTMLButtonElement_** - Creates a button element that expands hidden breadcrumbs when clicked.\nThe button is set with appropriate attributes and event listeners to handle\nthe expanding of hidden breadcrumb elements. Clicking the button will remove\nthe button itself, reveal hidden breadcrumbs, and stop the current event\npropagation.\n- **getBreadcrumbs(): _Element_** - Retrieves the breadcrumb trail for the current element by returning its parent element.\n\n### **Slots:**\n - _default_ - The main content of the breadcrumb.\n- **start** - Slot for content at the start of the breadcrumb.\n- **end** - Slot for content at the end of the breadcrumb.\n- **separator** - Slot for a custom separator between breadcrumb items.\n\n### **CSS Properties:**\n - **--wje-breadcrumb-a** - The color of the breadcrumb text. _(default: var(--wje-color-contrast-8))_\n- **--wje-breadcrumb-a-hover** - The color of the breadcrumb separator line. _(default: var(--wje-color-contrast-6))_\n- **--wje-breadcrumb-line-height** - Controls the vertical rhythm of breadcrumb text. _(default: 1.5)_\n- **--wje-breadcrumb-native-line-height** - Controls the line height of the native breadcrumb wrapper. _(default: var(--wje-breadcrumb-line-height))_\n- **--wje-breadcrumb-native-margin** - Sets outer spacing around the native breadcrumb wrapper. _(default: 0)_\n- **--wje-breadcrumb-native-padding** - Sets inner spacing inside the native breadcrumb wrapper. _(default: 0.25rem 0.75rem)_\n- **--wje-breadcrumb-margin** - Backwards-compatible alias for native breadcrumb margin. _(default: var(--wje-breadcrumb-native-margin))_\n- **--wje-breadcrumb-padding** - Backwards-compatible alias for native breadcrumb padding. _(default: var(--wje-breadcrumb-native-padding))_\n\n### **CSS Parts:**\n - **native** - The native wrapper of the breadcrumb component.\n- **separator** - The separator between breadcrumb items.",
@@ -515,6 +491,30 @@
             "events": []
           }
         },
+        {
+          "name": "wje-badge",
+          "description": "This class represents a Badge element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes(): _void_** - Configures initial attributes for the Badge element.\n- **draw(): _DocumentFragment_** - Creates the DOM structure for the Badge element.\n\n### **Slots:**\n - _default_ - The badge's main content.\n\n### **CSS Properties:**\n - **--wje-badge-border-radius** - Border radius of the badge element. _(default: var(--wje-border-radius-pill))_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The badge's main content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Badge element.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-button",
           "description": "This class represents Button element, extending the WJElement class.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the Button element.\n- **afterDraw()** - After draw method for the Button element.\n- **beforeDisconnect()** - Before disconnect method for the Button element.\n- **syncToggleState()** - Keeps toggle slot visibility aligned with the current value.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n\n### **Slots:**\n - _default_ - The button main content.\n- **icon** - The button icon.\n- **caret** - The button caret.\n- **start** - The button start slot.\n- **end** - The button end slot.\n- **toggle** - The button toggle slot.\n\n### **CSS Properties:**\n - **--wje-button-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-button-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-button-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-button-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-button-border-style** - Border style of the component; _(default: solid)_\n- **--wje-button-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-button-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
@@ -726,26 +726,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-card-title",
-          "description": "CardTitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardTitle.\n- **draw(): _DocumentFragment_** - Draws the CardTitle element.\n\n### **Slots:**\n - _default_ - The card title main content.\n\n### **CSS Properties:**\n - **--wje-card-title-font-size** - Font size of the component; _(default: 24px)_\n- **--wje-card-title-font-weight** - Font weight of the component; _(default: 500)_\n- **--wje-card-title-margin** - Margin of the component; _(default: 0)_\n- **--wje-card-title-padding** - Padding of the component; _(default: 0)_\n- **--wje-card-title-line-height** - Line height of the component; _(default: 1.2)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card title main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the CardTitle.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-card-subtitle",
           "description": "CardSubtitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardSubtitle.\n- **draw(): _DocumentFragment_** - Draws the CardSubtitle element.\n\n### **Slots:**\n - _default_ - The card subtitle main content.\n\n### **CSS Properties:**\n - **--wje-card-subtitle-font-size** - Font size of the component; _(default: 11px)_\n- **--wje-card-subtitle-font-family** - Font family of the component; _(default: var(--wje-font-family-secondary))_\n- **--wje-card-subtitle-padding** - Padding of the component; _(default: 0)_",
@@ -767,19 +747,19 @@
           }
         },
         {
-          "name": "wje-carousel-item",
-          "description": "This class represents CarouselItem element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CarouselItem.\n- **draw(): _DocumentFragment_** - Draws the CarouselItem element.\n- **afterDraw()** - After draw event for the CarouselItem element.\n- **syncContentLayoutMode()** - Keeps a simple layout hint for single-wrapper content.\n\n### **Slots:**\n - _default_ - The carousel item main content.\n\n### **CSS Properties:**\n - **--wje-carousel-item-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-carousel-item-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-carousel-item-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-carousel-item-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-carousel-item-border-style** - Border style of the component; _(default: solid)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-carousel-item-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "name": "wje-card-title",
+          "description": "CardTitle class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardTitle.\n- **draw(): _DocumentFragment_** - Draws the CardTitle element.\n\n### **Slots:**\n - _default_ - The card title main content.\n\n### **CSS Properties:**\n - **--wje-card-title-font-size** - Font size of the component; _(default: 24px)_\n- **--wje-card-title-font-weight** - Font weight of the component; _(default: 500)_\n- **--wje-card-title-margin** - Margin of the component; _(default: 0)_\n- **--wje-card-title-padding** - Padding of the component; _(default: 0)_\n- **--wje-card-title-line-height** - Line height of the component; _(default: 1.2)_",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The carousel item main content." }
+            { "name": "", "description": "The card title main content." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "Class name for the CarouselItem element.",
+                "description": "Class name for the CardTitle.",
                 "type": "string"
               }
             ],
@@ -823,6 +803,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-carousel-item",
+          "description": "This class represents CarouselItem element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CarouselItem.\n- **draw(): _DocumentFragment_** - Draws the CarouselItem element.\n- **afterDraw()** - After draw event for the CarouselItem element.\n- **syncContentLayoutMode()** - Keeps a simple layout hint for single-wrapper content.\n\n### **Slots:**\n - _default_ - The carousel item main content.\n\n### **CSS Properties:**\n - **--wje-carousel-item-background-color** - Background color of the component; _(default: transparent)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-4)_\n- **--wje-carousel-item-color** - Color of the component; _(default: --wje-color-contrast-11)_\n- **--wje-carousel-item-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-carousel-item-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-carousel-item-border-style** - Border style of the component; _(default: solid)_\n- **--wje-carousel-item-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-carousel-item-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The carousel item main content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "Class name for the CarouselItem element.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-checkbox",
           "description": "This method dispatches a custom event named \"wje-toggle:change\".\nIt is triggered when the input event is fired, which happens when the state of the checkbox changes.\nThe event is dispatched on the current instance of the Checkbox class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the checkbox.\n- **draw(): _DocumentFragment_** - Draws the checkbox element.\n- **afterDraw()** - Adds an event listener after drawing the checkbox.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Removes the event listener when the checkbox is disconnected.\n\n### **Slots:**\n - _default_ - The checkbox main content.\n\n### **CSS Properties:**\n - **--wje-checkbox-border-radius** - Border radius of the component; _(default: --wje-border-radius-medium)_\n- **--wje-checkbox-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-checkbox-border-style** - Border style of the component; _(default: solid)_\n- **--wje-checkbox-border-color** - Border color of the component; _(default: --wje-color-contrast-1)_\n- **--wje-checkbox-margin-inline** - Margin inline of the component; _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.",
@@ -933,29 +933,6 @@
             "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)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The slot for adding child elements or components."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Class name for the Container.",
-                "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.",
@@ -1024,6 +1001,29 @@
             "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)_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The slot for adding child elements or components."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "Class name for the Container.",
+                "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.",
@@ -1082,26 +1082,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-dialog",
           "description": "This element represents a dialog.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw(context: _object_, store: _object_, params: _object_)** - Draws the component after it has been drawn.\n- **htmlDialogBody(dialog)** - Creates the dialog body.\n- **close(e)** - Closes the dialog.\n- **beforeDisconnect()** - Before the component is disconnected.\n- **beforeOpen(dialog, trigger)** - Before the dialog opens.\n- **afterOpen(dialog, trigger)** - After the dialog opens.\n- **beforeClose(dialog, trigger)** - Before the dialog closes.\n- **afterClose(dialog, trigger)** - After the dialog closes.\n- **registerBlockingEvent(button: _HTMLElement_, promise: _Function_)** - Registers an event listener on the provided button that triggers a blocking UI element\nand executes a given promise when the button is clicked.\n\n### **Slots:**\n - **header** - Slot for the header content.\n- **body** - Slot for the body content.\n- **footer** - Slot for the footer content.\n\n### **CSS Properties:**\n - **--wje-dialog-background** - Specifies the background color of the dialog. _(default: var(--wje-background-color))_\n- **--wje-dialog-color** - Defines the text color within the dialog. _(default: var(--wje-text-color))_\n- **--wje-dialog-padding** - Controls the padding inside the dialog. _(default: 1rem)_\n- **--wje-dialog-border-radius** - Sets the border radius for the dialog's corners. _(default: 0.5rem)_\n- **--wje-dialog-box-shadow** - Applies a shadow effect to the dialog. _(default: 0 2px 10px rgba(0, 0, 0, 0.1))_\n\n### **CSS Parts:**\n - **dialog** - The dialog wrapper.\n- **header** - The header of the dialog.\n- **body** - The body of the dialog.\n- **footer** - The footer of the dialog.\n- **close** - The close button of the dialog.",
@@ -1147,6 +1127,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-divider",
+          "description": "Divider is a custom web component that extends WJElement.\nIt provides a simple divider line that can be used to separate content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Divider.\n- **draw(): _DocumentFragment_** - Draws the Divider.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-border-width** - The size of the border. _(default: 1px)_\n- **--wje-divider-border-color** - The color of the divider borderline. _(default: var(--wje-border-color))_\n- **--wje-divider-border-width** - The width of the divider borderline. _(default: var(--wje-border-width, 1px))_\n- **--wje-divider-spacing** - The spacing for the divider. _(default: 0)_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "This is a default/unnamed slot." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Divider class.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-dropdown",
           "description": "This element represents a dropdown menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the dropdown.\n- **beforeDraw()** - Removes the popup element.\n- **draw(): _DocumentFragment_** - Draws the dropdown element and returns the created document fragment.\n- **afterDraw()** - Adds event listeners for the mouseenter and mouseleave events.\n- **afterDisconnect()** - Adds event listeners for the mouseenter and mouseleave events.\n- **syncPopupOwner()** - Assigns the current dropdown instance as the owner of its popup layers.\nOwner metadata is later used to resolve which dropdown should react to\ndelegated menu-item clicks, including portaled popup content.\n- **syncOwnedContentOwner(root: _HTMLElement_)** - Recursively assigns owner metadata to the dropdown content subtree while\nleaving nested dropdown roots untouched, so each nested dropdown can keep\nits own ownership boundary.\n- **getMenuItemOwner(path: _EventTarget[]_, item: _HTMLElement_): _HTMLElement|null_** - Resolves the dropdown that owns a clicked menu item. The lookup prefers\nexplicit owner metadata and falls back to DOM traversal so both regular\nand portaled dropdown content can be scoped correctly.\n- **afterShow()** - This method is called after the dropdown is shown.\n- **syncAria()** - Syncs ARIA attributes for the trigger element.\n\n### **Slots:**\n - **trigger** - The slot for the trigger of the dropdown.\n- _default_ - The default slot for the dropdown.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet dropdowns. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet dropdowns. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n\n### **CSS Parts:**\n - **native** - The native part of the dropdown.\n- **popup-native** - The exported native popup panel part.\n- **backdrop** - The exported mobile bottom sheet backdrop part.",
@@ -1229,7 +1229,7 @@
         },
         {
           "name": "wje-file-upload",
-          "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(e: _Event_)** - Method to handle form submission.\n- **addFilesToQueue(files)** - Method to add files to the queue.\n- **uploadFiles()** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **resetFormState()** - Method to reset the form state.\n- **showError(error: _object|Error_)** - Shows a user-facing validation error inside the dropzone.\n- **clearError()** - Clears the currently displayed validation error.\n- **getErrorMessage(error: _object|Error_): _string_** - Resolves a readable upload error message.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **upload-button** - The label part.",
+          "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(e: _Event_)** - Method to handle form submission.\n- **addFilesToQueue(files)** - Method to add files to the queue.\n- **uploadFiles()** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **resetFormState()** - Method to reset the form state.\n- **showError(error: _object|Error_)** - Shows a user-facing validation error inside the dropzone.\n- **clearError()** - Clears the currently displayed validation error.\n- **getErrorMessage(error: _object|Error_): _string_** - Resolves a readable upload error message.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-file-upload-padding** - Controls the padding around the native file upload area. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **upload-button** - The label part.",
           "doc-url": "",
           "attributes": [
             { "name": "label", "value": { "type": "string" } },
@@ -1353,6 +1353,23 @@
             ]
           }
         },
+        {
+          "name": "wje-footer",
+          "description": "This element represents a footer. `Footer` is a custom web component that represents a footer.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the footer content\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the footer _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Default slot for the footer content"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-file-upload-item",
           "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item. //@fires wje-button:click - Dispatches when the delete button is clicked _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
@@ -1391,23 +1408,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-footer",
-          "description": "This element represents a footer. `Footer` is a custom web component that represents a footer.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the footer content\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the footer _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Default slot for the footer content"
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-form",
           "description": "The Form class is a custom\nweb component that extends WJElement. It is a simple form that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Form.\n- **draw(): _DocumentFragment_** - Draws the Form.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
@@ -1501,23 +1501,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-header",
-          "description": "`Header` is a custom web component that represents a header. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the header content\n\n### **CSS Properties:**\n - **--wje-header-background** - The background of the header element. _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header element. _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header element. _(default: 0 0 1px 0)_\n- **--wje-header-border-style** - The border styles of the header _(default: solid)_\n- **--wje-header-top** - The position top of the header _(default: 0)_\n- **--wje-header-height** - The height of the header element. _(default: 60px)_\n- **--wje-header-z-index** - The z-index used when the header is sticky. _(default: 100)_\n\n### **CSS Parts:**\n - **native** - The native part",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Default slot for the header content"
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-icon",
           "description": "This element represents an icon. `IconElement` is a custom web component that represents an icon.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Properties:**\n - **--wje-icon-size** - The size of the icon element _(default: 1rem)_\n- **--wje-icon-width** - The width of the icon element _(default: var(--wje-icon-size, 100%))_\n- **--wje-icon-height** - The height of the icon element _(default: var(--wje-icon-size, 100%))_\n\n### **CSS Parts:**\n - **svg** - The SVG part of the icon",
@@ -1539,6 +1522,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-header",
+          "description": "`Header` is a custom web component that represents a header. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **default** - Default slot for the header content\n\n### **CSS Properties:**\n - **--wje-header-background** - The background of the header element. _(default: var(--wje-background))_\n- **--wje-header-border-color** - The border color of the header element. _(default: var(--wje-border-color))_\n- **--wje-header-border-width** - The border width of the header element. _(default: 0 0 1px 0)_\n- **--wje-header-border-style** - The border styles of the header _(default: solid)_\n- **--wje-header-top** - The position top of the header _(default: 0)_\n- **--wje-header-height** - The height of the header element. _(default: 60px)_\n- **--wje-header-z-index** - The z-index used when the header is sticky. _(default: 100)_\n\n### **CSS Parts:**\n - **native** - The native part",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Default slot for the header content"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-icon-picker",
           "description": "This element allows users to pick an icon from a set of available options.\n`IconPicker` is a custom web component that represents an interactive icon picker. It features\nsearch functionality, infinite scrolling, and popup-based selection. The component is highly customizable\nand integrates seamlessly with other `WJElement` components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _Promise<void>_** - Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n- **draw(): _DocumentFragment_** - Draws and initializes the native color picker component on the DOM.\nThis method creates and appends the necessary elements, including input and infinite scroll components,\nand sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\nand manages the way icons are displayed based on input.\n- **afterDraw(): _void_** - Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\nand infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n- **syncAria()** - Sync ARIA attributes on host.\n- **initial()** - Initializes the component.\n- **getTags(): _Promise<Array>_** - Gets the tags.\n- **beforeDisconnect()** - Called when the component is disconnected.\n- **clearIconsContainer()** - Clears the icons container.\n- **debounce(fn: _Function_, delay: _number_): _Function_** - Creates a debounced version of the provided function that delays its execution\nuntil after the specified delay has passed since the last time it was invoked.\n\n### **CSS Properties:**\n - **--wje-color-picker-value** - The default color value. _(default: #ff0000)_\n- **--wje-color-picker-area** - The background color of the color picker area. _(default: transparent)_\n- **--wje-color-picker-swatch** - The background color of the swatch picker. _(default: transparent)_\n- **--wje-color-picker-size** - The size of the icons in the picker. _(default: 1rem)_\n- **--wje-color-picker-radius** - The border radius of the picker. _(default: 4px)_\n\n### **CSS Parts:**\n - **native** - The native part of the component.\n- **anchor** - The part representing the anchor button displaying the selected icon.\n- **picker** - The picker part containing the search and icon selection interface.\n- **input** - The input part for searching icons.",
@@ -1597,58 +1597,31 @@
           }
         },
         {
-          "name": "wje-img",
-          "description": "This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates and assembles a lazy-loaded image element within a document fragment.\n- **afterDraw(): _void_** - Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\nObserves when the target element becomes visible in the viewport and updates its source with the provided image source.\nRemoves the `lazy` class once the image source is updated and unobserves the element.\nIt also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n- **addAction(name: _string_, func: _Function_): _void_** - Adds a new action to the internal actions object.\n- **removeAction(name: _string_): _void_** - Removes an action from the actions list if it exists.\n\n### **CSS Properties:**\n - **--img-width** - The width of the image _(default: undefined)_\n- **--img-height** - The height of the image _(default: undefined)_",
+          "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": [
-            { "name": "src", "value": { "type": "string" } },
-            { "name": "alt", "value": { "type": "string" } },
-            { "name": "no-lazy", "value": { "type": "string" } }
+          "attributes": [],
+          "slots": [
+            { "name": "before", "description": "The before image slot." },
+            { "name": "after", "description": "The after image slot." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "src",
-                "description": "The source URL of the image.",
-                "type": "string"
-              },
-              {
-                "name": "alt",
-                "description": "The alternative text for the image.",
-                "type": "string"
-              },
-              {
-                "name": "fallout",
-                "description": "The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.",
-                "type": "string"
-              },
-              {
-                "name": "loader",
-                "description": "The URL of the image loader to display while the image is loading.",
-                "type": "string"
-              },
-              {
-                "name": "noLazy",
-                "description": "Disables lazy loading and renders the image source immediately.",
-                "type": "boolean"
-              },
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
+                "name": "dependencies",
+                "description": "Dependencies of the ImgComparer component.",
+                "type": "object"
               },
-              { "name": "setAvatarInitials" },
+              { "name": "className", "type": "string" },
               {
-                "name": "deleteImage",
-                "description": "Deletes the current image by calling the remove method.\nThis function is typically used to trigger the removal of an image element\nor perform cleanup operations related to the image."
+                "name": "handleDrag",
+                "description": "Handles the drag event."
               },
               {
-                "name": "onerrorFunc",
-                "description": "Handles error scenarios by checking the `fallout` property and performing\ncorresponding actions. If `fallout` is not defined, the function terminates\nearly. Logs the active actions and attempts to assign an error handler\nbased on the `fallout` value. If the `fallout` value does not correspond to\na recognized action, it logs an error message."
-              },
-              { "name": "_fallout", "type": "boolean" },
-              { "name": "actions", "type": "object" }
+                "name": "clamp",
+                "description": "Clamps a number between a minimum and maximum value."
+              }
             ],
             "events": []
           }
@@ -1713,6 +1686,63 @@
             "events": []
           }
         },
+        {
+          "name": "wje-img",
+          "description": "This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates and assembles a lazy-loaded image element within a document fragment.\n- **afterDraw(): _void_** - Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\nObserves when the target element becomes visible in the viewport and updates its source with the provided image source.\nRemoves the `lazy` class once the image source is updated and unobserves the element.\nIt also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n- **addAction(name: _string_, func: _Function_): _void_** - Adds a new action to the internal actions object.\n- **removeAction(name: _string_): _void_** - Removes an action from the actions list if it exists.\n\n### **CSS Properties:**\n - **--img-width** - The width of the image _(default: undefined)_\n- **--img-height** - The height of the image _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            { "name": "src", "value": { "type": "string" } },
+            { "name": "alt", "value": { "type": "string" } },
+            { "name": "no-lazy", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "The source URL of the image.",
+                "type": "string"
+              },
+              {
+                "name": "alt",
+                "description": "The alternative text for the image.",
+                "type": "string"
+              },
+              {
+                "name": "fallout",
+                "description": "The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.",
+                "type": "string"
+              },
+              {
+                "name": "loader",
+                "description": "The URL of the image loader to display while the image is loading.",
+                "type": "string"
+              },
+              {
+                "name": "noLazy",
+                "description": "Disables lazy loading and renders the image source immediately.",
+                "type": "boolean"
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              { "name": "setAvatarInitials" },
+              {
+                "name": "deleteImage",
+                "description": "Deletes the current image by calling the remove method.\nThis function is typically used to trigger the removal of an image element\nor perform cleanup operations related to the image."
+              },
+              {
+                "name": "onerrorFunc",
+                "description": "Handles error scenarios by checking the `fallout` property and performing\ncorresponding actions. If `fallout` is not defined, the function terminates\nearly. Logs the active actions and attempts to assign an error handler\nbased on the `fallout` value. If the `fallout` value does not correspond to\na recognized action, it logs an error message."
+              },
+              { "name": "_fallout", "type": "boolean" },
+              { "name": "actions", "type": "object" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-input",
           "description": "This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the input.\n- **draw(): _DocumentFragment_** - Draws the input element.\n- **afterDraw()** - Runs after the input is drawn to the DOM.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **hasSlot(el: _HTMLElement_, slotName: _string_): _boolean_** - Checks whether the input has a slot.\n\n### **Slots:**\n - **start** - Slot for content at the start of the input.\n- **end** - Slot for content at the end of the input.\n\n### **CSS Properties:**\n - **--wje-input-font-family** - Defines the font family for the input text. _(default: var(--wje-font-family))_\n- **--wje-input-background-color** - Specifies the background color of the input field. _(default: var(--wje-background))_\n- **--wje-input-color** - Sets the text color within the input field. _(default: var(--wje-color))_\n- **--wje-input-color-invalid** - Changes the text color when the input value is invalid. _(default: var(--wje-color-danger))_\n- **--wje-input-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-input-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-input-border-color** - Defines the border color of the input field. _(default: var(--wje-border-color))_\n- **--wje-input-border-color-focus** - Specifies the border color when the input is focused. _(default: var(--wje-color-primary))_\n- **--wje-input-border-width** - Sets the width of the input border. _(default: 1px)_\n- **--wje-input-border-style** - Defines the border style of the input (e.g., solid, dashed). _(default: solid)_\n- **--wje-input-border-radius** - Specifies the border radius, creating rounded corners. _(default: 4px)_\n- **--wje-input-margin-bottom** - Adds spacing below the input field. _(default: .5rem)_\n- **--wje-input-line-height** - Sets the line height of the text within the input field. _(default: 20px)_\n- **--wje-input-slot-padding-inline** - Controls the padding on the left and right of the input slot content. // @fires wje-input:input - Dispatched when the input value changes. // @fires wje-input:clear - Dispatched when the input is cleared. _(default: .5rem)_\n\n### **CSS Parts:**\n - **native** - The native part.\n- **wrapper** - The wrapper part.\n- **input** - The input part.\n- **clear** - The clear part.",
@@ -1847,6 +1877,20 @@
             "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.",
@@ -1910,12 +1954,12 @@
           }
         },
         {
-          "name": "wje-label",
-          "description": "This element represents a label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`). _(default: black)_\n- **--wje-label-font-size** - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs. // @fires wje-label:change - Event fired when the label is changed. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
+          "name": "wje-list",
+          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of attributes to observe for changes.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. Accepts any valid CSS length. _(default: 8px)_\n- **--wje-list-background** - The background of the list. Accepts any valid CSS color value. _(default: var(--wje-background))_",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The default slot for the label." }
+            { "name": "", "description": "The default slot for the list." }
           ],
           "events": [],
           "js": {
@@ -1923,36 +1967,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-img-comparer",
-          "description": "This element allows users to compare two images. `ImgComparer` is a custom web component that represents an image comparer.\nIt extends from `WJElement` and uses the `Icon` component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - **before** - The before image slot.\n- **after** - The after image slot.\n\n### **CSS Properties:**\n - **--wje-img-compare-divider-area** - The area of the divider. This is the size of the divider. Accepts any valid CSS size. _(default: 12px)_\n- **--wje-img-compare-divider-background** - Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255, 255, 255, 0.5)`). The default value is `white`, which ensures high contrast in most designs. _(default: white)_\n- **--wje-img-compare-divider-size** - The size of the divider. This is the thickness of the divider. Accepts any valid CSS size. _(default: 2px)_\n- **--wje-img-compare-divider-left** - The left position of the divider. This is the initial position of the divider. _(default: 50%)_\n- **--wje-img-compare-position** - The position of the divider. This is the position of the divider. _(default: 50%)_\n- **--wje-img-compare-clip-path** - The clip path of the divider. This is the clip path of the divider. _(default: inset(0 calc(100% - var(--wje-img-compare-position)) 0 0))_\n\n### **CSS Parts:**\n - **divider** - The divider part.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "before", "description": "The before image slot." },
-            { "name": "after", "description": "The after image slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "dependencies",
-                "description": "Dependencies of the ImgComparer component.",
-                "type": "object"
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "handleDrag",
-                "description": "Handles the drag event."
-              },
-              {
-                "name": "clamp",
-                "description": "Clamps a number between a minimum and maximum value."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-level-indicator",
           "description": "LevelIndicator is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **afterDraw(): _void_** - Executes any additional operations or updates required after the drawing process is completed.\n- **syncAria()** - Sync ARIA attributes on host.\n- **updateBars(level: _number_, bars: _Array_): _void_** - Updates the class of each bar element based on the specified level.\n- **getColor(level: _number_, bars: _number_): _string | undefined_** - Determines the color indicator based on the given level and bars.\n\n### **CSS Parts:**\n - **** - Styles the element.",
@@ -1985,20 +1999,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-list",
-          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of attributes to observe for changes.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. Accepts any valid CSS length. _(default: 8px)_\n- **--wje-list-background** - The background of the list. Accepts any valid CSS color value. _(default: var(--wje-background))_",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the list." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-main",
           "description": "This element represents a main section.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the main section.\n\n### **Slots:**\n - _default_ - The default slot for the main section.",
@@ -2329,33 +2329,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-group",
           "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart group.\n- **afterDraw()** - After Draws the component for the org chart group.\n\n### **CSS Parts:**\n - **** - Styles the element.",
@@ -2420,6 +2393,33 @@
             "events": []
           }
         },
+        {
+          "name": "wje-orgchart",
+          "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "flat",
+              "description": "Removes the incoming connector spacing for nested charts that should visually continue on the same level.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "flat",
+                "description": "Gets whether the chart omits its incoming connector spacing."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "syncFlatChildren",
+                "description": "Marks direct children that are rendered inside a flat chart."
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-pagination",
           "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS Parts:**\n - **native** - The wrapper element for the pagination component.",
@@ -2816,62 +2816,23 @@
           }
         },
         {
-          "name": "wje-radio-group",
-          "description": "This element represents a group of radio buttons.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the radio group.\n- **afterDraw()** - Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getRadioByValue(value: _string_): _Radio_** - Returns the radio button with the given value.\n- **removeCheck()** - Removes the check from all radio buttons.\n- **checkRadio(radio)** - Sets the given radio button to checked.\n- **getAllElements(): _HTMLElement[]_** - Retrieves all direct child elements of the current element.\n\n### **Slots:**\n - _default_ - The default slot for the radio group.",
+          "name": "wje-reorder",
+          "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
           "doc-url": "",
-          "attributes": [
-            { "name": "required", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the radio group."
+              "description": "The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed."
             }
           ],
-          "events": [],
+          "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "required",
-                "description": "Getter for the name attribute."
-              },
-              {
-                "name": "label",
-                "description": "Getter for the label attribute."
-              },
-              { "name": "className", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-reorder",
-          "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed."
-            }
-          ],
-          "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
               },
               { "name": "dragEl", "type": "null" },
               { "name": "items", "type": "array" },
@@ -2884,29 +2845,6 @@
             "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }]
           }
         },
-        {
-          "name": "wje-reorder-dropzone",
-          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the reorder dropzone."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-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.",
@@ -2937,17 +2875,53 @@
           }
         },
         {
-          "name": "wje-reorder-handle",
-          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
+          "name": "wje-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": "dropzone", "value": { "type": "string" } },
-            { "name": "parent", "value": { "type": "string" } }
+            { "name": "required", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } }
           ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder handle."
+              "description": "The default slot for the radio group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Getter for the value attribute."
+              },
+              {
+                "name": "required",
+                "description": "Getter for the name attribute."
+              },
+              {
+                "name": "label",
+                "description": "Getter for the label attribute."
+              },
+              { "name": "className", "type": "string" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-reorder-dropzone",
+          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the reorder dropzone."
             }
           ],
           "events": [],
@@ -2986,13 +2960,28 @@
           }
         },
         {
-          "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.",
+          "name": "wje-reorder-handle",
+          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "dropzone", "value": { "type": "string" } },
+            { "name": "parent", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the reorder handle."
+            }
+          ],
           "events": [],
           "js": {
-            "properties": [{ "name": "className", "type": "string" }],
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
             "events": []
           }
         },
@@ -3019,6 +3008,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-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.",
@@ -3053,6 +3053,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-row",
+          "description": "This element represents a row in a layout system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the row.\n\n### **Slots:**\n - _default_ - The default slot for the row.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the row." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-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.",
@@ -3159,70 +3179,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-slider",
-          "description": "Represents a slider component that extends the WJElement class.\nThis slider supports features such as min, max, step values, bubble display, and event handling.\nIt offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the slider.\n- **afterDraw(): _void_** - Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n- Sets the position of the handle.\n- Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n- Dispatches initialization, movement, and change custom events for the slider input element.\n- Updates the bubble position and value dynamically on input changes.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getPercentage(min: _number_, max: _number_, value: _number_): _number_** - Calculates the percentage of a value within a given range.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "max", "value": { "type": "string" } },
-            { "name": "min", "value": { "type": "string" } },
-            { "name": "step", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "bubble", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Returns the value of the slider."
-              },
-              {
-                "name": "min",
-                "description": "Returns the minimum value of the slider."
-              },
-              {
-                "name": "max",
-                "description": "Returns the maximum value of the slider."
-              },
-              {
-                "name": "step",
-                "description": "Returns the step value of the slider."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "setHandlePosition",
-                "description": "Sets the handle position of the slider."
-              },
-              {
-                "name": "setBubble",
-                "description": "Updates the position and content of a bubble element based on the input value.\n\nThis function calculates the position of the bubble using the percentage representation\nof the input's current value relative to its minimum and maximum bounds. It then adjusts\nthe bubble's left position dynamically for aesthetic purposes and updates its displayed\ncontent to reflect the current input value.\n\nThe function relies on the following elements:\n- `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n- `this.output`: Represents the bubble element to be positioned and updated.\n\nThe left positioning of the bubble ensures precise alignment with the input value indicator."
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-split-view",
-          "description": "This element represents a split view.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the split view.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **detectSize()** - Detects the size of the split view.\n- **pixelsToPercentage(value: _number_): _number_** - Converts pixels to a percentage.\n\n### **Slots:**\n - **start** - Slot for the start view.\n- **end** - Slot for the end view.\n- **divider** - Slot for the divider.\n\n### **CSS Properties:**\n - **--wje-split-view-divider-area** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "start", "description": "Slot for the start view." },
-            { "name": "end", "description": "Slot for the end view." },
-            { "name": "divider", "description": "Slot for the divider." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "initial" },
-              { "name": "className", "type": "string" },
-              { "name": "handleDrag", "description": "Handles the drag event." }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-sliding-container",
           "description": "SlidingContainer is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Executes before drawing the element.\n- **afterDisconnect()** - Cleans up global listeners and portaled layers.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Performs actions after the element is drawn on the screen.\nAttaches an event listener to the document based on the specified trigger.\nSets the variant to \"over\" if the document width is smaller than the screen break point.\nCalls the checkForVariant method with the current variant.\n- **isBottomSheet(): _boolean_** - Returns whether the mobile bottom sheet presentation is active.\n- **addBackdropListeners(backdrop: _HTMLElement_)** - Adds interaction listeners to a backdrop element.\n- **removeBackdropListeners(backdrop: _HTMLElement_)** - Removes interaction listeners from a backdrop element.\n- **isBackdropElement(element: _EventTarget|null_): _boolean_** - Checks whether an element is one of this component's backdrop layers.\n- **getBackdropElement({ createPortal = false }, options: _@param {boolean} options.createPortal Creates the body-level mobile backdrop when needed.\n     * _): _HTMLElement|null_** - Gets the backdrop element that is active for the current presentation.\n- **ensurePortalBackdrop(): _HTMLElement_** - Creates the body-level backdrop used by mobile bottom sheets.\n- **removePortalBackdrop()** - Removes the body-level mobile backdrop.\n- **getPortalBackdropZIndex(): _string_** - Gets the full-page z-index for the body-level mobile backdrop.\n- **getBackdropOpenOpacity(): _string_** - Gets the target opacity for the active mobile backdrop.\n- **syncPortalBackdropStyles()** - Syncs visual styles from the component to the body-level backdrop.\n- **syncAria()** - Sync ARIA attributes on host.\n- **htmlCloseButton(): _HTMLElement_** - Creates and returns a styled close button element with an icon,\nincluding an event listener to trigger the close method.\n- **htmlSheetHandle(): _HTMLElement_** - Creates the mobile bottom sheet resize handle.\n- **getParentElement(): _Element|null_** - Retrieves the parent element of the current element.\nIf the parent element is not found, it attempts to find the root host element.\n- **getClosestComposedElement(selector: _string_): _Element|null_** - Finds the closest element across shadow DOM boundaries.\n- **getViewportFrame(): _{top: number, left: number, right: number, bottom: number, width: number, height: number}_** - Returns the viewport frame.\n- **getBottomSheetScopeElement(): _Element|null_** - Returns the element that bounds the mobile bottom sheet panel.\n- **getBottomSheetScopeFrame(): _{top: number, left: number, right: number, bottom: number, width: number, height: number}_** - Returns the frame used by the mobile bottom sheet panel.\n- **setBottomSheetLayerFrame(element: _HTMLElement|SlidingContainer_, frame: _object_)** - Applies a fixed frame to a bottom sheet layer.\n- **resetBottomSheetLayerFrame(element: _HTMLElement|SlidingContainer_)** - Removes fixed frame styles from a bottom sheet layer.\n- **checkForVariant(variant: _string_): _void_** - Adjusts the position and dimensions of the current element based on the specified variant.\n\nThe method handles modifications to the element's positioning style, aligns it relative to its parent,\nand manages alignment to its siblings based on the specified direction.\n- **setBottomSheetVariant()** - Applies the mobile bottom sheet layout.\n- **resetBottomSheetVariant()** - Removes layout styles managed by the mobile bottom sheet mode.\n- **setBottomSheetVisualState(isOpen: _boolean_)** - Applies the current visual open or closed state to the mobile bottom sheet.\n- **getSheetMaxHeight(): _string_** - Gets the CSS height limit used for the mobile bottom sheet.\n- **setSheetHeight()** - Applies the configured bottom sheet opening height.\n- **getSheetMinHeightInPixels(): _number_** - Resolves the sheet minimum height in pixels.\n- **getSheetMaxHeightInPixels(): _number_** - Resolves the sheet maximum height in pixels.\n- **getBottomSheetAvailableHeight(): _number_** - Returns available height for the bottom sheet scope.\n- **resolveCssHeight(value: _string_, fallback: _number_): _number_** - Resolves a CSS height value against the viewport.\n- **clamp(value: _number_, min: _number_, max: _number_): _number_** - Clamps a number between min and max.\n- **isSheetHandleEvent(e: _Event_): _boolean_** - Checks whether an event came from the resize handle.\n- **isEventInsideSheet(e: _Event_): _boolean_** - Checks whether an event happened inside the visible bottom sheet.\n- **startSheetDrag(pointerId: _number|string_, startY: _number_)** - Stores the initial drag state for the mobile bottom sheet.\n- **updateSheetDrag(clientY: _number_)** - Applies a new height while the bottom sheet is being dragged.\n- **endSheetDrag()** - Cleans up mobile bottom sheet resizing listeners.\n- **beforeOpen(e)** - Executes before the element is opened.\n- **afterOpen(e)** - Callback function called after the element is opened.\n- **beforeClose(e)** - Executes before closing the element.\n- **afterClose(e)** - Callback function that is called after the container is closed.\n- **doAnimateTransition(): _Promise<void>_** - Animates the transition of elements with specified options, toggling the visibility and/or dimensions\nof the associated elements based on their current state.\n\nThis method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)\nwith optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided\nelements before initiating a new animation sequence.\n- **doAnimateBottomSheetTransition(options: _object_): _Promise<void>_** - Animates the mobile bottom sheet and its backdrop.\n- **open(e: _Event_): _Promise<void>_** - Opens the sliding container by performing necessary preparatory and transitional operations.\n- **close(e: _Event_): _Promise<void>_** - Closes the sliding container and performs associated operations such as animations and event dispatches.\n- **setBottomSheetClosedState()** - Forces the closed visual state for the mobile bottom sheet.\n- **toggle(e: _Event_): _Promise<void>_** - Toggles the state between open and closed.\n- **componentCleanup(): _void_** - Cleans up resources associated with the component by disconnecting\nthe resize observer and setting it to null.\n\n### **Slots:**\n - _default_ - The default slot for the SlidingContainer.\n\n### **CSS Properties:**\n - **--wje-sliding-container-background** - Background of the sliding panel. _(default: var(--wje-background))_\n- **--wje-sliding-container-z-index** - z-index of the side sliding container. _(default: 1000)_\n- **--wje-sliding-container-bottom-sheet-z-index** - z-index of the mobile bottom sheet host. _(default: var(--wje-sliding-container-z-index, 1000))_\n- **--wje-sliding-container-bottom-sheet-backdrop-z-index** - z-index of the mobile bottom sheet backdrop inside the host layer. _(default: 0)_\n- **--wje-sliding-container-bottom-sheet-panel-z-index** - z-index of the mobile bottom sheet panel inside the host layer. _(default: 1)_\n- **--wje-sliding-container-portal-backdrop-z-index** - z-index of the body-level mobile bottom sheet backdrop. _(default: undefined)_\n- **--wje-sliding-container-backdrop-background** - Background of the mobile bottom sheet backdrop. _(default: var(--wje-backdrop))_\n- **--wje-sliding-container-backdrop-opacity** - Backdrop opacity while the mobile bottom sheet is open. _(default: 1)_\n- **--wje-sliding-container-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: var(--wje-sliding-container-shadow))_\n- **--wje-sliding-container-sheet-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0)_\n- **--wje-sliding-container-sheet-handle-area-height** - Height of the resize handle hit area. _(default: 24px)_\n- **--wje-sliding-container-sheet-handle-width** - Width of the visible resize handle. _(default: 36px)_\n- **--wje-sliding-container-sheet-handle-height** - Height of the visible resize handle. _(default: 2px)_\n- **--wje-sliding-container-sheet-handle-background** - Background of the visible resize handle. _(default: var(--wje-border-color))_\n- **--wje-sliding-container-sheet-handle-radius** - Border radius of the visible resize handle. _(default: 999px)_\n\n### **CSS Parts:**\n - **backdrop** - Styles the mobile bottom sheet backdrop.\n- **sliding-container** - Styles the native sliding panel.\n- **close-button** - Styles the generated close button.\n- **sheet-handle-area** - Styles the draggable resize handle hit area.\n- **sheet-handle** - Styles the visible draggable resize handle.",
@@ -3468,6 +3424,50 @@
             "events": []
           }
         },
+        {
+          "name": "wje-slider",
+          "description": "Represents a slider component that extends the WJElement class.\nThis slider supports features such as min, max, step values, bubble display, and event handling.\nIt offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the slider.\n- **afterDraw(): _void_** - Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n- Sets the position of the handle.\n- Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n- Dispatches initialization, movement, and change custom events for the slider input element.\n- Updates the bubble position and value dynamically on input changes.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getPercentage(min: _number_, max: _number_, value: _number_): _number_** - Calculates the percentage of a value within a given range.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "max", "value": { "type": "string" } },
+            { "name": "min", "value": { "type": "string" } },
+            { "name": "step", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "bubble", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Returns the value of the slider."
+              },
+              {
+                "name": "min",
+                "description": "Returns the minimum value of the slider."
+              },
+              {
+                "name": "max",
+                "description": "Returns the maximum value of the slider."
+              },
+              {
+                "name": "step",
+                "description": "Returns the step value of the slider."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "setHandlePosition",
+                "description": "Sets the handle position of the slider."
+              },
+              {
+                "name": "setBubble",
+                "description": "Updates the position and content of a bubble element based on the input value.\n\nThis function calculates the position of the bubble using the percentage representation\nof the input's current value relative to its minimum and maximum bounds. It then adjusts\nthe bubble's left position dynamically for aesthetic purposes and updates its displayed\ncontent to reflect the current input value.\n\nThe function relies on the following elements:\n- `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n- `this.output`: Represents the bubble element to be positioned and updated.\n\nThe left positioning of the bubble ensures precise alignment with the input value indicator."
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-status",
           "description": "This class represents Status element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the status.\n\n### **Slots:**\n - _default_ - The status main content.\n- **start** - The status start content.\n- **end** - The status end content.\n\n### **CSS Parts:**\n - **native** - The native part of the status.\n- **bullet** - The bullet part of the status.",
@@ -3490,6 +3490,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-split-view",
+          "description": "This element represents a split view.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the split view.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **detectSize()** - Detects the size of the split view.\n- **pixelsToPercentage(value: _number_): _number_** - Converts pixels to a percentage.\n\n### **Slots:**\n - **start** - Slot for the start view.\n- **end** - Slot for the end view.\n- **divider** - Slot for the divider.\n\n### **CSS Properties:**\n - **--wje-split-view-divider-area** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "start", "description": "Slot for the start view." },
+            { "name": "end", "description": "Slot for the end view." },
+            { "name": "divider", "description": "Slot for the divider." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "initial" },
+              { "name": "className", "type": "string" },
+              { "name": "handleDrag", "description": "Handles the drag event." }
+            ],
+            "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.",
@@ -3595,46 +3615,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-row",
-          "description": "This element represents a row in a layout system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the row.\n\n### **Slots:**\n - _default_ - The default slot for the row.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the row." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-tab-panel",
-          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the tab panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "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)_",
@@ -3669,6 +3649,26 @@
             "events": []
           }
         },
+        {
+          "name": "wje-tab-panel",
+          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the tab panel." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-textarea",
           "description": "This element represents a textarea input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the textarea.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Disconnects the component.\n\n### **CSS Properties:**\n - **--wje-textarea-font-family** - Specifies the font family used for the textarea. Accepts any valid CSS font-family value. _(default: var(--wje-font-family))_\n- **--wje-textarea-background-color** - Sets the background color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-textarea-color** - Defines the text color within the textarea. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-textarea-color-invalid** - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors. _(default: var(--wje-color-danger))_\n- **--wje-textarea-error-background-color** - Controls the background color of the validation error bubble. _(default: var(--wje-tooltip-background))_\n- **--wje-textarea-error-color** - Controls the text color of the validation error bubble. _(default: var(--wje-tooltip-color))_\n- **--wje-textarea-border-width** - Specifies the width of the textarea's border. Accepts any valid CSS length unit. _(default: 1px)_\n- **--wje-textarea-border-style** - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`. _(default: solid)_\n- **--wje-textarea-border-color** - Defines the border color of the textarea. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-textarea-border-color-focus** - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback. _(default: var(--wje-color-primary))_\n- **--wje-textarea-border-radius** - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit. _(default: 4px)_\n- **--wje-textarea-margin-bottom** - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements. _(default: .5rem)_\n- **--wje-textarea-line-height** - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text. _(default: 20px)_\n- **--wje-textarea-padding** - Defines the padding inside the textarea. Controls the spacing between the content and the border. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The native textarea wrapper.\n- **input** - The textarea input.\n- **wrapper** - The textarea wrapper.",
@@ -3715,6 +3715,29 @@
             "events": []
           }
         },
+        {
+          "name": "wje-thumbnail",
+          "description": "Thumbnail class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the thumbnail.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **thumbnail-slot** - The slot for the thumbnail content.\n\n### **CSS Properties:**\n - **--wje-thumbnail-width** - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`. _(default: 48px)_\n- **--wje-thumbnail-height** - Specifies the height of the thumbnail. Accepts any valid CSS length unit. _(default: 48px)_\n- **--wje-thumbnail-border-radius** - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable. _(default: var(--wje-border-radius-medium))_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "thumbnail-slot",
+              "description": "The slot for the thumbnail content."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-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.",
@@ -3736,14 +3759,18 @@
           }
         },
         {
-          "name": "wje-thumbnail",
-          "description": "Thumbnail class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the thumbnail.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **thumbnail-slot** - The slot for the thumbnail content.\n\n### **CSS Properties:**\n - **--wje-thumbnail-width** - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`. _(default: 48px)_\n- **--wje-thumbnail-height** - Specifies the height of the thumbnail. Accepts any valid CSS length unit. _(default: 48px)_\n- **--wje-thumbnail-border-radius** - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable. _(default: var(--wje-border-radius-medium))_",
+          "name": "wje-timeline-item",
+          "description": "This element represents a timeline item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline item.\n\n### **Slots:**\n - _default_ - Slot for the content of the timeline item.\n- **status** - Slot for the status of the timeline item.\n\n### **CSS Parts:**\n - **native** - The native part of the timeline item.\n- **content-container** - The content container part of the timeline item.\n- **default-icon** - The default icon part of the timeline item.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
-              "name": "thumbnail-slot",
-              "description": "The slot for the thumbnail content."
+              "name": "",
+              "description": "Slot for the content of the timeline item."
+            },
+            {
+              "name": "status",
+              "description": "Slot for the status of the timeline item."
             }
           ],
           "events": [],
@@ -3751,7 +3778,7 @@
             "properties": [
               {
                 "name": "className",
-                "description": "The class name for the component",
+                "description": "Returns the class name of the tab.",
                 "type": "string"
               }
             ],
@@ -3923,32 +3950,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-toolbar",
-          "description": "This element represents a toolbar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar.\n- **afterDraw()** - Initializes responsive layout observers.\n- **afterDisconnect()** - Cleans up responsive layout observers.\n- **syncAria()** - Sync ARIA attributes on host.\n- **scheduleResponsiveLayout()** - Schedules responsive layout recalculation.\n- **updateResponsiveLayout(): _Promise<void>_** - Updates slotted breadcrumbs and actions to fit the toolbar width.\n- **measureBreadcrumbs(breadcrumbs: _HTMLElement_): _Promise<{count: number, fullWidth: number, compactWidth: number}>_** - Measures breadcrumbs in their full state.\n- **ensureBreadcrumbState(breadcrumbs: _HTMLElement_, count: _number_): _{compactMaxItems: number}_** - Stores original breadcrumb settings used as responsive compact target.\n- **setBreadcrumbCompactState(breadcrumbs: _HTMLElement|null_, compact: _boolean_)** - Applies the compact or full breadcrumb state.\n- **setBreadcrumbMaxItems(breadcrumbs: _HTMLElement_, value: _number_)** - Sets breadcrumb max-items only when it changed.\n- **getVisibleActionsForWidth(actionMetrics: _object_, width: _number_): _number_** - Finds how many actions fit into the available width.\n- **setVisibleActions(action: _HTMLElement|null_, count: _number_)** - Applies visible action count.\n- **clearVisibleActions(action: _HTMLElement|null_)** - Clears toolbar-managed visible action state when actions manage themselves.\n- **getToolbarAction(): _HTMLElement|null_** - Returns the slotted toolbar action.\n- **getBreadcrumbs(): _HTMLElement|null_** - Returns the slotted breadcrumbs.\n- **isSelfManagedAction(action: _HTMLElement|null_): _boolean_** - Returns whether toolbar actions are managed by their own breakpoint logic.\n- **isSelfManagedBreadcrumbs(breadcrumbs: _HTMLElement|null_, action): _boolean_** - Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n- **nextFrame(): _Promise<void>_** - Waits for one animation frame.\n\n### **Slots:**\n - **start** - The start slot for the toolbar.\n- **end** - The end slot for the toolbar.\n\n### **CSS Properties:**\n - **--wje-toolbar-background** - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-background))_\n- **--wje-toolbar-height** - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content. _(default: auto)_\n- **--wje-toolbar-min-height** - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. _(default: 70px)_\n- **--wje-toolbar-padding-top** - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. _(default: 1rem)_\n- **--wje-toolbar-padding-bottom** - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. _(default: 1rem)_\n- **--wje-toolbar-padding-inline** - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. _(default: 1.5rem)_\n- **--wje-toolbar-margin-block** - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-margin-inline** - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-border-color** - Sets the color of the toolbar's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-toolbar-top** - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native toolbar wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "start",
-              "description": "The start slot for the toolbar."
-            },
-            { "name": "end", "description": "The end slot for the toolbar." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              },
-              { "name": "_breadcrumbState" },
-              { "name": "_responsiveFrame", "type": "null" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-toolbar-action",
           "description": "This element represents a toolbar action.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar action.\n- **afterDraw()** - Applies the current visible action limit after the component is drawn.\n- **afterDisconnect()** - Removes listeners after disconnect.\n- **scheduleOverflow(doubleFrame: _boolean_)** - Schedules overflow application after layout settles.\n- **getActions(): _Array<HTMLElement>_** - Returns the actions for the toolbar action.\n- **getAssignedElements(): _Array<HTMLElement>_** - Returns direct children assigned to the default slot.\n- **getExistingDropdown(): _HTMLElement|null_** - Returns an existing top-level dropdown if present.\n- **observeExistingDropdown()** - Observes the external dropdown for late menu/content changes.\n- **getOverflowDropdown(): _HTMLElement_** - Returns the dropdown that should receive overflow items.\n- **getOverflowMenu(): _HTMLElement|null_** - Returns the menu used for overflow items.\n- **getVisibleLimit(): _number_** - Gets the number of actions that should stay visible.\n- **shouldCollapseByBreakpoint(): _boolean_** - Returns whether the toolbar action should collapse based on the configured breakpoint.\n- **isCollapsedByBreakpoint(): _boolean_** - Returns the cached breakpoint collapse state.\n- **handleBreakpointResize(): _void_** - Reacts to viewport resize only when the breakpoint mode actually changes.\n- **getBreakpointWidth(): _number|null_** - Resolves the configured breakpoint to a pixel width.\n- **applyOverflow(): _void_** - Updates visible actions and the overflow dropdown.\n- **restoreManagedActions(actions: _Array<HTMLElement>_)** - Restores buttons hidden by this component.\n- **restoreManagedOverflowContent()** - Removes overflow menu nodes that were previously injected by this component.\n- **createMenuItem(action: _HTMLElement_): _HTMLElement_** - Creates a dropdown menu proxy for an overflowed button.\n- **cloneActionMenuNode(node: _Node_): _Node_** - Clones action content for menu usage and normalizes button icon slots.\n- **normalizeActionMenuIconSlot(element: _Element_)** - Moves button-only icon slots to the menu item start slot.\n- **getActionLabel(action: _HTMLElement_): _string_** - Resolves readable text for a toolbar action copied into an overflow menu.\n- **createOverflowDivider(): _HTMLElement_** - Creates a divider separating existing dropdown actions from responsive overflow actions.\n- **handleMenuItemClick(e: _Event_, action: _HTMLElement_)** - Forwards menu item activation to the original button.\n- **measureActionMetrics(): _{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}_** - Measures action widths while preserving current overflow state.\n- **measureMoreWidth(): _number_** - Measures the overflow dropdown trigger.\n\n### **Slots:**\n - _default_ - The default slot for the toolbar action.\n\n### **CSS Parts:**\n - **native** - The native toolbar action wrapper.",
@@ -3995,28 +3996,27 @@
           }
         },
         {
-          "name": "wje-timeline-item",
-          "description": "This element represents a timeline item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline item.\n\n### **Slots:**\n - _default_ - Slot for the content of the timeline item.\n- **status** - Slot for the status of the timeline item.\n\n### **CSS Parts:**\n - **native** - The native part of the timeline item.\n- **content-container** - The content container part of the timeline item.\n- **default-icon** - The default icon part of the timeline item.",
+          "name": "wje-toolbar",
+          "description": "This element represents a toolbar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar.\n- **afterDraw()** - Initializes responsive layout observers.\n- **afterDisconnect()** - Cleans up responsive layout observers.\n- **syncAria()** - Sync ARIA attributes on host.\n- **scheduleResponsiveLayout()** - Schedules responsive layout recalculation.\n- **updateResponsiveLayout(): _Promise<void>_** - Updates slotted breadcrumbs and actions to fit the toolbar width.\n- **measureBreadcrumbs(breadcrumbs: _HTMLElement_): _Promise<{count: number, fullWidth: number, compactWidth: number}>_** - Measures breadcrumbs in their full state.\n- **ensureBreadcrumbState(breadcrumbs: _HTMLElement_, count: _number_): _{compactMaxItems: number}_** - Stores original breadcrumb settings used as responsive compact target.\n- **setBreadcrumbCompactState(breadcrumbs: _HTMLElement|null_, compact: _boolean_)** - Applies the compact or full breadcrumb state.\n- **setBreadcrumbMaxItems(breadcrumbs: _HTMLElement_, value: _number_)** - Sets breadcrumb max-items only when it changed.\n- **getVisibleActionsForWidth(actionMetrics: _object_, width: _number_): _number_** - Finds how many actions fit into the available width.\n- **setVisibleActions(action: _HTMLElement|null_, count: _number_)** - Applies visible action count.\n- **clearVisibleActions(action: _HTMLElement|null_)** - Clears toolbar-managed visible action state when actions manage themselves.\n- **getToolbarAction(): _HTMLElement|null_** - Returns the slotted toolbar action.\n- **getBreadcrumbs(): _HTMLElement|null_** - Returns the slotted breadcrumbs.\n- **isSelfManagedAction(action: _HTMLElement|null_): _boolean_** - Returns whether toolbar actions are managed by their own breakpoint logic.\n- **isSelfManagedBreadcrumbs(breadcrumbs: _HTMLElement|null_, action): _boolean_** - Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n- **nextFrame(): _Promise<void>_** - Waits for one animation frame.\n\n### **Slots:**\n - **start** - The start slot for the toolbar.\n- **end** - The end slot for the toolbar.\n\n### **CSS Properties:**\n - **--wje-toolbar-background** - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-background))_\n- **--wje-toolbar-height** - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content. _(default: auto)_\n- **--wje-toolbar-min-height** - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. _(default: 70px)_\n- **--wje-toolbar-padding-top** - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. _(default: 1rem)_\n- **--wje-toolbar-padding-bottom** - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. _(default: 1rem)_\n- **--wje-toolbar-padding-inline** - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. _(default: 1.5rem)_\n- **--wje-toolbar-margin-block** - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-margin-inline** - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-border-color** - Sets the color of the toolbar's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-toolbar-top** - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native toolbar wrapper.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
-              "name": "",
-              "description": "Slot for the content of the timeline item."
+              "name": "start",
+              "description": "The start slot for the toolbar."
             },
-            {
-              "name": "status",
-              "description": "Slot for the status of the timeline item."
-            }
+            { "name": "end", "description": "The end slot for the toolbar." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "Returns the class name of the tab.",
+                "description": "The class name for the component.",
                 "type": "string"
-              }
+              },
+              { "name": "_breadcrumbState" },
+              { "name": "_responsiveFrame", "type": "null" }
             ],
             "events": []
           }
@@ -4075,9 +4075,15 @@
         },
         {
           "name": "wje-tree",
-          "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **getExpandCollapseIcon(item: _HTMLElement_, status: _string_): _void_** - Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
+          "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.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "reorder",
+              "description": "Enables moving tree items by dragging direct start slot content.",
+              "value": { "type": "boolean" }
+            }
+          ],
           "slots": [
             {
               "name": "",
@@ -4091,6 +4097,10 @@
                 "name": "selection",
                 "description": "Gets the current selection mode for the element.\nIf no selection is explicitly set, it defaults to 'single'."
               },
+              {
+                "name": "reorder",
+                "description": "Indicates whether tree items can be reordered with the start slot handle."
+              },
               {
                 "name": "className",
                 "description": "The class name for the component.",
@@ -4099,6 +4109,48 @@
               {
                 "name": "handleClick",
                 "description": "Handles the click event triggered by the user interaction.\nIdentifies the closest tree item element to the event target and sets it\nas the selected item. Ensures that only one item is selected at a time, resetting\nthe selection state for all other items."
+              },
+              {
+                "name": "handleDragStart",
+                "description": "Starts dragging a tree item when the drag begins from the configured start slot handle."
+              },
+              {
+                "name": "handleDragOver",
+                "description": "Updates the current drop target and exposes a visual drop position."
+              },
+              {
+                "name": "handleDrop",
+                "description": "Completes a tree item move."
+              },
+              {
+                "name": "handleDragEnd",
+                "description": "Clears drag state after the browser drag operation ends."
+              },
+              { "name": "draggedItem", "type": "null" },
+              { "name": "dropTarget", "type": "null" },
+              { "name": "dropPosition", "type": "null" }
+            ],
+            "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": []
@@ -4106,11 +4158,12 @@
         },
         {
           "name": "wje-tree-item",
-          "description": "Represents a single item in a tree structure.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - Custom logic executed before the draw process begins.\nDetermines and sets the appropriate slot if the current item is nested.\n- **syncNestingState(): _void_** - Synchronizes the nesting-related state on the host element.\nSets the \"slot\" to children for nested items and updates\nthe nesting depth used to compute visual indentation.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment representing the structure of a tree item component.\nThe method constructs the DOM elements including the native container, indentation, toggle button,\nselection checkbox, label, and children container, along with their respective slots and attributes.\nIt dynamically handles the creation of expand and collapse icons, as well as appending slots for\nchild components.\n- **afterDraw(): _void_** - Executes operations to be performed after the draw action is completed.\nIf the state indicates it is expanded, toggles its children.\nAdditionally, sets up an event listener on the button element to handle toggling children upon click.\n- **isNestedItem(): _boolean_** - Determines if the current item is a nested item within a tree structure.\nChecks if the item's parent element exists and is also a tree item.\n- **getNestingDepth(): _number_** - Calculates nesting depth based on ancestor tree items.\nRoot items have depth 0, direct children depth 1, etc.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether the given node is a tree item.\n- **toggleChildren(): _void_** - Toggles the visibility state of the children element and updates the class of the parent element.\nThe method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\neffectively showing or hiding the children and indicating the expanded state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getChildrenItems(options: _@param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * _): _Array_** - Retrieves the child items from the `childrenSlot` that match specific criteria.\n- **getAllChildrenFlat(options: _object_): _Array_** - Retrieves all descendant children of the current object in a flattened array structure.\n\n### **Slots:**\n - _default_ - Default slot for rendering the tree item's content (e.g., text or custom elements).\n\n### **CSS Properties:**\n - **--wje-tree-item-indent** - Defines the indentation for nested tree items. _(default: var(--wje-spacing-large))_\n- **--wje-tree-item-indent-guid-width** - Specifies the width of the guide element shown next to a tree item. _(default: 0px)_\n- **--wje-tree-item-border-radius** - Sets the border radius of the tree item’s container. _(default: var(--wje-border-radius-medium))_\n\n### **CSS Parts:**\n - **native** - The native container of the tree item.",
+          "description": "Represents a single item in a tree structure.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - Custom logic executed before the draw process begins.\nDetermines and sets the appropriate slot if the current item is nested.\n- **syncNestingState(): _void_** - Synchronizes the nesting-related state on the host element.\nSets the \"slot\" to children for nested items and updates\nthe nesting depth used to compute visual indentation.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment representing the structure of a tree item component.\nThe method constructs the DOM elements including the native container, indentation, toggle button,\nselection checkbox, label, and children container, along with their respective slots and attributes.\nIt dynamically handles the creation of expand and collapse icons, as well as appending slots for\nchild components.\n- **afterDraw(): _void_** - Executes operations to be performed after the draw action is completed.\nIf the state indicates it is expanded, toggles its children.\nAdditionally, sets up an event listener on the button element to handle toggling children upon click.\n- **isNestedItem(): _boolean_** - Determines if the current item is a nested item within a tree structure.\nChecks if the item's parent element exists and is also a tree item.\n- **getNestingDepth(): _number_** - Calculates nesting depth based on ancestor tree items.\nRoot items have depth 0, direct children depth 1, etc.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether the given node is a tree item.\n- **toggleChildren(): _void_** - Toggles the visibility state of the children element and updates the class of the parent element.\nThe method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\neffectively showing or hiding the children and indicating the expanded state.\n- **setChildrenExpanded(expanded: _boolean_, options: _@param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * _): _void_** - Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getChildrenItems(options: _@param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * _): _Array_** - Retrieves the child items from the `childrenSlot` that match specific criteria.\n- **getAllChildrenFlat(options: _object_): _Array_** - Retrieves all descendant children of the current object in a flattened array structure.\n\n### **Slots:**\n - _default_ - Default slot for rendering the tree item's content (e.g., text or custom elements).\n\n### **CSS Properties:**\n - **--wje-tree-item-indent** - Defines the indentation for nested tree items. _(default: var(--wje-spacing-large))_\n- **--wje-tree-item-indent-guid-width** - Specifies the width of the guide element shown next to a tree item. _(default: 0px)_\n- **--wje-tree-item-indent-guid-style** - Defines the guide border style for nested tree items. _(default: solid)_\n- **--wje-tree-item-indent-guid-color** - Defines the guide border color for nested tree items. _(default: var(--wje-border-color))_\n- **--wje-tree-item-border-radius** - Sets the border radius of the tree item's container. _(default: var(--wje-border-radius-medium))_\n- **--wje-tree-item-border-width** - Sets the border width of the tree item row. _(default: 0px)_\n- **--wje-tree-item-border-style** - Sets the border style of the tree item row. _(default: solid)_\n- **--wje-tree-item-border-color** - Sets the border color of the tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-hover** - Sets the border color of the hovered tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-selected** - Sets the border color of the selected tree item row. _(default: transparent)_\n- **--wje-tree-item-drop-color** - Sets the color of reorder drop indicators. _(default: var(--wje-color-primary))_\n- **--wje-tree-item-drop-line-width** - Sets the thickness of before/after reorder drop indicators. _(default: 2px)_\n- **--wje-tree-item-drop-line-border-radius** - Sets the radius of before/after reorder drop indicators. _(default: var(--wje-border-radius-pill))_\n- **--wje-tree-item-drop-border-width** - Sets the width of the inside reorder drop border. _(default: 1px)_\n- **--wje-tree-item-drop-border-style** - Sets the style of the inside reorder drop border. _(default: solid)_\n- **--wje-tree-item-drop-border-color** - Sets the color of the inside reorder drop border. _(default: var(--wje-tree-item-drop-color))_\n- **--wje-tree-item-drop-border-radius** - Sets the radius of the inside reorder drop border. _(default: inherit)_\n\n### **CSS Parts:**\n - **native** - The native container of the tree item.",
           "doc-url": "",
           "attributes": [
             { "name": "selected", "value": { "type": "string" } },
-            { "name": "indeterminate", "value": { "type": "string" } }
+            { "name": "indeterminate", "value": { "type": "string" } },
+            { "name": "expanded", "value": { "type": "string" } }
           ],
           "slots": [
             {
@@ -4146,29 +4199,6 @@
             ],
             "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": []
-          }
         }
       ]
     }