@uplynk/lynk-design 1.18.0 → 1.19.0

package/cdn/custom-elements.json

@@ -140,343 +140,419 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/animation/animation.js",
+      "path": "components/auto-grid/auto-grid.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkAnimation",
+          "name": "LynkAutoGrid",
+          "cssProperties": [
+            {
+              "description": "Customize the gap of the auto-grid group.",
+              "name": "--gap",
+              "default": "var(--lynk-spacing-base)"
+            },
+            {
+              "description": "Customize the allowed min-size of the auto-grid items.",
+              "name": "--min-size",
+              "default": "20rem"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
           "slots": [
             {
-              "description": "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.",
+              "description": "The default slot.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "animation",
-              "type": {
-                "text": "Animation | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "hasStarted",
+              "name": "autoSize",
               "type": {
-                "text": "boolean"
+                "text": "'fit' | 'fill'"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
+              "default": "'fit'",
+              "description": "How to justify auto-grid items",
+              "attribute": "auto-size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "minSize",
               "type": {
                 "text": "string"
               },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "attribute": "name"
+              "default": "'20rem'",
+              "description": "How to align auto-grid items to each-other",
+              "attribute": "min-size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "play",
+              "name": "gap",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "attribute": "play",
+              "default": "'var(--lynk-spacing-base)'",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "attribute": "gap",
               "reflects": true
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "delay",
+              "name": "auto-size",
               "type": {
-                "text": "number"
+                "text": "'fit' | 'fill'"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "attribute": "delay"
+              "default": "'fit'",
+              "description": "How to justify auto-grid items",
+              "fieldName": "autoSize"
             },
             {
-              "kind": "field",
-              "name": "direction",
+              "name": "min-size",
               "type": {
-                "text": "PlaybackDirection"
+                "text": "string"
               },
-              "default": "'normal'",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "attribute": "direction"
+              "default": "'20rem'",
+              "description": "How to align auto-grid items to each-other",
+              "fieldName": "minSize"
             },
             {
-              "kind": "field",
-              "name": "duration",
+              "name": "gap",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "attribute": "duration"
+              "default": "'var(--lynk-spacing-base)'",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "fieldName": "gap"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.",
+          "tagNameWithoutPrefix": "auto-grid",
+          "tagName": "lynk-auto-grid",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n * @documentation https://lynk.design/components/auto-grid\n * @since 1.0\n * @status stable\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--gap=var(--lynk-spacing-base)] - Customize the gap of the auto-grid group.\n * @cssproperty [--min-size=20rem] - Customize the allowed min-size of the auto-grid items.\n */",
+          "documentation": "https://lynk.design/components/auto-grid",
+          "since": "1.0",
+          "status": "stable"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkAutoGrid",
+            "module": "components/auto-grid/auto-grid.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatar/avatar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkAvatar",
+          "cssProperties": [
+            {
+              "description": "The size of the avatar.",
+              "name": "--size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container that wraps the avatar's icon.",
+              "name": "icon"
             },
             {
-              "kind": "field",
-              "name": "easing",
-              "type": {
-                "text": "string"
-              },
-              "default": "'linear'",
-              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "attribute": "easing"
+              "description": "The container that wraps the avatar's initials.",
+              "name": "initials"
             },
+            {
+              "description": "The avatar image. Only shown when the `image` attribute is set.",
+              "name": "image"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default icon to use when no image or initials are present. Works best with `<wa-icon>`.",
+              "name": "icon"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "endDelay",
+              "name": "hasError",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "attribute": "end-delay"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "fill",
+              "name": "image",
               "type": {
-                "text": "FillMode"
+                "text": "string"
               },
-              "default": "'auto'",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "attribute": "fill"
-            },
-            {
-              "kind": "field",
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "attribute": "iterations"
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "attribute": "image"
             },
             {
               "kind": "field",
-              "name": "iterationStart",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "attribute": "iteration-start"
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "keyframes",
+              "name": "initials",
               "type": {
-                "text": "Keyframe[] | undefined"
+                "text": "string"
               },
-              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "attribute": "initials"
             },
             {
               "kind": "field",
-              "name": "playbackRate",
+              "name": "loading",
               "type": {
-                "text": "number"
+                "text": "'eager' | 'lazy'"
               },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "attribute": "playback-rate"
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "attribute": "loading"
             },
             {
               "kind": "field",
-              "name": "currentTime",
+              "name": "shape",
               "type": {
-                "text": "CSSNumberish"
+                "text": "'circle' | 'square' | 'rounded'"
               },
-              "description": "Gets and sets the current animation time."
-            },
-            {
-              "kind": "field",
-              "name": "handleAnimationFinish",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleAnimationCancel",
-              "privacy": "private"
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "attribute": "shape",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "handleImageChange"
             },
             {
               "kind": "method",
-              "name": "createAnimation",
+              "name": "handleImageLoadError",
               "privacy": "private"
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "destroyAnimation",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleAnimationChange"
-            },
-            {
-              "kind": "method",
-              "name": "handlePlayChange"
-            },
-            {
-              "kind": "method",
-              "name": "handlePlaybackRateChange"
-            },
-            {
-              "kind": "method",
-              "name": "cancel",
-              "description": "Clears all KeyframeEffects caused by this animation and aborts its playback."
-            },
-            {
-              "kind": "method",
-              "name": "finish",
-              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the animation is canceled.",
-              "name": "ev-cancel",
-              "reactName": "EvCancel",
-              "eventName": "EvCancelEvent"
-            },
-            {
-              "description": "Emitted when the animation finishes.",
-              "name": "ev-finish",
-              "reactName": "EvFinish",
-              "eventName": "EvFinishEvent"
-            },
-            {
-              "description": "Emitted when the animation starts or restarts.",
-              "name": "ev-start",
-              "reactName": "EvStart",
-              "eventName": "EvStartEvent"
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.",
+              "name": "ev-error",
+              "reactName": "EvError",
+              "eventName": "EvErrorEvent"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "image",
               "type": {
                 "text": "string"
               },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "fieldName": "name"
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "fieldName": "image"
             },
             {
-              "name": "play",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "fieldName": "play"
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "fieldName": "label"
             },
             {
-              "name": "delay",
+              "name": "initials",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "fieldName": "delay"
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "fieldName": "initials"
             },
             {
-              "name": "direction",
+              "name": "loading",
               "type": {
-                "text": "PlaybackDirection"
+                "text": "'eager' | 'lazy'"
               },
-              "default": "'normal'",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "fieldName": "direction"
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "fieldName": "loading"
             },
             {
-              "name": "duration",
+              "name": "shape",
               "type": {
-                "text": "number"
+                "text": "'circle' | 'square' | 'rounded'"
               },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "fieldName": "duration"
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "fieldName": "shape"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Avatars are used to represent a person or object.",
+          "tagNameWithoutPrefix": "avatar",
+          "tagName": "lynk-avatar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://lynk.design/components/avatar\n * @status stable\n * @since 1.4\n *\n * @dependency lynk-icon\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n *\n * @event ev-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
+          "documentation": "https://lynk.design/components/avatar",
+          "status": "stable",
+          "since": "1.4",
+          "dependencies": [
+            "lynk-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkAvatar",
+            "module": "components/avatar/avatar.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkBadge",
+          "cssProperties": [
+            {
+              "description": "The badges background and pulse color.",
+              "name": "--background-color"
             },
             {
-              "name": "easing",
+              "description": "The badges text color.",
+              "name": "--color"
+            },
+            {
+              "description": "The badges pulse speed in seconds or ms. Default is 1.5s.",
+              "name": "--pulse-speed"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
               },
-              "default": "'linear'",
-              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "fieldName": "easing"
+              "description": "The badge's variant.",
+              "attribute": "type",
+              "reflects": true
             },
             {
-              "name": "end-delay",
+              "kind": "field",
+              "name": "pill",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "fieldName": "endDelay"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
-              "name": "fill",
+              "kind": "field",
+              "name": "pulse",
               "type": {
-                "text": "FillMode"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "fieldName": "fill"
-            },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "fieldName": "iterations"
+              "name": "type",
+              "type": {
+                "text": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+              },
+              "description": "The badge's variant.",
+              "fieldName": "type"
             },
             {
-              "name": "iteration-start",
+              "name": "pill",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "fieldName": "iterationStart"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "name": "playback-rate",
+              "name": "pulse",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "fieldName": "playbackRate"
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "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).",
-          "tagNameWithoutPrefix": "animation",
-          "tagName": "lynk-animation",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "lynk-badge",
           "customElement": true,
-          "jsDoc": "/**\n * @summary 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).\n * @documentation https://lynk.design/components/animation\n * @since 1.0\n * @status stable\n *\n * @event ev-cancel - Emitted when the animation is canceled.\n * @event ev-finish - Emitted when the animation finishes.\n * @event ev-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.\n */",
-          "documentation": "https://lynk.design/components/animation",
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://lynk.design/components/badge\n * @since 1.0\n * @status stable\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty --background-color - The badges background and pulse color.\n * @cssproperty --color - The badges text color.\n * @cssproperty --pulse-speed - The badges pulse speed in seconds or ms. Default is 1.5s.\n *\n */",
+          "documentation": "https://lynk.design/components/badge",
           "since": "1.0",
           "status": "stable"
         }
@@ -486,8 +562,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAnimation",
-            "module": "components/animation/animation.js"
+            "name": "LynkBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
@@ -643,24 +719,46 @@
             },
             {
               "kind": "field",
-              "name": "duration",
-              "default": "Infinity",
-              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
-              "attribute": "duration"
-            },
-            {
-              "kind": "field",
-              "name": "countdown",
+              "name": "appearance",
               "type": {
-                "text": "'rtl' | 'ltr' | undefined"
+                "text": "'standard' | 'filled'"
               },
-              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-              "attribute": "countdown",
+              "default": "'standard'",
+              "description": "The alert's visual appearance.",
+              "attribute": "appearance",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "remainingTime",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The alert's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "default": "Infinity",
+              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+              "attribute": "duration"
+            },
+            {
+              "kind": "field",
+              "name": "countdown",
+              "type": {
+                "text": "'rtl' | 'ltr' | undefined"
+              },
+              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+              "attribute": "countdown",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "remainingTime",
               "privacy": "private"
             },
             {
@@ -709,6 +807,16 @@
             {
               "kind": "method",
               "name": "toast",
+              "parameters": [
+                {
+                  "name": "placement",
+                  "default": "DEFAULT_TOAST_PLACEMENT",
+                  "type": {
+                    "text": "LynkToastPlacement"
+                  },
+                  "description": "Where the toast appears. Defaults to `top-end` (top-right in LTR). `start`\nand `end` follow the inline direction, so they flip under RTL. Toasts shown with different\nplacements appear in separate stacks simultaneously."
+                }
+              ],
               "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden."
             }
           ],
@@ -766,6 +874,24 @@
               "description": "The alert's type (color).",
               "fieldName": "type"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'standard' | 'filled'"
+              },
+              "default": "'standard'",
+              "description": "The alert's visual appearance.",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The alert's size.",
+              "fieldName": "size"
+            },
             {
               "name": "duration",
               "default": "Infinity",
@@ -821,179 +947,84 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.js",
+      "path": "components/box/box.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkAvatar",
+          "name": "LynkBox",
           "cssProperties": [
             {
-              "description": "The size of the avatar.",
-              "name": "--size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container that wraps the avatar's icon.",
-              "name": "icon"
+              "description": "Custom text align (left, center, right).",
+              "name": "--align",
+              "default": "left"
             },
             {
-              "description": "The container that wraps the avatar's initials.",
-              "name": "initials"
+              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
+              "name": "--background",
+              "default": "transparent"
             },
             {
-              "description": "The avatar image. Only shown when the `image` attribute is set.",
-              "name": "image"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default icon to use when no image or initials are present. Works best with `<wa-icon>`.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "<border-style> <border-width> <border-color>.",
+              "name": "--border"
             },
             {
-              "kind": "field",
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "attribute": "image"
+              "description": "Any Border Radius token (--lynk-border-radius-medium) or a custom value.",
+              "name": "--border-radius"
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "attribute": "label"
+              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
+              "name": "--color",
+              "default": "inherit"
             },
             {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "attribute": "initials"
+              "description": "Any custom px, rem, %, or vh value.",
+              "name": "--height",
+              "default": "auto"
             },
             {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "attribute": "loading"
+              "description": "Any custom px, rem, %, or vh value.",
+              "name": "--width",
+              "default": "auto"
             },
             {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "attribute": "shape",
-              "reflects": true
+              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
+              "name": "--margin",
+              "default": "0"
             },
             {
-              "kind": "method",
-              "name": "handleImageChange"
+              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
+              "name": "--padding",
+              "default": "0"
             },
             {
-              "kind": "method",
-              "name": "handleImageLoadError",
-              "privacy": "private"
+              "description": "Any elevation shadow token (--lynk-shadow-large);",
+              "name": "--shadow"
             }
           ],
-          "events": [
+          "cssParts": [
             {
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.",
-              "name": "ev-error",
-              "reactName": "EvError",
-              "eventName": "EvErrorEvent"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             }
           ],
-          "attributes": [
-            {
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "fieldName": "image"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "fieldName": "label"
-            },
-            {
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "fieldName": "initials"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "fieldName": "loading"
-            },
+          "slots": [
             {
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "fieldName": "shape"
+              "description": "The default slot.",
+              "name": ""
             }
           ],
+          "members": [],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Avatars are used to represent a person or object.",
-          "tagNameWithoutPrefix": "avatar",
-          "tagName": "lynk-avatar",
+          "tagNameWithoutPrefix": "box",
+          "tagName": "lynk-box",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://lynk.design/components/avatar\n * @status stable\n * @since 1.4\n *\n * @dependency lynk-icon\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n *\n * @event ev-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
-          "documentation": "https://lynk.design/components/avatar",
-          "status": "stable",
-          "since": "1.4",
-          "dependencies": [
-            "lynk-icon"
-          ]
+          "jsDoc": "/**\n * @since 1.0\n * @status deprecated\n * @description A box, the most basic of containers.\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--align=left] - Custom text align (left, center, right).\n * @cssproperty [--background=transparent] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty --border - <border-style> <border-width> <border-color>.\n * @cssproperty --border-radius - Any Border Radius token (--lynk-border-radius-medium) or a custom value.\n * @cssproperty [--color=inherit] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty [--height=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--width=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--margin=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty [--padding=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty --shadow - Any elevation shadow token (--lynk-shadow-large);\n */",
+          "since": "1.0",
+          "status": "deprecated"
         }
       ],
       "exports": [
@@ -1001,334 +1032,353 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAvatar",
-            "module": "components/avatar/avatar.js"
+            "name": "LynkBox",
+            "module": "components/box/box.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/auto-grid/auto-grid.js",
+      "path": "components/animation/animation.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkAutoGrid",
-          "cssProperties": [
-            {
-              "description": "Customize the gap of the auto-grid group.",
-              "name": "--gap",
-              "default": "var(--lynk-spacing-base)"
-            },
-            {
-              "description": "Customize the allowed min-size of the auto-grid items.",
-              "name": "--min-size",
-              "default": "20rem"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
+          "name": "LynkAnimation",
           "slots": [
             {
-              "description": "The default slot.",
+              "description": "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.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "autoSize",
+              "name": "animation",
               "type": {
-                "text": "'fit' | 'fill'"
+                "text": "Animation | undefined"
               },
-              "default": "'fit'",
-              "description": "How to justify auto-grid items",
-              "attribute": "auto-size",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "minSize",
+              "name": "hasStarted",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'20rem'",
-              "description": "How to align auto-grid items to each-other",
-              "attribute": "min-size",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "defaultSlot",
+              "type": {
+                "text": "Promise<HTMLSlotElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "default": "'var(--lynk-spacing-base)'",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "attribute": "gap",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
+            },
             {
-              "name": "auto-size",
+              "kind": "field",
+              "name": "play",
               "type": {
-                "text": "'fit' | 'fill'"
+                "text": "boolean"
               },
-              "default": "'fit'",
-              "description": "How to justify auto-grid items",
-              "fieldName": "autoSize"
+              "default": "false",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "attribute": "play",
+              "reflects": true
             },
             {
-              "name": "min-size",
+              "kind": "field",
+              "name": "delay",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'20rem'",
-              "description": "How to align auto-grid items to each-other",
-              "fieldName": "minSize"
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "attribute": "delay"
             },
             {
-              "name": "gap",
+              "kind": "field",
+              "name": "direction",
               "type": {
-                "text": "string"
+                "text": "PlaybackDirection"
               },
-              "default": "'var(--lynk-spacing-base)'",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "fieldName": "gap"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.",
-          "tagNameWithoutPrefix": "auto-grid",
-          "tagName": "lynk-auto-grid",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n * @documentation https://lynk.design/components/auto-grid\n * @since 1.0\n * @status stable\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--gap=var(--lynk-spacing-base)] - Customize the gap of the auto-grid group.\n * @cssproperty [--min-size=20rem] - Customize the allowed min-size of the auto-grid items.\n */",
-          "documentation": "https://lynk.design/components/auto-grid",
-          "since": "1.0",
-          "status": "stable"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkAutoGrid",
-            "module": "components/auto-grid/auto-grid.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkBadge",
-          "cssProperties": [
-            {
-              "description": "The badges background and pulse color.",
-              "name": "--background-color"
+              "default": "'normal'",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "attribute": "direction"
             },
             {
-              "description": "The badges text color.",
-              "name": "--color"
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "attribute": "duration"
             },
-            {
-              "description": "The badges pulse speed in seconds or ms. Default is 1.5s.",
-              "name": "--pulse-speed"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "easing",
               "type": {
-                "text": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+                "text": "string"
               },
-              "description": "The badge's variant.",
-              "attribute": "type",
-              "reflects": true
+              "default": "'linear'",
+              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "attribute": "easing"
             },
             {
               "kind": "field",
-              "name": "pill",
+              "name": "endDelay",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "attribute": "end-delay"
             },
             {
               "kind": "field",
-              "name": "pulse",
+              "name": "fill",
               "type": {
-                "text": "boolean"
+                "text": "FillMode"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "attribute": "fill"
+            },
             {
-              "name": "type",
+              "kind": "field",
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "attribute": "iterations"
+            },
+            {
+              "kind": "field",
+              "name": "iterationStart",
               "type": {
-                "text": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+                "text": "number"
               },
-              "description": "The badge's variant.",
-              "fieldName": "type"
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "attribute": "iteration-start"
             },
             {
-              "name": "pill",
+              "kind": "field",
+              "name": "keyframes",
               "type": {
-                "text": "boolean"
+                "text": "Keyframe[] | undefined"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
+              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
             },
             {
-              "name": "pulse",
+              "kind": "field",
+              "name": "playbackRate",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "lynk-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://lynk.design/components/badge\n * @since 1.0\n * @status stable\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty --background-color - The badges background and pulse color.\n * @cssproperty --color - The badges text color.\n * @cssproperty --pulse-speed - The badges pulse speed in seconds or ms. Default is 1.5s.\n *\n */",
-          "documentation": "https://lynk.design/components/badge",
-          "since": "1.0",
-          "status": "stable"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/box/box.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkBox",
-          "cssProperties": [
+              "default": "1",
+              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+              "attribute": "playback-rate"
+            },
             {
-              "description": "Custom text align (left, center, right).",
-              "name": "--align",
-              "default": "left"
+              "kind": "field",
+              "name": "currentTime",
+              "type": {
+                "text": "CSSNumberish"
+              },
+              "description": "Gets and sets the current animation time."
             },
             {
-              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
-              "name": "--background",
-              "default": "transparent"
+              "kind": "field",
+              "name": "handleAnimationFinish",
+              "privacy": "private"
             },
             {
-              "description": "<border-style> <border-width> <border-color>.",
-              "name": "--border"
+              "kind": "field",
+              "name": "handleAnimationCancel",
+              "privacy": "private"
             },
             {
-              "description": "Any Border Radius token (--lynk-border-radius-medium) or a custom value.",
-              "name": "--border-radius"
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
-              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
-              "name": "--color",
-              "default": "inherit"
+              "kind": "method",
+              "name": "createAnimation",
+              "privacy": "private"
             },
             {
-              "description": "Any custom px, rem, %, or vh value.",
-              "name": "--height",
-              "default": "auto"
+              "kind": "method",
+              "name": "destroyAnimation",
+              "privacy": "private"
             },
             {
-              "description": "Any custom px, rem, %, or vh value.",
-              "name": "--width",
-              "default": "auto"
+              "kind": "method",
+              "name": "handleAnimationChange"
             },
             {
-              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
-              "name": "--margin",
-              "default": "0"
+              "kind": "method",
+              "name": "handlePlayChange"
             },
             {
-              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
-              "name": "--padding",
-              "default": "0"
+              "kind": "method",
+              "name": "handlePlaybackRateChange"
             },
             {
-              "description": "Any elevation shadow token (--lynk-shadow-large);",
-              "name": "--shadow"
+              "kind": "method",
+              "name": "cancel",
+              "description": "Clears all KeyframeEffects caused by this animation and aborts its playback."
+            },
+            {
+              "kind": "method",
+              "name": "finish",
+              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
             }
           ],
-          "cssParts": [
+          "events": [
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
+              "description": "Emitted when the animation is canceled.",
+              "name": "ev-cancel",
+              "reactName": "EvCancel",
+              "eventName": "EvCancelEvent"
+            },
+            {
+              "description": "Emitted when the animation finishes.",
+              "name": "ev-finish",
+              "reactName": "EvFinish",
+              "eventName": "EvFinishEvent"
+            },
+            {
+              "description": "Emitted when the animation starts or restarts.",
+              "name": "ev-start",
+              "reactName": "EvStart",
+              "eventName": "EvStartEvent"
             }
           ],
-          "slots": [
+          "attributes": [
             {
-              "description": "The default slot.",
-              "name": ""
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "fieldName": "name"
+            },
+            {
+              "name": "play",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "fieldName": "play"
+            },
+            {
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "fieldName": "delay"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "PlaybackDirection"
+              },
+              "default": "'normal'",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "fieldName": "duration"
+            },
+            {
+              "name": "easing",
+              "type": {
+                "text": "string"
+              },
+              "default": "'linear'",
+              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "fieldName": "easing"
+            },
+            {
+              "name": "end-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "fieldName": "endDelay"
+            },
+            {
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "fieldName": "fill"
+            },
+            {
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "fieldName": "iterations"
+            },
+            {
+              "name": "iteration-start",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "fieldName": "iterationStart"
+            },
+            {
+              "name": "playback-rate",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+              "fieldName": "playbackRate"
             }
           ],
-          "members": [],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "tagNameWithoutPrefix": "box",
-          "tagName": "lynk-box",
+          "summary": "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).",
+          "tagNameWithoutPrefix": "animation",
+          "tagName": "lynk-animation",
           "customElement": true,
-          "jsDoc": "/**\n * @since 1.0\n * @status deprecated\n * @description A box, the most basic of containers.\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--align=left] - Custom text align (left, center, right).\n * @cssproperty [--background=transparent] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty --border - <border-style> <border-width> <border-color>.\n * @cssproperty --border-radius - Any Border Radius token (--lynk-border-radius-medium) or a custom value.\n * @cssproperty [--color=inherit] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty [--height=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--width=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--margin=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty [--padding=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty --shadow - Any elevation shadow token (--lynk-shadow-large);\n */",
+          "jsDoc": "/**\n * @summary 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).\n * @documentation https://lynk.design/components/animation\n * @since 1.0\n * @status stable\n *\n * @event ev-cancel - Emitted when the animation is canceled.\n * @event ev-finish - Emitted when the animation finishes.\n * @event ev-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.\n */",
+          "documentation": "https://lynk.design/components/animation",
           "since": "1.0",
-          "status": "deprecated"
+          "status": "stable"
         }
       ],
       "exports": [
@@ -1336,8 +1386,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkBox",
-            "module": "components/box/box.js"
+            "name": "LynkAnimation",
+            "module": "components/animation/animation.js"
           }
         }
       ]
@@ -8413,88 +8463,94 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/dialog/dialog.js",
+      "path": "components/date-time-picker/date-time-picker.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkDialog",
-          "cssProperties": [
+          "name": "LynkDateTimePicker",
+          "cssParts": [
             {
-              "description": "The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.",
-              "name": "--width"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The amount of padding to use for the header.",
-              "name": "--header-spacing"
+              "description": "The form control wrapper.",
+              "name": "form-control"
             },
             {
-              "description": "The amount of padding to use for the body.",
-              "name": "--body-spacing"
+              "description": "The label wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The amount of padding to use for the footer.",
-              "name": "--footer-spacing"
-            }
-          ],
-          "cssParts": [
+              "description": "The input wrapper.",
+              "name": "form-control-input"
+            },
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
+              "description": "The help text wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The overlay.",
-              "name": "overlay"
+              "description": "The input group container.",
+              "name": "input-group"
             },
             {
-              "description": "The dialog panel (where the dialog and its content is rendered).",
-              "name": "panel"
+              "description": "The date input field.",
+              "name": "date-input"
             },
             {
-              "description": "The dialog header.",
-              "name": "header"
+              "description": "The time input field.",
+              "name": "time-input"
             },
             {
-              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`.",
-              "name": "header-actions"
+              "description": "The hour number input (24h mode).",
+              "name": "hour-input"
             },
             {
-              "description": "The dialog title.",
-              "name": "title"
+              "description": "The minute number input (24h mode).",
+              "name": "minute-input"
             },
             {
-              "description": "The close button.",
-              "name": "close-button"
+              "description": "The second number input (24h mode).",
+              "name": "second-input"
             },
             {
-              "description": "The close button's `base` part.",
-              "name": "close-button__base"
+              "description": "The dropdown trigger button.",
+              "name": "trigger"
             },
             {
-              "description": "The dialog body.",
-              "name": "body"
+              "description": "The dropdown panel.",
+              "name": "dropdown"
             },
             {
-              "description": "The dialog footer.",
-              "name": "footer"
+              "description": "The calendar component.",
+              "name": "calendar"
+            },
+            {
+              "description": "The clock component.",
+              "name": "clock"
             }
           ],
           "slots": [
             {
-              "description": "The dialog's main content.",
-              "name": ""
+              "description": "The input's label. Alternatively, you can use the label prop.",
+              "name": "label"
             },
             {
-              "description": "The dialog's label. Alternatively, you can use the label prop.",
-              "name": "label"
+              "description": "Optional right-aligned content shown at the end of the label row.",
+              "name": "label-end"
             },
             {
-              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`.",
-              "name": "header-actions"
+              "description": "Optional right-aligned content shown at the end of the help-text row.",
+              "name": "help-text-end"
             },
             {
-              "description": "The dialog's footer, usually one or more buttons representing various options.",
-              "name": "footer"
+              "description": "Help text that describes how to use the input.",
+              "name": "help-text"
+            },
+            {
+              "description": "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.",
+              "name": "help-tip"
             }
           ],
           "members": [
@@ -8505,683 +8561,305 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-icon-button': LynkIconButton }"
+              "default": "{ 'lynk-button': LynkButton, 'lynk-calendar': LynkCalendar, 'lynk-clock': LynkClock, 'lynk-dropdown': LynkDropdown, 'lynk-form-field': LynkFormField, 'lynk-icon': LynkIcon, 'lynk-icon-button': LynkIconButton }"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'footer')"
+              "default": "new FormControlController(this)"
             },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new HasSlotController( this, 'help-text', 'help-tip', 'label', 'label-end', 'help-text-end' )"
             },
             {
               "kind": "field",
-              "name": "originalTrigger",
+              "name": "dropdown",
               "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "private"
+                "text": "LynkDropdown"
+              }
             },
             {
               "kind": "field",
-              "name": "modal",
+              "name": "calendar",
               "type": {
-                "text": "Modal"
-              },
-              "privacy": "public",
-              "description": "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."
+                "text": "LynkCalendar"
+              }
             },
             {
               "kind": "field",
-              "name": "dialog",
+              "name": "clock",
               "type": {
-                "text": "HTMLElement"
+                "text": "LynkClock"
               }
             },
             {
               "kind": "field",
-              "name": "panel",
+              "name": "dateInput",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "timeInput",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "hourInput",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-              "attribute": "open",
-              "reflects": true
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "minuteInput",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label",
-              "reflects": true
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "noHeader",
+              "name": "secondInput",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-              "attribute": "no-header",
-              "reflects": true
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isOpen",
               "type": {
-                "text": "'fitted' | 'full' | 'auto'"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "The dialog's size.",
-              "attribute": "size",
-              "reflects": true
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "requestClose",
+              "kind": "field",
+              "name": "pendingValue",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "source",
-                  "type": {
-                    "text": "'close-button' | 'keyboard' | 'overlay'"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "handleDocumentKeyDown",
+              "kind": "field",
+              "name": "originalValue",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the dialog."
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the dialog"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the dialog opens.",
-              "name": "ev-show",
-              "reactName": "EvShow",
-              "eventName": "EvShowEvent"
+              "default": "''"
             },
             {
-              "description": "Emitted after the dialog opens and all animations are complete.",
-              "name": "ev-after-show",
-              "reactName": "EvAfterShow",
-              "eventName": "EvAfterShowEvent"
+              "kind": "field",
+              "name": "use24HourInput",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether to use the 24-hour number inputs instead of native time input",
+              "readonly": true
             },
             {
-              "description": "Emitted when the dialog closes.",
-              "name": "ev-hide",
-              "reactName": "EvHide",
-              "eventName": "EvHideEvent"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's name attribute.",
+              "attribute": "name"
             },
             {
-              "description": "Emitted after the dialog closes and all animations are complete.",
-              "name": "ev-after-hide",
-              "reactName": "EvAfterHide",
-              "eventName": "EvAfterHideEvent"
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "description": "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.",
-              "name": "ev-initial-focus",
-              "reactName": "EvInitialFocus",
-              "eventName": "EvInitialFocusEvent"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "attribute": "value"
             },
             {
+              "kind": "field",
+              "name": "defaultValue",
               "type": {
-                "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
+                "text": "string"
               },
-              "description": "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.",
-              "name": "ev-request-close",
-              "reactName": "EvRequestClose",
-              "eventName": "EvRequestCloseEvent"
-            }
-          ],
-          "attributes": [
+              "default": "''",
+              "description": "Gets or sets the default value used to reset this element."
+            },
             {
-              "name": "open",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-              "fieldName": "open"
+              "default": "''",
+              "description": "The input's label.",
+              "attribute": "label"
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "description": "Placeholder text to show when the input is empty.",
+              "attribute": "placeholder"
             },
             {
-              "name": "no-header",
+              "kind": "field",
+              "name": "helpText",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-              "fieldName": "noHeader"
+              "default": "''",
+              "description": "The help text below the input.",
+              "attribute": "help-text"
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "labelEnd",
               "type": {
-                "text": "'fitted' | 'full' | 'auto'"
+                "text": "string"
               },
-              "default": "'auto'",
-              "description": "The dialog's size.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.",
-          "tagNameWithoutPrefix": "dialog",
-          "tagName": "lynk-dialog",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n * @documentation https://lynk.design/components/dialog\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot header-actions - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @event ev-show - Emitted when the dialog opens.\n * @event ev-after-show - Emitted after the dialog opens and all animations are complete.\n * @event ev-hide - Emitted when the dialog closes.\n * @event ev-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event ev-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} ev-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart overlay - The overlay.\n * @csspart panel - The dialog panel (where the dialog and its content is rendered).\n * @csspart header - The dialog header.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n * @csspart title - The dialog title.\n * @csspart close-button - The close button.\n * @csspart close-button__base - The close button's `base` part.\n * @csspart body - The dialog body.\n * @csspart footer - The dialog footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.\n * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.\n * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.\n */",
-          "documentation": "https://lynk.design/components/dialog",
-          "since": "1.0",
-          "status": "stable",
-          "dependencies": [
-            "lynk-icon-button"
-          ],
-          "animations": [
-            {
-              "name": "dialog.show",
-              "description": "The animation to use when showing the dialog."
-            },
-            {
-              "name": "dialog.hide",
-              "description": "The animation to use when hiding the dialog."
-            },
-            {
-              "name": "dialog.denyClose",
-              "description": "The animation to use when a request to close the dialog is denied."
-            },
-            {
-              "name": "dialog.overlay.show",
-              "description": "The animation to use when showing the dialog's overlay."
-            },
-            {
-              "name": "dialog.overlay.hide",
-              "description": "The animation to use when hiding the dialog's overlay."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkDialog",
-            "module": "components/dialog/dialog.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/date-time-picker/date-time-picker.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkDateTimePicker",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The form control wrapper.",
-              "name": "form-control"
-            },
-            {
-              "description": "The label wrapper.",
-              "name": "form-control-label"
-            },
-            {
-              "description": "The input wrapper.",
-              "name": "form-control-input"
-            },
-            {
-              "description": "The help text wrapper.",
-              "name": "form-control-help-text"
-            },
-            {
-              "description": "The input group container.",
-              "name": "input-group"
-            },
-            {
-              "description": "The date input field.",
-              "name": "date-input"
-            },
-            {
-              "description": "The time input field.",
-              "name": "time-input"
-            },
-            {
-              "description": "The hour number input (24h mode).",
-              "name": "hour-input"
-            },
-            {
-              "description": "The minute number input (24h mode).",
-              "name": "minute-input"
-            },
-            {
-              "description": "The second number input (24h mode).",
-              "name": "second-input"
-            },
-            {
-              "description": "The dropdown trigger button.",
-              "name": "trigger"
-            },
-            {
-              "description": "The dropdown panel.",
-              "name": "dropdown"
-            },
-            {
-              "description": "The calendar component.",
-              "name": "calendar"
-            },
-            {
-              "description": "The clock component.",
-              "name": "clock"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The input's label. Alternatively, you can use the label prop.",
-              "name": "label"
-            },
-            {
-              "description": "Optional right-aligned content shown at the end of the label row.",
-              "name": "label-end"
-            },
-            {
-              "description": "Optional right-aligned content shown at the end of the help-text row.",
-              "name": "help-text-end"
-            },
-            {
-              "description": "Help text that describes how to use the input.",
-              "name": "help-text"
+              "default": "''",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "attribute": "label-end"
             },
-            {
-              "description": "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.",
-              "name": "help-tip"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "helpTextEnd",
               "type": {
-                "text": "object"
+                "text": "string"
               },
-              "static": true,
-              "default": "{ 'lynk-button': LynkButton, 'lynk-calendar': LynkCalendar, 'lynk-clock': LynkClock, 'lynk-dropdown': LynkDropdown, 'lynk-form-field': LynkFormField, 'lynk-icon': LynkIcon, 'lynk-icon-button': LynkIconButton }"
+              "default": "''",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "attribute": "help-text-end"
             },
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this)"
+              "name": "helpTip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "attribute": "help-tip"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController( this, 'help-text', 'help-tip', 'label', 'label-end', 'help-text-end' )"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the input.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dropdown",
+              "name": "readonly",
               "type": {
-                "text": "LynkDropdown"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input readonly.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "calendar",
+              "name": "required",
               "type": {
-                "text": "LynkCalendar"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input required.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "clock",
+              "name": "optional",
               "type": {
-                "text": "LynkClock"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the field as optional.",
+              "attribute": "optional",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dateInput",
+              "name": "dirty",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "attribute": "dirty",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "timeInput",
+              "name": "inline",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Arranges the label inline next to the date-time picker instead of above it.",
+              "attribute": "inline",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hourInput",
+              "name": "size",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The input's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "minuteInput",
+              "name": "min",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "string"
+              },
+              "description": "The minimum date in ISO format (YYYY-MM-DD).",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "secondInput",
+              "name": "max",
               "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "pendingValue",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "originalValue",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "use24HourInput",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "description": "Whether to use the 24-hour number inputs instead of native time input",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The input's name attribute.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "_value",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Gets or sets the default value used to reset this element."
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The input's label.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show when the input is empty.",
-              "attribute": "placeholder"
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The help text below the input.",
-              "attribute": "help-text"
-            },
-            {
-              "kind": "field",
-              "name": "labelEnd",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
-              "attribute": "label-end"
-            },
-            {
-              "kind": "field",
-              "name": "helpTextEnd",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
-              "attribute": "help-text-end"
-            },
-            {
-              "kind": "field",
-              "name": "helpTip",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "attribute": "help-tip"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the input.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the input readonly.",
-              "attribute": "readonly",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the input required.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "optional",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Marks the field as optional.",
-              "attribute": "optional",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dirty",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds the dirty indicator mark.",
-              "attribute": "dirty",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Arranges the label inline next to the date-time picker instead of above it.",
-              "attribute": "inline",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The input's size.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "string"
-              },
-              "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "attribute": "min"
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "string"
-              },
-              "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "attribute": "max"
+                "text": "string"
+              },
+              "description": "The maximum date in ISO format (YYYY-MM-DD).",
+              "attribute": "max"
             },
             {
               "kind": "field",
@@ -9668,364 +9346,736 @@
               "eventName": "EvChangeEvent"
             },
             {
-              "description": "Emitted when the control receives input.",
-              "name": "ev-input",
-              "reactName": "EvInput",
-              "eventName": "EvInputEvent"
+              "description": "Emitted when the control receives input.",
+              "name": "ev-input",
+              "reactName": "EvInput",
+              "eventName": "EvInputEvent"
+            },
+            {
+              "description": "Emitted when the input is cleared.",
+              "name": "ev-clear",
+              "reactName": "EvClear",
+              "eventName": "EvClearEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's name attribute.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "fieldName": "value"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input's label.",
+              "fieldName": "label"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show when the input is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help text below the input.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "label-end",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "fieldName": "labelEnd"
+            },
+            {
+              "name": "help-text-end",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "fieldName": "helpTextEnd"
+            },
+            {
+              "name": "help-tip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "fieldName": "helpTip"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the input.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input readonly.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input required.",
+              "fieldName": "required"
+            },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the field as optional.",
+              "fieldName": "optional"
+            },
+            {
+              "name": "dirty",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "fieldName": "dirty"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Arranges the label inline next to the date-time picker instead of above it.",
+              "fieldName": "inline"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The input's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "string"
+              },
+              "description": "The minimum date in ISO format (YYYY-MM-DD).",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "description": "The maximum date in ISO format (YYYY-MM-DD).",
+              "fieldName": "max"
+            },
+            {
+              "name": "seconds",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show seconds in the time picker.",
+              "fieldName": "seconds"
+            },
+            {
+              "name": "format",
+              "type": {
+                "text": "'locale' | '12h' | '24h'"
+              },
+              "default": "'locale'",
+              "description": "Time format for the clock component.",
+              "fieldName": "format"
+            },
+            {
+              "name": "minute-interval",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
+              "fieldName": "minuteInterval"
+            },
+            {
+              "name": "default-time",
+              "type": {
+                "text": "'start' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Default time to set when a date is selected without existing time.",
+              "fieldName": "defaultTime"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "fieldName": "distance"
+            },
+            {
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "fieldName": "skidding"
+            },
+            {
+              "name": "inline-pickers",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display the pickers inline without the dropdown and input fields.",
+              "fieldName": "inlinePickers"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the input is populated.",
+              "fieldName": "clearable"
+            },
+            {
+              "name": "normalize",
+              "type": {
+                "text": "'none' | 'local'"
+              },
+              "default": "'none'",
+              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+              "fieldName": "normalizeMode"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.",
+          "tagNameWithoutPrefix": "date-time-picker",
+          "tagName": "lynk-date-time-picker",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n * @documentation https://lynk.design/components/date-time-picker\n * @status experimental\n * @since 1.4\n *\n * @dependency lynk-calendar\n * @dependency lynk-clock\n * @dependency lynk-dropdown\n * @dependency lynk-icon\n * @dependency lynk-icon-button\n * @dependency lynk-tooltip\n *\n * @event ev-change - Emitted when the date-time value changes.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-clear - Emitted when the input is cleared.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot label-end - Optional right-aligned content shown at the end of the label row.\n * @slot help-text-end - Optional right-aligned content shown at the end of the help-text row.\n * @slot help-text - Help text that describes how to use the input.\n * @slot 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.\n *\n * @csspart base - The component's base wrapper.\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart input-group - The input group container.\n * @csspart date-input - The date input field.\n * @csspart time-input - The time input field.\n * @csspart hour-input - The hour number input (24h mode).\n * @csspart minute-input - The minute number input (24h mode).\n * @csspart second-input - The second number input (24h mode).\n * @csspart trigger - The dropdown trigger button.\n * @csspart dropdown - The dropdown panel.\n * @csspart calendar - The calendar component.\n * @csspart clock - The clock component.\n */",
+          "documentation": "https://lynk.design/components/date-time-picker",
+          "status": "experimental",
+          "since": "1.4",
+          "dependencies": [
+            "lynk-calendar",
+            "lynk-clock",
+            "lynk-dropdown",
+            "lynk-icon",
+            "lynk-icon-button",
+            "lynk-tooltip"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkDateTimePicker",
+            "module": "components/date-time-picker/date-time-picker.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkDivider",
+          "cssProperties": [
+            {
+              "description": "The color of the divider.",
+              "name": "--color"
+            },
+            {
+              "description": "The width of the divider.",
+              "name": "--width"
+            },
+            {
+              "description": "The spacing of the divider.",
+              "name": "--spacing"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "attribute": "vertical",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleVerticalChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Dividers are used to visually separate or group elements.",
+          "tagNameWithoutPrefix": "divider",
+          "tagName": "lynk-divider",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://lynk.design/components/divider\n * @status stable\n * @since 1.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
+          "documentation": "https://lynk.design/components/divider",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkDivider",
+            "module": "components/divider/divider.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/dialog/dialog.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkDialog",
+          "cssProperties": [
+            {
+              "description": "The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.",
+              "name": "--width"
+            },
+            {
+              "description": "The amount of padding to use for the header.",
+              "name": "--header-spacing"
+            },
+            {
+              "description": "The amount of padding to use for the body.",
+              "name": "--body-spacing"
+            },
+            {
+              "description": "The amount of padding to use for the footer.",
+              "name": "--footer-spacing"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The overlay.",
+              "name": "overlay"
+            },
+            {
+              "description": "The dialog panel (where the dialog and its content is rendered).",
+              "name": "panel"
+            },
+            {
+              "description": "The dialog header.",
+              "name": "header"
+            },
+            {
+              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`.",
+              "name": "header-actions"
+            },
+            {
+              "description": "The dialog title.",
+              "name": "title"
+            },
+            {
+              "description": "The close button.",
+              "name": "close-button"
+            },
+            {
+              "description": "The close button's `base` part.",
+              "name": "close-button__base"
+            },
+            {
+              "description": "The dialog body.",
+              "name": "body"
+            },
+            {
+              "description": "The dialog footer.",
+              "name": "footer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The dialog's main content.",
+              "name": ""
+            },
+            {
+              "description": "The dialog's label. Alternatively, you can use the label prop.",
+              "name": "label"
+            },
+            {
+              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`.",
+              "name": "header-actions"
             },
             {
-              "description": "Emitted when the input is cleared.",
-              "name": "ev-clear",
-              "reactName": "EvClear",
-              "eventName": "EvClearEvent"
+              "description": "The dialog's footer, usually one or more buttons representing various options.",
+              "name": "footer"
             }
           ],
-          "attributes": [
+          "members": [
             {
-              "name": "name",
+              "kind": "field",
+              "name": "dependencies",
               "type": {
-                "text": "string"
+                "text": "object"
               },
-              "default": "''",
-              "description": "The input's name attribute.",
-              "fieldName": "name"
+              "static": true,
+              "default": "{ 'lynk-icon-button': LynkIconButton }"
             },
             {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
-              "fieldName": "value"
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'footer')"
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The input's label.",
-              "fieldName": "label"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "originalTrigger",
               "type": {
-                "text": "string"
+                "text": "HTMLElement | null"
               },
-              "default": "''",
-              "description": "Placeholder text to show when the input is empty.",
-              "fieldName": "placeholder"
+              "privacy": "private"
             },
             {
-              "name": "help-text",
+              "kind": "field",
+              "name": "modal",
               "type": {
-                "text": "string"
+                "text": "Modal"
               },
-              "default": "''",
-              "description": "The help text below the input.",
-              "fieldName": "helpText"
+              "privacy": "public",
+              "description": "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."
             },
             {
-              "name": "label-end",
+              "kind": "field",
+              "name": "dialog",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
-              "fieldName": "labelEnd"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "help-text-end",
+              "kind": "field",
+              "name": "panel",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
-              "fieldName": "helpTextEnd"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "help-tip",
+              "kind": "field",
+              "name": "overlay",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "fieldName": "helpTip"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the input.",
-              "fieldName": "disabled"
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the input readonly.",
-              "fieldName": "readonly"
+              "default": "''",
+              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "name": "required",
+              "kind": "field",
+              "name": "noHeader",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the input required.",
-              "fieldName": "required"
+              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+              "attribute": "no-header",
+              "reflects": true
             },
             {
-              "name": "optional",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'fitted' | 'full' | 'auto'"
               },
-              "default": "false",
-              "description": "Marks the field as optional.",
-              "fieldName": "optional"
+              "default": "'auto'",
+              "description": "The dialog's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "dirty",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds the dirty indicator mark.",
-              "fieldName": "dirty"
+              "kind": "method",
+              "name": "requestClose",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "'close-button' | 'keyboard' | 'overlay'"
+                  }
+                }
+              ]
             },
             {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Arranges the label inline next to the date-time picker instead of above it.",
-              "fieldName": "inline"
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The input's size.",
-              "fieldName": "size"
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
             },
             {
-              "name": "min",
-              "type": {
-                "text": "string"
-              },
-              "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "fieldName": "min"
+              "kind": "method",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "name": "max",
-              "type": {
-                "text": "string"
-              },
-              "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "fieldName": "max"
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "name": "seconds",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show seconds in the time picker.",
-              "fieldName": "seconds"
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the dialog."
             },
             {
-              "name": "format",
-              "type": {
-                "text": "'locale' | '12h' | '24h'"
-              },
-              "default": "'locale'",
-              "description": "Time format for the clock component.",
-              "fieldName": "format"
-            },
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the dialog"
+            }
+          ],
+          "events": [
             {
-              "name": "minute-interval",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-              "fieldName": "minuteInterval"
+              "description": "Emitted when the dialog opens.",
+              "name": "ev-show",
+              "reactName": "EvShow",
+              "eventName": "EvShowEvent"
             },
             {
-              "name": "default-time",
-              "type": {
-                "text": "'start' | 'end'"
-              },
-              "default": "'start'",
-              "description": "Default time to set when a date is selected without existing time.",
-              "fieldName": "defaultTime"
+              "description": "Emitted after the dialog opens and all animations are complete.",
+              "name": "ev-after-show",
+              "reactName": "EvAfterShow",
+              "eventName": "EvAfterShowEvent"
             },
             {
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
+              "description": "Emitted when the dialog closes.",
+              "name": "ev-hide",
+              "reactName": "EvHide",
+              "eventName": "EvHideEvent"
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "fieldName": "placement"
+              "description": "Emitted after the dialog closes and all animations are complete.",
+              "name": "ev-after-hide",
+              "reactName": "EvAfterHide",
+              "eventName": "EvAfterHideEvent"
             },
             {
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "fieldName": "distance"
+              "description": "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.",
+              "name": "ev-initial-focus",
+              "reactName": "EvInitialFocus",
+              "eventName": "EvInitialFocusEvent"
             },
             {
-              "name": "skidding",
               "type": {
-                "text": "number"
+                "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "fieldName": "skidding"
-            },
+              "description": "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.",
+              "name": "ev-request-close",
+              "reactName": "EvRequestClose",
+              "eventName": "EvRequestCloseEvent"
+            }
+          ],
+          "attributes": [
             {
-              "name": "inline-pickers",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Display the pickers inline without the dropdown and input fields.",
-              "fieldName": "inlinePickers"
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+              "fieldName": "open"
             },
             {
-              "name": "clearable",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "no-header",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a clear button when the input is populated.",
-              "fieldName": "clearable"
+              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+              "fieldName": "noHeader"
             },
             {
-              "name": "normalize",
+              "name": "size",
               "type": {
-                "text": "'none' | 'local'"
+                "text": "'fitted' | 'full' | 'auto'"
               },
-              "default": "'none'",
-              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
-              "fieldName": "normalizeMode"
+              "default": "'auto'",
+              "description": "The dialog's size.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.",
-          "tagNameWithoutPrefix": "date-time-picker",
-          "tagName": "lynk-date-time-picker",
+          "summary": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.",
+          "tagNameWithoutPrefix": "dialog",
+          "tagName": "lynk-dialog",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n * @documentation https://lynk.design/components/date-time-picker\n * @status experimental\n * @since 1.4\n *\n * @dependency lynk-calendar\n * @dependency lynk-clock\n * @dependency lynk-dropdown\n * @dependency lynk-icon\n * @dependency lynk-icon-button\n * @dependency lynk-tooltip\n *\n * @event ev-change - Emitted when the date-time value changes.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-clear - Emitted when the input is cleared.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot label-end - Optional right-aligned content shown at the end of the label row.\n * @slot help-text-end - Optional right-aligned content shown at the end of the help-text row.\n * @slot help-text - Help text that describes how to use the input.\n * @slot 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.\n *\n * @csspart base - The component's base wrapper.\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart input-group - The input group container.\n * @csspart date-input - The date input field.\n * @csspart time-input - The time input field.\n * @csspart hour-input - The hour number input (24h mode).\n * @csspart minute-input - The minute number input (24h mode).\n * @csspart second-input - The second number input (24h mode).\n * @csspart trigger - The dropdown trigger button.\n * @csspart dropdown - The dropdown panel.\n * @csspart calendar - The calendar component.\n * @csspart clock - The clock component.\n */",
-          "documentation": "https://lynk.design/components/date-time-picker",
-          "status": "experimental",
-          "since": "1.4",
+          "jsDoc": "/**\n * @summary Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n * @documentation https://lynk.design/components/dialog\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot header-actions - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @event ev-show - Emitted when the dialog opens.\n * @event ev-after-show - Emitted after the dialog opens and all animations are complete.\n * @event ev-hide - Emitted when the dialog closes.\n * @event ev-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event ev-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling\n *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} ev-request-close - Emitted when the user attempts to\n *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart overlay - The overlay.\n * @csspart panel - The dialog panel (where the dialog and its content is rendered).\n * @csspart header - The dialog header.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n * @csspart title - The dialog title.\n * @csspart close-button - The close button.\n * @csspart close-button__base - The close button's `base` part.\n * @csspart body - The dialog body.\n * @csspart footer - The dialog footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.\n * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.\n * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Lynk modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Lynk's focus trapping.\n */",
+          "documentation": "https://lynk.design/components/dialog",
+          "since": "1.0",
+          "status": "stable",
           "dependencies": [
-            "lynk-calendar",
-            "lynk-clock",
-            "lynk-dropdown",
-            "lynk-icon",
-            "lynk-icon-button",
-            "lynk-tooltip"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkDateTimePicker",
-            "module": "components/date-time-picker/date-time-picker.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkDivider",
-          "cssProperties": [
+            "lynk-icon-button"
+          ],
+          "animations": [
             {
-              "description": "The color of the divider.",
-              "name": "--color"
+              "name": "dialog.show",
+              "description": "The animation to use when showing the dialog."
             },
             {
-              "description": "The width of the divider.",
-              "name": "--width"
+              "name": "dialog.hide",
+              "description": "The animation to use when hiding the dialog."
             },
             {
-              "description": "The spacing of the divider.",
-              "name": "--spacing"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "attribute": "vertical",
-              "reflects": true
+              "name": "dialog.denyClose",
+              "description": "The animation to use when a request to close the dialog is denied."
             },
             {
-              "kind": "method",
-              "name": "handleVerticalChange"
-            }
-          ],
-          "attributes": [
+              "name": "dialog.overlay.show",
+              "description": "The animation to use when showing the dialog's overlay."
+            },
             {
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "fieldName": "vertical"
+              "name": "dialog.overlay.hide",
+              "description": "The animation to use when hiding the dialog's overlay."
             }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Dividers are used to visually separate or group elements.",
-          "tagNameWithoutPrefix": "divider",
-          "tagName": "lynk-divider",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://lynk.design/components/divider\n * @status stable\n * @since 1.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
-          "documentation": "https://lynk.design/components/divider",
-          "status": "stable",
-          "since": "1.0"
+          ]
         }
       ],
       "exports": [
@@ -10033,8 +10083,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkDivider",
-            "module": "components/divider/divider.js"
+            "name": "LynkDialog",
+            "module": "components/dialog/dialog.js"
           }
         }
       ]
@@ -26835,6 +26885,10 @@
               "description": "The tag content.",
               "name": "content"
             },
+            {
+              "description": "The check icon shown when a selectable tag is checked.",
+              "name": "checked-icon"
+            },
             {
               "description": "The remove button.",
               "name": "remove-button"
@@ -26852,6 +26906,10 @@
             {
               "description": "Used to prepend an icon or similar element to the tag.",
               "name": "prefix"
+            },
+            {
+              "description": "The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check.",
+              "name": "checked-icon"
             }
           ],
           "members": [
@@ -26862,7 +26920,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-icon-button': LynkIconButton }"
+              "default": "{ 'lynk-icon': LynkIcon, 'lynk-icon-button': LynkIconButton }"
             },
             {
               "kind": "field",
@@ -26906,6 +26964,28 @@
               "attribute": "appearance",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag behave like a checkbox: clicking (or pressing Space/Enter when focused) toggles\nits `checked` state. A check icon appears in the prefix position and the appearance switches to\n`loud` while checked. Ignored on `removable` tags, whose click target is the remove button.",
+              "attribute": "selectable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked state of a `selectable` tag.",
+              "attribute": "checked",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -26955,6 +27035,45 @@
               "description": "Draws a solid filled badge-styled tag (deprecated - use appearance=\"loud\" instead).",
               "attribute": "badge"
             },
+            {
+              "kind": "method",
+              "name": "toggleChecked",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSelectableChange"
+            },
             {
               "kind": "method",
               "name": "handleRemoveClick"
@@ -26966,6 +27085,12 @@
               "name": "ev-remove",
               "reactName": "EvRemove",
               "eventName": "EvRemoveEvent"
+            },
+            {
+              "description": "Emitted when a `selectable` tag's `checked` state changes from user interaction.",
+              "name": "ev-change",
+              "reactName": "EvChange",
+              "eventName": "EvChangeEvent"
             }
           ],
           "attributes": [
@@ -26992,6 +27117,24 @@
               "description": "The tag's visual appearance.",
               "fieldName": "appearance"
             },
+            {
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag behave like a checkbox: clicking (or pressing Space/Enter when focused) toggles\nits `checked` state. A check icon appears in the prefix position and the appearance switches to\n`loud` while checked. Ignored on `removable` tags, whose click target is the remove button.",
+              "fieldName": "selectable"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked state of a `selectable` tag.",
+              "fieldName": "checked"
+            },
             {
               "name": "size",
               "type": {
@@ -27042,7 +27185,7 @@
           "tagNameWithoutPrefix": "tag",
           "tagName": "lynk-tag",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://lynk.design/components/tag\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The tag's content.\n * @slot prefix - Used to prepend an icon or similar element to the tag.\n *\n * @event ev-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart content - The tag content.\n * @csspart remove-button - The remove button.\n * @csspart remove-button__base - The remove button's `base` part.\n */",
+          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://lynk.design/components/tag\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The tag's content.\n * @slot prefix - Used to prepend an icon or similar element to the tag.\n * @slot checked-icon - The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check.\n *\n * @event ev-remove - Emitted when the remove button is activated.\n * @event ev-change - Emitted when a `selectable` tag's `checked` state changes from user interaction.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart content - The tag content.\n * @csspart checked-icon - The check icon shown when a selectable tag is checked.\n * @csspart remove-button - The remove button.\n * @csspart remove-button__base - The remove button's `base` part.\n */",
           "documentation": "https://lynk.design/components/tag",
           "since": "1.0",
           "status": "stable",
@@ -31857,7 +32000,7 @@
   "package": {
     "name": "@uplynk/lynk-design",
     "description": "A library of web components for building web applications with the Uplynk user interface style guide.",
-    "version": "1.18.0",
+    "version": "1.19.0",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"