wj-elements 0.7.6 → 0.7.7

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "wj-elements",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1038,51 +1038,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-dialog",
-          "description": "This element represents a dialog.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw(context: _object_, store: _object_, params: _object_)** - Draws the component after it has been drawn.\n- **htmlDialogBody(dialog)** - Creates the dialog body.\n- **close(e)** - Closes the dialog.\n- **beforeDisconnect()** - Before the component is disconnected.\n- **beforeOpen(dialog, trigger)** - Before the dialog opens.\n- **afterOpen(dialog, trigger)** - After the dialog opens.\n- **beforeClose(dialog, trigger)** - Before the dialog closes.\n- **afterClose(dialog, trigger)** - After the dialog closes.\n- **registerBlockingEvent(button: _HTMLElement_, promise: _Function_)** - Registers an event listener on the provided button that triggers a blocking UI element\nand executes a given promise when the button is clicked.\n\n### **Slots:**\n - **header** - Slot for the header content.\n- **body** - Slot for the body content.\n- **footer** - Slot for the footer content.\n\n### **CSS Properties:**\n - **--wje-dialog-background** - Specifies the background color of the dialog. _(default: var(--wje-background-color))_\n- **--wje-dialog-color** - Defines the text color within the dialog. _(default: var(--wje-text-color))_\n- **--wje-dialog-padding** - Controls the padding inside the dialog. _(default: 1rem)_\n- **--wje-dialog-border-radius** - Sets the border radius for the dialog's corners. _(default: 0.5rem)_\n- **--wje-dialog-box-shadow** - Applies a shadow effect to the dialog. _(default: 0 2px 10px rgba(0, 0, 0, 0.1))_\n\n### **CSS Parts:**\n - **dialog** - The dialog wrapper.\n- **header** - The header of the dialog.\n- **body** - The body of the dialog.\n- **footer** - The footer of the dialog.\n- **close** - The close button of the dialog.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "header", "description": "Slot for the header content." },
-            { "name": "body", "description": "Slot for the body content." },
-            { "name": "footer", "description": "Slot for the footer content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "headline",
-                "description": "Retrieves the value of the \"headline\" attribute from the element.\nIf the \"headline\" attribute is not present, returns an empty string."
-              },
-              {
-                "name": "placement",
-                "description": "Gets the headline of the dialog."
-              },
-              {
-                "name": "async",
-                "description": "Gets the headline of the dialog."
-              },
-              {
-                "name": "closeHidden",
-                "description": "Gets the headline of the dialog."
-              },
-              { "name": "hiddenHeader" },
-              { "name": "hiddenFooter" },
-              {
-                "name": "className",
-                "description": "Sets the headline of the dialog.",
-                "type": "string"
-              },
-              { "name": "onOpen", "description": "Opens the dialog." },
-              { "name": "onClose", "description": "Closes the dialog." },
-              { "name": "onNativeDialogClose" },
-              { "name": "syncHostOpenState" },
-              { "name": "_opening", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-copy-button",
           "description": "CopyButton is a custom web component that extends WJElement.\nIt provides a button that, when clicked, copies a specified text to the clipboard.\nThe text to be copied can be specified through the `value` attribute.\nThe CopyButton also supports keyboard interaction, copying the text when the space or enter key is pressed.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the CopyButton.\n- **draw(): _DocumentFragment_** - Draws the ColorPicker element.\n- **afterDraw()** - Adds event listeners for the click, focus, and blur events.\n- **syncAria()** - Sync ARIA attributes on host.\n- **copy(button: _HTMLElement_)** - Copies the specified text or node.\n- **copyTarget(content: _HTMLElement_): _Promise_** - Copies the target content.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--text-color** - Controls the color of the text. _(default: undefined)_\n- **--background-color** - Controls the background color of the button. //@fires wje:copy-button - Dispatched when the button is clicked and the text is copied. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - Styles the button element.",
@@ -1141,6 +1096,51 @@
             "events": []
           }
         },
+        {
+          "name": "wje-dialog",
+          "description": "This element represents a dialog.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw(context: _object_, store: _object_, params: _object_)** - Draws the component after it has been drawn.\n- **htmlDialogBody(dialog)** - Creates the dialog body.\n- **close(e)** - Closes the dialog.\n- **beforeDisconnect()** - Before the component is disconnected.\n- **beforeOpen(dialog, trigger)** - Before the dialog opens.\n- **afterOpen(dialog, trigger)** - After the dialog opens.\n- **beforeClose(dialog, trigger)** - Before the dialog closes.\n- **afterClose(dialog, trigger)** - After the dialog closes.\n- **registerBlockingEvent(button: _HTMLElement_, promise: _Function_)** - Registers an event listener on the provided button that triggers a blocking UI element\nand executes a given promise when the button is clicked.\n\n### **Slots:**\n - **header** - Slot for the header content.\n- **body** - Slot for the body content.\n- **footer** - Slot for the footer content.\n\n### **CSS Properties:**\n - **--wje-dialog-background** - Specifies the background color of the dialog. _(default: var(--wje-background-color))_\n- **--wje-dialog-color** - Defines the text color within the dialog. _(default: var(--wje-text-color))_\n- **--wje-dialog-padding** - Controls the padding inside the dialog. _(default: 1rem)_\n- **--wje-dialog-border-radius** - Sets the border radius for the dialog's corners. _(default: 0.5rem)_\n- **--wje-dialog-box-shadow** - Applies a shadow effect to the dialog. _(default: 0 2px 10px rgba(0, 0, 0, 0.1))_\n\n### **CSS Parts:**\n - **dialog** - The dialog wrapper.\n- **header** - The header of the dialog.\n- **body** - The body of the dialog.\n- **footer** - The footer of the dialog.\n- **close** - The close button of the dialog.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "header", "description": "Slot for the header content." },
+            { "name": "body", "description": "Slot for the body content." },
+            { "name": "footer", "description": "Slot for the footer content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "headline",
+                "description": "Retrieves the value of the \"headline\" attribute from the element.\nIf the \"headline\" attribute is not present, returns an empty string."
+              },
+              {
+                "name": "placement",
+                "description": "Gets the headline of the dialog."
+              },
+              {
+                "name": "async",
+                "description": "Gets the headline of the dialog."
+              },
+              {
+                "name": "closeHidden",
+                "description": "Gets the headline of the dialog."
+              },
+              { "name": "hiddenHeader" },
+              { "name": "hiddenFooter" },
+              {
+                "name": "className",
+                "description": "Sets the headline of the dialog.",
+                "type": "string"
+              },
+              { "name": "onOpen", "description": "Opens the dialog." },
+              { "name": "onClose", "description": "Closes the dialog." },
+              { "name": "onNativeDialogClose" },
+              { "name": "syncHostOpenState" },
+              { "name": "_opening", "type": "boolean" }
+            ],
+            "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)_",
@@ -1241,6 +1241,44 @@
             "events": []
           }
         },
