@uplynk/lynk-design 1.14.0 → 1.16.0

package/cdn/custom-elements.json

@@ -138,6 +138,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/auto-grid/auto-grid.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkAutoGrid",
+          "cssProperties": [
+            {
+              "description": "Customize the gap of the auto-grid group.",
+              "name": "--gap",
+              "default": "var(--lynk-spacing-base)"
+            },
+            {
+              "description": "Customize the allowed min-size of the auto-grid items.",
+              "name": "--min-size",
+              "default": "20rem"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "autoSize",
+              "type": {
+                "text": "'fit' | 'fill'"
+              },
+              "default": "'fit'",
+              "description": "How to justify auto-grid items",
+              "attribute": "auto-size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "minSize",
+              "type": {
+                "text": "string"
+              },
+              "default": "'20rem'",
+              "description": "How to align auto-grid items to each-other",
+              "attribute": "min-size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gap",
+              "type": {
+                "text": "string"
+              },
+              "default": "'var(--lynk-spacing-base)'",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "attribute": "gap",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "auto-size",
+              "type": {
+                "text": "'fit' | 'fill'"
+              },
+              "default": "'fit'",
+              "description": "How to justify auto-grid items",
+              "fieldName": "autoSize"
+            },
+            {
+              "name": "min-size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'20rem'",
+              "description": "How to align auto-grid items to each-other",
+              "fieldName": "minSize"
+            },
+            {
+              "name": "gap",
+              "type": {
+                "text": "string"
+              },
+              "default": "'var(--lynk-spacing-base)'",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "fieldName": "gap"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.",
+          "tagNameWithoutPrefix": "auto-grid",
+          "tagName": "lynk-auto-grid",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n * @documentation https://lynk.design/components/auto-grid\n * @since 1.0\n * @status stable\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--gap=var(--lynk-spacing-base)] - Customize the gap of the auto-grid group.\n * @cssproperty [--min-size=20rem] - Customize the allowed min-size of the auto-grid items.\n */",
+          "documentation": "https://lynk.design/components/auto-grid",
+          "since": "1.0",
+          "status": "stable"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkAutoGrid",
+            "module": "components/auto-grid/auto-grid.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -465,127 +586,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/auto-grid/auto-grid.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkAutoGrid",
-          "cssProperties": [
-            {
-              "description": "Customize the gap of the auto-grid group.",
-              "name": "--gap",
-              "default": "var(--lynk-spacing-base)"
-            },
-            {
-              "description": "Customize the allowed min-size of the auto-grid items.",
-              "name": "--min-size",
-              "default": "20rem"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "autoSize",
-              "type": {
-                "text": "'fit' | 'fill'"
-              },
-              "default": "'fit'",
-              "description": "How to justify auto-grid items",
-              "attribute": "auto-size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "minSize",
-              "type": {
-                "text": "string"
-              },
-              "default": "'20rem'",
-              "description": "How to align auto-grid items to each-other",
-              "attribute": "min-size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "string"
-              },
-              "default": "'var(--lynk-spacing-base)'",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "attribute": "gap",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "auto-size",
-              "type": {
-                "text": "'fit' | 'fill'"
-              },
-              "default": "'fit'",
-              "description": "How to justify auto-grid items",
-              "fieldName": "autoSize"
-            },
-            {
-              "name": "min-size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'20rem'",
-              "description": "How to align auto-grid items to each-other",
-              "fieldName": "minSize"
-            },
-            {
-              "name": "gap",
-              "type": {
-                "text": "string"
-              },
-              "default": "'var(--lynk-spacing-base)'",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "fieldName": "gap"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.",
-          "tagNameWithoutPrefix": "auto-grid",
-          "tagName": "lynk-auto-grid",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n * @documentation https://lynk.design/components/auto-grid\n * @since 1.0\n * @status stable\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--gap=var(--lynk-spacing-base)] - Customize the gap of the auto-grid group.\n * @cssproperty [--min-size=20rem] - Customize the allowed min-size of the auto-grid items.\n */",
-          "documentation": "https://lynk.design/components/auto-grid",
-          "since": "1.0",
-          "status": "stable"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkAutoGrid",
-            "module": "components/auto-grid/auto-grid.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.js",
@@ -4860,6 +4860,14 @@
             {
               "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
               "name": "label"
+            },
+            {
+              "description": "Help text that describes how to use the color picker.",
+              "name": "help-text"
+            },
+            {
+              "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.",
+              "name": "help-tip"
             }
           ],
           "members": [
@@ -4870,7 +4878,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-button-group': LynkButtonGroup, 'lynk-button': LynkButton, 'lynk-dropdown': LynkDropdown, 'lynk-icon': LynkIcon, 'lynk-input': LynkInput, 'lynk-visually-hidden': LynkVisuallyHidden }"
+              "default": "{ 'lynk-button-group': LynkButtonGroup, 'lynk-button': LynkButton, 'lynk-dropdown': LynkDropdown, 'lynk-form-field': LynkFormField, 'lynk-icon': LynkIcon, 'lynk-input': LynkInput, 'lynk-visually-hidden': LynkVisuallyHidden }"
             },
             {
               "kind": "field",
@@ -4879,6 +4887,13 @@
               "readonly": true,
               "default": "new FormControlController(this)"
             },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label')"
+            },
             {
               "kind": "field",
               "name": "isSafeValue",
@@ -5033,7 +5048,60 @@
             },
             {
               "kind": "field",
-              "name": "format",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help text below the color picker. Alternatively, you can use the `help-text` slot.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "helpTip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the `help-tip` slot.",
+              "attribute": "help-tip"
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "'error' | 'warning' | 'success' | 'default'"
+              },
+              "default": "'default'",
+              "description": "The color picker's styled validity state.",
+              "attribute": "state",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dirty",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "attribute": "dirty",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "labelInline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Arranges the label inline next to the color picker instead of above it.",
+              "attribute": "label-inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "format",
               "type": {
                 "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
               },
@@ -5114,6 +5182,16 @@
               "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
               "attribute": "opacity"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "| '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'",
+              "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.",
+              "attribute": "placement"
+            },
             {
               "kind": "field",
               "name": "uppercase",
@@ -5595,6 +5673,51 @@
               "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.",
               "fieldName": "label"
             },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help text below the color picker. Alternatively, you can use the `help-text` slot.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "help-tip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the `help-tip` slot.",
