@uplynk/lynk-design 1.16.0 → 1.17.0

package/cdn/vscode.html-custom-data.json

@@ -33,33 +33,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "auto-size",
-          "description": "How to justify auto-grid items",
-          "values": [{ "name": "fit" }, { "name": "fill" }]
-        },
-        {
-          "name": "min-size",
-          "description": "How to align auto-grid items to each-other",
-          "values": []
-        },
-        {
-          "name": "gap",
-          "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/auto-grid"
-        }
-      ]
-    },
     {
       "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.",
@@ -104,6 +77,33 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "auto-size",
+          "description": "How to justify auto-grid items",
+          "values": [{ "name": "fit" }, { "name": "fill" }]
+        },
+        {
+          "name": "min-size",
+          "description": "How to align auto-grid items to each-other",
+          "values": []
+        },
+        {
+          "name": "gap",
+          "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/auto-grid"
+        }
+      ]
+    },
     {
       "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.",
@@ -892,6 +892,11 @@
           "description": "Disables the color picker.",
           "values": []
         },
+        {
+          "name": "readonly",
+          "description": "Makes the color picker readonly.",
+          "values": []
+        },
         {
           "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.",
@@ -945,6 +950,11 @@
           "name": "required",
           "description": "Makes the color picker a required field.",
           "values": []
+        },
+        {
+          "name": "optional",
+          "description": "Marks the color picker as optional.",
+          "values": []
         }
       ],
       "references": [
@@ -997,11 +1007,21 @@
           "description": "Disables the combobox control.",
           "values": []
         },