+        {
+          "name": "wje-file-upload-item",
+          "description": "This element allows users to upload files.\n`FileUploadItem` is a custom web component that represents a file upload item.\nIt extends from `WJElement` and uses the `Localizer` utility for localization.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host and actions.\n\n### **Slots:**\n - **img** - Slot for the image\n- **action** - Slot for the action buttons\n\n### **CSS Properties:**\n - **--primary-color** - The primary color of the file upload item. //@fires wje-button:click - Dispatches when the delete button is clicked _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The delete button part\n- **image** - The image part\n- **name** - The name part\n- **size** - The size part",
+          "doc-url": "",
+          "attributes": [
+            { "name": "uploaded", "value": { "type": "string" } },
+            { "name": "is-uploaded", "value": { "type": "string" } }
+          ],
+          "slots": [
+            { "name": "img", "description": "Slot for the image" },
+            { "name": "action", "description": "Slot for the action buttons" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "isUploaded",
+                "description": "Checks if the 'is-uploaded' attribute is present on the element."
+              },
+              {
+                "name": "size",
+                "description": "Retrieves the value of the 'size' attribute."
+              },
+              {
+                "name": "dependencies",
+                "description": "Dependencies for the component.",
+                "type": "object"
+              },
+              { "name": "className", "type": "string" },
+              {
+                "name": "onDelete",
+                "description": "Handles the delete action."
+              },
+              { "name": "localizer" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-file-upload",
           "description": "FileUpload is a custom web component for uploading files.\nIt extends from WJElement and provides functionalities for file upload.\n---\n\n\n### **Events:**\n - **change** - Fires when the file input changes.\n- **drop** - Fires when a file is dropped into the component.\n\n### **Methods:**\n - **setupAttributes()** - Method to setup attributes for the component.\n- **draw(): _DocumentFragment_** - Method to draw the component on the screen.\n- **afterDraw()** - Method to perform actions after the component is drawn.\n- **handleSubmit(e: _Event_)** - Method to handle form submission.\n- **addFilesToQueue(files)** - Method to add files to the queue.\n- **uploadFiles()** - Method to upload files.\n- **createPreview(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a preview for the file.\n- **createThumbnail(file: _File_, reader: _FileReader_): _HTMLElement_** - Method to create a thumbnail for the file.\n- **assertFilesValid(file: _File_)** - Method to validate the files.\n- **resetFormState()** - Method to reset the form state.\n- **showError(error: _object|Error_)** - Shows a user-facing validation error inside the dropzone.\n- **clearError()** - Clears the currently displayed validation error.\n- **getErrorMessage(error: _object|Error_): _string_** - Resolves a readable upload error message.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--wje-file-upload-padding** - Controls the padding around the native file upload area. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native file upload part.\n- **file-list** - The file list part.\n- **upload-button** - The label part.",
@@ -1368,39 +1406,24 @@
           }
         },
         {
-          "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-form",
+          "description": "The Form class is a custom\nweb component that extends WJElement. It is a simple form that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Form.\n- **draw(): _DocumentFragment_** - Draws the Form.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
           "doc-url": "",
-          "attributes": [
-            { "name": "uploaded", "value": { "type": "string" } },
-            { "name": "is-uploaded", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "slots": [
-            { "name": "img", "description": "Slot for the image" },
-            { "name": "action", "description": "Slot for the action buttons" }
+            {
+              "name": "",
+              "description": "The slot for adding child elements or components."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "isUploaded",
-                "description": "Checks if the 'is-uploaded' attribute is present on the element."
-              },
-              {
-                "name": "size",
-                "description": "Retrieves the value of the 'size' attribute."
-              },
-              {
-                "name": "dependencies",
-                "description": "Dependencies for the component.",
-                "type": "object"
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "onDelete",
-                "description": "Handles the delete action."
-              },
-              { "name": "localizer" }
+                "name": "className",
+                "description": "The class name for the Form class.",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -1423,8 +1446,8 @@
           }
         },
         {
-          "name": "wje-form",
-          "description": "The Form class is a custom\nweb component that extends WJElement. It is a simple form that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Form.\n- **draw(): _DocumentFragment_** - Draws the Form.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
+          "name": "wje-grid",
+          "description": "The Grid class is a custom web component that extends WJElement. It is a simple grid that can hold other elements or components.\nIt provides a slot for adding child elements or components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the Grid.\n- **draw(): _DocumentFragment_** - Draws the Grid element.\n\n### **Slots:**\n - _default_ - The slot for adding child elements or components.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -1438,7 +1461,7 @@
             "properties": [
               {
                 "name": "className",
-                "description": "The class name for the Form class.",
+                "description": "The class name for the Grid class.",
                 "type": "string"
               }
             ],
@@ -1493,22 +1516,20 @@
           }
         },
         {
-          "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.",
+          "name": "wje-icon",
+          "description": "This element represents an icon. `IconElement` is a custom web component that represents an icon.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Properties:**\n - **--wje-icon-size** - The size of the icon element _(default: 1rem)_\n- **--wje-icon-width** - The width of the icon element _(default: var(--wje-icon-size, 100%))_\n- **--wje-icon-height** - The height of the icon element _(default: var(--wje-icon-size, 100%))_\n\n### **CSS Parts:**\n - **svg** - The SVG part of the icon",
           "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The slot for adding child elements or components."
-            }
+          "attributes": [
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "filled", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "The class name for the Grid class.",
+                "description": "Sets the name of the icon.",
                 "type": "string"
               }
             ],
@@ -1532,27 +1553,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-icon",
-          "description": "This element represents an icon. `IconElement` is a custom web component that represents an icon.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(context: _object_, store: _object_, params: _object_): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Properties:**\n - **--wje-icon-size** - The size of the icon element _(default: 1rem)_\n- **--wje-icon-width** - The width of the icon element _(default: var(--wje-icon-size, 100%))_\n- **--wje-icon-height** - The height of the icon element _(default: var(--wje-icon-size, 100%))_\n\n### **CSS Parts:**\n - **svg** - The SVG part of the icon",
-          "doc-url": "",
-          "attributes": [
-            { "name": "name", "value": { "type": "string" } },
-            { "name": "filled", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "Sets the name of the icon.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-icon-picker",
           "description": "This element allows users to pick an icon from a set of available options.\n`IconPicker` is a custom web component that represents an interactive icon picker. It features\nsearch functionality, infinite scrolling, and popup-based selection. The component is highly customizable\nand integrates seamlessly with other `WJElement` components.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(): _Promise<void>_** - Prepares data before the draw operation by fetching tags, transforming objects, and creating an index.\n- **draw(): _DocumentFragment_** - Draws and initializes the native color picker component on the DOM.\nThis method creates and appends the necessary elements, including input and infinite scroll components,\nand sets their attributes and event listeners. It also provides custom data handling for infinite scrolling\nand manages the way icons are displayed based on input.\n- **afterDraw(): _void_** - Executes actions that occur after the component finishes its draw phase. Sets up event listeners for input clear\nand infinite scroll item clicks, resets initialization state, and rebinds scroll-related events.\n- **syncAria()** - Sync ARIA attributes on host.\n- **initial()** - Initializes the component.\n- **getTags(): _Promise<Array>_** - Gets the tags.\n- **beforeDisconnect()** - Called when the component is disconnected.\n- **clearIconsContainer()** - Clears the icons container.\n- **debounce(fn: _Function_, delay: _number_): _Function_** - Creates a debounced version of the provided function that delays its execution\nuntil after the specified delay has passed since the last time it was invoked.\n\n### **CSS Properties:**\n - **--wje-color-picker-value** - The default color value. _(default: #ff0000)_\n- **--wje-color-picker-area** - The background color of the color picker area. _(default: transparent)_\n- **--wje-color-picker-swatch** - The background color of the swatch picker. _(default: transparent)_\n- **--wje-color-picker-size** - The size of the icons in the picker. _(default: 1rem)_\n- **--wje-color-picker-radius** - The border radius of the picker. _(default: 4px)_\n\n### **CSS Parts:**\n - **native** - The native part of the component.\n- **anchor** - The part representing the anchor button displaying the selected icon.\n- **picker** - The picker part containing the search and icon selection interface.\n- **input** - The input part for searching icons.",
@@ -1639,7 +1639,7 @@
               },
               {
                 "name": "loader",
-                "description": "The URL of the image loader to display while the image is loading.",
+                "description": "The URL of the image loader to display while the image is loading. Defaults to the loader asset resolved from the configured base path.",
                 "type": "string"
               },
               {
@@ -1831,6 +1831,28 @@
             "events": []
           }
         },
+        {
+          "name": "wje-input-file",
+          "description": "This element represents a file input.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component.\n- **afterDraw()** - After draw method for the InputFile class.\n\n### **CSS Parts:**\n - **native** - The native file input wrapper.\n- **input** - The text input.\n- **file-input** - The file input element. // @fires wje-input-file:change - Event fired when the file input changes.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Gets the value of the input file."
+              },
+              {
+                "name": "className",
+                "description": "The class name for the InputFile class.",
+                "type": "string"
+              },
+              { "name": "_value", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-item",
           "description": "This element represents an item.\n---\n\n\n### **Methods:**\n - **isClickable(): _boolean_** - Returns the CSS styles for the component.\n- **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the item.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **start** - The start slot\n- **end** - The end slot\n- **error** - The error slot\n- **helper** - The helper slot\n\n### **CSS Properties:**\n - **--wje-item-background** - Sets the background color of the item. Accepts any valid CSS color value. _(default: var(--wje-background))_\n- **--wje-item-color** - Defines the text color for the item. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-item-padding-start** - Specifies the left padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-padding-end** - Specifies the right padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-padding-top** - Specifies the top padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-padding-bottom** - Specifies the bottom padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-start** - Specifies the left inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-end** - Specifies the right inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-top** - Specifies the top inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-inner-padding-bottom** - Specifies the bottom inner padding of the item. Accepts any valid CSS length. _(default: var(--wje-padding))_\n- **--wje-item-border-radius** - Defines the border radius, providing rounded corners for the item. _(default: var(--wje-border-radius))_\n- **--wje-item-border-width** - Sets the border width of the item. Accepts any valid CSS length. _(default: var(--wje-border-width))_\n- **--wje-item-border-style** - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`. _(default: var(--wje-border-style))_\n- **--wje-item-border-color** - Defines the color of the item's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-item-min-height** - Sets the minimum height of the item to ensure consistent layout. _(default: var(--wje-min-height))_\n- **--wje-item-transition** - Specifies the transition effects for the item, such as for hover or focus states. _(default: var(--wje-transition))_\n- **--wje-item-inner-box-shadow** - Adds a shadow effect inside the item for a 3D appearance. _(default: var(--wje-box-shadow))_\n\n### **CSS Parts:**\n - **native** - The native part\n- **inner** - The inner part",
@@ -1870,71 +1892,35 @@
           }
         },
         {
-          "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-kanban",
+          "description": "This element represents a Kanban board.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(context: _object_, store: _object_, params: _object_)** - Prepares the component before drawing.\n- **draw(): _DocumentFragment_** - Draws the component after it has been prepared.\n- **syncAria()** - Sync ARIA attributes on host.\n- **afterDraw()** - Called after the component has been drawn.\n- **setupDragAndDropEvents()** - Sets up the drag and drop events for the component.\n- **setupSelectAllCardsEvent()** - Sets up the select all cards event for the component.\n- **setupMenuItemClickEvents()** - Sets up the menu item click events for the component.\n- **updateSelectedCards(pool: _HTMLElement_, isChecked: _boolean_)** - Updates the selected cards in the pool.\n- **handlePoolAction(action: _string_, pool: _HTMLElement_)** - Handles the pool action.\n- **movePool(pool: _HTMLElement_, direction: _string_)** - Moves the pool in the specified direction.\n- **renamePool(pool: _HTMLElement_)** - Renames the pool.\n- **getCardPlaceholder(): _null|*_** - Gets the card placeholder.\n- **live(eventType: _string_, selector: _string_, callback: _function_)** - Adds a live event listener to the component.\n- **setSelectedCards(isChecked: _boolean_, card: _HTMLElement_)** - Sets the selected cards.\n- **setSelectedItems()** - Sets the selected items.\n- **getPages(page): _Promise<any>_** - Fetches the pages.\n\n### **Slots:**\n - _default_ - The default slot for the Kanban board.\n\n### **CSS Parts:**\n - **native-infinite-scroll** - Styles the native part of the Kanban board.",
           "doc-url": "",
           "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the Kanban board."
+            }
+          ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "Gets the value of the input file."
+                "name": "dependencies",
+                "description": "Dependencies of the Option component.",
+                "type": "object"
+              },
+              {
+                "name": "response",
+                "description": "Gets the URL for fetching data."
+              },
+              {
+                "name": "selectedItems",
+                "description": "Gets the URL for fetching data."
               },
               {
                 "name": "className",
-                "description": "The class name for the InputFile class.",
-                "type": "string"
-              },
-              { "name": "_value", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-label",
-          "description": "This element represents a label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`). _(default: black)_\n- **--wje-label-font-size** - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs. // @fires wje-label:change - Event fired when the label is changed. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the label." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-kanban",
-          "description": "This element represents a Kanban board.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **beforeDraw(context: _object_, store: _object_, params: _object_)** - Prepares the component before drawing.\n- **draw(): _DocumentFragment_** - Draws the component after it has been prepared.\n- **syncAria()** - Sync ARIA attributes on host.\n- **afterDraw()** - Called after the component has been drawn.\n- **setupDragAndDropEvents()** - Sets up the drag and drop events for the component.\n- **setupSelectAllCardsEvent()** - Sets up the select all cards event for the component.\n- **setupMenuItemClickEvents()** - Sets up the menu item click events for the component.\n- **updateSelectedCards(pool: _HTMLElement_, isChecked: _boolean_)** - Updates the selected cards in the pool.\n- **handlePoolAction(action: _string_, pool: _HTMLElement_)** - Handles the pool action.\n- **movePool(pool: _HTMLElement_, direction: _string_)** - Moves the pool in the specified direction.\n- **renamePool(pool: _HTMLElement_)** - Renames the pool.\n- **getCardPlaceholder(): _null|*_** - Gets the card placeholder.\n- **live(eventType: _string_, selector: _string_, callback: _function_)** - Adds a live event listener to the component.\n- **setSelectedCards(isChecked: _boolean_, card: _HTMLElement_)** - Sets the selected cards.\n- **setSelectedItems()** - Sets the selected items.\n- **getPages(page): _Promise<any>_** - Fetches the pages.\n\n### **Slots:**\n - _default_ - The default slot for the Kanban board.\n\n### **CSS Parts:**\n - **native-infinite-scroll** - Styles the native part of the Kanban board.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the Kanban board."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "dependencies",
-                "description": "Dependencies of the Option component.",
-                "type": "object"
-              },
-              {
-                "name": "response",
-                "description": "Gets the URL for fetching data."
-              },
-              {
-                "name": "selectedItems",
-                "description": "Gets the URL for fetching data."
-              },
-              {
-                "name": "className",
-                "description": "Sets the URL for fetching data.",
+                "description": "Sets the URL for fetching data.",
                 "type": "string"
               },
               {
@@ -1968,12 +1954,12 @@
           }
         },
         {
-          "name": "wje-list",
-          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of attributes to observe for changes.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. Accepts any valid CSS length. _(default: 8px)_\n- **--wje-list-background** - The background of the list. Accepts any valid CSS color value. _(default: var(--wje-background))_",
+          "name": "wje-label",
+          "description": "This element represents a label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component.\n\n### **Slots:**\n - _default_ - The default slot for the label.\n\n### **CSS Properties:**\n - **--wje-label-color** - Defines the text color of the label. This property determines the color of the label's text. Accepts any valid CSS color value (e.g., named colors like `black`, `red`, or values like `#000000`, `rgb(0, 0, 0)`). _(default: black)_\n- **--wje-label-font-size** - Specifies the font size of the label. This property sets the size of the label's text. Accepts any valid CSS length unit (e.g., `px`, `em`, `rem`). The default value is `16px`, which provides optimal readability in most designs. // @fires wje-label:change - Event fired when the label is changed. _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The label part of the component.",
           "doc-url": "",
           "attributes": [],
           "slots": [
-            { "name": "", "description": "The default slot for the list." }
+            { "name": "", "description": "The default slot for the label." }
           ],
           "events": [],
           "js": {
@@ -2013,6 +1999,20 @@
             "events": []
           }
         },
