@uplynk/lynk-design 1.11.2 → 1.11.3

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@uplynk/lynk-design",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2333,132 +2333,224 @@
           }
         },
         {
-          "name": "lynk-dialog",
-          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
+          "name": "lynk-date-picker",
+          "description": "A date picker that combines calendar component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "open",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "name",
+              "description": "The input's name attribute.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value in ISO format (YYYY-MM-DD).",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "label",
-              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "description": "The input's label.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "no-header",
-              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+              "name": "placeholder",
+              "description": "Placeholder text to show when the input is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The help text below the input.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-tip",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the input readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the input required.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dirty",
+              "description": "Adds the dirty indicator mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "inline",
+              "description": "Arranges the label inline next to the date picker instead of above it.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
-              "description": "The dialog's size.",
+              "description": "The input's size.",
               "value": {
-                "type": "'fitted' | 'full' | 'auto'",
-                "default": "'auto'"
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
               }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dialog's main content." },
+            },
             {
-              "name": "label",
-              "description": "The dialog's label. Alternatively, you can use the label prop."
+              "name": "min",
+              "description": "The minimum date in ISO format (YYYY-MM-DD).",
+              "value": { "type": "string" }
             },
             {
-              "name": "header-actions",
-              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`."
+              "name": "max",
+              "description": "The maximum date in ISO format (YYYY-MM-DD).",
+              "value": { "type": "string" }
             },
             {
-              "name": "footer",
-              "description": "The dialog's footer, usually one or more buttons representing various options."
+              "name": "clearable",
+              "description": "Adds a clear button when the input is populated.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [
+          "slots": [
             {
-              "name": "ev-show",
-              "description": "Emitted when the dialog opens."
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the label prop."
             },
             {
-              "name": "ev-after-show",
-              "description": "Emitted after the dialog opens and all animations are complete."
+              "name": "help-text",
+              "description": "Help text that describes how to use the input."
             },
             {
-              "name": "ev-hide",
-              "description": "Emitted when the dialog closes."
-            },
+              "name": "help-tip",
+              "description": "Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop."
+            }
+          ],
+          "events": [
             {
-              "name": "ev-after-hide",
-              "description": "Emitted after the dialog closes and all animations are complete."
+              "name": "ev-change",
+              "description": "Emitted when the date value changes."
             },
             {
-              "name": "ev-initial-focus",
-              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              "name": "ev-input",
+              "description": "Emitted when the control receives input."
             },
             {
-              "name": "ev-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+              "name": "ev-clear",
+              "description": "Emitted when the input is cleared."
             }
           ],
           "js": {
             "properties": [
+              { "name": "dropdown", "type": "LynkDropdown" },
+              { "name": "calendar", "type": "LynkCalendar" },
+              { "name": "dateInput", "type": "HTMLInputElement" },
+              { "name": "isOpen", "type": "boolean" },
               {
-                "name": "modal",
-                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.",
-                "type": "Modal"
+                "name": "name",
+                "description": "The input's name attribute.",
+                "type": "string"
               },
-              { "name": "dialog", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
               {
-                "name": "open",
-                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-                "type": "boolean"
+                "name": "value",
+                "description": "The current value in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "defaultValue",
+                "description": "Gets or sets the default value used to reset this element.",
+                "type": "string"
               },
               {
                 "name": "label",
-                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "description": "The input's label.",
                 "type": "string"
               },
               {
-                "name": "noHeader",
-                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+                "name": "placeholder",
+                "description": "Placeholder text to show when the input is empty.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The help text below the input.",
+                "type": "string"
+              },
+              {
+                "name": "helpTip",
+                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the input.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the input readonly.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the input required.",
+                "type": "boolean"
+              },
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the date picker instead of above it.",
                 "type": "boolean"
               },
               {
                 "name": "size",
-                "description": "The dialog's size.",
-                "type": "'fitted' | 'full' | 'auto'"
-              }
-            ],
-            "events": [
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
               {
-                "name": "ev-show",
-                "description": "Emitted when the dialog opens."
+                "name": "min",
+                "description": "The minimum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
               },
               {
-                "name": "ev-after-show",
-                "description": "Emitted after the dialog opens and all animations are complete."
+                "name": "max",
+                "description": "The maximum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
               },
               {
-                "name": "ev-hide",
-                "description": "Emitted when the dialog closes."
+                "name": "clearable",
+                "description": "Adds a clear button when the input is populated.",
+                "type": "boolean"
               },
               {
-                "name": "ev-after-hide",
-                "description": "Emitted after the dialog closes and all animations are complete."
+                "name": "validity",
+                "description": "Gets the validity state object"
               },
               {
-                "name": "ev-initial-focus",
-                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-change",
+                "description": "Emitted when the date value changes."
               },
               {
-                "name": "ev-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+                "name": "ev-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "ev-clear",
+                "description": "Emitted when the input is cleared."
               }
             ]
           }
@@ -2785,44 +2877,198 @@
           }
         },
         {
-          "name": "lynk-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the drawer opens.\n- **ev-after-show** - Emitted after the drawer opens and all animations are complete.\n- **ev-hide** - Emitted when the drawer closes.\n- **ev-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's content.\n- **label** - The drawer's label. Alternatively, you can use the label prop.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The drawer panel (where the drawer and its content is rendered).\n- **header** - The drawer header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The drawer title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The drawer body.\n- **footer** - The drawer footer.",
+          "name": "lynk-dialog",
+          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
           "doc-url": "",
           "attributes": [
             {
               "name": "open",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
-              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, you can use the `label` slot\ninstead.",
+              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "placement",
-              "description": "The direction from which the drawer will open.",
-              "value": {
-                "type": "'top' | 'end' | 'bottom' | 'start'",
-                "default": "'end'"
-              }
-            },
-            {
-              "name": "contained",
-              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
+              "name": "no-header",
+              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "no-header",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "size",
+              "description": "The dialog's size.",
+              "value": {
+                "type": "'fitted' | 'full' | 'auto'",
+                "default": "'auto'"
+              }
             }
           ],
           "slots": [
-            { "name": "", "description": "The drawer's content." },
+            { "name": "", "description": "The dialog's main content." },
             {
               "name": "label",
-              "description": "The drawer's label. Alternatively, you can use the label prop."
+              "description": "The dialog's label. Alternatively, you can use the label prop."
+            },
+            {
+              "name": "header-actions",
+              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`."
+            },
+            {
+              "name": "footer",
+              "description": "The dialog's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-show",
+              "description": "Emitted when the dialog opens."
+            },
+            {
+              "name": "ev-after-show",
+              "description": "Emitted after the dialog opens and all animations are complete."
+            },
+            {
+              "name": "ev-hide",
+              "description": "Emitted when the dialog closes."
+            },
+            {
+              "name": "ev-after-hide",
+              "description": "Emitted after the dialog closes and all animations are complete."
+            },
+            {
+              "name": "ev-initial-focus",
+              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+            },
+            {
+              "name": "ev-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "modal",
+                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.",
+                "type": "Modal"
+              },
+              { "name": "dialog", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "noHeader",
+                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The dialog's size.",
+                "type": "'fitted' | 'full' | 'auto'"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-show",
+                "description": "Emitted when the dialog opens."
+              },
+              {
+                "name": "ev-after-show",
+                "description": "Emitted after the dialog opens and all animations are complete."
+              },
+              {
+                "name": "ev-hide",
+                "description": "Emitted when the dialog closes."
+              },
+              {
+                "name": "ev-after-hide",
+                "description": "Emitted after the dialog closes and all animations are complete."
+              },
+              {
+                "name": "ev-initial-focus",
+                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              },
+              {
+                "name": "ev-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+              }
+            ]
+          }
+        },
+        {
+          "name": "lynk-divider",
+          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "description": "Draws the divider in a vertical orientation.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "vertical",
+                "description": "Draws the divider in a vertical orientation.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "lynk-drawer",
+          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the drawer opens.\n- **ev-after-show** - Emitted after the drawer opens and all animations are complete.\n- **ev-hide** - Emitted when the drawer closes.\n- **ev-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's content.\n- **label** - The drawer's label. Alternatively, you can use the label prop.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The drawer panel (where the drawer and its content is rendered).\n- **header** - The drawer header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The drawer title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The drawer body.\n- **footer** - The drawer footer.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, you can use the `label` slot\ninstead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placement",
+              "description": "The direction from which the drawer will open.",
+              "value": {
+                "type": "'top' | 'end' | 'bottom' | 'start'",
+                "default": "'end'"
+              }
+            },
+            {
+              "name": "contained",
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-header",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The drawer's content." },
+            {
+              "name": "label",
+              "description": "The drawer's label. Alternatively, you can use the label prop."
             },
             {
               "name": "footer",
@@ -2920,29 +3166,6 @@
             ]
           }
         },
