@uplynk/lynk-design 1.12.1 → 1.13.0

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

@@ -4,26 +4,26 @@ import type { LynkAccordion } from "../../components/accordion/accordion.compone
 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 { LynkBox } from "../../components/box/box.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 { 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";
 import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { LynkButton } from "../../components/button/button.component.js";
 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 { 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 { LynkColorPicker } from "../../components/color-picker/color-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 { LynkDatePicker } from "../../components/date-picker/date-picker.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";
@@ -177,6 +177,17 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (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 LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -193,17 +204,6 @@ type LynkAvatarProps = {
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkBoxProps = {};
-
-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 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. */
@@ -226,6 +226,18 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: LynkBreadcrumbItem["defaultSlot"];
 };
 
+type LynkButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: LynkButtonGroup["label"];
+  /** Add a gap between buttons so they appear like a cluster of buttons instead of a flush group */
+  gapped?: LynkButtonGroup["gapped"];
+  /**  */
+  defaultSlot?: LynkButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: LynkButtonGroup["disableRole"];
+};
+
 type LynkButtonProps = {
   /**  */
   title?: LynkButton["title"];
@@ -308,18 +320,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: LynkButtonGroup["label"];
-  /** Add a gap between buttons so they appear like a cluster of buttons instead of a flush group */
-  gapped?: LynkButtonGroup["gapped"];
-  /**  */
-  defaultSlot?: LynkButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: LynkButtonGroup["disableRole"];
-};
-
 type LynkCalendarProps = {
   /** The type of calendar to display */
   type?: LynkCalendar["type"];
@@ -449,74 +449,6 @@ type LynkColProps = {};
 
 type LynkColGroupProps = {};
 
-type LynkColorPickerProps = {
-  /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
-in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
-data. */
-  value?: LynkColorPicker["value"];
-  /** 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 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"];
-  /** Renders the color picker inline rather than in a dropdown. */
-  inline?: LynkColorPicker["inline"];
-  /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
-  size?: LynkColorPicker["size"];
-  /** Removes the button that lets users toggle between format. */
-  "no-format-toggle"?: LynkColorPicker["noFormatToggle"];
-  /** The name of the form control, submitted as a name/value pair with form data. */
-  name?: LynkColorPicker["name"];
-  /** Disables the color picker. */
-  disabled?: LynkColorPicker["disabled"];
-  /** 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"];
-  /** 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
-picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
-semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript. */
-  swatches?: LynkColorPicker["swatches"];
-  /** When enabled with swatches, hides the color grid and user input controls, showing only the swatches. */
-  "swatches-only"?: LynkColorPicker["swatchesOnly"];
-  /** 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?: LynkColorPicker["form"];
-  /** Makes the color picker a required field. */
-  required?: LynkColorPicker["required"];
-  /**  */
-  base?: LynkColorPicker["base"];
-  /**  */
-  input?: LynkColorPicker["input"];
-  /**  */
-  dropdown?: LynkColorPicker["dropdown"];
-  /**  */
-  previewButton?: LynkColorPicker["previewButton"];
-  /**  */
-  trigger?: LynkColorPicker["trigger"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: LynkColorPicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: LynkColorPicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: LynkColorPicker["validationMessage"];
-  /** Emitted when the color picker loses focus. */
-  "onev-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the color picker's value changes. */
-  "onev-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the color picker receives focus. */
-  "onev-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the color picker 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 LynkComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: LynkCombobox["name"];
@@ -621,6 +553,74 @@ The default filter method is a case- and diacritic-insensitive string comparison
   "onev-add-option"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkColorPickerProps = {
+  /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
+in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
+data. */
+  value?: LynkColorPicker["value"];
+  /** 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 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"];
+  /** Renders the color picker inline rather than in a dropdown. */
+  inline?: LynkColorPicker["inline"];
+  /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
+  size?: LynkColorPicker["size"];
+  /** Removes the button that lets users toggle between format. */
+  "no-format-toggle"?: LynkColorPicker["noFormatToggle"];
+  /** The name of the form control, submitted as a name/value pair with form data. */
+  name?: LynkColorPicker["name"];
+  /** Disables the color picker. */
+  disabled?: LynkColorPicker["disabled"];
+  /** 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"];
+  /** 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
+picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
+semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript. */
+  swatches?: LynkColorPicker["swatches"];
+  /** When enabled with swatches, hides the color grid and user input controls, showing only the swatches. */
+  "swatches-only"?: LynkColorPicker["swatchesOnly"];
+  /** 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?: LynkColorPicker["form"];
+  /** Makes the color picker a required field. */
+  required?: LynkColorPicker["required"];
+  /**  */
+  base?: LynkColorPicker["base"];
+  /**  */
+  input?: LynkColorPicker["input"];
+  /**  */
+  dropdown?: LynkColorPicker["dropdown"];
+  /**  */
+  previewButton?: LynkColorPicker["previewButton"];
+  /**  */
+  trigger?: LynkColorPicker["trigger"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: LynkColorPicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkColorPicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkColorPicker["validationMessage"];
+  /** Emitted when the color picker loses focus. */
+  "onev-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the color picker's value changes. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the color picker receives focus. */
+  "onev-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the color picker 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 LynkCopyButtonProps = {
   /** The text value to copy. */
   value?: LynkCopyButton["value"];
@@ -663,62 +663,6 @@ scenarios. */
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkDatePickerProps = {
-  /** The input's name attribute. */
-  name?: LynkDatePicker["name"];
-  /** The current value in ISO format (YYYY-MM-DD). */
-  value?: LynkDatePicker["value"];
-  /** The input's label. */
-  label?: LynkDatePicker["label"];
-  /** Placeholder text to show when the input is empty. */
-  placeholder?: LynkDatePicker["placeholder"];
-  /** The help text below the input. */
-  "help-text"?: LynkDatePicker["helpText"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkDatePicker["helpTip"];
-  /** Disables the input. */
-  disabled?: LynkDatePicker["disabled"];
-  /** Makes the input readonly. */
-  readonly?: LynkDatePicker["readonly"];
-  /** Makes the input required. */
-  required?: LynkDatePicker["required"];
-  /** Adds the dirty indicator mark. */
-  dirty?: LynkDatePicker["dirty"];
-  /** Arranges the label inline next to the date picker instead of above it. */
-  inline?: LynkDatePicker["inline"];
-  /** The input's size. */
-  size?: LynkDatePicker["size"];
-  /** The minimum date in ISO format (YYYY-MM-DD). */
-  min?: LynkDatePicker["min"];
-  /** The maximum date in ISO format (YYYY-MM-DD). */
-  max?: LynkDatePicker["max"];
-  /** 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?: LynkDatePicker["hoist"];
-  /** Adds a clear button when the input is populated. */
-  clearable?: LynkDatePicker["clearable"];
-  /**  */
-  dropdown?: LynkDatePicker["dropdown"];
-  /**  */
-  calendar?: LynkDatePicker["calendar"];
-  /**  */
-  dateInput?: LynkDatePicker["dateInput"];
-  /**  */
-  isOpen?: LynkDatePicker["isOpen"];
-  /** Gets or sets the default value used to reset this element. */
-  defaultValue?: LynkDatePicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: LynkDatePicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: LynkDatePicker["validationMessage"];
-  /** Emitted when the date value changes. */
-  "onev-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onev-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the input is cleared. */
-  "onev-clear"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -787,6 +731,12 @@ inside of the viewport. */
   /**  */
   timeInput?: LynkDateTimePicker["timeInput"];
   /**  */
+  hourInput?: LynkDateTimePicker["hourInput"];
+  /**  */
+  minuteInput?: LynkDateTimePicker["minuteInput"];
+  /**  */
+  secondInput?: LynkDateTimePicker["secondInput"];
+  /**  */
   isOpen?: LynkDateTimePicker["isOpen"];
   /** Gets or sets the default value used to reset this element. */
   defaultValue?: LynkDateTimePicker["defaultValue"];
@@ -841,6 +791,62 @@ type LynkDividerProps = {
   vertical?: LynkDivider["vertical"];
 };
 
+type LynkDatePickerProps = {
+  /** The input's name attribute. */
+  name?: LynkDatePicker["name"];
+  /** The current value in ISO format (YYYY-MM-DD). */
+  value?: LynkDatePicker["value"];
+  /** The input's label. */
+  label?: LynkDatePicker["label"];
+  /** Placeholder text to show when the input is empty. */
+  placeholder?: LynkDatePicker["placeholder"];
+  /** The help text below the input. */
+  "help-text"?: LynkDatePicker["helpText"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkDatePicker["helpTip"];
+  /** Disables the input. */
+  disabled?: LynkDatePicker["disabled"];
+  /** Makes the input readonly. */
+  readonly?: LynkDatePicker["readonly"];
+  /** Makes the input required. */
+  required?: LynkDatePicker["required"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkDatePicker["dirty"];
+  /** Arranges the label inline next to the date picker instead of above it. */
+  inline?: LynkDatePicker["inline"];
+  /** The input's size. */
+  size?: LynkDatePicker["size"];
+  /** The minimum date in ISO format (YYYY-MM-DD). */
+  min?: LynkDatePicker["min"];
+  /** The maximum date in ISO format (YYYY-MM-DD). */
+  max?: LynkDatePicker["max"];
+  /** 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?: LynkDatePicker["hoist"];
+  /** Adds a clear button when the input is populated. */
+  clearable?: LynkDatePicker["clearable"];
+  /**  */
+  dropdown?: LynkDatePicker["dropdown"];
+  /**  */
+  calendar?: LynkDatePicker["calendar"];
+  /**  */
+  dateInput?: LynkDatePicker["dateInput"];
+  /**  */
+  isOpen?: LynkDatePicker["isOpen"];
+  /** Gets or sets the default value used to reset this element. */
+  defaultValue?: LynkDatePicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkDatePicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkDatePicker["validationMessage"];
+  /** Emitted when the date value changes. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onev-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input is cleared. */
+  "onev-clear"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -2290,6 +2296,14 @@ type LynkTimePickerProps = {
   /**  */
   timeInput?: LynkTimePicker["timeInput"];
   /**  */
+  hourInput?: LynkTimePicker["hourInput"];
+  /**  */
+  minuteInput?: LynkTimePicker["minuteInput"];
+  /**  */
+  secondInput?: LynkTimePicker["secondInput"];
+  /**  */
+  hiddenInput?: LynkTimePicker["hiddenInput"];
+  /**  */
   isOpen?: LynkTimePicker["isOpen"];
   /** Gets or sets the default value used to reset this element. */
   defaultValue?: LynkTimePicker["defaultValue"];
@@ -2521,25 +2535,22 @@ export type CustomElements = {
   "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(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:**
-   *  - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-avatar": DefineComponent<LynkAvatarProps>;
+  "lynk-badge": DefineComponent<LynkBadgeProps>;
 
   /**
    *
@@ -2567,22 +2578,25 @@ export type CustomElements = {
   "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
    *
    * ### **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)_
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   *  - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "lynk-badge": DefineComponent<LynkBadgeProps>;
+  "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2618,6 +2632,19 @@ export type CustomElements = {
    */
   "lynk-breadcrumb-item": DefineComponent<LynkBreadcrumbItemProps>;
 
+  /**
+   * Button groups can be used to group related buttons into sections.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2652,19 +2679,6 @@ export type CustomElements = {
    */
   "lynk-button": DefineComponent<LynkButtonProps>;
 
-  /**
-   * Button groups can be used to group related buttons into sections.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
-
   /**
    * A calendar component that supports single date, multiple dates, and date range selection.
    * ---
@@ -2826,6 +2840,62 @@ export type CustomElements = {
    */
   "lynk-colgroup": DefineComponent<LynkColGroupProps>;
 
+  /**
+   * Comboboxes allow you to choose items from a menu of predefined options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-change** - Emitted when the control's value changes.
+   * - **ev-clear** - Emitted when the control's value is cleared.
+   * - **ev-input** - Emitted when the control receives input.
+   * - **ev-focus** - Emitted when the control gains focus.
+   * - **ev-blur** - Emitted when the control loses focus.
+   * - **ev-show** - Emitted when the combobox's menu opens.
+   * - **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.
+   * - **ev-hide** - Emitted when the combobox's menu closes.
+   * - **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.
+   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **ev-error** - Emitted when the combobox menu fails to open.
+   * - **ev-add-option** - Emitted when a custom option is added via allowCustomValues.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no
+   * appropriate filtered options, a ev-error is emitted and the listbox stays closed.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message.
+   * Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.
+   * - **label** - The combobox's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+   * - **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, combobox, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The combobox's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **listbox** - The listbox container where the options are slotted and the filtered options list exists.
+   * - **filtered-listbox** - The container that wraps the filtered options.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   */
+  "lynk-combobox": DefineComponent<LynkComboboxProps>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2888,62 +2958,6 @@ export type CustomElements = {
    */
   "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
 
-  /**
-   * Comboboxes allow you to choose items from a menu of predefined options.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-change** - Emitted when the control's value changes.
-   * - **ev-clear** - Emitted when the control's value is cleared.
-   * - **ev-input** - Emitted when the control receives input.
-   * - **ev-focus** - Emitted when the control gains focus.
-   * - **ev-blur** - Emitted when the control loses focus.
-   * - **ev-show** - Emitted when the combobox's menu opens.
-   * - **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.
-   * - **ev-hide** - Emitted when the combobox's menu closes.
-   * - **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.
-   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   * - **ev-error** - Emitted when the combobox menu fails to open.
-   * - **ev-add-option** - Emitted when a custom option is added via allowCustomValues.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no
-   * appropriate filtered options, a ev-error is emitted and the listbox stays closed.
-   * - **hide()** - Hides the listbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message.
-   * Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
-   * - **blur()** - Removes focus from the control.
-   *
-   * ### **Slots:**
-   *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.
-   * - **label** - The combobox's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
-   * - **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, combobox, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The combobox's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
-   * - **listbox** - The listbox container where the options are slotted and the filtered options list exists.
-   * - **filtered-listbox** - The container that wraps the filtered options.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
-   */
-  "lynk-combobox": DefineComponent<LynkComboboxProps>;
-
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2974,45 +2988,6 @@ export type CustomElements = {
    */
   "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
 
-  /**
-   * A date picker that combines calendar component with accessible input field.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-change** - Emitted when the date value changes.
-   * - **ev-input** - Emitted when the control receives input.
-   * - **ev-clear** - Emitted when the input is cleared.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dropdown.
-   * - **hide()** - Hides the dropdown.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the date input.
-   * - **blur()** - Removes focus from the input.
-   * - **checkValidity()** - Checks for validity but does not show a validation message.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message.
-   *
-   * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the label prop.
-   * - **help-text** - Help text that describes how to use the input.
-   * - **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **form-control** - The form control wrapper.
-   * - **form-control-label** - The label wrapper.
-   * - **form-control-input** - The input wrapper.
-   * - **form-control-help-text** - The help text wrapper.
-   * - **input-group** - The input group container.
-   * - **date-input** - The date input field.
-   * - **trigger** - The dropdown trigger button.
-   * - **dropdown** - The dropdown panel.
-   * - **calendar** - The calendar component.
-   */
-  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
-
   /**
    * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
@@ -3047,6 +3022,9 @@ export type CustomElements = {
    * - **input-group** - The input group container.
    * - **date-input** - The date input field.
    * - **time-input** - The time input field.
+   * - **hour-input** - The hour number input (24h mode).
+   * - **minute-input** - The minute number input (24h mode).
+   * - **second-input** - The second number input (24h mode).
    * - **trigger** - The dropdown trigger button.
    * - **dropdown** - The dropdown panel.
    * - **calendar** - The calendar component.
@@ -3109,6 +3087,45 @@ export type CustomElements = {
    */
   "lynk-divider": DefineComponent<LynkDividerProps>;
 
+  /**
+   * A date picker that combines calendar component with accessible input field.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-change** - Emitted when the date value changes.
+   * - **ev-input** - Emitted when the control receives input.
+   * - **ev-clear** - Emitted when the input is cleared.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown.
+   * - **hide()** - Hides the dropdown.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the date input.
+   * - **blur()** - Removes focus from the input.
+   * - **checkValidity()** - Checks for validity but does not show a validation message.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **help-text** - Help text that describes how to use the input.
+   * - **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **form-control** - The form control wrapper.
+   * - **form-control-label** - The label wrapper.
+   * - **form-control-input** - The input wrapper.
+   * - **form-control-help-text** - The help text wrapper.
+   * - **input-group** - The input group container.
+   * - **date-input** - The date input field.
+   * - **trigger** - The dropdown trigger button.
+   * - **dropdown** - The dropdown panel.
+   * - **calendar** - The calendar component.
+   */
+  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -4462,6 +4479,9 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text wrapper.
    * - **input-group** - The input group container.
    * - **time-input** - The time input field.
+   * - **hour-input** - The hour number input (24h mode).
+   * - **minute-input** - The minute number input (24h mode).
+   * - **second-input** - The second number input (24h mode).
    * - **trigger** - The dropdown trigger button.
    * - **dropdown** - The dropdown panel.
    * - **clock** - The clock component.