+              "fieldName": "helpTip"
+            },
+            {
+              "name": "state",
+              "type": {
+                "text": "'error' | 'warning' | 'success' | 'default'"
+              },
+              "default": "'default'",
+              "description": "The color picker's styled validity state.",
+              "fieldName": "state"
+            },
+            {
+              "name": "dirty",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "fieldName": "dirty"
+            },
+            {
+              "name": "label-inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Arranges the label inline next to the color picker instead of above it.",
+              "fieldName": "labelInline"
+            },
             {
               "name": "format",
               "type": {
@@ -5667,6 +5790,15 @@
               "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
               "fieldName": "opacity"
             },
+            {
+              "name": "placement",
+              "type": {
+                "text": "| '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'",
+              "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.",
+              "fieldName": "placement"
+            },
             {
               "name": "uppercase",
               "type": {
@@ -5721,15 +5853,16 @@
           "tagNameWithoutPrefix": "color-picker",
           "tagName": "lynk-color-picker",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Color pickers allow the user to select a color.\n * @documentation https://lynk.design/components/color-picker\n * @status experimental\n * @since 2.9\n *\n * @dependency lynk-button\n * @dependency lynk-button-group\n * @dependency lynk-dropdown\n * @dependency ev-input\n * @dependency lynk-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n *\n * @event ev-blur - Emitted when the color picker loses focus.\n * @event ev-change - Emitted when the color picker's value changes.\n * @event ev-focus - Emitted when the color picker receives focus.\n * @event ev-input - Emitted when the color picker receives input.\n * @event ev-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eye-dropper-button - The eye dropper button.\n * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.\n * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.\n * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.\n * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__base - The format button's exported `button` part.\n * @csspart format-button__prefix - The format button's exported `prefix` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__suffix - The format button's exported `suffix` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n * @cssproperty --swatch-size - The size of each predefined color swatch.\n */",
+          "jsDoc": "/**\n * @summary Color pickers allow the user to select a color.\n * @documentation https://lynk.design/components/color-picker\n * @status stable\n * @since 2.9\n *\n * @dependency lynk-button\n * @dependency lynk-button-group\n * @dependency lynk-dropdown\n * @dependency lynk-form-field\n * @dependency lynk-input\n * @dependency lynk-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Help text that describes how to use the color picker.\n * @slot 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 * @event ev-blur - Emitted when the color picker loses focus.\n * @event ev-change - Emitted when the color picker's value changes.\n * @event ev-focus - Emitted when the color picker receives focus.\n * @event ev-input - Emitted when the color picker receives input.\n * @event ev-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eye-dropper-button - The eye dropper button.\n * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.\n * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.\n * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.\n * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__base - The format button's exported `button` part.\n * @csspart format-button__prefix - The format button's exported `prefix` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__suffix - The format button's exported `suffix` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n * @cssproperty --swatch-size - The size of each predefined color swatch.\n */",
           "documentation": "https://lynk.design/components/color-picker",
-          "status": "experimental",
+          "status": "stable",
           "since": "2.9",
           "dependencies": [
             "lynk-button",
             "lynk-button-group",
             "lynk-dropdown",
-            "ev-input",
+            "lynk-form-field",
+            "lynk-input",
             "lynk-visually-hidden"
           ]
         }
@@ -6835,68 +6968,66 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/copy-button/copy-button.js",
+      "path": "components/date-picker/date-picker.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkCopyButton",
-          "cssProperties": [
+          "name": "LynkDatePicker",
+          "cssParts": [
             {
-              "description": "The color to use for success feedback.",
-              "name": "--success-color"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The color to use for error feedback.",
-              "name": "--error-color"
-            }
-          ],
-          "cssParts": [
+              "description": "The form control wrapper.",
+              "name": "form-control"
+            },
             {
-              "description": "The internal `<button>` element.",
-              "name": "button"
+              "description": "The label wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The container that holds the copy icon.",
-              "name": "copy-icon"
+              "description": "The input wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The container that holds the success icon.",
-              "name": "success-icon"
+              "description": "The help text wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The container that holds the error icon.",
-              "name": "error-icon"
+              "description": "The input group container.",
+              "name": "input-group"
             },
             {
-              "description": "The tooltip's exported `base` part.",
-              "name": "tooltip__base"
+              "description": "The date input field.",
+              "name": "date-input"
             },
             {
-              "description": "The tooltip's exported `popup` part.",
-              "name": "tooltip__base__popup"
+              "description": "The dropdown trigger button.",
+              "name": "trigger"
             },
             {
-              "description": "The tooltip's exported `arrow` part.",
-              "name": "tooltip__base__arrow"
+              "description": "The dropdown panel.",
+              "name": "dropdown"
             },
             {
-              "description": "The tooltip's exported `body` part.",
-              "name": "tooltip__body"
+              "description": "The calendar component.",
+              "name": "calendar"
             }
           ],
           "slots": [
             {
-              "description": "The icon to show in the default copy state. Works best with `<lynk-icon>`.",
-              "name": "copy-icon"
+              "description": "The input's label. Alternatively, you can use the label prop.",
+              "name": "label"
             },
             {
-              "description": "The icon to show when the content is copied. Works best with `<lynk-icon>`.",
-              "name": "success-icon"
+              "description": "Help text that describes how to use the input.",
+              "name": "help-text"
             },
             {
-              "description": "The icon to show when a copy error occurs. Works best with `<lynk-icon>`.",
-              "name": "error-icon"
+              "description": "Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.",
+              "name": "help-tip"
             }
           ],
           "members": [
@@ -6907,46 +7038,53 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-icon': LynkIcon, 'lynk-tooltip': LynkTooltip }"
+              "default": "{ 'lynk-calendar': LynkCalendar, 'lynk-dropdown': LynkDropdown, 'lynk-form-field': LynkFormField, 'lynk-icon': LynkIcon, 'lynk-icon-button': LynkIconButton }"
             },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new FormControlController(this)"
             },
             {
               "kind": "field",
-              "name": "copyIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label')"
             },
             {
               "kind": "field",
-              "name": "successIcon",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "dropdown",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "LynkDropdown"
               }
             },
             {
               "kind": "field",
-              "name": "errorIcon",
+              "name": "calendar",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "LynkCalendar"
               }
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "dateInput",
               "type": {
-                "text": "LynkTooltip"
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "isCopying",
+              "name": "isOpen",
               "type": {
                 "text": "boolean"
               },
@@ -6954,11 +7092,13 @@
             },
             {
               "kind": "field",
-              "name": "status",
+              "name": "name",
               "type": {
-                "text": "'rest' | 'success' | 'error'"
+                "text": "string"
               },
-              "default": "'rest'"
+              "default": "''",
+              "description": "The input's name attribute.",
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -6967,886 +7107,879 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The text value to copy.",
+              "description": "The current value in ISO format (YYYY-MM-DD).",
               "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "from",
+              "name": "defaultValue",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "attribute": "from"
+              "description": "Gets or sets the default value used to reset this element."
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the copy button.",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "''",
+              "description": "The input's label.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "copyLabel",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "A custom label to show in the tooltip.",
-              "attribute": "copy-label"
+              "description": "Placeholder text to show when the input is empty.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "successLabel",
+              "name": "helpText",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "A custom label to show in the tooltip after copying.",
-              "attribute": "success-label"
+              "description": "The help text below the input.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "errorLabel",
+              "name": "helpTip",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
-              "attribute": "error-label"
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "attribute": "help-tip"
             },
             {
               "kind": "field",
-              "name": "feedbackDuration",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1500",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "attribute": "feedback-duration"
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPlacement",
-              "type": {
-                "text": "'top' | 'right' | 'bottom' | 'left'"
-              },
-              "default": "'top'",
-              "description": "The preferred placement of the tooltip.",
-              "attribute": "tooltip-placement"
+              "default": "false",
+              "description": "Disables the input.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hoist",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "attribute": "hoist"
-            },
-            {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "showStatus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "status",
-                  "type": {
-                    "text": "'success' | 'error'"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the data has been copied.",
-              "name": "ev-copy",
-              "reactName": "EvCopy",
-              "eventName": "EvCopyEvent"
+              "description": "Makes the input readonly.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
-              "description": "Emitted when the data could not be copied.",
-              "name": "ev-error",
-              "reactName": "EvError",
-              "eventName": "EvErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
+              "kind": "field",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The text value to copy.",
-              "fieldName": "value"
+              "default": "false",
+              "description": "Makes the input required.",
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "name": "from",
+              "kind": "field",
+              "name": "dirty",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "fieldName": "from"
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "attribute": "dirty",
+              "reflects": true
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "inline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the copy button.",
-              "fieldName": "disabled"
+              "description": "Arranges the label inline next to the date picker instead of above it.",
+              "attribute": "inline",
+              "reflects": true
             },
             {
-              "name": "copy-label",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "''",
-              "description": "A custom label to show in the tooltip.",
-              "fieldName": "copyLabel"
+              "default": "'medium'",
+              "description": "The input's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "success-label",
+              "kind": "field",
+              "name": "min",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "A custom label to show in the tooltip after copying.",
-              "fieldName": "successLabel"
+              "description": "The minimum date in ISO format (YYYY-MM-DD).",
+              "attribute": "min"
             },
             {
-              "name": "error-label",
+              "kind": "field",
+              "name": "max",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
-              "fieldName": "errorLabel"
-            },
-            {
-              "name": "feedback-duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "1500",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "fieldName": "feedbackDuration"
+              "description": "The maximum date in ISO format (YYYY-MM-DD).",
+              "attribute": "max"
             },
             {
-              "name": "tooltip-placement",
+              "kind": "field",
+              "name": "hoist",
               "type": {
-                "text": "'top' | 'right' | 'bottom' | 'left'"
+                "text": "boolean"
               },
-              "default": "'top'",
-              "description": "The preferred placement of the tooltip.",
-              "fieldName": "tooltipPlacement"
+              "default": "false",
+              "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.",
+              "attribute": "hoist"
             },
             {
-              "name": "hoist",
+              "kind": "field",
+              "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "fieldName": "hoist"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Copies text data to the clipboard when the user clicks the trigger.",
-          "tagNameWithoutPrefix": "copy-button",
-          "tagName": "lynk-copy-button",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Copies text data to the clipboard when the user clicks the trigger.\n * @documentation https://lynk.design/components/copy-button\n * @status stable\n * @since 1.0\n *\n * @dependency lynk-icon\n * @dependency lynk-tooltip\n *\n * @event ev-copy - Emitted when the data has been copied.\n * @event ev-error - Emitted when the data could not be copied.\n *\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart tooltip__base - The tooltip's exported `base` part.\n * @csspart tooltip__base__popup - The tooltip's exported `popup` part.\n * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.\n * @csspart tooltip__body - The tooltip's exported `body` part.\n *\n * @cssproperty --success-color - The color to use for success feedback.\n * @cssproperty --error-color - The color to use for error feedback.\n *\n * @animation copy.in - The animation to use when feedback icons animate in.\n * @animation copy.out - The animation to use when feedback icons animate out.\n */",
-          "documentation": "https://lynk.design/components/copy-button",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "lynk-icon",
-            "lynk-tooltip"
-          ],
-          "animations": [
-            {
-              "name": "copy.in",
-              "description": "The animation to use when feedback icons animate in."
+              "description": "Adds a clear button when the input is populated.",
+              "attribute": "clearable"
             },
             {
-              "name": "copy.out",
-              "description": "The animation to use when feedback icons animate out."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkCopyButton",
-            "module": "components/copy-button/copy-button.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/date-picker/date-picker.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkDatePicker",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "description": "The form control wrapper.",
-              "name": "form-control"
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "description": "The label wrapper.",
-              "name": "form-control-label"
+              "kind": "field",
+              "name": "handleDocumentClick",
+              "privacy": "private"
             },
             {
-              "description": "The input wrapper.",
-              "name": "form-control-input"
+              "kind": "method",
+              "name": "handleDateInput",
+              "privacy": "private"
             },
             {
-              "description": "The help text wrapper.",
-              "name": "form-control-help-text"
+              "kind": "method",
+              "name": "handleDateChange",
+              "privacy": "private"
             },
             {
-              "description": "The input group container.",
-              "name": "input-group"
+              "kind": "method",
+              "name": "handleDateInputClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The date input field.",
-              "name": "date-input"
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private"
             },
             {
-              "description": "The dropdown trigger button.",
-              "name": "trigger"
+              "kind": "method",
+              "name": "handleCalendarChange",
+              "privacy": "private"
             },
             {
-              "description": "The dropdown panel.",
-              "name": "dropdown"
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The calendar component.",
-              "name": "calendar"
-            }
-          ],
-          "slots": [
+              "kind": "method",
+              "name": "handleTriggerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
-              "description": "The input's label. Alternatively, you can use the label prop.",
-              "name": "label"
+              "kind": "method",
+              "name": "updateInputFromValue",
+              "privacy": "private"
             },
             {
-              "description": "Help text that describes how to use the input.",
-              "name": "help-text"
+              "kind": "method",
+              "name": "updatePickerFromValue",
+              "privacy": "private"
             },
             {
-              "description": "Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.",
-              "name": "help-tip"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "updatePickerFromInput",
+              "privacy": "private"
+            },
             {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'lynk-calendar': LynkCalendar, 'lynk-dropdown': LynkDropdown, 'lynk-form-field': LynkFormField, 'lynk-icon': LynkIcon, 'lynk-icon-button': LynkIconButton }"
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the dropdown."
             },
             {
-              "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this)"
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the dropdown."
             },
             {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label')"
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the date input."
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the input."
             },
             {
-              "kind": "field",
-              "name": "dropdown",
-              "type": {
-                "text": "LynkDropdown"
-              }
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message."
             },
             {
-              "kind": "field",
-              "name": "calendar",
-              "type": {
-                "text": "LynkCalendar"
-              }
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "dateInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if invalid."
             },
             {
-              "kind": "field",
-              "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message."
             },
             {
-              "kind": "field",
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the date value changes.",
+              "name": "ev-change",
+              "reactName": "EvChange",
+              "eventName": "EvChangeEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "ev-input",
+              "reactName": "EvInput",
+              "eventName": "EvInputEvent"
+            },
+            {
+              "description": "Emitted when the input is cleared.",
+              "name": "ev-clear",
+              "reactName": "EvClear",
+              "eventName": "EvClearEvent"
+            }
+          ],
+          "attributes": [
+            {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The input's name attribute.",
-              "attribute": "name"
+              "fieldName": "name"
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The current value in ISO format (YYYY-MM-DD).",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Gets or sets the default value used to reset this element."
+              "fieldName": "value"
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The input's label.",
-              "attribute": "label"
+              "fieldName": "label"
             },
             {
-              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Placeholder text to show when the input is empty.",
-              "attribute": "placeholder"
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "helpText",
+              "name": "help-text",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The help text below the input.",
-              "attribute": "help-text"
+              "fieldName": "helpText"
             },
             {
-              "kind": "field",
-              "name": "helpTip",
+              "name": "help-tip",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "attribute": "help-tip"
+              "fieldName": "helpTip"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the input.",
-              "attribute": "disabled",
-              "reflects": true
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the input readonly.",
-              "attribute": "readonly",
-              "reflects": true
+              "fieldName": "readonly"
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the input required.",
-              "attribute": "required",
-              "reflects": true
+              "fieldName": "required"
             },
             {
-              "kind": "field",
               "name": "dirty",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds the dirty indicator mark.",
-              "attribute": "dirty",
-              "reflects": true
+              "fieldName": "dirty"
             },
             {
-              "kind": "field",
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Arranges the label inline next to the date picker instead of above it.",
-              "attribute": "inline",
-              "reflects": true
+              "fieldName": "inline"
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
               "description": "The input's size.",
-              "attribute": "size",
-              "reflects": true
+              "fieldName": "size"
             },
             {
-              "kind": "field",
               "name": "min",
               "type": {
                 "text": "string"
               },
               "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "attribute": "min"
+              "fieldName": "min"
             },
             {
-              "kind": "field",
               "name": "max",
               "type": {
                 "text": "string"
               },
               "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "attribute": "max"
+              "fieldName": "max"
             },
             {
-              "kind": "field",
               "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "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.",
-              "attribute": "hoist"
+              "fieldName": "hoist"
             },
             {
-              "kind": "field",
               "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds a clear button when the input is populated.",
-              "attribute": "clearable"
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDateInput",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDateChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDateInputClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
+              "fieldName": "clearable"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "A date picker that combines calendar component with accessible input field.",
+          "tagNameWithoutPrefix": "date-picker",
+          "tagName": "lynk-date-picker",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A date picker that combines calendar component with accessible input field.\n * @documentation https://lynk.design/components/date-picker\n * @status experimental\n * @since 1.4\n *\n * @dependency lynk-calendar\n * @dependency lynk-dropdown\n * @dependency lynk-icon\n * @dependency lynk-icon-button\n * @dependency lynk-tooltip\n *\n * @event ev-change - Emitted when the date value changes.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-clear - Emitted when the input is cleared.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot 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 * @csspart base - The component's base wrapper.\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart input-group - The input group container.\n * @csspart date-input - The date input field.\n * @csspart trigger - The dropdown trigger button.\n * @csspart dropdown - The dropdown panel.\n * @csspart calendar - The calendar component.\n */",
+          "documentation": "https://lynk.design/components/date-picker",
+          "status": "experimental",
+          "since": "1.4",
+          "dependencies": [
+            "lynk-calendar",
+            "lynk-dropdown",
+            "lynk-icon",
+            "lynk-icon-button",
+            "lynk-tooltip"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkDatePicker",
+            "module": "components/date-picker/date-picker.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/copy-button/copy-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkCopyButton",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
+              "description": "The color to use for success feedback.",
+              "name": "--success-color"
             },
             {
-              "kind": "method",
-              "name": "handleCalendarChange",
-              "privacy": "private"
-            },
+              "description": "The color to use for error feedback.",
+              "name": "--error-color"
+            }
+          ],
+          "cssParts": [
             {
-              "kind": "method",
-              "name": "handleClearClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "description": "The internal `<button>` element.",
+              "name": "button"
             },
             {
-              "kind": "method",
-              "name": "handleTriggerClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "description": "The container that holds the copy icon.",
+              "name": "copy-icon"
             },
             {
-              "kind": "method",
-              "name": "updateInputFromValue",
-              "privacy": "private"
+              "description": "The container that holds the success icon.",
+              "name": "success-icon"
             },
             {
-              "kind": "method",
-              "name": "updatePickerFromValue",
-              "privacy": "private"
+              "description": "The container that holds the error icon.",
+              "name": "error-icon"
             },
             {
-              "kind": "method",
-              "name": "updatePickerFromInput",
-              "privacy": "private"
+              "description": "The tooltip's exported `base` part.",
+              "name": "tooltip__base"
             },
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the dropdown."
+              "description": "The tooltip's exported `popup` part.",
+              "name": "tooltip__base__popup"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the dropdown."
+              "description": "The tooltip's exported `arrow` part.",
+              "name": "tooltip__base__arrow"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the date input."
-            },
+              "description": "The tooltip's exported `body` part.",
+              "name": "tooltip__body"
+            }
+          ],
+          "slots": [
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the input."
+              "description": "The icon to show in the default copy state. Works best with `<lynk-icon>`.",
+              "name": "copy-icon"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message."
+              "description": "The icon to show when the content is copied. Works best with `<lynk-icon>`.",
+              "name": "success-icon"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "description": "The icon to show when a copy error occurs. Works best with `<lynk-icon>`.",
+              "name": "error-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
               },