+        {
+          "name": "wje-list",
+          "description": "This element represents a list.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Returns the list of attributes to observe for changes.\n- **afterDraw()** - Called after the component has been drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - The default slot for the list.\n\n### **CSS Properties:**\n - **--wje-list-inset-padding** - The padding of the list when it is inset. _(default: 1rem)_\n- **--wje-list-border-radius** - The border radius of the list. Accepts any valid CSS length. _(default: 8px)_\n- **--wje-list-background** - The background of the list. Accepts any valid CSS color value. _(default: var(--wje-background))_",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the list." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-main",
           "description": "This element represents a main section.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the main section.\n\n### **Slots:**\n - _default_ - The default slot for the main section.",
@@ -2101,42 +2101,92 @@
           }
         },
         {
-          "name": "wje-menu-button",
-          "description": "This element represents a menu button.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu button.\n- **afterDraw()** - Refreshes the component after drawing. Adds a click event listener that toggles the \"open\" class on the content element.\n\n### **Slots:**\n - _default_ - The default slot for the menu button. // @fires click - Event fired when the menu button is clicked.",
+          "name": "wje-menu-label",
+          "description": "This element represents a menu label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu label.\n\n### **Slots:**\n - _default_ - The default slot for the menu label.\n\n### **CSS Properties:**\n - **--wje-menu-label-font-size** - Sets the font size of the menu label. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`). _(default: .75rem)_\n- **--wje-menu-label-weight** - Specifies the font weight of the menu label. Accepts values such as `normal`, `bold`, or numeric values (e.g., `400`, `600`). _(default: 600)_\n- **--wje-letter-spacing** - Defines the spacing between letters in the menu label. Accepts any valid CSS length unit. Default value ensures slight spacing for improved readability. _(default: .025rem)_\n- **--wje-menu-label-color** - Specifies the text color of the menu label. Accepts any valid CSS color value, including variables and named colors. _(default: var(--wje-color-contrast-6))_\n- **--wje-padding-top** - Sets the top padding of the menu label. Accepts any valid CSS length value to control spacing above the label. _(default: 0)_\n- **--wje-padding-bottom** - Sets the bottom padding of the menu label. Accepts any valid CSS length value to control spacing below the label. _(default: 0)_\n- **--wje-padding-start** - Specifies the left padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the right padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n- **--wje-padding-end** - Specifies the right padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the left padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu label.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
               "name": "",
-              "description": "The default slot for the menu button. // @fires click - Event fired when the menu button is clicked."
+              "description": "The default slot for the menu label."
             }
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "className", "type": "string" }],
+            "properties": [
+              { "name": "className", "type": "string" },
+              { "name": "hasSubmenu" }
+            ],
             "events": []
           }
         },
         {
-          "name": "wje-menu-label",
-          "description": "This element represents a menu label.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu label.\n\n### **Slots:**\n - _default_ - The default slot for the menu label.\n\n### **CSS Properties:**\n - **--wje-menu-label-font-size** - Sets the font size of the menu label. Accepts any valid CSS length unit (e.g., `rem`, `px`, `em`). _(default: .75rem)_\n- **--wje-menu-label-weight** - Specifies the font weight of the menu label. Accepts values such as `normal`, `bold`, or numeric values (e.g., `400`, `600`). _(default: 600)_\n- **--wje-letter-spacing** - Defines the spacing between letters in the menu label. Accepts any valid CSS length unit. Default value ensures slight spacing for improved readability. _(default: .025rem)_\n- **--wje-menu-label-color** - Specifies the text color of the menu label. Accepts any valid CSS color value, including variables and named colors. _(default: var(--wje-color-contrast-6))_\n- **--wje-padding-top** - Sets the top padding of the menu label. Accepts any valid CSS length value to control spacing above the label. _(default: 0)_\n- **--wje-padding-bottom** - Sets the bottom padding of the menu label. Accepts any valid CSS length value to control spacing below the label. _(default: 0)_\n- **--wje-padding-start** - Specifies the left padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the right padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n- **--wje-padding-end** - Specifies the right padding of the menu label in left-to-right (LTR) layouts. In right-to-left (RTL) layouts, this becomes the left padding. Accepts any valid CSS length value. _(default: 1.5rem)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu label.",
+          "name": "wje-option",
+          "description": "This element represents an option.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the option.\n- **afterDraw(): _void_** - Method executed after the drawing process is completed.\nSets up an event listener for 'click' events, linking them to the specified callback function.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect(): _void_** - Handles operations or cleanup tasks that need to occur before disconnecting.\nRemoves an event listener associated with the 'click' event and a specified callback function.\n- **optionClickCallback(e: _Event_): _void_** - Handles the click event on an option element and dispatches a custom event when triggered.\n\n### **Slots:**\n - **start** - The slot for the start of the option.\n- _default_ - The default slot for the option.\n- **end** - The slot for the end of the option. // @fires wje-option:change - Event fired when the option is clicked.\n\n### **CSS Parts:**\n - **native** - The native part of the option.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [{ "name": "selected", "value": { "type": "string" } }],
           "slots": [
             {
-              "name": "",
-              "description": "The default slot for the menu label."
+              "name": "start",
+              "description": "The slot for the start of the option."
+            },
+            { "name": "", "description": "The default slot for the option." },
+            {
+              "name": "end",
+              "description": "The slot for the end of the option. // @fires wje-option:change - Event fired when the option is clicked."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "className", "type": "string" },
-              { "name": "hasSubmenu" }
+              {
+                "name": "dependencies",
+                "description": "Dependencies of the Option component.",
+                "type": "object"
+              },
+              {
+                "name": "selected",
+                "description": "Retrieves the 'selected' attribute status of the element."
+              },
+              {
+                "name": "checkbox",
+                "description": "Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute."
+              },
+              {
+                "name": "multiple",
+                "description": "Determines whether the closest 'wje-select' element has the 'multiple' attribute."
+              },
+              { "name": "ownerSelect" },
+              {
+                "name": "value",
+                "description": "Sets the value attribute of the option."
+              },
+              {
+                "name": "text",
+                "description": "Sets the text content of the option."
+              },
+              { "name": "className", "type": "string" }
             ],
             "events": []
           }
         },