-        {
-          "name": "lynk-divider",
-          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "vertical",
-              "description": "Draws the divider in a vertical orientation.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "vertical",
-                "description": "Draws the divider in a vertical orientation.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-dropdown",
           "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
@@ -3102,226 +3325,63 @@
           }
         },
         {
-          "name": "lynk-date-picker",
-          "description": "A date picker that combines calendar component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.",
+          "name": "lynk-flank",
+          "description": "Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The input's name attribute.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current value in ISO format (YYYY-MM-DD).",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label",
-              "description": "The input's label.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "placeholder",
-              "description": "Placeholder text to show when the input is empty.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "help-text",
-              "description": "The help text below the input.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "help-tip",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the input.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "readonly",
-              "description": "Makes the input readonly.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "required",
-              "description": "Makes the input required.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "dirty",
-              "description": "Adds the dirty indicator mark.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "start",
+              "description": "Flank from first item",
+              "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "inline",
-              "description": "Arranges the label inline next to the date picker instead of above it.",
+              "name": "end",
+              "description": "Flank from the last item",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "size",
-              "description": "The input's size.",
+              "name": "align",
+              "description": "How to align flanked items to each-other",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+                "default": "'center'"
               }
             },
             {
-              "name": "min",
-              "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "max",
-              "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "clearable",
-              "description": "Adds a clear button when the input is populated.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "label",
-              "description": "The input's label. Alternatively, you can use the label prop."
-            },
-            {
-              "name": "help-text",
-              "description": "Help text that describes how to use the input."
-            },
-            {
-              "name": "help-tip",
-              "description": "Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-change",
-              "description": "Emitted when the date value changes."
-            },
-            {
-              "name": "ev-input",
-              "description": "Emitted when the control receives input."
-            },
-            {
-              "name": "ev-clear",
-              "description": "Emitted when the input is cleared."
+              "name": "gap",
+              "description": "The space between flanked items. Use spacing tokens or any custom size.",
+              "value": {
+                "type": "string",
+                "default": "'var(--lynk-spacing-small)'"
+              }
             }
           ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "dropdown", "type": "LynkDropdown" },
