@uplynk/lynk-design 1.14.0 → 1.16.0

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

@@ -1,9 +1,9 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
-import type { 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 { LynkAnimation } from "../../components/animation/animation.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";
@@ -16,20 +16,20 @@ 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 { LynkColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { LynkCombobox } from "../../components/combobox/combobox.component.js";
-import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
+import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
-import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { 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";
@@ -83,8 +83,8 @@ import type { LynkTextarea } from "../../components/textarea/textarea.component.
 import type { LynkTh } from "../../components/th/th.component.js";
 import type { LynkThead } from "../../components/thead/thead.component.js";
 import type { LynkTimePicker } from "../../components/time-picker/time-picker.component.js";
-import type { LynkTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { LynkTr } from "../../components/tr/tr.component.js";
+import type { LynkTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { LynkTree } from "../../components/tree/tree.component.js";
 import type { LynkTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { LynkTruncate } from "../../components/truncate/truncate.component.js";
@@ -100,6 +100,42 @@ type LynkAccordionProps = {
   shape?: LynkAccordion["shape"];
 };
 
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to each-other */
+  "min-size"?: LynkAutoGrid["minSize"];
+  /** The space between auto-grid items. Use spacing tokens or any custom size. */
+  gap?: LynkAutoGrid["gap"];
+};
+
+type LynkAlertProps = {
+  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+  open?: LynkAlert["open"];
+  /** Makes the alert closable. */
+  closable?: LynkAlert["closable"];
+  /** The alert's type (color). */
+  type?: LynkAlert["type"];
+  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
+the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
+  duration?: LynkAlert["duration"];
+  /** Enables a countdown that indicates the remaining time the alert will be displayed.
+Typically used to indicate the remaining time before a whole app refresh. */
+  countdown?: LynkAlert["countdown"];
+  /**  */
+  base?: LynkAlert["base"];
+  /**  */
+  countdownElement?: LynkAlert["countdownElement"];
+  /** Emitted when the alert opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the alert closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -141,42 +177,6 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkAutoGridProps = {
-  /** How to justify auto-grid items */
-  "auto-size"?: LynkAutoGrid["autoSize"];
-  /** How to align auto-grid items to each-other */
-  "min-size"?: LynkAutoGrid["minSize"];
-  /** The space between auto-grid items. Use spacing tokens or any custom size. */
-  gap?: LynkAutoGrid["gap"];
-};
-
-type LynkAlertProps = {
-  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-  open?: LynkAlert["open"];
-  /** Makes the alert closable. */
-  closable?: LynkAlert["closable"];
-  /** The alert's type (color). */
-  type?: LynkAlert["type"];
-  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
-  duration?: LynkAlert["duration"];
-  /** Enables a countdown that indicates the remaining time the alert will be displayed.
-Typically used to indicate the remaining time before a whole app refresh. */
-  countdown?: LynkAlert["countdown"];
-  /**  */
-  base?: LynkAlert["base"];
-  /**  */
-  countdownElement?: LynkAlert["countdownElement"];
-  /** Emitted when the alert opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the alert closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -447,6 +447,8 @@ type LynkClockProps = {
 
 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
@@ -455,6 +457,16 @@ data. */
   /** 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 help text below the color picker. Alternatively, you can use the `help-text` slot. */
+  "help-text"?: LynkColorPicker["helpText"];
+  /** The help tooltip appended to the label. Alternatively, you can use the `help-tip` slot. */
+  "help-tip"?: LynkColorPicker["helpTip"];
+  /** The color picker's styled validity state. */
+  state?: LynkColorPicker["state"];
+  /** Adds the dirty indicator mark. */
+  dirty?: LynkColorPicker["dirty"];
+  /** Arranges the label inline next to the color picker instead of above it. */
+  "label-inline"?: LynkColorPicker["labelInline"];
   /** 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"];
@@ -473,6 +485,8 @@ picker will accept user input in any format (including CSS color names) and conv
   hoist?: LynkColorPicker["hoist"];
   /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
   opacity?: LynkColorPicker["opacity"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport. */
+  placement?: LynkColorPicker["placement"];
   /** 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
@@ -515,8 +529,6 @@ the same document or shadow root for this to work. */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkColGroupProps = {};
-
 type LynkComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: LynkCombobox["name"];
@@ -621,48 +633,6 @@ The default filter method is a case- and diacritic-insensitive string comparison
   "onev-add-option"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkCopyButtonProps = {
-  /** The text value to copy. */
-  value?: LynkCopyButton["value"];
-  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
-present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
-attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
-append a dot and the property name, e.g. `from="el.value"`. */
-  from?: LynkCopyButton["from"];
-  /** Disables the copy button. */
-  disabled?: LynkCopyButton["disabled"];
-  /** A custom label to show in the tooltip. */
-  "copy-label"?: LynkCopyButton["copyLabel"];
-  /** A custom label to show in the tooltip after copying. */
-  "success-label"?: LynkCopyButton["successLabel"];
-  /** A custom label to show in the tooltip when a copy error occurs. */
-  "error-label"?: LynkCopyButton["errorLabel"];
-  /** The length of time to show feedback before restoring the default trigger. */
-  "feedback-duration"?: LynkCopyButton["feedbackDuration"];
-  /** The preferred placement of the tooltip. */
-  "tooltip-placement"?: LynkCopyButton["tooltipPlacement"];
-  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios. */
-  hoist?: LynkCopyButton["hoist"];
-  /**  */
-  copyIcon?: LynkCopyButton["copyIcon"];
-  /**  */
-  successIcon?: LynkCopyButton["successIcon"];
-  /**  */
-  errorIcon?: LynkCopyButton["errorIcon"];
-  /**  */
-  tooltip?: LynkCopyButton["tooltip"];
-  /**  */
-  isCopying?: LynkCopyButton["isCopying"];
-  /**  */
-  status?: LynkCopyButton["status"];
-  /** Emitted when the data has been copied. */
-  "onev-copy"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the data could not be copied. */
-  "onev-error"?: (e: CustomEvent<never>) => void;
-};
-
 type LynkDatePickerProps = {
   /** The input's name attribute. */
   name?: LynkDatePicker["name"];
@@ -719,6 +689,48 @@ type LynkDatePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkCopyButtonProps = {
+  /** The text value to copy. */
+  value?: LynkCopyButton["value"];
+  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
+present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
+attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
+append a dot and the property name, e.g. `from="el.value"`. */
+  from?: LynkCopyButton["from"];
+  /** Disables the copy button. */
+  disabled?: LynkCopyButton["disabled"];
+  /** A custom label to show in the tooltip. */
+  "copy-label"?: LynkCopyButton["copyLabel"];
+  /** A custom label to show in the tooltip after copying. */
+  "success-label"?: LynkCopyButton["successLabel"];
+  /** A custom label to show in the tooltip when a copy error occurs. */
+  "error-label"?: LynkCopyButton["errorLabel"];
+  /** The length of time to show feedback before restoring the default trigger. */
+  "feedback-duration"?: LynkCopyButton["feedbackDuration"];
+  /** The preferred placement of the tooltip. */
+  "tooltip-placement"?: LynkCopyButton["tooltipPlacement"];
+  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios. */
+  hoist?: LynkCopyButton["hoist"];
+  /**  */
+  copyIcon?: LynkCopyButton["copyIcon"];
+  /**  */
+  successIcon?: LynkCopyButton["successIcon"];
+  /**  */
+  errorIcon?: LynkCopyButton["errorIcon"];
+  /**  */
+  tooltip?: LynkCopyButton["tooltip"];
+  /**  */
+  isCopying?: LynkCopyButton["isCopying"];
+  /**  */
+  status?: LynkCopyButton["status"];
+  /** Emitted when the data has been copied. */
+  "onev-copy"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the data could not be copied. */
+  "onev-error"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -938,37 +950,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 +988,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"];
@@ -2321,6 +2333,17 @@ type LynkTimePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkTrProps = {
+  /** Draws the table row using status colors */
+  state?: LynkTr["state"];
+  /** Determines whether to highlight the table row on hover or touch interactions */
+  interactive?: LynkTr["interactive"];
+  /** Draws the table row in a highlighted state */
+  active?: LynkTr["active"];
+  /** Pulse the status colors for increased visibility */
+  pulse?: LynkTr["pulse"];
+};
+
 type LynkTooltipProps = {
   /** The tooltip's content. If you need to display HTML, you can use the `content` slot instead. */
   content?: LynkTooltip["content"];
@@ -2360,17 +2383,6 @@ programmatically. */
   "onev-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkTrProps = {
-  /** Draws the table row using status colors */
-  state?: LynkTr["state"];
-  /** Determines whether to highlight the table row on hover or touch interactions */
-  interactive?: LynkTr["interactive"];
-  /** Draws the table row in a highlighted state */
-  active?: LynkTr["active"];
-  /** Pulse the status colors for increased visibility */
-  pulse?: LynkTr["pulse"];
-};
-
 type LynkTreeProps = {
   /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
 displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
@@ -2464,25 +2476,6 @@ export type CustomElements = {
    */
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
-  /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-cancel** - Emitted when the animation is canceled.
-   * - **ev-finish** - Emitted when the animation finishes.
-   * - **ev-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
-   *
-   * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
-   */
-  "lynk-animation": DefineComponent<LynkAnimationProps>;
-
   /**
    * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
@@ -2536,6 +2529,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>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2829,6 +2841,19 @@ export type CustomElements = {
    */
   "lynk-col": DefineComponent<LynkColProps>;
 
+  /**
+   * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Should contain 1 or more `<lynk-col>` components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-colgroup": DefineComponent<LynkColGroupProps>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2852,6 +2877,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Help text that describes how to use the color picker.
+   * - **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 color picker. Alternatively, you can use the `help-tip` attribute.
    *
    * ### **CSS Properties:**
    *  - **--grid-width** - The width of the color grid. _(default: undefined)_
@@ -2891,19 +2918,6 @@ export type CustomElements = {
    */
   "lynk-color-picker": DefineComponent<LynkColorPickerProps>;
 
-  /**
-   * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Should contain 1 or more `<lynk-col>` components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-colgroup": DefineComponent<LynkColGroupProps>;
-
   /**
    * Comboboxes allow you to choose items from a menu of predefined options.
    * ---
@@ -2960,36 +2974,6 @@ export type CustomElements = {
    */
   "lynk-combobox": DefineComponent<LynkComboboxProps>;
 
-  /**
-   * Copies text data to the clipboard when the user clicks the trigger.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-copy** - Emitted when the data has been copied.
-   * - **ev-error** - Emitted when the data could not be copied.
-   *
-   * ### **Slots:**
-   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.
-   * - **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.
-   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
-   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **button** - The internal `<button>` element.
-   * - **copy-icon** - The container that holds the copy icon.
-   * - **success-icon** - The container that holds the success icon.
-   * - **error-icon** - The container that holds the error icon.
-   * - **tooltip__base** - The tooltip's exported `base` part.
-   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
-   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
-   * - **tooltip__body** - The tooltip's exported `body` part.
-   */
-  "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
-
   /**
    * A date picker that combines calendar component with accessible input field.
    * ---
@@ -3029,6 +3013,36 @@ export type CustomElements = {
    */
   "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
 
+  /**
+   * Copies text data to the clipboard when the user clicks the trigger.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-copy** - Emitted when the data has been copied.
+   * - **ev-error** - Emitted when the data could not be copied.
+   *
+   * ### **Slots:**
+   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.
+   * - **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.
+   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
+   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The internal `<button>` element.
+   * - **copy-icon** - The container that holds the copy icon.
+   * - **success-icon** - The container that holds the success icon.
+   * - **error-icon** - The container that holds the error icon.
+   * - **tooltip__base** - The tooltip's exported `base` part.
+   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
+   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
+   * - **tooltip__body** - The tooltip's exported `body` part.
+   */
+  "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.
    * ---
@@ -3215,6 +3229,20 @@ export type CustomElements = {
    */
   "lynk-flank": DefineComponent<LynkFlankProps>;
 
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
+
+  /**
+   * Formats a date/time using the specified locale and options.
+   * ---
+   *
+   */
+  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
+
   /**
    * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
    * ---
@@ -3242,20 +3270,6 @@ export type CustomElements = {
    */
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
-
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
-   */
-  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
-
   /**
    * Formats a number using the specified locale and options.
    * ---
@@ -3731,6 +3745,7 @@ export type CustomElements = {
    * - **suffix** - The panels' summary suffix `<slot>`.
    * - **expand-icon** - The expand icon's `<slot>`.
    * - **collapse-icon** - The collapse icon's `<slot>`.
+   * - **subheader** - Optional content displayed below the header, only visible when the panel is expanded.
    * - **footer** - The panels' footer `<slot>`.
    *
    * ### **CSS Properties:**
@@ -3746,6 +3761,7 @@ export type CustomElements = {
    * - **prefix** - The panel header prefix area.
    * - **suffix** - The panel header suffix area.
    * - **toggle-icon** - The expand/collapse toggle icon in the header.
+   * - **subheader** - The panel subheader area, visible only when expanded.
    * - **content** - The panel content.
    * - **footer** - The panel footer.
    */
@@ -3965,6 +3981,8 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - **label** - The range's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend an icon or similar element to the range.
+   * - **suffix** - Used to append an icon or similar element to the range.
    * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
    * - **help-tip** - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.
    * - **ticks** - Custom tick markers. Use this to override the default tick rendering.
@@ -3986,6 +4004,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.
@@ -4493,6 +4513,19 @@ export type CustomElements = {
    */
   "lynk-time-picker": DefineComponent<LynkTimePickerProps>;
 
+  /**
+   * Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-tr": DefineComponent<LynkTrProps>;
+
   /**
    * Tooltips display additional information based on a specific action.
    * ---
@@ -4525,19 +4558,6 @@ export type CustomElements = {
    */
   "lynk-tooltip": DefineComponent<LynkTooltipProps>;
 
-  /**
-   * Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-tr": DefineComponent<LynkTrProps>;
-
   /**
    * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
    * ---