+        {
+          "name": "wje-menu-button",
+          "description": "This element represents a menu button.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the menu button.\n- **afterDraw()** - Refreshes the component after drawing. Adds a click event listener that toggles the \"open\" class on the content element.\n\n### **Slots:**\n - _default_ - The default slot for the menu button. // @fires click - Event fired when the menu button is clicked.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the menu button. // @fires click - Event fired when the menu button is clicked."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
+          }
+        },
         {
           "name": "wje-menu-item",
           "description": "This element represents a menu item.\n---\n\n\n### **Events:**\n \n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the MenuItem element.\n- **beforeDraw()** - Removes the active attribute from the menu before drawing the MenuItem.\n- **draw(): _DocumentFragment_** - Draws the MenuItem element and sets the variant and collapse attributes.\n- **afterDraw()** - Adds event listeners after drawing the MenuItem.\n- **syncAria()** - Syncs ARIA attributes based on menu item state.\n- **collapseItem(native: _HTMLElement_): _HTMLElement_** - Creates a tooltip for the MenuItem when it is collapsed.\n- **showSubmenu()** - Shows the submenu of the MenuItem.\n- **hideSubmenu()** - Hides the submenu of the MenuItem.\n- **submenuToggle(e: _Event_)** - Toggles the active state of the submenu element.\nIf the submenu is not active, it sets the \"active\" attribute.\nIf the submenu is already active, it removes the \"active\" attribute.\n- **deactivateSubmenu()** - Deactivates the submenu by removing the \"active\" attribute.\n- **activateSubmenu()** - Activates the submenu of the menu item.\n- **beforeDisconnect()** - Gets the text from the element and returns it.\n- **getTextFromElement(element: _HTMLElement_): _string_** - Extracts and returns the concatenated text content from all text nodes within the specified element.\n\n### **Slots:**\n - _default_ - The default slot for the menu item.\n- **start** - The slot for the start of the menu item.\n- **end** - The slot for the end of the menu item.\n- **submenu** - The slot for the submenu of the menu item.\n\n### **CSS Properties:**\n - **--wje-menu-item-color** - Sets the text color of a menu item. Accepts any valid CSS color value. _(default: var(--wje-color))_\n- **--wje-menu-item-background** - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value. _(default: transparent)_\n- **--wje-menu-item-color-hover** - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-hover** - Sets the background color of a menu item when hovered. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-item-color-focus** - Defines the text color of a menu item when focused. Accepts any valid CSS color value. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-focus** - Specifies the background color of a menu item when focused. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-item-color-active** - Sets the text color of a menu item when active. Accepts any valid CSS color value. _(default: var(--wje-color-contrast-8))_\n- **--wje-menu-item-background-active** - Specifies the background color of a menu item when active. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-menu-item-padding-top** - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`). _(default: .5rem)_\n- **--wje-menu-item-padding-bottom** - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`). _(default: .5rem)_\n- **--wje-menu-item-line-height** - Sets the line height for the text within a menu item. Accepts any valid CSS length value. _(default: 1.8rem)_\n- **--wje-menu-submenu-offset** - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-menu-item-icon-visibility** - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`. _(default: hidden)_\n- **--wje-menu-item-safe-triangle-cursor-x** - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-cursor-y** - Specifies the y-coordinate of the cursor for the safe triangle area. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-start-x** - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-start-y** - Defines the y-coordinate where the submenu's safe triangle starts. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-end-x** - Specifies the x-coordinate where the submenu's safe triangle ends. _(default: undefined)_\n- **--wje-menu-item-safe-triangle-submenu-end-y** - Specifies the y-coordinate where the submenu's safe triangle ends. _(default: undefined)_\n\n### **CSS Parts:**\n - **native** - The native part of the menu item.\n- **submenu** - The submenu part of the menu item.",
@@ -2213,51 +2263,28 @@
           }
         },
         {
-          "name": "wje-option",
-          "description": "This element represents an option.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the option.\n- **afterDraw(): _void_** - Method executed after the drawing process is completed.\nSets up an event listener for 'click' events, linking them to the specified callback function.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **beforeDisconnect(): _void_** - Handles operations or cleanup tasks that need to occur before disconnecting.\nRemoves an event listener associated with the 'click' event and a specified callback function.\n- **optionClickCallback(e: _Event_): _void_** - Handles the click event on an option element and dispatches a custom event when triggered.\n\n### **Slots:**\n - **start** - The slot for the start of the option.\n- _default_ - The default slot for the option.\n- **end** - The slot for the end of the option. // @fires wje-option:change - Event fired when the option is clicked.\n\n### **CSS Parts:**\n - **native** - The native part of the option.",
+          "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": "selected", "value": { "type": "string" } }],
-          "slots": [
-            {
-              "name": "start",
-              "description": "The slot for the start of the option."
-            },
-            { "name": "", "description": "The default slot for the option." },
+          "attributes": [
             {
-              "name": "end",
-              "description": "The slot for the end of the option. // @fires wje-option:change - Event fired when the option is clicked."
+              "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": "dependencies",
-                "description": "Dependencies of the Option component.",
-                "type": "object"
-              },
-              {
-                "name": "selected",
-                "description": "Retrieves the 'selected' attribute status of the element."
-              },
-              {
-                "name": "checkbox",
-                "description": "Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute."
-              },
-              {
-                "name": "multiple",
-                "description": "Determines whether the closest 'wje-select' element has the 'multiple' attribute."
-              },
-              { "name": "ownerSelect" },
-              {
-                "name": "value",
-                "description": "Sets the value attribute of the option."
+                "name": "flat",
+                "description": "Gets whether the chart omits its incoming connector spacing."
               },
+              { "name": "className", "type": "string" },
               {
-                "name": "text",
-                "description": "Sets the text content of the option."
-              },
-              { "name": "className", "type": "string" }
+                "name": "syncFlatChildren",
+                "description": "Marks direct children that are rendered inside a flat chart."
+              }
             ],
             "events": []
           }
