@uplynk/lynk-design 1.18.0 → 1.18.1

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"
             },
             {
@@ -766,6 +864,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 +937,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 +1022,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 +1376,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkBox",
-            "module": "components/box/box.js"
+            "name": "LynkAnimation",
+            "module": "components/animation/animation.js"
           }
         }
       ]
@@ -8785,94 +8825,84 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/date-time-picker/date-time-picker.js",
+      "path": "components/drawer/drawer.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkDateTimePicker",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
+          "name": "LynkDrawer",
+          "cssProperties": [
             {
-              "description": "The form control wrapper.",
-              "name": "form-control"
+              "description": "The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.",
+              "name": "--size"
             },
             {
-              "description": "The label wrapper.",
-              "name": "form-control-label"
+              "description": "The amount of padding to use for the header.",
+              "name": "--header-spacing"
             },
             {
-              "description": "The input wrapper.",
-              "name": "form-control-input"
+              "description": "The amount of padding to use for the body.",
+              "name": "--body-spacing"
             },
             {
-              "description": "The help text wrapper.",
-              "name": "form-control-help-text"
-            },
+              "description": "The amount of padding to use for the footer.",
+              "name": "--footer-spacing"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The input group container.",
-              "name": "input-group"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             },
             {
-              "description": "The date input field.",
-              "name": "date-input"
+              "description": "The overlay.",
+              "name": "overlay"
             },
             {
-              "description": "The time input field.",
-              "name": "time-input"
+              "description": "The drawer panel (where the drawer and its content is rendered).",
+              "name": "panel"
             },
             {
-              "description": "The hour number input (24h mode).",
-              "name": "hour-input"
+              "description": "The drawer header.",
+              "name": "header"
             },
             {
-              "description": "The minute number input (24h mode).",
-              "name": "minute-input"
+              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`.",
+              "name": "header-actions"
             },
             {
-              "description": "The second number input (24h mode).",
-              "name": "second-input"
+              "description": "The drawer title.",
+              "name": "title"
             },
             {
-              "description": "The dropdown trigger button.",
-              "name": "trigger"
+              "description": "The close button.",
+              "name": "close-button"
             },
             {
-              "description": "The dropdown panel.",
-              "name": "dropdown"
+              "description": "The close button's `base` part.",
+              "name": "close-button__base"
             },
             {
-              "description": "The calendar component.",
-              "name": "calendar"
+              "description": "The drawer body.",
+              "name": "body"
             },
             {
-              "description": "The clock component.",
-              "name": "clock"
+              "description": "The drawer footer.",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "The input's label. Alternatively, you can use the label prop.",
+              "description": "The drawer's content.",
+              "name": ""
+            },
+            {
+              "description": "The drawer'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"
-            },
-            {
-              "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"
+              "description": "The drawer's footer, usually one or more buttons representing various options.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -8883,1563 +8913,1573 @@
                 "text": "object"
               },
               "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": "{ 'lynk-icon-button': LynkIconButton }"
             },
             {
               "kind": "field",
-              "name": "formControlController",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this)"
+              "default": "new HasSlotController(this, 'footer')"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "localize",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController( this, 'help-text', 'help-tip', 'label', 'label-end', 'help-text-end' )"
-            },
-            {
-              "kind": "field",
-              "name": "dropdown",
-              "type": {
-                "text": "LynkDropdown"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "calendar",
-              "type": {
-                "text": "LynkCalendar"
-              }
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "clock",
+              "name": "originalTrigger",
               "type": {
-                "text": "LynkClock"
-              }
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "dateInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "name": "modal",
+              "privacy": "public",
+              "default": "new Modal(this)",
+              "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."
             },
             {
               "kind": "field",
-              "name": "timeInput",
+              "name": "closeWatcher",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "CloseWatcher | null"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hourInput",
+              "name": "drawer",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "minuteInput",
+              "name": "panel",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "secondInput",
+              "name": "overlay",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "isOpen",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "pendingValue",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "''",
+              "description": "The drawer'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, you can use the `label` slot\ninstead.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "originalValue",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "text": "'top' | 'end' | 'bottom' | 'start'"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "'end'",
+              "description": "The direction from which the drawer will open.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "use24HourInput",
+              "name": "contained",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "description": "Whether to use the 24-hour number inputs instead of native time input",
-              "readonly": true
+              "default": "false",
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
+              "attribute": "contained",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "noHeader",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The input's name attribute.",
-              "attribute": "name"
+              "default": "false",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "attribute": "no-header",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "_value",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "requestClose",
               "privacy": "private",
-              "default": "''"
+              "parameters": [
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "'close-button' | 'keyboard' | 'overlay'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleNoModalChange"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the drawer."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the drawer"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the drawer opens.",
+              "name": "ev-show",
+              "reactName": "EvShow",
+              "eventName": "EvShowEvent"
+            },
+            {
+              "description": "Emitted after the drawer opens and all animations are complete.",
+              "name": "ev-after-show",
+              "reactName": "EvAfterShow",
+              "eventName": "EvAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the drawer closes.",
+              "name": "ev-hide",
+              "reactName": "EvHide",
+              "eventName": "EvHideEvent"
+            },
+            {
+              "description": "Emitted after the drawer closes and all animations are complete.",
+              "name": "ev-after-hide",
+              "reactName": "EvAfterHide",
+              "eventName": "EvAfterHideEvent"
+            },
+            {
+              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.",
+              "name": "ev-initial-focus",
+              "reactName": "EvInitialFocus",
+              "eventName": "EvInitialFocusEvent"
+            },
+            {
               "type": {
-                "text": "string"
+                "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
               },
-              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
-              "attribute": "value"
-            },
+              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.",
+              "name": "ev-request-close",
+              "reactName": "EvRequestClose",
+              "eventName": "EvRequestCloseEvent"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "defaultValue",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Gets or sets the default value used to reset this element."
+              "default": "false",
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "fieldName": "open"
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The input's label.",
-              "attribute": "label"
+              "description": "The drawer'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, you can use the `label` slot\ninstead.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "text": "'top' | 'end' | 'bottom' | 'start'"
               },
-              "default": "''",
-              "description": "Placeholder text to show when the input is empty.",
-              "attribute": "placeholder"
+              "default": "'end'",
+              "description": "The direction from which the drawer will open.",
+              "fieldName": "placement"
             },
             {
-              "kind": "field",
-              "name": "helpText",
+              "name": "contained",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The help text below the input.",
-              "attribute": "help-text"
+              "default": "false",
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
+              "fieldName": "contained"
             },
             {
-              "kind": "field",
-              "name": "labelEnd",
+              "name": "no-header",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
-              "attribute": "label-end"
-            },
+              "default": "false",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "fieldName": "noHeader"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Drawers slide in from a container to expose additional options and information.",
+          "tagNameWithoutPrefix": "drawer",
+          "tagName": "lynk-drawer",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://lynk.design/components/drawer\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event ev-show - Emitted when the drawer opens.\n * @event ev-after-show - Emitted after the drawer opens and all animations are complete.\n * @event ev-hide - Emitted when the drawer closes.\n * @event ev-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event ev-initial-focus - Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer 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 drawer panel (where the drawer and its content is rendered).\n * @csspart header - The drawer header.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n * @csspart title - The drawer title.\n * @csspart close-button - The close button.\n * @csspart close-button__base - The close button's `base` part.\n * @csspart body - The drawer body.\n * @csspart footer - The drawer footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer 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 drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer'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/drawer",
+          "since": "1.0",
+          "status": "stable",
+          "dependencies": [
+            "lynk-icon-button"
+          ],
+          "animations": [
             {
-              "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"
+              "name": "drawer.showTop",
+              "description": "The animation to use when showing a drawer with `top` placement."
             },
             {
-              "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"
+              "name": "drawer.showEnd",
+              "description": "The animation to use when showing a drawer with `end` placement."
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the input.",
-              "attribute": "disabled",
-              "reflects": true
+              "name": "drawer.showBottom",
+              "description": "The animation to use when showing a drawer with `bottom` placement."
             },
             {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the input readonly.",
-              "attribute": "readonly",
-              "reflects": true
+              "name": "drawer.showStart",
+              "description": "The animation to use when showing a drawer with `start` placement."
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the input required.",
-              "attribute": "required",
-              "reflects": true
+              "name": "drawer.hideTop",
+              "description": "The animation to use when hiding a drawer with `top` placement."
             },
             {
-              "kind": "field",
-              "name": "optional",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Marks the field as optional.",
-              "attribute": "optional",
-              "reflects": true
+              "name": "drawer.hideEnd",
+              "description": "The animation to use when hiding a drawer with `end` placement."
             },
             {
-              "kind": "field",
-              "name": "dirty",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds the dirty indicator mark.",
-              "attribute": "dirty",
-              "reflects": true
+              "name": "drawer.hideBottom",
+              "description": "The animation to use when hiding a drawer with `bottom` placement."
             },
             {
-              "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
+              "name": "drawer.hideStart",
+              "description": "The animation to use when hiding a drawer with `start` placement."
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The input's size.",
-              "attribute": "size",
-              "reflects": true
+              "name": "drawer.denyClose",
+              "description": "The animation to use when a request to close the drawer is denied."
             },
             {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "string"
-              },
-              "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "attribute": "min"
+              "name": "drawer.overlay.show",
+              "description": "The animation to use when showing the drawer's overlay."
             },
             {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "string"
-              },
-              "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "attribute": "max"
+              "name": "drawer.overlay.hide",
+              "description": "The animation to use when hiding the drawer's overlay."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkDrawer",
+            "module": "components/drawer/drawer.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"
             },
             {
-              "kind": "field",
-              "name": "seconds",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show seconds in the time picker.",
-              "attribute": "seconds"
+              "description": "The form control wrapper.",
+              "name": "form-control"
             },
             {
-              "kind": "field",
-              "name": "format",
-              "type": {
-                "text": "'locale' | '12h' | '24h'"
-              },
-              "default": "'locale'",
-              "description": "Time format for the clock component.",
-              "attribute": "format"
+              "description": "The label wrapper.",
+              "name": "form-control-label"
             },
             {
-              "kind": "field",
-              "name": "minuteInterval",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-              "attribute": "minute-interval"
+              "description": "The input wrapper.",
+              "name": "form-control-input"
             },
             {
-              "kind": "field",
-              "name": "defaultTime",
-              "type": {
-                "text": "'start' | 'end'"
-              },
-              "default": "'start'",
-              "description": "Default time to set when a date is selected without existing time.",
-              "attribute": "default-time"
+              "description": "The help text wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "kind": "field",
-              "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.",
-              "attribute": "hoist"
+              "description": "The input group container.",
+              "name": "input-group"
             },
             {
-              "kind": "field",
-              "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.",
-              "attribute": "placement",
-              "reflects": true
+              "description": "The date input field.",
+              "name": "date-input"
             },
             {
-              "kind": "field",
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "attribute": "distance"
+              "description": "The time input field.",
+              "name": "time-input"
             },
             {
-              "kind": "field",
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "attribute": "skidding"
+              "description": "The hour number input (24h mode).",
+              "name": "hour-input"
             },
             {
-              "kind": "field",
-              "name": "inlinePickers",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Display the pickers inline without the dropdown and input fields.",
-              "attribute": "inline-pickers"
+              "description": "The minute number input (24h mode).",
+              "name": "minute-input"
             },
             {
-              "kind": "field",
-              "name": "clearable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds a clear button when the input is populated.",
-              "attribute": "clearable"
+              "description": "The second number input (24h mode).",
+              "name": "second-input"
             },
             {
-              "kind": "field",
-              "name": "normalizeMode",
-              "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.",
-              "attribute": "normalize"
+              "description": "The dropdown trigger button.",
+              "name": "trigger"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "description": "The dropdown panel.",
+              "name": "dropdown"
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "description": "The calendar component.",
+              "name": "calendar"
             },
             {
-              "kind": "field",
-              "name": "handleDropdownShow",
-              "privacy": "private"
-            },
+              "description": "The clock component.",
+              "name": "clock"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "handleDropdownHide",
-              "privacy": "private"
+              "description": "The input's label. Alternatively, you can use the label prop.",
+              "name": "label"
             },
             {
-              "kind": "method",
-              "name": "handleDateInput",
-              "privacy": "private"
+              "description": "Optional right-aligned content shown at the end of the label row.",
+              "name": "label-end"
             },
             {
-              "kind": "method",
-              "name": "handleTimeInput",
-              "privacy": "private"
+              "description": "Optional right-aligned content shown at the end of the help-text row.",
+              "name": "help-text-end"
             },
             {
-              "kind": "method",
-              "name": "handleDateChange",
-              "privacy": "private"
+              "description": "Help text that describes how to use the input.",
+              "name": "help-text"
             },
             {
-              "kind": "method",
-              "name": "handleTimeChange",
-              "privacy": "private"
-            },
+              "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": "method",
-              "name": "pad",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
               },
-              "parameters": [
-                {
-                  "name": "n",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "description": "Pad a number to 2 digits"
+              "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 }"
             },
             {
-              "kind": "method",
-              "name": "buildTimeFrom24HourInputs",
+              "kind": "field",
+              "name": "formControlController",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "description": "Build HH:mm or HH:mm:ss from the 24h number inputs"
+              "readonly": true,
+              "default": "new FormControlController(this)"
             },
             {
-              "kind": "method",
-              "name": "handle24HourTimeInput",
-              "privacy": "private"
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController( this, 'help-text', 'help-tip', 'label', 'label-end', 'help-text-end' )"
             },
             {
-              "kind": "method",
-              "name": "handle24HourTimeChange",
-              "privacy": "private"
+              "kind": "field",
+              "name": "dropdown",
+              "type": {
+                "text": "LynkDropdown"
+              }
             },
             {
-              "kind": "method",
-              "name": "handle24HourKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handle arrow keys to increment/decrement values in 24h inputs"
+              "kind": "field",
+              "name": "calendar",
+              "type": {
+                "text": "LynkCalendar"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleDateInputClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "clock",
+              "type": {
+                "text": "LynkClock"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleTimeInputClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "dateInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
+              "name": "timeInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleCalendarChange",
-              "privacy": "private"
+              "kind": "field",
+              "name": "hourInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleClockChange",
-              "privacy": "private"
+              "kind": "field",
+              "name": "minuteInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "applyPendingValue",
-              "privacy": "private"
+              "kind": "field",
+              "name": "secondInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateInlineValue",
-              "privacy": "private"
+              "kind": "field",
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleCancel",
+              "kind": "field",
+              "name": "pendingValue",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "handleClear",
+              "kind": "field",
+              "name": "originalValue",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "handleTriggerClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "updateValueFromInputs",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "normalizeValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "val",
-                  "type": {
-                    "text": "string | number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toLocalISOString",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "date",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ],
-              "description": "Converts a Date to a local ISO string with timezone offset (e.g. 2024-01-15T16:30:00-06:00)"
-            },
-            {
-              "kind": "method",
-              "name": "getTimezoneOffset",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "isoString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "updateInputsFromValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updatePickersFromValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updatePickersFromInputs",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updatePendingValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "canClear",
+              "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": "canApply",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the dropdown."
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the dropdown."
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the date input."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the input."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message."
-            },
-            {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "name": "name",
+              "type": {
+                "text": "string"
               },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message."
-            },
-            {
-              "kind": "method",
-              "name": "handleValueChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleNormalizeModeChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
+              "default": "''",
+              "description": "The input's name attribute.",
+              "attribute": "name"
             },
             {
-              "kind": "method",
-              "name": "render24HourTimeInputs",
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "isHidden",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the date-time value changes.",
-              "name": "ev-change",
-              "reactName": "EvChange",
-              "eventName": "EvChangeEvent"
-            },
-            {
-              "description": "Emitted when the control receives input.",
-              "name": "ev-input",
-              "reactName": "EvInput",
-              "eventName": "EvInputEvent"
+              "default": "''"
             },
             {
-              "description": "Emitted when the input is cleared.",
-              "name": "ev-clear",
-              "reactName": "EvClear",
-              "eventName": "EvClearEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
+              "kind": "field",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "The input's name attribute.",
-              "fieldName": "name"
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "attribute": "value"
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "defaultValue",
               "type": {
                 "text": "string"
               },
-              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
-              "fieldName": "value"
+              "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.",
-              "fieldName": "label"
+              "attribute": "label"
             },
             {
+              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Placeholder text to show when the input is empty.",
-              "fieldName": "placeholder"
+              "attribute": "placeholder"
             },
             {
-              "name": "help-text",
+              "kind": "field",
+              "name": "helpText",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The help text below the input.",
-              "fieldName": "helpText"
+              "attribute": "help-text"
             },
             {
-              "name": "label-end",
+              "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.",
-              "fieldName": "labelEnd"
+              "attribute": "label-end"
             },
             {
-              "name": "help-text-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.",
-              "fieldName": "helpTextEnd"
+              "attribute": "help-text-end"
             },
             {
-              "name": "help-tip",
+              "kind": "field",
+              "name": "helpTip",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
-              "fieldName": "helpTip"
+              "attribute": "help-tip"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the input.",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the input readonly.",
-              "fieldName": "readonly"
+              "attribute": "readonly",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the input required.",
-              "fieldName": "required"
+              "attribute": "required",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "optional",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Marks the field as optional.",
-              "fieldName": "optional"
+              "attribute": "optional",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "dirty",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds the dirty indicator mark.",
-              "fieldName": "dirty"
+              "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.",
-              "fieldName": "inline"
+              "attribute": "inline",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
               "description": "The input's size.",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "min",
               "type": {
                 "text": "string"
               },
               "description": "The minimum date in ISO format (YYYY-MM-DD).",
-              "fieldName": "min"
+              "attribute": "min"
             },
             {
+              "kind": "field",
               "name": "max",
               "type": {
                 "text": "string"
               },
               "description": "The maximum date in ISO format (YYYY-MM-DD).",
-              "fieldName": "max"
+              "attribute": "max"
             },
             {
+              "kind": "field",
               "name": "seconds",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Show seconds in the time picker.",
-              "fieldName": "seconds"
+              "attribute": "seconds"
             },
             {
+              "kind": "field",
               "name": "format",
               "type": {
                 "text": "'locale' | '12h' | '24h'"
               },
               "default": "'locale'",
               "description": "Time format for the clock component.",
-              "fieldName": "format"
+              "attribute": "format"
             },
             {
-              "name": "minute-interval",
+              "kind": "field",
+              "name": "minuteInterval",
               "type": {
                 "text": "number"
               },
               "default": "1",
               "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-              "fieldName": "minuteInterval"
+              "attribute": "minute-interval"
             },
             {
-              "name": "default-time",
+              "kind": "field",
+              "name": "defaultTime",
               "type": {
                 "text": "'start' | 'end'"
               },
               "default": "'start'",
               "description": "Default time to set when a date is selected without existing time.",
-              "fieldName": "defaultTime"
+              "attribute": "default-time"
             },
             {
+              "kind": "field",
               "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"
+              "attribute": "hoist"
             },
             {
+              "kind": "field",
               "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"
+              "attribute": "placement",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "distance",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "fieldName": "distance"
+              "attribute": "distance"
             },
             {
+              "kind": "field",
               "name": "skidding",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "fieldName": "skidding"
+              "attribute": "skidding"
             },
             {
-              "name": "inline-pickers",
+              "kind": "field",
+              "name": "inlinePickers",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Display the pickers inline without the dropdown and input fields.",
-              "fieldName": "inlinePickers"
+              "attribute": "inline-pickers"
             },
             {
+              "kind": "field",
               "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds a clear button when the input is populated.",
-              "fieldName": "clearable"
+              "attribute": "clearable"
             },
             {
-              "name": "normalize",
+              "kind": "field",
+              "name": "normalizeMode",
               "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": [
+              "attribute": "normalize"
+            },
             {
-              "description": "The color of the divider.",
-              "name": "--color"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "description": "The width of the divider.",
-              "name": "--width"
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "description": "The spacing of the divider.",
-              "name": "--spacing"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "handleDropdownShow",
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
+              "name": "handleDropdownHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDateInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleTimeInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDateChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleTimeChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "pad",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "attribute": "vertical",
-              "reflects": true
+              "parameters": [
+                {
+                  "name": "n",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Pad a number to 2 digits"
             },
             {
               "kind": "method",
-              "name": "handleVerticalChange"
-            }
-          ],
-          "attributes": [
+              "name": "buildTimeFrom24HourInputs",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Build HH:mm or HH:mm:ss from the 24h number inputs"
+            },
             {
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "handle24HourTimeInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handle24HourTimeChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handle24HourKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Handle arrow keys to increment/decrement values in 24h inputs"
+            },
+            {
+              "kind": "method",
+              "name": "handleDateInputClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTimeInputClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCalendarChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClockChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "applyPendingValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateInlineValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCancel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClear",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateValueFromInputs",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "normalizeValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               },
-              "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/drawer/drawer.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkDrawer",
-          "cssProperties": [
+              "parameters": [
+                {
+                  "name": "val",
+                  "type": {
+                    "text": "string | number"
+                  }
+                }
+              ]
+            },
             {
-              "description": "The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.",
-              "name": "--size"
+              "kind": "method",
+              "name": "toLocalISOString",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "Converts a Date to a local ISO string with timezone offset (e.g. 2024-01-15T16:30:00-06:00)"
             },
             {
-              "description": "The amount of padding to use for the header.",
-              "name": "--header-spacing"
+              "kind": "method",
+              "name": "getTimezoneOffset",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "isoString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "The amount of padding to use for the body.",
-              "name": "--body-spacing"
+              "kind": "method",
+              "name": "updateInputsFromValue",
+              "privacy": "private"
             },
             {
-              "description": "The amount of padding to use for the footer.",
-              "name": "--footer-spacing"
-            }
-          ],
-          "cssParts": [
+              "kind": "method",
+              "name": "updatePickersFromValue",
+              "privacy": "private"
+            },
             {
-              "description": "The component's internal wrapper.",
-              "name": "base"
+              "kind": "method",
+              "name": "updatePickersFromInputs",
+              "privacy": "private"
             },
             {
-              "description": "The overlay.",
-              "name": "overlay"
+              "kind": "method",
+              "name": "updatePendingValue",
+              "privacy": "private"
             },
             {
-              "description": "The drawer panel (where the drawer and its content is rendered).",
-              "name": "panel"
+              "kind": "field",
+              "name": "canClear",
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "description": "The drawer header.",
-              "name": "header"
+              "kind": "field",
+              "name": "canApply",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the dropdown."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the dropdown."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the date input."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the input."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "description": "Optional actions to add to the header. Works best with `<lynk-icon-button>`.",
-              "name": "header-actions"
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if invalid."
             },
             {
-              "description": "The drawer title.",
-              "name": "title"
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message."
             },
             {
-              "description": "The close button.",
-              "name": "close-button"
+              "kind": "method",
+              "name": "handleValueChange"
             },
             {
-              "description": "The close button's `base` part.",
-              "name": "close-button__base"
+              "kind": "method",
+              "name": "handleNormalizeModeChange"
             },
             {
-              "description": "The drawer body.",
-              "name": "body"
+              "kind": "method",
+              "name": "handleDisabledChange"
             },
             {
-              "description": "The drawer footer.",
-              "name": "footer"
+              "kind": "method",
+              "name": "render24HourTimeInputs",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isHidden",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             }
           ],
-          "slots": [
+          "events": [
             {
-              "description": "The drawer's content.",
-              "name": ""
+              "description": "Emitted when the date-time value changes.",
+              "name": "ev-change",
+              "reactName": "EvChange",
+              "eventName": "EvChangeEvent"
             },
             {
-              "description": "The drawer's label. Alternatively, you can use the label prop.",
-              "name": "label"
+              "description": "Emitted when the control receives input.",
+              "name": "ev-input",
+              "reactName": "EvInput",
+              "eventName": "EvInputEvent"
             },
             {
-              "description": "The drawer's footer, usually one or more buttons representing various options.",
-              "name": "footer"
+              "description": "Emitted when the input is cleared.",
+              "name": "ev-clear",
+              "reactName": "EvClear",
+              "eventName": "EvClearEvent"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "dependencies",
+              "name": "name",
               "type": {
-                "text": "object"
+                "text": "string"
               },
-              "static": true,
-              "default": "{ 'lynk-icon-button': LynkIconButton }"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'footer')"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "''",
+              "description": "The input's name attribute.",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "originalTrigger",
+              "name": "value",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "string"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "modal",
-              "privacy": "public",
-              "default": "new Modal(this)",
-              "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."
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "closeWatcher",
+              "name": "label",
               "type": {
-                "text": "CloseWatcher | null"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "description": "The input's label.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "drawer",
+              "name": "placeholder",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show when the input is empty.",
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "panel",
+              "name": "help-text",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help text below the input.",
+              "fieldName": "helpText"
             },
             {
-              "kind": "field",
-              "name": "overlay",
+              "name": "label-end",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional right-aligned content shown at the end of the label. Alternatively, use the label-end slot.",
+              "fieldName": "labelEnd"
             },
             {
-              "kind": "field",
-              "name": "open",
+              "name": "help-text-end",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
-              "attribute": "open",
-              "reflects": true
+              "default": "''",
+              "description": "Optional right-aligned content shown at the end of the help text. Alternatively, use the help-text-end slot.",
+              "fieldName": "helpTextEnd"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "help-tip",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The drawer'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, you can use the `label` slot\ninstead.",
-              "attribute": "label",
-              "reflects": true
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "fieldName": "helpTip"
             },
             {
-              "kind": "field",
-              "name": "placement",
+              "name": "disabled",
               "type": {
-                "text": "'top' | 'end' | 'bottom' | 'start'"
+                "text": "boolean"
               },
-              "default": "'end'",
-              "description": "The direction from which the drawer will open.",
-              "attribute": "placement",
-              "reflects": true
+              "default": "false",
+              "description": "Disables the input.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "contained",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
-              "attribute": "contained",
-              "reflects": true
+              "description": "Makes the input readonly.",
+              "fieldName": "readonly"
             },
             {
-              "kind": "field",
-              "name": "noHeader",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-              "attribute": "no-header",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "requestClose",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "source",
-                  "type": {
-                    "text": "'close-button' | 'keyboard' | 'overlay'"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private"
+              "description": "Makes the input required.",
+              "fieldName": "required"
             },
             {
-              "kind": "method",
-              "name": "handleOpenChange"
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the field as optional.",
+              "fieldName": "optional"
             },
             {
-              "kind": "method",
-              "name": "handleNoModalChange"
+              "name": "dirty",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds the dirty indicator mark.",
+              "fieldName": "dirty"
             },
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the drawer."
+              "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": "hide",
-              "description": "Hides the drawer"
-            }
-          ],
-          "events": [
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The input's size.",
+              "fieldName": "size"
+            },
             {
-              "description": "Emitted when the drawer opens.",
-              "name": "ev-show",
-              "reactName": "EvShow",
-              "eventName": "EvShowEvent"
+              "name": "min",
+              "type": {
+                "text": "string"
+              },
+              "description": "The minimum date in ISO format (YYYY-MM-DD).",
+              "fieldName": "min"
             },
             {
-              "description": "Emitted after the drawer opens and all animations are complete.",
-              "name": "ev-after-show",
-              "reactName": "EvAfterShow",
-              "eventName": "EvAfterShowEvent"
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "description": "The maximum date in ISO format (YYYY-MM-DD).",
+              "fieldName": "max"
             },
             {
-              "description": "Emitted when the drawer closes.",
-              "name": "ev-hide",
-              "reactName": "EvHide",
-              "eventName": "EvHideEvent"
+              "name": "seconds",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show seconds in the time picker.",
+              "fieldName": "seconds"
             },
             {
-              "description": "Emitted after the drawer closes and all animations are complete.",
-              "name": "ev-after-hide",
-              "reactName": "EvAfterHide",
-              "eventName": "EvAfterHideEvent"
+              "name": "format",
+              "type": {
+                "text": "'locale' | '12h' | '24h'"
+              },
+              "default": "'locale'",
+              "description": "Time format for the clock component.",
+              "fieldName": "format"
             },
             {
-              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.",
-              "name": "ev-initial-focus",
-              "reactName": "EvInitialFocus",
-              "eventName": "EvInitialFocusEvent"
+              "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": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
+                "text": "'start' | 'end'"
               },
-              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.",
-              "name": "ev-request-close",
-              "reactName": "EvRequestClose",
-              "eventName": "EvRequestCloseEvent"
-            }
-          ],
-          "attributes": [
+              "default": "'start'",
+              "description": "Default time to set when a date is selected without existing time.",
+              "fieldName": "defaultTime"
+            },
             {
-              "name": "open",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
-              "fieldName": "open"
+              "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": "label",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "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": "''",
-              "description": "The drawer'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, you can use the `label` slot\ninstead.",
-              "fieldName": "label"
+              "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": "placement",
+              "name": "distance",
               "type": {
-                "text": "'top' | 'end' | 'bottom' | 'start'"
+                "text": "number"
               },
-              "default": "'end'",
-              "description": "The direction from which the drawer will open.",
-              "fieldName": "placement"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "fieldName": "distance"
             },
             {
-              "name": "contained",
+              "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": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent.",
-              "fieldName": "contained"
+              "description": "Display the pickers inline without the dropdown and input fields.",
+              "fieldName": "inlinePickers"
             },
             {
-              "name": "no-header",
+              "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-              "fieldName": "noHeader"
+              "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": "Drawers slide in from a container to expose additional options and information.",
-          "tagNameWithoutPrefix": "drawer",
-          "tagName": "lynk-drawer",
+          "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 Drawers slide in from a container to expose additional options and information.\n * @documentation https://lynk.design/components/drawer\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event ev-show - Emitted when the drawer opens.\n * @event ev-after-show - Emitted after the drawer opens and all animations are complete.\n * @event ev-hide - Emitted when the drawer closes.\n * @event ev-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event ev-initial-focus - Emitted when the drawer 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer 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 drawer panel (where the drawer and its content is rendered).\n * @csspart header - The drawer header.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n * @csspart title - The drawer title.\n * @csspart close-button - The close button.\n * @csspart close-button__base - The close button's `base` part.\n * @csspart body - The drawer body.\n * @csspart footer - The drawer footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer 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 drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer'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/drawer",
-          "since": "1.0",
-          "status": "stable",
+          "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-icon-button"
-          ],
-          "animations": [
-            {
-              "name": "drawer.showTop",
-              "description": "The animation to use when showing a drawer with `top` placement."
-            },
-            {
-              "name": "drawer.showEnd",
-              "description": "The animation to use when showing a drawer with `end` placement."
-            },
-            {
-              "name": "drawer.showBottom",
-              "description": "The animation to use when showing a drawer with `bottom` placement."
-            },
-            {
-              "name": "drawer.showStart",
-              "description": "The animation to use when showing a drawer with `start` placement."
-            },
-            {
-              "name": "drawer.hideTop",
-              "description": "The animation to use when hiding a drawer with `top` placement."
-            },
+            "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": [
             {
-              "name": "drawer.hideEnd",
-              "description": "The animation to use when hiding a drawer with `end` placement."
+              "description": "The color of the divider.",
+              "name": "--color"
             },
             {
-              "name": "drawer.hideBottom",
-              "description": "The animation to use when hiding a drawer with `bottom` placement."
+              "description": "The width of the divider.",
+              "name": "--width"
             },
             {
-              "name": "drawer.hideStart",
-              "description": "The animation to use when hiding a drawer with `start` placement."
-            },
+              "description": "The spacing of the divider.",
+              "name": "--spacing"
+            }
+          ],
+          "members": [
             {
-              "name": "drawer.denyClose",
-              "description": "The animation to use when a request to close the drawer is denied."
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "attribute": "vertical",
+              "reflects": true
             },
             {
-              "name": "drawer.overlay.show",
-              "description": "The animation to use when showing the drawer's overlay."
-            },
+              "kind": "method",
+              "name": "handleVerticalChange"
+            }
+          ],
+          "attributes": [
             {
-              "name": "drawer.overlay.hide",
-              "description": "The animation to use when hiding the drawer's overlay."
+              "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": [
@@ -10447,8 +10487,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkDrawer",
-            "module": "components/drawer/drawer.js"
+            "name": "LynkDivider",
+            "module": "components/divider/divider.js"
           }
         }
       ]
@@ -31857,7 +31897,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.18.1",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"