wj-elements 0.7.1 → 0.7.2

package/dist/web-types.json

@@ -1,52 +1,11 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "wj-elements",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
-        {
-          "name": "wje-accordion-item",
-          "description": "This class represents an Accordion Item element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion Item element.\n- **draw(): _object_** - Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n- **afterDraw()** - Method to execute after the Accordion Item element is drawn.\n- **collapse()** - Collapses the accordion item and updates the headline ARIA state.\n- **expand()** - Expands the accordion item and updates the headline ARIA state.\n\n### **Slots:**\n - **headline** - Slot for the clickable accordion headline content.\n- **description** - Slot for supporting text shown below the headline.\n- **toggle** - Slot for a custom toggle icon or toggle content.\n- **content** - Slot for the expandable panel body.\n\n### **CSS Properties:**\n - **--wje-accordion-background** - Background color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border** - Border color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-radius** - Border radius of the item wrapper. _(default: var(--wje-border-radius-large))_\n- **--wje-accordion-background-hover** - Background color used when the headline is hovered. _(default: var(--wje-color-contrast-1))_\n- **--wje-accordion-border-hover** - Border color used when the headline is hovered. _(default: var(--wje-color-contrast-2))_\n- **--wje-accordion-background-expanded** - Background color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-expanded** - Border color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-headline-color** - Text color of the headline area. _(default: var(--wje-color-contrast-11))_\n- **--wje-accordion-content-color** - Text color of the expandable content area. _(default: var(--wje-color-contrast-6))_\n- **--wje-accordion-marker-rotate** - Rotation applied to the toggle marker icon. // @fires wje-accordion-item:open - Dispatched when the item is expanded. // @fires wje-accordion-item:close - Dispatched when the item is collapsed. _(default: 0deg)_\n\n### **CSS Parts:**\n - **native** - The wrapper of the whole accordion item.\n- **headline** - The clickable headline area.\n- **description** - The description slot container inside the headline.\n- **toggle** - The toggle slot container and fallback chevron area.\n- **content** - The expandable content panel.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "headline",
-              "description": "Slot for the clickable accordion headline content."
-            },
-            {
-              "name": "description",
-              "description": "Slot for supporting text shown below the headline."
-            },
-            {
-              "name": "toggle",
-              "description": "Slot for a custom toggle icon or toggle content."
-            },
-            {
-              "name": "content",
-              "description": "Slot for the expandable panel body."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the Accordion Item element.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-accordion",
           "description": "This class represents an Accordion element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion element.\n- **beforeDraw()** - Method to run before the element is drawn.\n- **draw(): _object_** - Method to draw the Accordion element.\n- **afterDraw()** - Method to run after the element is drawn.\n- **collapseAll(exception)** - Method to run after the element is drawn.\n- **getAccordions(): _Array_** - Method to get the accordions.\n\n### **Slots:**\n - **default** - Slot for direct `wje-accordion-item` children.",
@@ -89,6 +48,47 @@
             "events": []
           }
         },
+        {
+          "name": "wje-accordion-item",
+          "description": "This class represents an Accordion Item element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Accordion Item element.\n- **draw(): _object_** - Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n- **afterDraw()** - Method to execute after the Accordion Item element is drawn.\n- **collapse()** - Collapses the accordion item and updates the headline ARIA state.\n- **expand()** - Expands the accordion item and updates the headline ARIA state.\n\n### **Slots:**\n - **headline** - Slot for the clickable accordion headline content.\n- **description** - Slot for supporting text shown below the headline.\n- **toggle** - Slot for a custom toggle icon or toggle content.\n- **content** - Slot for the expandable panel body.\n\n### **CSS Properties:**\n - **--wje-accordion-background** - Background color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border** - Border color of the collapsed item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-radius** - Border radius of the item wrapper. _(default: var(--wje-border-radius-large))_\n- **--wje-accordion-background-hover** - Background color used when the headline is hovered. _(default: var(--wje-color-contrast-1))_\n- **--wje-accordion-border-hover** - Border color used when the headline is hovered. _(default: var(--wje-color-contrast-2))_\n- **--wje-accordion-background-expanded** - Background color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-border-expanded** - Border color of the expanded item wrapper. _(default: var(--wje-color-contrast-0))_\n- **--wje-accordion-headline-color** - Text color of the headline area. _(default: var(--wje-color-contrast-11))_\n- **--wje-accordion-content-color** - Text color of the expandable content area. _(default: var(--wje-color-contrast-6))_\n- **--wje-accordion-marker-rotate** - Rotation applied to the toggle marker icon. // @fires wje-accordion-item:open - Dispatched when the item is expanded. // @fires wje-accordion-item:close - Dispatched when the item is collapsed. _(default: 0deg)_\n\n### **CSS Parts:**\n - **native** - The wrapper of the whole accordion item.\n- **headline** - The clickable headline area.\n- **description** - The description slot container inside the headline.\n- **toggle** - The toggle slot container and fallback chevron area.\n- **content** - The expandable content panel.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "headline",
+              "description": "Slot for the clickable accordion headline content."
+            },
+            {
+              "name": "description",
+              "description": "Slot for supporting text shown below the headline."
+            },
+            {
+              "name": "toggle",
+              "description": "Slot for a custom toggle icon or toggle content."
+            },
+            {
+              "name": "content",
+              "description": "Slot for the expandable panel body."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the Accordion Item element.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-animation",
           "description": "This class represents an Animation element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the Animation element.\n- **draw(): _object_** - Method to draw the Animation element.\n- **afterDraw()** - Method to perform actions after the Animation element is drawn.\nThis method destroys any existing animation, fetches a new animations array,\nselects the appropriate animation, and applies it to the element.\n- **getAnimationsArray(): _Array_** - Method to fetch and parse the animations array from a CSS file.\n- **destroyAnimation(): _void_** - Terminates and cleans up the currently active animation if it exists.\nCalls the `cancel` method to stop the animation process.\n- **play(): _void_** - Plays the currently assigned animation, if available.\n- **cancel(): _void_** - Cancels the current animation if it is initialized and has a cancel method.\nLogs a warning if the animation is not initialized or the cancel method is unavailable.\n\n### **Slots:**\n - _default_ - The animation main content.",
@@ -237,6 +237,74 @@
             "events": []
           }
         },