@@ -2360,33 +2387,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-orgchart",
-          "description": "Orgchart is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart.\n- **afterDraw()** - Syncs flat chart state to direct slotted children.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "flat",
-              "description": "Removes the incoming connector spacing for nested charts that should visually continue on the same level.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "flat",
-                "description": "Gets whether the chart omits its incoming connector spacing."
-              },
-              { "name": "className", "type": "string" },
-              {
-                "name": "syncFlatChildren",
-                "description": "Marks direct children that are rendered inside a flat chart."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-orgchart-item",
           "description": "OrgchartItem is a custom web component that extends WJElement.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the org chart item.\n- **afterDraw()** - After Draws the component for the org chart item.\n\n### **Slots:**\n - _default_ - The default slot for the orgchart item.\n- **child** - The child slot for the orgchart item.\n\n### **CSS Parts:**\n - **** - Styles the element.\n- **native** - Styles the native element.\n- **expander** - Styles the expander element. // @fires wje-orgchart-item:click - Emitted when the item card is clicked.",
@@ -2434,6 +2434,23 @@
             "events": []
           }
         },
+        {
+          "name": "wje-panel",
+          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the panel.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot for the panel." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "className", "type": "string" },
+              { "name": "last", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-pagination",
           "description": "This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Creates a document fragment, appends a new slot element to it, and returns the fragment.\n- **htmlPagination(): _DocumentFragment_** - Creates a pagination control for navigating between pages of content.\nThis method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n- **htmlStackButtons(paginateObj: _@param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * _): _DocumentFragment_** - Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\nbased on the provided pagination object.\n\n### **CSS Properties:**\n - **--wje-pagination-gap** - Gap between the summary and page navigation. _(default: 1rem)_\n- **--wje-pagination-summary-gap** - Gap between summary items. _(default: 1rem)_\n- **--wje-pagination-page-size-gap** - Gap between the page-size label and selector. _(default: var(--wje-spacing-small))_\n- **--wje-pagination-mobile-gap** - Gap between pagination rows below the md container width. _(default: var(--wje-spacing-x-large))_\n- **--wje-pagination-page-size-width** - Width of the page-size selector. _(default: 68px)_\n- **--wje-pagination-page-button-width** - Width of pagination buttons. _(default: 32px)_\n- **--wje-pagination-page-button-gap** - Gap between pagination buttons. _(default: 0.5rem)_\n\n### **CSS Parts:**\n - **native** - The wrapper element for the pagination component.\n- **summary** - The wrapper for the page-size selector and item range.\n- **page-size** - The wrapper for the page-size label and selector.\n- **page-size-label** - The page-size selector label.\n- **page-size-select** - The page-size selector.\n- **info** - The item range information.\n- **pages** - The page navigation wrapper.\n- **page-button** - Any pagination button.\n- **page-number** - A numbered page button.\n- **current-page** - The current page button.\n- **first-button** - The button that navigates to the first page.\n- **previous-button** - The button that navigates to the previous page.\n- **next-button** - The button that navigates to the next page.\n- **last-button** - The button that navigates to the last page.\n- **dots** - The page range ellipsis.",
@@ -2504,23 +2521,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-panel",
-          "description": "This element represents a panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the panel.\n- **afterDraw()** - Adds event listeners after the component is drawn.\nHandles the collapsing of breadcrumbs.\n- **getBreadcrumbs(): _Array<Element>_** - Returns all the breadcrumb elements in the panel.\n\n### **Slots:**\n - _default_ - The default slot for the panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "className", "type": "string" },
-              { "name": "last", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-popup",
           "description": "This element represents a popup.\n---\n\n\n### **Events:**\n - **wje-portal:restored**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the popup.\n- **afterDraw()** - After Draws the component.\n- **setAnchor()** - Sets the anchor for the popup.\nAdds a click event listener to the anchor element.\n- **showHide()** - Toggles the active attribute of the popup.\n- **reposition()** - Repositions the popup.\nUses the floating-ui library to compute the position.\n- **_mountContentToPortal(): _void_** - Mounts content to a portal container by creating or ensuring a portal root and mirroring\nthe host's classes, attributes, and slot contents onto the portal. This method manages the\nmovement of default and arrow slot content into the portal shadow DOM, while also setting\nup necessary mutation observers to keep attributes in sync.\n- **_restoreContentFromPortal(): _void_** - Restores the content previously moved to a portal back to its original location.\nThis method handles restoring default slot content, arrow placeholders, disconnecting\nattribute mirroring observers, and cleaning up elements and containers related to the portal.\nEnsures all placeholders and native portal elements are properly removed from the DOM.\n- **_ensurePortalRoot(): _void_** - Ensures that a portal root is created and initialized properly with a shadow DOM and attached styles.\nIf the portal root already exists, the method exits early.\nThe method creates a `div` element in the document body and attaches a shadow DOM to it.\nIt also applies the required styles to the shadow DOM, either using constructable stylesheets\nor by appending a `<style>` element. Additionally, it copies CSS custom properties from the\ncomponent's computed styles to the portal host to ensure proper style resolution.\n- **show(dispatchEvent: _boolean_): _void_** - Displays the popup by portaling the content, managing the loader state, and attaching event handlers.\nOptionally dispatches a custom event when the popup is shown.\n- **hide(dispatchEvent)** - Hides the popup.\nRemoves the popup-active class from the floating element.\nCleans up the auto update for repositioning.\n\n### **Slots:**\n - **anchor** - The slot for the anchor of the popup.\n- **arrow** - The slot for the arrow of the popup.\n- _default_ - The default slot for the popup.\n\n### **CSS Properties:**\n - **--wje-popup-backdrop-background** - Backdrop background used by mobile bottom sheet popups. _(default: var(--wje-backdrop))_\n- **--wje-popup-backdrop-opacity** - Backdrop opacity used by mobile bottom sheet popups. _(default: 1)_\n- **--wje-popup-mobile-background** - Background of the mobile bottom sheet panel. _(default: var(--wje-select-options-background-color))_\n- **--wje-popup-mobile-border-radius** - Border radius of the mobile bottom sheet panel. _(default: var(--wje-border-radius-large) var(--wje-border-radius-large) 0 0)_\n- **--wje-popup-mobile-box-shadow** - Shadow of the mobile bottom sheet panel. _(default: 0 -8px 32px rgba(0, 0, 0, 0.16))_\n- **--wje-popup-mobile-max-height** - Maximum height of the mobile bottom sheet panel. _(default: 90vh)_\n- **--wje-popup-mobile-transition-duration** - Transition duration for the mobile bottom sheet and backdrop. _(default: 250ms)_\n- **--wje-popup-mobile-transition-easing** - Transition easing for the mobile bottom sheet and backdrop. _(default: ease)_\n- **--wje-popup-loader-inset** - Inset used by the popup loader overlay. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native part of the popup.\n- **backdrop** - The backdrop used by mobile bottom sheet presentation.",
@@ -2641,45 +2641,6 @@
             "events": []
           }
         },
-        {
-          "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": "required", "value": { "type": "string" } },
-            { "name": "value", "value": { "type": "string" } },
-            { "name": "disabled", "value": { "type": "string" } },
-            { "name": "invalid", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the radio group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "Getter for the value attribute."
-              },
-              {
-                "name": "required",
-                "description": "Getter for the name attribute."
-              },
-              {
-                "name": "label",
-                "description": "Getter for the label attribute."
-              },
-              { "name": "className", "type": "string" },
-              { "name": "invalid", "type": "boolean" },
-              { "name": "pristine", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-qr-code",
           "description": "This element represents a QR code generator.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the QR code component.\n- **afterDraw()** - Called after the component is drawn to generate the QR code.\n- **getAttributeFromAliases(aliases: _string[]_): _string|null_** - Returns first defined attribute value from alias list.\n- **setAliasedAttribute(optionName: _string_, value: _string|number|null|undefined_)** - Writes value to the canonical attribute and clears alternate aliases.\n\n### **Slots:**\n - **top** - The slot for the top content of the QR code.\n- **bottom** - The slot for the bottom content of the QR code.\n\n### **CSS Parts:**\n - **native** - The native part of the QR code.",
@@ -2787,6 +2748,75 @@
             "events": []
           }
         },
