@uplynk/lynk-design 1.16.0 → 1.17.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.16.0",
+  "version": "1.17.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -49,53 +49,6 @@
             "events": []
           }
         },
-        {
-          "name": "lynk-auto-grid",
-          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "auto-size",
-              "description": "How to justify auto-grid items",
-              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
-            },
-            {
-              "name": "min-size",
-              "description": "How to align auto-grid items to each-other",
-              "value": { "type": "string", "default": "'20rem'" }
-            },
-            {
-              "name": "gap",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "value": {
-                "type": "string",
-                "default": "'var(--lynk-spacing-base)'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "autoSize",
-                "description": "How to justify auto-grid items",
-                "type": "'fit' | 'fill'"
-              },
-              {
-                "name": "minSize",
-                "description": "How to align auto-grid items to each-other",
-                "type": "string"
-              },
-              {
-                "name": "gap",
-                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",
@@ -205,6 +158,53 @@
             ]
           }
         },
+        {
+          "name": "lynk-auto-grid",
+          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "auto-size",
+              "description": "How to justify auto-grid items",
+              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
+            },
+            {
+              "name": "min-size",
+              "description": "How to align auto-grid items to each-other",
+              "value": { "type": "string", "default": "'20rem'" }
+            },
+            {
+              "name": "gap",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "value": {
+                "type": "string",
+                "default": "'var(--lynk-spacing-base)'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "autoSize",
+                "description": "How to justify auto-grid items",
+                "type": "'fit' | 'fill'"
+              },
+              {
+                "name": "minSize",
+                "description": "How to align auto-grid items to each-other",
+                "type": "string"
+              },
+              {
+                "name": "gap",
+                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-animation",
           "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **ev-cancel** - Emitted when the animation is canceled.\n- **ev-finish** - Emitted when the animation finishes.\n- **ev-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
@@ -1658,6 +1658,11 @@
               "description": "Disables the color picker.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "Makes the color picker readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "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.",
@@ -1700,6 +1705,11 @@
               "name": "required",
               "description": "Makes the color picker a required field.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "optional",
+              "description": "Marks the color picker as optional.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -1815,6 +1825,11 @@
                 "description": "Disables the color picker.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Makes the color picker readonly.",
+                "type": "boolean"
+              },
               {
                 "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.",
@@ -1855,6 +1870,11 @@
                 "description": "Makes the color picker a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the color picker as optional.",
+                "type": "boolean"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -1929,11 +1949,21 @@
               "description": "Disables the combobox control.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "Makes the combobox readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "required",
               "description": "Makes the combobox a required field.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the combobox as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -2131,11 +2161,21 @@
                 "description": "Disables the combobox control.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Makes the combobox readonly.",
+                "type": "boolean"
+              },
               {
                 "name": "required",
                 "description": "Makes the combobox a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the combobox as optional.",
+                "type": "boolean"
+              },
               {
                 "name": "dirty",
                 "description": "Adds the dirty indicator mark.",
@@ -2263,342 +2303,109 @@
           }
         },
         {
-          "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-copy-button",
+          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **ev-copy** - Emitted when the data has been copied.\n- **ev-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
           "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.",
+              "description": "The text value to copy.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "help-tip",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "name": "from",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Disables the input.",
+              "description": "Disables the copy button.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "readonly",
-              "description": "Makes the input readonly.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "copy-label",
+              "description": "A custom label to show in the tooltip.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "required",
-              "description": "Makes the input required.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "success-label",
+              "description": "A custom label to show in the tooltip after copying.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "dirty",
-              "description": "Adds the dirty indicator mark.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "error-label",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "inline",
-              "description": "Arranges the label inline next to the date picker instead of above it.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "feedback-duration",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "value": { "type": "number", "default": "1500" }
             },
             {
-              "name": "size",
-              "description": "The input's size.",
+              "name": "tooltip-placement",
+              "description": "The preferred placement of the tooltip.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'top' | 'right' | 'bottom' | 'left'",
+                "default": "'top'"
               }
             },
