@uplynk/lynk-design 1.20.0 → 1.20.1

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

@@ -2,16 +2,16 @@ 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 { LynkBox } from "../../components/box/box.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.component.js";
-import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.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 { LynkCalendar } from "../../components/calendar/calendar.component.js";
 import type { LynkButtonGroup } from "../../components/button-group/button-group.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";
@@ -20,17 +20,17 @@ import type { LynkColGroup } from "../../components/colgroup/colgroup.component.
 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 { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
-import type { LynkDivider } from "../../components/divider/divider.component.js";
-import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
+import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDivider } from "../../components/divider/divider.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
+import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
 import type { LynkFormField } from "../../components/form-field/form-field.component.js";
-import type { LynkFormatNumber } from "../../components/format-number/format-number.component.js";
-import type { LynkFormatDate } from "../../components/format-date/format-date.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 { 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";
 import type { LynkIconButton } from "../../components/icon-button/icon-button.component.js";
@@ -133,26 +133,6 @@ 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 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 LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -194,16 +174,26 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-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. */
-  label?: LynkBreadcrumb["label"];
-  /**  */
-  defaultSlot?: LynkBreadcrumb["defaultSlot"];
-  /**  */
-  separatorSlot?: LynkBreadcrumb["separatorSlot"];
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to each-other */
+  "min-size"?: LynkAutoGrid["minSize"];
+  /** The space between auto-grid items. Use spacing tokens or any custom size. */
+  gap?: LynkAutoGrid["gap"];
+};
+
+type LynkBadgeProps = {
+  /** The badge's variant. */
+  type?: LynkBadge["type"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: LynkBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: LynkBadge["pulse"];
 };
 
+type LynkBoxProps = {};
+
 type LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -220,6 +210,16 @@ type LynkAvatarProps = {
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
+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. */
+  label?: LynkBreadcrumb["label"];
+  /**  */
+  defaultSlot?: LynkBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: LynkBreadcrumb["separatorSlot"];
+};
+
 type LynkBreadcrumbItemProps = {
   /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
 internally. When unset, a button will be rendered instead. */
@@ -314,6 +314,18 @@ 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"];
@@ -347,18 +359,6 @@ type LynkCalendarProps = {
   "onev-change"?: (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 LynkCardProps = {
   /** The card's visual appearance. */
   appearance?: LynkCard["appearance"];
@@ -712,6 +712,68 @@ 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"];
+  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
+  "label-end"?: LynkDatePicker["labelEnd"];
+  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
+  "help-text-end"?: LynkDatePicker["helpTextEnd"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkDatePicker["helpTip"];
+  /** Disables the input. */
+  disabled?: LynkDatePicker["disabled"];
+  /** Makes the input readonly. */
+  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. */
+  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"];
@@ -807,115 +869,6 @@ inside of the viewport. */
   "onev-clear"?: (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"];
-  /** Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot. */
-  "label-end"?: LynkDatePicker["labelEnd"];
-  /** Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot. */
-  "help-text-end"?: LynkDatePicker["helpTextEnd"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkDatePicker["helpTip"];
-  /** Disables the input. */
-  disabled?: LynkDatePicker["disabled"];
-  /** Makes the input readonly. */
-  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. */
-  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 LynkDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: LynkDivider["vertical"];
-};
-
-type LynkDropdownProps = {
-  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
-  open?: LynkDropdown["open"];
-  /** 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?: LynkDropdown["placement"];
-  /** Disables the dropdown so the panel will not open. */
-  disabled?: LynkDropdown["disabled"];
-  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
-controls that allow multiple selections. */
-  "stay-open-on-select"?: LynkDropdown["stayOpenOnSelect"];
-  /** The distance in pixels from which to offset the panel away from its trigger. */
-  distance?: LynkDropdown["distance"];
-  /** The distance in pixels from which to offset the panel along its trigger. */
-  skidding?: LynkDropdown["skidding"];
-  /** Display the dropdown component as a block instead of inline-block. */
-  block?: LynkDropdown["block"];
-  /** 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?: LynkDropdown["hoist"];
-  /** Syncs the popup width or height to that of the trigger element. */
-  sync?: LynkDropdown["sync"];
-  /**  */
-  popup?: LynkDropdown["popup"];
-  /**  */
-  trigger?: LynkDropdown["trigger"];
-  /**  */
-  panel?: LynkDropdown["panel"];
-  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
-components that use a dropdown internally. */
-  containingElement?: LynkDropdown["containingElement"];
-  /** Emitted when the dropdown opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown closes and all animations are complete. */
-  "onev-after-hide"?: (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. */
@@ -950,6 +903,11 @@ accessible way for users to dismiss the dialog. */
   "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type LynkDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: LynkDivider["vertical"];
+};
+
 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. */
@@ -988,6 +946,48 @@ accessible way for users to dismiss the drawer. */
   "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type LynkDropdownProps = {
+  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
+  open?: LynkDropdown["open"];
+  /** 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?: LynkDropdown["placement"];
+  /** Disables the dropdown so the panel will not open. */
+  disabled?: LynkDropdown["disabled"];
+  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+controls that allow multiple selections. */
+  "stay-open-on-select"?: LynkDropdown["stayOpenOnSelect"];
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  distance?: LynkDropdown["distance"];
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  skidding?: LynkDropdown["skidding"];
+  /** Display the dropdown component as a block instead of inline-block. */
+  block?: LynkDropdown["block"];
+  /** 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?: LynkDropdown["hoist"];
+  /** Syncs the popup width or height to that of the trigger element. */
+  sync?: LynkDropdown["sync"];
+  /**  */
+  popup?: LynkDropdown["popup"];
+  /**  */
+  trigger?: LynkDropdown["trigger"];
+  /**  */
+  panel?: LynkDropdown["panel"];
+  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+components that use a dropdown internally. */
+  containingElement?: LynkDropdown["containingElement"];
+  /** Emitted when the dropdown opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkFlankProps = {
   /** Flank from first item */
   start?: LynkFlank["start"];
@@ -1038,27 +1038,13 @@ type LynkFormFieldProps = {
   "onev-blur"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkFormatNumberProps = {
-  /** The number to format. */
-  value?: LynkFormatNumber["value"];
-  /** The formatting style to use. */
-  type?: LynkFormatNumber["type"];
-  /** Turns off grouping separators. */
-  "no-grouping"?: LynkFormatNumber["noGrouping"];
-  /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
-  currency?: LynkFormatNumber["currency"];
-  /** How to display the currency. */
-  "currency-display"?: LynkFormatNumber["currencyDisplay"];
-  /** The minimum number of integer digits to use. Possible values are 1 - 21. */
-  "minimum-integer-digits"?: LynkFormatNumber["minimumIntegerDigits"];
-  /** The minimum number of fraction digits to use. Possible values are 0 - 20. */
-  "minimum-fraction-digits"?: LynkFormatNumber["minimumFractionDigits"];
-  /** The maximum number of fraction digits to use. Possible values are 0 - 20. */
-  "maximum-fraction-digits"?: LynkFormatNumber["maximumFractionDigits"];
-  /** The minimum number of significant digits to use. Possible values are 1 - 21. */
-  "minimum-significant-digits"?: LynkFormatNumber["minimumSignificantDigits"];
-  /** The maximum number of significant digits to use,. Possible values are 1 - 21. */
-  "maximum-significant-digits"?: LynkFormatNumber["maximumSignificantDigits"];
+type LynkFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: LynkFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: LynkFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: LynkFormatBytes["display"];
 };
 
 type LynkFormatDateProps = {
@@ -1090,13 +1076,27 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: LynkFormatDate["hourFormat"];
 };
 
-type LynkFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: LynkFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: LynkFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: LynkFormatBytes["display"];
+type LynkFormatNumberProps = {
+  /** The number to format. */
+  value?: LynkFormatNumber["value"];
+  /** The formatting style to use. */
+  type?: LynkFormatNumber["type"];
+  /** Turns off grouping separators. */
+  "no-grouping"?: LynkFormatNumber["noGrouping"];
+  /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
+  currency?: LynkFormatNumber["currency"];
+  /** How to display the currency. */
+  "currency-display"?: LynkFormatNumber["currencyDisplay"];
+  /** The minimum number of integer digits to use. Possible values are 1 - 21. */
+  "minimum-integer-digits"?: LynkFormatNumber["minimumIntegerDigits"];
+  /** The minimum number of fraction digits to use. Possible values are 0 - 20. */
+  "minimum-fraction-digits"?: LynkFormatNumber["minimumFractionDigits"];
+  /** The maximum number of fraction digits to use. Possible values are 0 - 20. */
+  "maximum-fraction-digits"?: LynkFormatNumber["maximumFractionDigits"];
+  /** The minimum number of significant digits to use. Possible values are 1 - 21. */
+  "minimum-significant-digits"?: LynkFormatNumber["minimumSignificantDigits"];
+  /** The maximum number of significant digits to use,. Possible values are 1 - 21. */
+  "maximum-significant-digits"?: LynkFormatNumber["maximumSignificantDigits"];
 };
 
 type LynkGridProps = {
@@ -2796,24 +2796,26 @@ export type CustomElements = {
   "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
+   * ### **Events:**
+   *  - **ev-cancel** - Emitted when the animation is canceled.
+   * - **ev-finish** - Emitted when the animation finishes.
+   * - **ev-start** - Emitted when the animation starts or restarts.
    *
-   * ### **CSS Properties:**
-   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
-   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
+   * ### **Methods:**
+   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
    */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+  "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
-   *
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
    *
    *
@@ -2821,21 +2823,13 @@ export type CustomElements = {
    *  - _default_ - The default slot.
    *
    * ### **CSS Properties:**
-   *  - **--align** - Custom text align (left, center, right). _(default: left)_
-   * - **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_
-   * - **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_
-   * - **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_
-   * - **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_
-   * - **--height** - Any custom px, rem, %, or vh value. _(default: auto)_
-   * - **--width** - Any custom px, rem, %, or vh value. _(default: auto)_
-   * - **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
-   * - **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
-   * - **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_
+   *  - **--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-box": DefineComponent<LynkBoxProps>;
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2856,37 +2850,29 @@ export type CustomElements = {
   "lynk-badge": DefineComponent<LynkBadgeProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-cancel** - Emitted when the animation is canceled.
-   * - **ev-finish** - Emitted when the animation finishes.
-   * - **ev-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
    *
-   * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
-   */
-  "lynk-animation": DefineComponent<LynkAnimationProps>;
-
-  /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--align** - Custom text align (left, center, right). _(default: left)_
+   * - **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_
+   * - **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_
+   * - **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_
+   * - **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_
+   * - **--height** - Any custom px, rem, %, or vh value. _(default: auto)_
+   * - **--width** - Any custom px, rem, %, or vh value. _(default: auto)_
+   * - **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
+   * - **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
+   * - **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+  "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -2909,6 +2895,20 @@ export type CustomElements = {
    */
   "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
+  /**
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -2963,6 +2963,19 @@ 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.
    * ---
@@ -3009,19 +3022,6 @@ export type CustomElements = {
    */
   "lynk-calendar": DefineComponent<LynkCalendarProps>;
 
-  /**
-   * 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>;
-
   /**
    * Cards can be used to group media with related subjects into a container.
    * ---
@@ -3301,12 +3301,12 @@ export type CustomElements = {
   "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.
+   * A date picker that combines calendar component with accessible input field.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-change** - Emitted when the date-time value changes.
+   *  - **ev-change** - Emitted when the date value changes.
    * - **ev-input** - Emitted when the control receives input.
    * - **ev-clear** - Emitted when the input is cleared.
    *
@@ -3335,24 +3335,19 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text wrapper.
    * - **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.
-   * - **clock** - The clock component.
    */
-  "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
+  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
 
   /**
-   * A date picker that combines calendar component with accessible input field.
+   * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-change** - Emitted when the date value changes.
+   *  - **ev-change** - Emitted when the date-time value changes.
    * - **ev-input** - Emitted when the control receives input.
    * - **ev-clear** - Emitted when the input is cleared.
    *
@@ -3381,52 +3376,16 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text wrapper.
    * - **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.
+   * - **clock** - The clock component.
    */
-  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
-
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "lynk-divider": DefineComponent<LynkDividerProps>;
-
-  /**
-   * Dropdowns expose additional content that "drops down" in a panel.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the dropdown opens.
-   * - **ev-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **ev-hide** - Emitted when the dropdown closes.
-   * - **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dropdown panel.
-   * - **hide()** - Hides the dropdown panel
-   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The dropdown's content.
-   * - **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **trigger** - The container that wraps the trigger.
-   * - **panel** - The panel that gets shown when the dropdown is open.
-   */
-  "lynk-dropdown": DefineComponent<LynkDropdownProps>;
+  "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
 
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -3471,6 +3430,18 @@ export type CustomElements = {
    */
   "lynk-dialog": DefineComponent<LynkDialogProps>;
 
+  /**
+   * Dividers are used to visually separate or group elements.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   */
+  "lynk-divider": DefineComponent<LynkDividerProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -3513,6 +3484,35 @@ export type CustomElements = {
    */
   "lynk-drawer": DefineComponent<LynkDrawerProps>;
 
+  /**
+   * Dropdowns expose additional content that "drops down" in a panel.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the dropdown opens.
+   * - **ev-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **ev-hide** - Emitted when the dropdown closes.
+   * - **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown panel.
+   * - **hide()** - Hides the dropdown panel
+   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The dropdown's content.
+   * - **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **trigger** - The container that wraps the trigger.
+   * - **panel** - The panel that gets shown when the dropdown is open.
+   */
+  "lynk-dropdown": DefineComponent<LynkDropdownProps>;
+
   /**
    * Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..
    * ---
@@ -3563,11 +3563,11 @@ export type CustomElements = {
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "lynk-format-number": DefineComponent<LynkFormatNumberProps>;
+  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
 
   /**
    * Formats a date/time using the specified locale and options.
@@ -3577,11 +3577,11 @@ export type CustomElements = {
   "lynk-format-date": DefineComponent<LynkFormatDateProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Formats a number using the specified locale and options.
    * ---
    *
    */
-  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
+  "lynk-format-number": DefineComponent<LynkFormatNumberProps>;
 
   /**
    * The Grid component helps create visual consistency and structure between layouts while allowing flexibility across a wide variety of designs. It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.