+        {
+          "name": "wje-avatar",
+          "description": "This class represents an Avatar element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes.\n- **draw(): _object_** - Method to draw the avatar element and return a document fragment.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **isImage(): _boolean_** - Method to check if the avatar is an image.\n\n### **Slots:**\n - **default** - Slot for the main avatar content, typically an image.\n- **icon** - Slot for an icon rendered inside the avatar.\n- **status** - Slot for a status badge or indicator positioned on the avatar edge.\n- **secondary** - Slot for additional secondary content rendered with the avatar.\n\n### **CSS Properties:**\n - **--wje-avatar-size** - Controls the overall rendered size of the avatar shell. _(default: undefined)_\n- **--wje-avatar-font-size** - Controls the font size used for initials and text content. _(default: undefined)_\n- **--wje-avatar-font-weight** - Controls the font weight used for initials and text content. _(default: undefined)_\n- **--wje-avatar-color** - Controls the text color inside the avatar. _(default: undefined)_\n- **--wje-avatar-background-color** - Controls the background color of the avatar surface. _(default: undefined)_\n- **--wje-avatar-border-radius** - Controls the avatar border radius. _(default: undefined)_\n- **--wje-avatar-border-color** - Controls the avatar border color when a border is applied. _(default: undefined)_\n- **--wje-avatar-border-width** - Controls the avatar border width when a border is applied. _(default: undefined)_\n- **--wje-avatar-border-style** - Controls the avatar border style when a border is applied. _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **status** - The positioned slot container for status content.\n- **secondary** - The slot container for secondary avatar content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "initials",
+              "description": "Renders generated initials from `label` instead of the default slotted content.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "label",
+              "description": "Provides the source text for generated initials and the accessible label of the avatar.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "status-placement",
+              "description": "Positions the `status` slot on one of the avatar corners.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Slot for the main avatar content, typically an image."
+            },
+            {
+              "name": "icon",
+              "description": "Slot for an icon rendered inside the avatar."
+            },
+            {
+              "name": "status",
+              "description": "Slot for a status badge or indicator positioned on the avatar edge."
+            },
+            {
+              "name": "secondary",
+              "description": "Slot for additional secondary content rendered with the avatar."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Retrieves the value of the 'label' attribute for the element.\nIf the attribute is not set, it defaults to an empty string."
+              },
+              {
+                "name": "initials",
+                "description": "Retrieves the value of the 'initials' attribute if it exists."
+              },
+              {
+                "name": "size",
+                "description": "Retrieves the size attribute of the element. If the size attribute\nis not defined, it returns the default value 'medium'."
+              },
+              {
+                "name": "className",
+                "description": "Class name for the Avatar element.",
+                "type": "string"
+              }
+            ],
+            "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.",
@@ -447,110 +515,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-avatar",
-          "description": "This class represents an Avatar element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes.\n- **draw(): _object_** - Method to draw the avatar element and return a document fragment.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **isImage(): _boolean_** - Method to check if the avatar is an image.\n\n### **Slots:**\n - **default** - Slot for the main avatar content, typically an image.\n- **icon** - Slot for an icon rendered inside the avatar.\n- **status** - Slot for a status badge or indicator positioned on the avatar edge.\n- **secondary** - Slot for additional secondary content rendered with the avatar.\n\n### **CSS Properties:**\n - **--wje-avatar-size** - Controls the overall rendered size of the avatar shell. _(default: undefined)_\n- **--wje-avatar-font-size** - Controls the font size used for initials and text content. _(default: undefined)_\n- **--wje-avatar-font-weight** - Controls the font weight used for initials and text content. _(default: undefined)_\n- **--wje-avatar-color** - Controls the text color inside the avatar. _(default: undefined)_\n- **--wje-avatar-background-color** - Controls the background color of the avatar surface. _(default: undefined)_\n- **--wje-avatar-border-radius** - Controls the avatar border radius. _(default: undefined)_\n- **--wje-avatar-border-color** - Controls the avatar border color when a border is applied. _(default: undefined)_\n- **--wje-avatar-border-width** - Controls the avatar border width when a border is applied. _(default: undefined)_\n- **--wje-avatar-border-style** - Controls the avatar border style when a border is applied. _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **status** - The positioned slot container for status content.\n- **secondary** - The slot container for secondary avatar content.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "initials",
-              "description": "Renders generated initials from `label` instead of the default slotted content.",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "label",
-              "description": "Provides the source text for generated initials and the accessible label of the avatar.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "size",
-              "description": "Selects a predefined avatar size such as `small`, `medium`, `normal`, `large`, or larger variants.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "status-placement",
-              "description": "Positions the `status` slot on one of the avatar corners.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Slot for the main avatar content, typically an image."
-            },
-            {
-              "name": "icon",
-              "description": "Slot for an icon rendered inside the avatar."
-            },
-            {
-              "name": "status",
-              "description": "Slot for a status badge or indicator positioned on the avatar edge."
-            },
-            {
-              "name": "secondary",
-              "description": "Slot for additional secondary content rendered with the avatar."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "label",
-                "description": "Retrieves the value of the 'label' attribute for the element.\nIf the attribute is not set, it defaults to an empty string."
-              },
-              {
-                "name": "initials",
-                "description": "Retrieves the value of the 'initials' attribute if it exists."
-              },
-              {
-                "name": "size",
-                "description": "Retrieves the size attribute of the element. If the size attribute\nis not defined, it returns the default value 'medium'."
-              },
-              {
-                "name": "className",
-                "description": "Class name for the Avatar element.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-button-group",
-          "description": "ButtonGroup class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the ButtonGroup element.\n- **draw(): _object_** - Draw method for the ButtonGroup element.\n- **afterDraw()** - After draw method for the ButtonGroup element.\n- **syncAria()** - Sync ARIA attributes on host.\n- **findButton(el: _object_): _object_** - Find button method to find the button element.\n- **toggle(activeButton: _object_, buttons: _Array<object>_, index): _void_** - Toggles the state of a group of buttons based on the active button.\n- **updateButtonState(button: _HTMLElement_, modeToRemove: _string_): _void_** - Updates the state of a button by removing one mode attribute and setting another mode attribute.\n\n### **Slots:**\n - _default_ - The button group main content.\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **native** - The component's native wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The button group main content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "active",
-                "description": "Retrieves the value of the 'active' attribute.\nIf the attribute is not set, it returns false."
-              },
-              {
-                "name": "color",
-                "description": "Retrieves the current value of the 'color' attribute.\nIf the 'color' attribute is not set, it defaults to 'primary'."
-              },
-              {
-                "name": "round",
-                "description": "Returns whether the element has the 'round' attribute."
-              },
-              {
-                "name": "fill",
-                "description": "Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\nit returns the default value 'link'."
-              },
-              {
-                "name": "className",
-                "description": "Class name for the ButtonGroup 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.",
@@ -645,8 +609,44 @@
           }
         },
         {
-          "name": "wje-card",
-          "description": "This class represents Card element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Card element.\n- **syncAria()** - Sync ARIA attributes on host only when labeling is provided.\n- **draw(context: _object_, store: _object_, params: _object_): _object_** - Draw method for the Card element.\n\n### **Slots:**\n - _default_ - The card main content.\n\n### **CSS Properties:**\n - **--wje-card-background** - Background of the component; _(default: #fff)_\n- **--wje-card-color** - Color of the component; _(default: #000)_\n- **--wje-card-border-color** - Border color of the component; _(default: transparent)_\n- **--wje-card-border-style** - Border style of the component; _(default: solid)_\n- **--wje-card-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-card-border-radius** - Border radius of the component; _(default: 0.5rem)_\n- **--wje-card-shadow** - Shadow of the component; _(default: var(--wje-shadow-x-large))_",
+          "name": "wje-button-group",
+          "description": "ButtonGroup class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the ButtonGroup element.\n- **draw(): _object_** - Draw method for the ButtonGroup element.\n- **afterDraw()** - After draw method for the ButtonGroup element.\n- **syncAria()** - Sync ARIA attributes on host.\n- **findButton(el: _object_): _object_** - Find button method to find the button element.\n- **toggle(activeButton: _object_, buttons: _Array<object>_, index): _void_** - Toggles the state of a group of buttons based on the active button.\n- **updateButtonState(button: _HTMLElement_, modeToRemove: _string_): _void_** - Updates the state of a button by removing one mode attribute and setting another mode attribute.\n\n### **Slots:**\n - _default_ - The button group main content.\n\n### **CSS Parts:**\n - **native** - The component's native wrapper.\n- **native** - The component's native wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The button group main content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "active",
+                "description": "Retrieves the value of the 'active' attribute.\nIf the attribute is not set, it returns false."
+              },
+              {
+                "name": "color",
+                "description": "Retrieves the current value of the 'color' attribute.\nIf the 'color' attribute is not set, it defaults to 'primary'."
+              },
+              {
+                "name": "round",
+                "description": "Returns whether the element has the 'round' attribute."
+              },
+              {
+                "name": "fill",
+                "description": "Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\nit returns the default value 'link'."
+              },
+              {
+                "name": "className",
+                "description": "Class name for the ButtonGroup element",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-card",
+          "description": "This class represents Card element, extending the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Card element.\n- **syncAria()** - Sync ARIA attributes on host only when labeling is provided.\n- **draw(context: _object_, store: _object_, params: _object_): _object_** - Draw method for the Card element.\n\n### **Slots:**\n - _default_ - The card main content.\n\n### **CSS Properties:**\n - **--wje-card-background** - Background of the component; _(default: #fff)_\n- **--wje-card-color** - Color of the component; _(default: #000)_\n- **--wje-card-border-color** - Border color of the component; _(default: transparent)_\n- **--wje-card-border-style** - Border style of the component; _(default: solid)_\n- **--wje-card-border-width** - Border width of the component; _(default: 1px)_\n- **--wje-card-border-radius** - Border radius of the component; _(default: 0.5rem)_\n- **--wje-card-shadow** - Shadow of the component; _(default: var(--wje-shadow-x-large))_",
           "doc-url": "",
           "attributes": [
             { "name": "label", "value": { "type": "string" } },
@@ -707,19 +707,19 @@
           }
         },
         {
-          "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)_",
+          "name": "wje-card-header",
+          "description": "CardHeader class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardHeader.\n- **draw(): _DocumentFragment_** - Draws the CardHeader.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-card-header-padding** - Padding of the component; _(default: 1rem 1rem 0.5rem)_",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The card subtitle main content." }
+            { "name": "", "description": "The card header main content." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "Class name for the CardSubtitle.",
+                "description": "Class name for the CardHeader.",
                 "type": "string"
               }
             ],
@@ -747,56 +747,39 @@
           }
         },
         {
-          "name": "wje-carousel",
-          "description": "Carousel class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Carousel.\n- **beforeDraw()** - Before draw method for the Carousel.\n- **draw(): _DocumentFragment_** - Draw method for the Carousel.\n- **afterDraw()** - After draw method for the Carousel.\n- **syncActiveToSnapStart()** - Sync `activeSlide` to the slide whose leading edge is closest to the snap start.\n- **syncSlideMetrics()** - Syncs computed CSS variables derived from `slide-per-page`.\n- **getScrollPaddingInlineStart(): _number_** - Returns the inline scroll padding used by the snap area.\n- **getControlBehavior(): _string_** - Returns the interaction scroll behavior for UI controls.\nContinuous multi-slide loops use instant snapping to avoid blank edge states\nwhile the browser is still animating a previous smooth scroll.\n- **setIntersectionObserver()** - Sets up the IntersectionObserver for the Carousel.\n- **goToSlide(index, behavior, next)** - Goes to the slide.\n- **setActiveVisualSlide(vIndex: _number_)** - Sets the active class on the currently targeted visual slide and removes it elsewhere.\n- **syncAria()** - Syncs ARIA attributes on the carousel and slides.\n- **cloneFirstAndLastItems()** - Clones the first and last items.\n- **createLoopClone(item: _HTMLElement_): _HTMLElement_** - Creates a sanitized loop clone that does not inherit transient render state\nsuch as inline `visibility: hidden` from the source slide.\n- **removeLoopClones()** - Removes loop clones so they can be rebuilt for the current configuration.\n- **getLoopCloneCount(totalSlides: _number_): _number_** - Returns how many slides should be cloned on each side when loop is enabled.\n- **scrollToVisualIndex(vIndex: _number_, behavior: _string_)** - Scrolls the carousel to a visual slide index.\n- **removeActiveSlide()** - Goes to the next slide.\n- **changePagination()** - Goes to the next slide.\n- **changeThumbnails()** - Goes to the next slide.\n- **createNextButton(): _Element_** - Goes to the next slide.\n- **createPreviousButton(): _Element_** - Goes to the next slide.\n- **createPagination(): _Element_** - Goes to the next slide.\n- **createThumbnails(): _Element_** - Goes to the next slide.\n- **nextSlide()** - Goes to the next slide.\n- **previousSlide()** - Goes to the previous slide.\n- **getSlides(): _Array_** - Goes to the slide.\n- **getSlidesWithClones(): _Array_** - Goes to the slide.\n- **getVisualIndexForLogical(index)** - Maps logical index to visual index, including leading clones when loop is enabled.\n- **getLogicalIndexForVisual(vIndex)** - Maps visual index to logical index, including edge clones when loop is enabled.\n- **getMaxVisibleStartIndex(totalSlides: _number_): _number_** - Returns the maximum logical slide index that can still render a full viewport.\n- **normalizeLoopIndex(index: _number_, totalSlides: _number_): _number_** - Normalizes a logical index for the active loop mode.\n- **getLoopLogicalCount(totalSlides: _number_): _number_** - Returns how many logical positions are reachable for the current loop mode.\n- **getPaginationIndexes(): _number[]_** - Returns the pagination indexes for the current carousel mode.\n- **canGoNext(): _boolean_** - Goes to the slide.\n- **canGoPrevious(): _boolean_** - Goes to the slide.\n\n### **Slots:**\n - _default_ - The carousel main content.\n\n### **CSS Properties:**\n - **--wje-carousel-size** - Effective size of one carousel item. _(default: 100%)_\n- **--wje-carousel-gap** - Gap between carousel items. _(default: 0.5rem)_",
+          "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)_",
           "doc-url": "",
-          "attributes": [
-            { "name": "active-slide", "value": { "type": "string" } },
-            { "name": "slide-per-page", "value": { "type": "string" } },
-            { "name": "continuous-loop", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
-            { "name": "", "description": "The carousel main content." }
+            { "name": "", "description": "The card subtitle main content." }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "activeSlide",
-                "description": "Active slide attribute."
-              },
-              { "name": "pagination", "description": "Pagination attribute." },
-              { "name": "navigation", "description": "Navigation attribute." },
-              { "name": "thumbnails", "description": "Thumbnails attribute." },
-              { "name": "loop", "description": "Loop attribute." },
-              {
-                "name": "continuousLoop",
-                "description": "Continuous loop attribute."
-              },
               {
                 "name": "className",
-                "description": "Class name for the Carousel.",
+                "description": "Class name for the CardSubtitle.",
                 "type": "string"
-              },
-              { "name": "slidePerPage", "type": "number" }
+              }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-card-header",
-          "description": "CardHeader class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CardHeader.\n- **draw(): _DocumentFragment_** - Draws the CardHeader.\n\n### **Slots:**\n - _default_ - The card header main content.\n\n### **CSS Properties:**\n - **--wje-card-header-padding** - Padding of the component; _(default: 1rem 1rem 0.5rem)_",
+          "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 card header main content." }
+            { "name": "", "description": "The carousel item main content." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "Class name for the CardHeader.",
+                "description": "Class name for the CarouselItem element.",
                 "type": "string"
               }
             ],
