@uplynk/lynk-design 1.16.0 → 1.17.1

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

@@ -2,11 +2,11 @@ import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
-import type { LynkAlert } from "../../components/alert/alert.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.component.js";
-import type { LynkAvatar } from "../../components/avatar/avatar.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";
@@ -19,17 +19,17 @@ import type { LynkCol } from "../../components/col/col.component.js";
 import type { LynkColGroup } from "../../components/colgroup/colgroup.component.js";
 import type { LynkColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { LynkCombobox } from "../../components/combobox/combobox.component.js";
-import type { LynkDatePicker } from "../../components/date-picker/date-picker.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 { 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";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
+import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { LynkFormatDate } from "../../components/format-date/format-date.component.js";
-import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { LynkGrid } from "../../components/grid/grid.component.js";
 import type { LynkIcon } from "../../components/icon/icon.component.js";
@@ -44,6 +44,7 @@ import type { LynkMutationObserver } from "../../components/mutation-observer/mu
 import type { LynkNav } from "../../components/nav/nav.component.js";
 import type { LynkNavGroup } from "../../components/nav-group/nav-group.component.js";
 import type { LynkNavItem } from "../../components/nav-item/nav-item.component.js";
+import type { LynkNumberInput } from "../../components/number-input/number-input.component.js";
 import type { LynkOptgroup } from "../../components/optgroup/optgroup.component.js";
 import type { LynkOption } from "../../components/option/option.component.js";
 import type { LynkPage } from "../../components/page/page.component.js";
@@ -83,8 +84,8 @@ import type { LynkTextarea } from "../../components/textarea/textarea.component.
 import type { LynkTh } from "../../components/th/th.component.js";
 import type { LynkThead } from "../../components/thead/thead.component.js";
 import type { LynkTimePicker } from "../../components/time-picker/time-picker.component.js";
-import type { LynkTr } from "../../components/tr/tr.component.js";
 import type { LynkTooltip } from "../../components/tooltip/tooltip.component.js";
+import type { LynkTr } from "../../components/tr/tr.component.js";
 import type { LynkTree } from "../../components/tree/tree.component.js";
 import type { LynkTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { LynkTruncate } from "../../components/truncate/truncate.component.js";
@@ -109,6 +110,33 @@ type LynkAutoGridProps = {
   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"];
@@ -177,33 +205,6 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (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 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. */
@@ -480,6 +481,8 @@ picker will accept user input in any format (including CSS color names) and conv
   name?: LynkColorPicker["name"];
   /** Disables the color picker. */
   disabled?: LynkColorPicker["disabled"];
+  /** Makes the color picker readonly. */
+  readonly?: LynkColorPicker["readonly"];
   /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
 `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
   hoist?: LynkColorPicker["hoist"];
@@ -501,6 +504,8 @@ the same document or shadow root for this to work. */
   form?: LynkColorPicker["form"];
   /** Makes the color picker a required field. */
   required?: LynkColorPicker["required"];
+  /** Marks the color picker as optional. */
+  optional?: LynkColorPicker["optional"];
   /**  */
   base?: LynkColorPicker["base"];
   /**  */
@@ -542,8 +547,12 @@ type LynkComboboxProps = {
   placeholder?: LynkCombobox["placeholder"];
   /** Disables the combobox control. */
   disabled?: LynkCombobox["disabled"];
+  /** Makes the combobox readonly. */
+  readonly?: LynkCombobox["readonly"];
   /** Makes the combobox a required field. */
   required?: LynkCombobox["required"];
+  /** Marks the combobox as optional. */
+  optional?: LynkCombobox["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkCombobox["dirty"];
   /** Adds a clear button when the combobox is not empty. */
@@ -633,6 +642,48 @@ The default filter method is a case- and diacritic-insensitive string comparison
   "onev-add-option"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkCopyButtonProps = {
+  /** The text value to copy. */
+  value?: LynkCopyButton["value"];
+  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
+present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
+attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
+append a dot and the property name, e.g. `from="el.value"`. */
+  from?: LynkCopyButton["from"];
+  /** Disables the copy button. */
+  disabled?: LynkCopyButton["disabled"];
+  /** A custom label to show in the tooltip. */
+  "copy-label"?: LynkCopyButton["copyLabel"];
+  /** A custom label to show in the tooltip after copying. */
+  "success-label"?: LynkCopyButton["successLabel"];
+  /** A custom label to show in the tooltip when a copy error occurs. */
+  "error-label"?: LynkCopyButton["errorLabel"];
+  /** The length of time to show feedback before restoring the default trigger. */
+  "feedback-duration"?: LynkCopyButton["feedbackDuration"];
+  /** The preferred placement of the tooltip. */
+  "tooltip-placement"?: LynkCopyButton["tooltipPlacement"];
+  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios. */
+  hoist?: LynkCopyButton["hoist"];
+  /**  */
+  copyIcon?: LynkCopyButton["copyIcon"];
+  /**  */
+  successIcon?: LynkCopyButton["successIcon"];
+  /**  */
+  errorIcon?: LynkCopyButton["errorIcon"];
+  /**  */
+  tooltip?: LynkCopyButton["tooltip"];
+  /**  */
+  isCopying?: LynkCopyButton["isCopying"];
+  /**  */
+  status?: LynkCopyButton["status"];
+  /** Emitted when the data has been copied. */
+  "onev-copy"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the data could not be copied. */
+  "onev-error"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkDatePickerProps = {
   /** The input's name attribute. */
   name?: LynkDatePicker["name"];
@@ -652,6 +703,8 @@ type LynkDatePickerProps = {
   readonly?: LynkDatePicker["readonly"];
   /** Makes the input required. */
   required?: LynkDatePicker["required"];
+  /** Marks the field as optional. */
+  optional?: LynkDatePicker["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkDatePicker["dirty"];
   /** Arranges the label inline next to the date picker instead of above it. */
@@ -689,48 +742,6 @@ type LynkDatePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkCopyButtonProps = {
-  /** The text value to copy. */
-  value?: LynkCopyButton["value"];
-  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
-present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
-attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
-append a dot and the property name, e.g. `from="el.value"`. */
-  from?: LynkCopyButton["from"];
-  /** Disables the copy button. */
-  disabled?: LynkCopyButton["disabled"];
-  /** A custom label to show in the tooltip. */
-  "copy-label"?: LynkCopyButton["copyLabel"];
-  /** A custom label to show in the tooltip after copying. */
-  "success-label"?: LynkCopyButton["successLabel"];
-  /** A custom label to show in the tooltip when a copy error occurs. */
-  "error-label"?: LynkCopyButton["errorLabel"];
-  /** The length of time to show feedback before restoring the default trigger. */
-  "feedback-duration"?: LynkCopyButton["feedbackDuration"];
-  /** The preferred placement of the tooltip. */
-  "tooltip-placement"?: LynkCopyButton["tooltipPlacement"];
-  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios. */
-  hoist?: LynkCopyButton["hoist"];
-  /**  */
-  copyIcon?: LynkCopyButton["copyIcon"];
-  /**  */
-  successIcon?: LynkCopyButton["successIcon"];
-  /**  */
-  errorIcon?: LynkCopyButton["errorIcon"];
-  /**  */
-  tooltip?: LynkCopyButton["tooltip"];
-  /**  */
-  isCopying?: LynkCopyButton["isCopying"];
-  /**  */
-  status?: LynkCopyButton["status"];
-  /** Emitted when the data has been copied. */
-  "onev-copy"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the data could not be copied. */
-  "onev-error"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -750,6 +761,8 @@ type LynkDateTimePickerProps = {
   readonly?: LynkDateTimePicker["readonly"];
   /** Makes the input required. */
   required?: LynkDateTimePicker["required"];
+  /** Marks the field as optional. */
+  optional?: LynkDateTimePicker["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkDateTimePicker["dirty"];
   /** Arranges the label inline next to the date-time picker instead of above it. */
@@ -950,6 +963,41 @@ type LynkFlankProps = {
   gap?: LynkFlank["gap"];
 };
 
+type LynkFormFieldProps = {
+  /** The fields's styled validity state */
+  state?: LynkFormField["state"];
+  /** The input's size. */
+  size?: LynkFormField["size"];
+  /** The input's label. Alternatively, you can use the label slot. */
+  label?: LynkFormField["label"];
+  /**  */
+  id?: LynkFormField["id"];
+  /** The help text below the input. Alternatively, you can use the help-text slot. */
+  "help-text"?: LynkFormField["helpText"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkFormField["helpTip"];
+  /** Adds the required mark. */
+  required?: LynkFormField["required"];
+  /** Adds the optional mark. */
+  optional?: LynkFormField["optional"];
+  /** Adds the readonly lock mark. */
+  readonly?: LynkFormField["readonly"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkFormField["dirty"];
+  /** Controls the focused state styling. */
+  focused?: LynkFormField["focused"];
+  /** Arranges the label inline next to the control instead of above it. */
+  inline?: LynkFormField["inline"];
+  /**  */
+  defaultSlot?: LynkFormField["defaultSlot"];
+  /** The field will lose focus when the user interacts outside of this element (e.g. clicking). */
+  containingElement?: LynkFormField["containingElement"];
+  /** Emitted when field or slotted element gains focus. */
+  "onev-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when field or slotted element loses focus. */
+  "onev-blur"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkFormatBytesProps = {
   /** The number to format in bytes. */
   value?: LynkFormatBytes["value"];
@@ -988,37 +1036,6 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: LynkFormatDate["hourFormat"];
 };
 
-type LynkFormFieldProps = {
-  /** The fields's styled validity state */
-  state?: LynkFormField["state"];
-  /** The input's size. */
-  size?: LynkFormField["size"];
-  /** The input's label. Alternatively, you can use the label slot. */
-  label?: LynkFormField["label"];
-  /**  */
-  id?: LynkFormField["id"];
-  /** The help text below the input. Alternatively, you can use the help-text slot. */
-  "help-text"?: LynkFormField["helpText"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkFormField["helpTip"];
-  /** Adds the required mark. */
-  required?: LynkFormField["required"];
-  /** Adds the dirty indicator mark. */
-  dirty?: LynkFormField["dirty"];
-  /** Controls the focused state styling. */
-  focused?: LynkFormField["focused"];
-  /** Arranges the label inline next to the control instead of above it. */
-  inline?: LynkFormField["inline"];
-  /**  */
-  defaultSlot?: LynkFormField["defaultSlot"];
-  /** The field will lose focus when the user interacts outside of this element (e.g. clicking). */
-  containingElement?: LynkFormField["containingElement"];
-  /** Emitted when field or slotted element gains focus. */
-  "onev-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when field or slotted element loses focus. */
-  "onev-blur"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkFormatNumberProps = {
   /** The number to format. */
   value?: LynkFormatNumber["value"];
@@ -1171,6 +1188,8 @@ the same document or shadow root for this to work. */
   form?: LynkInput["form"];
   /** Makes the input a required field. */
   required?: LynkInput["required"];
+  /** Marks the input as optional. */
+  optional?: LynkInput["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkInput["dirty"];
   /** Arranges the label inline next to the input instead of above it. */
@@ -1354,6 +1373,73 @@ type LynkNavItemProps = {
   "onev-after-collapse"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkNumberInputProps = {
+  /** The input's name attribute. */
+  name?: LynkNumberInput["name"];
+  /** The current numeric value. */
+  value?: LynkNumberInput["value"];
+  /** The input's size. */
+  size?: LynkNumberInput["size"];
+  /** The input's label. If you need to display HTML, use the label slot instead. */
+  label?: LynkNumberInput["label"];
+  /** The input's help text. If you need to display HTML, use the help-text slot instead. */
+  "help-text"?: LynkNumberInput["helpText"];
+  /** 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. */
+  placeholder?: LynkNumberInput["placeholder"];
+  /** Disables the input. */
+  disabled?: LynkNumberInput["disabled"];
+  /** Makes the input readonly. */
+  readonly?: LynkNumberInput["readonly"];
+  /** Makes the input a required field. */
+  required?: LynkNumberInput["required"];
+  /** Marks the input as optional. */
+  optional?: LynkNumberInput["optional"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkNumberInput["dirty"];
+  /** Draws a filled input. */
+  filled?: LynkNumberInput["filled"];
+  /** Draws a pill-style input with rounded edges. */
+  pill?: LynkNumberInput["pill"];
+  /** Hides the increment/decrement stepper buttons. */
+  "no-steppers"?: LynkNumberInput["noSteppers"];
+  /** The minimum allowed value. */
+  min?: LynkNumberInput["min"];
+  /** The maximum allowed value. */
+  max?: LynkNumberInput["max"];
+  /** The amount to increment/decrement by. */
+  step?: LynkNumberInput["step"];
+  /** The input's feedback status using manual validation. */
+  state?: LynkNumberInput["state"];
+  /** Arranges the label inline next to the input instead of above it. */
+  inline?: LynkNumberInput["inline"];
+  /** 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`. The form must be in
+the same document or shadow root for this to work. */
+  form?: LynkNumberInput["form"];
+  /** Indicates that the input should receive focus on page load. */
+  autofocus?: LynkNumberInput["autofocus"];
+  /**  */
+  input?: LynkNumberInput["input"];
+  /** Gets or sets the default value used to reset this element. */
+  defaultValue?: LynkNumberInput["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkNumberInput["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkNumberInput["validationMessage"];
+  /** Emitted when the control loses focus. */
+  "onev-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an alteration to the control's value is committed by the user. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onev-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onev-input"?: (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 LynkOptgroupProps = {
   /** Disables all options in the optgroup. */
   disabled?: LynkOptgroup["disabled"];
@@ -1672,6 +1758,10 @@ the same document or shadow root for this to work. */
   form?: LynkRadioGroup["form"];
   /** Ensures a child radio is checked before allowing the containing form to submit. */
   required?: LynkRadioGroup["required"];
+  /** Marks the radio group as optional. */
+  optional?: LynkRadioGroup["optional"];
+  /** Makes the radio group readonly. */
+  readonly?: LynkRadioGroup["readonly"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkRadioGroup["dirty"];
   /** Add a gap between radio buttons so they appear like a cluster of buttons instead of a flush group */
@@ -1725,6 +1815,8 @@ type LynkRangeProps = {
   readonly?: LynkRange["readonly"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkRange["dirty"];
+  /** Marks the range as optional. */
+  optional?: LynkRange["optional"];
   /** The orientation of the range. */
   orientation?: LynkRange["orientation"];
   /** The minimum value allowed. */
@@ -1835,6 +1927,8 @@ indicate the number of additional items that are selected. Set to 0 to remove th
   "max-options-visible"?: LynkSelect["maxOptionsVisible"];
   /** Disables the select control. */
   disabled?: LynkSelect["disabled"];
+  /** Makes the select readonly. */
+  readonly?: LynkSelect["readonly"];
   /** Adds a clear button when the select is not empty. */
   clearable?: LynkSelect["clearable"];
   /** Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
@@ -1862,6 +1956,8 @@ the same document or shadow root for this to work. */
   form?: LynkSelect["form"];
   /** The select's required attribute. */
   required?: LynkSelect["required"];
+  /** Marks the select as optional. */
+  optional?: LynkSelect["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkSelect["dirty"];
   /** Replaces the select with a plain text string of the selected value. */
@@ -2206,6 +2302,8 @@ the same document or shadow root for this to work. */
   form?: LynkTextarea["form"];
   /** Makes the textarea a required field. */
   required?: LynkTextarea["required"];
+  /** Marks the textarea as optional. */
+  optional?: LynkTextarea["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkTextarea["dirty"];
   /** Arranges the label inline next to the textarea instead of above it. */
@@ -2286,6 +2384,8 @@ type LynkTimePickerProps = {
   readonly?: LynkTimePicker["readonly"];
   /** Makes the input required. */
   required?: LynkTimePicker["required"];
+  /** Marks the field as optional. */
+  optional?: LynkTimePicker["optional"];
   /** Adds the dirty indicator mark. */
   dirty?: LynkTimePicker["dirty"];
   /** Arranges the label inline next to the time picker instead of above it. */
@@ -2333,17 +2433,6 @@ type LynkTimePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkTrProps = {
-  /** Draws the table row using status colors */
-  state?: LynkTr["state"];
-  /** Determines whether to highlight the table row on hover or touch interactions */
-  interactive?: LynkTr["interactive"];
-  /** Draws the table row in a highlighted state */
-  active?: LynkTr["active"];
-  /** Pulse the status colors for increased visibility */
-  pulse?: LynkTr["pulse"];
-};
-
 type LynkTooltipProps = {
   /** The tooltip's content. If you need to display HTML, you can use the `content` slot instead. */
   content?: LynkTooltip["content"];
@@ -2383,8 +2472,19 @@ programmatically. */
   "onev-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkTreeProps = {
-  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+type LynkTrProps = {
+  /** Draws the table row using status colors */
+  state?: LynkTr["state"];
+  /** Determines whether to highlight the table row on hover or touch interactions */
+  interactive?: LynkTr["interactive"];
+  /** Draws the table row in a highlighted state */
+  active?: LynkTr["active"];
+  /** Pulse the status colors for increased visibility */
+  pulse?: LynkTr["pulse"];
+};
+
+type LynkTreeProps = {
+  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
 displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
   selection?: LynkTree["selection"];
   /**  */
@@ -2494,59 +2594,47 @@ export type CustomElements = {
   "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **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 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>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -2570,47 +2658,59 @@ export type CustomElements = {
   "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
+   * ### **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 badge's content.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
    *
    * ### **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)_
+   *  - **--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-badge": DefineComponent<LynkBadgeProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
-   *
+   * 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:**
-   *  - **--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)_
+   * ### **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-box": DefineComponent<LynkBoxProps>;
+  "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2974,6 +3074,36 @@ export type CustomElements = {
    */
   "lynk-combobox": DefineComponent<LynkComboboxProps>;
 
+  /**
+   * Copies text data to the clipboard when the user clicks the trigger.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-copy** - Emitted when the data has been copied.
+   * - **ev-error** - Emitted when the data could not be copied.
+   *
+   * ### **Slots:**
+   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.
+   * - **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.
+   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
+   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The internal `<button>` element.
+   * - **copy-icon** - The container that holds the copy icon.
+   * - **success-icon** - The container that holds the success icon.
+   * - **error-icon** - The container that holds the error icon.
+   * - **tooltip__base** - The tooltip's exported `base` part.
+   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
+   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
+   * - **tooltip__body** - The tooltip's exported `body` part.
+   */
+  "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
+
   /**
    * A date picker that combines calendar component with accessible input field.
    * ---
@@ -3013,36 +3143,6 @@ export type CustomElements = {
    */
   "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
 
-  /**
-   * Copies text data to the clipboard when the user clicks the trigger.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-copy** - Emitted when the data has been copied.
-   * - **ev-error** - Emitted when the data could not be copied.
-   *
-   * ### **Slots:**
-   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.
-   * - **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.
-   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
-   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **button** - The internal `<button>` element.
-   * - **copy-icon** - The container that holds the copy icon.
-   * - **success-icon** - The container that holds the success icon.
-   * - **error-icon** - The container that holds the error icon.
-   * - **tooltip__base** - The tooltip's exported `base` part.
-   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
-   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
-   * - **tooltip__body** - The tooltip's exported `body` part.
-   */
-  "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
-
   /**
    * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
@@ -3229,20 +3329,6 @@ export type CustomElements = {
    */
   "lynk-flank": DefineComponent<LynkFlankProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
-
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
-   */
-  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
-
   /**
    * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
    * ---
@@ -3270,6 +3356,20 @@ export type CustomElements = {
    */
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
+
+  /**
+   * Formats a date/time using the specified locale and options.
+   * ---
+   *
+   */
+  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
+
   /**
    * Formats a number using the specified locale and options.
    * ---
@@ -3557,6 +3657,48 @@ export type CustomElements = {
    */
   "lynk-nav-item": DefineComponent<LynkNavItemProps>;
 
+  /**
+   * Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-blur** - Emitted when the control loses focus.
+   * - **ev-change** - Emitted when an alteration to the control's value is committed by the user.
+   * - **ev-focus** - Emitted when the control gains focus.
+   * - **ev-input** - Emitted when the control receives input.
+   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **stepUp()** - Increments the value by the step amount.
+   * - **stepDown()** - Decrements the value by the step amount.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the input.
+   * - **blur()** - Removes focus from the input.
+   * - **select()** - Selects all the text in the input.
+   * - **checkValidity()** - Checks for validity but does not show the browser's validation message.
+   * - **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. If `message` is not empty, the field will be considered invalid.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **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.
+   * - **suffix** - Used to append an icon or similar element to the input (before steppers).
+   * - **increment-icon** - An icon to use in lieu of the default increment icon.
+   * - **decrement-icon** - An icon to use in lieu of the default decrement icon.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   * - **input** - The internal input control.
+   * - **prefix** - The input prefix container.
+   * - **suffix** - The input suffix container.
+   * - **stepper-decrement** - The decrement button.
+   * - **stepper-increment** - The increment button.
+   */
+  "lynk-number-input": DefineComponent<LynkNumberInputProps>;
+
   /**
    * Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).
    * ---
@@ -4513,19 +4655,6 @@ export type CustomElements = {
    */
   "lynk-time-picker": DefineComponent<LynkTimePickerProps>;
 
-  /**
-   * Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-tr": DefineComponent<LynkTrProps>;
-
   /**
    * Tooltips display additional information based on a specific action.
    * ---
@@ -4558,6 +4687,19 @@ export type CustomElements = {
    */
   "lynk-tooltip": DefineComponent<LynkTooltipProps>;
 
+  /**
+   * Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-tr": DefineComponent<LynkTrProps>;
+
   /**
    * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
    * ---