@uplynk/lynk-design 1.17.0 → 1.18.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@uplynk/lynk-design",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -49,162 +49,6 @@
             "events": []
           }
         },
-        {
-          "name": "lynk-alert",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "closable",
-              "description": "Makes the alert closable.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "type",
-              "description": "The alert's type (color).",
-              "value": {
-                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "duration",
-              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
-              "value": { "type": "string", "default": "Infinity" }
-            },
-            {
-              "name": "countdown",
-              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-              "value": { "type": "'rtl' | 'ltr' | undefined" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The alert's content." },
-            { "name": "icon", "description": "An icon to show in the alert." },
-            {
-              "name": "action",
-              "description": "Append custom actions to alert."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-show",
-              "description": "Emitted when the alert opens."
-            },
-            {
-              "name": "ev-after-show",
-              "description": "Emitted after the alert opens and all animations are complete."
-            },
-            {
-              "name": "ev-hide",
-              "description": "Emitted when the alert closes."
-            },
-            {
-              "name": "ev-after-hide",
-              "description": "Emitted after the alert closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "countdownElement", "type": "HTMLElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-                "type": "boolean"
-              },
-              {
-                "name": "closable",
-                "description": "Makes the alert closable.",
-                "type": "boolean"
-              },
-              {
-                "name": "type",
-                "description": "The alert's type (color).",
-                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              {
-                "name": "duration",
-                "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`."
-              },
-              {
-                "name": "countdown",
-                "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-                "type": "'rtl' | 'ltr' | undefined"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-show",
-                "description": "Emitted when the alert opens."
-              },
-              {
-                "name": "ev-after-show",
-                "description": "Emitted after the alert opens and all animations are complete."
-              },
-              {
-                "name": "ev-hide",
-                "description": "Emitted when the alert closes."
-              },
-              {
-                "name": "ev-after-hide",
-                "description": "Emitted after the alert closes and all animations are complete."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-auto-grid",
-          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "auto-size",
-              "description": "How to justify auto-grid items",
-              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
-            },
-            {
-              "name": "min-size",
-              "description": "How to align auto-grid items to each-other",
-              "value": { "type": "string", "default": "'20rem'" }
-            },
-            {
-              "name": "gap",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "value": {
-                "type": "string",
-                "default": "'var(--lynk-spacing-base)'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "autoSize",
-                "description": "How to justify auto-grid items",
-                "type": "'fit' | 'fill'"
-              },
-              {
-                "name": "minSize",
-                "description": "How to align auto-grid items to each-other",
-                "type": "string"
-              },
-              {
-                "name": "gap",
-                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-animation",
           "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **ev-cancel** - Emitted when the animation is canceled.\n- **ev-finish** - Emitted when the animation finishes.\n- **ev-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
@@ -370,6 +214,115 @@
             ]
           }
         },
+        {
+          "name": "lynk-alert",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "closable",
+              "description": "Makes the alert closable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "The alert's type (color).",
+              "value": {
+                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "duration",
+              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+              "value": { "type": "string", "default": "Infinity" }
+            },
+            {
+              "name": "countdown",
+              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+              "value": { "type": "'rtl' | 'ltr' | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The alert's content." },
+            { "name": "icon", "description": "An icon to show in the alert." },
+            {
+              "name": "action",
+              "description": "Append custom actions to alert."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-show",
+              "description": "Emitted when the alert opens."
+            },
+            {
+              "name": "ev-after-show",
+              "description": "Emitted after the alert opens and all animations are complete."
+            },
+            {
+              "name": "ev-hide",
+              "description": "Emitted when the alert closes."
+            },
+            {
+              "name": "ev-after-hide",
+              "description": "Emitted after the alert closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "countdownElement", "type": "HTMLElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+                "type": "boolean"
+              },
+              {
+                "name": "closable",
+                "description": "Makes the alert closable.",
+                "type": "boolean"
+              },
+              {
+                "name": "type",
+                "description": "The alert's type (color).",
+                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              {
+                "name": "duration",
+                "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`."
+              },
+              {
+                "name": "countdown",
+                "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+                "type": "'rtl' | 'ltr' | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-show",
+                "description": "Emitted when the alert opens."
+              },
+              {
+                "name": "ev-after-show",
+                "description": "Emitted after the alert opens and all animations are complete."
+              },
+              {
+                "name": "ev-hide",
+                "description": "Emitted when the alert closes."
+              },
+              {
+                "name": "ev-after-hide",
+                "description": "Emitted after the alert closes and all animations are complete."
+              }
+            ]
+          }
+        },
         {
           "name": "lynk-avatar",
           "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
@@ -424,32 +377,79 @@
                 "type": "string"
               },
               {
-                "name": "label",
-                "description": "A label to use to describe the avatar to assistive devices.",
-                "type": "string"
+                "name": "label",
+                "description": "A label to use to describe the avatar to assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "initials",
+                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "Indicates how the browser should load the image.",
+                "type": "'eager' | 'lazy'"
+              },
+              {
+                "name": "shape",
+                "description": "The shape of the avatar.",
+                "type": "'circle' | 'square' | 'rounded'"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-error",
+                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              }
+            ]
+          }
+        },
+        {
+          "name": "lynk-auto-grid",
+          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "auto-size",
+              "description": "How to justify auto-grid items",
+              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
+            },
+            {
+              "name": "min-size",
+              "description": "How to align auto-grid items to each-other",
+              "value": { "type": "string", "default": "'20rem'" }
+            },
+            {
+              "name": "gap",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "value": {
+                "type": "string",
+                "default": "'var(--lynk-spacing-base)'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "autoSize",
+                "description": "How to justify auto-grid items",
+                "type": "'fit' | 'fill'"
               },
               {
-                "name": "initials",
-                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "name": "minSize",
+                "description": "How to align auto-grid items to each-other",
                 "type": "string"
               },
               {
-                "name": "loading",
-                "description": "Indicates how the browser should load the image.",
-                "type": "'eager' | 'lazy'"
-              },
-              {
-                "name": "shape",
-                "description": "The shape of the avatar.",
-                "type": "'circle' | 'square' | 'rounded'"
+                "name": "gap",
+                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+                "type": "string"
               }
             ],