@@ -804,21 +787,38 @@
           }
         },
         {
-          "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-carousel",
+          "description": "Carousel class that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Carousel.\n- **beforeDraw()** - Before draw method for the Carousel.\n- **draw(): _DocumentFragment_** - Draw method for the Carousel.\n- **afterDraw()** - After draw method for the Carousel.\n- **syncActiveToSnapStart()** - Sync `activeSlide` to the slide whose leading edge is closest to the snap start.\n- **syncSlideMetrics()** - Syncs computed CSS variables derived from `slide-per-page`.\n- **getScrollPaddingInlineStart(): _number_** - Returns the inline scroll padding used by the snap area.\n- **getControlBehavior(): _string_** - Returns the interaction scroll behavior for UI controls.\nContinuous multi-slide loops use instant snapping to avoid blank edge states\nwhile the browser is still animating a previous smooth scroll.\n- **setIntersectionObserver()** - Sets up the IntersectionObserver for the Carousel.\n- **goToSlide(index, behavior, next)** - Goes to the slide.\n- **setActiveVisualSlide(vIndex: _number_)** - Sets the active class on the currently targeted visual slide and removes it elsewhere.\n- **syncAria()** - Syncs ARIA attributes on the carousel and slides.\n- **cloneFirstAndLastItems()** - Clones the first and last items.\n- **createLoopClone(item: _HTMLElement_): _HTMLElement_** - Creates a sanitized loop clone that does not inherit transient render state\nsuch as inline `visibility: hidden` from the source slide.\n- **removeLoopClones()** - Removes loop clones so they can be rebuilt for the current configuration.\n- **getLoopCloneCount(totalSlides: _number_): _number_** - Returns how many slides should be cloned on each side when loop is enabled.\n- **scrollToVisualIndex(vIndex: _number_, behavior: _string_)** - Scrolls the carousel to a visual slide index.\n- **removeActiveSlide()** - Goes to the next slide.\n- **changePagination()** - Goes to the next slide.\n- **changeThumbnails()** - Goes to the next slide.\n- **createNextButton(): _Element_** - Goes to the next slide.\n- **createPreviousButton(): _Element_** - Goes to the next slide.\n- **createPagination(): _Element_** - Goes to the next slide.\n- **createThumbnails(): _Element_** - Goes to the next slide.\n- **nextSlide()** - Goes to the next slide.\n- **previousSlide()** - Goes to the previous slide.\n- **getSlides(): _Array_** - Goes to the slide.\n- **getSlidesWithClones(): _Array_** - Goes to the slide.\n- **getVisualIndexForLogical(index)** - Maps logical index to visual index, including leading clones when loop is enabled.\n- **getLogicalIndexForVisual(vIndex)** - Maps visual index to logical index, including edge clones when loop is enabled.\n- **getMaxVisibleStartIndex(totalSlides: _number_): _number_** - Returns the maximum logical slide index that can still render a full viewport.\n- **normalizeLoopIndex(index: _number_, totalSlides: _number_): _number_** - Normalizes a logical index for the active loop mode.\n- **getLoopLogicalCount(totalSlides: _number_): _number_** - Returns how many logical positions are reachable for the current loop mode.\n- **getPaginationIndexes(): _number[]_** - Returns the pagination indexes for the current carousel mode.\n- **canGoNext(): _boolean_** - Goes to the slide.\n- **canGoPrevious(): _boolean_** - Goes to the slide.\n\n### **Slots:**\n - _default_ - The carousel main content.\n\n### **CSS Properties:**\n - **--wje-carousel-size** - Effective size of one carousel item. _(default: 100%)_\n- **--wje-carousel-gap** - Gap between carousel items. _(default: 0.5rem)_",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "active-slide", "value": { "type": "string" } },
+            { "name": "slide-per-page", "value": { "type": "string" } },
+            { "name": "continuous-loop", "value": { "type": "string" } }
+          ],
           "slots": [
-            { "name": "", "description": "The carousel item main content." }
+            { "name": "", "description": "The carousel main content." }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "activeSlide",
+                "description": "Active slide attribute."
+              },
+              { "name": "pagination", "description": "Pagination attribute." },
+              { "name": "navigation", "description": "Navigation attribute." },
+              { "name": "thumbnails", "description": "Thumbnails attribute." },
+              { "name": "loop", "description": "Loop attribute." },
+              {
+                "name": "continuousLoop",
+                "description": "Continuous loop attribute."
+              },
               {
                 "name": "className",
-                "description": "Class name for the CarouselItem element.",
+                "description": "Class name for the Carousel.",
                 "type": "string"
-              }
+              },
+              { "name": "slidePerPage", "type": "number" }
             ],
             "events": []
           }
@@ -879,18 +879,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-col",
-          "description": "Col class that extends WJElement.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component element.\n\n### **Slots:**\n - _default_ - The col main content.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The col main content." }],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-chip",
           "description": "This method dispatches a custom event named \"wje-chip:remove\".\nIt is triggered when the remove button is clicked, which happens when the chip is removed.\nThe event is dispatched on the current instance of the Chip class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Getter for the observed attributes.\n- **draw(): _DocumentFragment_** - Draws the Chip element.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **afterDraw()** - Getter for the observed attributes.\n- **beforeDisconnect()** - Before disconnect event for the Chip element.\n\n### **Slots:**\n - **start** - The chip leading content.\n- _default_ - The chip main content.\n- **end** - The chip trailing content.\n\n### **CSS Parts:**\n - **native** - The component's native wrapper. //@fires wje-chip:remove - Dispatched when the chip is removed;",
@@ -933,6 +921,18 @@
             "events": []
           }
         },
+        {
+          "name": "wje-col",
+          "description": "Col class that extends WJElement.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component element.\n\n### **Slots:**\n - _default_ - The col main content.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "The col main content." }],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-container",
           "description": "The Container class is a custom web component that extends WJElement. It is a simple container that can hold other elements or components.\nIt provides a slot for adding child elements or components. The Container class also supports indentation through the `indent` property.\nThe indentation is applied as a CSS variable (`--wje-container-indent`) which can be used in the styles of child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Container.\n- **draw(): _DocumentFragment_** - Draws the Container element.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.\n\n### **CSS Properties:**\n - **--wje-container-indent** - The indentation of the container. _(default: undefined)_",
@@ -956,64 +956,6 @@
             "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "for",
-              "description": "The id of the element to copy content from.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "label",
-              "description": "Accessible label for the button. Also used as fallback tooltip text when the `tooltip` attribute is present without a value.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "label-success",
-              "description": "Text displayed in the tooltip after a successful copy. Used only when the `tooltip` attribute is present.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "tooltip",
-              "description": "Enables the tooltip. When set to a string, the value is used as the default tooltip content.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "value",
-              "description": "The text to be copied.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "This is a default/unnamed slot." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Getter for the value property."
-              },
-              { "name": "className", "type": "string" },
-              { "name": "clicked", "description": "Handles the click event." },
-              {
-                "name": "keydown",
-                "description": "Handles the keydown event."
-              },
-              { "name": "focused", "description": "Handles the focus event." },
-              { "name": "blurred", "description": "Handles the blur event." },
-              {
-                "name": "copied",
-                "description": "Handles the copied event.\nYou can override this method to customize the behavior when the text is copied."
-              },
-              { "name": "timeout", "type": "number" }
-            ],
-            "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.",
@@ -1083,101 +1025,79 @@
           }
         },
         {
-          "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.",
+          "name": "wje-copy-button",
+          "description": "CopyButton is a custom web component that extends WJElement.\nIt provides a button that, when clicked, copies a specified text to the clipboard.\nThe text to be copied can be specified through the `value` attribute.\nThe CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CopyButton.\n- **draw(): _DocumentFragment_** - Draws the ColorPicker element.\n- **afterDraw()** - Adds event listeners for the click, focus, and blur events.\n- **syncAria()** - Sync ARIA attributes on host.\n- **copy(button: _HTMLElement_)** - Copies the specified text or node.\n- **copyTarget(content: _HTMLElement_): _Promise_** - Copies the target content.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--text-color** - Controls the color of the text. _(default: undefined)_\n- **--background-color** - Controls the background color of the button. //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - Styles the button element.",
           "doc-url": "",
           "attributes": [
-            { "name": "active", "value": { "type": "string" } },
             {
-              "name": "mobile-presentation",
-              "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
+              "name": "for",
+              "description": "The id of the element to copy content from.",
               "value": { "type": "string" }
             },
             {
-              "name": "mobile-break-point",
-              "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\". // @fires wje-dropdown:open - Event fired when the dropdown is opened. // @fires wje-dropdown:close - Event fired when the dropdown is closed.",
+              "name": "label",
+              "description": "Accessible label for the button. Also used as fallback tooltip text when the `tooltip` attribute is present without a value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label-success",
+              "description": "Text displayed in the tooltip after a successful copy. Used only when the `tooltip` attribute is present.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "tooltip",
+              "description": "Enables the tooltip. When set to a string, the value is used as the default tooltip content.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "The text to be copied.",
               "value": { "type": "string" }
             }
           ],
           "slots": [
-            {
-              "name": "trigger",
-              "description": "The slot for the trigger of the dropdown."
-            },
-            { "name": "", "description": "The default slot for the dropdown." }
+            { "name": "", "description": "This is a default/unnamed slot." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "dependencies",
-                "description": "The placement of the dropdown.",
-                "type": "{\"wje-popup\": Popup}"
-              },
-              {
-                "name": "portaled",
-                "description": "Getter method for the `portaled` property.\nChecks if the `portaled` attribute is present on the element."
-              },
-              {
-                "name": "isPortaled",
-                "description": "Checks whether the element has the 'portaled' attribute."
-              },
-              {
-                "name": "trigger",
-                "description": "Gets the placement of the dropdown."
+                "name": "value",
+                "description": "Getter for the value property."
               },
+              { "name": "className", "type": "string" },
+              { "name": "clicked", "description": "Handles the click event." },
               {
-                "name": "mobilePresentation",
-                "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
-                "type": "string"
+                "name": "keydown",
+                "description": "Handles the keydown event."
               },
+              { "name": "focused", "description": "Handles the focus event." },
+              { "name": "blurred", "description": "Handles the blur event." },
               {
-                "name": "mobileBreakPoint",
-                "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\".",
-                "type": "string"
+                "name": "copied",
+                "description": "Handles the copied event.\nYou can override this method to customize the behavior when the text is copied."
               },
+              { "name": "timeout", "type": "number" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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": "Sets the placement of the dropdown.",
+                "description": "The class name for the Divider class.",
                 "type": "string"
-              },
-              {
-                "name": "otherDropdownOpennedCallback",
-                "description": "Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled."
-              },
-              {
-                "name": "popupHideCallback",
-                "description": "Handles popup hide events and closes only the dropdown that owns the popup.\nThis prevents nested dropdowns from collapsing their parent dropdown when the\nchild popup is hidden."
-              },
-              {
-                "name": "onMenuItemClick",
-                "description": "Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\nThis works even when the menu is portaled, because we rely on the composed path."
-              },
-              { "name": "toggleCallback" },
-              { "name": "onOpen", "description": "Open the popup element." },
-              { "name": "beforeClose" },
-              { "name": "afterClose" },
-              { "name": "onClose" }
+              }
             ],
             "events": []
           }