-            {
-              "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": "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.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "clearable",
-              "description": "Adds a clear button when the input is populated.",
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
-              "name": "label",
-              "description": "The input's label. Alternatively, you can use the label prop."
+              "name": "copy-icon",
+              "description": "The icon to show in the default copy state. Works best with `<lynk-icon>`."
             },
             {
-              "name": "help-text",
-              "description": "Help text that describes how to use the input."
+              "name": "success-icon",
+              "description": "The icon to show when the content is copied. Works best with `<lynk-icon>`."
             },
             {
-              "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."
+              "name": "error-icon",
+              "description": "The icon to show when a copy error occurs. Works best with `<lynk-icon>`."
             }
           ],
           "events": [
             {
-              "name": "ev-change",
-              "description": "Emitted when the date value changes."
-            },
-            {
-              "name": "ev-input",
-              "description": "Emitted when the control receives input."
+              "name": "ev-copy",
+              "description": "Emitted when the data has been copied."
             },
             {
-              "name": "ev-clear",
-              "description": "Emitted when the input is cleared."
+              "name": "ev-error",
+              "description": "Emitted when the data could not be copied."
             }
           ],
           "js": {
             "properties": [
-              { "name": "dropdown", "type": "LynkDropdown" },
-              { "name": "calendar", "type": "LynkCalendar" },
-              { "name": "dateInput", "type": "HTMLInputElement" },
-              { "name": "isOpen", "type": "boolean" },
+              { "name": "copyIcon", "type": "HTMLSlotElement" },
+              { "name": "successIcon", "type": "HTMLSlotElement" },
+              { "name": "errorIcon", "type": "HTMLSlotElement" },
+              { "name": "tooltip", "type": "LynkTooltip" },
+              { "name": "isCopying", "type": "boolean" },
+              { "name": "status", "type": "'rest' | 'success' | 'error'" },
               {
-                "name": "name",
-                "description": "The input's name attribute.",
+                "name": "value",
+                "description": "The text value to copy.",
                 "type": "string"
               },
               {
-                "name": "value",
-                "description": "The current value in ISO format (YYYY-MM-DD).",
+                "name": "from",
+                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
                 "type": "string"
               },
               {
-                "name": "defaultValue",
-                "description": "Gets or sets the default value used to reset this element.",
-                "type": "string"
+                "name": "disabled",
+                "description": "Disables the copy button.",
+                "type": "boolean"
               },
               {
-                "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.",
-                "type": "boolean"
-              },
-              {
-                "name": "inline",
-                "description": "Arranges the label inline next to the date 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": "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": "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."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-copy-button",
-          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **ev-copy** - Emitted when the data has been copied.\n- **ev-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The text value to copy.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "from",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the copy button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "copy-label",
-              "description": "A custom label to show in the tooltip.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "success-label",
-              "description": "A custom label to show in the tooltip after copying.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "error-label",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "feedback-duration",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "value": { "type": "number", "default": "1500" }
-            },
-            {
-              "name": "tooltip-placement",
-              "description": "The preferred placement of the tooltip.",
-              "value": {
-                "type": "'top' | 'right' | 'bottom' | 'left'",
-                "default": "'top'"
-              }
-            },
-            {
-              "name": "hoist",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "copy-icon",
-              "description": "The icon to show in the default copy state. Works best with `<lynk-icon>`."
-            },
-            {
-              "name": "success-icon",
-              "description": "The icon to show when the content is copied. Works best with `<lynk-icon>`."
-            },
-            {
-              "name": "error-icon",
-              "description": "The icon to show when a copy error occurs. Works best with `<lynk-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-copy",
-              "description": "Emitted when the data has been copied."
-            },
-            {
-              "name": "ev-error",
-              "description": "Emitted when the data could not be copied."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "copyIcon", "type": "HTMLSlotElement" },
-              { "name": "successIcon", "type": "HTMLSlotElement" },
-              { "name": "errorIcon", "type": "HTMLSlotElement" },
-              { "name": "tooltip", "type": "LynkTooltip" },
-              { "name": "isCopying", "type": "boolean" },
-              { "name": "status", "type": "'rest' | 'success' | 'error'" },
-              {
-                "name": "value",
-                "description": "The text value to copy.",
-                "type": "string"
-              },
-              {
-                "name": "from",
-                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the copy button.",
-                "type": "boolean"
-              },
-              {
-                "name": "copyLabel",
-                "description": "A custom label to show in the tooltip.",
+                "name": "copyLabel",
+                "description": "A custom label to show in the tooltip.",
                 "type": "string"
               },
               {
@@ -2640,8 +2447,8 @@
           }
         },
         {
-          "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- **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.",
+          "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": [
             {
@@ -2651,8 +2458,8 @@
             },
             {
               "name": "value",
-              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
-              "value": { "type": "string" }
+              "description": "The current value in ISO format (YYYY-MM-DD).",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "label",
@@ -2689,6 +2496,11 @@
               "description": "Makes the input required.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the field as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -2696,7 +2508,7 @@
             },
             {
               "name": "inline",
-              "description": "Arranges the label inline next to the date-time picker instead of above it.",
+              "description": "Arranges the label inline next to the date picker instead of above it.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2718,44 +2530,287 @@
               "value": { "type": "string" }
             },
             {
-              "name": "seconds",
-              "description": "Show seconds in the time picker.",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "format",
-              "description": "Time format for the clock component.",
-              "value": {
-                "type": "'locale' | '12h' | '24h'",
-                "default": "'locale'"
-              }
-            },
+              "name": "clearable",
+              "description": "Adds a clear button when the input is populated.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
             {
-              "name": "minute-interval",
-              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-              "value": { "type": "number", "default": "1" }
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the label prop."
             },
             {
-              "name": "default-time",
-              "description": "Default time to set when a date is selected without existing time.",
-              "value": { "type": "'start' | 'end'", "default": "'start'" }
+              "name": "help-text",
+              "description": "Help text that describes how to use the input."
             },
             {
-              "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.",
-              "value": { "type": "boolean", "default": "false" }
+              "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": "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.",
-              "value": {
-                "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'",
-                "default": "'bottom-start'"
-              }
+              "name": "ev-input",
+              "description": "Emitted when the control receives input."
             },
             {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "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": "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": "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 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": "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": "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."
+              }
+            ]
+          }
+        },
+        {
+          "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- **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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The input's name attribute.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "value": { "type": "string" }
+            },
+            {
+              "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": "optional",
+              "description": "Marks the field as optional.",
+              "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-time picker instead of above it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "The input's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "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": "seconds",
+              "description": "Show seconds in the time picker.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "format",
+              "description": "Time format for the clock component.",
+              "value": {
+                "type": "'locale' | '12h' | '24h'",
+                "default": "'locale'"
+              }
+            },
+            {
+              "name": "minute-interval",
+              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "default-time",
+              "description": "Default time to set when a date is selected without existing time.",
+              "value": { "type": "'start' | 'end'", "default": "'start'" }
+            },
+            {
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": {
+                "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'",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
               "value": { "type": "number", "default": "0" }
             },
             {
@@ -2868,6 +2923,11 @@
                 "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.",
@@ -3422,17 +3482,178 @@
           }
         },
         {
-          "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.",
+          "name": "lynk-form-field",
+          "description": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n---\n\n\n### **Events:**\n - **ev-focus** - Emitted when field or slotted element gains focus.\n- **ev-blur** - Emitted when field or slotted element loses focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - Custom label content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label wrapper.\n- **control** - The component's slotted control wrapper.\n- **help-text** - The component's help-text wrapper.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "start",
-              "description": "Flank from first item",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "end",
+              "name": "state",
+              "description": "The fields's styled validity state",
+              "value": {
+                "type": "'error' | 'warning' | 'success' | 'default'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The input's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the label slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "id", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "help-text",
+              "description": "The help text below the input. Alternatively, you can use the help-text slot.",
+              "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": "required",
+              "description": "Adds the required mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "optional",
+              "description": "Adds the optional mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Adds the readonly lock mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dirty",
+              "description": "Adds the dirty indicator mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "focused",
+              "description": "Controls the focused state styling.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "inline",
+              "description": "Arranges the label inline next to the control instead of above it.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "help-tip", "description": "Custom help-tip content." },
+            { "name": "help-text", "description": "Custom help-text content." },
+            { "name": "label", "description": "Custom label content." }
+          ],
+          "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."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "containingElement",
+                "description": "The field will lose focus when the user interacts outside of this element (e.g. clicking).",
+                "type": "HTMLElement | undefined"
+              },
+              {
+                "name": "state",
+                "description": "The fields's styled validity state",
+                "type": "'error' | 'warning' | 'success' | 'default'"
+              },
+              {
+                "name": "size",
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "label",
+                "description": "The input's label. Alternatively, you can use the label slot.",
+                "type": "string"
+              },
+              { "name": "id", "type": "string" },
+              {
+                "name": "helpText",
+                "description": "The help text below the input. Alternatively, you can use the help-text slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTip",
+                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Adds the required mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Adds the optional mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Adds the readonly lock mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "focused",
+                "description": "Controls the focused state styling.",
+                "type": "boolean"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the control instead of above it.",
+                "type": "boolean"
+              }
+            ],
+            "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" }
             },