-              "description": "Gets the associated form, if one exists."
+              "static": true,
+              "default": "{ 'lynk-icon': LynkIcon, 'lynk-tooltip': LynkTooltip }"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if invalid."
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message."
+              "kind": "field",
+              "name": "copyIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleValueChange"
+              "kind": "field",
+              "name": "successIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the date value changes.",
-              "name": "ev-change",
-              "reactName": "EvChange",
-              "eventName": "EvChangeEvent"
+              "kind": "field",
+              "name": "errorIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "description": "Emitted when the control receives input.",
-              "name": "ev-input",
-              "reactName": "EvInput",
-              "eventName": "EvInputEvent"
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "LynkTooltip"
+              }
             },
             {
-              "description": "Emitted when the input is cleared.",
-              "name": "ev-clear",
-              "reactName": "EvClear",
-              "eventName": "EvClearEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
+              "kind": "field",
+              "name": "isCopying",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The input's name attribute.",
-              "fieldName": "name"
+              "default": "false"
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "status",
               "type": {
-                "text": "string"
+                "text": "'rest' | 'success' | 'error'"
               },
-              "default": "''",
-              "description": "The current value in ISO format (YYYY-MM-DD).",
-              "fieldName": "value"
+              "default": "'rest'"
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The input's label.",
-              "fieldName": "label"
+              "description": "The text value to copy.",
+              "attribute": "value"
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "from",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Placeholder text to show when the input is empty.",
-              "fieldName": "placeholder"
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "attribute": "from"
             },
             {
-              "name": "help-text",
-              "type": {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the copy button.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "copyLabel",
+              "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The help text below the input.",
-              "fieldName": "helpText"
+              "description": "A custom label to show in the tooltip.",
+              "attribute": "copy-label"
             },
             {
-              "name": "help-tip",
+              "kind": "field",
+              "name": "successLabel",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "fieldName": "helpTip"
+              "description": "A custom label to show in the tooltip after copying.",
+              "attribute": "success-label"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "errorLabel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the input.",
-              "fieldName": "disabled"
+              "default": "''",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "attribute": "error-label"
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "feedbackDuration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the input readonly.",
-              "fieldName": "readonly"
+              "default": "1500",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "attribute": "feedback-duration"
             },
             {
-              "name": "required",
+              "kind": "field",
+              "name": "tooltipPlacement",
               "type": {
-                "text": "boolean"
+                "text": "'top' | 'right' | 'bottom' | 'left'"
               },
-              "default": "false",
-              "description": "Makes the input required.",
-              "fieldName": "required"
+              "default": "'top'",
+              "description": "The preferred placement of the tooltip.",
+              "attribute": "tooltip-placement"
             },
             {
-              "name": "dirty",
+              "kind": "field",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds the dirty indicator mark.",
-              "fieldName": "dirty"
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "attribute": "hoist"
             },
             {
-              "name": "inline",
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "showStatus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "status",
+                  "type": {
+                    "text": "'success' | 'error'"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the data has been copied.",
+              "name": "ev-copy",
+              "reactName": "EvCopy",
+              "eventName": "EvCopyEvent"
+            },
+            {
+              "description": "Emitted when the data could not be copied.",
+              "name": "ev-error",
+              "reactName": "EvError",
+              "eventName": "EvErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The text value to copy.",
+              "fieldName": "value"
+            },
+            {
+              "name": "from",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "fieldName": "from"
+            },
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Arranges the label inline next to the date picker instead of above it.",
-              "fieldName": "inline"
+              "description": "Disables the copy button.",
+              "fieldName": "disabled"
             },
             {
-              "name": "size",
+              "name": "copy-label",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "string"
               },
-              "default": "'medium'",
-              "description": "The input's size.",
-              "fieldName": "size"
+              "default": "''",
+              "description": "A custom label to show in the tooltip.",
+              "fieldName": "copyLabel"
             },
             {
-              "name": "min",
+              "name": "success-label",
               "type": {
                 "text": "string"
               },
-              "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "fieldName": "min"
+              "default": "''",
+              "description": "A custom label to show in the tooltip after copying.",
+              "fieldName": "successLabel"
             },
             {
-              "name": "max",
+              "name": "error-label",
               "type": {
                 "text": "string"
               },
-              "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "fieldName": "max"
+              "default": "''",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "fieldName": "errorLabel"
             },
             {
-              "name": "hoist",
+              "name": "feedback-duration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "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.",
-              "fieldName": "hoist"
+              "default": "1500",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "fieldName": "feedbackDuration"
             },
             {
-              "name": "clearable",
+              "name": "tooltip-placement",
+              "type": {
+                "text": "'top' | 'right' | 'bottom' | 'left'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the tooltip.",
+              "fieldName": "tooltipPlacement"
+            },
+            {
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a clear button when the input is populated.",
-              "fieldName": "clearable"
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "fieldName": "hoist"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "A date picker that combines calendar component with accessible input field.",
-          "tagNameWithoutPrefix": "date-picker",
-          "tagName": "lynk-date-picker",
+          "summary": "Copies text data to the clipboard when the user clicks the trigger.",
+          "tagNameWithoutPrefix": "copy-button",
+          "tagName": "lynk-copy-button",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A date picker that combines calendar component with accessible input field.\n * @documentation https://lynk.design/components/date-picker\n * @status experimental\n * @since 1.4\n *\n * @dependency lynk-calendar\n * @dependency lynk-dropdown\n * @dependency lynk-icon\n * @dependency lynk-icon-button\n * @dependency lynk-tooltip\n *\n * @event ev-change - Emitted when the date value changes.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-clear - Emitted when the input is cleared.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot 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 * @csspart base - The component's base wrapper.\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart input-group - The input group container.\n * @csspart date-input - The date input field.\n * @csspart trigger - The dropdown trigger button.\n * @csspart dropdown - The dropdown panel.\n * @csspart calendar - The calendar component.\n */",
-          "documentation": "https://lynk.design/components/date-picker",
-          "status": "experimental",
-          "since": "1.4",
+          "jsDoc": "/**\n * @summary Copies text data to the clipboard when the user clicks the trigger.\n * @documentation https://lynk.design/components/copy-button\n * @status stable\n * @since 1.0\n *\n * @dependency lynk-icon\n * @dependency lynk-tooltip\n *\n * @event ev-copy - Emitted when the data has been copied.\n * @event ev-error - Emitted when the data could not be copied.\n *\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart tooltip__base - The tooltip's exported `base` part.\n * @csspart tooltip__base__popup - The tooltip's exported `popup` part.\n * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.\n * @csspart tooltip__body - The tooltip's exported `body` part.\n *\n * @cssproperty --success-color - The color to use for success feedback.\n * @cssproperty --error-color - The color to use for error feedback.\n *\n * @animation copy.in - The animation to use when feedback icons animate in.\n * @animation copy.out - The animation to use when feedback icons animate out.\n */",
+          "documentation": "https://lynk.design/components/copy-button",
+          "status": "stable",
+          "since": "1.0",
           "dependencies": [
-            "lynk-calendar",
-            "lynk-dropdown",
             "lynk-icon",
-            "lynk-icon-button",
             "lynk-tooltip"
+          ],
+          "animations": [
+            {
+              "name": "copy.in",
+              "description": "The animation to use when feedback icons animate in."
+            },
+            {
+              "name": "copy.out",
+              "description": "The animation to use when feedback icons animate out."
+            }
           ]
         }
       ],