@@ -1228,39 +1148,81 @@
           }
         },
         {
-          "name": "wje-file-upload-item",
-          "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item. //@fires wje-button:click - Dispatches when the delete button is clicked _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
+          "name": "wje-dropdown",
+          "description": "This element represents a dropdown menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the dropdown.\n- **beforeDraw()** - Removes the popup element.\n- **draw(): _DocumentFragment_** - Draws the dropdown element and returns the created document fragment.\n- **afterDraw()** - Adds event listeners for the mouseenter and mouseleave events.\n- **afterDisconnect()** - Adds event listeners for the mouseenter and mouseleave events.\n- **syncPopupOwner()** - Assigns the current dropdown instance as the owner of its popup layers.\nOwner metadata is later used to resolve which dropdown should react to\ndelegated menu-item clicks, including portaled popup content.\n- **syncOwnedContentOwner(root: _HTMLElement_)** - Recursively assigns owner metadata to the dropdown content subtree while\nleaving nested dropdown roots untouched, so each nested dropdown can keep\nits own ownership boundary.\n- **getMenuItemOwner(path: _EventTarget[]_, item: _HTMLElement_): _HTMLElement|null_** - Resolves the dropdown that owns a clicked menu item. The lookup prefers\nexplicit owner metadata and falls back to DOM traversal so both regular\nand portaled dropdown content can be scoped correctly.\n- **afterShow()** - This method is called after the dropdown is shown.\n- **syncAria()** - Syncs ARIA attributes for the trigger element.\n\n### **Slots:**\n - **trigger** - The slot for the trigger of the dropdown.\n- _default_ - The default slot for the dropdown.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet dropdowns. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet dropdowns. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n\n### **CSS Parts:**\n - **native** - The native part of the dropdown.\n- **popup-native** - The exported native popup panel part.\n- **backdrop** - The exported mobile bottom sheet backdrop part.",
           "doc-url": "",
           "attributes": [
-            { "name": "uploaded", "value": { "type": "string" } },
-            { "name": "is-uploaded", "value": { "type": "string" } }
+            { "name": "active", "value": { "type": "string" } },
+            {
+              "name": "mobile-presentation",
+              "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mobile-break-point",
+              "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\". // @fires wje-dropdown:open - Event fired when the dropdown is opened. // @fires wje-dropdown:close - Event fired when the dropdown is closed.",
+              "value": { "type": "string" }
+            }
           ],
           "slots": [
-            { "name": "img", "description": "Slot for the image" },
-            { "name": "action", "description": "Slot for the action buttons" }
+            {
+              "name": "trigger",
+              "description": "The slot for the trigger of the dropdown."
+            },
+            { "name": "", "description": "The default slot for the dropdown." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "isUploaded",
-                "description": "Checks if the 'is-uploaded' attribute is present on the element."
+                "name": "dependencies",
+                "description": "The placement of the dropdown.",
+                "type": "{\"wje-popup\": Popup}"
               },
               {
-                "name": "size",
-                "description": "Retrieves the value of the 'size' attribute."
+                "name": "portaled",
+                "description": "Getter method for the `portaled` property.\nChecks if the `portaled` attribute is present on the element."
               },
               {
-                "name": "dependencies",
-                "description": "Dependencies for the component.",
-                "type": "object"
+                "name": "isPortaled",
+                "description": "Checks whether the element has the 'portaled' attribute."
               },
-              { "name": "className", "type": "string" },
               {
-                "name": "onDelete",
-                "description": "Handles the delete action."
+                "name": "trigger",
+                "description": "Gets the placement of the dropdown."
               },
-              { "name": "localizer" }
+              {
+                "name": "mobilePresentation",
+                "description": "Enables a responsive presentation, currently \"bottom-sheet\".",
+                "type": "string"
+              },
+              {
+                "name": "mobileBreakPoint",
+                "description": "Viewport width where the mobile presentation becomes active. Defaults to \"768\".",
+                "type": "string"
+              },
+              {
+                "name": "className",
+                "description": "Sets the placement of the dropdown.",
+                "type": "string"
+              },
+              {
+                "name": "otherDropdownOpennedCallback",
+                "description": "Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled."
+              },
+              {
+                "name": "popupHideCallback",
+                "description": "Handles popup hide events and closes only the dropdown that owns the popup.\nThis prevents nested dropdowns from collapsing their parent dropdown when the\nchild popup is hidden."
+              },
+              {
+                "name": "onMenuItemClick",
+                "description": "Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\nThis works even when the menu is portaled, because we rely on the composed path."
+              },
+              { "name": "toggleCallback" },
+              { "name": "onOpen", "description": "Open the popup element." },
+              { "name": "beforeClose" },
+              { "name": "afterClose" },
+              { "name": "onClose" }
             ],
             "events": []
           }
@@ -1392,46 +1354,37 @@
           }
         },
         {
-          "name": "wje-format-digital",
-          "description": "This element formats and displays digital values such as file sizes or data transfer rates.\n`FormatDigital` is a custom web component that represents a formatted digital value with units like\nbytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\nInitializes the shadow DOM.\n- **beforeDraw()** - Prepares the component before rendering.\nComputes the formatted value based on the input value and unit.\n- **draw(): _DocumentFragment_** - Renders the component and returns a document fragment.\nThe rendered structure includes a formatted value wrapped in a container\nwith slots for additional customization.\n\n### **CSS Parts:**\n - **native** - The native part of the component.\n- **formatted** - The part representing the formatted value.\n- **start** - Slot for content before the formatted value.\n- **end** - Slot for content after the formatted value.",
+          "name": "wje-file-upload-item",
+          "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item. //@fires wje-button:click - Dispatches when the delete button is clicked _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "value",
-              "description": "The numeric value to format (e.g., 1024 for 1 KB).",
-              "value": { "type": "number" }
-            },
-            { "name": "unit-display", "value": { "type": "string" } },
-            {
-              "name": "unit",
-              "description": "The unit of the value (`byte` or `bit`). Defaults to `byte`.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "unitDisplay",
-              "description": "The display style of the unit (`short`, `long`, or `narrow`). Defaults to `short`.",
-              "value": { "type": "string" }
-            }
+            { "name": "uploaded", "value": { "type": "string" } },
+            { "name": "is-uploaded", "value": { "type": "string" } }
+          ],
+          "slots": [
+            { "name": "img", "description": "Slot for the image" },
+            { "name": "action", "description": "Slot for the action buttons" }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Returns the value of the digital format."
+                "name": "isUploaded",
+                "description": "Checks if the 'is-uploaded' attribute is present on the element."
               },
               {
-                "name": "unit",
-                "description": "Returns the unit of the digital format.\nDefaults to `byte` if no unit is set."
+                "name": "size",
+                "description": "Retrieves the value of the 'size' attribute."
               },
               {
-                "name": "unitDisplay",
-                "description": "Returns the unit display style for the digital format.\nDefaults to `short` if not set."
+                "name": "dependencies",
+                "description": "Dependencies for the component.",
+                "type": "object"
               },
+              { "name": "className", "type": "string" },
               {
-                "name": "className",
-                "description": "The class name identifier for this component.",
-                "type": "string"
+                "name": "onDelete",
+                "description": "Handles the delete action."
               },
               { "name": "localizer" }
             ],
@@ -1478,6 +1431,53 @@
             "events": []
           }
         },
+        {
+          "name": "wje-format-digital",
+          "description": "This element formats and displays digital values such as file sizes or data transfer rates.\n`FormatDigital` is a custom web component that represents a formatted digital value with units like\nbytes or bits. It extends from `WJElement` and utilizes the `Localizer` class for locale-aware formatting.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\nInitializes the shadow DOM.\n- **beforeDraw()** - Prepares the component before rendering.\nComputes the formatted value based on the input value and unit.\n- **draw(): _DocumentFragment_** - Renders the component and returns a document fragment.\nThe rendered structure includes a formatted value wrapped in a container\nwith slots for additional customization.\n\n### **CSS Parts:**\n - **native** - The native part of the component.\n- **formatted** - The part representing the formatted value.\n- **start** - Slot for content before the formatted value.\n- **end** - Slot for content after the formatted value.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The numeric value to format (e.g., 1024 for 1 KB).",
+              "value": { "type": "number" }
+            },
+            { "name": "unit-display", "value": { "type": "string" } },
+            {
+              "name": "unit",
+              "description": "The unit of the value (`byte` or `bit`). Defaults to `byte`.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "unitDisplay",
+              "description": "The display style of the unit (`short`, `long`, or `narrow`). Defaults to `short`.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Returns the value of the digital format."
+              },
+              {
+                "name": "unit",
+                "description": "Returns the unit of the digital format.\nDefaults to `byte` if no unit is set."
+              },
+              {
+                "name": "unitDisplay",
+                "description": "Returns the unit display style for the digital format.\nDefaults to `short` if not set."
+              },
+              {
+                "name": "className",
+                "description": "The class name identifier for this component.",
+                "type": "string"
+              },
+              { "name": "localizer" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-grid",
           "description": "The Grid class is a custom web component that extends WJElement. It is a simple grid that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Grid.\n- **draw(): _DocumentFragment_** - Draws the Grid element.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
@@ -1539,36 +1539,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-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.",
@@ -1683,6 +1653,66 @@
             "events": []
           }
         },