+        {
+          "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": "required", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } },
+            { "name": "invalid", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the radio group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Getter for the value attribute."
+              },
+              {
+                "name": "required",
+                "description": "Getter for the name attribute."
+              },
+              {
+                "name": "label",
+                "description": "Getter for the label attribute."
+              },
+              { "name": "className", "type": "string" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "pristine", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-reorder",
+          "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed."
+            }
+          ],
+          "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              { "name": "dragEl", "type": "null" },
+              { "name": "items", "type": "array" },
+              { "name": "originalIndex", "type": "null" },
+              { "name": "isDragging", "type": "boolean" },
+              { "name": "offsetX", "type": "number" },
+              { "name": "offsetY", "type": "number" },
+              { "name": "cloneEl", "type": "null" }
+            ],
+            "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }]
+          }
+        },
         {
           "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.",
@@ -2892,33 +2922,37 @@
           }
         },
         {
-          "name": "wje-reorder",
-          "description": "This element represents a reorder.\n---\n\n\n### **Events:**\n - **wje-reorder:change**\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component after it is connected to the DOM.\n- **afterDraw()** - Adds event listeners after the component is drawn.\n- **syncAria()** - Sync ARIA attributes on host.\n- **attachEventListeners(element)** - Attaches event listeners to the element.\n- **mouseDown(e: _object_)** - Handles the mouse down event.\n- **touchStart(e)** - Handles the touch start event.\n- **startDragging(clientX: _number_, clientY: _number_, target: _HTMLElement_)** - Initializes the dragging process for a reorderable item.\n- **mouseMove(e)** - Handles the mouse move event.\n- **touchMove(e: _TouchEvent_)** - Handles the `touchmove` event and updates the position of the dragged element.\n- **moveElement(pageX: _number_, pageY: _number_)** - Updates the position of the dragged element and handles reordering logic based on the mouse position.\n- **mouseUp()** - Handles the mouse up event.\n- **touchEnd()** - Handles the touch end event.\n- **stopDragging()** - Stops dragging the element.\n- **dragStart(e: _DragEvent_)** - Prevents the default behavior of the `dragstart` event.\n- **createClone()** - Creates a clone of the element.\n- **isMovingDown(droppedElement): _boolean_** - Checks if the dragged element is moving down.\n- **dispatchChange(from: _number_, to: _number_, order: _Array<number>_, orderElements)** - Dispatches a custom event to signal that a reordering operation has occurred.\n\n### **Slots:**\n - _default_ - The default slot for the reorder. // @fires wje-reorder:change - Event fired when the reorder is changed.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder.",
+          "name": "wje-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. // @fires wje-reorder:change - Event fired when the reorder is changed."
+              "description": "The default slot for the reorder item."
             }
           ],
-          "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }],
+          "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
                 "description": "The class name for the component.",
                 "type": "string"
-              },
-              { "name": "dragEl", "type": "null" },
-              { "name": "items", "type": "array" },
-              { "name": "originalIndex", "type": "null" },
-              { "name": "isDragging", "type": "boolean" },
-              { "name": "offsetX", "type": "number" },
-              { "name": "offsetY", "type": "number" },
-              { "name": "cloneEl", "type": "null" }
+              }
             ],
-            "events": [{ "name": "wje-reorder:change", "type": "CustomEvent" }]
+            "events": []
+          }
+        },
+        {
+          "name": "wje-route",
+          "description": "This element represents a route in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the route.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "className", "type": "string" }],
+            "events": []
           }
         },
         {
@@ -2950,32 +2984,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-reorder-handle",
-          "description": "This element represents a reorder handle.\n---\n\n\n### **Methods:**\n - **draw(): _DocumentFragment_** - Draws the component.\n- **afterDraw()** - Draws the component after it is connected to the DOM.\n- **syncAria()** - Sync ARIA attributes on host.\n- **startDrag(e: _DragEvent_)** - Handles the attribute changes.\n- **startTouchDrag(e: _TouchEvent_)** - Handles the touch start event.\n- **startDragAction(clientX: _number_, clientY: _number_)** - Initiates the drag-and-drop action for a sortable element.\n- **getDraggable(): _Element|null_** - Retrieves the closest draggable element based on attribute conditions.\nIf the element has a \"parent\" attribute, the method attempts to find the closest ancestor\nmatching the CSS selector specified in the attribute. If no such ancestor exists,\nthe method defaults to returning the immediate parent element.\n- **getDropzone(element: _HTMLElement_): _HTMLElement|null_** - Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n- **getClosestDropzone(clientX: _number_, clientY: _number_): _HTMLElement|null_** - Retrieves the closest dropzone element at the specified coordinates.\n- **getElementsFromPointAll(x: _number_, y: _number_, root: _Document|ShadowRoot_, visited: _Set<Node>_): _HTMLElement[]_** - Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n- **reIndexItems(container: _HTMLElement_): _void_** - Re-indexes child elements of the given container by setting their dataset index.\n\n### **Slots:**\n - _default_ - The default slot for the reorder handle.\n\n### **CSS Parts:**\n - **native** - The native part of the reorder handle.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "dropzone", "value": { "type": "string" } },
-            { "name": "parent", "value": { "type": "string" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the reorder handle."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "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.",
@@ -3000,14 +3008,17 @@
           }
         },
         {
-          "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": [],
@@ -3022,34 +3033,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-route",
-          "description": "This element represents a route in a routing system.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the route.",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "className", "type": "string" }],
-            "events": []
-          }
-        },
         {
           "name": "wje-router-outlet",
           "description": "This element represents a route in a routing system.\n---\n",
@@ -3087,6 +3070,23 @@
             "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-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.",
@@ -3663,46 +3663,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-tab-panel",
-          "description": "This element represents a tab panel.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the tab panel.\n\n### **Slots:**\n - _default_ - The default slot for the tab panel.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot for the tab panel." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "wje-timeline",
-          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "Slot for the timeline items." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-thumbnail",
           "description": "Thumbnail class\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the thumbnail.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - **thumbnail-slot** - The slot for the thumbnail content.\n\n### **CSS Properties:**\n - **--wje-thumbnail-width** - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`. _(default: 48px)_\n- **--wje-thumbnail-height** - Specifies the height of the thumbnail. Accepts any valid CSS length unit. _(default: 48px)_\n- **--wje-thumbnail-border-radius** - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable. _(default: var(--wje-border-radius-medium))_",
@@ -3727,26 +3687,19 @@
           }
         },
         {
-          "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-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": "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 tab panel." }
           ],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "className",
-                "description": "Returns the class name of the tab.",
+                "description": "The class name for the component.",
                 "type": "string"
               }
             ],
@@ -3799,6 +3752,53 @@
             "events": []
           }
         },