-            "events": [
-              {
-                "name": "ev-error",
-                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -613,7 +613,7 @@
               "name": "color",
               "description": "The button's color.",
               "value": {
-                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'",
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'",
                 "default": "'default'"
               }
             },
@@ -797,7 +797,7 @@
               {
                 "name": "color",
                 "description": "The button's color.",
-                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'"
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'"
               },
               {
                 "name": "appearance",
@@ -1203,7 +1203,7 @@
               "name": "aspect-ratio",
               "description": "The image block aspect ratio.",
               "value": {
-                "type": "| '1:1'\n    | '3:4'\n    | '4:3'\n    | '16:9'\n    | '21:9'\n    | '9:16'",
+                "type": "'1:1' | '3:4' | '4:3' | '16:9' | '21:9' | '9:16'",
                 "default": "'16:9'"
               }
             }
@@ -1264,7 +1264,7 @@
               {
                 "name": "aspectRatio",
                 "description": "The image block aspect ratio.",
-                "type": "| '1:1'\n    | '3:4'\n    | '4:3'\n    | '16:9'\n    | '21:9'\n    | '9:16'"
+                "type": "'1:1' | '3:4' | '4:3' | '16:9' | '21:9' | '9:16'"
               }
             ],
             "events": []
@@ -1581,7 +1581,7 @@
         },
         {
           "name": "lynk-color-picker",
-          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the color picker loses focus.\n- **ev-change** - Emitted when the color picker's value changes.\n- **ev-focus** - Emitted when the color picker receives focus.\n- **ev-input** - Emitted when the color picker receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n- **help-text** - Help text that describes how to use the color picker.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the color picker. Alternatively, you can use the `help-tip` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
+          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the color picker loses focus.\n- **ev-change** - Emitted when the color picker's value changes.\n- **ev-focus** - Emitted when the color picker receives focus.\n- **ev-input** - Emitted when the color picker receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the color picker.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the color picker. Alternatively, you can use the `help-tip` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -1599,6 +1599,16 @@
               "description": "The help text below the color picker. Alternatively, you can use the `help-text` slot.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the `help-tip` slot.",
@@ -1717,6 +1727,14 @@
               "name": "label",
               "description": "The color picker's form label. Alternatively, you can use the `label` attribute."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "help-text",
               "description": "Help text that describes how to use the color picker."
@@ -1775,6 +1793,16 @@
                 "description": "The help text below the color picker. Alternatively, you can use the `help-text` slot.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the `help-tip` slot.",
@@ -1910,7 +1938,7 @@
         },
         {
           "name": "lynk-combobox",
-          "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the combobox's menu opens.\n- **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the combobox's menu closes.\n- **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **ev-error** - Emitted when the combobox menu fails to open.\n- **ev-add-option** - Emitted when a custom option is added via allowCustomValues.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a ev-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the combobox's menu opens.\n- **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the combobox's menu closes.\n- **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **ev-error** - Emitted when the combobox menu fails to open.\n- **ev-add-option** - Emitted when a custom option is added via allowCustomValues.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a ev-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -1920,8 +1948,8 @@
             },
             {
               "name": "value",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string | string[]", "default": "''" }
             },
             {
               "name": "state",
@@ -2004,6 +2032,16 @@
               "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "form",
               "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
@@ -2019,6 +2057,23 @@
               "description": "Allows users to enter custom values that don't match existing options.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "multiple",
+              "description": "Allows more than one option to be selected. Selected options are displayed as tags.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "max-options-visible",
+              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "getTag",
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted\nHTML of the symbol to render at the specified value.",
+              "value": {
+                "type": "(option: LynkOption, index: number) => TemplateResult | string | HTMLElement"
+              }
+            },
             {
               "name": "getOption",
               "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
@@ -2044,6 +2099,14 @@
               "name": "label",
               "description": "The combobox's label. Alternatively, you can use the `label` attribute."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "prefix",
               "description": "Used to prepend a presentational icon or similar element to the combobox."
@@ -2124,8 +2187,10 @@
               { "name": "listbox", "type": "HTMLSlotElement" },
               { "name": "displayLabel", "type": "string" },
               { "name": "selectedOption", "type": "LynkOption | undefined" },
+              { "name": "selectedOptions", "type": "LynkOption[]" },
               { "name": "numberFilteredOptions", "type": "number" },
               { "name": "cachedOptions", "type": "LynkOption[]" },
+              { "name": "valueHasChanged", "type": "boolean" },
               {
                 "name": "name",
                 "description": "The name of the combobox, submitted as a name/value pair with form data.",
@@ -2133,13 +2198,12 @@
               },
               {
                 "name": "value",
-                "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-                "type": "string"
+                "description": "The current value of the combobox, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
               },
               {
                 "name": "defaultValue",
                 "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string"
+                "type": "string | string[]"
               },
               {
                 "name": "state",
@@ -2216,6 +2280,16 @@
                 "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "form",
                 "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
@@ -2231,6 +2305,21 @@
                 "description": "Allows users to enter custom values that don't match existing options.",
                 "type": "boolean"
               },
+              {
+                "name": "multiple",
+                "description": "Allows more than one option to be selected. Selected options are displayed as tags.",
+                "type": "boolean"
+              },
+              {
+                "name": "maxOptionsVisible",
+                "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+                "type": "number"
+              },
+              {
+                "name": "getTag",
+                "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted\nHTML of the symbol to render at the specified value.",
+                "type": "(option: LynkOption, index: number) => TemplateResult | string | HTMLElement"
+              },
               {
                 "name": "getOption",
                 "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
@@ -2448,7 +2537,7 @@
         },
         {
           "name": "lynk-date-picker",
-          "description": "A date picker that combines calendar component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.",
+          "description": "A date picker that combines calendar component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.",
           "doc-url": "",
           "attributes": [
             {
@@ -2476,6 +2565,16 @@
               "description": "The help text below the input.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -2545,6 +2644,14 @@
               "name": "label",
               "description": "The input's label. Alternatively, you can use the label prop."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "help-text",
               "description": "Help text that describes how to use the input."
@@ -2604,6 +2711,16 @@
                 "description": "The help text below the input.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -2620,78 +2737,209 @@
                 "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Makes the input required.",
-                "type": "boolean"
+                "name": "required",
+                "description": "Makes the input required.",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Marks the field as optional.",
+                "type": "boolean"
+              },
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the date picker instead of above it.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "min",
+                "description": "The minimum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "The maximum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the input is populated.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-change",
+                "description": "Emitted when the date value changes."
+              },
+              {
+                "name": "ev-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "ev-clear",
+                "description": "Emitted when the input is cleared."
+              }
+            ]
+          }
+        },
+        {
+          "name": "lynk-dialog",
+          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "no-header",
+              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "The dialog's size.",
+              "value": {
+                "type": "'fitted' | 'full' | 'auto'",
+                "default": "'auto'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The dialog's main content." },
+            {
+              "name": "label",
+              "description": "The dialog's label. Alternatively, you can use the label prop."
+            },
+            {
+              "name": "header-actions",
+              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`."
+            },
+            {
+              "name": "footer",
+              "description": "The dialog's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-show",
+              "description": "Emitted when the dialog opens."
+            },
+            {
+              "name": "ev-after-show",
+              "description": "Emitted after the dialog opens and all animations are complete."
+            },
+            {
+              "name": "ev-hide",
+              "description": "Emitted when the dialog closes."
+            },
+            {
+              "name": "ev-after-hide",
+              "description": "Emitted after the dialog closes and all animations are complete."
+            },
+            {
+              "name": "ev-initial-focus",
+              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+            },
+            {
+              "name": "ev-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "modal",
+                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.",
+                "type": "Modal"
               },
+              { "name": "dialog", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
               {
-                "name": "optional",
-                "description": "Marks the field as optional.",
+                "name": "open",
+                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
                 "type": "boolean"
               },
               {
-                "name": "dirty",
-                "description": "Adds the dirty indicator mark.",
-                "type": "boolean"
+                "name": "label",
+                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
               },
               {
-                "name": "inline",
-                "description": "Arranges the label inline next to the date picker instead of above it.",
+                "name": "noHeader",
+                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
                 "type": "boolean"
               },
               {
                 "name": "size",
-                "description": "The input's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "min",
-                "description": "The minimum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
-              },
-              {
-                "name": "max",
-                "description": "The maximum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
-              },
+                "description": "The dialog's size.",
+                "type": "'fitted' | 'full' | 'auto'"
+              }
+            ],
+            "events": [
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-                "type": "boolean"
+                "name": "ev-show",
+                "description": "Emitted when the dialog opens."
               },
               {
-                "name": "clearable",
-                "description": "Adds a clear button when the input is populated.",
-                "type": "boolean"
+                "name": "ev-after-show",
+                "description": "Emitted after the dialog opens and all animations are complete."
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
+                "name": "ev-hide",
+                "description": "Emitted when the dialog closes."
               },
               {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-change",
-                "description": "Emitted when the date value changes."
+                "name": "ev-after-hide",
+                "description": "Emitted after the dialog closes and all animations are complete."
               },
               {
-                "name": "ev-input",
-                "description": "Emitted when the control receives input."
+                "name": "ev-initial-focus",
+                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
               },
               {
-                "name": "ev-clear",
-                "description": "Emitted when the input is cleared."
+                "name": "ev-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
               }
             ]
           }
         },
         {
           "name": "lynk-date-time-picker",
-          "description": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date-time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.\n- **clock** - The clock component.",
+          "description": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date-time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.\n- **clock** - The clock component.",
           "doc-url": "",
           "attributes": [
             {
@@ -2719,6 +2967,16 @@
               "description": "The help text below the input.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -2839,6 +3097,14 @@
               "name": "label",
               "description": "The input's label. Alternatively, you can use the label prop."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "help-text",
               "description": "Help text that describes how to use the input."
@@ -2903,6 +3169,16 @@
                 "description": "The help text below the input.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -2940,226 +3216,95 @@
               },
               {
                 "name": "size",
-                "description": "The input's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "min",
-                "description": "The minimum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
-              },
-              {
-                "name": "max",
-                "description": "The maximum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
-              },
-              {
-                "name": "seconds",
-                "description": "Show seconds in the time picker.",
-                "type": "boolean"
-              },
-              {
-                "name": "format",
-                "description": "Time format for the clock component.",
-                "type": "'locale' | '12h' | '24h'"
-              },
-              {
-                "name": "minuteInterval",
-                "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-                "type": "number"
-              },
-              {
-                "name": "defaultTime",
-                "description": "Default time to set when a date is selected without existing time.",
-                "type": "'start' | 'end'"
-              },
-              {
-                "name": "hoist",
-                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-                "type": "boolean"
-              },
-              {
-                "name": "placement",
-                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its trigger.",
-                "type": "number"
-              },
-              {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its trigger.",
-                "type": "number"
-              },
-              {
-                "name": "inlinePickers",
-                "description": "Display the pickers inline without the dropdown and input fields.",
-                "type": "boolean"
-              },
-              {
-                "name": "clearable",
-                "description": "Adds a clear button when the input is populated.",
-                "type": "boolean"
-              },
-              {
-                "name": "normalizeMode",
-                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
-                "type": "'none' | 'local'"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-change",
-                "description": "Emitted when the date-time value changes."
-              },
-              {
-                "name": "ev-input",
-                "description": "Emitted when the control receives input."
-              },
-              {
-                "name": "ev-clear",
-                "description": "Emitted when the input is cleared."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-dialog",
-          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "no-header",
-              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "size",
-              "description": "The dialog's size.",
-              "value": {
-                "type": "'fitted' | 'full' | 'auto'",
-                "default": "'auto'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dialog's main content." },
-            {
-              "name": "label",
-              "description": "The dialog's label. Alternatively, you can use the label prop."
-            },
-            {
-              "name": "header-actions",
-              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`."
-            },
-            {
-              "name": "footer",
-              "description": "The dialog's footer, usually one or more buttons representing various options."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-show",
-              "description": "Emitted when the dialog opens."
-            },
-            {
-              "name": "ev-after-show",
-              "description": "Emitted after the dialog opens and all animations are complete."
-            },
-            {
-              "name": "ev-hide",
-              "description": "Emitted when the dialog closes."
-            },
-            {
-              "name": "ev-after-hide",
-              "description": "Emitted after the dialog closes and all animations are complete."
-            },
-            {
-              "name": "ev-initial-focus",
-              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-            },
-            {
-              "name": "ev-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
-            }
-          ],
-          "js": {
-            "properties": [
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
               {
-                "name": "modal",
-                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.",
-                "type": "Modal"
+                "name": "min",
+                "description": "The minimum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
               },
-              { "name": "dialog", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
               {
-                "name": "open",
-                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+                "name": "max",
+                "description": "The maximum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "seconds",
+                "description": "Show seconds in the time picker.",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
+                "name": "format",
+                "description": "Time format for the clock component.",
+                "type": "'locale' | '12h' | '24h'"
               },
               {
-                "name": "noHeader",
-                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+                "name": "minuteInterval",
+                "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
+                "type": "number"
+              },
+              {
+                "name": "defaultTime",
+                "description": "Default time to set when a date is selected without existing time.",
+                "type": "'start' | 'end'"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
                 "type": "boolean"
               },
               {
-                "name": "size",
-                "description": "The dialog's size.",
-                "type": "'fitted' | 'full' | 'auto'"
-              }
-            ],
-            "events": [
+                "name": "placement",
+                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
               {
-                "name": "ev-show",
-                "description": "Emitted when the dialog opens."
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its trigger.",
+                "type": "number"
               },
               {
-                "name": "ev-after-show",
-                "description": "Emitted after the dialog opens and all animations are complete."
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its trigger.",
+                "type": "number"
               },
               {
-                "name": "ev-hide",
-                "description": "Emitted when the dialog closes."
+                "name": "inlinePickers",
+                "description": "Display the pickers inline without the dropdown and input fields.",
+                "type": "boolean"
               },
               {
-                "name": "ev-after-hide",
-                "description": "Emitted after the dialog closes and all animations are complete."
+                "name": "clearable",
+                "description": "Adds a clear button when the input is populated.",
+                "type": "boolean"
               },
               {
-                "name": "ev-initial-focus",
-                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+                "name": "normalizeMode",
+                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+                "type": "'none' | 'local'"
               },
               {
-                "name": "ev-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-change",
+                "description": "Emitted when the date-time value changes."
+              },
+              {
+                "name": "ev-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "ev-clear",
+                "description": "Emitted when the input is cleared."
               }
             ]
           }
@@ -3481,9 +3626,69 @@
             ]
           }
         },