+        {
+          "name": "readonly",
+          "description": "Makes the combobox readonly.",
+          "values": []
+        },
         {
           "name": "required",
           "description": "Makes the combobox a required field.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the combobox as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -1078,6 +1098,68 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The text value to copy.",
+          "values": []
+        },
+        {
+          "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\"`.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the copy button.",
+          "values": []
+        },
+        {
+          "name": "copy-label",
+          "description": "A custom label to show in the tooltip.",
+          "values": []
+        },
+        {
+          "name": "success-label",
+          "description": "A custom label to show in the tooltip after copying.",
+          "values": []
+        },
+        {
+          "name": "error-label",
+          "description": "A custom label to show in the tooltip when a copy error occurs.",
+          "values": []
+        },
+        {
+          "name": "feedback-duration",
+          "description": "The length of time to show feedback before restoring the default trigger.",
+          "values": []
+        },
+        {
+          "name": "tooltip-placement",
+          "description": "The preferred placement of the tooltip.",
+          "values": [
+            { "name": "top" },
+            { "name": "right" },
+            { "name": "bottom" },
+            { "name": "left" }
+          ]
+        },
+        {
+          "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.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/copy-button"
+        }
+      ]
+    },
     {
       "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.",
@@ -1123,6 +1205,11 @@
           "description": "Makes the input required.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the field as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -1170,68 +1257,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The text value to copy.",
-          "values": []
-        },
-        {
-          "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\"`.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the copy button.",
-          "values": []
-        },
-        {
-          "name": "copy-label",
-          "description": "A custom label to show in the tooltip.",
-          "values": []
-        },
-        {
-          "name": "success-label",
-          "description": "A custom label to show in the tooltip after copying.",
-          "values": []
-        },
-        {
-          "name": "error-label",
-          "description": "A custom label to show in the tooltip when a copy error occurs.",
-          "values": []
-        },
-        {
-          "name": "feedback-duration",
-          "description": "The length of time to show feedback before restoring the default trigger.",
-          "values": []
-        },
-        {
-          "name": "tooltip-placement",
-          "description": "The preferred placement of the tooltip.",
-          "values": [
-            { "name": "top" },
-            { "name": "right" },
-            { "name": "bottom" },
-            { "name": "left" }
-          ]
-        },
-        {
-          "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.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/copy-button"
-        }
-      ]
-    },
     {
       "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.",
@@ -1277,6 +1302,11 @@
           "description": "Makes the input required.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the field as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -1553,6 +1583,83 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "The fields's styled validity state",
+          "values": [
+            { "name": "error" },
+            { "name": "warning" },
+            { "name": "success" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The input's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "The input's label. Alternatively, you can use the label slot.",
+          "values": []
+        },
+        { "name": "id", "values": [] },
+        {
+          "name": "help-text",
+          "description": "The help text below the input. Alternatively, you can use the help-text slot.",
+          "values": []
+        },
+        {
+          "name": "help-tip",
+          "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Adds the required mark.",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "Adds the optional mark.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Adds the readonly lock mark.",
+          "values": []
+        },
+        {
+          "name": "dirty",
+          "description": "Adds the dirty indicator mark.",
+          "values": []
+        },
+        {
+          "name": "focused",
+          "description": "Controls the focused state styling.",
+          "values": []
+        },
+        {
+          "name": "inline",
+          "description": "Arranges the label inline next to the control instead of above it.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/form-field"
+        }
+      ]
+    },
     {
       "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.",
@@ -1671,107 +1778,40 @@
           "values": [{ "name": "numeric" }, { "name": "2-digit" }]
         },
         {
-          "name": "hour",
-          "description": "The format for displaying the hour.",
-          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
-        },
-        {
-          "name": "minute",
-          "description": "The format for displaying the minute.",
-          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
-        },
-        {
-          "name": "second",
-          "description": "The format for displaying the second.",
-          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
-        },
-        {
-          "name": "time-zone-name",
-          "description": "The format for displaying the time.",
-          "values": [{ "name": "short" }, { "name": "long" }]
-        },
-        {
-          "name": "time-zone",
-          "description": "The time zone to express the time in.",
-          "values": []
-        },
-        {
-          "name": "hour-format",
-          "description": "When set, 24 hour time will always be used.",
-          "values": [{ "name": "auto" }, { "name": "12" }, { "name": "24" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/format-date"
-        }
-      ]
-    },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "state",
-          "description": "The fields's styled validity state",
-          "values": [
-            { "name": "error" },
-            { "name": "warning" },
-            { "name": "success" },
-            { "name": "default" }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "The input's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "label",
-          "description": "The input's label. Alternatively, you can use the label slot.",
-          "values": []
-        },
-        { "name": "id", "values": [] },
-        {
-          "name": "help-text",
-          "description": "The help text below the input. Alternatively, you can use the help-text slot.",
-          "values": []
-        },
-        {
-          "name": "help-tip",
-          "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-          "values": []
+          "name": "hour",
+          "description": "The format for displaying the hour.",
+          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
         },
         {
-          "name": "required",
-          "description": "Adds the required mark.",
-          "values": []
+          "name": "minute",
+          "description": "The format for displaying the minute.",
+          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
         },
         {
-          "name": "dirty",
-          "description": "Adds the dirty indicator mark.",
-          "values": []
+          "name": "second",
+          "description": "The format for displaying the second.",
+          "values": [{ "name": "numeric" }, { "name": "2-digit" }]
         },
         {
-          "name": "focused",
-          "description": "Controls the focused state styling.",
-          "values": []
+          "name": "time-zone-name",
+          "description": "The format for displaying the time.",
+          "values": [{ "name": "short" }, { "name": "long" }]
         },
         {
-          "name": "inline",
-          "description": "Arranges the label inline next to the control instead of above it.",
+          "name": "time-zone",
+          "description": "The time zone to express the time in.",
           "values": []
+        },
+        {
+          "name": "hour-format",
+          "description": "When set, 24 hour time will always be used.",
+          "values": [{ "name": "auto" }, { "name": "12" }, { "name": "24" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://lynk.design/components/form-field"
+          "url": "https://lynk.design/components/format-date"
         }
       ]
     },
@@ -2183,6 +2223,11 @@
           "description": "Makes the input a required field.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the input as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -2499,6 +2544,137 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The input's name attribute.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current numeric value.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The input's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "The input's label. If you need to display HTML, use the label slot instead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The input's help text. If you need to display HTML, use the help-text slot instead.",