+        {
+          "name": "wje-timeline",
+          "description": "This element represents a timeline.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline.\n- **syncAria()** - Sync ARIA attributes on host.\n\n### **Slots:**\n - _default_ - Slot for the timeline items.\n\n### **CSS Parts:**\n - **native** - The native part of the rating component.\n- **vertical-line** - The vertical line part of the rating component.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "Slot for the timeline items." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "wje-timeline-item",
+          "description": "This element represents a timeline item.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _DocumentFragment_** - Draws the component for the timeline item.\n\n### **Slots:**\n - _default_ - Slot for the content of the timeline item.\n- **status** - Slot for the status of the timeline item.\n\n### **CSS Parts:**\n - **native** - The native part of the timeline item.\n- **content-container** - The content container part of the timeline item.\n- **default-icon** - The default icon part of the timeline item.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "Slot for the content of the timeline item."
+            },
+            {
+              "name": "status",
+              "description": "Slot for the status of the timeline item."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "Returns the class name of the tab.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-toast",
           "description": "This element represents a toast notification.\n---\n\n\n### **Methods:**\n - **createToastStack(): _HTMLDivElement_** - Creates a toast stack container.\n- **getToastStackKey(): _string_** - Returns the key of the toast stack.\n- **applyToastStackPlacement(stack: _HTMLDivElement_)** - Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n- **syncToastStack(stack: _HTMLDivElement_)** - Applies the current toast stack configuration to a stack element.\n- **clearStackItemStyles(toast: _Toast_)** - Clears transient stack styling from a toast.\n- **getToastVisualHeight(toast: _Toast_): _number_** - Measures the rendered height of a toast for stack overlap calculations.\n- **updateToastStack(stack: _HTMLDivElement_)** - Recomputes the visual order of toasts inside the stack.\n- **setupAttributes()** - Setup attributes for the Button element.\n- **draw(): _object_** - Draw method for the toast notification.\n- **afterDraw()** - After draw method for the toast notification.\n- **beforeDisconnect()** - Before disconnect method\nThis method is called before the element is disconnected from the document.\n- **startTimer()** - Starts the timer.\nThis method sets the `startTime` property to the current time and sets\nthe `timeoutID` property to the ID of the timeout. The method also\ndispatches the `wje-toast:after-hide` custom event when the timeout\nexpires.\n- **stopTimer()** - Stops the timer.\nThis method clears the timeout and calculates the remaining time.\nThe method is called when the toast notification is paused.\n- **resumeTimer()** - Resumes the timer.\nThis method resumes the timer if the remaining time is greater\nthan zero. The method is called when the toast notification is resumed.\n- **removeChildAndStack()** - Removes the toast notification and the toast stack.\n\nThis method removes the toast notification from the toast stack and\nremoves the toast stack from the document body if the toast stack is\nempty.\n\n### **Slots:**\n - _default_ - The content of the toast.\n- **media** - The media of the toast.\n\n### **CSS Properties:**\n - **--wje-toast-stack-width** - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts. // @fires wje-toast:after-show - Fired after the toast is shown. // @fires wje-toast:after-hide - Fired after the toast is hidden. _(default: 300px)_\n\n### **CSS Parts:**\n - **native** - The native part",
@@ -3964,32 +3964,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-toolbar",
-          "description": "This element represents a toolbar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar.\n- **afterDraw()** - Initializes responsive layout observers.\n- **afterDisconnect()** - Cleans up responsive layout observers.\n- **syncAria()** - Sync ARIA attributes on host.\n- **scheduleResponsiveLayout()** - Schedules responsive layout recalculation.\n- **updateResponsiveLayout(): _Promise<void>_** - Updates slotted breadcrumbs and actions to fit the toolbar width.\n- **measureBreadcrumbs(breadcrumbs: _HTMLElement_): _Promise<{count: number, fullWidth: number, compactWidth: number}>_** - Measures breadcrumbs in their full state.\n- **ensureBreadcrumbState(breadcrumbs: _HTMLElement_, count: _number_): _{compactMaxItems: number}_** - Stores original breadcrumb settings used as responsive compact target.\n- **setBreadcrumbCompactState(breadcrumbs: _HTMLElement|null_, compact: _boolean_)** - Applies the compact or full breadcrumb state.\n- **setBreadcrumbMaxItems(breadcrumbs: _HTMLElement_, value: _number_)** - Sets breadcrumb max-items only when it changed.\n- **getVisibleActionsForWidth(actionMetrics: _object_, width: _number_): _number_** - Finds how many actions fit into the available width.\n- **setVisibleActions(action: _HTMLElement|null_, count: _number_)** - Applies visible action count.\n- **clearVisibleActions(action: _HTMLElement|null_)** - Clears toolbar-managed visible action state when actions manage themselves.\n- **getToolbarAction(): _HTMLElement|null_** - Returns the slotted toolbar action.\n- **getBreadcrumbs(): _HTMLElement|null_** - Returns the slotted breadcrumbs.\n- **isSelfManagedAction(action: _HTMLElement|null_): _boolean_** - Returns whether toolbar actions are managed by their own breakpoint logic.\n- **isSelfManagedBreadcrumbs(breadcrumbs: _HTMLElement|null_, action): _boolean_** - Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n- **nextFrame(): _Promise<void>_** - Waits for one animation frame.\n\n### **Slots:**\n - **start** - The start slot for the toolbar.\n- **end** - The end slot for the toolbar.\n\n### **CSS Properties:**\n - **--wje-toolbar-background** - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-background))_\n- **--wje-toolbar-height** - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content. _(default: auto)_\n- **--wje-toolbar-min-height** - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. _(default: 70px)_\n- **--wje-toolbar-padding-top** - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. _(default: 1rem)_\n- **--wje-toolbar-padding-bottom** - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. _(default: 1rem)_\n- **--wje-toolbar-padding-inline** - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. _(default: 1.5rem)_\n- **--wje-toolbar-margin-block** - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-margin-inline** - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-border-color** - Sets the color of the toolbar's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-toolbar-top** - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native toolbar wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "start",
-              "description": "The start slot for the toolbar."
-            },
-            { "name": "end", "description": "The end slot for the toolbar." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              },
-              { "name": "_breadcrumbState" },
-              { "name": "_responsiveFrame", "type": "null" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-toolbar-action",
           "description": "This element represents a toolbar action.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar action.\n- **afterDraw()** - Applies the current visible action limit after the component is drawn.\n- **afterDisconnect()** - Removes listeners after disconnect.\n- **scheduleOverflow(doubleFrame: _boolean_)** - Schedules overflow application after layout settles.\n- **getActions(): _Array<HTMLElement>_** - Returns the actions for the toolbar action.\n- **getAssignedElements(): _Array<HTMLElement>_** - Returns direct children assigned to the default slot.\n- **getExistingDropdown(): _HTMLElement|null_** - Returns an existing top-level dropdown if present.\n- **observeExistingDropdown()** - Observes the external dropdown for late menu/content changes.\n- **getOverflowDropdown(): _HTMLElement_** - Returns the dropdown that should receive overflow items.\n- **getOverflowMenu(): _HTMLElement|null_** - Returns the menu used for overflow items.\n- **getVisibleLimit(): _number_** - Gets the number of actions that should stay visible.\n- **shouldCollapseByBreakpoint(): _boolean_** - Returns whether the toolbar action should collapse based on the configured breakpoint.\n- **isCollapsedByBreakpoint(): _boolean_** - Returns the cached breakpoint collapse state.\n- **handleBreakpointResize(): _void_** - Reacts to viewport resize only when the breakpoint mode actually changes.\n- **getBreakpointWidth(): _number|null_** - Resolves the configured breakpoint to a pixel width.\n- **applyOverflow(): _void_** - Updates visible actions and the overflow dropdown.\n- **restoreManagedActions(actions: _Array<HTMLElement>_)** - Restores buttons hidden by this component.\n- **restoreManagedOverflowContent()** - Removes overflow menu nodes that were previously injected by this component.\n- **createMenuItem(action: _HTMLElement_): _HTMLElement_** - Creates a dropdown menu proxy for an overflowed button.\n- **cloneActionMenuNode(node: _Node_): _Node_** - Clones action content for menu usage and normalizes button icon slots.\n- **normalizeActionMenuIconSlot(element: _Element_)** - Moves button-only icon slots to the menu item start slot.\n- **getActionLabel(action: _HTMLElement_): _string_** - Resolves readable text for a toolbar action copied into an overflow menu.\n- **createOverflowDivider(): _HTMLElement_** - Creates a divider separating existing dropdown actions from responsive overflow actions.\n- **handleMenuItemClick(e: _Event_, action: _HTMLElement_)** - Forwards menu item activation to the original button.\n- **measureActionMetrics(): _{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}_** - Measures action widths while preserving current overflow state.\n- **measureMoreWidth(): _number_** - Measures the overflow dropdown trigger.\n\n### **Slots:**\n - _default_ - The default slot for the toolbar action.\n\n### **CSS Parts:**\n - **native** - The native toolbar action wrapper.",
@@ -4087,6 +4061,32 @@
             "events": []
           }
         },