+        {
+          "name": "lynk-flank",
+          "description": "Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "start",
+              "description": "Flank from first item",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "end",
+              "description": "Flank from the last item",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "align",
+              "description": "How to align flanked items to each-other",
+              "value": {
+                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+                "default": "'center'"
+              }
+            },
+            {
+              "name": "gap",
+              "description": "The space between flanked items. Use spacing tokens or any custom size.",
+              "value": {
+                "type": "string",
+                "default": "'var(--lynk-spacing-small)'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "start",
+                "description": "Flank from first item",
+                "type": "boolean"
+              },
+              {
+                "name": "end",
+                "description": "Flank from the last item",
+                "type": "boolean"
+              },
+              {
+                "name": "align",
+                "description": "How to align flanked items to each-other",
+                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
+              },
+              {
+                "name": "gap",
+                "description": "The space between flanked items. Use spacing tokens or any custom size.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-form-field",
-          "description": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n---\n\n\n### **Events:**\n - **ev-focus** - Emitted when field or slotted element gains focus.\n- **ev-blur** - Emitted when field or slotted element loses focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - Custom label content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label wrapper.\n- **control** - The component's slotted control wrapper.\n- **help-text** - The component's help-text wrapper.",
+          "description": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n---\n\n\n### **Events:**\n - **ev-focus** - Emitted when field or slotted element gains focus.\n- **ev-blur** - Emitted when field or slotted element loses focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - Custom label content.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label wrapper.\n- **label-content** - The container that wraps the label text and its marks.\n- **label-end** - The right-aligned content container at the end of the label.\n- **control** - The component's slotted control wrapper.\n- **help-text** - The component's help-text wrapper.\n- **help-text-content** - The container that wraps the help-text content.\n- **help-text-end** - The right-aligned content container at the end of the help text.",
           "doc-url": "",
           "attributes": [
             {
@@ -3507,12 +3712,22 @@
               "description": "The input's label. Alternatively, you can use the label slot.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             { "name": "id", "value": { "type": "string", "default": "''" } },
             {
               "name": "help-text",
               "description": "The help text below the input. Alternatively, you can use the help-text slot.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -3553,7 +3768,15 @@
             { "name": "", "description": "The default slot." },
             { "name": "help-tip", "description": "Custom help-tip content." },
             { "name": "help-text", "description": "Custom help-text content." },
-            { "name": "label", "description": "Custom label content." }
+            { "name": "label", "description": "Custom label content." },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            }
           ],
           "events": [
             {
@@ -3588,12 +3811,22 @@
                 "description": "The input's label. Alternatively, you can use the label slot.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label row. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
               { "name": "id", "type": "string" },
               {
                 "name": "helpText",
                 "description": "The help text below the input. Alternatively, you can use the help-text slot.",
                 "type": "string"
               },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help-text row. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -3642,66 +3875,6 @@
             ]
           }
         },
-        {
-          "name": "lynk-flank",
-          "description": "Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "start",
-              "description": "Flank from first item",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "end",
-              "description": "Flank from the last item",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "align",
-              "description": "How to align flanked items to each-other",
-              "value": {
-                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
-                "default": "'center'"
-              }
-            },
-            {
-              "name": "gap",
-              "description": "The space between flanked items. Use spacing tokens or any custom size.",
-              "value": {
-                "type": "string",
-                "default": "'var(--lynk-spacing-small)'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "start",
-                "description": "Flank from first item",
-                "type": "boolean"
-              },
-              {
-                "name": "end",
-                "description": "Flank from the last item",
-                "type": "boolean"
-              },
-              {
-                "name": "align",
-                "description": "How to align flanked items to each-other",
-                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
-              },
-              {
-                "name": "gap",
-                "description": "The space between flanked items. Use spacing tokens or any custom size.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-format-bytes",
           "description": "Formats a number as a human readable bytes value.\n---\n",
@@ -4372,7 +4545,7 @@
         },
         {
           "name": "lynk-input",
-          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-clear** - Emitted when the clear button is activated.\n- **ev-enter** - Emitted when the return key is pressed while the input has focus.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **action** - append a custom button to the input.\n- **label** - The input's label. Alternatively, you can use the label prop.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **input** - The input control.\n- **prefix** - The input prefix container.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The input suffix container.",
+          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-clear** - Emitted when the clear button is activated.\n- **ev-enter** - Emitted when the return key is pressed while the input has focus.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **action** - append a custom button to the input.\n- **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **input** - The input control.\n- **prefix** - The input prefix container.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The input suffix container.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -4380,7 +4553,7 @@
               "name": "type",
               "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
               "value": {
-                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'",
+                "type": "'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'",
                 "default": "'text'"
               }
             },
@@ -4430,6 +4603,16 @@
               "description": "The help text below the input. Alternatively, you can use the help-text slot.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -4581,6 +4764,14 @@
               "name": "label",
               "description": "The input's label. Alternatively, you can use the label prop."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "prefix",
               "description": "Used to prepend an icon or similar element to the input."
@@ -4647,7 +4838,7 @@
               {
                 "name": "type",
                 "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
+                "type": "'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'"
               },
               {
                 "name": "name",
@@ -4694,6 +4885,16 @@
                 "description": "The help text below the input. Alternatively, you can use the help-text slot.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -5402,7 +5603,7 @@
         },
         {
           "name": "lynk-number-input",
-          "description": "Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **stepUp()** - Increments the value by the step amount.\n- **stepDown()** - Decrements the value by the step amount.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the help-tip prop.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input (before steppers).\n- **increment-icon** - An icon to use in lieu of the default increment icon.\n- **decrement-icon** - An icon to use in lieu of the default decrement icon.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **input** - The internal input control.\n- **prefix** - The input prefix container.\n- **suffix** - The input suffix container.\n- **stepper-decrement** - The decrement button.\n- **stepper-increment** - The increment button.",
+          "description": "Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **stepUp()** - Increments the value by the step amount.\n- **stepDown()** - Decrements the value by the step amount.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the help-tip prop.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input (before steppers).\n- **increment-icon** - An icon to use in lieu of the default increment icon.\n- **decrement-icon** - An icon to use in lieu of the default decrement icon.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **input** - The internal input control.\n- **prefix** - The input prefix container.\n- **suffix** - The input suffix container.\n- **stepper-decrement** - The decrement button.\n- **stepper-increment** - The increment button.",
           "doc-url": "",
           "attributes": [
             {
@@ -5433,6 +5634,16 @@
               "description": "The input's help text. If you need to display HTML, use the help-text slot instead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -5527,6 +5738,14 @@
               "name": "label",
               "description": "The input's label. Alternatively, you can use the label prop."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "help-text",
               "description": "Help text that describes how to use the input. Alternatively, you can use the help-text prop."
@@ -5602,6 +5821,16 @@
                 "description": "The input's help text. If you need to display HTML, use the help-text slot instead.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -6917,7 +7146,7 @@
               "name": "color",
               "description": "The button's color.",
               "value": {
-                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'",
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'",
                 "default": "'default'"
               }
             },
@@ -6980,7 +7209,7 @@
               {
                 "name": "color",
                 "description": "The button's color.",
-                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'"
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'"
               },
               {
                 "name": "appearance",
@@ -7012,7 +7241,7 @@
         },
         {
           "name": "lynk-radio-group",
-          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the radio group's selected value changes.\n- **ev-input** - Emitted when the radio group receives user input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<lynk-radio>` or `<lynk-radio-button>` elements are placed.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - The radio group label. Required for proper accessibility. Alternatively, you can use the label attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the radio group's selected value changes.\n- **ev-input** - Emitted when the radio group receives user input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<lynk-radio>` or `<lynk-radio-button>` elements are placed.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - The radio group label. Required for proper accessibility. Alternatively, you can use the label attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -7025,6 +7254,16 @@
               "description": "The input's help text. If you need to display HTML, you can use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -7099,6 +7338,14 @@
             {
               "name": "label",
               "description": "The radio group label. Required for proper accessibility. Alternatively, you can use the label attribute."
+            },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
             }
           ],
           "events": [
@@ -7130,6 +7377,16 @@
                 "description": "The input's help text. If you need to display HTML, you can use the `help-text` slot instead.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -7217,7 +7474,7 @@
         },
         {
           "name": "lynk-range",
-          "description": "Ranges allow the user to select a single value within a given range using a slider.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend an icon or similar element to the range.\n- **suffix** - Used to append an icon or similar element to the range.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n- **ticks** - Custom tick markers. Use this to override the default tick rendering.\n- **reference** - Reference labels displayed below the range (e.g., min/max labels).\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--thumb-color** - The color of the thumb. _(default: undefined)_\n- **--thumb-border** - The box-shadow used for the thumb border. _(default: undefined)_\n- **--track-color-active** - The color of the active portion of the track. _(default: undefined)_\n- **--track-color-inactive** - The color of the inactive portion of the track. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The starting point of the active track (useful for ranges that don't start at 0). _(default: undefined)_\n- **--tick-color** - The color of tick markers. _(default: undefined)_\n- **--tick-label-color** - The color of tick labels. _(default: undefined)_\n- **--tick-width** - The width of tick markers. _(default: undefined)_\n- **--tick-height** - The height of tick markers. _(default: undefined)_\n- **--tick-selected-color** - The color of selected tick markers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **wrapper** - The range track wrapper.\n- **track** - The range track (inactive portion).\n- **track-active** - The active portion of the track.\n- **thumb** - The draggable thumb.\n- **ticks** - The container for custom tick markers.\n- **markers** - The container that holds all the markers when `with-markers` is used.\n- **marker** - The individual markers that are shown when `with-markers` is used.\n- **references** - The container for reference labels.",
+          "description": "Ranges allow the user to select a single value within a given range using a slider.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend an icon or similar element to the range.\n- **suffix** - Used to append an icon or similar element to the range.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n- **ticks** - Custom tick markers. Use this to override the default tick rendering.\n- **reference** - Reference labels displayed below the range (e.g., min/max labels).\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--thumb-color** - The color of the thumb. _(default: undefined)_\n- **--thumb-border** - The box-shadow used for the thumb border. _(default: undefined)_\n- **--track-color-active** - The color of the active portion of the track. _(default: undefined)_\n- **--track-color-inactive** - The color of the inactive portion of the track. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The starting point of the active track (useful for ranges that don't start at 0). _(default: undefined)_\n- **--tick-color** - The color of tick markers. _(default: undefined)_\n- **--tick-label-color** - The color of tick labels. _(default: undefined)_\n- **--tick-width** - The width of tick markers. _(default: undefined)_\n- **--tick-height** - The height of tick markers. _(default: undefined)_\n- **--tick-selected-color** - The color of selected tick markers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **wrapper** - The range track wrapper.\n- **track** - The range track (inactive portion).\n- **track-active** - The active portion of the track.\n- **thumb** - The draggable thumb.\n- **ticks** - The container for custom tick markers.\n- **markers** - The container that holds all the markers when `with-markers` is used.\n- **marker** - The individual markers that are shown when `with-markers` is used.\n- **references** - The container for reference labels.",
           "doc-url": "",
           "attributes": [
             {
@@ -7255,6 +7512,16 @@
               "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -7348,6 +7615,14 @@
               "name": "label",
               "description": "The range's label. Alternatively, you can use the `label` attribute."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "prefix",
               "description": "Used to prepend an icon or similar element to the range."
@@ -7447,6 +7722,16 @@
                 "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -7752,7 +8037,7 @@
         },
         {
           "name": "lynk-select",
-          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the select's menu opens.\n- **ev-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the select's menu closes.\n- **ev-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the select's menu opens.\n- **ev-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the select's menu closes.\n- **ev-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -7838,6 +8123,16 @@
               "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The select's help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -7898,6 +8193,14 @@
               "name": "label",
               "description": "The input's label. Alternatively, you can use the `label` attribute."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "prefix",
               "description": "Used to prepend a presentational icon or similar element to the combobox."
@@ -8056,6 +8359,16 @@
                 "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The select's help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -9069,110 +9382,529 @@
               "name": "color",
               "description": "The tag's color.",
               "value": {
-                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'",
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "type",
+              "description": "The tag's variant (backwards compatible alias for color).",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "appearance",
+              "description": "The tag's visual appearance.",
+              "value": {
+                "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'",
+                "default": "'outlined filled'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'tiny' | 'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "removable",
+              "description": "Makes the tag removable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pulse",
+              "description": "Makes the tag pulsate to draw attention.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "badge",
+              "description": "Draws a solid filled badge-styled tag (deprecated - use appearance=\"loud\" instead).",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The tag's content." },
+            {
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the tag."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-remove",
+              "description": "Emitted when the remove button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "The tag's color.",
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'"
+              },
+              {
+                "name": "type",
+                "description": "The tag's variant (backwards compatible alias for color)."
+              },
+              {
+                "name": "appearance",
+                "description": "The tag's visual appearance.",
+                "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'"
+              },
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "type": "'tiny' | 'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style tag with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "removable",
+                "description": "Makes the tag removable.",
+                "type": "boolean"
+              },
+              {
+                "name": "pulse",
+                "description": "Makes the tag pulsate to draw attention.",
+                "type": "boolean"
+              },
+              {
+                "name": "badge",
+                "description": "Draws a solid filled badge-styled tag (deprecated - use appearance=\"loud\" instead)."
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          }
+        },
+        {
+          "name": "lynk-tag-input",
+          "description": "Tag inputs let users quickly enter a list of values that are displayed as removable tags.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the value changes (a tag is added, removed, or the field is cleared).\n- **ev-input** - Emitted when the value changes (a tag is added, removed, or the field is cleared).\n- **ev-add-tag** - Emitted when a tag is added. The tag value is available in `event.detail.value`.\n- **ev-remove-tag** - Emitted when a tag is removed. The tag value is available in `event.detail.value`.\n- **ev-clear** - Emitted when the control is cleared.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **addTag(rawValue: _string_)** - Adds a tag with the given value. Respects `maxTags`, `maxlength`, and `allowDuplicates`.\n- **removeTag(index: _number_)** - Removes the tag at the given index.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - **label** - The tag input's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the control.\n- **suffix** - Used to append a presentational icon or similar element to the control.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the tag input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, control, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The control's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **control** - The container that wraps the prefix, tags, input, clear icon, and suffix.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **tags** - The container that houses the tags.\n- **tag** - The individual tags that represent each value.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **input** - The internal text `<input>` element.\n- **clear-button** - The clear button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the tag input, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string | string[]", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The tag input's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The tag input's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The tag input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-tip",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the tag input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the tag input readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the tag input a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "optional",
+              "description": "Marks the tag input as optional.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dirty",
+              "description": "Adds the dirty indicator mark.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the tag input is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "description": "Draws pill-style tags and control with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "tag-appearance",
+              "description": "The visual appearance applied to each tag.",
+              "value": {
+                "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'",
+                "default": "'outlined filled'"
+              }
+            },
+            {
+              "name": "tag-color",
+              "description": "The color applied to each tag.",
+              "value": {
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "inline",
+              "description": "Arranges the label inline next to the control instead of above it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "state",
+              "description": "The tag input's feedback status using manual validation.",
+              "value": {
+                "type": "'error' | 'warning' | 'success' | 'default'",
                 "default": "'default'"
               }
             },
             {
-              "name": "type",
-              "description": "The tag's variant (backwards compatible alias for color).",
-              "value": { "type": "string" }
+              "name": "max-tags",
+              "description": "The maximum number of tags allowed. Once reached, no more tags can be added. Set to 0 to remove the limit.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "appearance",
-              "description": "The tag's visual appearance.",
-              "value": {
-                "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'",
-                "default": "'outlined filled'"
-              }
+              "name": "maxlength",
+              "description": "The maximum length, in characters, of an individual tag. Set to 0 to remove the limit.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "size",
-              "description": "The tag's size.",
-              "value": {
-                "type": "'tiny' | 'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
+              "name": "allow-duplicates",
+              "description": "Allows duplicate tag values to be added. By default duplicates are ignored.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "pill",
-              "description": "Draws a pill-style tag with rounded edges.",
+              "name": "add-on-blur",
+              "description": "Adds any pending text as a tag when the control loses focus.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "removable",
-              "description": "Makes the tag removable.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "delimiter",
+              "description": "The character used to confirm a tag as the user types, split pasted text into multiple tags, and parse the\n`value` attribute. Defaults to a comma.",
+              "value": { "type": "string", "default": "','" }
             },
             {
-              "name": "pulse",
-              "description": "Makes the tag pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "remove-on-backspace",
+              "description": "Removes the last tag when Backspace is pressed while the input is empty.",
+              "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "badge",
-              "description": "Draws a solid filled badge-styled tag (deprecated - use appearance=\"loud\" instead).",
-              "value": { "type": "string" }
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "getTag",
+              "description": "A function that customizes the rendered tags. The first argument is the tag's value, the second is its index. The\nfunction should return a Lit TemplateResult, a string of trusted HTML, or an HTMLElement.",
+              "value": {
+                "type": "(value: string, index: number) => TemplateResult | string | HTMLElement"
+              }
             }
           ],
           "slots": [
-            { "name": "", "description": "The tag's content." },
+            {
+              "name": "label",
+              "description": "The tag input's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the tag."
+              "description": "Used to prepend a presentational icon or similar element to the control."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append a presentational icon or similar element to the control."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the tag input. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [
             {
-              "name": "ev-remove",
-              "description": "Emitted when the remove button is activated."
+              "name": "ev-change",
+              "description": "Emitted when the value changes (a tag is added, removed, or the field is cleared)."
+            },
+            {
+              "name": "ev-input",
+              "description": "Emitted when the value changes (a tag is added, removed, or the field is cleared)."
+            },
+            {
+              "name": "ev-add-tag",
+              "description": "Emitted when a tag is added. The tag value is available in `event.detail.value`."
+            },
+            {
+              "name": "ev-remove-tag",
+              "description": "Emitted when a tag is removed. The tag value is available in `event.detail.value`."
+            },
+            {
+              "name": "ev-clear",
+              "description": "Emitted when the control is cleared."
+            },
+            {
+              "name": "ev-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "ev-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "ev-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
           "js": {
             "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "valueHasChanged", "type": "boolean" },
               {
-                "name": "color",
-                "description": "The tag's color.",
-                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'"
+                "name": "name",
+                "description": "The name of the tag input, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "type",
-                "description": "The tag's variant (backwards compatible alias for color)."
+                "name": "value",
+                "description": "The current value of the tag input as an array of strings. Each entry is submitted as a separate name/value pair\nwith form data. When set as an attribute, provide a `delimiter`-separated string (comma by default).",
+                "type": "string[]"
               },
               {
-                "name": "appearance",
-                "description": "The tag's visual appearance.",
-                "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'"
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | string[]"
               },
               {
                 "name": "size",
-                "description": "The tag's size.",
-                "type": "'tiny' | 'small' | 'medium' | 'large'"
+                "description": "The tag input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "label",
+                "description": "The tag input's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the input is empty.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The tag input's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTip",
+                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the tag input.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the tag input readonly.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the tag input a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "optional",
+                "description": "Marks the tag input as optional.",
+                "type": "boolean"
+              },
+              {
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the tag input is not empty.",
+                "type": "boolean"
               },
               {
                 "name": "pill",
-                "description": "Draws a pill-style tag with rounded edges.",
+                "description": "Draws pill-style tags and control with rounded edges.",
                 "type": "boolean"
               },
               {
-                "name": "removable",
-                "description": "Makes the tag removable.",
+                "name": "tagAppearance",
+                "description": "The visual appearance applied to each tag.",
+                "type": "'loud' | 'filled' | 'outlined' | 'outlined filled'"
+              },
+              {
+                "name": "tagColor",
+                "description": "The color applied to each tag.",
+                "type": "'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info'"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the control instead of above it.",
                 "type": "boolean"
               },
               {
-                "name": "pulse",
-                "description": "Makes the tag pulsate to draw attention.",
+                "name": "state",
+                "description": "The tag input's feedback status using manual validation.",
+                "type": "'error' | 'warning' | 'success' | 'default'"
+              },
+              {
+                "name": "maxTags",
+                "description": "The maximum number of tags allowed. Once reached, no more tags can be added. Set to 0 to remove the limit.",
+                "type": "number"
+              },
+              {
+                "name": "maxlength",
+                "description": "The maximum length, in characters, of an individual tag. Set to 0 to remove the limit.",
+                "type": "number"
+              },
+              {
+                "name": "allowDuplicates",
+                "description": "Allows duplicate tag values to be added. By default duplicates are ignored.",
                 "type": "boolean"
               },
               {
-                "name": "badge",
-                "description": "Draws a solid filled badge-styled tag (deprecated - use appearance=\"loud\" instead)."
+                "name": "addOnBlur",
+                "description": "Adds any pending text as a tag when the control loses focus.",
+                "type": "boolean"
+              },
+              {
+                "name": "delimiter",
+                "description": "The character used to confirm a tag as the user types, split pasted text into multiple tags, and parse the\n`value` attribute. Defaults to a comma.",
+                "type": "string"
+              },
+              {
+                "name": "removeOnBackspace",
+                "description": "Removes the last tag when Backspace is pressed while the input is empty.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element.",
+                "type": "string"
+              },
+              {
+                "name": "getTag",
+                "description": "A function that customizes the rendered tags. The first argument is the tag's value, the second is its index. The\nfunction should return a Lit TemplateResult, a string of trusted HTML, or an HTMLElement.",
+                "type": "(value: string, index: number) => TemplateResult | string | HTMLElement"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
               }
             ],
             "events": [
               {
-                "name": "ev-remove",
-                "description": "Emitted when the remove button is activated."
+                "name": "ev-change",
+                "description": "Emitted when the value changes (a tag is added, removed, or the field is cleared)."
+              },
+              {
+                "name": "ev-input",
+                "description": "Emitted when the value changes (a tag is added, removed, or the field is cleared)."
+              },
+              {
+                "name": "ev-add-tag",
+                "description": "Emitted when a tag is added. The tag value is available in `event.detail.value`."
+              },
+              {
+                "name": "ev-remove-tag",
+                "description": "Emitted when a tag is removed. The tag value is available in `event.detail.value`."
+              },
+              {
+                "name": "ev-clear",
+                "description": "Emitted when the control is cleared."
+              },
+              {
+                "name": "ev-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "ev-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "ev-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
@@ -9225,7 +9957,7 @@
         },
         {
           "name": "lynk-textarea",
-          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - A help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **textarea** - The textarea control.",
+          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - A help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **textarea** - The textarea control.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -9270,6 +10002,16 @@
               "description": "The textarea's help text. Alternatively, you can use the help-text slot.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tip accompanying the label. Alternatively, you can use the help-tip slot.",
@@ -9385,6 +10127,14 @@
               "name": "label",
               "description": "The textarea's label. Alternatively, you can use the label prop."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "help-text",
               "description": "Help text that describes how to use the input."
@@ -9456,6 +10206,16 @@
                 "description": "The textarea's help text. Alternatively, you can use the help-text slot.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tip accompanying the label. Alternatively, you can use the help-tip slot.",
@@ -9674,7 +10434,7 @@
         },
         {
           "name": "lynk-time-picker",
-          "description": "A time picker that combines clock component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the time input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **clock** - The clock component.",
+          "description": "A time picker that combines clock component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the time input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **clock** - The clock component.",
           "doc-url": "",
           "attributes": [
             {
@@ -9702,6 +10462,16 @@
               "description": "The help text below the input.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "help-tip",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -9779,6 +10549,14 @@
               "name": "label",
               "description": "The input's label. Alternatively, you can use the label prop."
             },
+            {
+              "name": "label-end",
+              "description": "Optional right-aligned content shown at the end of the label row."
+            },
+            {
+              "name": "help-text-end",
+              "description": "Optional right-aligned content shown at the end of the help-text row."
+            },
             {
               "name": "help-text",
               "description": "Help text that describes how to use the input."
@@ -9842,6 +10620,16 @@
                 "description": "The help text below the input.",
                 "type": "string"
               },
+              {
+                "name": "labelEnd",
+                "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpTextEnd",
+                "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+                "type": "string"
+              },
               {
                 "name": "helpTip",
                 "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
@@ -10094,7 +10882,7 @@
               "name": "state",
               "description": "Draws the table row using status colors",
               "value": {
-                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
+                "type": "'primary' | 'accent' | 'danger' | 'success' | 'warning' | 'neutral' | 'info' | 'custom'"
               }
             },
             {
@@ -10125,7 +10913,7 @@
               {
                 "name": "state",
                 "description": "Draws the table row using status colors",
-                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
+                "type": "'primary' | 'accent' | 'danger' | 'success' | 'warning' | 'neutral' | 'info' | 'custom'"
               },
               {
                 "name": "interactive",