@@ -7855,8 +7988,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkDatePicker",
-            "module": "components/date-picker/date-picker.js"
+            "name": "LynkCopyButton",
+            "module": "components/copy-button/copy-button.js"
           }
         }
       ]
@@ -10413,482 +10546,344 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/form-field/form-field.js",
+      "path": "components/format-bytes/format-bytes.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkFormField",
-          "cssParts": [
+          "name": "LynkFormatBytes",
+          "members": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "description": "The component's label wrapper.",
-              "name": "label"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number to format in bytes.",
+              "attribute": "value"
             },
             {
-              "description": "The component's slotted control wrapper.",
-              "name": "control"
+              "kind": "field",
+              "name": "unit",
+              "type": {
+                "text": "'byte' | 'bit'"
+              },
+              "default": "'byte'",
+              "description": "The type of unit to display.",
+              "attribute": "unit"
             },
             {
-              "description": "The component's help-text wrapper.",
-              "name": "help-text"
+              "kind": "field",
+              "name": "display",
+              "type": {
+                "text": "'long' | 'short' | 'narrow'"
+              },
+              "default": "'short'",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "attribute": "display"
             }
           ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "Custom help-tip content.",
-              "name": "help-tip"
-            },
+          "attributes": [
             {
-              "description": "Custom help-text content.",
-              "name": "help-text"
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number to format in bytes.",
+              "fieldName": "value"
             },
             {
-              "description": "Custom label content.",
-              "name": "label"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
+              "name": "unit",
               "type": {
-                "text": "object"
+                "text": "'byte' | 'bit'"
               },
-              "static": true,
-              "default": "{ 'lynk-icon': LynkIcon, 'lynk-tooltip': LynkTooltip }"
+              "default": "'byte'",
+              "description": "The type of unit to display.",
+              "fieldName": "unit"
             },
             {
-              "kind": "field",
-              "name": "defaultSlot",
+              "name": "display",
               "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
+                "text": "'long' | 'short' | 'narrow'"
+              },
+              "default": "'short'",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "fieldName": "display"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Formats a number as a human readable bytes value.",
+          "tagNameWithoutPrefix": "format-bytes",
+          "tagName": "lynk-format-bytes",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Formats a number as a human readable bytes value.\n * @documentation https://lynk.design/components/format-bytes\n * @status stable\n * @since 1.0\n */",
+          "documentation": "https://lynk.design/components/format-bytes",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkFormatBytes",
+            "module": "components/format-bytes/format-bytes.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/format-date/format-date.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkFormatDate",
+          "members": [
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "localize",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label')"
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "date",
               "type": {
-                "text": "boolean"
+                "text": "Date | string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "new Date()",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "attribute": "date"
             },
             {
               "kind": "field",
-              "name": "containingElement",
+              "name": "weekday",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "'narrow' | 'short' | 'long'"
               },
-              "description": "The field will lose focus when the user interacts outside of this element (e.g. clicking)."
+              "description": "The format for displaying the weekday.",
+              "attribute": "weekday"
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "era",
               "type": {
-                "text": "'error' | 'warning' | 'success' | 'default'"
+                "text": "'narrow' | 'short' | 'long'"
               },
-              "default": "'default'",
-              "description": "The fields's styled validity state",
-              "attribute": "state",
-              "reflects": true
+              "description": "The format for displaying the era.",
+              "attribute": "era"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "year",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "'medium'",
-              "description": "The input's size.",
-              "attribute": "size",
-              "reflects": true
+              "description": "The format for displaying the year.",
+              "attribute": "year"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "month",
               "type": {
-                "text": "string"
+                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
               },
-              "default": "''",
-              "description": "The input's label. Alternatively, you can use the label slot.",
-              "attribute": "label"
+              "description": "The format for displaying the month.",
+              "attribute": "month"
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "day",
               "type": {
-                "text": "string"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "''",
-              "attribute": "id"
+              "description": "The format for displaying the day.",
+              "attribute": "day"
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "hour",
               "type": {
-                "text": "string"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "''",
-              "description": "The help text below the input. Alternatively, you can use the help-text slot.",
-              "attribute": "help-text"
+              "description": "The format for displaying the hour.",
+              "attribute": "hour"
             },
             {
               "kind": "field",
-              "name": "helpTip",
+              "name": "minute",
               "type": {
-                "text": "string"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "''",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "attribute": "help-tip"
+              "description": "The format for displaying the minute.",
+              "attribute": "minute"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "second",
               "type": {
-                "text": "boolean"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "false",
-              "description": "Adds the required mark.",
-              "attribute": "required",
-              "reflects": true
+              "description": "The format for displaying the second.",
+              "attribute": "second"
             },
             {
               "kind": "field",
-              "name": "dirty",
+              "name": "timeZoneName",
               "type": {
-                "text": "boolean"
+                "text": "'short' | 'long'"
               },
-              "default": "false",
-              "description": "Adds the dirty indicator mark.",
-              "attribute": "dirty",
-              "reflects": true
+              "description": "The format for displaying the time.",
+              "attribute": "time-zone-name"
             },
             {
               "kind": "field",
-              "name": "focused",
+              "name": "timeZone",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls the focused state styling.",
-              "attribute": "focused",
-              "reflects": true
+              "description": "The time zone to express the time in.",
+              "attribute": "time-zone"
             },
             {
               "kind": "field",
-              "name": "inline",
+              "name": "hourFormat",
               "type": {
-                "text": "boolean"
+                "text": "'auto' | '12' | '24'"
               },
-              "default": "false",
-              "description": "Arranges the label inline next to the control instead of above it.",
-              "attribute": "inline",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleLabelClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDefaultSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleDocumentMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the control."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when field or slotted element gains focus.",
-              "name": "ev-focus",
-              "reactName": "EvFocus",
-              "eventName": "EvFocusEvent"
-            },
-            {
-              "description": "Emitted when field or slotted element loses focus.",
-              "name": "ev-blur",
-              "reactName": "EvBlur",
-              "eventName": "EvBlurEvent"
+              "default": "'auto'",
+              "description": "When set, 24 hour time will always be used.",
+              "attribute": "hour-format"
             }
           ],
           "attributes": [
             {
-              "name": "state",
-              "type": {
-                "text": "'error' | 'warning' | 'success' | 'default'"
-              },
-              "default": "'default'",
-              "description": "The fields's styled validity state",
-              "fieldName": "state"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The input's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The input's label. Alternatively, you can use the label slot.",
-              "fieldName": "label"
-            },
-            {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "id"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The help text below the input. Alternatively, you can use the help-text slot.",
-              "fieldName": "helpText"
-            },
-            {
-              "name": "help-tip",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "fieldName": "helpTip"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds the required mark.",
-              "fieldName": "required"
-            },
-            {
-              "name": "dirty",
+              "name": "date",
               "type": {
-                "text": "boolean"
+                "text": "Date | string"
               },
-              "default": "false",
-              "description": "Adds the dirty indicator mark.",
-              "fieldName": "dirty"
+              "default": "new Date()",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "fieldName": "date"
             },
             {
-              "name": "focused",
+              "name": "weekday",
               "type": {
-                "text": "boolean"
+                "text": "'narrow' | 'short' | 'long'"
               },
-              "default": "false",
-              "description": "Controls the focused state styling.",
-              "fieldName": "focused"
+              "description": "The format for displaying the weekday.",
+              "fieldName": "weekday"
             },
             {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Arranges the label inline next to the control instead of above it.",
-              "fieldName": "inline"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.",
-          "tagNameWithoutPrefix": "form-field",
-          "tagName": "lynk-form-field",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n * @documentation https://lynk.design/components/form-field\n * @since 1.6\n * @status stable\n *\n * @dependency lynk-icon\n * @dependency lynk-tooltip\n *\n * @event ev-focus - Emitted when field or slotted element gains focus.\n * @event ev-blur - Emitted when field or slotted element loses focus.\n *\n * @slot - The default slot.\n * @slot help-tip - Custom help-tip content.\n * @slot help-text - Custom help-text content.\n * @slot label - Custom label content.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label wrapper.\n * @csspart control - The component's slotted control wrapper.\n * @csspart help-text - The component's help-text wrapper.\n *\n */",
-          "documentation": "https://lynk.design/components/form-field",
-          "since": "1.6",
-          "status": "stable",
-          "dependencies": [
-            "lynk-icon",
-            "lynk-tooltip"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkFormField",
-            "module": "components/form-field/form-field.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/format-bytes/format-bytes.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkFormatBytes",
-          "members": [
+              "name": "era",
+              "type": {
+                "text": "'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the era.",
+              "fieldName": "era"
+            },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "year",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the year.",
+              "fieldName": "year"
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "month",
               "type": {
-                "text": "number"
+                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
               },
-              "default": "0",
-              "description": "The number to format in bytes.",
-              "attribute": "value"
+              "description": "The format for displaying the month.",
+              "fieldName": "month"
             },
             {
-              "kind": "field",
-              "name": "unit",
+              "name": "day",
               "type": {
-                "text": "'byte' | 'bit'"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "'byte'",
-              "description": "The type of unit to display.",
-              "attribute": "unit"
+              "description": "The format for displaying the day.",
+              "fieldName": "day"
             },
             {
-              "kind": "field",
-              "name": "display",
+              "name": "hour",
               "type": {
-                "text": "'long' | 'short' | 'narrow'"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "'short'",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "attribute": "display"
-            }
-          ],
-          "attributes": [
+              "description": "The format for displaying the hour.",
+              "fieldName": "hour"
+            },
             {
-              "name": "value",
+              "name": "minute",
               "type": {
-                "text": "number"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "0",
-              "description": "The number to format in bytes.",
-              "fieldName": "value"
+              "description": "The format for displaying the minute.",
+              "fieldName": "minute"
             },
             {
-              "name": "unit",
+              "name": "second",
               "type": {
-                "text": "'byte' | 'bit'"
+                "text": "'numeric' | '2-digit'"
               },
-              "default": "'byte'",
-              "description": "The type of unit to display.",
-              "fieldName": "unit"
+              "description": "The format for displaying the second.",
+              "fieldName": "second"
             },
             {
-              "name": "display",
+              "name": "time-zone-name",
               "type": {
-                "text": "'long' | 'short' | 'narrow'"
+                "text": "'short' | 'long'"
               },
-              "default": "'short'",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "fieldName": "display"
+              "description": "The format for displaying the time.",
+              "fieldName": "timeZoneName"
+            },
+            {
+              "name": "time-zone",
+              "type": {
+                "text": "string"
+              },
+              "description": "The time zone to express the time in.",
+              "fieldName": "timeZone"
+            },
+            {
+              "name": "hour-format",
+              "type": {
+                "text": "'auto' | '12' | '24'"
+              },
+              "default": "'auto'",
+              "description": "When set, 24 hour time will always be used.",
+              "fieldName": "hourFormat"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Formats a number as a human readable bytes value.",
-          "tagNameWithoutPrefix": "format-bytes",
-          "tagName": "lynk-format-bytes",
+          "summary": "Formats a date/time using the specified locale and options.",
+          "tagNameWithoutPrefix": "format-date",
+          "tagName": "lynk-format-date",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Formats a number as a human readable bytes value.\n * @documentation https://lynk.design/components/format-bytes\n * @status stable\n * @since 1.0\n */",
-          "documentation": "https://lynk.design/components/format-bytes",
-          "status": "stable",
-          "since": "1.0"
+          "jsDoc": "/**\n * @summary Formats a date/time using the specified locale and options.\n * @documentation https://lynk.design/components/format-date\n * @since 1.0\n * @status stable\n */",
+          "documentation": "https://lynk.design/components/format-date",
+          "since": "1.0",
+          "status": "stable"
         }
       ],
       "exports": [
@@ -10896,251 +10891,389 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkFormatBytes",
-            "module": "components/format-bytes/format-bytes.js"
+            "name": "LynkFormatDate",
+            "module": "components/format-date/format-date.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/format-date/format-date.js",
+      "path": "components/form-field/form-field.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkFormatDate",
+          "name": "LynkFormField",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The component's label wrapper.",
+              "name": "label"
+            },
+            {
+              "description": "The component's slotted control wrapper.",
+              "name": "control"
+            },
+            {
+              "description": "The component's help-text wrapper.",
+              "name": "help-text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "Custom help-tip content.",
+              "name": "help-tip"
+            },
+            {
+              "description": "Custom help-text content.",
+              "name": "help-text"
+            },
+            {
+              "description": "Custom label content.",
+              "name": "label"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'lynk-icon': LynkIcon, 'lynk-tooltip': LynkTooltip }"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label')"
             },
             {
               "kind": "field",
-              "name": "date",
+              "name": "hasFocus",
               "type": {
-                "text": "Date | string"
+                "text": "boolean"
               },
-              "default": "new Date()",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "attribute": "date"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "weekday",
+              "name": "containingElement",
               "type": {
-                "text": "'narrow' | 'short' | 'long'"
+                "text": "HTMLElement | undefined"
               },
-              "description": "The format for displaying the weekday.",
-              "attribute": "weekday"
+              "description": "The field will lose focus when the user interacts outside of this element (e.g. clicking)."
             },
             {
               "kind": "field",
-              "name": "era",
+              "name": "state",
               "type": {
-                "text": "'narrow' | 'short' | 'long'"
+                "text": "'error' | 'warning' | 'success' | 'default'"
               },
-              "description": "The format for displaying the era.",
-              "attribute": "era"
+              "default": "'default'",
+              "description": "The fields's styled validity state",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "year",
+              "name": "size",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "description": "The format for displaying the year.",
-              "attribute": "year"
+              "default": "'medium'",
+              "description": "The input's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "month",
+              "name": "label",
               "type": {
-                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+                "text": "string"
               },
-              "description": "The format for displaying the month.",
-              "attribute": "month"
+              "default": "''",
+              "description": "The input's label. Alternatively, you can use the label slot.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "day",
+              "name": "id",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the day.",
-              "attribute": "day"
+              "default": "''",
+              "attribute": "id"
             },
             {
               "kind": "field",
-              "name": "hour",
+              "name": "helpText",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the hour.",
-              "attribute": "hour"
+              "default": "''",
+              "description": "The help text below the input. Alternatively, you can use the help-text slot.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "minute",
+              "name": "helpTip",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the minute.",
-              "attribute": "minute"
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "attribute": "help-tip"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the required mark.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "second",
+              "name": "dirty",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the second.",
-              "attribute": "second"
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "attribute": "dirty",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "timeZoneName",
+              "name": "focused",
               "type": {
-                "text": "'short' | 'long'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the time.",
-              "attribute": "time-zone-name"
+              "default": "false",
+              "description": "Controls the focused state styling.",
+              "attribute": "focused",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "timeZone",
+              "name": "inline",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The time zone to express the time in.",
-              "attribute": "time-zone"
+              "default": "false",
+              "description": "Arranges the label inline next to the control instead of above it.",
+              "attribute": "inline",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "hourFormat",
-              "type": {
-                "text": "'auto' | '12' | '24'"
-              },
-              "default": "'auto'",
-              "description": "When set, 24 hour time will always be used.",
-              "attribute": "hour-format"
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "date",
-              "type": {
-                "text": "Date | string"
-              },
-              "default": "new Date()",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "fieldName": "date"
+              "description": "Emitted when field or slotted element gains focus.",
+              "name": "ev-focus",
+              "reactName": "EvFocus",
+              "eventName": "EvFocusEvent"
             },
             {
-              "name": "weekday",
-              "type": {
-                "text": "'narrow' | 'short' | 'long'"
-              },
-              "description": "The format for displaying the weekday.",
-              "fieldName": "weekday"
-            },
+              "description": "Emitted when field or slotted element loses focus.",
+              "name": "ev-blur",
+              "reactName": "EvBlur",
+              "eventName": "EvBlurEvent"
+            }
+          ],
+          "attributes": [
             {
-              "name": "era",
+              "name": "state",
               "type": {
-                "text": "'narrow' | 'short' | 'long'"
+                "text": "'error' | 'warning' | 'success' | 'default'"
               },
-              "description": "The format for displaying the era.",
-              "fieldName": "era"
+              "default": "'default'",
+              "description": "The fields's styled validity state",
+              "fieldName": "state"
             },
             {
-              "name": "year",
+              "name": "size",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "description": "The format for displaying the year.",
-              "fieldName": "year"
+              "default": "'medium'",
+              "description": "The input's size.",
+              "fieldName": "size"
             },
             {
-              "name": "month",
+              "name": "label",
               "type": {
-                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+                "text": "string"
               },
-              "description": "The format for displaying the month.",
-              "fieldName": "month"
+              "default": "''",
+              "description": "The input's label. Alternatively, you can use the label slot.",
+              "fieldName": "label"
             },
             {
-              "name": "day",
+              "name": "id",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the day.",
-              "fieldName": "day"
+              "default": "''",
+              "fieldName": "id"
             },
             {
-              "name": "hour",
+              "name": "help-text",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the hour.",
-              "fieldName": "hour"
+              "default": "''",
+              "description": "The help text below the input. Alternatively, you can use the help-text slot.",
+              "fieldName": "helpText"
             },
             {
-              "name": "minute",
+              "name": "help-tip",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the minute.",
-              "fieldName": "minute"
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "fieldName": "helpTip"
             },
             {
-              "name": "second",
+              "name": "required",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the second.",
-              "fieldName": "second"
+              "default": "false",
+              "description": "Adds the required mark.",
+              "fieldName": "required"
             },
             {
-              "name": "time-zone-name",
+              "name": "dirty",
               "type": {
-                "text": "'short' | 'long'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the time.",
-              "fieldName": "timeZoneName"
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "fieldName": "dirty"
             },
             {
-              "name": "time-zone",
+              "name": "focused",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The time zone to express the time in.",
-              "fieldName": "timeZone"
+              "default": "false",
+              "description": "Controls the focused state styling.",
+              "fieldName": "focused"
             },
             {
-              "name": "hour-format",
+              "name": "inline",
               "type": {
-                "text": "'auto' | '12' | '24'"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "When set, 24 hour time will always be used.",
-              "fieldName": "hourFormat"
+              "default": "false",
+              "description": "Arranges the label inline next to the control instead of above it.",
+              "fieldName": "inline"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Formats a date/time using the specified locale and options.",
-          "tagNameWithoutPrefix": "format-date",
-          "tagName": "lynk-format-date",
+          "summary": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.",
+          "tagNameWithoutPrefix": "form-field",
+          "tagName": "lynk-form-field",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Formats a date/time using the specified locale and options.\n * @documentation https://lynk.design/components/format-date\n * @since 1.0\n * @status stable\n */",
-          "documentation": "https://lynk.design/components/format-date",
-          "since": "1.0",
-          "status": "stable"
+          "jsDoc": "/**\n * @summary A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n * @documentation https://lynk.design/components/form-field\n * @since 1.6\n * @status stable\n *\n * @dependency lynk-icon\n * @dependency lynk-tooltip\n *\n * @event ev-focus - Emitted when field or slotted element gains focus.\n * @event ev-blur - Emitted when field or slotted element loses focus.\n *\n * @slot - The default slot.\n * @slot help-tip - Custom help-tip content.\n * @slot help-text - Custom help-text content.\n * @slot label - Custom label content.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label wrapper.\n * @csspart control - The component's slotted control wrapper.\n * @csspart help-text - The component's help-text wrapper.\n *\n */",
+          "documentation": "https://lynk.design/components/form-field",
+          "since": "1.6",
+          "status": "stable",
+          "dependencies": [
+            "lynk-icon",
+            "lynk-tooltip"
+          ]
         }
       ],
       "exports": [
@@ -11148,8 +11281,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkFormatDate",
-            "module": "components/format-date/format-date.js"
+            "name": "LynkFormField",
+            "module": "components/form-field/form-field.js"
           }
         }
       ]
@@ -16249,6 +16382,10 @@
               "description": "The expand/collapse toggle icon in the header.",
               "name": "toggle-icon"
             },
+            {
+              "description": "The panel subheader area, visible only when expanded.",
+              "name": "subheader"
+            },
             {
               "description": "The panel content.",
               "name": "content"
@@ -16283,6 +16420,10 @@
               "description": "The collapse icon's `<slot>`.",
               "name": "collapse-icon"
             },
+            {
+              "description": "Optional content displayed below the header, only visible when the panel is expanded.",
+              "name": "subheader"
+            },
             {
               "description": "The panels' footer `<slot>`.",
               "name": "footer"
@@ -16331,7 +16472,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix', 'footer')"
+              "default": "new HasSlotController(this, 'prefix', 'suffix', 'subheader', 'footer')"
             },
             {
               "kind": "field",
@@ -16622,7 +16763,7 @@
           "tagNameWithoutPrefix": "panel",
           "tagName": "lynk-panel",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Panels are lightweight content containers that function like a native `detail` HTML element with a collapsable body. They can either stand alone or be grouped together to form an [Accordion](/components/accordion).\n * @documentation https://lynk.design/components/panel\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The panels' main content.\n * @slot heading - The panels' heading. Alternatively, you can use the `heading` attribute.\n * @slot prefix - The panels' summary prefix `<slot>`.\n * @slot suffix - The panels' summary suffix `<slot>`.\n * @slot expand-icon - The expand icon's `<slot>`.\n * @slot collapse-icon - The collapse icon's `<slot>`.\n * @slot footer - The panels' footer `<slot>`.\n *\n * @event ev-expand - Emitted when the panel expands.\n * @event ev-after-expand - Emitted after the panel expands and all animations are complete.\n * @event ev-collapse - Emitted when the panel closes.\n * @event ev-after-collapse - Emitted after the panel closes and all animations are complete.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart header - The panel header area.\n * @csspart heading - The panel heading.\n * @csspart prefix - The panel header prefix area.\n * @csspart suffix - The panel header suffix area.\n * @csspart toggle-icon - The expand/collapse toggle icon in the header.\n * @csspart content - The panel content.\n * @csspart footer - The panel footer.\n *\n * @cssproperty --background-color - The panels background color\n * @cssproperty --spacing - The amount of padding to use for the header, body, and footer.\n * @cssproperty --border-color - Apply a panel border of your choosing.\n * @cssproperty --border-radius - The panels border radius.\n *\n * @animation panel.expand - The animation to use when expanding the panel. You can use `height: auto` with this animation.\n * @animation panel.collapse - The animation to use when collapsing the panel. You can use `height: auto` with this animation.\n */",
+          "jsDoc": "/**\n * @summary Panels are lightweight content containers that function like a native `detail` HTML element with a collapsable body. They can either stand alone or be grouped together to form an [Accordion](/components/accordion).\n * @documentation https://lynk.design/components/panel\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The panels' main content.\n * @slot heading - The panels' heading. Alternatively, you can use the `heading` attribute.\n * @slot prefix - The panels' summary prefix `<slot>`.\n * @slot suffix - The panels' summary suffix `<slot>`.\n * @slot expand-icon - The expand icon's `<slot>`.\n * @slot collapse-icon - The collapse icon's `<slot>`.\n * @slot subheader - Optional content displayed below the header, only visible when the panel is expanded.\n * @slot footer - The panels' footer `<slot>`.\n *\n * @event ev-expand - Emitted when the panel expands.\n * @event ev-after-expand - Emitted after the panel expands and all animations are complete.\n * @event ev-collapse - Emitted when the panel closes.\n * @event ev-after-collapse - Emitted after the panel closes and all animations are complete.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart header - The panel header area.\n * @csspart heading - The panel heading.\n * @csspart prefix - The panel header prefix area.\n * @csspart suffix - The panel header suffix area.\n * @csspart toggle-icon - The expand/collapse toggle icon in the header.\n * @csspart subheader - The panel subheader area, visible only when expanded.\n * @csspart content - The panel content.\n * @csspart footer - The panel footer.\n *\n * @cssproperty --background-color - The panels background color\n * @cssproperty --spacing - The amount of padding to use for the header, body, and footer.\n * @cssproperty --border-color - Apply a panel border of your choosing.\n * @cssproperty --border-radius - The panels border radius.\n *\n * @animation panel.expand - The animation to use when expanding the panel. You can use `height: auto` with this animation.\n * @animation panel.collapse - The animation to use when collapsing the panel. You can use `height: auto` with this animation.\n */",
           "documentation": "https://lynk.design/components/panel",
           "since": "1.0",
           "status": "stable",
@@ -19107,6 +19248,14 @@
               "description": "The component's base wrapper.",
               "name": "base"
             },
+            {
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
+            },
             {
               "description": "The range track wrapper.",
               "name": "wrapper"
@@ -19145,6 +19294,14 @@
               "description": "The range's label. Alternatively, you can use the `label` attribute.",
               "name": "label"
             },
+            {
+              "description": "Used to prepend an icon or similar element to the range.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append an icon or similar element to the range.",
+              "name": "suffix"
+            },
             {
               "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
               "name": "help-text"
@@ -19184,7 +19341,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label', 'reference')"
+              "default": "new HasSlotController( this, 'help-text', 'help-tip', 'label', 'prefix', 'suffix', 'reference' )"
             },
             {
               "kind": "field",
@@ -19983,7 +20140,7 @@
           "tagNameWithoutPrefix": "range",
           "tagName": "lynk-range",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Ranges allow the user to select a single value within a given range using a slider.\n * @documentation https://lynk.design/components/range\n * @status stable\n * @since 1.0\n *\n * @dependency lynk-form-field\n * @dependency lynk-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot help-tip - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n * @slot ticks - Custom tick markers. Use this to override the default tick rendering.\n * @slot reference - Reference labels displayed below the range (e.g., min/max labels).\n *\n * @event ev-blur - Emitted when the control loses focus.\n * @event ev-change - Emitted when an alteration to the control's value is committed by the user.\n * @event ev-focus - Emitted when the control gains focus.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart wrapper - The range track wrapper.\n * @csspart track - The range track (inactive portion).\n * @csspart track-active - The active portion of the track.\n * @csspart thumb - The draggable thumb.\n * @csspart ticks - The container for custom tick markers.\n * @csspart markers - The container that holds all the markers when `with-markers` is used.\n * @csspart marker - The individual markers that are shown when `with-markers` is used.\n * @csspart references - The container for reference labels.\n *\n * @cssproperty --thumb-size - The size of the thumb.\n * @cssproperty --thumb-color - The color of the thumb.\n * @cssproperty --thumb-border - The box-shadow used for the thumb border.\n * @cssproperty --track-color-active - The color of the active portion of the track.\n * @cssproperty --track-color-inactive - The color of the inactive portion of the track.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The starting point of the active track (useful for ranges that don't start at 0).\n * @cssproperty --tick-color - The color of tick markers.\n * @cssproperty --tick-label-color - The color of tick labels.\n * @cssproperty --tick-width - The width of tick markers.\n * @cssproperty --tick-height - The height of tick markers.\n * @cssproperty --tick-selected-color - The color of selected tick markers.\n */",
+          "jsDoc": "/**\n * @summary Ranges allow the user to select a single value within a given range using a slider.\n * @documentation https://lynk.design/components/range\n * @status stable\n * @since 1.0\n *\n * @dependency lynk-form-field\n * @dependency lynk-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend an icon or similar element to the range.\n * @slot suffix - Used to append an icon or similar element to the range.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot help-tip - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n * @slot ticks - Custom tick markers. Use this to override the default tick rendering.\n * @slot reference - Reference labels displayed below the range (e.g., min/max labels).\n *\n * @event ev-blur - Emitted when the control loses focus.\n * @event ev-change - Emitted when an alteration to the control's value is committed by the user.\n * @event ev-focus - Emitted when the control gains focus.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart wrapper - The range track wrapper.\n * @csspart track - The range track (inactive portion).\n * @csspart track-active - The active portion of the track.\n * @csspart thumb - The draggable thumb.\n * @csspart ticks - The container for custom tick markers.\n * @csspart markers - The container that holds all the markers when `with-markers` is used.\n * @csspart marker - The individual markers that are shown when `with-markers` is used.\n * @csspart references - The container for reference labels.\n *\n * @cssproperty --thumb-size - The size of the thumb.\n * @cssproperty --thumb-color - The color of the thumb.\n * @cssproperty --thumb-border - The box-shadow used for the thumb border.\n * @cssproperty --track-color-active - The color of the active portion of the track.\n * @cssproperty --track-color-inactive - The color of the inactive portion of the track.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The starting point of the active track (useful for ranges that don't start at 0).\n * @cssproperty --tick-color - The color of tick markers.\n * @cssproperty --tick-label-color - The color of tick labels.\n * @cssproperty --tick-width - The width of tick markers.\n * @cssproperty --tick-height - The height of tick markers.\n * @cssproperty --tick-selected-color - The color of selected tick markers.\n */",
           "documentation": "https://lynk.design/components/range",
           "status": "stable",
           "since": "1.0",
@@ -27176,6 +27333,133 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tr/tr.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkTr",
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
+              },
+              "description": "Draws the table row using status colors",
+              "attribute": "state",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether to highlight the table row on hover or touch interactions",
+              "attribute": "interactive",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the table row in a highlighted state",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pulse the status colors for increased visibility",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "state",
+              "type": {
+                "text": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
+              },
+              "description": "Draws the table row using status colors",
+              "fieldName": "state"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether to highlight the table row on hover or touch interactions",
+              "fieldName": "interactive"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the table row in a highlighted state",
+              "fieldName": "active"
+            },
+            {
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pulse the status colors for increased visibility",
+              "fieldName": "pulse"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.",
+          "tagNameWithoutPrefix": "tr",
+          "tagName": "lynk-tr",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.\n * @documentation https://lynk.design/components/tr\n * @since 1.0\n * @status stable\n *\n * @slot - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.\n *\n * @csspart base - The component's internal wrapper.\n */",
+          "documentation": "https://lynk.design/components/tr",
+          "since": "1.0",
+          "status": "stable"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkTr",
+            "module": "components/tr/tr.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tooltip/tooltip.js",
@@ -27586,133 +27870,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tr/tr.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkTr",
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
-              },
-              "description": "Draws the table row using status colors",
-              "attribute": "state",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether to highlight the table row on hover or touch interactions",
-              "attribute": "interactive",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the table row in a highlighted state",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Pulse the status colors for increased visibility",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "state",
-              "type": {
-                "text": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
-              },
-              "description": "Draws the table row using status colors",
-              "fieldName": "state"
-            },
-            {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether to highlight the table row on hover or touch interactions",
-              "fieldName": "interactive"
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the table row in a highlighted state",
-              "fieldName": "active"
-            },
-            {
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Pulse the status colors for increased visibility",
-              "fieldName": "pulse"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.",
-          "tagNameWithoutPrefix": "tr",
-          "tagName": "lynk-tr",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.\n * @documentation https://lynk.design/components/tr\n * @since 1.0\n * @status stable\n *\n * @slot - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.\n *\n * @csspart base - The component's internal wrapper.\n */",
-          "documentation": "https://lynk.design/components/tr",
-          "since": "1.0",
-          "status": "stable"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkTr",
-            "module": "components/tr/tr.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/tree/tree.js",
@@ -28826,7 +28983,7 @@
   "package": {
     "name": "@uplynk/lynk-design",
     "description": "A library of web components for building web applications with the Uplynk user interface style guide.",
-    "version": "1.14.0",
+    "version": "1.16.0",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"