@uplynk/lynk-design 1.18.1 → 1.19.0

package/cdn/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.18.1",
+  "version": "1.19.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -226,7 +226,7 @@
         },
         {
           "name": "lynk-alert",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -2832,273 +2832,6 @@
             ]
           }
         },
-        {
-          "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 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 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": "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": "size",
-              "description": "The dialog's size.",
-              "value": {
-                "type": "'fitted' | 'full' | 'auto'",
-                "default": "'auto'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dialog's main content." },
-            {
-              "name": "label",
-              "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-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",
-              "description": "The drawer's footer, usually one or more buttons representing various options."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-show",
-              "description": "Emitted when the drawer opens."
-            },
-            {
-              "name": "ev-after-show",
-              "description": "Emitted after the drawer opens and all animations are complete."
-            },
-            {
-              "name": "ev-hide",
-              "description": "Emitted when the drawer closes."
-            },
-            {
-              "name": "ev-after-hide",
-              "description": "Emitted after the drawer closes and all animations are complete."
-            },
-            {
-              "name": "ev-initial-focus",
-              "description": "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."
-            },
-            {
-              "name": "ev-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "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."
-            }
-          ],
-          "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."
-              },
-              { "name": "drawer", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
-              {
-                "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.",
-                "type": "boolean"
-              },
-              {
-                "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.",
-                "type": "string"
-              },
-              {
-                "name": "placement",
-                "description": "The direction from which the drawer will open.",
-                "type": "'top' | 'end' | 'bottom' | 'start'"
-              },
-              {
-                "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.",
-                "type": "boolean"
-              },
-              {
-                "name": "noHeader",
-                "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.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-show",
-                "description": "Emitted when the drawer opens."
-              },
-              {
-                "name": "ev-after-show",
-                "description": "Emitted after the drawer opens and all animations are complete."
-              },
-              {
-                "name": "ev-hide",
-                "description": "Emitted when the drawer closes."
-              },
-              {
-                "name": "ev-after-hide",
-                "description": "Emitted after the drawer closes and all animations are complete."
-              },
-              {
-                "name": "ev-initial-focus",
-                "description": "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."
-              },
-              {
-                "name": "ev-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "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."
-              }
-            ]
-          }
-        },
         {
           "name": "lynk-date-time-picker",
           "description": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date-time 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- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\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- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.\n- **clock** - The clock component.",
@@ -3357,143 +3090,410 @@
                 "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Makes the input required.",
-                "type": "boolean"
+                "name": "required",
+                "description": "Makes the input required.",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Marks the field as optional.",
+                "type": "boolean"
+              },
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the date-time picker instead of above it.",
+                "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": "max",
+                "description": "The maximum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "seconds",
+                "description": "Show seconds in the time picker.",
+                "type": "boolean"
+              },
+              {
+                "name": "format",
+                "description": "Time format for the clock component.",
+                "type": "'locale' | '12h' | '24h'"
+              },
+              {
+                "name": "minuteInterval",
+                "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
+                "type": "number"
+              },
+              {
+                "name": "defaultTime",
+                "description": "Default time to set when a date is selected without existing time.",
+                "type": "'start' | 'end'"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              {
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its trigger.",
+                "type": "number"
+              },
+              {
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its trigger.",
+                "type": "number"
+              },
+              {
+                "name": "inlinePickers",
+                "description": "Display the pickers inline without the dropdown and input fields.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the input is populated.",
+                "type": "boolean"
+              },
+              {
+                "name": "normalizeMode",
+                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+                "type": "'none' | 'local'"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-change",
+                "description": "Emitted when the date-time value changes."
+              },
+              {
+                "name": "ev-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "ev-clear",
+                "description": "Emitted when the input is cleared."
+              }
+            ]
+          }
+        },
+        {
+          "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-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 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 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": "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": "size",
+              "description": "The dialog's size.",
+              "value": {
+                "type": "'fitted' | 'full' | 'auto'",
+                "default": "'auto'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The dialog's main content." },
+            {
+              "name": "label",
+              "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": "optional",
-                "description": "Marks the field as optional.",
+                "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": "dirty",
-                "description": "Adds the dirty indicator mark.",
-                "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": "inline",
-                "description": "Arranges the label inline next to the date-time picker instead of above it.",
+                "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 input's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
+                "description": "The dialog's size.",
+                "type": "'fitted' | 'full' | 'auto'"
+              }
+            ],
+            "events": [
               {
-                "name": "min",
-                "description": "The minimum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
+                "name": "ev-show",
+                "description": "Emitted when the dialog opens."
               },
               {
-                "name": "max",
-                "description": "The maximum 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": "seconds",
-                "description": "Show seconds in the time picker.",
-                "type": "boolean"
+                "name": "ev-hide",
+                "description": "Emitted when the dialog closes."
               },
               {
-                "name": "format",
-                "description": "Time format for the clock component.",
-                "type": "'locale' | '12h' | '24h'"
+                "name": "ev-after-hide",
+                "description": "Emitted after the dialog closes and all animations are complete."
               },
               {
-                "name": "minuteInterval",
-                "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-                "type": "number"
+                "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": "defaultTime",
-                "description": "Default time to set when a date is selected without existing time.",
-                "type": "'start' | 'end'"
-              },
+                "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-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",
+              "description": "The drawer's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-show",
+              "description": "Emitted when the drawer opens."
+            },
+            {
+              "name": "ev-after-show",
+              "description": "Emitted after the drawer opens and all animations are complete."
+            },
+            {
+              "name": "ev-hide",
+              "description": "Emitted when the drawer closes."
+            },
+            {
+              "name": "ev-after-hide",
+              "description": "Emitted after the drawer closes and all animations are complete."
+            },
+            {
+              "name": "ev-initial-focus",
+              "description": "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."
+            },
+            {
+              "name": "ev-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "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."
+            }
+          ],
+          "js": {
+            "properties": [
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-                "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."
               },
+              { "name": "drawer", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
               {
-                "name": "placement",
-                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "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.",
+                "type": "boolean"
               },
               {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its trigger.",
-                "type": "number"
+                "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.",
+                "type": "string"
               },
               {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its trigger.",
-                "type": "number"
+                "name": "placement",
+                "description": "The direction from which the drawer will open.",
+                "type": "'top' | 'end' | 'bottom' | 'start'"
               },
               {
-                "name": "inlinePickers",
-                "description": "Display the pickers inline without the dropdown and input fields.",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "clearable",
-                "description": "Adds a clear button when the input is populated.",
+                "name": "noHeader",
+                "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.",
                 "type": "boolean"
-              },
+              }
+            ],
+            "events": [
               {
-                "name": "normalizeMode",
-                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
-                "type": "'none' | 'local'"
+                "name": "ev-show",
+                "description": "Emitted when the drawer opens."
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
+                "name": "ev-after-show",
+                "description": "Emitted after the drawer opens and all animations are complete."
               },
               {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
+                "name": "ev-hide",
+                "description": "Emitted when the drawer closes."
+              },
               {
-                "name": "ev-change",
-                "description": "Emitted when the date-time value changes."
+                "name": "ev-after-hide",
+                "description": "Emitted after the drawer closes and all animations are complete."
               },
               {
-                "name": "ev-input",
-                "description": "Emitted when the control receives input."
+                "name": "ev-initial-focus",
+                "description": "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."
               },
               {
-                "name": "ev-clear",
-                "description": "Emitted when the input is cleared."
+                "name": "ev-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "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."
               }
             ]
           }
         },
