@uplynk/lynk-design 1.15.0 → 1.17.0

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

@@ -2,8 +2,8 @@ import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
 import type { LynkAlert } from "../../components/alert/alert.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.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";
 import type { LynkBox } from "../../components/box/box.component.js";
@@ -14,22 +14,22 @@ import type { LynkButtonGroup } from "../../components/button-group/button-group
 import type { LynkCalendar } from "../../components/calendar/calendar.component.js";
 import type { LynkCard } from "../../components/card/card.component.js";
 import type { LynkCheckbox } from "../../components/checkbox/checkbox.component.js";
-import type { LynkCol } from "../../components/col/col.component.js";
 import type { LynkClock } from "../../components/clock/clock.component.js";
+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 { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-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 { 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";
@@ -127,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"];
@@ -168,15 +178,6 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (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 LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -422,8 +423,6 @@ the same document or shadow root for this to work. */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkColProps = {};
-
 type LynkClockProps = {
   /** The current value of the time picker in HH:MM or HH:MM:SS format (always 24-hour). */
   value?: LynkClock["value"];
@@ -447,6 +446,8 @@ type LynkClockProps = {
   "onev-change"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkColProps = {};
+
 type LynkColGroupProps = {};
 
 type LynkColorPickerProps = {
@@ -457,6 +458,16 @@ data. */
   /** The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
 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"];
+  /** 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. */
+  state?: LynkColorPicker["state"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkColorPicker["dirty"];
+  /** Arranges the label inline next to the color picker instead of above it. */
+  "label-inline"?: LynkColorPicker["labelInline"];
   /** The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
 picker will accept user input in any format (including CSS color names) and convert it to the desired format. */
   format?: LynkColorPicker["format"];
@@ -470,11 +481,15 @@ 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"];
   /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
   opacity?: LynkColorPicker["opacity"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport. */
+  placement?: LynkColorPicker["placement"];
   /** By default, values are lowercase. With this attribute, values will be uppercase instead. */
   uppercase?: LynkColorPicker["uppercase"];
   /** One or more predefined color swatches to display as presets in the color picker. Can include any format the color
@@ -489,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"];
   /**  */
@@ -530,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. */
@@ -682,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. */
@@ -719,40 +742,6 @@ 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"];
@@ -772,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. */
@@ -842,6 +833,40 @@ 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"];
@@ -927,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"];
@@ -976,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"];
@@ -1159,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. */
@@ -1342,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"];
@@ -1660,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 */
@@ -1713,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. */
@@ -1823,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
@@ -1850,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. */
@@ -2194,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. */
@@ -2274,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. */
@@ -2500,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).
    * ---
@@ -2519,23 +2648,6 @@ export type CustomElements = {
    */
   "lynk-animation": DefineComponent<LynkAnimationProps>;
 
-  /**
-   * 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>;
-
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2793,13 +2905,6 @@ export type CustomElements = {
    */
   "lynk-checkbox": DefineComponent<LynkCheckboxProps>;
 
-  /**
-   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
-   * ---
-   *
-   */
-  "lynk-col": DefineComponent<LynkColProps>;
-
   /**
    * A time picker component with hour, minute, second, and AM/PM columns.
    * ---
@@ -2829,6 +2934,13 @@ export type CustomElements = {
    */
   "lynk-clock": DefineComponent<LynkClockProps>;
 
+  /**
+   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
+   * ---
+   *
+   */
+  "lynk-col": DefineComponent<LynkColProps>;
+
   /**
    * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
    * ---
@@ -2865,6 +2977,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
+   * - **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.
    *
    * ### **CSS Properties:**
    *  - **--grid-width** - The width of the color grid. _(default: undefined)_
@@ -3029,49 +3143,6 @@ 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.
    * ---
@@ -3116,6 +3187,49 @@ 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.
    * ---
@@ -3199,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..
    * ---
@@ -3229,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.
    * ---
@@ -3543,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).
    * ---