@uplynk/lynk-design 1.18.1 → 1.19.1

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

@@ -4,10 +4,10 @@ import type { LynkAccordion } from "../../components/accordion/accordion.compone
 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 { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.component.js";
 import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { LynkAnimation } from "../../components/animation/animation.component.js";
+import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { LynkButton } from "../../components/button/button.component.js";
 import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
@@ -21,10 +21,10 @@ import type { LynkColorPicker } from "../../components/color-picker/color-picker
 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 { LynkDialog } from "../../components/dialog/dialog.component.js";
-import type { LynkDrawer } from "../../components/drawer/drawer.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";
@@ -136,39 +136,18 @@ type LynkBadgeProps = {
   pulse?: LynkBadge["pulse"];
 };
 
-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 alert's visual appearance. */
-  appearance?: LynkAlert["appearance"];
-  /** The alert's size. */
-  size?: LynkAlert["size"];
-  /** 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"];
+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. */
+  label?: LynkBreadcrumb["label"];
   /**  */
-  base?: LynkAlert["base"];
+  defaultSlot?: LynkBreadcrumb["defaultSlot"];
   /**  */
-  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;
+  separatorSlot?: LynkBreadcrumb["separatorSlot"];
 };
 
-type LynkBoxProps = {};
-
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -210,14 +189,35 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-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. */
-  label?: LynkBreadcrumb["label"];
+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 alert's visual appearance. */
+  appearance?: LynkAlert["appearance"];
+  /** The alert's size. */
+  size?: LynkAlert["size"];
+  /** 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"];
   /**  */
-  defaultSlot?: LynkBreadcrumb["defaultSlot"];
+  base?: LynkAlert["base"];
   /**  */