+        {
+          "name": "wje-infinite-scroll",
+          "description": "This element allows users to scroll through a potentially infinite amount of content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _void_** - Prepares the component for updates before it is drawn.\nThis method handles the removal of templates for iteration, adjusts the height styling of the component,\nand manages abort signals for loading operations.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure for an infinite scroll component.\nThe structure includes native elements, slots for customization, and optional loading content.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the server.\n- **hideLoader()** - Hides the loader.\n- **showLoader(): _void_** - Displays the loader element by adding the 'show' class to its class list.\nThis method is useful for indicating a loading or processing state in the UI.\n- **hasMorePages(page: _number_): _boolean_** - Checks if there are more pages to load.\n- **loadPages(page: _number_)** - Loads the pages.\n\n### **Slots:**\n - _default_ - The default slot for the infinite scroll.\n\n### **CSS Properties:**\n - **--wje-infinite-scroll-width** - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container. _(default: 100%)_\n- **--wje-infinite-scroll-height** - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases. //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked. _(default: 300px)_\n\n### **CSS Parts:**\n - **loader** - The loader part of the infinite scroll.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the infinite scroll."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "infiniteScrollTemplate",
+                "description": "Getter for the infiniteScrollTemplate property."
+              },
+              {
+                "name": "response",
+                "description": "Getter for the response property."
+              },
+              {
+                "name": "objectName",
+                "description": "Dependencies of the InfiniteScroll component."
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "scrollEvent",
+                "description": "Attaches a scroll event listener to the current object.\nThe `scrollEvent` function binds the `onScroll` method to the 'scroll' event\nof the current object. This enables handling of scroll events for\nspecific functionality such as updating UI elements, loading content dynamically,\nor tracking user interaction with scrollable content."
+              },
+              {
+                "name": "unScrollEvent",
+                "description": "A function that removes the scroll event listener from the current context.\nThis function is used to unbind the `onScroll` event listener\nfrom the `scroll` event of the current object. It ensures that\nthe scroll event no longer triggers the `onScroll` handler."
+              },
+              {
+                "name": "onScroll",
+                "description": "A scroll event handler function that checks the scroll position and triggers loading additional content\nwhen the user scrolls near the bottom of the page.\nProperties accessed:\n- `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n- `scrollHeight`: The total height of the element's content.\n- `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\nConditions:\n- Determines if the scroll position is within 300 pixels of the bottom of the element.\n- Verifies that the current page number is less than or equal to the total number of pages.\n- Checks if the current page is already in the loading state.\nActions:\n- Increments the current page number when the conditions are met.\n- Initiates loading for the next page by calling the `loadPages` function."
+              },
+              { "name": "compareFunction" },
+              {
+                "name": "dataToHtml",
+                "description": "Converts a data item into an HTML element based on a template.\nThis function takes a data item, interpolates it into a predefined template,\nparses the resulting HTML string, and returns the first child element of the parsed HTML content."
+              },
+              {
+                "name": "customForeach",
+                "description": "A custom implementation of the forEach method designed to iterate over an array of data,\ntransform each item into an HTML element, and append the element to a specified placement object.\nAdditionally, it adds an event listener to each generated element for handling click events."
+              },
+              {
+                "name": "interpolate",
+                "description": "Interpolates a string template with values from the provided parameters object.\nThe template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\nwhich are replaced with the corresponding values from the `params` object.\nPlaceholders support dot notation for accessing nested properties within the `params` object."
+              },
+              { "name": "totalPages", "type": "number" },
+              { "name": "isLoading", "type": "array" },
+              { "name": "iterate", "type": "null" },
+              { "name": "placementObj" }
+            ],
+            "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.",
@@ -1795,6 +1825,28 @@
             "events": []
           }
         },
+        {
+          "name": "wje-input-file",
+          "description": "This element represents a file input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component.\n- **afterDraw()** - After draw method for the InputFile class.\n\n### **CSS Parts:**\n - **native** - The native file input wrapper.\n- **input** - The text input.\n- **file-input** - The file input element. // @fires wje-input-file:change - Event fired when the file input changes.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Gets the value of the input file."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the InputFile class.",
+                "type": "string"
+              },
+              { "name": "_value", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-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.",
@@ -1858,101 +1910,49 @@
           }
         },
         {
-          "name": "wje-infinite-scroll",
-          "description": "This element allows users to scroll through a potentially infinite amount of content.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _void_** - Prepares the component for updates before it is drawn.\nThis method handles the removal of templates for iteration, adjusts the height styling of the component,\nand manages abort signals for loading operations.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment containing the structure for an infinite scroll component.\nThe structure includes native elements, slots for customization, and optional loading content.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the server.\n- **hideLoader()** - Hides the loader.\n- **showLoader(): _void_** - Displays the loader element by adding the 'show' class to its class list.\nThis method is useful for indicating a loading or processing state in the UI.\n- **hasMorePages(page: _number_): _boolean_** - Checks if there are more pages to load.\n- **loadPages(page: _number_)** - Loads the pages.\n\n### **Slots:**\n - _default_ - The default slot for the infinite scroll.\n\n### **CSS Properties:**\n - **--wje-infinite-scroll-width** - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container. _(default: 100%)_\n- **--wje-infinite-scroll-height** - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases. //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked. _(default: 300px)_\n\n### **CSS Parts:**\n - **loader** - The loader part of the infinite scroll.",
+          "name": "wje-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 infinite scroll."
-            }
+            { "name": "", "description": "The default slot for the label." }
           ],
           "events": [],
           "js": {
-            "properties": [
-              {
-                "name": "infiniteScrollTemplate",
-                "description": "Getter for the infiniteScrollTemplate property."
-              },
-              {
-                "name": "response",
-                "description": "Getter for the response property."
-              },
-              {
-                "name": "objectName",
-                "description": "Dependencies of the InfiniteScroll component."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "scrollEvent",
-                "description": "Attaches a scroll event listener to the current object.\nThe `scrollEvent` function binds the `onScroll` method to the 'scroll' event\nof the current object. This enables handling of scroll events for\nspecific functionality such as updating UI elements, loading content dynamically,\nor tracking user interaction with scrollable content."
-              },
-              {
-                "name": "unScrollEvent",
-                "description": "A function that removes the scroll event listener from the current context.\nThis function is used to unbind the `onScroll` event listener\nfrom the `scroll` event of the current object. It ensures that\nthe scroll event no longer triggers the `onScroll` handler."
-              },
-              {
-                "name": "onScroll",
-                "description": "A scroll event handler function that checks the scroll position and triggers loading additional content\nwhen the user scrolls near the bottom of the page.\nProperties accessed:\n- `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n- `scrollHeight`: The total height of the element's content.\n- `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\nConditions:\n- Determines if the scroll position is within 300 pixels of the bottom of the element.\n- Verifies that the current page number is less than or equal to the total number of pages.\n- Checks if the current page is already in the loading state.\nActions:\n- Increments the current page number when the conditions are met.\n- Initiates loading for the next page by calling the `loadPages` function."
-              },
-              { "name": "compareFunction" },
-              {
-                "name": "dataToHtml",
-                "description": "Converts a data item into an HTML element based on a template.\nThis function takes a data item, interpolates it into a predefined template,\nparses the resulting HTML string, and returns the first child element of the parsed HTML content."
-              },
-              {
-                "name": "customForeach",
-                "description": "A custom implementation of the forEach method designed to iterate over an array of data,\ntransform each item into an HTML element, and append the element to a specified placement object.\nAdditionally, it adds an event listener to each generated element for handling click events."
-              },
-              {
-                "name": "interpolate",
-                "description": "Interpolates a string template with values from the provided parameters object.\nThe template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\nwhich are replaced with the corresponding values from the `params` object.\nPlaceholders support dot notation for accessing nested properties within the `params` object."
-              },
-              { "name": "totalPages", "type": "number" },
-              { "name": "isLoading", "type": "array" },
-              { "name": "iterate", "type": "null" },
-              { "name": "placementObj" }
-            ],
+            "properties": [{ "name": "className", "type": "string" }],
             "events": []
           }
         },
         {
-          "name": "wje-input-file",
-          "description": "This element represents a file input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component.\n- **afterDraw()** - After draw method for the InputFile class.\n\n### **CSS Parts:**\n - **native** - The native file input wrapper.\n- **input** - The text input.\n- **file-input** - The file input element. // @fires wje-input-file:change - Event fired when the file input changes.",
+          "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": "value",
-                "description": "Gets the value of the input file."
+                "name": "dependencies",
+                "description": "Dependencies of the ImgComparer component.",
+                "type": "object"
               },
+              { "name": "className", "type": "string" },
               {
-                "name": "className",
-                "description": "The class name for the InputFile class.",
-                "type": "string"
+                "name": "handleDrag",
+                "description": "Handles the drag event."
               },
-              { "name": "_value", "type": "string" }
+              {
+                "name": "clamp",
+                "description": "Clamps a number between a minimum and maximum value."
+              }
             ],
             "events": []
           }
         },