-              { "name": "calendar", "type": "LynkCalendar" },
-              { "name": "dateInput", "type": "HTMLInputElement" },
-              { "name": "isOpen", "type": "boolean" },
-              {
-                "name": "name",
-                "description": "The input's name attribute.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The current value in ISO format (YYYY-MM-DD).",
-                "type": "string"
-              },
-              {
-                "name": "defaultValue",
-                "description": "Gets or sets the default value used to reset this element.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "The input's label.",
-                "type": "string"
-              },
-              {
-                "name": "placeholder",
-                "description": "Placeholder text to show when the input is empty.",
-                "type": "string"
-              },
-              {
-                "name": "helpText",
-                "description": "The help text below the input.",
-                "type": "string"
-              },
-              {
-                "name": "helpTip",
-                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the input.",
-                "type": "boolean"
-              },
-              {
-                "name": "readonly",
-                "description": "Makes the input readonly.",
-                "type": "boolean"
-              },
               {
-                "name": "required",
-                "description": "Makes the input required.",
-                "type": "boolean"
-              },
-              {
-                "name": "dirty",
-                "description": "Adds the dirty indicator mark.",
+                "name": "start",
+                "description": "Flank from first item",
                 "type": "boolean"
               },
               {
-                "name": "inline",
-                "description": "Arranges the label inline next to the date picker instead of above it.",
+                "name": "end",
+                "description": "Flank from the last item",
                 "type": "boolean"
               },
               {
-                "name": "size",
-                "description": "The input's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "min",
-                "description": "The minimum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
+                "name": "align",
+                "description": "How to align flanked items to each-other",
+                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
               },
               {
-                "name": "max",
-                "description": "The maximum date in ISO format (YYYY-MM-DD).",
+                "name": "gap",
+                "description": "The space between flanked items. Use spacing tokens or any custom size.",
                 "type": "string"
-              },
-              {
-                "name": "clearable",
-                "description": "Adds a clear button when the input is populated.",
-                "type": "boolean"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
               }
             ],
