@uplynk/lynk-design 1.17.1 → 1.18.0

package/dist/types/vue/index.d.ts

@@ -1,12 +1,12 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
+import type { LynkAnimation } from "../../components/animation/animation.component.js";
+import type { LynkAlert } from "../../components/alert/alert.component.js";
+import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
-import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
-import type { LynkAlert } from "../../components/alert/alert.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.component.js";
 import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { LynkButton } from "../../components/button/button.component.js";
@@ -21,8 +21,8 @@ import type { LynkColorPicker } from "../../components/color-picker/color-picker
 import type { LynkCombobox } from "../../components/combobox/combobox.component.js";
 import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
-import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
@@ -78,6 +78,7 @@ import type { LynkTabGroup } from "../../components/tab-group/tab-group.componen
 import type { LynkTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { LynkTable } from "../../components/table/table.component.js";
 import type { LynkTag } from "../../components/tag/tag.component.js";
+import type { LynkTagInput } from "../../components/tag-input/tag-input.component.js";
 import type { LynkTbody } from "../../components/tbody/tbody.component.js";
 import type { LynkTd } from "../../components/td/td.component.js";
 import type { LynkTextarea } from "../../components/textarea/textarea.component.js";
@@ -101,69 +102,6 @@ type LynkAccordionProps = {
   shape?: LynkAccordion["shape"];
 };
 
-type LynkAutoGridProps = {
-  /** How to justify auto-grid items */
-  "auto-size"?: LynkAutoGrid["autoSize"];
-  /** How to align auto-grid items to each-other */
-  "min-size"?: LynkAutoGrid["minSize"];
-  /** The space between auto-grid items. Use spacing tokens or any custom size. */
-  gap?: LynkAutoGrid["gap"];
-};
-
-type LynkBadgeProps = {
-  /** The badge's variant. */
-  type?: LynkBadge["type"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: LynkBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: LynkBadge["pulse"];
-};
-
-type LynkBoxProps = {};
-
-type LynkAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: LynkAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: LynkAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: LynkAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: LynkAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: LynkAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onev-error"?: (e: CustomEvent<never>) => void;
-};
-
-type LynkAlertProps = {
-  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-  open?: LynkAlert["open"];
-  /** Makes the alert closable. */
-  closable?: LynkAlert["closable"];
-  /** The alert's type (color). */
-  type?: LynkAlert["type"];
-  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
-  duration?: LynkAlert["duration"];
-  /** Enables a countdown that indicates the remaining time the alert will be displayed.
-Typically used to indicate the remaining time before a whole app refresh. */
-  countdown?: LynkAlert["countdown"];
-  /**  */
-  base?: LynkAlert["base"];
-  /**  */
-  countdownElement?: LynkAlert["countdownElement"];
-  /** Emitted when the alert opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the alert closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -205,6 +143,69 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkAlertProps = {
+  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+  open?: LynkAlert["open"];
+  /** Makes the alert closable. */
+  closable?: LynkAlert["closable"];
+  /** The alert's type (color). */
+  type?: LynkAlert["type"];
+  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
+the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
+  duration?: LynkAlert["duration"];
+  /** Enables a countdown that indicates the remaining time the alert will be displayed.
+Typically used to indicate the remaining time before a whole app refresh. */
+  countdown?: LynkAlert["countdown"];
+  /**  */
+  base?: LynkAlert["base"];
+  /**  */
+  countdownElement?: LynkAlert["countdownElement"];
+  /** Emitted when the alert opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the alert closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
+type LynkAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: LynkAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: LynkAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: LynkAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: LynkAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: LynkAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onev-error"?: (e: CustomEvent<never>) => void;
+};
+
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to each-other */
+  "min-size"?: LynkAutoGrid["minSize"];
+  /** The space between auto-grid items. Use spacing tokens or any custom size. */
+  gap?: LynkAutoGrid["gap"];
+};
+
+type LynkBadgeProps = {
+  /** The badge's variant. */
+  type?: LynkBadge["type"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: LynkBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: LynkBadge["pulse"];
+};
+
+type LynkBoxProps = {};
+
 type LynkBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -460,6 +461,10 @@ display HTML, you can use the `label` slot` instead. */
   label?: LynkColorPicker["label"];
   /** The help text below the color picker. Alternatively, you can use the `help-text` slot. */
   "help-text"?: LynkColorPicker["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkColorPicker["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkColorPicker["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the `help-tip` slot. */
   "help-tip"?: LynkColorPicker["helpTip"];
   /** The color picker's styled validity state. */
@@ -537,8 +542,8 @@ the same document or shadow root for this to work. */
 type LynkComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: LynkCombobox["name"];
-  /** The current value of the combobox, submitted as a name/value pair with form data. */
-  value?: LynkCombobox["value"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: LynkCombobox["defaultValue"];
   /** The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation */
   state?: LynkCombobox["state"];
   /** The combobox's size. */
@@ -574,6 +579,10 @@ Note that the actual placement may vary as needed to keep the listbox inside of
   "help-tip"?: LynkCombobox["helpTip"];
   /** The combobox's help text. If you need to display HTML, use the `help-text` slot instead. */
   "help-text"?: LynkCombobox["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkCombobox["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkCombobox["helpTextEnd"];
   /** By default, form controls are associated with the nearest containing `<form>` element.
 This attribute allows you to place the form control outside of a form and associate it
 with the form that has this `id`.
@@ -583,6 +592,15 @@ The form must be in the same document or shadow root for this to work. */
   inline?: LynkCombobox["inline"];
   /** Allows users to enter custom values that don't match existing options. */
   "allow-custom-values"?: LynkCombobox["allowCustomValues"];
+  /** Allows more than one option to be selected. Selected options are displayed as tags. */
+  multiple?: LynkCombobox["multiple"];
+  /** The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
+indicate the number of additional items that are selected. Set to 0 to remove the limit. */
+  "max-options-visible"?: LynkCombobox["maxOptionsVisible"];
+  /** A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
+is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted
+HTML of the symbol to render at the specified value. */
+  getTag?: LynkCombobox["getTag"];
   /** A function that customizes the rendered option. The first argument is the option, the second
 is the query string, which is typed into the combobox.
 The function should return either a Lit TemplateResult or a string containing trusted HTML
@@ -607,11 +625,17 @@ The default filter method is a case- and diacritic-insensitive string comparison
   /**  */
   selectedOption?: LynkCombobox["selectedOption"];
   /**  */
+  selectedOptions?: LynkCombobox["selectedOptions"];
+  /**  */
   numberFilteredOptions?: LynkCombobox["numberFilteredOptions"];
   /**  */
   cachedOptions?: LynkCombobox["cachedOptions"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: LynkCombobox["defaultValue"];
+  /**  */
+  valueHasChanged?: LynkCombobox["valueHasChanged"];
+  /** The current value of the combobox, submitted as a name/value pair with form data. When `multiple` is enabled, the
+value attribute will be a space-delimited list of values based on the options selected, and the value property will
+be an array. **For this reason, values must not contain spaces.** */
+  value?: LynkCombobox["value"];
   /** Gets the validity state object */
   validity?: LynkCombobox["validity"];
   /** Gets the validation message */
@@ -695,6 +719,10 @@ type LynkDatePickerProps = {
   placeholder?: LynkDatePicker["placeholder"];
   /** The help text below the input. */
   "help-text"?: LynkDatePicker["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkDatePicker["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkDatePicker["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkDatePicker["helpTip"];
   /** Disables the input. */
@@ -742,6 +770,40 @@ type LynkDatePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDialogProps = {
+  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
+  open?: LynkDialog["open"];
+  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkDialog["label"];
+  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the dialog. */
+  "no-header"?: LynkDialog["noHeader"];
+  /** The dialog's size. */
+  size?: LynkDialog["size"];
+  /** 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. */
+  modal?: LynkDialog["modal"];
+  /**  */
+  dialog?: LynkDialog["dialog"];
+  /**  */
+  panel?: LynkDialog["panel"];
+  /**  */
+  overlay?: LynkDialog["overlay"];
+  /** Emitted when the dialog opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  /** 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. */
+  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
+  /** 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. */
+  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -753,6 +815,10 @@ type LynkDateTimePickerProps = {
   placeholder?: LynkDateTimePicker["placeholder"];
   /** The help text below the input. */
   "help-text"?: LynkDateTimePicker["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkDateTimePicker["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkDateTimePicker["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkDateTimePicker["helpTip"];
   /** Disables the input. */
@@ -833,40 +899,6 @@ inside of the viewport. */
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkDialogProps = {
-  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
-  open?: LynkDialog["open"];
-  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
-`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
-  label?: LynkDialog["label"];
-  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the dialog. */
-  "no-header"?: LynkDialog["noHeader"];
-  /** The dialog's size. */
-  size?: LynkDialog["size"];
-  /** 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. */
-  modal?: LynkDialog["modal"];
-  /**  */
-  dialog?: LynkDialog["dialog"];
-  /**  */
-  panel?: LynkDialog["panel"];
-  /**  */
-  overlay?: LynkDialog["overlay"];
-  /** Emitted when the dialog opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-  /** 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. */
-  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
-  /** 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. */
-  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
-};
-
 type LynkDividerProps = {
   /** Draws the divider in a vertical orientation. */
   vertical?: LynkDivider["vertical"];
@@ -970,10 +1002,14 @@ type LynkFormFieldProps = {
   size?: LynkFormField["size"];
   /** The input's label. Alternatively, you can use the label slot. */
   label?: LynkFormField["label"];
+  /** Optional right-aligned content shown at the end of the label row. Alternatively, use the label-end slot. */
+  "label-end"?: LynkFormField["labelEnd"];
   /**  */
   id?: LynkFormField["id"];
   /** The help text below the input. Alternatively, you can use the help-text slot. */
   "help-text"?: LynkFormField["helpText"];
+  /** Optional right-aligned content shown at the end of the help-text row. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkFormField["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkFormField["helpTip"];
   /** Adds the required mark. */
@@ -1162,6 +1198,10 @@ to `text`. */
   label?: LynkInput["label"];
   /** The help text below the input. Alternatively, you can use the help-text slot. */
   "help-text"?: LynkInput["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkInput["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkInput["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkInput["helpTip"];
   /** Adds a clear button when the input is populated. */
@@ -1384,6 +1424,10 @@ type LynkNumberInputProps = {
   label?: LynkNumberInput["label"];
   /** The input's help text. If you need to display HTML, use the help-text slot instead. */
   "help-text"?: LynkNumberInput["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkNumberInput["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkNumberInput["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkNumberInput["helpTip"];
   /** Placeholder text to show when the input is empty. */
@@ -1744,6 +1788,10 @@ instead. */
   label?: LynkRadioGroup["label"];
   /** The input's help text. If you need to display HTML, you can use the `help-text` slot instead. */
   "help-text"?: LynkRadioGroup["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkRadioGroup["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkRadioGroup["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkRadioGroup["helpTip"];
   /** The name of the radio group, submitted as a name/value pair with form data. */
@@ -1803,6 +1851,10 @@ type LynkRangeProps = {
   range?: LynkRange["range"];
   /** The range's help text. If you need to display HTML, use the help-text slot instead. */
   "help-text"?: LynkRange["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkRange["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkRange["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkRange["helpTip"];
   /** The range's size. */
@@ -1948,6 +2000,10 @@ inside of the viewport. */
   placement?: LynkSelect["placement"];
   /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
   "help-text"?: LynkSelect["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkSelect["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkSelect["helpTextEnd"];
   /** The select's help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkSelect["helpTip"];
   /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
@@ -2256,6 +2312,96 @@ type LynkTagProps = {
   "onev-remove"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkTagInputProps = {
+  /** The name of the tag input, submitted as a name/value pair with form data. */
+  name?: LynkTagInput["name"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: LynkTagInput["defaultValue"];
+  /** The tag input's size. */
+  size?: LynkTagInput["size"];
+  /** The tag input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkTagInput["label"];
+  /** Placeholder text to show as a hint when the input is empty. */
+  placeholder?: LynkTagInput["placeholder"];
+  /** The tag input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: LynkTagInput["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkTagInput["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkTagInput["helpTextEnd"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkTagInput["helpTip"];
+  /** Disables the tag input. */
+  disabled?: LynkTagInput["disabled"];
+  /** Makes the tag input readonly. */
+  readonly?: LynkTagInput["readonly"];
+  /** Makes the tag input a required field. */
+  required?: LynkTagInput["required"];
+  /** Marks the tag input as optional. */
+  optional?: LynkTagInput["optional"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkTagInput["dirty"];
+  /** Adds a clear button when the tag input is not empty. */
+  clearable?: LynkTagInput["clearable"];
+  /** Draws pill-style tags and control with rounded edges. */
+  pill?: LynkTagInput["pill"];
+  /** The visual appearance applied to each tag. */
+  "tag-appearance"?: LynkTagInput["tagAppearance"];
+  /** The color applied to each tag. */
+  "tag-color"?: LynkTagInput["tagColor"];
+  /** Arranges the label inline next to the control instead of above it. */
+  inline?: LynkTagInput["inline"];
+  /** The tag input's feedback status using manual validation. */
+  state?: LynkTagInput["state"];
+  /** The maximum number of tags allowed. Once reached, no more tags can be added. Set to 0 to remove the limit. */
+  "max-tags"?: LynkTagInput["maxTags"];
+  /** The maximum length, in characters, of an individual tag. Set to 0 to remove the limit. */
+  maxlength?: LynkTagInput["maxlength"];
+  /** Allows duplicate tag values to be added. By default duplicates are ignored. */
+  "allow-duplicates"?: LynkTagInput["allowDuplicates"];
+  /** Adds any pending text as a tag when the control loses focus. */
+  "add-on-blur"?: LynkTagInput["addOnBlur"];
+  /** The character used to confirm a tag as the user types, split pasted text into multiple tags, and parse the
+`value` attribute. Defaults to a comma. */
+  delimiter?: LynkTagInput["delimiter"];
+  /** Removes the last tag when Backspace is pressed while the input is empty. */
+  "remove-on-backspace"?: LynkTagInput["removeOnBackspace"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. */
+  form?: LynkTagInput["form"];
+  /** A function that customizes the rendered tags. The first argument is the tag's value, the second is its index. The
+function should return a Lit TemplateResult, a string of trusted HTML, or an HTMLElement. */
+  getTag?: LynkTagInput["getTag"];
+  /**  */
+  input?: LynkTagInput["input"];
+  /**  */
+  valueInput?: LynkTagInput["valueInput"];
+  /**  */
+  valueHasChanged?: LynkTagInput["valueHasChanged"];
+  /** The current value of the tag input as an array of strings. Each entry is submitted as a separate name/value pair
+with form data. When set as an attribute, provide a `delimiter`-separated string (comma by default). */
+  value?: LynkTagInput["value"];
+  /** Gets the validity state object */
+  validity?: LynkTagInput["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkTagInput["validationMessage"];
+  /** Emitted when the value changes (a tag is added, removed, or the field is cleared). */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the value changes (a tag is added, removed, or the field is cleared). */
+  "onev-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a tag is added. The tag value is available in `event.detail.value`. */
+  "onev-add-tag"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a tag is removed. The tag value is available in `event.detail.value`. */
+  "onev-remove-tag"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control is cleared. */
+  "onev-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onev-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onev-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onev-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkTbodyProps = {};
 
 type LynkTdProps = {
@@ -2282,6 +2428,10 @@ type LynkTextareaProps = {
   label?: LynkTextarea["label"];
   /** The textarea's help text. Alternatively, you can use the help-text slot. */
   "help-text"?: LynkTextarea["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkTextarea["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkTextarea["helpTextEnd"];
   /** The help tip accompanying the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkTextarea["helpTip"];
   /** Placeholder text to show as a hint when the input is empty. */
@@ -2376,6 +2526,10 @@ type LynkTimePickerProps = {
   placeholder?: LynkTimePicker["placeholder"];
   /** The help text below the input. */
   "help-text"?: LynkTimePicker["helpText"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkTimePicker["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkTimePicker["helpTextEnd"];
   /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
   "help-tip"?: LynkTimePicker["helpTip"];
   /** Disables the input. */
@@ -2577,64 +2731,59 @@ export type CustomElements = {
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
   /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * 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).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
+   * ### **Events:**
+   *  - **ev-cancel** - Emitted when the animation is canceled.
+   * - **ev-finish** - Emitted when the animation finishes.
+   * - **ev-start** - Emitted when the animation starts or restarts.
    *
-   * ### **CSS Properties:**
-   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
-   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
+   * ### **Methods:**
+   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   * ### **Slots:**
+   *  - _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.
    */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+  "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The badge's content.
-   *
-   * ### **CSS Properties:**
-   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
-   * - **--color** - The badges text color. _(default: undefined)_
-   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-badge": DefineComponent<LynkBadgeProps>;
-
-  /**
-   *
-   * ---
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the alert opens.
+   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
+   * - **ev-hide** - Emitted when the alert closes.
+   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
    *
+   * ### **Methods:**
+   *  - **show()** - Shows the alert.
+   * - **hide()** - Hides the alert
+   * - **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
    *
    * ### **Slots:**
-   *  - _default_ - The default slot.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
    *
    * ### **CSS Properties:**
-   *  - **--align** - Custom text align (left, center, right). _(default: left)_
-   * - **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_
-   * - **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_
-   * - **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_
-   * - **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_
-   * - **--height** - Any custom px, rem, %, or vh value. _(default: auto)_
-   * - **--width** - Any custom px, rem, %, or vh value. _(default: auto)_
-   * - **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
-   * - **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
-   * - **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_
+   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
+   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   *  - **base** - The component's internal block wrapper.
+   * - **icon** - The container that wraps the alert icon.
+   * - **message** - The alert message.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
    */
-  "lynk-box": DefineComponent<LynkBoxProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -2658,59 +2807,64 @@ export type CustomElements = {
   "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the alert opens.
-   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
-   * - **ev-hide** - Emitted when the alert closes.
-   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
+   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+
+  /**
+   * Badges are used to draw attention and display statuses or counts.
+   * ---
    *
-   * ### **Methods:**
-   *  - **show()** - Shows the alert.
-   * - **hide()** - Hides the alert
-   * - **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
    *
    * ### **Slots:**
-   *  - _default_ - The alert's content.
-   * - **icon** - An icon to show in the alert.
-   * - **action** - Append custom actions to alert.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Properties:**
-   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
-   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
+   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
+   * - **--color** - The badges text color. _(default: undefined)_
+   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal block wrapper.
-   * - **icon** - The container that wraps the alert icon.
-   * - **message** - The alert message.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
+  "lynk-badge": DefineComponent<LynkBadgeProps>;
 
   /**
-   * 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).
+   *
    * ---
    *
    *
-   * ### **Events:**
-   *  - **ev-cancel** - Emitted when the animation is canceled.
-   * - **ev-finish** - Emitted when the animation finishes.
-   * - **ev-start** - Emitted when the animation starts or restarts.
+   * ### **Slots:**
+   *  - _default_ - The default slot.
    *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   * ### **CSS Properties:**
+   *  - **--align** - Custom text align (left, center, right). _(default: left)_
+   * - **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_
+   * - **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_
+   * - **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_
+   * - **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_
+   * - **--height** - Any custom px, rem, %, or vh value. _(default: auto)_
+   * - **--width** - Any custom px, rem, %, or vh value. _(default: auto)_
+   * - **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
+   * - **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
+   * - **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_
    *
-   * ### **Slots:**
-   *  - _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.
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-animation": DefineComponent<LynkAnimationProps>;
+  "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2977,6 +3131,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **help-text** - Help text that describes how to use the color picker.
    * - **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.
    *
@@ -3052,6 +3208,8 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.
    * - **label** - The combobox's label. Alternatively, you can use the `label` attribute.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
    * - **suffix** - Used to append a presentational icon or similar element to the combobox.
    * - **clear-icon** - An icon to use in lieu of the default clear icon.
@@ -3067,6 +3225,12 @@ export type CustomElements = {
    * - **prefix** - The container that wraps the prefix slot.
    * - **suffix** - The container that wraps the suffix slot.
    * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **tags** - The container that houses option tags when `multiple` is used.
+   * - **tag** - The individual tags that represent each multiselect option.
+   * - **tag__base** - The tag's base part.
+   * - **tag__content** - The tag's content part.
+   * - **tag__remove-button** - The tag's remove button.
+   * - **tag__remove-button__base** - The tag's remove button base part.
    * - **listbox** - The listbox container where the options are slotted and the filtered options list exists.
    * - **filtered-listbox** - The container that wraps the filtered options.
    * - **clear-button** - The clear button.
@@ -3126,6 +3290,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **help-text** - Help text that describes how to use the input.
    * - **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.
    *
@@ -3143,6 +3309,49 @@ export type CustomElements = {
    */
   "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
 
+  /**
+   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the dialog opens.
+   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
+   * - **ev-hide** - Emitted when the dialog closes.
+   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
+   * - **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.
+   * - **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.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dialog.
+   * - **hide()** - Hides the dialog
+   *
+   * ### **Slots:**
+   *  - _default_ - The dialog's main content.
+   * - **label** - The dialog's label. Alternatively, you can use the label prop.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
+   *
+   * ### **CSS Properties:**
+   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
+   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
+   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
+   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   * - **overlay** - The overlay.
+   * - **panel** - The dialog panel (where the dialog and its content is rendered).
+   * - **header** - The dialog header.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **title** - The dialog title.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
+   * - **body** - The dialog body.
+   * - **footer** - The dialog footer.
+   */
+  "lynk-dialog": DefineComponent<LynkDialogProps>;
+
   /**
    * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
@@ -3165,6 +3374,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **help-text** - Help text that describes how to use the input.
    * - **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.
    *
@@ -3187,49 +3398,6 @@ export type CustomElements = {
    */
   "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
 
-  /**
-   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the dialog opens.
-   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
-   * - **ev-hide** - Emitted when the dialog closes.
-   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
-   * - **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.
-   * - **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.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dialog.
-   * - **hide()** - Hides the dialog
-   *
-   * ### **Slots:**
-   *  - _default_ - The dialog's main content.
-   * - **label** - The dialog's label. Alternatively, you can use the label prop.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
-   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
-   *
-   * ### **CSS Properties:**
-   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
-   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
-   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
-   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   * - **overlay** - The overlay.
-   * - **panel** - The dialog panel (where the dialog and its content is rendered).
-   * - **header** - The dialog header.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
-   * - **title** - The dialog title.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
-   * - **body** - The dialog body.
-   * - **footer** - The dialog footer.
-   */
-  "lynk-dialog": DefineComponent<LynkDialogProps>;
-
   /**
    * Dividers are used to visually separate or group elements.
    * ---
@@ -3347,12 +3515,18 @@ export type CustomElements = {
    * - **help-tip** - Custom help-tip content.
    * - **help-text** - Custom help-text content.
    * - **label** - Custom label content.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    * - **label** - The component's label wrapper.
+   * - **label-content** - The container that wraps the label text and its marks.
+   * - **label-end** - The right-aligned content container at the end of the label.
    * - **control** - The component's slotted control wrapper.
    * - **help-text** - The component's help-text wrapper.
+   * - **help-text-content** - The container that wraps the help-text content.
+   * - **help-text-end** - The right-aligned content container at the end of the help text.
    */
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
@@ -3470,6 +3644,8 @@ export type CustomElements = {
    * ### **Slots:**
    *  - **action** - append a custom button to the input.
    * - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **prefix** - Used to prepend an icon or similar element to the input.
    * - **suffix** - Used to append an icon or similar element to the input.
    * - **clear-icon** - An icon to use in lieu of the default clear icon.
@@ -3682,6 +3858,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
    * - **help-tip** - Help tooltip next to the label. Alternatively, you can use the help-tip prop.
    * - **prefix** - Used to prepend an icon or similar element to the input.
@@ -4088,6 +4266,8 @@ export type CustomElements = {
    * - **help-tip** - Custom help-tip content.
    * - **help-text** - Custom help-text content.
    * - **label** - The radio group label. Required for proper accessibility. Alternatively, you can use the label attribute.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    *
    * ### **CSS Parts:**
    *  - **form-control** - The form control that wraps the label, input, and help-text.
@@ -4123,6 +4303,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The range's label. Alternatively, you can use the `label` attribute.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **prefix** - Used to prepend an icon or similar element to the range.
    * - **suffix** - Used to append an icon or similar element to the range.
    * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -4237,6 +4419,8 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-divider>` to group items visually.
    * - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
    * - **suffix** - Used to append a presentational icon or similar element to the combobox.
    * - **clear-icon** - An icon to use in lieu of the default clear icon.
@@ -4534,6 +4718,59 @@ export type CustomElements = {
    */
   "lynk-tag": DefineComponent<LynkTagProps>;
 
+  /**
+   * Tag inputs let users quickly enter a list of values that are displayed as removable tags.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-change** - Emitted when the value changes (a tag is added, removed, or the field is cleared).
+   * - **ev-input** - Emitted when the value changes (a tag is added, removed, or the field is cleared).
+   * - **ev-add-tag** - Emitted when a tag is added. The tag value is available in `event.detail.value`.
+   * - **ev-remove-tag** - Emitted when a tag is removed. The tag value is available in `event.detail.value`.
+   * - **ev-clear** - Emitted when the control is cleared.
+   * - **ev-focus** - Emitted when the control gains focus.
+   * - **ev-blur** - Emitted when the control loses focus.
+   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **addTag(rawValue: _string_)** - Adds a tag with the given value. Respects `maxTags`, `maxlength`, and `allowDuplicates`.
+   * - **removeTag(index: _number_)** - Removes the tag at the given index.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - **label** - The tag input's label. Alternatively, you can use the `label` attribute.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the control.
+   * - **suffix** - Used to append a presentational icon or similar element to the control.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **help-text** - Text that describes how to use the tag input. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, control, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The control's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **control** - The container that wraps the prefix, tags, input, clear icon, and suffix.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **tags** - The container that houses the tags.
+   * - **tag** - The individual tags that represent each value.
+   * - **tag__base** - The tag's base part.
+   * - **tag__content** - The tag's content part.
+   * - **tag__remove-button** - The tag's remove button.
+   * - **tag__remove-button__base** - The tag's remove button base part.
+   * - **input** - The internal text `<input>` element.
+   * - **clear-button** - The clear button.
+   */
+  "lynk-tag-input": DefineComponent<LynkTagInputProps>;
+
   /**
    * Table `<lynk-tbody>` components will behave like a native `<tbody>` HTML element within a `<lynk-table>`.
    * ---
@@ -4580,6 +4817,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The textarea's label. Alternatively, you can use the label prop.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **help-text** - Help text that describes how to use the input.
    * - **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.
    *
@@ -4635,6 +4874,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
    * - **help-text** - Help text that describes how to use the input.
    * - **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.
    *