@@ -3663,215 +3884,74 @@
           }
         },
         {
-          "name": "lynk-form-field",
-          "description": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n---\n\n\n### **Events:**\n - **ev-focus** - Emitted when field or slotted element gains focus.\n- **ev-blur** - Emitted when field or slotted element loses focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - Custom label content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label wrapper.\n- **control** - The component's slotted control wrapper.\n- **help-text** - The component's help-text wrapper.",
+          "name": "lynk-format-number",
+          "description": "Formats a number using the specified locale and options.\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "state",
-              "description": "The fields's styled validity state",
-              "value": {
-                "type": "'error' | 'warning' | 'success' | 'default'",
-                "default": "'default'"
-              }
+              "name": "value",
+              "description": "The number to format.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "size",
-              "description": "The input's size.",
+              "name": "type",
+              "description": "The formatting style to use.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'currency' | 'decimal' | 'percent'",
+                "default": "'decimal'"
               }
             },
             {
-              "name": "label",
-              "description": "The input's label. Alternatively, you can use the label slot.",
-              "value": { "type": "string", "default": "''" }
+              "name": "no-grouping",
+              "description": "Turns off grouping separators.",
+              "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "id", "value": { "type": "string", "default": "''" } },
             {
-              "name": "help-text",
-              "description": "The help text below the input. Alternatively, you can use the help-text slot.",
-              "value": { "type": "string", "default": "''" }
+              "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": "help-tip",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "value": { "type": "string", "default": "''" }
+              "name": "currency-display",
+              "description": "How to display the currency.",
+              "value": {
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
+                "default": "'symbol'"
+              }
             },
             {
-              "name": "required",
-              "description": "Adds the required mark.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "minimum-integer-digits",
+              "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
+              "value": { "type": "number" }
             },
             {
-              "name": "dirty",
-              "description": "Adds the dirty indicator mark.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "minimum-fraction-digits",
+              "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
+              "value": { "type": "number" }
             },
             {
-              "name": "focused",
-              "description": "Controls the focused state styling.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "maximum-fraction-digits",
+              "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
+              "value": { "type": "number" }
             },
             {
-              "name": "inline",
-              "description": "Arranges the label inline next to the control instead of above it.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "help-tip", "description": "Custom help-tip content." },
-            { "name": "help-text", "description": "Custom help-text content." },
-            { "name": "label", "description": "Custom label content." }
-          ],
-          "events": [
-            {
-              "name": "ev-focus",
-              "description": "Emitted when field or slotted element gains focus."
+              "name": "minimum-significant-digits",
+              "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
+              "value": { "type": "number" }
             },
             {
-              "name": "ev-blur",
-              "description": "Emitted when field or slotted element loses focus."
+              "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": "defaultSlot", "type": "HTMLSlotElement" },
               {
-                "name": "containingElement",
-                "description": "The field will lose focus when the user interacts outside of this element (e.g. clicking).",
-                "type": "HTMLElement | undefined"
-              },
-              {
-                "name": "state",
-                "description": "The fields's styled validity state",
-                "type": "'error' | 'warning' | 'success' | 'default'"
-              },
-              {
-                "name": "size",
-                "description": "The input's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "label",
-                "description": "The input's label. Alternatively, you can use the label slot.",
-                "type": "string"
-              },
-              { "name": "id", "type": "string" },
-              {
-                "name": "helpText",
-                "description": "The help text below the input. Alternatively, you can use the help-text slot.",
-                "type": "string"
-              },
-              {
-                "name": "helpTip",
-                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-                "type": "string"
-              },
-              {
-                "name": "required",
-                "description": "Adds the required mark.",
-                "type": "boolean"
-              },
-              {
-                "name": "dirty",
-                "description": "Adds the dirty indicator mark.",
-                "type": "boolean"
-              },
-              {
-                "name": "focused",
-                "description": "Controls the focused state styling.",
-                "type": "boolean"
-              },
-              {
-                "name": "inline",
-                "description": "Arranges the label inline next to the control instead of above it.",
-                "type": "boolean"
-              }
-            ],
-            "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-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": "value",
+                "description": "The number to format.",
+                "type": "number"
               },
               {
                 "name": "type",
@@ -4410,6 +4490,11 @@
               "description": "Makes the input a required field.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the input as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -4669,6 +4754,11 @@
                 "description": "Makes the input a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the input as optional.",
+                "type": "boolean"
+              },
               {
                 "name": "dirty",
                 "description": "Adds the dirty indicator mark.",
@@ -5246,66 +5336,391 @@
                 "type": "string"
               },
               {
-                "name": "value",
-                "description": "A unique value to store in the nav item. This can be used as a way to identify nav items when selected.",
-                "type": "string"
+                "name": "value",
+                "description": "A unique value to store in the nav item. This can be used as a way to identify nav items when selected.",
+                "type": "string"
+              },
+              {
+                "name": "href",
+                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+                "type": "string"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is set.",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              {
+                "name": "download",
+                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selected",
+                "description": "Draws the nav item in a highlighted or active state.",
+                "type": "boolean"
+              },
+              {
+                "name": "expanded",
+                "description": "Displays nested child nav-items if slotted",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the nav item in a disabled state.",
+                "type": "boolean"
+              },
+              {
+                "name": "noLabel",
+                "description": "Disables the label and replaces with a tooltip.",
+                "type": "boolean"
+              },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "childrenSlot", "type": "HTMLSlotElement" },
+              { "name": "navItem", "type": "HTMLElement" },
+              { "name": "childrenContainer", "type": "HTMLDivElement" }
+            ],
+            "events": [
+              {
+                "name": "ev-expand",
+                "description": "Emitted when the nav item expands."
+              },
+              {
+                "name": "ev-after-expand",
+                "description": "Emitted after the nav item expands and all animations are complete."
+              },
+              {
+                "name": "ev-collapse",
+                "description": "Emitted when the nav item collapses."
+              },
+              {
+                "name": "ev-after-collapse",
+                "description": "Emitted after the nav item collapses and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "name": "lynk-number-input",
+          "description": "Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **stepUp()** - Increments the value by the step amount.\n- **stepDown()** - Decrements the value by the step amount.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity()** - Checks for validity but does not show the browser's 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 the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\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. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the help-tip prop.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input (before steppers).\n- **increment-icon** - An icon to use in lieu of the default increment icon.\n- **decrement-icon** - An icon to use in lieu of the default decrement icon.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **input** - The internal input control.\n- **prefix** - The input prefix container.\n- **suffix** - The input suffix container.\n- **stepper-decrement** - The decrement button.\n- **stepper-increment** - The increment button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The input's name attribute.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current numeric value.",
+              "value": { "type": "number | null", "default": "null" }
+            },
+            {
+              "name": "size",
+              "description": "The input's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The input's label. If you need to display HTML, use the label slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The input's help text. If you need to display HTML, use the help-text slot instead.",
+              "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": "placeholder",
+              "description": "Placeholder text to show when the input is empty.",
+              "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 a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "optional",
+              "description": "Marks the input as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dirty",
+              "description": "Adds the dirty indicator mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "filled",
+              "description": "Draws a filled input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style input with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-steppers",
+              "description": "Hides the increment/decrement stepper buttons.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "min",
+              "description": "The minimum allowed value.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum allowed value.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "step",
+              "description": "The amount to increment/decrement by.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "state",
+              "description": "The input's feedback status using manual validation.",
+              "value": {
+                "type": "'error' | 'warning' | 'success' | 'default'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "inline",
+              "description": "Arranges the label inline next to the input instead of above it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "autofocus",
+              "description": "Indicates that the input should receive focus on page load.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "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. Alternatively, you can use the help-text prop."
+            },
+            {
+              "name": "help-tip",
+              "description": "Help tooltip next to the label. Alternatively, you can use the help-tip prop."
+            },
+            {
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the input."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the input (before steppers)."
+            },
+            {
+              "name": "increment-icon",
+              "description": "An icon to use in lieu of the default increment icon."
+            },
+            {
+              "name": "decrement-icon",
+              "description": "An icon to use in lieu of the default decrement icon."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "ev-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
+            },
+            {
+              "name": "ev-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "ev-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "ev-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              {
+                "name": "name",
+                "description": "The input's name attribute.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current numeric value.",
+                "type": "number | null"
+              },
+              {
+                "name": "size",
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "label",
+                "description": "The input's label. If you need to display HTML, use the label slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The input's help text. If you need to display HTML, use the help-text slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpTip",
+                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show when the input is empty.",
+                "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 a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Marks the input as optional.",
+                "type": "boolean"
               },
               {
-                "name": "href",
-                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-                "type": "string"
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
               },
               {
-                "name": "target",
-                "description": "Tells the browser where to open the link. Only used when `href` is set.",
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                "name": "filled",
+                "description": "Draws a filled input.",
+                "type": "boolean"
               },
               {
-                "name": "download",
-                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-                "type": "string | undefined"
+                "name": "pill",
+                "description": "Draws a pill-style input with rounded edges.",
+                "type": "boolean"
               },
               {
-                "name": "selected",
-                "description": "Draws the nav item in a highlighted or active state.",
+                "name": "noSteppers",
+                "description": "Hides the increment/decrement stepper buttons.",
                 "type": "boolean"
               },
               {
-                "name": "expanded",
-                "description": "Displays nested child nav-items if slotted",
-                "type": "boolean"
+                "name": "min",
+                "description": "The minimum allowed value.",
+                "type": "number | undefined"
               },
               {
-                "name": "disabled",
-                "description": "Draws the nav item in a disabled state.",
+                "name": "max",
+                "description": "The maximum allowed value.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "step",
+                "description": "The amount to increment/decrement by.",
+                "type": "number"
+              },
+              {
+                "name": "state",
+                "description": "The input's feedback status using manual validation.",
+                "type": "'error' | 'warning' | 'success' | 'default'"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the input instead of above it.",
                 "type": "boolean"
               },
               {
-                "name": "noLabel",
-                "description": "Disables the label and replaces with a tooltip.",
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "autofocus",
+                "description": "Indicates that the input should receive focus on page load.",
                 "type": "boolean"
               },
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "childrenSlot", "type": "HTMLSlotElement" },
-              { "name": "navItem", "type": "HTMLElement" },
-              { "name": "childrenContainer", "type": "HTMLDivElement" }
+              {
+                "name": "defaultValue",
+                "description": "Gets or sets the default value used to reset this element.",
+                "type": "number | null"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
             ],
             "events": [
               {
-                "name": "ev-expand",
-                "description": "Emitted when the nav item expands."
+                "name": "ev-blur",
+                "description": "Emitted when the control loses focus."
               },
               {
-                "name": "ev-after-expand",
-                "description": "Emitted after the nav item expands and all animations are complete."
+                "name": "ev-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
               },
               {
-                "name": "ev-collapse",
-                "description": "Emitted when the nav item collapses."
+                "name": "ev-focus",
+                "description": "Emitted when the control gains focus."
               },
               {
-                "name": "ev-after-collapse",
-                "description": "Emitted after the nav item collapses and all animations are complete."
+                "name": "ev-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "ev-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
@@ -6640,6 +7055,16 @@
               "description": "Ensures a child radio is checked before allowing the containing form to submit.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the radio group as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the radio group readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -6735,6 +7160,16 @@
                 "description": "Ensures a child radio is checked before allowing the containing form to submit.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the radio group as optional.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the radio group readonly.",
+                "type": "boolean"
+              },
               {
                 "name": "dirty",
                 "description": "Adds the dirty indicator mark.",
@@ -6856,6 +7291,11 @@
               "description": "Adds the dirty indicator mark.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the range as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "orientation",
               "description": "The orientation of the range.",
@@ -7037,6 +7477,11 @@
                 "description": "Adds the dirty indicator mark.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the range as optional.",
+                "type": "boolean"
+              },
               {
                 "name": "orientation",
                 "description": "The orientation of the range.",
@@ -7348,6 +7793,11 @@
               "description": "Disables the select control.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "Makes the select readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "clearable",
               "description": "Adds a clear button when the select is not empty.",
@@ -7403,6 +7853,11 @@
               "description": "The select's required attribute.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the select as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -7556,6 +8011,11 @@
                 "description": "Disables the select control.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Makes the select readonly.",
+                "type": "boolean"
+              },
               {
                 "name": "clearable",
                 "description": "Adds a clear button when the select is not empty.",
@@ -7611,6 +8071,11 @@
                 "description": "The select's required attribute.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the select as optional.",
+                "type": "boolean"
+              },
               {
                 "name": "dirty",
                 "description": "Adds the dirty indicator mark.",
@@ -8853,6 +9318,11 @@
               "description": "Makes the textarea a required field.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the textarea as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -9031,6 +9501,11 @@
                 "description": "Makes the textarea a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Marks the textarea as optional.",
+                "type": "boolean"
+              },
               {
                 "name": "dirty",
                 "description": "Adds the dirty indicator mark.",
@@ -9247,6 +9722,11 @@
               "description": "Makes the input required.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Marks the field as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dirty",
               "description": "Adds the dirty indicator mark.",
@@ -9382,6 +9862,11 @@
                 "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.",
@@ -9447,67 +9932,6 @@
             ]
           }
         },