-            "events": [
-              {
-                "name": "ev-change",
-                "description": "Emitted when the date value changes."
-              },
-              {
-                "name": "ev-input",
-                "description": "Emitted when the control receives input."
-              },
-              {
-                "name": "ev-clear",
-                "description": "Emitted when the input is cleared."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -3455,74 +3515,14 @@
             ],
             "events": [
               {
-                "name": "ev-focus",
-                "description": "Emitted when field or slotted element gains focus."
-              },
-              {
-                "name": "ev-blur",
-                "description": "Emitted when field or slotted element loses focus."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-flank",
-          "description": "Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "start",
-              "description": "Flank from first item",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "end",
-              "description": "Flank from the last item",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "align",
-              "description": "How to align flanked items to each-other",
-              "value": {
-                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
-                "default": "'center'"
-              }
-            },
-            {
-              "name": "gap",
-              "description": "The space between flanked items. Use spacing tokens or any custom size.",
-              "value": {
-                "type": "string",
-                "default": "'var(--lynk-spacing-small)'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "start",
-                "description": "Flank from first item",
-                "type": "boolean"
-              },
-              {
-                "name": "end",
-                "description": "Flank from the last item",
-                "type": "boolean"
-              },
-              {
-                "name": "align",
-                "description": "How to align flanked items to each-other",
-                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
+                "name": "ev-focus",
+                "description": "Emitted when field or slotted element gains focus."
               },
               {
-                "name": "gap",
-                "description": "The space between flanked items. Use spacing tokens or any custom size.",
-                "type": "string"
+                "name": "ev-blur",
+                "description": "Emitted when field or slotted element loses focus."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
@@ -3571,125 +3571,6 @@
             "events": []
           }
         },
-        {
-          "name": "lynk-format-number",
-          "description": "Formats a number using the specified locale and options.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The number to format.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "type",
-              "description": "The formatting style to use.",
-              "value": {
-                "type": "'currency' | 'decimal' | 'percent'",
-                "default": "'decimal'"
-              }
-            },
-            {
-              "name": "no-grouping",
-              "description": "Turns off grouping separators.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "currency",
-              "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
-              "value": { "type": "string", "default": "'USD'" }
-            },
-            {
-              "name": "currency-display",
-              "description": "How to display the currency.",
-              "value": {
-                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
-                "default": "'symbol'"
-              }
-            },
-            {
-              "name": "minimum-integer-digits",
-              "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "minimum-fraction-digits",
-              "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "maximum-fraction-digits",
-              "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "minimum-significant-digits",
-              "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "maximum-significant-digits",
-              "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
-              "value": { "type": "number" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The number to format.",
-                "type": "number"
-              },
-              {
-                "name": "type",
-                "description": "The formatting style to use.",
-                "type": "'currency' | 'decimal' | 'percent'"
-              },
-              {
-                "name": "noGrouping",
-                "description": "Turns off grouping separators.",
-                "type": "boolean"
-              },
-              {
-                "name": "currency",
-                "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
-                "type": "string"
-              },
-              {
-                "name": "currencyDisplay",
-                "description": "How to display the currency.",
-                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
-              },
-              {
-                "name": "minimumIntegerDigits",
-                "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
-                "type": "number"
-              },
-              {
-                "name": "minimumFractionDigits",
-                "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
-                "type": "number"
-              },
-              {
-                "name": "maximumFractionDigits",
-                "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
-                "type": "number"
-              },
-              {
-                "name": "minimumSignificantDigits",
-                "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
-                "type": "number"
-              },
-              {
-                "name": "maximumSignificantDigits",
-                "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
-                "type": "number"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-format-date",
           "description": "Formats a date/time using the specified locale and options.\n---\n",
@@ -3825,6 +3706,125 @@
             "events": []
           }
         },
+        {
+          "name": "lynk-format-number",
+          "description": "Formats a number using the specified locale and options.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The number to format.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "type",
+              "description": "The formatting style to use.",
+              "value": {
+                "type": "'currency' | 'decimal' | 'percent'",
+                "default": "'decimal'"
+              }
+            },
+            {
+              "name": "no-grouping",
+              "description": "Turns off grouping separators.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "currency",
+              "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
+              "value": { "type": "string", "default": "'USD'" }
+            },
+            {
+              "name": "currency-display",
+              "description": "How to display the currency.",
+              "value": {
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
+                "default": "'symbol'"
+              }
+            },
+            {
+              "name": "minimum-integer-digits",
+              "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "minimum-fraction-digits",
+              "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "maximum-fraction-digits",
+              "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "minimum-significant-digits",
+              "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "maximum-significant-digits",
+              "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
+              "value": { "type": "number" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The number to format.",
+                "type": "number"
+              },
+              {
+                "name": "type",
+                "description": "The formatting style to use.",
+                "type": "'currency' | 'decimal' | 'percent'"
+              },
+              {
+                "name": "noGrouping",
+                "description": "Turns off grouping separators.",
+                "type": "boolean"
+              },
+              {
+                "name": "currency",
+                "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
+                "type": "string"
+              },
+              {
+                "name": "currencyDisplay",
+                "description": "How to display the currency.",
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+              },
+              {
+                "name": "minimumIntegerDigits",
+                "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
+                "type": "number"
+              },
+              {
+                "name": "minimumFractionDigits",
+                "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
+                "type": "number"
+              },
+              {
+                "name": "maximumFractionDigits",
+                "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
+                "type": "number"
+              },
+              {
+                "name": "minimumSignificantDigits",
+                "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
+                "type": "number"
+              },
+              {
+                "name": "maximumSignificantDigits",
+                "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-grid",
           "description": "The Grid component helps create visual consistency and structure between layouts while allowing flexibility across a wide variety of designs. It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--width** - Set a custom width for the grid container element. Defaults to 100%. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
@@ -9565,7 +9565,7 @@
         },
         {
           "name": "lynk-tree-item",
-          "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
+          "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--readonly** - Applied when the tree item is readonly.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -9583,6 +9583,11 @@
               "description": "Disables the tree item.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "lazy",
               "description": "Enables lazy loading behavior.",
@@ -9647,6 +9652,11 @@
                 "description": "Disables the tree item.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed.",
+                "type": "boolean"
+              },
               {
                 "name": "lazy",
                 "description": "Enables lazy loading behavior.",