+          "values": []
+        },
+        {
+          "name": "help-tip",
+          "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to show when the input is empty.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the input.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the input readonly.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the input a required field.",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "Marks the input as optional.",
+          "values": []
+        },
+        {
+          "name": "dirty",
+          "description": "Adds the dirty indicator mark.",
+          "values": []
+        },
+        {
+          "name": "filled",
+          "description": "Draws a filled input.",
+          "values": []
+        },
+        {
+          "name": "pill",
+          "description": "Draws a pill-style input with rounded edges.",
+          "values": []
+        },
+        {
+          "name": "no-steppers",
+          "description": "Hides the increment/decrement stepper buttons.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The minimum allowed value.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The maximum allowed value.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The amount to increment/decrement by.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The input's feedback status using manual validation.",
+          "values": [
+            { "name": "error" },
+            { "name": "warning" },
+            { "name": "success" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "inline",
+          "description": "Arranges the label inline next to the input instead of above it.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "autofocus",
+          "description": "Indicates that the input should receive focus on page load.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/number-input"
+        }
+      ]
+    },
     {
       "name": "lynk-optgroup",
       "description": "Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `lynk-option` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the option elements.",
@@ -3174,6 +3350,16 @@
           "description": "Ensures a child radio is checked before allowing the containing form to submit.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the radio group as optional.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the radio group readonly.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -3285,6 +3471,11 @@
           "description": "Adds the dirty indicator mark.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the range as optional.",
+          "values": []
+        },
         {
           "name": "orientation",
           "description": "The orientation of the range.",
@@ -3482,6 +3673,11 @@
           "description": "Disables the select control.",
           "values": []
         },
+        {
+          "name": "readonly",
+          "description": "Makes the select readonly.",
+          "values": []
+        },
         {
           "name": "clearable",
           "description": "Adds a clear button when the select is not empty.",
@@ -3537,6 +3733,11 @@
           "description": "The select's required attribute.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the select as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -4214,6 +4415,11 @@
           "description": "Makes the textarea a required field.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the textarea as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -4382,6 +4588,11 @@
           "description": "Makes the input required.",
           "values": []
         },
+        {
+          "name": "optional",
+          "description": "Marks the field as optional.",
+          "values": []
+        },
         {
           "name": "dirty",
           "description": "Adds the dirty indicator mark.",
@@ -4434,45 +4645,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.",
-      "attributes": [
-        {
-          "name": "state",
-          "description": "Draws the table row using status colors",
-          "values": [
-            { "name": "" },
-            { "name": "primary" },
-            { "name": "accent" },
-            { "name": "danger" },
-            { "name": "success" },
-            { "name": "warning" },
-            { "name": "neutral" },
-            { "name": "info" },
-            { "name": "custom" }
-          ]
-        },
-        {
-          "name": "interactive",
-          "description": "Determines whether to highlight the table row on hover or touch interactions",
-          "values": []
-        },
-        {
-          "name": "active",
-          "description": "Draws the table row in a highlighted state",
-          "values": []
-        },
-        {
-          "name": "pulse",
-          "description": "Pulse the status colors for increased visibility",
-          "values": []
-        }
-      ],
-      "references": [
-        { "name": "Documentation", "url": "https://lynk.design/components/tr" }
-      ]
-    },
     {
       "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.",
@@ -4540,6 +4712,45 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "Draws the table row using status colors",
+          "values": [
+            { "name": "" },
+            { "name": "primary" },
+            { "name": "accent" },
+            { "name": "danger" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "neutral" },
+            { "name": "info" },
+            { "name": "custom" }
+          ]
+        },
+        {
+          "name": "interactive",
+          "description": "Determines whether to highlight the table row on hover or touch interactions",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Draws the table row in a highlighted state",
+          "values": []
+        },
+        {
+          "name": "pulse",
+          "description": "Pulse the status colors for increased visibility",
+          "values": []
+        }
+      ],
+      "references": [
+        { "name": "Documentation", "url": "https://lynk.design/components/tr" }
+      ]
+    },
     {
       "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.",