@uplynk/lynk-design 1.15.0 → 1.17.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@uplynk/lynk-design",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -158,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.",
@@ -323,53 +370,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.",
-          "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-avatar",
           "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
@@ -1465,14 +1465,6 @@
             ]
           }
         },
-        {
-          "name": "lynk-col",
-          "description": "Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
         {
           "name": "lynk-clock",
           "description": "A time picker component with hour, minute, second, and AM/PM columns.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n\n### **Methods:**\n - **scrollToCurrentTime(instant)** - Public method to scroll to the current selected time\n\n### **CSS Properties:**\n - **--height** - The default height of the clock columns _(default: undefined)_\n- **--selected-color** - The selected date color _(default: undefined)_\n- **--selected-text-color** - The text color on a selected date _(default: undefined)_\n- **--hover-color** - The background hover color for a date _(default: undefined)_\n- **--border-color** - The color of the dividers between columns _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **time-picker** - The time picker container.\n- **column** - A time column (hours, minutes, or AM/PM).\n- **column-header** - The header of a time column.\n- **time-item** - An individual time item.\n- **time-item--selected** - The selected time item.\n- **ampm-toggle** - The AM/PM toggle buttons.",
@@ -1565,6 +1557,14 @@
             ]
           }
         },
+        {
+          "name": "lynk-col",
+          "description": "Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "lynk-colgroup",
           "description": "Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-col>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
@@ -1581,7 +1581,7 @@
         },
         {
           "name": "lynk-color-picker",
-          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the color picker loses focus.\n- **ev-change** - Emitted when the color picker's value changes.\n- **ev-focus** - Emitted when the color picker receives focus.\n- **ev-input** - Emitted when the color picker 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 - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
+          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the color picker loses focus.\n- **ev-change** - Emitted when the color picker's value changes.\n- **ev-focus** - Emitted when the color picker receives focus.\n- **ev-input** - Emitted when the color picker 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 - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n- **help-text** - Help text that describes how to use the color picker.\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 color picker. Alternatively, you can use the `help-tip` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -1594,6 +1594,34 @@
               "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "help-text",
+              "description": "The help text below the color picker. 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": "state",
+              "description": "The color picker's styled validity state.",
+              "value": {
+                "type": "'error' | 'warning' | 'success' | 'default'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "dirty",
+              "description": "Adds the dirty indicator mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label-inline",
+              "description": "Arranges the label inline next to the color picker instead of above it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "format",
               "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
@@ -1630,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.",
@@ -1640,6 +1673,14 @@
               "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
               "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 inside 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": "uppercase",
               "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
@@ -1664,12 +1705,25 @@
               "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": [
             {
               "name": "label",
               "description": "The color picker's form label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Help text that describes how to use the color picker."
+            },
+            {
+              "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 color picker. Alternatively, you can use the `help-tip` attribute."
             }
           ],
           "events": [
@@ -1716,6 +1770,31 @@
                 "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
                 "type": "string"
               },
+              {
+                "name": "helpText",
+                "description": "The help text below the color picker. 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": "state",
+                "description": "The color picker's styled validity state.",
+                "type": "'error' | 'warning' | 'success' | 'default'"
+              },
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "labelInline",
+                "description": "Arranges the label inline next to the color picker instead of above it.",
+                "type": "boolean"
+              },
               {
                 "name": "format",
                 "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
@@ -1746,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.",
@@ -1756,6 +1840,11 @@
                 "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
                 "type": "boolean"
               },
+              {
+                "name": "placement",
+                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
               {
                 "name": "uppercase",
                 "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
@@ -1781,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"
@@ -1855,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.",
@@ -2057,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.",
@@ -2382,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.",
@@ -2505,6 +2624,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.",
@@ -2566,170 +2690,39 @@
           }
         },
         {
-          "name": "lynk-dialog",
-          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
+          "name": "lynk-date-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": "open",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "name": "name",
+              "description": "The input's name attribute.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "no-header",
-              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "value": { "type": "string" }
             },
-            {
-              "name": "size",
-              "description": "The dialog's size.",
-              "value": {
-                "type": "'fitted' | 'full' | 'auto'",
-                "default": "'auto'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dialog's main content." },
             {
               "name": "label",
-              "description": "The dialog's label. Alternatively, you can use the label prop."
+              "description": "The input's label.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "header-actions",
-              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`."
+              "name": "placeholder",
+              "description": "Placeholder text to show when the input is empty.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "footer",
-              "description": "The dialog's footer, usually one or more buttons representing various options."
-            }
-          ],
-          "events": [
+              "name": "help-text",
+              "description": "The help text below the input.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
-              "name": "ev-show",
-              "description": "Emitted when the dialog opens."
-            },
-            {
-              "name": "ev-after-show",
-              "description": "Emitted after the dialog opens and all animations are complete."
-            },
-            {
-              "name": "ev-hide",
-              "description": "Emitted when the dialog closes."
-            },
-            {
-              "name": "ev-after-hide",
-              "description": "Emitted after the dialog closes and all animations are complete."
-            },
-            {
-              "name": "ev-initial-focus",
-              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-            },
-            {
-              "name": "ev-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "modal",
-                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.",
-                "type": "Modal"
-              },
-              { "name": "dialog", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "noHeader",
-                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-                "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "The dialog's size.",
-                "type": "'fitted' | 'full' | 'auto'"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-show",
-                "description": "Emitted when the dialog opens."
-              },
-              {
-                "name": "ev-after-show",
-                "description": "Emitted after the dialog opens and all animations are complete."
-              },
-              {
-                "name": "ev-hide",
-                "description": "Emitted when the dialog closes."
-              },
-              {
-                "name": "ev-after-hide",
-                "description": "Emitted after the dialog closes and all animations are complete."
-              },
-              {
-                "name": "ev-initial-focus",
-                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-              },
-              {
-                "name": "ev-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-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": "help-tip",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
@@ -2746,6 +2739,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.",
@@ -2925,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.",
@@ -3030,6 +3033,137 @@
             ]
           }
         },
+        {
+          "name": "lynk-dialog",
+          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "no-header",
+              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "The dialog's size.",
+              "value": {
+                "type": "'fitted' | 'full' | 'auto'",
+                "default": "'auto'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The dialog's main content." },
+            {
+              "name": "label",
+              "description": "The dialog's label. Alternatively, you can use the label prop."
+            },
+            {
+              "name": "header-actions",
+              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`."
+            },
+            {
+              "name": "footer",
+              "description": "The dialog's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-show",
+              "description": "Emitted when the dialog opens."
+            },
+            {
+              "name": "ev-after-show",
+              "description": "Emitted after the dialog opens and all animations are complete."
+            },
+            {
+              "name": "ev-hide",
+              "description": "Emitted when the dialog closes."
+            },
+            {
+              "name": "ev-after-hide",
+              "description": "Emitted after the dialog closes and all animations are complete."
+            },
+            {
+              "name": "ev-initial-focus",
+              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+            },
+            {
+              "name": "ev-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "modal",
+                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.",
+                "type": "Modal"
+              },
+              { "name": "dialog", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "noHeader",
+                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The dialog's size.",
+                "type": "'fitted' | 'full' | 'auto'"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-show",
+                "description": "Emitted when the dialog opens."
+              },
+              {
+                "name": "ev-after-show",
+                "description": "Emitted after the dialog opens and all animations are complete."
+              },
+              {
+                "name": "ev-hide",
+                "description": "Emitted when the dialog closes."
+              },
+              {
+                "name": "ev-after-hide",
+                "description": "Emitted after the dialog closes and all animations are complete."
+              },
+              {
+                "name": "ev-initial-focus",
+                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              },
+              {
+                "name": "ev-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+              }
+            ]
+          }
+        },
         {
           "name": "lynk-divider",
           "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
@@ -3348,8 +3482,169 @@
           }
         },
         {
-          "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": "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": [
             {
@@ -3562,171 +3857,30 @@
               {
                 "name": "minute",
                 "description": "The format for displaying the minute.",
-                "type": "'numeric' | '2-digit'"
-              },
-              {
-                "name": "second",
-                "description": "The format for displaying the second.",
-                "type": "'numeric' | '2-digit'"
-              },
-              {
-                "name": "timeZoneName",
-                "description": "The format for displaying the time.",
-                "type": "'short' | 'long'"
-              },
-              {
-                "name": "timeZone",
-                "description": "The time zone to express the time in.",
-                "type": "string"
-              },
-              {
-                "name": "hourFormat",
-                "description": "When set, 24 hour time will always be used.",
-                "type": "'auto' | '12' | '24'"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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": "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": "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": "dirty",
-                "description": "Adds the dirty indicator mark.",
-                "type": "boolean"
+                "type": "'numeric' | '2-digit'"
               },
               {
-                "name": "focused",
-                "description": "Controls the focused state styling.",
-                "type": "boolean"
+                "name": "second",
+                "description": "The format for displaying the second.",
+                "type": "'numeric' | '2-digit'"
               },
               {
-                "name": "inline",
-                "description": "Arranges the label inline next to the control instead of above it.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
+                "name": "timeZoneName",
+                "description": "The format for displaying the time.",
+                "type": "'short' | 'long'"
+              },
               {
-                "name": "ev-focus",
-                "description": "Emitted when field or slotted element gains focus."
+                "name": "timeZone",
+                "description": "The time zone to express the time in.",
+                "type": "string"
               },
               {
-                "name": "ev-blur",
-                "description": "Emitted when field or slotted element loses focus."
+                "name": "hourFormat",
+                "description": "When set, 24 hour time will always be used.",
+                "type": "'auto' | '12' | '24'"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -4336,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.",
@@ -4595,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.",
@@ -5088,150 +5252,475 @@
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "href",
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "value": { "type": "string", "default": "''" }
+              "name": "href",
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "value": {
+                "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.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selected",
+              "description": "Draws the nav item in a highlighted or active state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "expanded",
+              "description": "Displays nested child nav-items if slotted",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Draws the nav item in a disabled state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-label",
+              "description": "Disables the label and replaces with a tooltip.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The nav item's label." },
+            {
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the nav item."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the nav item."
+            },
+            {
+              "name": "children",
+              "description": "Used to nest nav items under a nav item."
+            }
+          ],
+          "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."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "isParent", "type": "boolean" },
+              { "name": "isChild", "type": "boolean" },
+              { "name": "loading", "type": "boolean" },
+              { "name": "depth", "type": "number" },
+              { "name": "squished", "type": "boolean" },
+              { "name": "title", "type": "string" },
+              {
+                "name": "name",
+                "description": "An optional name for the button. Ignored when `href` is set.",
+                "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": "target",
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "value": {
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              }
+              "name": "max",
+              "description": "The maximum allowed value.",
+              "value": { "type": "number | undefined" }
             },
             {
-              "name": "download",
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "value": { "type": "string | undefined" }
+              "name": "step",
+              "description": "The amount to increment/decrement by.",
+              "value": { "type": "number", "default": "1" }
             },
             {
-              "name": "selected",
-              "description": "Draws the nav item in a highlighted or active state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "state",
+              "description": "The input's feedback status using manual validation.",
+              "value": {
+                "type": "'error' | 'warning' | 'success' | 'default'",
+                "default": "'default'"
+              }
             },
             {
-              "name": "expanded",
-              "description": "Displays nested child nav-items if slotted",
+              "name": "inline",
+              "description": "Arranges the label inline next to the input instead of above it.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled",
-              "description": "Draws the nav item in a disabled state.",
-              "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": "no-label",
-              "description": "Disables the label and replaces with a tooltip.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "autofocus",
+              "description": "Indicates that the input should receive focus on page load.",
+              "value": { "type": "boolean" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The nav item's label." },
+            {
+              "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 nav item."
+              "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 nav item."
+              "description": "Used to append an icon or similar element to the input (before steppers)."
             },
             {
-              "name": "children",
-              "description": "Used to nest nav items under a nav item."
+              "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-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."
             }
           ],
           "js": {
             "properties": [
-              { "name": "isParent", "type": "boolean" },
-              { "name": "isChild", "type": "boolean" },
-              { "name": "loading", "type": "boolean" },
-              { "name": "depth", "type": "number" },
-              { "name": "squished", "type": "boolean" },
-              { "name": "title", "type": "string" },
+              { "name": "input", "type": "HTMLInputElement" },
               {
                 "name": "name",
-                "description": "An optional name for the button. Ignored when `href` is set.",
+                "description": "The input's name attribute.",
                 "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.",
+                "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": "href",
-                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+                "name": "helpText",
+                "description": "The input's help text. If you need to display HTML, use the help-text slot instead.",
                 "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": "helpTip",
+                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+                "type": "string"
               },
               {
-                "name": "download",
-                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-                "type": "string | undefined"
+                "name": "placeholder",
+                "description": "Placeholder text to show when the input is empty.",
+                "type": "string"
               },
               {
-                "name": "selected",
-                "description": "Draws the nav item in a highlighted or active state.",
+                "name": "disabled",
+                "description": "Disables the input.",
                 "type": "boolean"
               },
               {
-                "name": "expanded",
-                "description": "Displays nested child nav-items if slotted",
+                "name": "readonly",
+                "description": "Makes the input readonly.",
                 "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Draws the nav item in a disabled state.",
+                "name": "required",
+                "description": "Makes the input a required field.",
                 "type": "boolean"
               },
               {
-                "name": "noLabel",
-                "description": "Disables the label and replaces with a tooltip.",
+                "name": "optional",
+                "description": "Marks the input as optional.",
                 "type": "boolean"
               },
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "childrenSlot", "type": "HTMLSlotElement" },
-              { "name": "navItem", "type": "HTMLElement" },
-              { "name": "childrenContainer", "type": "HTMLDivElement" }
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "filled",
+                "description": "Draws a filled input.",
+                "type": "boolean"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style input with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "noSteppers",
+                "description": "Hides the increment/decrement stepper buttons.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "The minimum allowed value.",
+                "type": "number | undefined"
+              },
+              {
+                "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": "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": "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."
               }
             ]
           }
@@ -6566,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.",
@@ -6661,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.",
@@ -6782,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.",
@@ -6963,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.",
@@ -7274,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.",
@@ -7329,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.",
@@ -7482,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.",
@@ -7537,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.",
@@ -8779,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.",
@@ -8957,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.",
@@ -9173,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.",
@@ -9308,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.",