-        {
-          "name": "wje-label",
-          "description": "This element represents a label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`). _(default: black)_\n- **--wje-label-font-size** - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs. // @fires wje-label:change - Event fired when the label is changed. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the label." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-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.",
@@ -1999,6 +1999,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-main",
+          "description": "This element represents a main section.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the main section.\n\n### **Slots:**\n - _default_ - The default slot for the main section.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the main section."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-masonry",
           "description": "This element represents a masonry layout.\n---\n\n\n### **Methods:**\n - **beforeDisconnect()** - Callback for when the element is disconnected.\n- **setupAttributes()** - Sets up the attributes for the element.\n- **draw(): _DocumentFragment_** - Draws the element for the masonry layout.\n- **afterDraw()** - Called after the element is drawn.\n- **renderCols(colCount: _number_)** - Renders the columns.\n- **scheduleLayout(ms: _number_)** - Schedules a layout.\n\n### **Slots:**\n - _default_ - The default slot for the masonry layout.\n\n### **CSS Properties:**\n - **--wje-masonry-layout-gap** - The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem. _(default: 1rem)_\n- **--wje-masonry-layout-col-count** - The count column in the masonry layout. Accepts any valid CSS length. _(default: 1)_\n\n### **CSS Parts:**\n - **native** - The native part of the masonry layout.\n- **column** - The individual columns in the masonry layout.",
@@ -2052,23 +2069,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-main",
-          "description": "This element represents a main section.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the main section.\n\n### **Slots:**\n - _default_ - The default slot for the main section.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the main section."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-menu",
           "description": "This element represents a menu.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu.\n- **afterDraw()** - Refreshes the component after drawing.\n- **beforeDisconnect()** - Cleans up the component before disconnecting.\n\n### **Slots:**\n - _default_ - The default slot for the menu.\n\n### **CSS Properties:**\n - **--wje-menu-background** - Defines the background color of the menu. Accepts any valid CSS color value, such as `#ffffff`, `rgb(255, 255, 255)`, or CSS variables. _(default: var(--wje-background))_\n- **--wje-menu-border-width** - Specifies the width of the menu's border. Accepts any valid CSS length value (e.g., `px`, `em`, `%`). _(default: 1px)_\n- **--wje-menu-border-style** - Sets the style of the menu's border. Common values include `solid`, `dashed`, `dotted`, etc. _(default: solid)_\n- **--wje-menu-border-color** - Defines the color of the menu's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-border-radius** - Determines the radius of the menu's corners, creating rounded edges. Accepts any valid CSS length value (e.g., `px`, `%`). _(default: var(--wje-border-radius-small))_\n- **--wje-menu-padding-top** - Specifies the top padding inside the menu. Accepts any valid CSS length value. _(default: .5rem)_\n- **--wje-menu-padding-bottom** - Specifies the bottom padding inside the menu. Accepts any valid CSS length value. _(default: .5rem)_\n- **--wje-menu-padding-inline** - Sets the horizontal (left and right) padding inside the menu. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-menu-margin-top** - Defines the top margin outside the menu. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-menu-margin-bottom** - Defines the bottom margin outside the menu. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-menu-margin-inline** - Specifies the horizontal (left and right) margin outside the menu. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-menu-collapse-width** - Sets the width of the menu when it is collapsed. This property is typically used to define the reduced size of the menu in collapsed state. Accepts any valid CSS length value. _(default: 65px)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu.",
@@ -2248,33 +2248,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-options",
           "description": "This element represents a set of options.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **processData(data: _object_): _Array_** - Processes the provided data based on the optional array path set in the instance.\n- **filterOutDrawnOptions(response: _object_): _object_** - Filters out options from the response object that have already been drawn, based on the specified option array path.\n- **getPages(page: _number_): _Promise<object>_** - Fetches the pages from the provided URL.\n- **findSelectedOptionData(selectedOptionValues: _Array_): _Array_** - Finds the selected option data based on the given selected option values.\n- **addOption(optionData: _object_)** - Adds an option to the element.\n- **addOptions(optionsData: _Array_, silent: _boolean_)** - Adds options to the element.",
@@ -2333,24 +2306,115 @@
                 "description": "Retrieves the value of the 'query-params' attribute."
               },
               {
-                "name": "lazy",
-                "description": "Checks if the lazy attribute is present."
+                "name": "lazy",
+                "description": "Checks if the lazy attribute is present."
+              },
+              { "name": "options", "description": "Gets the loaded options." },
+              {
+                "name": "loadedOptions",
+                "description": "Sets the loaded options.",
+                "type": "Array"
+              },
+              { "name": "className", "type": "string" },
+              { "name": "dispatchOptionsLoadEvent" },
+              {
+                "name": "recursiveUpdate",
+                "description": "Recursively updates the object based on the provided path to the property."
+              },
+              {
+                "name": "htmlItem",
+                "description": "Generates an HTML option element based on the provided item."
+              }
+            ],
+            "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.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-orgchart-item",
+          "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart item.\n- **afterDraw()** - After Draws the component for the org chart item.\n\n### **Slots:**\n - _default_ - The default slot for the orgchart item.\n- **child** - The child slot for the orgchart item.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.\n- **expander** - Styles the expander element. // @fires wje-orgchart-item:click - Emitted when the item card is clicked.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "virtual",
+              "description": "Renders the item as a structural connector without its own card or expander.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "boss",
+              "description": "The boss of the orgchart item (default: false).",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the orgchart item."
+            },
+            {
+              "name": "child",
+              "description": "The child slot for the orgchart item."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "boss",
+                "description": "Gets the boss of the orgchart item."
               },
-              { "name": "options", "description": "Gets the loaded options." },
               {
-                "name": "loadedOptions",
-                "description": "Sets the loaded options.",
-                "type": "Array"
+                "name": "virtual",
+                "description": "Gets whether the item renders only as a structural connector."
               },
               { "name": "className", "type": "string" },
-              { "name": "dispatchOptionsLoadEvent" },
-              {
-                "name": "recursiveUpdate",
-                "description": "Recursively updates the object based on the provided path to the property."
-              },
+              { "name": "handleItemClick" },
               {
-                "name": "htmlItem",
-                "description": "Generates an HTML option element based on the provided item."
+                "name": "toggleChildren",
+                "description": "Toggles the children of the orgchart item."
               }
             ],
             "events": []
@@ -2516,70 +2580,6 @@
             "events": [{ "name": "wje-portal:restored", "type": "CustomEvent" }]
           }
         },
-        {
-          "name": "wje-orgchart-group",
-          "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart group.\n- **afterDraw()** - After Draws the component for the org chart group.\n\n### **CSS Parts:**\n - **** - Styles the element.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-orgchart-item",
-          "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart item.\n- **afterDraw()** - After Draws the component for the org chart item.\n\n### **Slots:**\n - _default_ - The default slot for the orgchart item.\n- **child** - The child slot for the orgchart item.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.\n- **expander** - Styles the expander element. // @fires wje-orgchart-item:click - Emitted when the item card is clicked.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "virtual",
-              "description": "Renders the item as a structural connector without its own card or expander.",
-              "value": { "type": "boolean" }
-            },
-            {
-              "name": "boss",
-              "description": "The boss of the orgchart item (default: false).",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the orgchart item."
-            },
-            {
-              "name": "child",
-              "description": "The child slot for the orgchart item."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "boss",
-                "description": "Gets the boss of the orgchart item."
-              },
-              {
-                "name": "virtual",
-                "description": "Gets whether the item renders only as a structural connector."
-              },
-              { "name": "className", "type": "string" },
-              { "name": "handleItemClick" },
-              {
-                "name": "toggleChildren",
-                "description": "Toggles the children of the orgchart item."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-progress-bar",
           "description": "This element represents a progress bar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **syncAria()** - Sync ARIA attributes on host.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **getCircleDasharray(radius: _number_): _number_** - Returns the dasharray for a circle with the given radius.\n- **getCircleDashoffset(progress: _number_, radius: _number_): _number_** - Returns the dashoffset for a circle with the given progress and radius.\n- **setCircleProgress(percent)** - Sets the progress of the circle.\n\n### **Slots:**\n - _default_ - The default slot for the progress bar.\n- **start** - The start slot of the progress bar.\n- **end** - The end slot of the progress bar.\n\n### **CSS Properties:**\n - **--wje-progress-bar-color** - Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (`red`), hex values (`#ff0000`), or CSS variables. _(default: var(--wje-color-contrast-6))_\n- **--wje-progress-bar-text-size** - Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`) to control text size relative to the bar's design. _(default: .75rem)_\n- **--wje-progress-bar-text-color** - Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background. _(default: var(--wje-color))_",
@@ -2735,69 +2735,121 @@
           }
         },
         {
-          "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-rate",
+          "description": "This element represents a rating component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the rating component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **createIcons(i: _number_): _Element_** - Creates the icons for the rating component.\n- **changeRate()** - Changes the rate of the rating component.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getIcons(index: _number_): _Element_** - Returns the icons for the rating component.\n- **getValueFromXPosition(coordinate: _number_): _number_** - Returns the value from the x position.\n- **roundToPrecision(numberToRound: _number_, precision: _number_): _number_** - Rounds a given number to the nearest specified precision.\n\n### **CSS Properties:**\n - **--wje-rate-gap** - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements. _(default: .25rem)_\n- **--wje-rate-color** - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables. _(default: var(--wje-color-contrast-11))_\n- **--wje-rate-selected-color** - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value. _(default: var(--wje-color-danger-9))_\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.",
           "doc-url": "",
           "attributes": [
-            { "name": "required", "value": { "type": "string" } },
+            { "name": "is-hover", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "string" } },
+            {
+              "name": "max",
+              "description": "The maximum value of the rating component.",
+              "value": { "type": "number" }
+            },
             { "name": "disabled", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
-          ],
-          "slots": [
+            { "name": "readonly", "value": { "type": "string" } },
             {
-              "name": "",
-              "description": "The default slot for the radio group."
+              "name": "precision",
+              "description": "The precision of the rating component.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "icons",
+              "description": "The icons of the rating component.",
+              "value": { "type": "Array<string>" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "precision",
+                "description": "Gets the precision of the rating component."
+              },
+              {
+                "name": "max",
+                "description": "Gets the maximum value of the rating component."
+              },
+              {
+                "name": "icons",
+                "description": "Gets the icons of the rating component."
+              },
               {
                 "name": "value",
-                "description": "Getter for the value attribute."
+                "description": "Gets the value of the rating component."
               },
               {
-                "name": "required",
-                "description": "Getter for the name attribute."
+                "name": "className",
+                "description": "Sets the hover value of the rating component.",
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "Getter for the label attribute."
+                "name": "onMouseEnter",
+                "description": "Event handler for the mouse enter event."
               },
-              { "name": "className", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
+              {
+                "name": "onMouseLeave",
+                "description": "Event handler for the mouse leave event."
+              },
+              {
+                "name": "onMouseMove",
+                "description": "Event handler for the mouse move event."
+              },
+              {
+                "name": "onTouchStart",
+                "description": "Event handler for the touch start event."
+              },
+              {
+                "name": "onTouchEnd",
+                "description": "Event handler for the touch end event."
+              },
+              {
+                "name": "onTouchMove",
+                "description": "Event handler for the touch move event."
+              },
+              {
+                "name": "onClick",
+                "description": "Event handler for the click event."
+              }
             ],
             "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.",
+          "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": "date", "value": { "type": "string" } },
-            { "name": "lang", "value": { "type": "string" } }
+            { "name": "required", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the radio group."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "date",
-                "description": "Gets the date of the relative time component."
+                "name": "value",
+                "description": "Getter for the value attribute."
               },
               {
-                "name": "objectDate",
-                "description": "Gets the object date of the relative time component."
+                "name": "required",
+                "description": "Getter for the name attribute."
               },
               {
-                "name": "className",
-                "description": "Sets the lang of the relative time component.",
-                "type": "string"
+                "name": "label",
+                "description": "Getter for the label attribute."
               },
-              { "name": "localizer" }
+              { "name": "className", "type": "string" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
             ],
             "events": []
           }
@@ -2833,121 +2885,69 @@
           }
         },
         {
-          "name": "wje-reorder-handle",
-          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
+          "name": "wje-reorder-dropzone",
+          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
           "doc-url": "",
-          "attributes": [
-            { "name": "dropzone", "value": { "type": "string" } },
-            { "name": "parent", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder handle."
+              "description": "The default slot for the reorder dropzone."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-rate",
-          "description": "This element represents a rating component.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the rating component.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **createIcons(i: _number_): _Element_** - Creates the icons for the rating component.\n- **changeRate()** - Changes the rate of the rating component.\n- **syncAria()** - Sync ARIA attributes on host.\n- **getIcons(index: _number_): _Element_** - Returns the icons for the rating component.\n- **getValueFromXPosition(coordinate: _number_): _number_** - Returns the value from the x position.\n- **roundToPrecision(numberToRound: _number_, precision: _number_): _number_** - Rounds a given number to the nearest specified precision.\n\n### **CSS Properties:**\n - **--wje-rate-gap** - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements. _(default: .25rem)_\n- **--wje-rate-color** - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables. _(default: var(--wje-color-contrast-11))_\n- **--wje-rate-selected-color** - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value. _(default: var(--wje-color-danger-9))_\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "is-hover", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            {
-              "name": "max",
-              "description": "The maximum value of the rating component.",
-              "value": { "type": "number" }
-            },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "readonly", "value": { "type": "string" } },
-            {
-              "name": "precision",
-              "description": "The precision of the rating component.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "icons",
-              "description": "The icons of the rating component.",
-              "value": { "type": "Array<string>" }
-            }
+              {
+                "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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "date", "value": { "type": "string" } },
+            { "name": "lang", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "precision",
-                "description": "Gets the precision of the rating component."
-              },
-              {
-                "name": "max",
-                "description": "Gets the maximum value of the rating component."
-              },
-              {
-                "name": "icons",
-                "description": "Gets the icons of the rating component."
+                "name": "date",
+                "description": "Gets the date of the relative time component."
               },
               {
-                "name": "value",
-                "description": "Gets the value of the rating component."
+                "name": "objectDate",
+                "description": "Gets the object date of the relative time component."
               },
               {
                 "name": "className",
-                "description": "Sets the hover value of the rating component.",
+                "description": "Sets the lang of the relative time component.",
                 "type": "string"
               },
-              {
-                "name": "onMouseEnter",
-                "description": "Event handler for the mouse enter event."
-              },
-              {
-                "name": "onMouseLeave",
-                "description": "Event handler for the mouse leave event."
-              },
-              {
-                "name": "onMouseMove",
-                "description": "Event handler for the mouse move event."
-              },
-              {
-                "name": "onTouchStart",
-                "description": "Event handler for the touch start event."
-              },
-              {
-                "name": "onTouchEnd",
-                "description": "Event handler for the touch end event."
-              },
-              {
-                "name": "onTouchMove",
-                "description": "Event handler for the touch move event."
-              },
-              {
-                "name": "onClick",
-                "description": "Event handler for the click event."
-              }
+              { "name": "localizer" }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-reorder-item",
-          "description": "This element represents a reorder item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder item.\n\n### **CSS Parts:**\n - **native-reorder-item** - The native part of the reorder item.\n- **handle-part** - The handle part of the reorder item when the handle slot is present.",
+          "name": "wje-reorder-handle",
+          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "dropzone", "value": { "type": "string" } },
+            { "name": "parent", "value": { "type": "string" } }
+          ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder item."
+              "description": "The default slot for the reorder handle."
             }
           ],
           "events": [],
