@uplynk/lynk-design 1.18.0 → 1.19.0

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

@@ -1,12 +1,12 @@
 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 { LynkAlert } from "../../components/alert/alert.component.js";
-import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
+import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
+import type { 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 { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { LynkButton } from "../../components/button/button.component.js";
@@ -21,9 +21,9 @@ 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 { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
+import type { LynkDialog } from "../../components/dialog/dialog.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";
@@ -102,6 +102,73 @@ 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 LynkAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: LynkAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: LynkAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: LynkAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: LynkAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: LynkAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "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 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"];
+  /**  */
+  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 LynkBoxProps = {};
+
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -143,69 +210,6 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-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"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: LynkAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: LynkAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: LynkAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: LynkAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onev-error"?: (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 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. */
@@ -770,40 +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 LynkDateTimePickerProps = {
   /** The input's name attribute. */
   name?: LynkDateTimePicker["name"];
@@ -904,6 +874,40 @@ type LynkDividerProps = {
   vertical?: LynkDivider["vertical"];
 };
 
+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. */
@@ -2297,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. */
@@ -2310,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 = {
@@ -2731,59 +2743,21 @@ 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>;
-
-  /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
    *
    *
-   * ### **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.
+   *  - _default_ - The default slot.
    *
    * ### **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)_
+   *  - **--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 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.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -2807,39 +2781,58 @@ export type CustomElements = {
   "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The default slot.
+   *  - _default_ - The badge's content.
    *
    * ### **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)_
+   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
+   * - **--color** - The badges text color. _(default: undefined)_
+   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
    */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+  "lynk-badge": DefineComponent<LynkBadgeProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * 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_ - The badge's content.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
    *
    * ### **CSS Properties:**
-   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
-   * - **--color** - The badges text color. _(default: undefined)_
-   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
+   *  - **--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 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-badge": DefineComponent<LynkBadgeProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
    *
@@ -2866,6 +2859,25 @@ export type CustomElements = {
    */
   "lynk-box": DefineComponent<LynkBoxProps>;
 
+  /**
+   * 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>;
+
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -3309,49 +3321,6 @@ export type CustomElements = {
    */
   "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
 
-  /**
-   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the dialog opens.
-   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
-   * - **ev-hide** - Emitted when the dialog closes.
-   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
-   * - **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
-   * - **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dialog.
-   * - **hide()** - Hides the dialog
-   *
-   * ### **Slots:**
-   *  - _default_ - The dialog's main content.
-   * - **label** - The dialog's label. Alternatively, you can use the label prop.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
-   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
-   *
-   * ### **CSS Properties:**
-   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
-   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
-   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
-   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   * - **overlay** - The overlay.
-   * - **panel** - The dialog panel (where the dialog and its content is rendered).
-   * - **header** - The dialog header.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
-   * - **title** - The dialog title.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
-   * - **body** - The dialog body.
-   * - **footer** - The dialog footer.
-   */
-  "lynk-dialog": DefineComponent<LynkDialogProps>;
-
   /**
    * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
@@ -3410,6 +3379,49 @@ export type CustomElements = {
    */
   "lynk-divider": DefineComponent<LynkDividerProps>;
 
+  /**
+   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the dialog opens.
+   * - **ev-after-show** - Emitted after the dialog opens and all animations are complete.
+   * - **ev-hide** - Emitted when the dialog closes.
+   * - **ev-after-hide** - Emitted after the dialog closes and all animations are complete.
+   * - **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+   * - **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dialog.
+   * - **hide()** - Hides the dialog
+   *
+   * ### **Slots:**
+   *  - _default_ - The dialog's main content.
+   * - **label** - The dialog's label. Alternatively, you can use the label prop.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
+   *
+   * ### **CSS Properties:**
+   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
+   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
+   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
+   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   * - **overlay** - The overlay.
+   * - **panel** - The dialog panel (where the dialog and its content is rendered).
+   * - **header** - The dialog header.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.
+   * - **title** - The dialog title.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
+   * - **body** - The dialog body.
+   * - **footer** - The dialog footer.
+   */
+  "lynk-dialog": DefineComponent<LynkDialogProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -4705,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.
    */