-  separatorSlot?: LynkBreadcrumb["separatorSlot"];
+  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 LynkBreadcrumbItemProps = {
@@ -774,78 +774,6 @@ type LynkDatePickerProps = {
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkDialogProps = {
-  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
-  open?: LynkDialog["open"];
-  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
-`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
-  label?: LynkDialog["label"];
-  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the dialog. */
-  "no-header"?: LynkDialog["noHeader"];
-  /** The dialog's size. */
-  size?: LynkDialog["size"];
-  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping. */
-  modal?: LynkDialog["modal"];
-  /**  */
-  dialog?: LynkDialog["dialog"];
-  /**  */
-  panel?: LynkDialog["panel"];
-  /**  */
-  overlay?: LynkDialog["overlay"];
-  /** Emitted when the dialog opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
-  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
-  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
-};
-
-type 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. */
-  open?: LynkDrawer["open"];
-  /** The drawer'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, you can use the `label` slot
-instead. */
-  label?: LynkDrawer["label"];
-  /** The direction from which the drawer will open. */
-  placement?: LynkDrawer["placement"];
-  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-its parent element, set this prop and add `position: relative` to the parent. */
-  contained?: LynkDrawer["contained"];
-  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the drawer. */
-  "no-header"?: LynkDrawer["noHeader"];
-  /** 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?: LynkDrawer["modal"];
-  /**  */
-  drawer?: LynkDrawer["drawer"];
-  /**  */
-  panel?: LynkDrawer["panel"];
-  /**  */
-  overlay?: LynkDrawer["overlay"];
-  /** Emitted when the drawer opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer 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"];
@@ -941,11 +869,83 @@ inside of the viewport. */
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkDialogProps = {
+  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
+  open?: LynkDialog["open"];
+  /** The dialog's label as displayed in the header. You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkDialog["label"];
+  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the dialog. */
+  "no-header"?: LynkDialog["noHeader"];
+  /** The dialog's size. */
+  size?: LynkDialog["size"];
+  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping. */
+  modal?: LynkDialog["modal"];
+  /**  */
+  dialog?: LynkDialog["dialog"];
+  /**  */
+  panel?: LynkDialog["panel"];
+  /**  */
+  overlay?: LynkDialog["overlay"];
+  /** Emitted when the dialog opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
+  "onev-initial-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
+  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
 type LynkDividerProps = {
   /** Draws the divider in a vertical orientation. */
   vertical?: LynkDivider["vertical"];
 };
 
+type LynkDrawerProps = {
+  /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
+  open?: LynkDrawer["open"];
+  /** The drawer'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, you can use the `label` slot
+instead. */
+  label?: LynkDrawer["label"];
+  /** The direction from which the drawer will open. */
+  placement?: LynkDrawer["placement"];
+  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+its parent element, set this prop and add `position: relative` to the parent. */
+  contained?: LynkDrawer["contained"];
+  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the drawer. */
+  "no-header"?: LynkDrawer["noHeader"];
+  /** 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?: LynkDrawer["modal"];
+  /**  */
+  drawer?: LynkDrawer["drawer"];
+  /**  */
+  panel?: LynkDrawer["panel"];
+  /**  */
+  overlay?: LynkDrawer["overlay"];
+  /** Emitted when the drawer opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the drawer opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the drawer closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
+  "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
 type LynkDropdownProps = {
   /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
@@ -2301,6 +2301,12 @@ type LynkTagProps = {
   type?: LynkTag["type"];
   /** The tag's visual appearance. */
   appearance?: LynkTag["appearance"];
+  /** Makes the tag behave like a checkbox: clicking (or pressing Space/Enter when focused) toggles
+its `checked` state. A check icon appears in the prefix position and the appearance switches to
+`loud` while checked. Ignored on `removable` tags, whose click target is the remove button. */
+  selectable?: LynkTag["selectable"];
+  /** The checked state of a `selectable` tag. */
+  checked?: LynkTag["checked"];
   /** The tag's size. */
   size?: LynkTag["size"];
   /** Draws a pill-style tag with rounded edges. */
@@ -2314,6 +2320,8 @@ type LynkTagProps = {
 
   /** Emitted when the remove button is activated. */
   "onev-remove"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a `selectable` tag's `checked` state changes from user interaction. */
+  "onev-change"?: (e: CustomEvent<never>) => void;
 };
 
 type LynkTagInputProps = {
@@ -2790,42 +2798,6 @@ export type CustomElements = {
    */
   "lynk-badge": DefineComponent<LynkBadgeProps>;
 
-  /**
-   * Alerts are used to display important messages inline or as toast notifications.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the alert opens.
-   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
-   * - **ev-hide** - Emitted when the alert closes.
-   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the alert.
-   * - **hide()** - Hides the alert
-   * - **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   *
-   * ### **Slots:**
-   *  - _default_ - The alert's content.
-   * - **icon** - An icon to show in the alert.
-   * - **action** - Append custom actions to alert.
-   *
-   * ### **CSS Properties:**
-   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
-   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal block wrapper.
-   * - **icon** - The container that wraps the alert icon.
-   * - **message** - The alert message.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
-   */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
-
   /**
    *
    * ---
@@ -2851,6 +2823,20 @@ export type CustomElements = {
    */
   "lynk-box": DefineComponent<LynkBoxProps>;
 
+  /**
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+
   /**
    * 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).
    * ---
@@ -2871,18 +2857,40 @@ export type CustomElements = {
   "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the alert opens.
+   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
+   * - **ev-hide** - Emitted when the alert closes.
+   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the alert.
+   * - **hide()** - Hides the alert
+   * - **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
+   *
+   * ### **CSS Properties:**
+   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
+   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - The component's internal block wrapper.
+   * - **icon** - The container that wraps the alert icon.
+   * - **message** - The alert message.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
    */
-  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -3313,6 +3321,52 @@ export type CustomElements = {
    */
   "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.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **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.
+   *
+   * ### **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.
+   * - **label-end** - Optional right-aligned content shown at the end of the label row.
+   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
+   * - **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.
+   * - **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>;
+
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
    * ---
@@ -3356,6 +3410,18 @@ 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>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -3398,64 +3464,6 @@ export type CustomElements = {
    */
   "lynk-drawer": DefineComponent<LynkDrawerProps>;
 
-  /**
-   * 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-time 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.
-   * - **label-end** - Optional right-aligned content shown at the end of the label row.
-   * - **help-text-end** - Optional right-aligned content shown at the end of the help-text row.
-   * - **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.
-   * - **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>;
-
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "lynk-divider": DefineComponent<LynkDividerProps>;
-
   /**
    * Dropdowns expose additional content that "drops down" in a panel.
    * ---
@@ -4709,14 +4717,17 @@ export type CustomElements = {
    *
    * ### **Events:**
    *  - **ev-remove** - Emitted when the remove button is activated.
+   * - **ev-change** - Emitted when a `selectable` tag's `checked` state changes from user interaction.
    *
    * ### **Slots:**
    *  - _default_ - The tag's content.
    * - **prefix** - Used to prepend an icon or similar element to the tag.
+   * - **checked-icon** - The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
    * - **content** - The tag content.
+   * - **checked-icon** - The check icon shown when a selectable tag is checked.
    * - **remove-button** - The remove button.
    * - **remove-button__base** - The remove button's `base` part.
    */