@@ -2963,14 +2963,14 @@
           }
         },
         {
-          "name": "wje-reorder-dropzone",
-          "description": "This element represents a reorder dropzone.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder dropzone.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder dropzone.",
+          "name": "wje-reorder-item",
+          "description": "This element represents a reorder item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of observed attributes.\n\n### **Slots:**\n - _default_ - The default slot for the reorder item.\n\n### **CSS Parts:**\n - **native-reorder-item** - The native part of the reorder item.\n- **handle-part** - The handle part of the reorder item when the handle slot is present.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the reorder dropzone."
+              "description": "The default slot for the reorder item."
             }
           ],
           "events": [],
@@ -2996,23 +2996,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-router-link",
-          "description": "This element represents a router link in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the router link.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the router link.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the router link."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-router",
           "description": "This element represents a router in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw()** - Sets up the router after the component is drawn.\n- **parseElement(element: _Element_): _object_** - Parses an element and returns an object representation.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.",
@@ -3037,22 +3020,19 @@
           }
         },
         {
-          "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.",
+          "name": "wje-router-link",
+          "description": "This element represents a router link in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the router link.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the router link.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The default slot for the row." }
+            {
+              "name": "",
+              "description": "The default slot for the router link."
+            }
           ],
           "events": [],
           "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
+            "properties": [{ "name": "className", "type": "string" }],
             "events": []
           }
         },
@@ -3179,6 +3159,70 @@
             "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.",
@@ -3466,50 +3510,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-stepper",
           "description": "This element represents a stepper.\n---\n\n\n### **Events:**\n - **stepper:next**\n- **stepper:prev**\n- **stepper:finish**\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component for the stepper.\n- **afterDraw()** - Sets up the attributes for the component.\n- **navigate(direction: _number_)** - Navigates to a different step in a multi-step process based on the provided direction.\n- **goToStep(stepIndex: _number_): _void_** - Navigates to a specific step in a workflow or process.\nExecutes a set of operations before and after the step transition.\n- **setStepDefault(nav: _HTMLElement_, badge: _HTMLElement|null_, stepIndex: _number_)** - Resets a step to its default state by clearing its active and done attributes.\nUpdates the step's badge to show its index and removes any color styling.\n- **setStepActive(nav: _HTMLElement_, badge: _HTMLElement|null_, stepIndex: _number|null_)** - Sets a step as active by adding the `active` attribute and updating the step's badge.\n- **setContentActive(stepIndex: _number_)** - Activates the content of a specific step by displaying it and hiding all others.\n- **getStepElement(stepIndex: _number_): _HTMLElement_** - Returns the DOM element of a step by index.\n- **renderStepContent(stepIndex: _number_, content: _Node|string|Node[]_, options: _{ replace?: boolean }_)** - Appends or replaces content inside the step container.\n- **setStepDone(nav: _HTMLElement_, badge: _HTMLElement|null_)** - Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n\n### **Slots:**\n - _default_ - The default slot for the stepper.\n\n### **CSS Parts:**\n - **native** - The native part of the stepper.\n- **header** - The header part of the stepper.\n- **content** - The content part of the stepper.",
@@ -3565,52 +3565,72 @@
           }
         },
         {
-          "name": "wje-split-view",
-          "description": "This element represents a split view.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the split view.\n- **afterDraw()** - Sets up the event listeners after the component is drawn.\n- **detectSize()** - Detects the size of the split view.\n- **pixelsToPercentage(value: _number_): _number_** - Converts pixels to a percentage.\n\n### **Slots:**\n - **start** - Slot for the start view.\n- **end** - Slot for the end view.\n- **divider** - Slot for the divider.\n\n### **CSS Properties:**\n - **--wje-split-view-divider-area** - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`). _(default: 12px)_\n- **--wje-split-view-divider-width** - Specifies the visual width of the divider. Controls how thick the divider appears. _(default: 4px)_\n- **--wje-split-view-min** - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value. _(default: 0%)_\n- **--wje-split-view-max** - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value. _(default: 100%)_\n- **--wje-split-view-calc-a** - Represents the calculated size of the first view. This is used to dynamically set the size of the first view. _(default: 50%)_\n- **--wje-split-view-calc-b** - Represents the calculated size of the second view. This is used to dynamically set the size of the second view. _(default: 50%)_\n- **--wje-split-view-clamp-a** - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max)))_\n- **--wje-split-view-clamp-b** - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range. _(default: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max)))_\n- **--wje-split-view-divider-background** - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable). _(default: var(--wje-border-color))_\n- **--wje-split-view-divider-size** - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit. _(default: 4px)_\n\n### **CSS Parts:**\n - **wje-divider** - The divider of the split view.",
+          "name": "wje-tab",
+          "description": "This element represents a tab.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab.\n- **afterDraw()** - Sets up event listeners after the component is rendered.\n//\n- **syncAriaLabel()** - Sync aria-label on host based on slotted text when not provided.\n- **setRovingTabIndex(value: _number_)** - Sets the roving tabindex on the internal focusable anchor.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **CSS Properties:**\n - **--wje-tab-text-transform** - The text transformation for the tab (e.g., uppercase, lowercase). _(default: uppercase)_\n- **--wje-tab-font-weight** - The font weight of the tab text. _(default: 500)_\n- **--wje-tab-letter-spacing** - The letter spacing of the tab text. _(default: 0.06em)_\n- **--wje-tab-padding-inline** - The horizontal padding of the tab. _(default: 1rem)_\n- **--wje-tab-padding-top** - The top padding of the tab text. _(default: .75rem)_\n- **--wje-tab-padding-bottom** - The bottom padding of the tab text. _(default: .75rem)_\n- **--wje-tab-color-active** - The text color of the active tab. _(default: var(--wje-color-primary-11))_\n- **--wje-tab-color-hover** - The text color of the tab when hovered. //@fires wje-tab:change - Dispatched when the tab is changed. _(default: var(--wje-color-primary-1))_",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "panel",
+                "description": "Retrieves the value of the 'panel' attribute of the element."
+              },
+              {
+                "name": "route",
+                "description": "Retrieves the value of the 'route' attribute.\nIf the 'route' attribute is not set, it returns null."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              {
+                "name": "last",
+                "description": "Indicates whether this is the last tab.",
+                "type": "boolean"
+              },
+              { "name": "_hasPanel", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-row",
+          "description": "This element represents a row in a layout system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the row.\n\n### **Slots:**\n - _default_ - The default slot for the row.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "start", "description": "Slot for the start view." },
-            { "name": "end", "description": "Slot for the end view." },
-            { "name": "divider", "description": "Slot for the divider." }
+            { "name": "", "description": "The default slot for the row." }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "initial" },
-              { "name": "className", "type": "string" },
-              { "name": "handleDrag", "description": "Handles the drag event." }
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-tab",
-          "description": "This element represents a tab.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab.\n- **afterDraw()** - Sets up event listeners after the component is rendered.\n//\n- **syncAriaLabel()** - Sync aria-label on host based on slotted text when not provided.\n- **setRovingTabIndex(value: _number_)** - Sets the roving tabindex on the internal focusable anchor.\n- **beforeDisconnect()** - Cleans up before the component is disconnected.\n\n### **CSS Properties:**\n - **--wje-tab-text-transform** - The text transformation for the tab (e.g., uppercase, lowercase). _(default: uppercase)_\n- **--wje-tab-font-weight** - The font weight of the tab text. _(default: 500)_\n- **--wje-tab-letter-spacing** - The letter spacing of the tab text. _(default: 0.06em)_\n- **--wje-tab-padding-inline** - The horizontal padding of the tab. _(default: 1rem)_\n- **--wje-tab-padding-top** - The top padding of the tab text. _(default: .75rem)_\n- **--wje-tab-padding-bottom** - The bottom padding of the tab text. _(default: .75rem)_\n- **--wje-tab-color-active** - The text color of the active tab. _(default: var(--wje-color-primary-11))_\n- **--wje-tab-color-hover** - The text color of the tab when hovered. //@fires wje-tab:change - Dispatched when the tab is changed. _(default: var(--wje-color-primary-1))_",
+          "name": "wje-tab-panel",
+          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
           "doc-url": "",
           "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the tab panel." }
