@uplynk/lynk-design 1.16.0 → 1.17.0

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

@@ -1,8 +1,8 @@
 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 { LynkAutoGrid } from "../../components/auto-grid/auto-grid.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";
@@ -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 { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFlank } from "../../components/flank/flank.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";
@@ -100,15 +101,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 LynkAlertProps = {
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   open?: LynkAlert["open"];
@@ -136,6 +128,15 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onev-after-hide"?: (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 LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -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. */
@@ -939,6 +952,41 @@ components that use a dropdown internally. */
   "onev-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+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 LynkFlankProps = {
   /** Flank from first item */
   start?: LynkFlank["start"];
@@ -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,6 +2472,17 @@ programmatically. */
   "onev-after-hide"?: (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 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. */
@@ -2476,23 +2576,6 @@ export type CustomElements = {
    */
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
-  /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
-   * ---
-   *
-   *
-   * ### **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>;
-
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -2529,6 +2612,23 @@ export type CustomElements = {
    */
   "lynk-alert": DefineComponent<LynkAlertProps>;
 
+  /**
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * ---
+   *
+   *
+   * ### **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>;
+
   /**
    * 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).
    * ---
@@ -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.
    * ---
@@ -3213,6 +3313,33 @@ export type CustomElements = {
    */
   "lynk-dropdown": DefineComponent<LynkDropdownProps>;
 
+  /**
+   * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-focus** - Emitted when field or slotted element gains focus.
+   * - **ev-blur** - Emitted when field or slotted element loses focus.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   * - **help-tip** - Custom help-tip content.
+   * - **help-text** - Custom help-text content.
+   * - **label** - Custom label content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **label** - The component's label wrapper.
+   * - **control** - The component's slotted control wrapper.
+   * - **help-text** - The component's help-text wrapper.
+   */
+  "lynk-form-field": DefineComponent<LynkFormFieldProps>;
+
   /**
    * Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..
    * ---
@@ -3243,33 +3370,6 @@ export type CustomElements = {
    */
   "lynk-format-date": DefineComponent<LynkFormatDateProps>;
 
-  /**
-   * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-focus** - Emitted when field or slotted element gains focus.
-   * - **ev-blur** - Emitted when field or slotted element loses focus.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the control.
-   * - **blur()** - Removes focus from the control.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   * - **help-tip** - Custom help-tip content.
-   * - **help-text** - Custom help-text content.
-   * - **label** - Custom label content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **label** - The component's label wrapper.
-   * - **control** - The component's slotted control wrapper.
-   * - **help-text** - The component's help-text wrapper.
-   */
-  "lynk-form-field": DefineComponent<LynkFormFieldProps>;
-
   /**
    * 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.
    * ---