+        {
+          "name": "wje-toolbar",
+          "description": "This element represents a toolbar.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the toolbar.\n- **afterDraw()** - Initializes responsive layout observers.\n- **afterDisconnect()** - Cleans up responsive layout observers.\n- **syncAria()** - Sync ARIA attributes on host.\n- **scheduleResponsiveLayout()** - Schedules responsive layout recalculation.\n- **updateResponsiveLayout(): _Promise<void>_** - Updates slotted breadcrumbs and actions to fit the toolbar width.\n- **measureBreadcrumbs(breadcrumbs: _HTMLElement_): _Promise<{count: number, fullWidth: number, compactWidth: number}>_** - Measures breadcrumbs in their full state.\n- **ensureBreadcrumbState(breadcrumbs: _HTMLElement_, count: _number_): _{compactMaxItems: number}_** - Stores original breadcrumb settings used as responsive compact target.\n- **setBreadcrumbCompactState(breadcrumbs: _HTMLElement|null_, compact: _boolean_)** - Applies the compact or full breadcrumb state.\n- **setBreadcrumbMaxItems(breadcrumbs: _HTMLElement_, value: _number_)** - Sets breadcrumb max-items only when it changed.\n- **getVisibleActionsForWidth(actionMetrics: _object_, width: _number_): _number_** - Finds how many actions fit into the available width.\n- **setVisibleActions(action: _HTMLElement|null_, count: _number_)** - Applies visible action count.\n- **clearVisibleActions(action: _HTMLElement|null_)** - Clears toolbar-managed visible action state when actions manage themselves.\n- **getToolbarAction(): _HTMLElement|null_** - Returns the slotted toolbar action.\n- **getBreadcrumbs(): _HTMLElement|null_** - Returns the slotted breadcrumbs.\n- **isSelfManagedAction(action: _HTMLElement|null_): _boolean_** - Returns whether toolbar actions are managed by their own breakpoint logic.\n- **isSelfManagedBreadcrumbs(breadcrumbs: _HTMLElement|null_, action): _boolean_** - Returns whether breadcrumb collapse is managed by its own breakpoint logic.\n- **nextFrame(): _Promise<void>_** - Waits for one animation frame.\n\n### **Slots:**\n - **start** - The start slot for the toolbar.\n- **end** - The end slot for the toolbar.\n\n### **CSS Properties:**\n - **--wje-toolbar-background** - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`. _(default: var(--wje-background))_\n- **--wje-toolbar-height** - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content. _(default: auto)_\n- **--wje-toolbar-min-height** - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. _(default: 70px)_\n- **--wje-toolbar-padding-top** - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. _(default: 1rem)_\n- **--wje-toolbar-padding-bottom** - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. _(default: 1rem)_\n- **--wje-toolbar-padding-inline** - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. _(default: 1.5rem)_\n- **--wje-toolbar-margin-block** - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-margin-inline** - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value. _(default: 0)_\n- **--wje-toolbar-border-color** - Sets the color of the toolbar's border. Accepts any valid CSS color value. _(default: var(--wje-border-color))_\n- **--wje-toolbar-top** - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. _(default: 0)_\n\n### **CSS Parts:**\n - **native** - The native toolbar wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "start",
+              "description": "The start slot for the toolbar."
+            },
+            { "name": "end", "description": "The end slot for the toolbar." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              },
+              { "name": "_breadcrumbState" },
+              { "name": "_responsiveFrame", "type": "null" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "wje-tree",
           "description": "This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - A method called before the drawing or rendering process of tree items.\nIt iterates through all `wje-tree-item` elements, updating their selection state\nand managing their expand/collapse icons accordingly.\n- **draw(): _object_** - Draw method for the tree.\n- **afterDraw(): _void_** - Called after the draw process of the component is completed.\nTypically used to add event listeners or perform operations\nthat are dependent on the component's drawn state.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getAllItems(): _Array<Element>_** - Retrieves all items that match the selector 'wje-tree-item' within the current context.\n- **appendTemplateSlot(item: _HTMLElement_, template: _HTMLTemplateElement|null_, slotName: _string_): _void_** - Retrieves and appends a template slot to a tree item.\n- **getTemplateSlotClass(slotName: _string_): _string_** - Returns the internal class used to identify cloned template slot content.\n- **setupReorderHandle(item: _HTMLElement_): _void_** - Marks direct start slot content as the drag handle for reorderable trees.\n- **getTreeItemFromEvent(e: _Event_): _HTMLElement|null_** - Finds a tree item from a composed event path.\n- **isReorderHandleEvent(e: _Event_): _boolean_** - Checks whether the event started from a reorder handle.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether a node is a tree item element.\n- **getDirectTreeItems(parent: _HTMLElement_): _HTMLElement[]_** - Returns direct tree item children for a tree or tree item parent.\n- **getTreeItemIndex(item: _HTMLElement_): _number_** - Gets the index of a tree item among direct tree item siblings.\n- **canDrop(draggedItem: _HTMLElement_, targetItem: _HTMLElement_): _boolean_** - Determines whether the dragged item can be dropped on the target.\n- **getDropPosition(e: _DragEvent_, target: _HTMLElement|null_): _'before'|'inside'|'after'_** - Resolves the drop position against the visible tree item row.\n- **setDropState(target: _HTMLElement_, position: _string_): _void_** - Applies the visual drop position to the current target item.\n- **clearDropState(): _void_** - Clears visual drop target state.\n- **clearDragState(): _void_** - Clears the active drag state.\n- **getDropPositionClass(position: _'before'|'inside'|'after'_): _string_** - Returns the internal class used to render a drop marker.\n- **moveItem(draggedItem: _HTMLElement_, targetItem: _HTMLElement_, position: _'before'|'inside'|'after'_): _object|null_** - Moves a tree item relative to another tree item and syncs nesting metadata.\n- **getOrderElements(parent: _HTMLElement_): _HTMLElement[]_** - Returns cloned direct tree item children for an event detail.\n- **getOrderIds(parent: _HTMLElement_): _Array<string|null>_** - Returns stable ids for direct tree item children when they are available.\n- **getItemId(item: _HTMLElement|null_): _string|null_** - Gets an application-facing id from a tree item.\n- **syncTreeItems(): _void_** - Syncs item selection mode and nesting metadata after a DOM move.\n- **refreshMovedItems(items: _HTMLElement[]_): _void_** - Redraws affected parent items so expand/collapse affordances match current children.\n- **updateCheckboxState(changedItem: _object_, isInitialSync: _boolean_): _void_** - Updates the state of a checkbox, syncing the state both upwards to parent elements\nand downwards to child elements as necessary.\n- **updateParentState(item: _object_): _void_** - Updates the state of the parent item based on the state of its child items.\nRecursively propagates changes up to all parent items to reflect the selection\nor indeterminate state accurately.\n- **propagateStateUpwards(item: _HTMLElement_): _void_** - Propagates the state changes of an item upwards through its ancestors in the hierarchy.\nCalls the `updateParentState` method for each parent element until no parent exists.\n- **propagateStateDownwards(item: _object_): _void_** - Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\nit also determines how the state should be applied to the child items and updates the parent state if needed.\n\n### **Slots:**\n - _default_ - The default slot to place `wje-tree-item` child components.\n\n### **CSS Parts:**\n - **native** - The native container part of the tree.",
@@ -4147,29 +4147,6 @@
             "events": []
           }
         },
-        {
-          "name": "wje-visually-hidden",
-          "description": "This element represents a visually hidden element.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the visually hidden element.\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot for the visually hidden element."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "className",
-                "description": "The class name for the component.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "wje-tree-item",
           "description": "Represents a single item in a tree structure.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Setup attributes for the Button element.\n- **beforeDraw(): _void_** - Custom logic executed before the draw process begins.\nDetermines and sets the appropriate slot if the current item is nested.\n- **syncNestingState(): _void_** - Synchronizes the nesting-related state on the host element.\nSets the \"slot\" to children for nested items and updates\nthe nesting depth used to compute visual indentation.\n- **draw(): _DocumentFragment_** - Creates and returns a document fragment representing the structure of a tree item component.\nThe method constructs the DOM elements including the native container, indentation, toggle button,\nselection checkbox, label, and children container, along with their respective slots and attributes.\nIt dynamically handles the creation of expand and collapse icons, as well as appending slots for\nchild components.\n- **afterDraw(): _void_** - Executes operations to be performed after the draw action is completed.\nIf the state indicates it is expanded, toggles its children.\nAdditionally, sets up an event listener on the button element to handle toggling children upon click.\n- **isNestedItem(): _boolean_** - Determines if the current item is a nested item within a tree structure.\nChecks if the item's parent element exists and is also a tree item.\n- **getNestingDepth(): _number_** - Calculates nesting depth based on ancestor tree items.\nRoot items have depth 0, direct children depth 1, etc.\n- **isTreeItem(node: _object_): _boolean_** - Checks whether the given node is a tree item.\n- **toggleChildren(): _void_** - Toggles the visibility state of the children element and updates the class of the parent element.\nThe method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\neffectively showing or hiding the children and indicating the expanded state.\n- **setChildrenExpanded(expanded: _boolean_, options: _@param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.\n     * _): _void_** - Sets the rendered children visibility and optionally mirrors it to the expanded attribute.\n- **syncAria()** - Syncs ARIA attributes on the host element.\n- **getChildrenItems(options: _@param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n     * _): _Array_** - Retrieves the child items from the `childrenSlot` that match specific criteria.\n- **getAllChildrenFlat(options: _object_): _Array_** - Retrieves all descendant children of the current object in a flattened array structure.\n\n### **Slots:**\n - _default_ - Default slot for rendering the tree item's content (e.g., text or custom elements).\n\n### **CSS Properties:**\n - **--wje-tree-item-indent** - Defines the indentation for nested tree items. _(default: var(--wje-spacing-large))_\n- **--wje-tree-item-indent-guid-width** - Specifies the width of the guide element shown next to a tree item. _(default: 0px)_\n- **--wje-tree-item-indent-guid-style** - Defines the guide border style for nested tree items. _(default: solid)_\n- **--wje-tree-item-indent-guid-color** - Defines the guide border color for nested tree items. _(default: var(--wje-border-color))_\n- **--wje-tree-item-border-radius** - Sets the border radius of the tree item's container. _(default: var(--wje-border-radius-medium))_\n- **--wje-tree-item-border-width** - Sets the border width of the tree item row. _(default: 0px)_\n- **--wje-tree-item-border-style** - Sets the border style of the tree item row. _(default: solid)_\n- **--wje-tree-item-border-color** - Sets the border color of the tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-hover** - Sets the border color of the hovered tree item row. _(default: transparent)_\n- **--wje-tree-item-border-color-selected** - Sets the border color of the selected tree item row. _(default: transparent)_\n- **--wje-tree-item-drop-color** - Sets the color of reorder drop indicators. _(default: var(--wje-color-primary))_\n- **--wje-tree-item-drop-line-width** - Sets the thickness of before/after reorder drop indicators. _(default: 2px)_\n- **--wje-tree-item-drop-line-border-radius** - Sets the radius of before/after reorder drop indicators. _(default: var(--wje-border-radius-pill))_\n- **--wje-tree-item-drop-border-width** - Sets the width of the inside reorder drop border. _(default: 1px)_\n- **--wje-tree-item-drop-border-style** - Sets the style of the inside reorder drop border. _(default: solid)_\n- **--wje-tree-item-drop-border-color** - Sets the color of the inside reorder drop border. _(default: var(--wje-tree-item-drop-color))_\n- **--wje-tree-item-drop-border-radius** - Sets the radius of the inside reorder drop border. _(default: inherit)_\n\n### **CSS Parts:**\n - **native** - The native container of the tree item.",
@@ -4213,6 +4190,29 @@
             ],
             "events": []
           }
+        },
+        {
+          "name": "wje-visually-hidden",
+          "description": "This element represents a visually hidden element.\n---\n\n\n### **Methods:**\n - **setupAttributes()** - Sets up the attributes for the component.\n- **draw(): _object_** - Draws the component for the visually hidden element.\n\n### **Slots:**\n - _default_ - The default slot for the visually hidden element.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for the visually hidden element."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "className",
+                "description": "The class name for the component.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
         }
       ]
     }