+          ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "panel",
-                "description": "Retrieves the value of the 'panel' attribute of the element."
-              },
-              {
-                "name": "route",
-                "description": "Retrieves the value of the 'route' attribute.\nIf the 'route' attribute is not set, it returns null."
-              },
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
-              },
-              {
-                "name": "last",
-                "description": "Indicates whether this is the last tab.",
-                "type": "boolean"
-              },
-              { "name": "_hasPanel", "type": "boolean" }
+              }
             ],
             "events": []
           }
@@ -3696,22 +3716,19 @@
           }
         },
         {
-          "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",
+          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            {
-              "name": "thumbnail-slot",
-              "description": "The slot for the thumbnail content."
-            }
+            { "name": "", "description": "Slot for the timeline items." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "The class name for the component",
+                "description": "The class name for the component.",
                 "type": "string"
               }
             ],
@@ -3719,19 +3736,22 @@
           }
         },
         {
-          "name": "wje-tab-panel",
-          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
+          "name": "wje-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": "", "description": "The default slot for the tab panel." }
+            {
+              "name": "thumbnail-slot",
+              "description": "The slot for the thumbnail content."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "The class name for the component.",
+                "description": "The class name for the component",
                 "type": "string"
               }
             ],
@@ -3739,28 +3759,39 @@
           }
         },
         {
-          "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-toggle",
+          "description": "This element represents a toggle input.\n---\n\n\n### **Methods:**\n - **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Removes the event listener when the checkbox is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the toggle.\n\n### **CSS Properties:**\n - **--wje-toggle-color-base** - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state. _(default: var(--wje-color-contrast-3))_\n- **--wje-toggle-width** - The overall width of the toggle switch. Determines how wide the toggle component appears. _(default: 30px)_\n- **--wje-toggle-height** - The overall height of the toggle switch. Specifies how tall the toggle component appears. _(default: 18px)_\n- **--wje-toggle-border-radius** - The border radius of the toggle. Controls how rounded the corners of the toggle are. _(default: 50px)_\n- **--wje-toggle-handle-width** - The width of the toggle handle (knob). Determines the size of the handle for user interaction. _(default: 14px)_\n- **--wje-toggle-handle-height** - The height of the toggle handle (knob). Specifies the vertical size of the handle. _(default: 14px)_\n- **--wje-toggle-handle-border-radius** - The border radius of the toggle handle. Controls how rounded the handle is. _(default: 9px)_\n- **--wje-toggle-handle-color** - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`. _(default: #fff)_\n- **--wje-toggle-handle-shadow** - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity. _(default: 1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2))_\n- **--wje-toggle-handle-shadow-checked** - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state. _(default: 1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3))_\n- **--wje-toggle-duration** - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes. _(default: 250ms)_\n- **--wje-toggle-curve** - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions. _(default: cubic-bezier(.4,0,.2,1))_\n\n### **CSS Parts:**\n - **native** - The native toggle wrapper.\n- **input** - The toggle input.\n- **toggle** - The toggle part.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "checked", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "required", "value": { "type": "string" } }
+          ],
           "slots": [
-            {
-              "name": "",
-              "description": "Slot for the content of the timeline item."
-            },
-            {
-              "name": "status",
-              "description": "Slot for the status of the timeline item."
-            }
+            { "name": "", "description": "The default slot for the toggle." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "className",
-                "description": "Returns the class name of the tab.",
-                "type": "string"
-              }
+                "name": "value",
+                "description": "Getter for the value attribute."
+              },
+              {
+                "name": "customErrorDisplay",
+                "description": "Getter for the customErrorDisplay attribute."
+              },
+              {
+                "name": "validateOnChange",
+                "description": "Getter for the validateOnChange attribute."
+              },
+              {
+                "name": "defaultValue",
+                "description": "Getter for the defaultValue attribute.\nThis method retrieves the 'value' attribute of the custom input element.\nThe 'value' attribute represents the default value of the input element.\nIf the 'value' attribute is not set, it returns an empty string."
+              },
+              { "name": "checked", "description": "Get checked attribute." },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
             ],
             "events": []
           }
@@ -3892,64 +3923,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-timeline",
-          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "Slot for the timeline items." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-toggle",
-          "description": "This element represents a toggle input.\n---\n\n\n### **Methods:**\n - **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect()** - Removes the event listener when the checkbox is disconnected.\n\n### **Slots:**\n - _default_ - The default slot for the toggle.\n\n### **CSS Properties:**\n - **--wje-toggle-color-base** - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state. _(default: var(--wje-color-contrast-3))_\n- **--wje-toggle-width** - The overall width of the toggle switch. Determines how wide the toggle component appears. _(default: 30px)_\n- **--wje-toggle-height** - The overall height of the toggle switch. Specifies how tall the toggle component appears. _(default: 18px)_\n- **--wje-toggle-border-radius** - The border radius of the toggle. Controls how rounded the corners of the toggle are. _(default: 50px)_\n- **--wje-toggle-handle-width** - The width of the toggle handle (knob). Determines the size of the handle for user interaction. _(default: 14px)_\n- **--wje-toggle-handle-height** - The height of the toggle handle (knob). Specifies the vertical size of the handle. _(default: 14px)_\n- **--wje-toggle-handle-border-radius** - The border radius of the toggle handle. Controls how rounded the handle is. _(default: 9px)_\n- **--wje-toggle-handle-color** - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`. _(default: #fff)_\n- **--wje-toggle-handle-shadow** - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity. _(default: 1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2))_\n- **--wje-toggle-handle-shadow-checked** - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state. _(default: 1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3))_\n- **--wje-toggle-duration** - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes. _(default: 250ms)_\n- **--wje-toggle-curve** - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions. _(default: cubic-bezier(.4,0,.2,1))_\n\n### **CSS Parts:**\n - **native** - The native toggle wrapper.\n- **input** - The toggle input.\n- **toggle** - The toggle part.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "checked", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "required", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot for the toggle." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "customErrorDisplay",
-                "description": "Getter for the customErrorDisplay attribute."
-              },
-              {
-                "name": "validateOnChange",
-                "description": "Getter for the validateOnChange attribute."
-              },
-              {
-                "name": "defaultValue",
-                "description": "Getter for the defaultValue attribute.\nThis method retrieves the 'value' attribute of the custom input element.\nThe 'value' attribute represents the default value of the input element.\nIf the 'value' attribute is not set, it returns an empty string."
-              },
-              { "name": "checked", "description": "Get checked attribute." },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
-            ],
-            "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.",
@@ -4022,44 +3995,28 @@
           }
         },
         {
-          "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.",
+          "name": "wje-timeline-item",
+          "description": "This element represents a timeline item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline item.\n\n### **Slots:**\n - _default_ - Slot for the content of the timeline item.\n- **status** - Slot for the status of the timeline item.\n\n### **CSS Parts:**\n - **native** - The native part of the timeline item.\n- **content-container** - The content container part of the timeline item.\n- **default-icon** - The default icon part of the timeline item.",
           "doc-url": "",
-          "attributes": [
-            { "name": "selected", "value": { "type": "string" } },
-            { "name": "indeterminate", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "Default slot for rendering the tree item's content (e.g., text or custom elements)."
+              "description": "Slot for the content of the timeline item."
+            },
+            {
+              "name": "status",
+              "description": "Slot for the status of the timeline item."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "expanded",
-                "description": "Retrieves the value of the 'expanded' state for the current element.\nThis getter checks whether the 'expanded' attribute is present on the element.\nIf the attribute exists, it returns true, representing that the element is expanded.\nOtherwise, it returns false, indicating that the element is not expanded."
-              },
-              {
-                "name": "selected",
-                "description": "Getter method for determining if the 'selected' attribute is present on the element."
-              },
-              {
-                "name": "selection",
-                "description": "Retrieves the current selection."
-              },
-              {
-                "name": "indeterminate",
-                "description": "Retrieves the state of the indeterminate attribute."
-              },
               {
                 "name": "className",
-                "description": "The class name for the component.",
+                "description": "Returns the class name of the tab.",
                 "type": "string"
-              },
-              { "name": "_selection", "type": "string" }
+              }
             ],
             "events": []
           }
@@ -4117,54 +4074,97 @@
           }
         },
         {
-          "name": "wje-visually-hidden",
-          "description": "This element represents a visually hidden element.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the visually hidden element.\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",
+          "name": "wje-tree",
+          "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **getExpandCollapseIcon(item: _HTMLElement_, status: _string_): _void_** - Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the visually hidden element."
+              "description": "The default slot to place `wje-tree-item` child components."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "selection",
+                "description": "Gets the current selection mode for the element.\nIf no selection is explicitly set, it defaults to 'single'."
+              },
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
+              },
+              {
+                "name": "handleClick",
+                "description": "Handles the click event triggered by the user interaction.\nIdentifies the closest tree item element to the event target and sets it\nas the selected item. Ensures that only one item is selected at a time, resetting\nthe selection state for all other items."
               }
             ],
             "events": []
           }
         },
         {
-          "name": "wje-tree",
-          "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **getExpandCollapseIcon(item: _HTMLElement_, status: _string_): _void_** - Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
+          "name": "wje-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.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            { "name": "selected", "value": { "type": "string" } },
+            { "name": "indeterminate", "value": { "type": "string" } }
+          ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot to place `wje-tree-item` child components."
+              "description": "Default slot for rendering the tree item's content (e.g., text or custom elements)."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "expanded",
+                "description": "Retrieves the value of the 'expanded' state for the current element.\nThis getter checks whether the 'expanded' attribute is present on the element.\nIf the attribute exists, it returns true, representing that the element is expanded.\nOtherwise, it returns false, indicating that the element is not expanded."
+              },
+              {
+                "name": "selected",
+                "description": "Getter method for determining if the 'selected' attribute is present on the element."
+              },
               {
                 "name": "selection",
-                "description": "Gets the current selection mode for the element.\nIf no selection is explicitly set, it defaults to 'single'."
+                "description": "Retrieves the current selection."
+              },
+              {
+                "name": "indeterminate",
+                "description": "Retrieves the state of the indeterminate attribute."
               },
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
               },
+              { "name": "_selection", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-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": "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": "className",
+                "description": "The class name for the component.",
+                "type": "string"
               }
             ],
             "events": []