@uplynk/lynk-design 1.14.0 → 1.15.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 { 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 { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
@@ -14,22 +14,22 @@ import type { LynkButtonGroup } from "../../components/button-group/button-group
 import type { LynkCalendar } from "../../components/calendar/calendar.component.js";
 import type { LynkCard } from "../../components/card/card.component.js";
 import type { LynkCheckbox } from "../../components/checkbox/checkbox.component.js";
-import type { LynkClock } from "../../components/clock/clock.component.js";
 import type { LynkCol } from "../../components/col/col.component.js";
-import type { LynkColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { LynkClock } from "../../components/clock/clock.component.js";
 import type { LynkColGroup } from "../../components/colgroup/colgroup.component.js";
+import type { LynkColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { LynkCombobox } from "../../components/combobox/combobox.component.js";
 import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
-import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { 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 { LynkFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { LynkFormatDate } from "../../components/format-date/format-date.component.js";
+import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { LynkGrid } from "../../components/grid/grid.component.js";
 import type { LynkIcon } from "../../components/icon/icon.component.js";
@@ -100,6 +100,33 @@ type LynkAccordionProps = {
   shape?: LynkAccordion["shape"];
 };
 
+type LynkAlertProps = {
+  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+  open?: LynkAlert["open"];
+  /** Makes the alert closable. */
+  closable?: LynkAlert["closable"];
+  /** The alert's type (color). */
+  type?: LynkAlert["type"];
+  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
+the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
+  duration?: LynkAlert["duration"];
+  /** Enables a countdown that indicates the remaining time the alert will be displayed.
+Typically used to indicate the remaining time before a whole app refresh. */
+  countdown?: LynkAlert["countdown"];
+  /**  */
+  base?: LynkAlert["base"];
+  /**  */
+  countdownElement?: LynkAlert["countdownElement"];
+  /** Emitted when the alert opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the alert closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -150,33 +177,6 @@ type LynkAutoGridProps = {
   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"];
-  /** Makes the alert closable. */
-  closable?: LynkAlert["closable"];
-  /** The alert's type (color). */
-  type?: LynkAlert["type"];
-  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
-  duration?: LynkAlert["duration"];
-  /** Enables a countdown that indicates the remaining time the alert will be displayed.
-Typically used to indicate the remaining time before a whole app refresh. */
-  countdown?: LynkAlert["countdown"];
-  /**  */
-  base?: LynkAlert["base"];
-  /**  */
-  countdownElement?: LynkAlert["countdownElement"];
-  /** Emitted when the alert opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the alert closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -422,6 +422,8 @@ the same document or shadow root for this to work. */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkColProps = {};
+
 type LynkClockProps = {
   /** The current value of the time picker in HH:MM or HH:MM:SS format (always 24-hour). */
   value?: LynkClock["value"];
@@ -445,7 +447,7 @@ type LynkClockProps = {
   "onev-change"?: (e: CustomEvent<never>) => void;
 };
 
-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
@@ -515,8 +517,6 @@ the same document or shadow root for this to work. */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkColGroupProps = {};
-
 type LynkComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: LynkCombobox["name"];
@@ -719,6 +719,40 @@ type LynkDatePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDialogProps = {
+  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
+  open?: LynkDialog["open"];
+  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkDialog["label"];
+  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the dialog. */
+  "no-header"?: LynkDialog["noHeader"];
+  /** The dialog's size. */
+  size?: LynkDialog["size"];
+  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping. */
+  modal?: LynkDialog["modal"];
+  /**  */
+  dialog?: LynkDialog["dialog"];
+  /**  */
+  panel?: LynkDialog["panel"];
+  /**  */
+  overlay?: LynkDialog["overlay"];
+  /** Emitted when the dialog opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
+  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
+  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -808,40 +842,6 @@ 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"];
@@ -938,37 +938,6 @@ type LynkFlankProps = {
   gap?: LynkFlank["gap"];
 };
 
-type LynkFormFieldProps = {
-  /** The fields's styled validity state */
-  state?: LynkFormField["state"];
-  /** The input's size. */
-  size?: LynkFormField["size"];
-  /** The input's label. Alternatively, you can use the label slot. */
-  label?: LynkFormField["label"];
-  /**  */
-  id?: LynkFormField["id"];
-  /** The help text below the input. Alternatively, you can use the help-text slot. */
-  "help-text"?: LynkFormField["helpText"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkFormField["helpTip"];
-  /** Adds the required mark. */
-  required?: LynkFormField["required"];
-  /** Adds the dirty indicator mark. */
-  dirty?: LynkFormField["dirty"];
-  /** Controls the focused state styling. */
-  focused?: LynkFormField["focused"];
-  /** Arranges the label inline next to the control instead of above it. */
-  inline?: LynkFormField["inline"];
-  /**  */
-  defaultSlot?: LynkFormField["defaultSlot"];
-  /** The field will lose focus when the user interacts outside of this element (e.g. clicking). */
-  containingElement?: LynkFormField["containingElement"];
-  /** Emitted when field or slotted element gains focus. */
-  "onev-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when field or slotted element loses focus. */
-  "onev-blur"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkFormatBytesProps = {
   /** The number to format in bytes. */
   value?: LynkFormatBytes["value"];
@@ -1007,6 +976,37 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: LynkFormatDate["hourFormat"];
 };
 
+type LynkFormFieldProps = {
+  /** The fields's styled validity state */
+  state?: LynkFormField["state"];
+  /** The input's size. */
+  size?: LynkFormField["size"];
+  /** The input's label. Alternatively, you can use the label slot. */
+  label?: LynkFormField["label"];
+  /**  */
+  id?: LynkFormField["id"];
+  /** The help text below the input. Alternatively, you can use the help-text slot. */
+  "help-text"?: LynkFormField["helpText"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkFormField["helpTip"];
+  /** Adds the required mark. */
+  required?: LynkFormField["required"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkFormField["dirty"];
+  /** Controls the focused state styling. */
+  focused?: LynkFormField["focused"];
+  /** Arranges the label inline next to the control instead of above it. */
+  inline?: LynkFormField["inline"];
+  /**  */
+  defaultSlot?: LynkFormField["defaultSlot"];
+  /** The field will lose focus when the user interacts outside of this element (e.g. clicking). */
+  containingElement?: LynkFormField["containingElement"];
+  /** Emitted when field or slotted element gains focus. */
+  "onev-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when field or slotted element loses focus. */
+  "onev-blur"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkFormatNumberProps = {
   /** The number to format. */
   value?: LynkFormatNumber["value"];
@@ -2464,42 +2464,6 @@ export type CustomElements = {
    */
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
-  /**
-   * 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>;
-
-  /**
-   * 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.
    * ---
@@ -2536,6 +2500,42 @@ export type CustomElements = {
    */
   "lynk-alert": DefineComponent<LynkAlertProps>;
 
+  /**
+   * 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>;
+
+  /**
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
+   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2793,6 +2793,13 @@ export type CustomElements = {
    */
   "lynk-checkbox": DefineComponent<LynkCheckboxProps>;
 
+  /**
+   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
+   * ---
+   *
+   */
+  "lynk-col": DefineComponent<LynkColProps>;
+
   /**
    * A time picker component with hour, minute, second, and AM/PM columns.
    * ---
@@ -2823,11 +2830,17 @@ export type CustomElements = {
   "lynk-clock": DefineComponent<LynkClockProps>;
 
   /**
-   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
+   * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - Should contain 1 or more `<lynk-col>` components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-col": DefineComponent<LynkColProps>;
+  "lynk-colgroup": DefineComponent<LynkColGroupProps>;
 
   /**
    * Color pickers allow the user to select a color.
@@ -2891,19 +2904,6 @@ export type CustomElements = {
    */
   "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
 
-  /**
-   * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Should contain 1 or more `<lynk-col>` components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-colgroup": DefineComponent<LynkColGroupProps>;
-
   /**
    * Comboboxes allow you to choose items from a menu of predefined options.
    * ---
@@ -3029,6 +3029,49 @@ export type CustomElements = {
    */
   "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
 
+  /**
+   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the dialog opens.
+   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
+   * - **ev-hide** - Emitted when the dialog closes.
+   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
+   * - **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+   * - **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dialog.
+   * - **hide()** - Hides the dialog
+   *
+   * ### **Slots:**
+   *  - _default_ - The dialog's main content.
+   * - **label** - The dialog's label. Alternatively, you can use the label prop.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
+   *
+   * ### **CSS Properties:**
+   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
+   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
+   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
+   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   * - **overlay** - The overlay.
+   * - **panel** - The dialog panel (where the dialog and its content is rendered).
+   * - **header** - The dialog header.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **title** - The dialog title.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
+   * - **body** - The dialog body.
+   * - **footer** - The dialog footer.
+   */
+  "lynk-dialog": DefineComponent<LynkDialogProps>;
+
   /**
    * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
@@ -3073,49 +3116,6 @@ 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.
    * ---
@@ -3215,6 +3215,20 @@ export type CustomElements = {
    */
   "lynk-flank": DefineComponent<LynkFlankProps>;
 
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
+
+  /**
+   * Formats a date/time using the specified locale and options.
+   * ---
+   *
+   */
+  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
+
   /**
    * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
    * ---
@@ -3242,20 +3256,6 @@ export type CustomElements = {
    */
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
-
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
-   */
-  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
-
   /**
    * Formats a number using the specified locale and options.
    * ---
@@ -3731,6 +3731,7 @@ export type CustomElements = {
    * - **suffix** - The panels' summary suffix `<slot>`.
    * - **expand-icon** - The expand icon's `<slot>`.
    * - **collapse-icon** - The collapse icon's `<slot>`.
+   * - **subheader** - Optional content displayed below the header, only visible when the panel is expanded.
    * - **footer** - The panels' footer `<slot>`.
    *
    * ### **CSS Properties:**
@@ -3746,6 +3747,7 @@ export type CustomElements = {
    * - **prefix** - The panel header prefix area.
    * - **suffix** - The panel header suffix area.
    * - **toggle-icon** - The expand/collapse toggle icon in the header.
+   * - **subheader** - The panel subheader area, visible only when expanded.
    * - **content** - The panel content.
    * - **footer** - The panel footer.
    */
@@ -3965,6 +3967,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The range's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend an icon or similar element to the range.
+   * - **suffix** - Used to append an icon or similar element to the range.
    * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
    * - **help-tip** - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.
    * - **ticks** - Custom tick markers. Use this to override the default tick rendering.
@@ -3986,6 +3990,8 @@ export type CustomElements = {
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
    * - **wrapper** - The range track wrapper.
    * - **track** - The range track (inactive portion).
    * - **track-active** - The active portion of the track.