@uplynk/lynk-design 1.13.0 → 1.14.0

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

@@ -1,29 +1,29 @@
 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 { 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";
-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 { LynkColorPicker } from "../../components/color-picker/color-picker.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 { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
+import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
-import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
@@ -94,48 +94,12 @@ 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"];
 };
 
-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 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,16 +141,41 @@ 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 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. */
@@ -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"];
@@ -447,6 +447,74 @@ type LynkClockProps = {
 
 type LynkColProps = {};
 
+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 LynkColGroupProps = {};
 
 type LynkComboboxProps = {
@@ -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,62 @@ scenarios. */
   "onev-error"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDatePickerProps = {
+  /** The input's name attribute. */
+  name?: LynkDatePicker["name"];
+  /** The current value in ISO format (YYYY-MM-DD). */
+  value?: LynkDatePicker["value"];
+  /** The input's label. */
+  label?: LynkDatePicker["label"];
+  /** Placeholder text to show when the input is empty. */
+  placeholder?: LynkDatePicker["placeholder"];
+  /** The help text below the input. */
+  "help-text"?: LynkDatePicker["helpText"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkDatePicker["helpTip"];
+  /** Disables the input. */
+  disabled?: LynkDatePicker["disabled"];
+  /** Makes the input readonly. */
+  readonly?: LynkDatePicker["readonly"];
+  /** Makes the input required. */
+  required?: LynkDatePicker["required"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkDatePicker["dirty"];
+  /** Arranges the label inline next to the date picker instead of above it. */
+  inline?: LynkDatePicker["inline"];
+  /** The input's size. */
+  size?: LynkDatePicker["size"];
+  /** The minimum date in ISO format (YYYY-MM-DD). */
+  min?: LynkDatePicker["min"];
+  /** The maximum date in ISO format (YYYY-MM-DD). */
+  max?: LynkDatePicker["max"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: LynkDatePicker["hoist"];
+  /** Adds a clear button when the input is populated. */
+  clearable?: LynkDatePicker["clearable"];
+  /**  */
+  dropdown?: LynkDatePicker["dropdown"];
+  /**  */
+  calendar?: LynkDatePicker["calendar"];
+  /**  */
+  dateInput?: LynkDatePicker["dateInput"];
+  /**  */
+  isOpen?: LynkDatePicker["isOpen"];
+  /** Gets or sets the default value used to reset this element. */
+  defaultValue?: LynkDatePicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkDatePicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkDatePicker["validationMessage"];
+  /** Emitted when the date value changes. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onev-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input is cleared. */
+  "onev-clear"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -791,62 +847,6 @@ type LynkDividerProps = {
   vertical?: LynkDivider["vertical"];
 };
 
-type LynkDatePickerProps = {
-  /** The input's name attribute. */
-  name?: LynkDatePicker["name"];
-  /** The current value in ISO format (YYYY-MM-DD). */
-  value?: LynkDatePicker["value"];
-  /** The input's label. */
-  label?: LynkDatePicker["label"];
-  /** Placeholder text to show when the input is empty. */
-  placeholder?: LynkDatePicker["placeholder"];
-  /** The help text below the input. */
-  "help-text"?: LynkDatePicker["helpText"];
-  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
-  "help-tip"?: LynkDatePicker["helpTip"];
-  /** Disables the input. */
-  disabled?: LynkDatePicker["disabled"];
-  /** Makes the input readonly. */
-  readonly?: LynkDatePicker["readonly"];
-  /** Makes the input required. */
-  required?: LynkDatePicker["required"];
-  /** Adds the dirty indicator mark. */
-  dirty?: LynkDatePicker["dirty"];
-  /** Arranges the label inline next to the date picker instead of above it. */
-  inline?: LynkDatePicker["inline"];
-  /** The input's size. */
-  size?: LynkDatePicker["size"];
-  /** The minimum date in ISO format (YYYY-MM-DD). */
-  min?: LynkDatePicker["min"];
-  /** The maximum date in ISO format (YYYY-MM-DD). */
-  max?: LynkDatePicker["max"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: LynkDatePicker["hoist"];
-  /** Adds a clear button when the input is populated. */
-  clearable?: LynkDatePicker["clearable"];
-  /**  */
-  dropdown?: LynkDatePicker["dropdown"];
-  /**  */
-  calendar?: LynkDatePicker["calendar"];
-  /**  */
-  dateInput?: LynkDatePicker["dateInput"];
-  /**  */
-  isOpen?: LynkDatePicker["isOpen"];
-  /** Gets or sets the default value used to reset this element. */
-  defaultValue?: LynkDatePicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: LynkDatePicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: LynkDatePicker["validationMessage"];
-  /** Emitted when the date value changes. */
-  "onev-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onev-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the input is cleared. */
-  "onev-clear"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -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;
@@ -2462,6 +2464,42 @@ 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.
    * ---
@@ -2499,40 +2537,25 @@ export type CustomElements = {
   "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
    * ### **Slots:**
-   *  - _default_ - The default slot.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
    *
    * ### **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)_
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "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).
-   * ---
-   *
-   *
-   * ### **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.
+   *  - **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.
    * ---
@@ -2827,6 +2829,68 @@ export type CustomElements = {
    */
   "lynk-col": DefineComponent<LynkColProps>;
 
+  /**
+   * Color pickers allow the user to select a color.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-blur** - Emitted when the color picker loses focus.
+   * - **ev-change** - Emitted when the color picker's value changes.
+   * - **ev-focus** - Emitted when the color picker receives focus.
+   * - **ev-input** - Emitted when the color picker receives input.
+   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the color picker.
+   * - **blur()** - Removes focus from the color picker.
+   * - **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.
+   * - **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.
+   *
+   * ### **Slots:**
+   *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
+   *
+   * ### **CSS Properties:**
+   *  - **--grid-width** - The width of the color grid. _(default: undefined)_
+   * - **--grid-height** - The height of the color grid. _(default: undefined)_
+   * - **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_
+   * - **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_
+   * - **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_
+   * - **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **trigger** - The color picker's dropdown trigger.
+   * - **swatches** - The container that holds the swatches.
+   * - **swatch** - Each individual swatch.
+   * - **grid** - The color grid.
+   * - **grid-handle** - The color grid's handle.
+   * - **slider** - Hue and opacity sliders.
+   * - **slider-handle** - Hue and opacity slider handles.
+   * - **hue-slider** - The hue slider.
+   * - **hue-slider-handle** - The hue slider's handle.
+   * - **opacity-slider** - The opacity slider.
+   * - **opacity-slider-handle** - The opacity slider's handle.
+   * - **preview** - The preview color.
+   * - **input** - The text input.
+   * - **eye-dropper-button** - The eye dropper button.
+   * - **eye-dropper-button__base** - The eye dropper button's exported `button` part.
+   * - **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.
+   * - **eye-dropper-button__label** - The eye dropper button's exported `label` part.
+   * - **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.
+   * - **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.
+   * - **format-button** - The format button.
+   * - **format-button__base** - The format button's exported `button` part.
+   * - **format-button__prefix** - The format button's exported `prefix` part.
+   * - **format-button__label** - The format button's exported `label` part.
+   * - **format-button__suffix** - The format button's exported `suffix` part.
+   * - **format-button__caret** - The format button's exported `caret` part.
+   */
+  "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
+
   /**
    * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
    * ---
@@ -2896,68 +2960,6 @@ export type CustomElements = {
    */
   "lynk-combobox": DefineComponent<LynkComboboxProps>;
 
-  /**
-   * Color pickers allow the user to select a color.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-blur** - Emitted when the color picker loses focus.
-   * - **ev-change** - Emitted when the color picker's value changes.
-   * - **ev-focus** - Emitted when the color picker receives focus.
-   * - **ev-input** - Emitted when the color picker receives input.
-   * - **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the color picker.
-   * - **blur()** - Removes focus from the color picker.
-   * - **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.
-   * - **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.
-   *
-   * ### **Slots:**
-   *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
-   *
-   * ### **CSS Properties:**
-   *  - **--grid-width** - The width of the color grid. _(default: undefined)_
-   * - **--grid-height** - The height of the color grid. _(default: undefined)_
-   * - **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_
-   * - **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_
-   * - **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_
-   * - **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **trigger** - The color picker's dropdown trigger.
-   * - **swatches** - The container that holds the swatches.
-   * - **swatch** - Each individual swatch.
-   * - **grid** - The color grid.
-   * - **grid-handle** - The color grid's handle.
-   * - **slider** - Hue and opacity sliders.
-   * - **slider-handle** - Hue and opacity slider handles.
-   * - **hue-slider** - The hue slider.
-   * - **hue-slider-handle** - The hue slider's handle.
-   * - **opacity-slider** - The opacity slider.
-   * - **opacity-slider-handle** - The opacity slider's handle.
-   * - **preview** - The preview color.
-   * - **input** - The text input.
-   * - **eye-dropper-button** - The eye dropper button.
-   * - **eye-dropper-button__base** - The eye dropper button's exported `button` part.
-   * - **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.
-   * - **eye-dropper-button__label** - The eye dropper button's exported `label` part.
-   * - **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.
-   * - **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.
-   * - **format-button** - The format button.
-   * - **format-button__base** - The format button's exported `button` part.
-   * - **format-button__prefix** - The format button's exported `prefix` part.
-   * - **format-button__label** - The format button's exported `label` part.
-   * - **format-button__suffix** - The format button's exported `suffix` part.
-   * - **format-button__caret** - The format button's exported `caret` part.
-   */
-  "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
-
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2988,6 +2990,45 @@ export type CustomElements = {
    */
   "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
 
+  /**
+   * A date picker that combines calendar component with accessible input field.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-change** - Emitted when the date value changes.
+   * - **ev-input** - Emitted when the control receives input.
+   * - **ev-clear** - Emitted when the input is cleared.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown.
+   * - **hide()** - Hides the dropdown.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the date input.
+   * - **blur()** - Removes focus from the input.
+   * - **checkValidity()** - Checks for validity but does not show a validation message.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the label prop.
+   * - **help-text** - Help text that describes how to use the input.
+   * - **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **form-control** - The form control wrapper.
+   * - **form-control-label** - The label wrapper.
+   * - **form-control-input** - The input wrapper.
+   * - **form-control-help-text** - The help text wrapper.
+   * - **input-group** - The input group container.
+   * - **date-input** - The date input field.
+   * - **trigger** - The dropdown trigger button.
+   * - **dropdown** - The dropdown panel.
+   * - **calendar** - The calendar component.
+   */
+  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
+
   /**
    * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
@@ -3087,45 +3128,6 @@ export type CustomElements = {
    */
   "lynk-divider": DefineComponent<LynkDividerProps>;
 
-  /**
-   * A date picker that combines calendar component with accessible input field.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-change** - Emitted when the date value changes.
-   * - **ev-input** - Emitted when the control receives input.
-   * - **ev-clear** - Emitted when the input is cleared.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dropdown.
-   * - **hide()** - Hides the dropdown.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the date input.
-   * - **blur()** - Removes focus from the input.
-   * - **checkValidity()** - Checks for validity but does not show a validation message.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message.
-   *
-   * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the label prop.
-   * - **help-text** - Help text that describes how to use the input.
-   * - **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **form-control** - The form control wrapper.
-   * - **form-control-label** - The label wrapper.
-   * - **form-control-input** - The input wrapper.
-   * - **form-control-help-text** - The help text wrapper.
-   * - **input-group** - The input group container.
-   * - **date-input** - The date input field.
-   * - **trigger** - The dropdown trigger button.
-   * - **dropdown** - The dropdown panel.
-   * - **calendar** - The calendar component.
-   */
-  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
-
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -4290,7 +4292,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 +4306,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.