@uplynk/lynk-design 1.15.0 → 1.16.0

package/dist/react/visually-hidden/index.js

@@ -1,9 +1,9 @@
 import {
   visually_hidden_default
-} from "../../chunks/chunk.PEQ4HFPG.js";
-import "../../chunks/chunk.ZKNLPZPD.js";
+} from "../../chunks/chunk.Z3ML6MZO.js";
+import "../../chunks/chunk.4P5AW7ZY.js";
 import "../../chunks/chunk.YKKSQ2FG.js";
-import "../../chunks/chunk.VI3SMVJJ.js";
+import "../../chunks/chunk.ZJ7UNN7B.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/react/wisp/index.js

@@ -1,9 +1,9 @@
 import {
   wisp_default
-} from "../../chunks/chunk.R5COH2W2.js";
-import "../../chunks/chunk.UVIDZJIX.js";
+} from "../../chunks/chunk.H3HK5ITQ.js";
+import "../../chunks/chunk.MUSJNMZZ.js";
 import "../../chunks/chunk.LOOPWOZG.js";
-import "../../chunks/chunk.VI3SMVJJ.js";
+import "../../chunks/chunk.ZJ7UNN7B.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/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 { 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 { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
@@ -14,15 +14,15 @@ import type { LynkButtonGroup } from "../../components/button-group/button-group
 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 { LynkCol } from "../../components/col/col.component.js";
 import type { LynkClock } from "../../components/clock/clock.component.js";
+import type { LynkCol } from "../../components/col/col.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 { LynkDialog } from "../../components/dialog/dialog.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";
@@ -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,15 @@ 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"];
@@ -168,15 +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 LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -422,8 +422,6 @@ the same document or shadow root for this to work. */
   "onev-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkColProps = {};
-
 type LynkClockProps = {
   /** The current value of the time picker in HH:MM or HH:MM:SS format (always 24-hour). */
   value?: LynkClock["value"];
@@ -447,6 +445,8 @@ type LynkClockProps = {
   "onev-change"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkColProps = {};
+
 type LynkColGroupProps = {};
 
 type LynkColorPickerProps = {
@@ -457,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"];
@@ -475,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
@@ -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,38 +689,46 @@ 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"];
+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"];
   /**  */
-  dialog?: LynkDialog["dialog"];
+  copyIcon?: LynkCopyButton["copyIcon"];
   /**  */
-  panel?: LynkDialog["panel"];
+  successIcon?: LynkCopyButton["successIcon"];
   /**  */
-  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;
+  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 = {
@@ -842,6 +820,40 @@ 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"];
@@ -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,6 +2476,23 @@ export type CustomElements = {
    */
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
+  /**
+   * 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.
    * ---
@@ -2519,23 +2548,6 @@ export type CustomElements = {
    */
   "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>;
-
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2793,13 +2805,6 @@ export type CustomElements = {
    */
   "lynk-checkbox": DefineComponent<LynkCheckboxProps>;
 
-  /**
-   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
-   * ---
-   *
-   */
-  "lynk-col": DefineComponent<LynkColProps>;
-
   /**
    * A time picker component with hour, minute, second, and AM/PM columns.
    * ---
@@ -2829,6 +2834,13 @@ export type CustomElements = {
    */
   "lynk-clock": DefineComponent<LynkClockProps>;
 
+  /**
+   * Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.
+   * ---
+   *
+   */
+  "lynk-col": DefineComponent<LynkColProps>;
+
   /**
    * Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.
    * ---
@@ -2865,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)_
@@ -2960,6 +2974,45 @@ export type CustomElements = {
    */
   "lynk-combobox": DefineComponent<LynkComboboxProps>;
 
+  /**
+   * 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>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2991,12 +3044,12 @@ export type CustomElements = {
   "lynk-copy-button": DefineComponent<LynkCopyButtonProps>;
 
   /**
-   * A date picker that combines calendar component with accessible input field.
+   * A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.
    * ---
    *
    *
    * ### **Events:**
-   *  - **ev-change** - Emitted when the date value changes.
+   *  - **ev-change** - Emitted when the date-time value changes.
    * - **ev-input** - Emitted when the control receives input.
    * - **ev-clear** - Emitted when the input is cleared.
    *
@@ -3023,11 +3076,16 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text wrapper.
    * - **input-group** - The input group container.
    * - **date-input** - The date input field.
+   * - **time-input** - The time input field.
+   * - **hour-input** - The hour number input (24h mode).
+   * - **minute-input** - The minute number input (24h mode).
+   * - **second-input** - The second number input (24h mode).
    * - **trigger** - The dropdown trigger button.
    * - **dropdown** - The dropdown panel.
    * - **calendar** - The calendar component.
+   * - **clock** - The clock component.
    */
-  "lynk-date-picker": DefineComponent<LynkDatePickerProps>;
+  "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
 
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -3072,50 +3130,6 @@ export type CustomElements = {
    */
   "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.
-   * ---
-   *
-   *
-   * ### **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.
-   * - **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.
    * ---
@@ -4499,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.
    * ---
@@ -4531,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.
    * ---

package/dist/utilities/vue-binding-directive.d.ts

@@ -1,3 +1,21 @@
+/**
+ * A Vue 3 plugin that provides the `v-l-model` directive for two-way binding with Lynk form components.
+ *
+ * Usage:
+ * ```ts
+ * import VueBindingDirective from '@uplynk/lynk-design/dist/utilities/vue-binding-directive';
+ * app.use(VueBindingDirective);
+ * ```
+ *
+ * Then in templates:
+ * ```html
+ * <lynk-input v-l-model="name"></lynk-input>
+ * <lynk-select v-l-model="selectedValue"></lynk-select>
+ * <lynk-checkbox v-l-model="isChecked"></lynk-checkbox>
+ * <lynk-switch v-l-model="isEnabled"></lynk-switch>
+ * <lynk-color-picker v-l-model="color"></lynk-color-picker>
+ * ```
+ */
 declare const _default: {
     name: string;
     install: (app: {