-        {
-          "name": "lynk-tr",
-          "description": "Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "state",
-              "description": "Draws the table row using status colors",
-              "value": {
-                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
-              }
-            },
-            {
-              "name": "interactive",
-              "description": "Determines whether to highlight the table row on hover or touch interactions",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "active",
-              "description": "Draws the table row in a highlighted state",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "pulse",
-              "description": "Pulse the status colors for increased visibility",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Should contain 1 or more `<lynk-td>` or `<lynk-th>` components."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "state",
-                "description": "Draws the table row using status colors",
-                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
-              },
-              {
-                "name": "interactive",
-                "description": "Determines whether to highlight the table row on hover or touch interactions",
-                "type": "boolean"
-              },
-              {
-                "name": "active",
-                "description": "Draws the table row in a highlighted state",
-                "type": "boolean"
-              },
-              {
-                "name": "pulse",
-                "description": "Pulse the status colors for increased visibility",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-tooltip",
           "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the tooltip begins to show.\n- **ev-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **ev-hide** - Emitted when the tooltip begins to hide.\n- **ev-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Only the first element will be used as the target.\n- **content** - The tooltip's content. Alternatively, you can use the content prop.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<lynk-popup>` element.\n- **base__popup** - The popup's `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body.",
@@ -9661,6 +10085,67 @@
             ]
           }
         },
