@uplynk/lynk-design 1.13.0 → 1.15.0

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

@@ -2,34 +2,34 @@ 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 { LynkAutoGrid } from "../../components/auto-grid/auto-grid.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";
-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 { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { LynkButton } from "../../components/button/button.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";
 import type { LynkCol } from "../../components/col/col.component.js";
+import type { LynkClock } from "../../components/clock/clock.component.js";
 import type { LynkColGroup } from "../../components/colgroup/colgroup.component.js";
-import type { LynkCombobox } from "../../components/combobox/combobox.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 { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
+import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
-import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
-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";
@@ -94,9 +94,9 @@ import type { LynkWisp } from "../../components/wisp/wisp.component.js";
 type LynkAccordionProps = {
   /** Allow multiple panels to be open at the same time or automatically collapse other panels */
   multiple?: LynkAccordion["multiple"];
-  /** Allow multiple panels to be open at the same time or automatically collapse other panels */
+  /** Control the visual density of the accordion */
   density?: LynkAccordion["density"];
-  /** Allow multiple panels to be open at the same time or automatically collapse other panels */
+  /** Control the border radius shape of the accordion panels */
   shape?: LynkAccordion["shape"];
 };
 
@@ -127,15 +127,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 LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -177,17 +168,15 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkBadgeProps = {
-  /** The badge's variant. */
-  type?: LynkBadge["type"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: LynkBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: LynkBadge["pulse"];
+type 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 LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -204,6 +193,17 @@ type LynkAvatarProps = {
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkBadgeProps = {
+  /** The badge's variant. */
+  type?: LynkBadge["type"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: LynkBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: LynkBadge["pulse"];
+};
+
+type LynkBoxProps = {};
+
 type LynkBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -226,18 +226,6 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: LynkBreadcrumbItem["defaultSlot"];
 };
 
-type LynkButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: LynkButtonGroup["label"];
-  /** Add a gap between buttons so they appear like a cluster of buttons instead of a flush group */
-  gapped?: LynkButtonGroup["gapped"];
-  /**  */
-  defaultSlot?: LynkButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: LynkButtonGroup["disableRole"];
-};
-
 type LynkButtonProps = {
   /**  */
   title?: LynkButton["title"];
@@ -320,6 +308,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"];
@@ -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,10 +447,76 @@ 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
+in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
+data. */
+  value?: LynkColorPicker["value"];
+  /** The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
+display HTML, you can use the `label` slot` instead. */
+  label?: LynkColorPicker["label"];
+  /** The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
+picker will accept user input in any format (including CSS color names) and convert it to the desired format. */
+  format?: LynkColorPicker["format"];
+  /** Renders the color picker inline rather than in a dropdown. */
+  inline?: LynkColorPicker["inline"];
+  /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
+  size?: LynkColorPicker["size"];
+  /** Removes the button that lets users toggle between format. */
+  "no-format-toggle"?: LynkColorPicker["noFormatToggle"];
+  /** The name of the form control, submitted as a name/value pair with form data. */
+  name?: LynkColorPicker["name"];
+  /** Disables the color picker. */
+  disabled?: LynkColorPicker["disabled"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: LynkColorPicker["hoist"];
+  /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
+  opacity?: LynkColorPicker["opacity"];
+  /** By default, values are lowercase. With this attribute, values will be uppercase instead. */
+  uppercase?: LynkColorPicker["uppercase"];
+  /** One or more predefined color swatches to display as presets in the color picker. Can include any format the color
+picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
+semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript. */
+  swatches?: LynkColorPicker["swatches"];
+  /** When enabled with swatches, hides the color grid and user input controls, showing only the swatches. */
+  "swatches-only"?: LynkColorPicker["swatchesOnly"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: LynkColorPicker["form"];
+  /** Makes the color picker a required field. */
+  required?: LynkColorPicker["required"];
+  /**  */
+  base?: LynkColorPicker["base"];
+  /**  */
+  input?: LynkColorPicker["input"];
+  /**  */
+  dropdown?: LynkColorPicker["dropdown"];
+  /**  */
+  previewButton?: LynkColorPicker["previewButton"];
+  /**  */
+  trigger?: LynkColorPicker["trigger"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: LynkColorPicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkColorPicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkColorPicker["validationMessage"];
+  /** Emitted when the color picker loses focus. */
+  "onev-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the color picker's value changes. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the color picker receives focus. */
+  "onev-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the color picker receives input. */
+  "onev-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onev-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: LynkCombobox["name"];
@@ -553,74 +621,6 @@ The default filter method is a case- and diacritic-insensitive string comparison
   "onev-add-option"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkColorPickerProps = {
-  /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
-in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
-data. */
-  value?: LynkColorPicker["value"];
-  /** The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
-display HTML, you can use the `label` slot` instead. */
-  label?: LynkColorPicker["label"];
-  /** The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
-picker will accept user input in any format (including CSS color names) and convert it to the desired format. */
-  format?: LynkColorPicker["format"];
-  /** Renders the color picker inline rather than in a dropdown. */
-  inline?: LynkColorPicker["inline"];
-  /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
-  size?: LynkColorPicker["size"];
-  /** Removes the button that lets users toggle between format. */
-  "no-format-toggle"?: LynkColorPicker["noFormatToggle"];
-  /** The name of the form control, submitted as a name/value pair with form data. */
-  name?: LynkColorPicker["name"];
-  /** Disables the color picker. */
-  disabled?: LynkColorPicker["disabled"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: LynkColorPicker["hoist"];
-  /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
-  opacity?: LynkColorPicker["opacity"];
-  /** By default, values are lowercase. With this attribute, values will be uppercase instead. */
-  uppercase?: LynkColorPicker["uppercase"];
-  /** One or more predefined color swatches to display as presets in the color picker. Can include any format the color
-picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
-semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript. */
-  swatches?: LynkColorPicker["swatches"];
-  /** When enabled with swatches, hides the color grid and user input controls, showing only the swatches. */
-  "swatches-only"?: LynkColorPicker["swatchesOnly"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: LynkColorPicker["form"];
-  /** Makes the color picker a required field. */
-  required?: LynkColorPicker["required"];
-  /**  */
-  base?: LynkColorPicker["base"];
-  /**  */
-  input?: LynkColorPicker["input"];
-  /**  */
-  dropdown?: LynkColorPicker["dropdown"];
-  /**  */
-  previewButton?: LynkColorPicker["previewButton"];
-  /**  */
-  trigger?: LynkColorPicker["trigger"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: LynkColorPicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: LynkColorPicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: LynkColorPicker["validationMessage"];
-  /** Emitted when the color picker loses focus. */
-  "onev-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the color picker's value changes. */
-  "onev-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the color picker receives focus. */
-  "onev-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the color picker receives input. */
-  "onev-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onev-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkCopyButtonProps = {
   /** The text value to copy. */
   value?: LynkCopyButton["value"];
@@ -663,6 +663,96 @@ scenarios. */
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDatePickerProps = {
+  /** The input's name attribute. */
+  name?: LynkDatePicker["name"];
+  /** The current value in ISO format (YYYY-MM-DD). */
+  value?: LynkDatePicker["value"];
+  /** The input's label. */
+  label?: LynkDatePicker["label"];
+  /** Placeholder text to show when the input is empty. */
+  placeholder?: LynkDatePicker["placeholder"];
+  /** The help text below the input. */
+  "help-text"?: LynkDatePicker["helpText"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkDatePicker["helpTip"];
+  /** Disables the input. */
+  disabled?: LynkDatePicker["disabled"];
+  /** Makes the input readonly. */
+  readonly?: LynkDatePicker["readonly"];
+  /** Makes the input required. */
+  required?: LynkDatePicker["required"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkDatePicker["dirty"];
+  /** Arranges the label inline next to the date picker instead of above it. */
+  inline?: LynkDatePicker["inline"];
+  /** The input's size. */
+  size?: LynkDatePicker["size"];
+  /** The minimum date in ISO format (YYYY-MM-DD). */
+  min?: LynkDatePicker["min"];
+  /** The maximum date in ISO format (YYYY-MM-DD). */
+  max?: LynkDatePicker["max"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: LynkDatePicker["hoist"];
+  /** Adds a clear button when the input is populated. */
+  clearable?: LynkDatePicker["clearable"];
+  /**  */
+  dropdown?: LynkDatePicker["dropdown"];
+  /**  */
+  calendar?: LynkDatePicker["calendar"];
+  /**  */
+  dateInput?: LynkDatePicker["dateInput"];
+  /**  */
+  isOpen?: LynkDatePicker["isOpen"];
+  /** Gets or sets the default value used to reset this element. */
+  defaultValue?: LynkDatePicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkDatePicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkDatePicker["validationMessage"];
+  /** Emitted when the date value changes. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onev-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input is cleared. */
+  "onev-clear"?: (e: CustomEvent<never>) => void;
+};
+
+type 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"];
@@ -752,101 +842,11 @@ 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 LynkDatePickerProps = {
-  /** The input's name attribute. */
-  name?: LynkDatePicker["name"];
-  /** The current value in ISO format (YYYY-MM-DD). */
-  value?: LynkDatePicker["value"];
-  /** The input's label. */
-  label?: LynkDatePicker["label"];
-  /** Placeholder text to show when the input is empty. */
-  placeholder?: LynkDatePicker["placeholder"];
-  /** The help text below the input. */
-  "help-text"?: LynkDatePicker["helpText"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkDatePicker["helpTip"];
-  /** Disables the input. */
-  disabled?: LynkDatePicker["disabled"];
-  /** Makes the input readonly. */
-  readonly?: LynkDatePicker["readonly"];
-  /** Makes the input required. */
-  required?: LynkDatePicker["required"];
-  /** Adds the dirty indicator mark. */
-  dirty?: LynkDatePicker["dirty"];
-  /** Arranges the label inline next to the date picker instead of above it. */
-  inline?: LynkDatePicker["inline"];
-  /** The input's size. */
-  size?: LynkDatePicker["size"];
-  /** The minimum date in ISO format (YYYY-MM-DD). */
-  min?: LynkDatePicker["min"];
-  /** The maximum date in ISO format (YYYY-MM-DD). */
-  max?: LynkDatePicker["max"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: LynkDatePicker["hoist"];
-  /** Adds a clear button when the input is populated. */
-  clearable?: LynkDatePicker["clearable"];
-  /**  */
-  dropdown?: LynkDatePicker["dropdown"];
-  /**  */
-  calendar?: LynkDatePicker["calendar"];
-  /**  */
-  dateInput?: LynkDatePicker["dateInput"];
-  /**  */
-  isOpen?: LynkDatePicker["isOpen"];
-  /** Gets or sets the default value used to reset this element. */
-  defaultValue?: LynkDatePicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: LynkDatePicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: LynkDatePicker["validationMessage"];
-  /** Emitted when the date value changes. */
-  "onev-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onev-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the input is cleared. */
-  "onev-clear"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -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"];
@@ -2077,6 +2077,8 @@ setting the attribute to an empty string or a value of your choice, respectively
 type LynkTabGroupProps = {
   /** The placement of the tabs. */
   placement?: LynkTabGroup["placement"];
+  /** The visual appearance of the tabs. */
+  appearance?: LynkTabGroup["appearance"];
   /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
 manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
   activation?: LynkTabGroup["activation"];
@@ -2092,7 +2094,7 @@ manual, the tab will receive focus but will not show until the user presses spac
   nav?: LynkTabGroup["nav"];
   /**  */
   indicator?: LynkTabGroup["indicator"];
-  /** Emitted when a tab is shown. */
+  /** Emitted when a tab is shown. Calling `event.preventDefault()` will prevent the tab from being shown, allowing you to handle scenarios like unsaved changes before navigating away. */
   "onev-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
   /** Emitted when a tab is hidden. */
   "onev-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
@@ -2498,6 +2500,25 @@ 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.
    * ---
@@ -2516,23 +2537,25 @@ export type CustomElements = {
   "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **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.
+   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - _default_ - The 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.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "lynk-animation": DefineComponent<LynkAnimationProps>;
+  "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2577,27 +2600,6 @@ export type CustomElements = {
    */
   "lynk-box": DefineComponent<LynkBoxProps>;
 
-  /**
-   * Avatars are used to represent a person or object.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
-   * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
-   */
-  "lynk-avatar": DefineComponent<LynkAvatarProps>;
-
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -2632,19 +2634,6 @@ export type CustomElements = {
    */
   "lynk-breadcrumb-item": DefineComponent<LynkBreadcrumbItemProps>;
 
-  /**
-   * Button groups can be used to group related buttons into sections.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
-
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2679,6 +2668,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.
    * ---
@@ -2791,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.
    * ---
@@ -2820,13 +2829,6 @@ export type CustomElements = {
    */
   "lynk-clock": DefineComponent<LynkClockProps>;
 
-  /**
-   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
-   * ---
-   *
-   */
-  "lynk-col": DefineComponent<LynkColProps>;
-
   /**
    * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
    * ---
@@ -2840,62 +2842,6 @@ export type CustomElements = {
    */
   "lynk-colgroup": DefineComponent<LynkColGroupProps>;
 
-  /**
-   * Comboboxes allow you to choose items from a menu of predefined options.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-change** - Emitted when the control's value changes.
-   * - **ev-clear** - Emitted when the control's value is cleared.
-   * - **ev-input** - Emitted when the control receives input.
-   * - **ev-focus** - Emitted when the control gains focus.
-   * - **ev-blur** - Emitted when the control loses focus.
-   * - **ev-show** - Emitted when the combobox's menu opens.
-   * - **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.
-   * - **ev-hide** - Emitted when the combobox's menu closes.
-   * - **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.
-   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   * - **ev-error** - Emitted when the combobox menu fails to open.
-   * - **ev-add-option** - Emitted when a custom option is added via allowCustomValues.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no
-   * appropriate filtered options, a ev-error is emitted and the listbox stays closed.
-   * - **hide()** - Hides the listbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message.
-   * Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
-   * - **blur()** - Removes focus from the control.
-   *
-   * ### **Slots:**
-   *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.
-   * - **label** - The combobox's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
-   * - **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, combobox, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The combobox's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
-   * - **listbox** - The listbox container where the options are slotted and the filtered options list exists.
-   * - **filtered-listbox** - The container that wraps the filtered options.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
-   */
-  "lynk-combobox": DefineComponent<LynkComboboxProps>;
-
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2958,6 +2904,62 @@ export type CustomElements = {
    */
   "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
 
+  /**
+   * Comboboxes allow you to choose items from a menu of predefined options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-change** - Emitted when the control's value changes.
+   * - **ev-clear** - Emitted when the control's value is cleared.
+   * - **ev-input** - Emitted when the control receives input.
+   * - **ev-focus** - Emitted when the control gains focus.
+   * - **ev-blur** - Emitted when the control loses focus.
+   * - **ev-show** - Emitted when the combobox's menu opens.
+   * - **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.
+   * - **ev-hide** - Emitted when the combobox's menu closes.
+   * - **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.
+   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **ev-error** - Emitted when the combobox menu fails to open.
+   * - **ev-add-option** - Emitted when a custom option is added via allowCustomValues.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no
+   * appropriate filtered options, a ev-error is emitted and the listbox stays closed.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message.
+   * Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.
+   * - **label** - The combobox's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+   * - **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, combobox, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The combobox's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **listbox** - The listbox container where the options are slotted and the filtered options list exists.
+   * - **filtered-listbox** - The container that wraps the filtered options.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   */
+  "lynk-combobox": DefineComponent<LynkComboboxProps>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2989,12 +2991,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.
    *
@@ -3021,16 +3023,11 @@ 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>;
 
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -3076,24 +3073,12 @@ 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>;
-
-  /**
-   * 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.
    *
@@ -3120,11 +3105,28 @@ 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>;
+  "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
+
+  /**
+   * 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.
@@ -3213,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.
    * ---
@@ -3240,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.
    * ---
@@ -3729,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:**
@@ -3744,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.
    */
@@ -3963,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.
@@ -3984,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.
@@ -4290,7 +4298,7 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **ev-tab-show** - Emitted when a tab is shown.
+   *  - **ev-tab-show** - Emitted when a tab is shown. Calling `event.preventDefault()` will prevent the tab from being shown, allowing you to handle scenarios like unsaved changes before navigating away.
    * - **ev-tab-hide** - Emitted when a tab is hidden.
    *
    * ### **Methods:**
@@ -4304,6 +4312,9 @@ export type CustomElements = {
    *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
    * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
    * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   * - **--pill-background** - The background color of the pill container when appearance is pill. _(default: undefined)_
+   * - **--pill-active-background** - The background color of the active pill tab. _(default: undefined)_
+   * - **--pill-active-color** - The text color of the active pill tab. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.