-        {
-          "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 base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
@@ -9401,7 +9401,7 @@
         },
         {
           "name": "lynk-tag",
-          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **ev-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n- **prefix** - Used to prepend an icon or similar element to the tag.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **content** - The tag content.\n- **remove-button** - The remove button.\n- **remove-button__base** - The remove button's `base` part.",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **ev-remove** - Emitted when the remove button is activated.\n- **ev-change** - Emitted when a `selectable` tag's `checked` state changes from user interaction.\n\n### **Slots:**\n - _default_ - The tag's content.\n- **prefix** - Used to prepend an icon or similar element to the tag.\n- **checked-icon** - The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **content** - The tag content.\n- **checked-icon** - The check icon shown when a selectable tag is checked.\n- **remove-button** - The remove button.\n- **remove-button__base** - The remove button's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -9425,6 +9425,16 @@
                 "default": "'outlined filled'"
               }
             },
+            {
+              "name": "selectable",
+              "description": "Makes the tag behave like a checkbox: clicking (or pressing Space/Enter when focused) toggles\nits `checked` state. A check icon appears in the prefix position and the appearance switches to\n`loud` while checked. Ignored on `removable` tags, whose click target is the remove button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "The checked state of a `selectable` tag.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "size",
               "description": "The tag's size.",
@@ -9459,12 +9469,20 @@
             {
               "name": "prefix",
               "description": "Used to prepend an icon or similar element to the tag."
+            },
+            {
+              "name": "checked-icon",
+              "description": "The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check."
             }
           ],
           "events": [
             {
               "name": "ev-remove",
               "description": "Emitted when the remove button is activated."
+            },
+            {
+              "name": "ev-change",
+              "description": "Emitted when a `selectable` tag's `checked` state changes from user interaction."
             }
           ],
           "js": {
@@ -9483,6 +9501,16 @@
                 "description": "The tag's visual appearance.",
                 "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'"
               },
+              {
+                "name": "selectable",
+                "description": "Makes the tag behave like a checkbox: clicking (or pressing Space/Enter when focused) toggles\nits `checked` state. A check icon appears in the prefix position and the appearance switches to\n`loud` while checked. Ignored on `removable` tags, whose click target is the remove button.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "The checked state of a `selectable` tag.",
+                "type": "boolean"
+              },
               {
                 "name": "size",
                 "description": "The tag's size.",
@@ -9512,6 +9540,10 @@
               {
                 "name": "ev-remove",
                 "description": "Emitted when the remove button is activated."
+              },
+              {
+                "name": "ev-change",
+                "description": "Emitted when a `selectable` tag's `checked` state changes from user interaction."
               }
             ]
           }