+        {
+          "name": "lynk-tr",
+          "description": "Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "state",
+              "description": "Draws the table row using status colors",
+              "value": {
+                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
+              }
+            },
+            {
+              "name": "interactive",
+              "description": "Determines whether to highlight the table row on hover or touch interactions",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Draws the table row in a highlighted state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pulse",
+              "description": "Pulse the status colors for increased visibility",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Should contain 1 or more `<lynk-td>` or `<lynk-th>` components."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "state",
+                "description": "Draws the table row using status colors",
+                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
+              },
+              {
+                "name": "interactive",
+                "description": "Determines whether to highlight the table row on hover or touch interactions",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "Draws the table row in a highlighted state",
+                "type": "boolean"
+              },
+              {
+                "name": "pulse",
+                "description": "Pulse the status colors for increased visibility",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-tree",
           "description": "Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.\n---\n\n\n### **Events:**\n - **ev-selection-change** - Emitted when a tree item is selected or deselected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded. Works best with `<lynk-icon>`.\n- **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--indent-size** - The size of the indentation for nested items. _(default: var(--lynk-spacing-medium))_\n- **--indent-guide-color** - The color of the indentation line. _(default: var(--lynk-color-neutral-200))_\n- **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_\n- **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_\n- **--indent-guide-width** - The width of the indentation line. _(default: 0)_\n- **--gap-size** - The gap between tree-items. _(default: 1)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",