@uplynk/lynk-design 1.19.0 → 1.19.2

package/cdn/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@uplynk/lynk-design",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "lynk-accordion",
-          "description": "A vertically stacked set of interactive [Panels](/components/panel) that can expand to reveal an associated section of content.\n---\n\n\n### **Methods:**\n - **expandAll()** - Expands all panels.\n- **collapseAll()** - Collapses all panels",
+          "description": "A vertically stacked set of interactive [Panels](/components/panel) that can expand to reveal an associated section of content.\n\n---\n\n\n### **Methods:**\n - **expandAll()** - Expands all panels.\n- **collapseAll()** - Collapses all panels",
           "doc-url": "",
           "attributes": [
             {
@@ -50,55 +50,173 @@
           }
         },
         {
-          "name": "lynk-auto-grid",
-          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "name": "lynk-animation",
+          "description": "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\n---\n\n\n### **Events:**\n - **ev-cancel** - Emitted when the animation is canceled.\n- **ev-finish** - Emitted when the animation finishes.\n- **ev-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "auto-size",
-              "description": "How to justify auto-grid items",
-              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
+              "name": "name",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "value": { "type": "string", "default": "'none'" }
             },
             {
-              "name": "min-size",
-              "description": "How to align auto-grid items to each-other",
-              "value": { "type": "string", "default": "'20rem'" }
+              "name": "play",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "gap",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "value": {
-                "type": "string",
-                "default": "'var(--lynk-spacing-base)'"
-              }
+              "name": "delay",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "direction",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "value": { "type": "PlaybackDirection", "default": "'normal'" }
+            },
+            {
+              "name": "duration",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "value": { "type": "number", "default": "1000" }
+            },
+            {
+              "name": "easing",
+              "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)`.",
+              "value": { "type": "string", "default": "'linear'" }
+            },
+            {
+              "name": "end-delay",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "fill",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "value": { "type": "FillMode", "default": "'auto'" }
+            },
+            {
+              "name": "iterations",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "value": { "type": "string", "default": "Infinity" }
+            },
+            {
+              "name": "iteration-start",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "playback-rate",
+              "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.",
+              "value": { "type": "number", "default": "1" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "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."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-cancel",
+              "description": "Emitted when the animation is canceled."
+            },
+            {
+              "name": "ev-finish",
+              "description": "Emitted when the animation finishes."
+            },
+            {
+              "name": "ev-start",
+              "description": "Emitted when the animation starts or restarts."
             }
           ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
           "js": {
             "properties": [
+              { "name": "defaultSlot", "type": "Promise<HTMLSlotElement>" },
               {
-                "name": "autoSize",
-                "description": "How to justify auto-grid items",
-                "type": "'fit' | 'fill'"
+                "name": "name",
+                "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+                "type": "string"
               },
               {
-                "name": "minSize",
-                "description": "How to align auto-grid items to each-other",
-                "type": "string"
+                "name": "play",
+                "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+                "type": "boolean"
               },
               {
-                "name": "gap",
-                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+                "name": "delay",
+                "description": "The number of milliseconds to delay the start of the animation.",
+                "type": "number"
+              },
+              {
+                "name": "direction",
+                "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+                "type": "PlaybackDirection"
+              },
+              {
+                "name": "duration",
+                "description": "The number of milliseconds each iteration of the animation takes to complete.",
+                "type": "number"
+              },
+              {
+                "name": "easing",
+                "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)`.",
                 "type": "string"
+              },
+              {
+                "name": "endDelay",
+                "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+                "type": "number"
+              },
+              {
+                "name": "fill",
+                "description": "Sets how the animation applies styles to its target before and after its execution.",
+                "type": "FillMode"
+              },
+              {
+                "name": "iterations",
+                "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops."
+              },
+              {
+                "name": "iterationStart",
+                "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+                "type": "number"
+              },
+              {
+                "name": "keyframes",
+                "description": "The keyframes to use for the animation. If this is set, `name` will be ignored.",
+                "type": "Keyframe[] | undefined"
+              },
+              {
+                "name": "playbackRate",
+                "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.",
+                "type": "number"
+              },
+              {
+                "name": "currentTime",
+                "description": "Gets and sets the current animation time.",
+                "type": "CSSNumberish"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "ev-cancel",
+                "description": "Emitted when the animation is canceled."
+              },
+              {
+                "name": "ev-finish",
+                "description": "Emitted when the animation finishes."
+              },
+              {
+                "name": "ev-start",
+                "description": "Emitted when the animation starts or restarts."
+              }
+            ]
           }
         },
         {
           "name": "lynk-avatar",
-          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+          "description": "Avatars are used to represent a person or object.\n\n---\n\n\n### **Events:**\n - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
           "doc-url": "",
           "attributes": [
             {
@@ -180,7 +298,7 @@
         },
         {
           "name": "lynk-badge",
-          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Properties:**\n - **--background-color** - The badges background and pulse color. _(default: undefined)_\n- **--color** - The badges text color. _(default: undefined)_\n- **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Badges are used to draw attention and display statuses or counts.\n\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Properties:**\n - **--background-color** - The badges background and pulse color. _(default: undefined)_\n- **--color** - The badges text color. _(default: undefined)_\n- **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -224,9 +342,18 @@
             "events": []
           }
         },
+        {
+          "name": "lynk-box",
+          "description": "\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--align** - Custom text align (left, center, right). _(default: left)_\n- **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_\n- **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_\n- **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_\n- **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_\n- **--height** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--width** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "lynk-alert",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -297,245 +424,71 @@
             },
             {
               "name": "ev-after-hide",
-              "description": "Emitted after the alert closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "countdownElement", "type": "HTMLElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-                "type": "boolean"
-              },
-              {
-                "name": "closable",
-                "description": "Makes the alert closable.",
-                "type": "boolean"
-              },
-              {
-                "name": "type",
-                "description": "The alert's type (color).",
-                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              {
-                "name": "appearance",
-                "description": "The alert's visual appearance.",
-                "type": "'standard' | 'filled'"
-              },
-              {
-                "name": "size",
-                "description": "The alert's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "duration",
-                "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`."
-              },
-              {
-                "name": "countdown",
-                "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.",
-                "type": "'rtl' | 'ltr' | undefined"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-show",
-                "description": "Emitted when the alert opens."
-              },
-              {
-                "name": "ev-after-show",
-                "description": "Emitted after the alert opens and all animations are complete."
-              },
-              {
-                "name": "ev-hide",
-                "description": "Emitted when the alert closes."
-              },
-              {
-                "name": "ev-after-hide",
-                "description": "Emitted after the alert closes and all animations are complete."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-box",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--align** - Custom text align (left, center, right). _(default: left)_\n- **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_\n- **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_\n- **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_\n- **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_\n- **--height** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--width** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
-        {
-          "name": "lynk-animation",
-          "description": "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---\n\n\n### **Events:**\n - **ev-cancel** - Emitted when the animation is canceled.\n- **ev-finish** - Emitted when the animation finishes.\n- **ev-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "value": { "type": "string", "default": "'none'" }
-            },
-            {
-              "name": "play",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "delay",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "direction",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "value": { "type": "PlaybackDirection", "default": "'normal'" }
-            },
-            {
-              "name": "duration",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "value": { "type": "number", "default": "1000" }
-            },
-            {
-              "name": "easing",
-              "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)`.",
-              "value": { "type": "string", "default": "'linear'" }
-            },
-            {
-              "name": "end-delay",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "fill",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "value": { "type": "FillMode", "default": "'auto'" }
-            },
-            {
-              "name": "iterations",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "value": { "type": "string", "default": "Infinity" }
-            },
-            {
-              "name": "iteration-start",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "playback-rate",
-              "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.",
-              "value": { "type": "number", "default": "1" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "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."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-cancel",
-              "description": "Emitted when the animation is canceled."
-            },
-            {
-              "name": "ev-finish",
-              "description": "Emitted when the animation finishes."
-            },
-            {
-              "name": "ev-start",
-              "description": "Emitted when the animation starts or restarts."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "Promise<HTMLSlotElement>" },
-              {
-                "name": "name",
-                "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-                "type": "string"
-              },
+              "description": "Emitted after the alert closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "countdownElement", "type": "HTMLElement" },
               {
-                "name": "play",
-                "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+                "name": "open",
+                "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
                 "type": "boolean"
               },
               {
-                "name": "delay",
-                "description": "The number of milliseconds to delay the start of the animation.",
-                "type": "number"
-              },
-              {
-                "name": "direction",
-                "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-                "type": "PlaybackDirection"
-              },
-              {
-                "name": "duration",
-                "description": "The number of milliseconds each iteration of the animation takes to complete.",
-                "type": "number"
-              },
-              {
-                "name": "easing",
-                "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)`.",
-                "type": "string"
-              },
-              {
-                "name": "endDelay",
-                "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-                "type": "number"
-              },
-              {
-                "name": "fill",
-                "description": "Sets how the animation applies styles to its target before and after its execution.",
-                "type": "FillMode"
+                "name": "closable",
+                "description": "Makes the alert closable.",
+                "type": "boolean"
               },
               {
-                "name": "iterations",
-                "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops."
+                "name": "type",
+                "description": "The alert's type (color).",
+                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
               {
-                "name": "iterationStart",
-                "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-                "type": "number"
+                "name": "appearance",
+                "description": "The alert's visual appearance.",
+                "type": "'standard' | 'filled'"
               },
               {
-                "name": "keyframes",
-                "description": "The keyframes to use for the animation. If this is set, `name` will be ignored.",
-                "type": "Keyframe[] | undefined"
+                "name": "size",
+                "description": "The alert's size.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
-                "name": "playbackRate",
-                "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.",
-                "type": "number"
+                "name": "duration",
+                "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`."
               },
               {
-                "name": "currentTime",
-                "description": "Gets and sets the current animation time.",
-                "type": "CSSNumberish"
+                "name": "countdown",
+                "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.",
+                "type": "'rtl' | 'ltr' | undefined"
               }
             ],
             "events": [
               {
-                "name": "ev-cancel",
-                "description": "Emitted when the animation is canceled."
+                "name": "ev-show",
+                "description": "Emitted when the alert opens."
               },
               {
-                "name": "ev-finish",
-                "description": "Emitted when the animation finishes."
+                "name": "ev-after-show",
+                "description": "Emitted after the alert opens and all animations are complete."
               },
               {
-                "name": "ev-start",
-                "description": "Emitted when the animation starts or restarts."
+                "name": "ev-hide",
+                "description": "Emitted when the alert closes."
+              },
+              {
+                "name": "ev-after-hide",
+                "description": "Emitted after the alert closes and all animations are complete."
               }
             ]
           }
         },
         {
           "name": "lynk-breadcrumb",
-          "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -570,7 +523,7 @@
         },
         {
           "name": "lynk-breadcrumb-item",
-          "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<lynk-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
+          "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<lynk-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
           "doc-url": "",
           "attributes": [
             {
@@ -629,9 +582,50 @@
             "events": []
           }
         },
+        {
+          "name": "lynk-button-group",
+          "description": "Button groups can be used to group related buttons into sections.\n\n---\n\n\n### **Slots:**\n - _default_ - One or more `<lynk-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "gapped",
+              "description": "Add a gap between buttons so they appear like a cluster of buttons instead of a flush group",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<lynk-button>` elements to display in the button group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "disableRole", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+                "type": "string"
+              },
+              {
+                "name": "gapped",
+                "description": "Add a gap between buttons so they appear like a cluster of buttons instead of a flush group",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-button",
-          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the button loses focus.\n- **ev-click** - Emitted when the button is clicked.\n- **ev-focus** - Emitted when the button gains focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied..\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - Used to prepend an icon or similar element to the button.\n- **suffix** - Used to append an icon or similar element to the button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **prefix** - The prefix slot's container.\n- **label** - The button's label.\n- **suffix** - The suffix slot's container.\n- **caret** - The button's caret.",
+          "description": "Buttons represent actions that are available to the user.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the button loses focus.\n- **ev-click** - Emitted when the button is clicked.\n- **ev-focus** - Emitted when the button gains focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied..\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - Used to prepend an icon or similar element to the button.\n- **suffix** - Used to append an icon or similar element to the button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **prefix** - The prefix slot's container.\n- **label** - The button's label.\n- **suffix** - The suffix slot's container.\n- **caret** - The button's caret.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -979,50 +973,9 @@
             ]
           }
         },
-        {
-          "name": "lynk-button-group",
-          "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<lynk-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "gapped",
-              "description": "Add a gap between buttons so they appear like a cluster of buttons instead of a flush group",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more `<lynk-button>` elements to display in the button group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "disableRole", "type": "boolean" },
-              {
-                "name": "label",
-                "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-                "type": "string"
-              },
-              {
-                "name": "gapped",
-                "description": "Add a gap between buttons so they appear like a cluster of buttons instead of a flush group",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-calendar",
-          "description": "A calendar component that supports single date, multiple dates, and date range selection.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the user commits an alteration to the control's value.\n\n### **Methods:**\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### **CSS Properties:**\n - **--selected-color** - The selected date color _(default: undefined)_\n- **--selected-text-color** - The text color on a selected date _(default: undefined)_\n- **--hover-color** - The background hover color for a date _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The calendar's base wrapper.\n- **heading** - The calendar's heading - showing month and year.\n- **weekday** - The weekday header cells.\n- **weeknumber-header** - The week number header cell.\n- **weeknumber** - The week number cells.\n- **day** - The base part for all date cells.\n- **today** - The today's date cell.\n- **selected** - The selected date cell.\n- **range-start** - The start date of a range selection.\n- **range-end** - The end date of a range selection.\n- **in-range** - The dates within a range selection.\n- **outside** - The dates outside the current month.\n- **disabled** - The disabled date cells.",
+          "description": "A calendar component that supports single date, multiple dates, and date range selection.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the user commits an alteration to the control's value.\n\n### **Methods:**\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### **CSS Properties:**\n - **--selected-color** - The selected date color _(default: undefined)_\n- **--selected-text-color** - The text color on a selected date _(default: undefined)_\n- **--hover-color** - The background hover color for a date _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The calendar's base wrapper.\n- **heading** - The calendar's heading - showing month and year.\n- **weekday** - The weekday header cells.\n- **weeknumber-header** - The week number header cell.\n- **weeknumber** - The week number cells.\n- **day** - The base part for all date cells.\n- **today** - The today's date cell.\n- **selected** - The selected date cell.\n- **range-start** - The start date of a range selection.\n- **range-end** - The end date of a range selection.\n- **in-range** - The dates within a range selection.\n- **outside** - The dates outside the current month.\n- **disabled** - The disabled date cells.",
           "doc-url": "",
           "attributes": [
             {
@@ -1179,7 +1132,7 @@
         },
         {
           "name": "lynk-card",
-          "description": "Cards can be used to group media with related subjects into a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--state-color** - A custom color for the interactive state. _(default: undefined)_\n- **--pulse-speed** - A custom speed for the pulse animation. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
+          "description": "Cards can be used to group media with related subjects into a container.\n\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--state-color** - A custom color for the interactive state. _(default: undefined)_\n- **--pulse-speed** - A custom speed for the pulse animation. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -1298,7 +1251,7 @@
         },
         {
           "name": "lynk-checkbox",
-          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when the control's checked state changes.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the checkbox receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<lynk-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
+          "description": "Checkboxes allow the user to toggle an option on or off.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when the control's checked state changes.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the checkbox receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<lynk-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -1493,7 +1446,7 @@
         },
         {
           "name": "lynk-clock",
-          "description": "A time picker component with hour, minute, second, and AM/PM columns.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n\n### **Methods:**\n - **scrollToCurrentTime(instant)** - Public method to scroll to the current selected time\n\n### **CSS Properties:**\n - **--height** - The default height of the clock columns _(default: undefined)_\n- **--selected-color** - The selected date color _(default: undefined)_\n- **--selected-text-color** - The text color on a selected date _(default: undefined)_\n- **--hover-color** - The background hover color for a date _(default: undefined)_\n- **--border-color** - The color of the dividers between columns _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **time-picker** - The time picker container.\n- **column** - A time column (hours, minutes, or AM/PM).\n- **column-header** - The header of a time column.\n- **time-item** - An individual time item.\n- **time-item--selected** - The selected time item.\n- **ampm-toggle** - The AM/PM toggle buttons.",
+          "description": "A time picker component with hour, minute, second, and AM/PM columns.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n\n### **Methods:**\n - **scrollToCurrentTime(instant)** - Public method to scroll to the current selected time\n\n### **CSS Properties:**\n - **--height** - The default height of the clock columns _(default: undefined)_\n- **--selected-color** - The selected date color _(default: undefined)_\n- **--selected-text-color** - The text color on a selected date _(default: undefined)_\n- **--hover-color** - The background hover color for a date _(default: undefined)_\n- **--border-color** - The color of the dividers between columns _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **time-picker** - The time picker container.\n- **column** - A time column (hours, minutes, or AM/PM).\n- **column-header** - The header of a time column.\n- **time-item** - An individual time item.\n- **time-item--selected** - The selected time item.\n- **ampm-toggle** - The AM/PM toggle buttons.",
           "doc-url": "",
           "attributes": [
             {
@@ -1585,7 +1538,7 @@
         },
         {
           "name": "lynk-col",
-          "description": "Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.\n---\n",
+          "description": "Table `<lynk-col>` components will behave like a native `<col>` HTML element within a `<lynk-table>`.\n\n---\n",
           "doc-url": "",
           "attributes": [],
           "events": [],
@@ -1593,7 +1546,7 @@
         },
         {
           "name": "lynk-colgroup",
-          "description": "Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-col>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Table `<lynk-colgroup>` components will behave like a native `<colgroup>` HTML element within a `<lynk-table>`.\n\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-col>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -1605,9 +1558,56 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "lynk-auto-grid",
+          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "auto-size",
+              "description": "How to justify auto-grid items",
+              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
+            },
+            {
+              "name": "min-size",
+              "description": "How to align auto-grid items to each-other",
+              "value": { "type": "string", "default": "'20rem'" }
+            },
+            {
+              "name": "gap",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "value": {
+                "type": "string",
+                "default": "'var(--lynk-spacing-base)'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "autoSize",
+                "description": "How to justify auto-grid items",
+                "type": "'fit' | 'fill'"
+              },
+              {
+                "name": "minSize",
+                "description": "How to align auto-grid items to each-other",
+                "type": "string"
+              },
+              {
+                "name": "gap",
+                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-color-picker",
-          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the color picker loses focus.\n- **ev-change** - Emitted when the color picker's value changes.\n- **ev-focus** - Emitted when the color picker receives focus.\n- **ev-input** - Emitted when the color picker receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the color picker.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the color picker. Alternatively, you can use the `help-tip` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
+          "description": "Color pickers allow the user to select a color.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the color picker loses focus.\n- **ev-change** - Emitted when the color picker's value changes.\n- **ev-focus** - Emitted when the color picker receives focus.\n- **ev-input** - Emitted when the color picker receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the color picker.\n- **help-tip** - Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the color picker. Alternatively, you can use the `help-tip` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -1964,7 +1964,7 @@
         },
         {
           "name": "lynk-combobox",
-          "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the combobox's menu opens.\n- **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the combobox's menu closes.\n- **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **ev-error** - Emitted when the combobox menu fails to open.\n- **ev-add-option** - Emitted when a custom option is added via allowCustomValues.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a ev-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "description": "Comboboxes allow you to choose items from a menu of predefined options.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the combobox's menu opens.\n- **ev-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the combobox's menu closes.\n- **ev-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **ev-error** - Emitted when the combobox menu fails to open.\n- **ev-add-option** - Emitted when a custom option is added via allowCustomValues.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a ev-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -2419,7 +2419,7 @@
         },
         {
           "name": "lynk-copy-button",
-          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **ev-copy** - Emitted when the data has been copied.\n- **ev-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
+          "description": "Copies text data to the clipboard when the user clicks the trigger.\n\n---\n\n\n### **Events:**\n - **ev-copy** - Emitted when the data has been copied.\n- **ev-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -2563,7 +2563,7 @@
         },
         {
           "name": "lynk-date-picker",
-          "description": "A date picker that combines calendar component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **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### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.",
+          "description": "A date picker that combines calendar component with accessible input field.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **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### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.",
           "doc-url": "",
           "attributes": [
             {
@@ -2834,7 +2834,7 @@
         },
         {
           "name": "lynk-date-time-picker",
-          "description": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date-time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **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### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.\n- **clock** - The clock component.",
+          "description": "A date-time picker that combines calendar and clock components with accessible input fields. Accepts ISO 8601 format by default or Unix timestamps.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the date-time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the date input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **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### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **date-input** - The date input field.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **calendar** - The calendar component.\n- **clock** - The clock component.",
           "doc-url": "",
           "attributes": [
             {
@@ -3204,32 +3204,9 @@
             ]
           }
         },
-        {
-          "name": "lynk-divider",
-          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "vertical",
-              "description": "Draws the divider in a vertical orientation.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "vertical",
-                "description": "Draws the divider in a vertical orientation.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-dialog",
-          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
+          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -3360,7 +3337,7 @@
         },
         {
           "name": "lynk-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the drawer opens.\n- **ev-after-show** - Emitted after the drawer opens and all animations are complete.\n- **ev-hide** - Emitted when the drawer closes.\n- **ev-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **ev-initial-focus** - 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.\n- **ev-request-close** - 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.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's content.\n- **label** - The drawer's label. Alternatively, you can use the label prop.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - 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. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The drawer panel (where the drawer and its content is rendered).\n- **header** - The drawer header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The drawer title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The drawer body.\n- **footer** - The drawer footer.",
+          "description": "Drawers slide in from a container to expose additional options and information.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the drawer opens.\n- **ev-after-show** - Emitted after the drawer opens and all animations are complete.\n- **ev-hide** - Emitted when the drawer closes.\n- **ev-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **ev-initial-focus** - 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.\n- **ev-request-close** - 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.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's content.\n- **label** - The drawer's label. Alternatively, you can use the label prop.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - 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. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The drawer panel (where the drawer and its content is rendered).\n- **header** - The drawer header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The drawer title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The drawer body.\n- **footer** - The drawer footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -3494,9 +3471,32 @@
             ]
           }
         },
+        {
+          "name": "lynk-divider",
+          "description": "Dividers are used to visually separate or group elements.\n\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "description": "Draws the divider in a vertical orientation.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "vertical",
+                "description": "Draws the divider in a vertical orientation.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-dropdown",
-          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
@@ -3654,7 +3654,7 @@
         },
         {
           "name": "lynk-flank",
-          "description": "Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -3714,7 +3714,7 @@
         },
         {
           "name": "lynk-form-field",
-          "description": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n---\n\n\n### **Events:**\n - **ev-focus** - Emitted when field or slotted element gains focus.\n- **ev-blur** - Emitted when field or slotted element loses focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - Custom label content.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label wrapper.\n- **label-content** - The container that wraps the label text and its marks.\n- **label-end** - The right-aligned content container at the end of the label.\n- **control** - The component's slotted control wrapper.\n- **help-text** - The component's help-text wrapper.\n- **help-text-content** - The container that wraps the help-text content.\n- **help-text-end** - The right-aligned content container at the end of the help text.",
+          "description": "A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.\n\n---\n\n\n### **Events:**\n - **ev-focus** - Emitted when field or slotted element gains focus.\n- **ev-blur** - Emitted when field or slotted element loses focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - Custom label content.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label wrapper.\n- **label-content** - The container that wraps the label text and its marks.\n- **label-end** - The right-aligned content container at the end of the label.\n- **control** - The component's slotted control wrapper.\n- **help-text** - The component's help-text wrapper.\n- **help-text-content** - The container that wraps the help-text content.\n- **help-text-end** - The right-aligned content container at the end of the help text.",
           "doc-url": "",
           "attributes": [
             {
@@ -3903,7 +3903,7 @@
         },
         {
           "name": "lynk-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n---\n",
+          "description": "Formats a number as a human readable bytes value.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -3949,7 +3949,7 @@
         },
         {
           "name": "lynk-format-date",
-          "description": "Formats a date/time using the specified locale and options.\n---\n",
+          "description": "Formats a date/time using the specified locale and options.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -4084,7 +4084,7 @@
         },
         {
           "name": "lynk-format-number",
-          "description": "Formats a number using the specified locale and options.\n---\n",
+          "description": "Formats a number using the specified locale and options.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -4203,7 +4203,7 @@
         },
         {
           "name": "lynk-grid",
-          "description": "The Grid component helps create visual consistency and structure between layouts while allowing flexibility across a wide variety of designs. It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--width** - Set a custom width for the grid container element. Defaults to 100%. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "The Grid component helps create visual consistency and structure between layouts while allowing flexibility across a wide variety of designs. It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--width** - Set a custom width for the grid container element. Defaults to 100%. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -4296,7 +4296,7 @@
         },
         {
           "name": "lynk-icon",
-          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **ev-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **ev-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",
+          "description": "Icons are symbols that can be used to represent various options within an application.\n\n---\n\n\n### **Events:**\n - **ev-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **ev-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",
           "doc-url": "",
           "attributes": [
             {
@@ -4367,7 +4367,7 @@
         },
         {
           "name": "lynk-icon-button",
-          "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the icon button loses focus.\n- **ev-click** - Emitted when the button is clicked.\n- **ev-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the icon button loses focus.\n- **ev-click** - Emitted when the button is clicked.\n- **ev-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -4505,7 +4505,7 @@
         },
         {
           "name": "lynk-include",
-          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **ev-load** - Emitted when the included file is loaded.\n- **ev-error** - Emitted when the included file fails to load due to an error.",
+          "description": "Includes give you the power to embed external HTML files into the page.\n\n---\n\n\n### **Events:**\n - **ev-load** - Emitted when the included file is loaded.\n- **ev-error** - Emitted when the included file fails to load due to an error.",
           "doc-url": "",
           "attributes": [
             {
@@ -4571,7 +4571,7 @@
         },
         {
           "name": "lynk-input",
-          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-clear** - Emitted when the clear button is activated.\n- **ev-enter** - Emitted when the return key is pressed while the input has focus.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **action** - append a custom button to the input.\n- **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **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### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **input** - The input control.\n- **prefix** - The input prefix container.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The input suffix container.",
+          "description": "Inputs collect data from the user.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-clear** - Emitted when the clear button is activated.\n- **ev-enter** - Emitted when the return key is pressed while the input has focus.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **action** - append a custom button to the input.\n- **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **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### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **input** - The input control.\n- **prefix** - The input prefix container.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The input suffix container.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -5107,7 +5107,7 @@
         },
         {
           "name": "lynk-intersection-observer",
-          "description": "The Intersection Observer component offers a thin, declarative interface to the [`IntersectionObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).\n---\n\n\n### **Events:**\n - **ev-enter-view** - Emitted when a slotted element enters the view.\n- **ev-exit-view** - Emitted when a slotted element exits the view.\n\n### **Slots:**\n - _default_ - One or more elements to watch for intersection.",
+          "description": "The Intersection Observer component offers a thin, declarative interface to the [`IntersectionObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).\n\n---\n\n\n### **Events:**\n - **ev-enter-view** - Emitted when a slotted element enters the view.\n- **ev-exit-view** - Emitted when a slotted element exits the view.\n\n### **Slots:**\n - _default_ - One or more elements to watch for intersection.",
           "doc-url": "",
           "attributes": [
             {
@@ -5158,7 +5158,7 @@
         },
         {
           "name": "lynk-menu",
-          "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **ev-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
+          "description": "Menus provide a list of options for the user to choose from.\n\n---\n\n\n### **Events:**\n - **ev-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -5189,7 +5189,7 @@
         },
         {
           "name": "lynk-menu-item",
-          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Events:**\n - **ev-click** - Emitted when a menu item is clicked\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
+          "description": "Menu items provide options for the user to pick from in a menu.\n\n---\n\n\n### **Events:**\n - **ev-click** - Emitted when a menu item is clicked\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
           "doc-url": "",
           "attributes": [
             {
@@ -5282,7 +5282,7 @@
         },
         {
           "name": "lynk-menu-label",
-          "description": "Menu labels are used to describe a group of menu items.\n---\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Menu labels are used to describe a group of menu items.\n\n---\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [],
           "slots": [{ "name": "", "description": "The menu label's content." }],
@@ -5291,7 +5291,7 @@
         },
         {
           "name": "lynk-mutation-observer",
-          "description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n---\n\n\n### **Events:**\n - **ev-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
+          "description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n\n---\n\n\n### **Events:**\n - **ev-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
           "doc-url": "",
           "attributes": [
             {
@@ -5379,7 +5379,7 @@
         },
         {
           "name": "lynk-nav",
-          "description": "Navs display a hierarchical menu of [nav items](/components/nav-item) for navigating within an app or page. Items with children can be expanded and collapsed as desired by the user.\n---\n\n\n### **Events:**\n - **ev-select** - Emitted when a nav item is selected.\n\n### **Slots:**\n - _default_ - The nav's content, including nav items, nav groups, and dividers.\n\n### **CSS Properties:**\n - **--max-width** - Customize the max nav width. _(default: 100%)_\n- **--background** - Customize the nav background. _(default: transparent)_\n- **--padding** - Customize the nav padding. _(default: var(--lynk-spacing-x-small) 0)_\n- **--border-top** - Customize the top border. _(default: none)_\n- **--border-right** - Customize the right border. _(default: none)_\n- **--border-bottom** - Customize the bottom border. _(default: none)_\n- **--border-left** - Customize the left border. _(default: none)_\n- **--border-radius** - Customize the border radius. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Navs display a hierarchical menu of [nav items](/components/nav-item) for navigating within an app or page. Items with children can be expanded and collapsed as desired by the user.\n\n---\n\n\n### **Events:**\n - **ev-select** - Emitted when a nav item is selected.\n\n### **Slots:**\n - _default_ - The nav's content, including nav items, nav groups, and dividers.\n\n### **CSS Properties:**\n - **--max-width** - Customize the max nav width. _(default: 100%)_\n- **--background** - Customize the nav background. _(default: transparent)_\n- **--padding** - Customize the nav padding. _(default: var(--lynk-spacing-x-small) 0)_\n- **--border-top** - Customize the top border. _(default: none)_\n- **--border-right** - Customize the right border. _(default: none)_\n- **--border-bottom** - Customize the bottom border. _(default: none)_\n- **--border-left** - Customize the left border. _(default: none)_\n- **--border-radius** - Customize the border radius. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -5426,7 +5426,7 @@
         },
         {
           "name": "lynk-nav-group",
-          "description": "Group navigation items into categories with a header.\n---\n\n\n### **Slots:**\n - _default_ - the Nav Items to display in association with the heading\n- **heading** - The nav groups heading. Alternatively, you can use the heading prop.\n\n### **CSS Properties:**\n - **--color** - Customize the header color. _(default: var(--lynk-color-neutral-600))_\n\n### **CSS Parts:**\n - **base** - The nav groups heading wrapper.\n- **children** - The nav groups children wrapper.",
+          "description": "Group navigation items into categories with a header.\n\n---\n\n\n### **Slots:**\n - _default_ - the Nav Items to display in association with the heading\n- **heading** - The nav groups heading. Alternatively, you can use the heading prop.\n\n### **CSS Properties:**\n - **--color** - Customize the header color. _(default: var(--lynk-color-neutral-600))_\n\n### **CSS Parts:**\n - **base** - The nav groups heading wrapper.\n- **children** - The nav groups children wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -5460,7 +5460,7 @@
         },
         {
           "name": "lynk-nav-item",
-          "description": "Nav items allow the user to navigate or trigger actions from within a navigation menu.\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the nav item expands.\n- **ev-after-expand** - Emitted after the nav item expands and all animations are complete.\n- **ev-collapse** - Emitted when the nav item collapses.\n- **ev-after-collapse** - Emitted after the nav item collapses and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the nav item.\n- **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n- **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkNavItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The nav item's label.\n- **prefix** - Used to prepend an icon or similar element to the nav item.\n- **suffix** - Used to append an icon or similar element to the nav item.\n- **children** - Used to nest nav items under a nav item.\n\n### **CSS Properties:**\n - **--hover-bg-color** - Customize the hover styles. _(default: var(--lynk-color-gray-a25))_\n- **--selected-bg-color** - Customize the selected styles. _(default: var(--lynk-color-primary-700))_\n- **--selected-color** - Customize the selected styles. _(default: var(--lynk-color-gray-a25))_\n- **--border-radius** - Customize the border radius. _(default: var(--lynk-border-radius-medium))_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **prefix** - The prefix container.\n- **label** - The nav item label.\n- **suffix** - The suffix container.",
+          "description": "Nav items allow the user to navigate or trigger actions from within a navigation menu.\n\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the nav item expands.\n- **ev-after-expand** - Emitted after the nav item expands and all animations are complete.\n- **ev-collapse** - Emitted when the nav item collapses.\n- **ev-after-collapse** - Emitted after the nav item collapses and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the nav item.\n- **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n- **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkNavItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The nav item's label.\n- **prefix** - Used to prepend an icon or similar element to the nav item.\n- **suffix** - Used to append an icon or similar element to the nav item.\n- **children** - Used to nest nav items under a nav item.\n\n### **CSS Properties:**\n - **--hover-bg-color** - Customize the hover styles. _(default: var(--lynk-color-gray-a25))_\n- **--selected-bg-color** - Customize the selected styles. _(default: var(--lynk-color-primary-700))_\n- **--selected-color** - Customize the selected styles. _(default: var(--lynk-color-gray-a25))_\n- **--border-radius** - Customize the border radius. _(default: var(--lynk-border-radius-medium))_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **prefix** - The prefix container.\n- **label** - The nav item label.\n- **suffix** - The suffix container.",
           "doc-url": "",
           "attributes": [
             {
@@ -5629,7 +5629,7 @@
         },
         {
           "name": "lynk-number-input",
-          "description": "Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **stepUp()** - Increments the value by the step amount.\n- **stepDown()** - Decrements the value by the step amount.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the help-tip prop.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input (before steppers).\n- **increment-icon** - An icon to use in lieu of the default increment icon.\n- **decrement-icon** - An icon to use in lieu of the default decrement icon.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **input** - The internal input control.\n- **prefix** - The input prefix container.\n- **suffix** - The input suffix container.\n- **stepper-decrement** - The decrement button.\n- **stepper-increment** - The increment button.",
+          "description": "Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **stepUp()** - Increments the value by the step amount.\n- **stepDown()** - Decrements the value by the step amount.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the help-tip prop.\n- **prefix** - Used to prepend an icon or similar element to the input.\n- **suffix** - Used to append an icon or similar element to the input (before steppers).\n- **increment-icon** - An icon to use in lieu of the default increment icon.\n- **decrement-icon** - An icon to use in lieu of the default decrement icon.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **input** - The internal input control.\n- **prefix** - The input prefix container.\n- **suffix** - The input suffix container.\n- **stepper-decrement** - The decrement button.\n- **stepper-increment** - The increment button.",
           "doc-url": "",
           "attributes": [
             {
@@ -5982,7 +5982,7 @@
         },
         {
           "name": "lynk-optgroup",
-          "description": "Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `lynk-option` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the option elements.",
+          "description": "Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).\n\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `lynk-option` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the option elements.",
           "doc-url": "",
           "attributes": [
             {
@@ -6031,7 +6031,7 @@
         },
         {
           "name": "lynk-option",
-          "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+          "description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
           "doc-url": "",
           "attributes": [
             {
@@ -6079,7 +6079,7 @@
         },
         {
           "name": "lynk-page",
-          "description": "A standardized page layout container using css grid based layout areas.\n---\n\n\n### **Slots:**\n - _default_ - The page's main content area. Works best with `<lynk-page-content>`.\n- **header** - The page's header area. Breadcrumb, title, tabs and other page level controls go in here. Works best with `<lynk-page-header>`\n- **left-sidebar** - The page's left sidebar with a primary navigation menu. Works best with `<lynk-page-sidebar>`.\n- **right-sidebar** - The page's right sidebar with a secondary navigation menu. Works best with `<lynk-page-sidebar>`.\n- **left-inset-sidebar** - A visually nested left sidebar for displaying content specific menus or aside details. Works best with `<lynk-page-sidebar>`\n- **right-inset-sidebar** - A visually nested right sidebar for displaying content specific menus or aside details. Works best with `<lynk-page-sidebar>`\n- **footer** - The pages footer, usually one or more buttons representing various primary or secondary options like save or table pagination. Works best with `<lynk-page-footer>`\n\n### **CSS Parts:**\n - **base** - The page layout internal wrapper.\n- **header** - The page header area's internal wrapper.\n- **left-sidebar** - The page left sidebar area's internal wrapper.\n- **left-inset-sidebar** - The page left inset sidebar area's internal wrapper.\n- **main** - The main content area's internal wrapper.\n- **right-inset-sidebar** - The page right inset sidebar area's internal wrapper.\n- **right-sidebar** - The page right sidebar area's internal wrapper.\n- **footer** - The page footer areas internal wrapper.",
+          "description": "A standardized page layout container using css grid based layout areas.\n\n---\n\n\n### **Slots:**\n - _default_ - The page's main content area. Works best with `<lynk-page-content>`.\n- **header** - The page's header area. Breadcrumb, title, tabs and other page level controls go in here. Works best with `<lynk-page-header>`\n- **left-sidebar** - The page's left sidebar with a primary navigation menu. Works best with `<lynk-page-sidebar>`.\n- **right-sidebar** - The page's right sidebar with a secondary navigation menu. Works best with `<lynk-page-sidebar>`.\n- **left-inset-sidebar** - A visually nested left sidebar for displaying content specific menus or aside details. Works best with `<lynk-page-sidebar>`\n- **right-inset-sidebar** - A visually nested right sidebar for displaying content specific menus or aside details. Works best with `<lynk-page-sidebar>`\n- **footer** - The pages footer, usually one or more buttons representing various primary or secondary options like save or table pagination. Works best with `<lynk-page-footer>`\n\n### **CSS Parts:**\n - **base** - The page layout internal wrapper.\n- **header** - The page header area's internal wrapper.\n- **left-sidebar** - The page left sidebar area's internal wrapper.\n- **left-inset-sidebar** - The page left inset sidebar area's internal wrapper.\n- **main** - The main content area's internal wrapper.\n- **right-inset-sidebar** - The page right inset sidebar area's internal wrapper.\n- **right-sidebar** - The page right sidebar area's internal wrapper.\n- **footer** - The page footer areas internal wrapper.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -6117,7 +6117,7 @@
         },
         {
           "name": "lynk-page-content",
-          "description": "The page-content component is a fundamental layout building block to standardize how content is contained, padded, and aligned within a given device or viewport.\n---\n\n\n### **Methods:**\n - **scrollToTop()** - Scrolls the nearest scrollable parent element to the top.",
+          "description": "The page-content component is a fundamental layout building block to standardize how content is contained, padded, and aligned within a given device or viewport.\n\n---\n\n\n### **Methods:**\n - **scrollToTop()** - Scrolls the nearest scrollable parent element to the top.",
           "doc-url": "",
           "attributes": [
             {
@@ -6144,7 +6144,7 @@
         },
         {
           "name": "lynk-page-footer",
-          "description": "A Page Footer is used inside a [Page Layout](/components/page) to render a standardized sticky page footer with slots for typical page controls.\n---\n\n\n### **Slots:**\n - _default_ - The default start-aligned slot for primary page actions, Typically where `save` and `cancel` of form based pages should go.\n- **center** - Typically used for pagination info or other non interactive page metadata.\n- **secondary** - The end-aligned slot for secondary page actions. Typically where `delete` or other secondary destructive actions should go..\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **primary** - The component's primary slot area.\n- **center** - The component's center slot area.\n- **secondary** - The component's secondary slot area.",
+          "description": "A Page Footer is used inside a [Page Layout](/components/page) to render a standardized sticky page footer with slots for typical page controls.\n\n---\n\n\n### **Slots:**\n - _default_ - The default start-aligned slot for primary page actions, Typically where `save` and `cancel` of form based pages should go.\n- **center** - Typically used for pagination info or other non interactive page metadata.\n- **secondary** - The end-aligned slot for secondary page actions. Typically where `delete` or other secondary destructive actions should go..\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **primary** - The component's primary slot area.\n- **center** - The component's center slot area.\n- **secondary** - The component's secondary slot area.",
           "doc-url": "",
           "attributes": [
             {
@@ -6184,7 +6184,7 @@
         },
         {
           "name": "lynk-page-header",
-          "description": "The Page Header is used inside a [Page Layout](/components/page) to standardized header content and controls.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the title, description, and other relevant metadata.\n- **breadcrumb** - Designated top-left area for breadcrumb navigation.\n- **controls** - Designated area to right of default slot for standard header actions.\n- **aux** - Designated top-right area for auxiliary header actions.\n- **tabs** - Designated bottom area for tab navigation.\n\n### **CSS Properties:**\n - **--gap** - The gutter spacing between slots. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **breadcrumb** - The component's breadcrumb area wrapper.\n- **controls** - The component's controls area wrapper.\n- **main** - The component's main area wrapper.\n- **aux** - The component's auxiliary controls area wrapper.\n- **tabs** - The component's tab area wrapper.",
+          "description": "The Page Header is used inside a [Page Layout](/components/page) to standardized header content and controls.\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the title, description, and other relevant metadata.\n- **breadcrumb** - Designated top-left area for breadcrumb navigation.\n- **controls** - Designated area to right of default slot for standard header actions.\n- **aux** - Designated top-right area for auxiliary header actions.\n- **tabs** - Designated bottom area for tab navigation.\n\n### **CSS Properties:**\n - **--gap** - The gutter spacing between slots. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **breadcrumb** - The component's breadcrumb area wrapper.\n- **controls** - The component's controls area wrapper.\n- **main** - The component's main area wrapper.\n- **aux** - The component's auxiliary controls area wrapper.\n- **tabs** - The component's tab area wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -6232,7 +6232,7 @@
         },
         {
           "name": "lynk-page-sidebar",
-          "description": "The Page Sidebar is used inside a [Page Layout](/components/page) to render navigation and selection menus, or other related content that would normally be placed in a native `<aside>` element.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the sidebar opens.\n- **ev-after-show** - Emitted after the sidebar opens and all animations are complete.\n- **ev-hide** - Emitted when the sidebar closes.\n- **ev-after-hide** - Emitted after the sidebar closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the sidebar\n- **hide()** - Hides the sidebar\n\n### **Slots:**\n - _default_ - The sidebar's content.\n- **label** - The sidebar's label. Alternatively, you can use the label prop.\n- **footer** - The sidebar's footer, usually one or more buttons representing various options.\n- **nav** - An optional slot that can be used to display nav controls even when sidebar is collapsed.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the sidebar. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **panel** - The sidebar panel (where the sidebar and its content is rendered).\n- **header** - The sidebar header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The sidebar title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The sidebar body.\n- **footer** - The sidebar footer.\n- **nav** - The optional sidebar nav do display controls even when the sidebar is collapsed.",
+          "description": "The Page Sidebar is used inside a [Page Layout](/components/page) to render navigation and selection menus, or other related content that would normally be placed in a native `<aside>` element.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the sidebar opens.\n- **ev-after-show** - Emitted after the sidebar opens and all animations are complete.\n- **ev-hide** - Emitted when the sidebar closes.\n- **ev-after-hide** - Emitted after the sidebar closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the sidebar\n- **hide()** - Hides the sidebar\n\n### **Slots:**\n - _default_ - The sidebar's content.\n- **label** - The sidebar's label. Alternatively, you can use the label prop.\n- **footer** - The sidebar's footer, usually one or more buttons representing various options.\n- **nav** - An optional slot that can be used to display nav controls even when sidebar is collapsed.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the sidebar. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **panel** - The sidebar panel (where the sidebar and its content is rendered).\n- **header** - The sidebar header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The sidebar title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The sidebar body.\n- **footer** - The sidebar footer.\n- **nav** - The optional sidebar nav do display controls even when the sidebar is collapsed.",
           "doc-url": "",
           "attributes": [
             {
@@ -6374,7 +6374,7 @@
         },
         {
           "name": "lynk-panel",
-          "description": "Panels are lightweight content containers that function like a native `detail` HTML element with a collapsable body. They can either stand alone or be grouped together to form an [Accordion](/components/accordion).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the panel expands.\n- **ev-after-expand** - Emitted after the panel expands and all animations are complete.\n- **ev-collapse** - Emitted when the panel closes.\n- **ev-after-collapse** - Emitted after the panel closes and all animations are complete.\n\n### **Methods:**\n - **expand()** - Shows the panel.\n- **collapse()** - Hides the panel\n\n### **Slots:**\n - _default_ - The panels' main content.\n- **heading** - The panels' heading. Alternatively, you can use the `heading` attribute.\n- **prefix** - The panels' summary prefix `<slot>`.\n- **suffix** - The panels' summary suffix `<slot>`.\n- **expand-icon** - The expand icon's `<slot>`.\n- **collapse-icon** - The collapse icon's `<slot>`.\n- **subheader** - Optional content displayed below the header, only visible when the panel is expanded.\n- **footer** - The panels' footer `<slot>`.\n\n### **CSS Properties:**\n - **--background-color** - The panels background color _(default: undefined)_\n- **--spacing** - The amount of padding to use for the header, body, and footer. _(default: undefined)_\n- **--border-color** - Apply a panel border of your choosing. _(default: undefined)_\n- **--border-radius** - The panels border radius. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **header** - The panel header area.\n- **heading** - The panel heading.\n- **prefix** - The panel header prefix area.\n- **suffix** - The panel header suffix area.\n- **toggle-icon** - The expand/collapse toggle icon in the header.\n- **subheader** - The panel subheader area, visible only when expanded.\n- **content** - The panel content.\n- **footer** - The panel footer.",
+          "description": "Panels are lightweight content containers that function like a native `detail` HTML element with a collapsable body. They can either stand alone or be grouped together to form an [Accordion](/components/accordion).\n\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the panel expands.\n- **ev-after-expand** - Emitted after the panel expands and all animations are complete.\n- **ev-collapse** - Emitted when the panel closes.\n- **ev-after-collapse** - Emitted after the panel closes and all animations are complete.\n\n### **Methods:**\n - **expand()** - Shows the panel.\n- **collapse()** - Hides the panel\n\n### **Slots:**\n - _default_ - The panels' main content.\n- **heading** - The panels' heading. Alternatively, you can use the `heading` attribute.\n- **prefix** - The panels' summary prefix `<slot>`.\n- **suffix** - The panels' summary suffix `<slot>`.\n- **expand-icon** - The expand icon's `<slot>`.\n- **collapse-icon** - The collapse icon's `<slot>`.\n- **subheader** - Optional content displayed below the header, only visible when the panel is expanded.\n- **footer** - The panels' footer `<slot>`.\n\n### **CSS Properties:**\n - **--background-color** - The panels background color _(default: undefined)_\n- **--spacing** - The amount of padding to use for the header, body, and footer. _(default: undefined)_\n- **--border-color** - Apply a panel border of your choosing. _(default: undefined)_\n- **--border-radius** - The panels border radius. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **header** - The panel header area.\n- **heading** - The panel heading.\n- **prefix** - The panel header prefix area.\n- **suffix** - The panel header suffix area.\n- **toggle-icon** - The expand/collapse toggle icon in the header.\n- **subheader** - The panel subheader area, visible only when expanded.\n- **content** - The panel content.\n- **footer** - The panel footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -6552,7 +6552,7 @@
         },
         {
           "name": "lynk-popover",
-          "description": "Popover's display rich content in a \"pop over\" panel to add additional information or functionality when a user interacts with a triggering element.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the popover opens.\n- **ev-after-show** - Emitted after the popover opens and all animations are complete.\n- **ev-hide** - Emitted when the popover closes.\n- **ev-after-hide** - Emitted after the popover closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the popover panel.\n- **hide()** - Hides the popover panel\n- **reposition()** - Instructs the popover menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The popover's content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **trigger** - The popover's trigger, usually a `<lynk-button>` element.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the popover. Defaults to 320px or 20rem. _(default: undefined)_\n- **--max-width** - The max width of the popover as determined by its contents. Defaults to 480px or 30rem. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the popover is open.",
+          "description": "Popover's display rich content in a \"pop over\" panel to add additional information or functionality when a user interacts with a triggering element.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the popover opens.\n- **ev-after-show** - Emitted after the popover opens and all animations are complete.\n- **ev-hide** - Emitted when the popover closes.\n- **ev-after-hide** - Emitted after the popover closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the popover panel.\n- **hide()** - Hides the popover panel\n- **reposition()** - Instructs the popover menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The popover's content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **trigger** - The popover's trigger, usually a `<lynk-button>` element.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the popover. Defaults to 320px or 20rem. _(default: undefined)_\n- **--max-width** - The max width of the popover as determined by its contents. Defaults to 480px or 30rem. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the popover is open.",
           "doc-url": "",
           "attributes": [
             {
@@ -6735,7 +6735,7 @@
         },
         {
           "name": "lynk-popup",
-          "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **ev-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--sl-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
+          "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n\n---\n\n\n### **Events:**\n - **ev-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--sl-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
           "doc-url": "",
           "attributes": [
             {
@@ -7002,7 +7002,7 @@
         },
         {
           "name": "lynk-progress-bar",
-          "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+          "description": "Progress bars are used to show the status of an ongoing operation.\n\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -7051,7 +7051,7 @@
         },
         {
           "name": "lynk-progress-ring",
-          "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
+          "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
           "doc-url": "",
           "attributes": [
             {
@@ -7089,7 +7089,7 @@
         },
         {
           "name": "lynk-radio",
-          "description": "Radios allow the user to select a single option from a group.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **label** - The container that wraps the radio's label.",
+          "description": "Radios allow the user to select a single option from a group.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **label** - The container that wraps the radio's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -7155,7 +7155,7 @@
         },
         {
           "name": "lynk-radio-button",
-          "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the button loses focus.\n- **ev-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the button.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - Used to prepend an icon or similar element to the button.\n- **suffix** - Used to append an icon or similar element to the button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **button** - The internal button element.\n- **button--checked** - The internal button element if checked\n- **prefix** - The prefix slot's container.\n- **label** - The button's label.\n- **suffix** - The suffix slot's container.",
+          "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the button loses focus.\n- **ev-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the button.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - Used to prepend an icon or similar element to the button.\n- **suffix** - Used to append an icon or similar element to the button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **button** - The internal button element.\n- **button--checked** - The internal button element if checked\n- **prefix** - The prefix slot's container.\n- **label** - The button's label.\n- **suffix** - The suffix slot's container.",
           "doc-url": "",
           "attributes": [
             {
@@ -7267,7 +7267,7 @@
         },
         {
           "name": "lynk-radio-group",
-          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the radio group's selected value changes.\n- **ev-input** - Emitted when the radio group receives user input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<lynk-radio>` or `<lynk-radio-button>` elements are placed.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - The radio group label. Required for proper accessibility. Alternatively, you can use the label attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the radio group's selected value changes.\n- **ev-input** - Emitted when the radio group receives user input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<lynk-radio>` or `<lynk-radio-button>` elements are placed.\n- **help-tip** - Custom help-tip content.\n- **help-text** - Custom help-text content.\n- **label** - The radio group label. Required for proper accessibility. Alternatively, you can use the label attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -7500,7 +7500,7 @@
         },
         {
           "name": "lynk-range",
-          "description": "Ranges allow the user to select a single value within a given range using a slider.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend an icon or similar element to the range.\n- **suffix** - Used to append an icon or similar element to the range.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n- **ticks** - Custom tick markers. Use this to override the default tick rendering.\n- **reference** - Reference labels displayed below the range (e.g., min/max labels).\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--thumb-color** - The color of the thumb. _(default: undefined)_\n- **--thumb-border** - The box-shadow used for the thumb border. _(default: undefined)_\n- **--track-color-active** - The color of the active portion of the track. _(default: undefined)_\n- **--track-color-inactive** - The color of the inactive portion of the track. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The starting point of the active track (useful for ranges that don't start at 0). _(default: undefined)_\n- **--tick-color** - The color of tick markers. _(default: undefined)_\n- **--tick-label-color** - The color of tick labels. _(default: undefined)_\n- **--tick-width** - The width of tick markers. _(default: undefined)_\n- **--tick-height** - The height of tick markers. _(default: undefined)_\n- **--tick-selected-color** - The color of selected tick markers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **wrapper** - The range track wrapper.\n- **track** - The range track (inactive portion).\n- **track-active** - The active portion of the track.\n- **thumb** - The draggable thumb.\n- **ticks** - The container for custom tick markers.\n- **markers** - The container that holds all the markers when `with-markers` is used.\n- **marker** - The individual markers that are shown when `with-markers` is used.\n- **references** - The container for reference labels.",
+          "description": "Ranges allow the user to select a single value within a given range using a slider.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-input** - Emitted when the control receives input.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend an icon or similar element to the range.\n- **suffix** - Used to append an icon or similar element to the range.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **help-tip** - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n- **ticks** - Custom tick markers. Use this to override the default tick rendering.\n- **reference** - Reference labels displayed below the range (e.g., min/max labels).\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--thumb-color** - The color of the thumb. _(default: undefined)_\n- **--thumb-border** - The box-shadow used for the thumb border. _(default: undefined)_\n- **--track-color-active** - The color of the active portion of the track. _(default: undefined)_\n- **--track-color-inactive** - The color of the inactive portion of the track. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The starting point of the active track (useful for ranges that don't start at 0). _(default: undefined)_\n- **--tick-color** - The color of tick markers. _(default: undefined)_\n- **--tick-label-color** - The color of tick labels. _(default: undefined)_\n- **--tick-width** - The width of tick markers. _(default: undefined)_\n- **--tick-height** - The height of tick markers. _(default: undefined)_\n- **--tick-selected-color** - The color of selected tick markers. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **wrapper** - The range track wrapper.\n- **track** - The range track (inactive portion).\n- **track-active** - The active portion of the track.\n- **thumb** - The draggable thumb.\n- **ticks** - The container for custom tick markers.\n- **markers** - The container that holds all the markers when `with-markers` is used.\n- **marker** - The individual markers that are shown when `with-markers` is used.\n- **references** - The container for reference labels.",
           "doc-url": "",
           "attributes": [
             {
@@ -7873,7 +7873,7 @@
         },
         {
           "name": "lynk-relative-time",
-          "description": "Outputs a localized time phrase relative to the current date and time.\n---\n",
+          "description": "Outputs a localized time phrase relative to the current date and time.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -7929,7 +7929,7 @@
         },
         {
           "name": "lynk-resize-observer",
-          "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **ev-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
+          "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n---\n\n\n### **Events:**\n - **ev-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
           "doc-url": "",
           "attributes": [
             {
@@ -7970,7 +7970,7 @@
         },
         {
           "name": "lynk-responsive-media",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The element to receive the aspect ratio. Should be a replaced element, such as `<img>`, `<iframe>`, or `<video>`.",
+          "description": "\n\n---\n\n\n### **Slots:**\n - _default_ - The element to receive the aspect ratio. Should be a replaced element, such as `<img>`, `<iframe>`, or `<video>`.",
           "doc-url": "",
           "attributes": [
             {
@@ -8009,7 +8009,7 @@
         },
         {
           "name": "lynk-scroller",
-          "description": "Scrollers create an accessible container while providing visual cues that help users identify and navigate\nthrough content that scrolls.\n---\n\n\n### **Slots:**\n - _default_ - The content to show inside the scroller.\n\n### **CSS Properties:**\n - **--shadow-color** - The base color of the shadow. _(default: var(--wa-color-surface-default))_\n- **--shadow-size** - The size of the shadow. _(default: 2rem)_\n\n### **CSS Parts:**\n - **content** - The container that wraps the slotted content.",
+          "description": "Scrollers create an accessible container while providing visual cues that help users identify and navigate\nthrough content that scrolls.\n\n---\n\n\n### **Slots:**\n - _default_ - The content to show inside the scroller.\n\n### **CSS Properties:**\n - **--shadow-color** - The base color of the shadow. _(default: var(--wa-color-surface-default))_\n- **--shadow-size** - The size of the shadow. _(default: 2rem)_\n\n### **CSS Parts:**\n - **content** - The container that wraps the slotted content.",
           "doc-url": "",
           "attributes": [
             {
@@ -8063,7 +8063,7 @@
         },
         {
           "name": "lynk-select",
-          "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the select's menu opens.\n- **ev-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the select's menu closes.\n- **ev-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "description": "Selects allow you to choose items from a menu of predefined options.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the control's value changes.\n- **ev-clear** - Emitted when the control's value is cleared.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-show** - Emitted when the select's menu opens.\n- **ev-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **ev-hide** - Emitted when the select's menu closes.\n- **ev-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -8495,7 +8495,7 @@
         },
         {
           "name": "lynk-spinner",
-          "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Spinners are used to show the progress of an indeterminate operation.\n\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [],
           "events": [],
@@ -8503,7 +8503,7 @@
         },
         {
           "name": "lynk-split",
-          "description": "Distribute two or more items evenly across available space, either in a row or a column.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the minimum gap of the split group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Distribute two or more items evenly across available space, either in a row or a column.\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the minimum gap of the split group. _(default: var(--lynk-spacing-small))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -8562,7 +8562,7 @@
         },
         {
           "name": "lynk-split-panel",
-          "description": "Split panels display two adjacent panels, allowing the user to reposition them.\n---\n\n\n### **Events:**\n - **ev-reposition** - Emitted when the divider's position changes.\n\n### **Slots:**\n - **start** - Content to place in the start panel.\n- **end** - Content to place in the end panel.\n- **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.\n\n### **CSS Properties:**\n - **--divider-width** - The width of the visible divider. _(default: 4px)_\n- **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_\n- **--min** - The minimum allowed size of the primary panel. _(default: 0)_\n- **--max** - The maximum allowed size of the primary panel. _(default: 100%)_\n\n### **CSS Parts:**\n - **start** - The start panel.\n- **end** - The end panel.\n- **panel** - Targets both the start and end panels.\n- **divider** - The divider that separates the start and end panels.",
+          "description": "Split panels display two adjacent panels, allowing the user to reposition them.\n\n---\n\n\n### **Events:**\n - **ev-reposition** - Emitted when the divider's position changes.\n\n### **Slots:**\n - **start** - Content to place in the start panel.\n- **end** - Content to place in the end panel.\n- **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.\n\n### **CSS Properties:**\n - **--divider-width** - The width of the visible divider. _(default: 4px)_\n- **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_\n- **--min** - The minimum allowed size of the primary panel. _(default: 0)_\n- **--max** - The maximum allowed size of the primary panel. _(default: 100%)_\n\n### **CSS Parts:**\n - **start** - The start panel.\n- **end** - The end panel.\n- **panel** - Targets both the start and end panels.\n- **divider** - The divider that separates the start and end panels.",
           "doc-url": "",
           "attributes": [
             {
@@ -8680,7 +8680,7 @@
         },
         {
           "name": "lynk-splitter",
-          "description": "Splitter displays multiple adjacent panes, allowing the user to reposition them.\n---\n\n\n### **Events:**\n - **ev-ready** - Emitted when the component is ready with initial pane dimensions.\n- **ev-splitter-resize** - Emitted continuously while resizing.\n- **ev-after-splitter-resize** - Emitted when resizing is complete.\n\n### **Slots:**\n - _default_ - lynk-splitter-pane elements.\n- **divider** - Custom content for all dividers.\n- **divider-{n}** - Custom divider content for specific divider n (overrides generic divider slot).\n\n### **CSS Properties:**\n - **--divider-width** - The width of the visible divider. _(default: 4px)_\n- **--divider-hit-area** - The invisible region around the divider where dragging can occur. _(default: 12px)_\n\n### **CSS Parts:**\n - **pane** - Targets all panes.\n- **divider** - Targets all dividers.\n- **divider-{n}** - Targets specific divider n.",
+          "description": "Splitter displays multiple adjacent panes, allowing the user to reposition them.\n\n---\n\n\n### **Events:**\n - **ev-ready** - Emitted when the component is ready with initial pane dimensions.\n- **ev-splitter-resize** - Emitted continuously while resizing.\n- **ev-after-splitter-resize** - Emitted when resizing is complete.\n\n### **Slots:**\n - _default_ - lynk-splitter-pane elements.\n- **divider** - Custom content for all dividers.\n- **divider-{n}** - Custom divider content for specific divider n (overrides generic divider slot).\n\n### **CSS Properties:**\n - **--divider-width** - The width of the visible divider. _(default: 4px)_\n- **--divider-hit-area** - The invisible region around the divider where dragging can occur. _(default: 12px)_\n\n### **CSS Parts:**\n - **pane** - Targets all panes.\n- **divider** - Targets all dividers.\n- **divider-{n}** - Targets specific divider n.",
           "doc-url": "",
           "attributes": [
             {
@@ -8816,7 +8816,7 @@
         },
         {
           "name": "lynk-splitter-pane",
-          "description": "A pane within a splitter component.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the pane becomes visible.\n- **ev-hide** - Emitted when the pane is hidden.\n\n### **Methods:**\n - **show()** - Shows the pane by removing the hidden attribute.\n- **hide()** - Hides the pane by setting the hidden attribute.\n\n### **Slots:**\n - _default_ - The pane's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "A pane within a splitter component.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the pane becomes visible.\n- **ev-hide** - Emitted when the pane is hidden.\n\n### **Methods:**\n - **show()** - Shows the pane by removing the hidden attribute.\n- **hide()** - Hides the pane by setting the hidden attribute.\n\n### **Slots:**\n - _default_ - The pane's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -8878,7 +8878,7 @@
         },
         {
           "name": "lynk-stack",
-          "description": "Stacks are a fundamental building block for arranging items in a vertical or horizontal layout.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--width** - Customize the width of the stack group. _(default: 100%)_\n- **--height** - Customize the width of the stack group. _(default: auto)_\n- **--gap** - Customize the gap of the stack group. _(default: var(--lynk-spacing-small))_\n- **--margin** - Customize the margin of the stack group. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Stacks are a fundamental building block for arranging items in a vertical or horizontal layout.\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--width** - Customize the width of the stack group. _(default: 100%)_\n- **--height** - Customize the width of the stack group. _(default: auto)_\n- **--gap** - Customize the gap of the stack group. _(default: var(--lynk-spacing-small))_\n- **--margin** - Customize the margin of the stack group. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -8968,7 +8968,7 @@
         },
         {
           "name": "lynk-switch",
-          "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when the control's checked state changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **control** - The switch control.\n- **thumb** - The switch position indicator.\n- **label** - The switch label.",
+          "description": "Switches allow the user to toggle an option on or off.\n\n---\n\n\n### **Events:**\n - **ev-blur** - Emitted when the control loses focus.\n- **ev-change** - Emitted when the control's checked state changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **control** - The switch control.\n- **thumb** - The switch position indicator.\n- **label** - The switch label.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -9126,7 +9126,7 @@
         },
         {
           "name": "lynk-tab",
-          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **ev-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<lynk-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n\n---\n\n\n### **Events:**\n - **ev-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<lynk-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -9211,7 +9211,7 @@
         },
         {
           "name": "lynk-tab-group",
-          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **ev-tab-show** - Emitted when a tab is shown. Calling `event.preventDefault()` will prevent the tab from being shown, allowing you to handle scenarios like unsaved changes before navigating away.\n- **ev-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<lynk-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<lynk-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--pill-background** - The background color of the pill container when appearance is pill. _(default: undefined)_\n- **--pill-active-background** - The background color of the active pill tab. _(default: undefined)_\n- **--pill-active-color** - The text color of the active pill tab. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **nav** - The tab group navigation container.\n- **tabs** - The container that wraps the slotted tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<lynk-icon-button>`.\n- **scroll-button--start** - Targets the starting scroll button.\n- **scroll-button--end** - Targets the ending scroll button.\n- **scroll-button__base** - The scroll button's `base` part.",
+          "description": "Tab groups organize content into a container that shows one section at a time.\n\n---\n\n\n### **Events:**\n - **ev-tab-show** - Emitted when a tab is shown. Calling `event.preventDefault()` will prevent the tab from being shown, allowing you to handle scenarios like unsaved changes before navigating away.\n- **ev-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<lynk-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<lynk-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--pill-background** - The background color of the pill container when appearance is pill. _(default: undefined)_\n- **--pill-active-background** - The background color of the active pill tab. _(default: undefined)_\n- **--pill-active-color** - The text color of the active pill tab. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **nav** - The tab group navigation container.\n- **tabs** - The container that wraps the slotted tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<lynk-icon-button>`.\n- **scroll-button--start** - Targets the starting scroll button.\n- **scroll-button--end** - Targets the ending scroll button.\n- **scroll-button__base** - The scroll button's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -9316,7 +9316,7 @@
         },
         {
           "name": "lynk-tab-panel",
-          "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -9350,7 +9350,7 @@
         },
         {
           "name": "lynk-table",
-          "description": "Tables display tabular data in a basic grid composed of cells, columns, and rows. This format makes it easy for users to scan and compare large amounts of data. Lynk based tables are intended to behave like native html `<table>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The tables content. If constructing manually, should contain 1 or more `<lynk-thead>` and `<lynk-tbody>` components. Should be unused for automatically constructed tables that use the `cols` and `rows` properties.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Tables display tabular data in a basic grid composed of cells, columns, and rows. This format makes it easy for users to scan and compare large amounts of data. Lynk based tables are intended to behave like native html `<table>` elements.\n\n---\n\n\n### **Slots:**\n - _default_ - The tables content. If constructing manually, should contain 1 or more `<lynk-thead>` and `<lynk-tbody>` components. Should be unused for automatically constructed tables that use the `cols` and `rows` properties.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -9401,7 +9401,7 @@
         },
         {
           "name": "lynk-tag",
-          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **ev-remove** - Emitted when the remove button is activated.\n- **ev-change** - Emitted when a `selectable` tag's `checked` state changes from user interaction.\n\n### **Slots:**\n - _default_ - The tag's content.\n- **prefix** - Used to prepend an icon or similar element to the tag.\n- **checked-icon** - The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **content** - The tag content.\n- **checked-icon** - The check icon shown when a selectable tag is checked.\n- **remove-button** - The remove button.\n- **remove-button__base** - The remove button's `base` part.",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n\n---\n\n\n### **Events:**\n - **ev-remove** - Emitted when the remove button is activated.\n- **ev-change** - Emitted when a `selectable` tag's `checked` state changes from user interaction.\n\n### **Slots:**\n - _default_ - The tag's content.\n- **prefix** - Used to prepend an icon or similar element to the tag.\n- **checked-icon** - The icon shown in the prefix position when a `selectable` tag is `checked`. Defaults to a check.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **content** - The tag content.\n- **checked-icon** - The check icon shown when a selectable tag is checked.\n- **remove-button** - The remove button.\n- **remove-button__base** - The remove button's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -9550,7 +9550,7 @@
         },
         {
           "name": "lynk-tag-input",
-          "description": "Tag inputs let users quickly enter a list of values that are displayed as removable tags.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the value changes (a tag is added, removed, or the field is cleared).\n- **ev-input** - Emitted when the value changes (a tag is added, removed, or the field is cleared).\n- **ev-add-tag** - Emitted when a tag is added. The tag value is available in `event.detail.value`.\n- **ev-remove-tag** - Emitted when a tag is removed. The tag value is available in `event.detail.value`.\n- **ev-clear** - Emitted when the control is cleared.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **addTag(rawValue: _string_)** - Adds a tag with the given value. Respects `maxTags`, `maxlength`, and `allowDuplicates`.\n- **removeTag(index: _number_)** - Removes the tag at the given index.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - **label** - The tag input's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the control.\n- **suffix** - Used to append a presentational icon or similar element to the control.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the tag input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, control, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The control's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **control** - The container that wraps the prefix, tags, input, clear icon, and suffix.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **tags** - The container that houses the tags.\n- **tag** - The individual tags that represent each value.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **input** - The internal text `<input>` element.\n- **clear-button** - The clear button.",
+          "description": "Tag inputs let users quickly enter a list of values that are displayed as removable tags.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the value changes (a tag is added, removed, or the field is cleared).\n- **ev-input** - Emitted when the value changes (a tag is added, removed, or the field is cleared).\n- **ev-add-tag** - Emitted when a tag is added. The tag value is available in `event.detail.value`.\n- **ev-remove-tag** - Emitted when a tag is removed. The tag value is available in `event.detail.value`.\n- **ev-clear** - Emitted when the control is cleared.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **addTag(rawValue: _string_)** - Adds a tag with the given value. Respects `maxTags`, `maxlength`, and `allowDuplicates`.\n- **removeTag(index: _number_)** - Removes the tag at the given index.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - **label** - The tag input's label. Alternatively, you can use the `label` attribute.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **prefix** - Used to prepend a presentational icon or similar element to the control.\n- **suffix** - Used to append a presentational icon or similar element to the control.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the tag input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, control, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The control's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **control** - The container that wraps the prefix, tags, input, clear icon, and suffix.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **tags** - The container that houses the tags.\n- **tag** - The individual tags that represent each value.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **input** - The internal text `<input>` element.\n- **clear-button** - The clear button.",
           "doc-url": "",
           "attributes": [
             {
@@ -9969,7 +9969,7 @@
         },
         {
           "name": "lynk-tbody",
-          "description": "Table `<lynk-tbody>` components will behave like a native `<tbody>` HTML element within a `<lynk-table>`.\n---\n",
+          "description": "Table `<lynk-tbody>` components will behave like a native `<tbody>` HTML element within a `<lynk-table>`.\n\n---\n",
           "doc-url": "",
           "attributes": [],
           "events": [],
@@ -9977,7 +9977,7 @@
         },
         {
           "name": "lynk-td",
-          "description": "Table `<lynk-td>` components will behave like a native `<td>` HTML element within a `<lynk-table>`.\n---\n\n\n### **Slots:**\n - _default_ - The contents of the table cell.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Table `<lynk-td>` components will behave like a native `<td>` HTML element within a `<lynk-table>`.\n\n---\n\n\n### **Slots:**\n - _default_ - The contents of the table cell.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -10015,7 +10015,7 @@
         },
         {
           "name": "lynk-textarea",
-          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - A 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### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **textarea** - The textarea control.",
+          "description": "Textareas collect data from the user and allow multiple lines of text.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when an alteration to the control's value is committed by the user.\n- **ev-input** - Emitted when the control receives input.\n- **ev-focus** - Emitted when the control gains focus.\n- **ev-blur** - Emitted when the control loses focus.\n- **ev-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. If `message` is not empty, the field will be considered invalid.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **help-tip** - A 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### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help-text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's internal wrapper.\n- **textarea** - The textarea control.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -10414,7 +10414,7 @@
         },
         {
           "name": "lynk-th",
-          "description": "Table `<lynk-th>` components will behave like a native `<th>` HTML element within a `<lynk-table>`.\n---\n\n\n### **Events:**\n - **ev-table-sort** - Emitted when a sortable table header is clicked on.\n\n### **Slots:**\n - _default_ - The table column header label",
+          "description": "Table `<lynk-th>` components will behave like a native `<th>` HTML element within a `<lynk-table>`.\n\n---\n\n\n### **Events:**\n - **ev-table-sort** - Emitted when a sortable table header is clicked on.\n\n### **Slots:**\n - _default_ - The table column header label",
           "doc-url": "",
           "attributes": [
             {
@@ -10469,7 +10469,7 @@
         },
         {
           "name": "lynk-thead",
-          "description": "Table `<lynk-thead>` components will behave like a native `<thead>` HTML elements within a `<lynk-table>`.\n---\n",
+          "description": "Table `<lynk-thead>` components will behave like a native `<thead>` HTML elements within a `<lynk-table>`.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -10492,7 +10492,7 @@
         },
         {
           "name": "lynk-time-picker",
-          "description": "A time picker that combines clock component with accessible input field.\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the time input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **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### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **clock** - The clock component.",
+          "description": "A time picker that combines clock component with accessible input field.\n\n---\n\n\n### **Events:**\n - **ev-change** - Emitted when the time value changes.\n- **ev-input** - Emitted when the control receives input.\n- **ev-clear** - Emitted when the input is cleared.\n\n### **Methods:**\n - **show()** - Shows the dropdown.\n- **hide()** - Hides the dropdown.\n- **focus(options: _FocusOptions_)** - Sets focus on the time input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the label prop.\n- **label-end** - Optional right-aligned content shown at the end of the label row.\n- **help-text-end** - Optional right-aligned content shown at the end of the help-text row.\n- **help-text** - Help text that describes how to use the input.\n- **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### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **input-group** - The input group container.\n- **time-input** - The time input field.\n- **hour-input** - The hour number input (24h mode).\n- **minute-input** - The minute number input (24h mode).\n- **second-input** - The second number input (24h mode).\n- **trigger** - The dropdown trigger button.\n- **dropdown** - The dropdown panel.\n- **clock** - The clock component.",
           "doc-url": "",
           "attributes": [
             {
@@ -10780,7 +10780,7 @@
         },
         {
           "name": "lynk-tooltip",
-          "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the tooltip begins to show.\n- **ev-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **ev-hide** - Emitted when the tooltip begins to hide.\n- **ev-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Only the first element will be used as the target.\n- **content** - The tooltip's content. Alternatively, you can use the content prop.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<lynk-popup>` element.\n- **base__popup** - The popup's `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body.",
+          "description": "Tooltips display additional information based on a specific action.\n\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the tooltip begins to show.\n- **ev-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **ev-hide** - Emitted when the tooltip begins to hide.\n- **ev-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Only the first element will be used as the target.\n- **content** - The tooltip's content. Alternatively, you can use the content prop.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<lynk-popup>` element.\n- **base__popup** - The popup's `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body.",
           "doc-url": "",
           "attributes": [
             {
@@ -10933,7 +10933,7 @@
         },
         {
           "name": "lynk-tr",
-          "description": "Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "description": "Table `<lynk-tr>` components will behave like a native `<tr>` HTML elements within a `<lynk-table>`.\n\n---\n\n\n### **Slots:**\n - _default_ - Should contain 1 or more `<lynk-td>` or `<lynk-th>` components.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -10994,7 +10994,7 @@
         },
         {
           "name": "lynk-tree",
-          "description": "Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.\n---\n\n\n### **Events:**\n - **ev-selection-change** - Emitted when a tree item is selected or deselected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded. Works best with `<lynk-icon>`.\n- **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--indent-size** - The size of the indentation for nested items. _(default: var(--lynk-spacing-medium))_\n- **--indent-guide-color** - The color of the indentation line. _(default: var(--lynk-color-neutral-200))_\n- **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_\n- **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_\n- **--indent-guide-width** - The width of the indentation line. _(default: 0)_\n- **--gap-size** - The gap between tree-items. _(default: 1)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.\n\n---\n\n\n### **Events:**\n - **ev-selection-change** - Emitted when a tree item is selected or deselected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded. Works best with `<lynk-icon>`.\n- **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--indent-size** - The size of the indentation for nested items. _(default: var(--lynk-spacing-medium))_\n- **--indent-guide-color** - The color of the indentation line. _(default: var(--lynk-color-neutral-200))_\n- **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_\n- **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_\n- **--indent-guide-width** - The width of the indentation line. _(default: 0)_\n- **--gap-size** - The gap between tree-items. _(default: 1)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -11046,7 +11046,7 @@
         },
         {
           "name": "lynk-tree-item",
-          "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--readonly** - Applied when the tree item is readonly.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
+          "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--readonly** - Applied when the tree item is readonly.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -11179,7 +11179,7 @@
         },
         {
           "name": "lynk-truncate",
-          "description": "Truncate is a tool used to shorten numeric and non-numeric character strings, typically when the string overflows its container.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The default slot.\n- **end** - Used when adding ellipsis at start or middle of truncated string.",
+          "description": "Truncate is a tool used to shorten numeric and non-numeric character strings, typically when the string overflows its container.\n\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The default slot.\n- **end** - Used when adding ellipsis at start or middle of truncated string.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -11243,7 +11243,7 @@
         },
         {
           "name": "lynk-visually-hidden",
-          "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n---\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
+          "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n---\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
           "doc-url": "",
           "attributes": [],
           "slots": [
@@ -11254,7 +11254,7 @@
         },
         {
           "name": "lynk-wisp",
-          "description": "Wisps are used to provide a visual representation of where content will eventually be drawn.\n---\n\n\n### **CSS Properties:**\n - **--border-radius** - The wisp's border radius. _(default: undefined)_\n- **--color** - The color of the wisp. _(default: undefined)_\n- **--sheen-color** - The sheen color when the wisp is in its loading state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The wisp's indicator which is responsible for its color and animation.",
+          "description": "Wisps are used to provide a visual representation of where content will eventually be drawn.\n\n---\n\n\n### **CSS Properties:**\n - **--border-radius** - The wisp's border radius. _(default: undefined)_\n- **--color** - The color of the wisp. _(default: undefined)_\n- **--sheen-color** - The sheen color when the wisp is in its loading state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The wisp's indicator which is responsible for its color and animation.",
           "doc-url": "",
           "attributes": [
             {