@uplynk/lynk-design 1.11.2 → 1.12.0

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

@@ -1,9 +1,9 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
+import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkAnimation } from "../../components/animation/animation.component.js";
-import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.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";
@@ -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 { LynkDialog } from "../../components/dialog/dialog.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 { LynkDrawer } from "../../components/drawer/drawer.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 { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
-import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
+import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
-import type { LynkFormatNumber } from "../../components/format-number/format-number.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";
@@ -100,6 +100,15 @@ type LynkAccordionProps = {
   shape?: LynkAccordion["shape"];
 };
 
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to each-other */
+  "min-size"?: LynkAutoGrid["minSize"];
+  /** The space between auto-grid items. Use spacing tokens or any custom size. */
+  gap?: LynkAutoGrid["gap"];
+};
+
 type LynkAlertProps = {
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   open?: LynkAlert["open"];
@@ -168,15 +177,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"];
@@ -663,38 +663,57 @@ scenarios. */
   "onev-error"?: (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"];
+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"];
+  /** Adds a clear button when the input is populated. */
+  clearable?: LynkDatePicker["clearable"];
   /**  */
-  dialog?: LynkDialog["dialog"];
+  dropdown?: LynkDatePicker["dropdown"];
   /**  */
-  panel?: LynkDialog["panel"];
+  calendar?: LynkDatePicker["calendar"];
   /**  */
-  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;
+  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 = {
@@ -748,6 +767,12 @@ inside of the viewport. */
   "inline-pickers"?: LynkDateTimePicker["inlinePickers"];
   /** Adds a clear button when the input is populated. */
   clearable?: LynkDateTimePicker["clearable"];
+  /** Controls how incoming values with timezone information are normalized.
+- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).
+- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time
+  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display
+  them in the user's local time. */
+  normalize?: LynkDateTimePicker["normalizeMode"];
   /**  */
   dropdown?: LynkDateTimePicker["dropdown"];
   /**  */
@@ -774,6 +799,45 @@ 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"];
+};
+
 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. */
@@ -812,11 +876,6 @@ accessible way for users to dismiss the drawer. */
   "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => 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. */
@@ -859,57 +918,15 @@ components that use a dropdown internally. */
   "onev-after-hide"?: (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"];
-  /** 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 LynkFlankProps = {
+  /** Flank from first item */
+  start?: LynkFlank["start"];
+  /** Flank from the last item */
+  end?: LynkFlank["end"];
+  /** How to align flanked items to each-other */
+  align?: LynkFlank["align"];
+  /** The space between flanked items. Use spacing tokens or any custom size. */
+  gap?: LynkFlank["gap"];
 };
 
 type LynkFormFieldProps = {
@@ -943,17 +960,6 @@ type LynkFormFieldProps = {
   "onev-blur"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkFlankProps = {
-  /** Flank from first item */
-  start?: LynkFlank["start"];
-  /** Flank from the last item */
-  end?: LynkFlank["end"];
-  /** How to align flanked items to each-other */
-  align?: LynkFlank["align"];
-  /** The space between flanked items. Use spacing tokens or any custom size. */
-  gap?: LynkFlank["gap"];
-};
-
 type LynkFormatBytesProps = {
   /** The number to format in bytes. */
   value?: LynkFormatBytes["value"];
@@ -963,29 +969,6 @@ type LynkFormatBytesProps = {
   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 LynkFormatDateProps = {
   /** The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
 recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
@@ -1015,6 +998,29 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: LynkFormatDate["hourFormat"];
 };
 
+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 = {
   /** A container of grid items */
   container?: LynkGrid["container"];
@@ -1227,6 +1233,8 @@ type LynkMenuItemProps = {
   checked?: LynkMenuItem["checked"];
   /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
   value?: LynkMenuItem["value"];
+  /** Draws the menu item in a loading state. */
+  loading?: LynkMenuItem["loading"];
   /** Draws the menu item in a disabled state. */
   disabled?: LynkMenuItem["disabled"];
   /**  */
@@ -2362,6 +2370,8 @@ type LynkTreeItemProps = {
   selected?: LynkTreeItem["selected"];
   /** Disables the tree item. */
   disabled?: LynkTreeItem["disabled"];
+  /** Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed. */
+  readonly?: LynkTreeItem["readonly"];
   /** Enables lazy loading behavior. */
   lazy?: LynkTreeItem["lazy"];
   /**  */
@@ -2432,6 +2442,23 @@ export type CustomElements = {
    */
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
+  /**
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
+   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -2487,23 +2514,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.
    * ---
@@ -2959,47 +2969,43 @@ export type CustomElements = {
   "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
 
   /**
-   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+   * A date picker that combines calendar component with accessible input field.
    * ---
    *
    *
    * ### **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.
+   *  - **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 dialog.
-   * - **hide()** - Hides the dialog
+   *  - **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:**
-   *  - _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)_
+   *  - **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 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.
+   *  - **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-dialog": DefineComponent<LynkDialogProps>;
+  "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.
@@ -3042,6 +3048,61 @@ 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.
+   * ---
+   *
+   *
+   * ### **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.
    * ---
@@ -3084,18 +3145,6 @@ export type CustomElements = {
    */
   "lynk-drawer": DefineComponent<LynkDrawerProps>;
 
-  /**
-   * 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.
    * ---
@@ -3118,50 +3167,28 @@ export type CustomElements = {
    * - **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   *  - **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>;
 
   /**
-   * A date picker that combines calendar component with accessible input field.
+   * Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..
    * ---
    *
    *
-   * ### **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.
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_
    *
    * ### **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>;
+  "lynk-flank": DefineComponent<LynkFlankProps>;
 
   /**
    * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
@@ -3190,22 +3217,6 @@ export type CustomElements = {
    */
   "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..
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   *
-   * ### **CSS Properties:**
-   *  - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "lynk-flank": DefineComponent<LynkFlankProps>;
-
   /**
    * Formats a number as a human readable bytes value.
    * ---
@@ -3214,18 +3225,18 @@ export type CustomElements = {
   "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "lynk-format-number": DefineComponent<LynkFormatNumberProps>;
+  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
 
   /**
-   * Formats a date/time using the specified locale and options.
+   * Formats a number using the specified locale and options.
    * ---
    *
    */
-  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
+  "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.
@@ -3384,6 +3395,10 @@ export type CustomElements = {
    *  - _default_ - The menu item's label.
    * - **prefix** - Used to prepend an icon or similar element to the menu item.
    * - **suffix** - Used to append an icon or similar element to the menu item.
+   * - **submenu** - Used to denote a nested menu.
+   *
+   * ### **CSS Properties:**
+   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
@@ -3391,6 +3406,9 @@ export type CustomElements = {
    * - **prefix** - The prefix container.
    * - **label** - The menu item label.
    * - **suffix** - The suffix container.
+   * - **spinner** - The spinner that shows when the menu item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
    */
   "lynk-menu-item": DefineComponent<LynkMenuItemProps>;
 
@@ -4540,6 +4558,7 @@ export type CustomElements = {
    *  - **base** - The component's base wrapper.
    * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
    * - **item--disabled** - Applied when the tree item is disabled.
+   * - **item--readonly** - Applied when the tree item is readonly.
    * - **item--expanded** - Applied when the tree item is expanded.
    * - **item--indeterminate** - Applied when the selection is indeterminate.
    * - **item--selected** - Applied when the tree item is selected.