@uplynk/lynk-design 1.19.2 → 1.20.0

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@uplynk/lynk-design",
-  "version": "1.19.2",
+  "version": "1.20.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -49,6 +49,243 @@
             "events": []
           }
         },
+        {
+          "name": "lynk-alert",
+          "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": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "closable",
+              "description": "Makes the alert closable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "The alert's type (color).",
+              "value": {
+                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "appearance",
+              "description": "The alert's visual appearance.",
+              "value": {
+                "type": "'standard' | 'filled'",
+                "default": "'standard'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The alert's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "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`.",
+              "value": { "type": "string", "default": "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.",
+              "value": { "type": "'rtl' | 'ltr' | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The alert's content." },
+            { "name": "icon", "description": "An icon to show in the alert." },
+            {
+              "name": "action",
+              "description": "Append custom actions to alert."
+            }
+          ],
+          "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."
+            }
+          ],
+          "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-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-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-badge",
+          "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": [
+            {
+              "name": "type",
+              "description": "The badge's variant.",
+              "value": {
+                "type": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pulse",
+              "description": "Makes the badge pulsate to draw attention.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The badge's content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The badge's variant.",
+                "type": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style badge with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "pulse",
+                "description": "Makes the badge pulsate to draw attention.",
+                "type": "boolean"
+              }
+            ],
+            "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\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.",
@@ -215,310 +452,120 @@
           }
         },
         {
-          "name": "lynk-avatar",
-          "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.",
+          "name": "lynk-breadcrumb",
+          "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": [
-            {
-              "name": "image",
-              "description": "The image source to use for the avatar.",
-              "value": { "type": "string", "default": "''" }
-            },
             {
               "name": "label",
-              "description": "A label to use to describe the avatar to assistive devices.",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
               "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more breadcrumb items to display."
             },
             {
-              "name": "initials",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "loading",
-              "description": "Indicates how the browser should load the image.",
-              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
-            },
-            {
-              "name": "shape",
-              "description": "The shape of the avatar.",
-              "value": {
-                "type": "'circle' | 'square' | 'rounded'",
-                "default": "'circle'"
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon",
-              "description": "The default icon to use when no image or initials are present. Works best with `<wa-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-error",
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              "name": "separator",
+              "description": "The separator to use between breadcrumb items. Works best with `<lynk-icon>`."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
-              {
-                "name": "image",
-                "description": "The image source to use for the avatar.",
-                "type": "string"
-              },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "separatorSlot", "type": "HTMLSlotElement" },
               {
                 "name": "label",
-                "description": "A label to use to describe the avatar to assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "initials",
-                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
                 "type": "string"
-              },
-              {
-                "name": "loading",
-                "description": "Indicates how the browser should load the image.",
-                "type": "'eager' | 'lazy'"
-              },
-              {
-                "name": "shape",
-                "description": "The shape of the avatar.",
-                "type": "'circle' | 'square' | 'rounded'"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-error",
-                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-              }
-            ]
-          }
-        },
-        {
-          "name": "lynk-badge",
-          "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": [
-            {
-              "name": "type",
-              "description": "The badge's variant.",
-              "value": {
-                "type": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
-              }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "pulse",
-              "description": "Makes the badge pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The badge's content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "type",
-                "description": "The badge's variant.",
-                "type": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
-              },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style badge with rounded edges.",
-                "type": "boolean"
-              },
-              {
-                "name": "pulse",
-                "description": "Makes the badge pulsate to draw attention.",
-                "type": "boolean"
               }
             ],
             "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\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.",
+          "name": "lynk-avatar",
+          "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": [
             {
-              "name": "open",
-              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "image",
+              "description": "The image source to use for the avatar.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "closable",
-              "description": "Makes the alert closable.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "type",
-              "description": "The alert's type (color).",
-              "value": {
-                "type": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'",
-                "default": "'primary'"
-              }
+              "name": "initials",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "appearance",
-              "description": "The alert's visual appearance.",
-              "value": {
-                "type": "'standard' | 'filled'",
-                "default": "'standard'"
-              }
+              "name": "loading",
+              "description": "Indicates how the browser should load the image.",
+              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
             },
             {
-              "name": "size",
-              "description": "The alert's size.",
+              "name": "shape",
+              "description": "The shape of the avatar.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'circle' | 'square' | 'rounded'",
+                "default": "'circle'"
               }
-            },
-            {
-              "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`.",
-              "value": { "type": "string", "default": "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.",
-              "value": { "type": "'rtl' | 'ltr' | undefined" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The alert's content." },
-            { "name": "icon", "description": "An icon to show in the alert." },
             {
-              "name": "action",
-              "description": "Append custom actions to alert."
+              "name": "icon",
+              "description": "The default icon to use when no image or initials are present. Works best with `<wa-icon>`."
             }
           ],
           "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": "ev-error",
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
             }
           ],
           "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": "image",
+                "description": "The image source to use for the avatar.",
+                "type": "string"
               },
               {
-                "name": "ev-hide",
-                "description": "Emitted when the alert closes."
+                "name": "label",
+                "description": "A label to use to describe the avatar to assistive devices.",
+                "type": "string"
               },
               {
-                "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\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": [
-            {
-              "name": "label",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more breadcrumb items to display."
-            },
-            {
-              "name": "separator",
-              "description": "The separator to use between breadcrumb items. Works best with `<lynk-icon>`."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "separatorSlot", "type": "HTMLSlotElement" },
-              {
-                "name": "label",
-                "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+                "name": "initials",
+                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
                 "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "Indicates how the browser should load the image.",
+                "type": "'eager' | 'lazy'"
+              },
+              {
+                "name": "shape",
+                "description": "The shape of the avatar.",
+                "type": "'circle' | 'square' | 'rounded'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "ev-error",
+                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              }
+            ]
           }
         },
         {
@@ -582,47 +629,6 @@
             "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\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.",
@@ -1130,9 +1136,50 @@
             ]
           }
         },
+        {
+          "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-card",
-          "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.",
+          "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. It is the middle of the outline gradient. _(default: undefined)_\n- **--state-color-start** - The outline gradient's first color. Named states use step 300 of their ramp; otherwise it's `--state-color` mixed 40% toward the page background. _(default: undefined)_\n- **--state-color-end** - The outline gradient's last color. Named states use step 700 of their ramp; otherwise it's `--state-color` mixed 30% toward the text color. _(default: undefined)_\n- **--state-gradient-angle** - The direction of the outline gradient. _(default: 135deg)_\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": [
             {
@@ -1558,53 +1605,6 @@
           "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\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.",
@@ -2562,8 +2562,8 @@
           }
         },
         {
-          "name": "lynk-date-picker",
-          "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.",
+          "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\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": [
             {
@@ -2573,8 +2573,8 @@
             },
             {
               "name": "value",
-              "description": "The current value in ISO format (YYYY-MM-DD).",
-              "value": { "type": "string", "default": "''" }
+              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+              "value": { "type": "string" }
             },
             {
               "name": "label",
@@ -2633,7 +2633,7 @@
             },
             {
               "name": "inline",
-              "description": "Arranges the label inline next to the date picker instead of above it.",
+              "description": "Arranges the label inline next to the date-time picker instead of above it.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2654,15 +2654,66 @@
               "description": "The maximum date in ISO format (YYYY-MM-DD).",
               "value": { "type": "string" }
             },
+            {
+              "name": "seconds",
+              "description": "Show seconds in the time picker.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "format",
+              "description": "Time format for the clock component.",
+              "value": {
+                "type": "'locale' | '12h' | '24h'",
+                "default": "'locale'"
+              }
+            },
+            {
+              "name": "minute-interval",
+              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "default-time",
+              "description": "Default time to set when a date is selected without existing time.",
+              "value": { "type": "'start' | 'end'", "default": "'start'" }
+            },
             {
               "name": "hoist",
               "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "placement",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "value": {
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "inline-pickers",
+              "description": "Display the pickers inline without the dropdown and input fields.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "clearable",
               "description": "Adds a clear button when the input is populated.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "normalize",
+              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+              "value": { "type": "'none' | 'local'", "default": "'none'" }
             }
           ],
           "slots": [
@@ -2690,7 +2741,7 @@
           "events": [
             {
               "name": "ev-change",
-              "description": "Emitted when the date value changes."
+              "description": "Emitted when the date-time value changes."
             },
             {
               "name": "ev-input",
@@ -2705,7 +2756,12 @@
             "properties": [
               { "name": "dropdown", "type": "LynkDropdown" },
               { "name": "calendar", "type": "LynkCalendar" },
+              { "name": "clock", "type": "LynkClock" },
               { "name": "dateInput", "type": "HTMLInputElement" },
+              { "name": "timeInput", "type": "HTMLInputElement" },
+              { "name": "hourInput", "type": "HTMLInputElement" },
+              { "name": "minuteInput", "type": "HTMLInputElement" },
+              { "name": "secondInput", "type": "HTMLInputElement" },
               { "name": "isOpen", "type": "boolean" },
               {
                 "name": "name",
@@ -2714,7 +2770,7 @@
               },
               {
                 "name": "value",
-                "description": "The current value in ISO format (YYYY-MM-DD).",
+                "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
                 "type": "string"
               },
               {
@@ -2773,33 +2829,73 @@
                 "type": "boolean"
               },
               {
-                "name": "dirty",
-                "description": "Adds the dirty indicator mark.",
-                "type": "boolean"
+                "name": "dirty",
+                "description": "Adds the dirty indicator mark.",
+                "type": "boolean"
+              },
+              {
+                "name": "inline",
+                "description": "Arranges the label inline next to the date-time picker instead of above it.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "min",
+                "description": "The minimum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "The maximum date in ISO format (YYYY-MM-DD).",
+                "type": "string"
+              },
+              {
+                "name": "seconds",
+                "description": "Show seconds in the time picker.",
+                "type": "boolean"
+              },
+              {
+                "name": "format",
+                "description": "Time format for the clock component.",
+                "type": "'locale' | '12h' | '24h'"
+              },
+              {
+                "name": "minuteInterval",
+                "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
+                "type": "number"
+              },
+              {
+                "name": "defaultTime",
+                "description": "Default time to set when a date is selected without existing time.",
+                "type": "'start' | 'end'"
               },
               {
-                "name": "inline",
-                "description": "Arranges the label inline next to the date picker instead of above it.",
+                "name": "hoist",
+                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
                 "type": "boolean"
               },
               {
-                "name": "size",
-                "description": "The input's size.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "placement",
+                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
               },
               {
-                "name": "min",
-                "description": "The minimum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its trigger.",
+                "type": "number"
               },
               {
-                "name": "max",
-                "description": "The maximum date in ISO format (YYYY-MM-DD).",
-                "type": "string"
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its trigger.",
+                "type": "number"
               },
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "name": "inlinePickers",
+                "description": "Display the pickers inline without the dropdown and input fields.",
                 "type": "boolean"
               },
               {
@@ -2807,6 +2903,11 @@
                 "description": "Adds a clear button when the input is populated.",
                 "type": "boolean"
               },
+              {
+                "name": "normalizeMode",
+                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+                "type": "'none' | 'local'"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -2819,7 +2920,7 @@
             "events": [
               {
                 "name": "ev-change",
-                "description": "Emitted when the date value changes."
+                "description": "Emitted when the date-time value changes."
               },
               {
                 "name": "ev-input",
@@ -2833,8 +2934,8 @@
           }
         },
         {
-          "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\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.",
+          "name": "lynk-date-picker",
+          "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": [
             {
@@ -2844,8 +2945,8 @@
             },
             {
               "name": "value",
-              "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
-              "value": { "type": "string" }
+              "description": "The current value in ISO format (YYYY-MM-DD).",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "label",
@@ -2904,7 +3005,7 @@
             },
             {
               "name": "inline",
-              "description": "Arranges the label inline next to the date-time picker instead of above it.",
+              "description": "Arranges the label inline next to the date picker instead of above it.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2925,66 +3026,15 @@
               "description": "The maximum date in ISO format (YYYY-MM-DD).",
               "value": { "type": "string" }
             },
-            {
-              "name": "seconds",
-              "description": "Show seconds in the time picker.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "format",
-              "description": "Time format for the clock component.",
-              "value": {
-                "type": "'locale' | '12h' | '24h'",
-                "default": "'locale'"
-              }
-            },
-            {
-              "name": "minute-interval",
-              "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-              "value": { "type": "number", "default": "1" }
-            },
-            {
-              "name": "default-time",
-              "description": "Default time to set when a date is selected without existing time.",
-              "value": { "type": "'start' | 'end'", "default": "'start'" }
-            },
             {
               "name": "hoist",
               "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "placement",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "value": {
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
-                "default": "'bottom-start'"
-              }
-            },
-            {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "inline-pickers",
-              "description": "Display the pickers inline without the dropdown and input fields.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "clearable",
               "description": "Adds a clear button when the input is populated.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "normalize",
-              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
-              "value": { "type": "'none' | 'local'", "default": "'none'" }
             }
           ],
           "slots": [
@@ -3012,7 +3062,7 @@
           "events": [
             {
               "name": "ev-change",
-              "description": "Emitted when the date-time value changes."
+              "description": "Emitted when the date value changes."
             },
             {
               "name": "ev-input",
@@ -3027,12 +3077,7 @@
             "properties": [
               { "name": "dropdown", "type": "LynkDropdown" },
               { "name": "calendar", "type": "LynkCalendar" },
-              { "name": "clock", "type": "LynkClock" },
               { "name": "dateInput", "type": "HTMLInputElement" },
-              { "name": "timeInput", "type": "HTMLInputElement" },
-              { "name": "hourInput", "type": "HTMLInputElement" },
-              { "name": "minuteInput", "type": "HTMLInputElement" },
-              { "name": "secondInput", "type": "HTMLInputElement" },
               { "name": "isOpen", "type": "boolean" },
               {
                 "name": "name",
@@ -3041,7 +3086,7 @@
               },
               {
                 "name": "value",
-                "description": "The current value in ISO 8601 format (YYYY-MM-DDTHH:mm:ss) or Unix timestamp.",
+                "description": "The current value in ISO format (YYYY-MM-DD).",
                 "type": "string"
               },
               {
@@ -3106,7 +3151,7 @@
               },
               {
                 "name": "inline",
-                "description": "Arranges the label inline next to the date-time picker instead of above it.",
+                "description": "Arranges the label inline next to the date picker instead of above it.",
                 "type": "boolean"
               },
               {
@@ -3125,34 +3170,174 @@
                 "type": "string"
               },
               {
-                "name": "seconds",
-                "description": "Show seconds in the time picker.",
+                "name": "hoist",
+                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the input is populated.",
                 "type": "boolean"
               },
               {
-                "name": "format",
-                "description": "Time format for the clock component.",
-                "type": "'locale' | '12h' | '24h'"
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "ev-change",
+                "description": "Emitted when the date value changes."
+              },
+              {
+                "name": "ev-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "ev-clear",
+                "description": "Emitted when the input is cleared."
+              }
+            ]
+          }
+        },
+        {
+          "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\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": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "value": {
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the dropdown so the panel will not open.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "stay-open-on-select",
+              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ncontrols that allow multiple selections.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "block",
+              "description": "Display the dropdown component as a block instead of inline-block.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "sync",
+              "description": "Syncs the popup width or height to that of the trigger element.",
+              "value": {
+                "type": "'width' | 'height' | 'both' | undefined",
+                "default": "undefined"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The dropdown's content." },
+            {
+              "name": "trigger",
+              "description": "The dropdown's trigger, usually a `<lynk-button>` element."
+            }
+          ],
+          "events": [
+            {
+              "name": "ev-show",
+              "description": "Emitted when the dropdown opens."
+            },
+            {
+              "name": "ev-after-show",
+              "description": "Emitted after the dropdown opens and all animations are complete."
+            },
+            {
+              "name": "ev-hide",
+              "description": "Emitted when the dropdown closes."
+            },
+            {
+              "name": "ev-after-hide",
+              "description": "Emitted after the dropdown closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "popup", "type": "LynkPopup" },
+              { "name": "trigger", "type": "HTMLSlotElement" },
+              { "name": "panel", "type": "HTMLSlotElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+                "type": "boolean"
               },
               {
-                "name": "minuteInterval",
-                "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
-                "type": "number"
+                "name": "placement",
+                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
               },
               {
-                "name": "defaultTime",
-                "description": "Default time to set when a date is selected without existing time.",
-                "type": "'start' | 'end'"
+                "name": "disabled",
+                "description": "Disables the dropdown so the panel will not open.",
+                "type": "boolean"
               },
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "name": "stayOpenOnSelect",
+                "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ncontrols that allow multiple selections.",
                 "type": "boolean"
               },
               {
-                "name": "placement",
-                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "name": "containingElement",
+                "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+                "type": "HTMLElement | undefined"
               },
               {
                 "name": "distance",
@@ -3165,41 +3350,37 @@
                 "type": "number"
               },
               {
-                "name": "inlinePickers",
-                "description": "Display the pickers inline without the dropdown and input fields.",
+                "name": "block",
+                "description": "Display the dropdown component as a block instead of inline-block.",
                 "type": "boolean"
               },
               {
-                "name": "clearable",
-                "description": "Adds a clear button when the input is populated.",
+                "name": "hoist",
+                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
                 "type": "boolean"
               },
               {
-                "name": "normalizeMode",
-                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
-                "type": "'none' | 'local'"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
+                "name": "sync",
+                "description": "Syncs the popup width or height to that of the trigger element.",
+                "type": "'width' | 'height' | 'both' | undefined"
               }
             ],
             "events": [
               {
-                "name": "ev-change",
-                "description": "Emitted when the date-time value changes."
+                "name": "ev-show",
+                "description": "Emitted when the dropdown opens."
               },
               {
-                "name": "ev-input",
-                "description": "Emitted when the control receives input."
+                "name": "ev-after-show",
+                "description": "Emitted after the dropdown opens and all animations are complete."
               },
               {
-                "name": "ev-clear",
-                "description": "Emitted when the input is cleared."
+                "name": "ev-hide",
+                "description": "Emitted when the dropdown closes."
+              },
+              {
+                "name": "ev-after-hide",
+                "description": "Emitted after the dropdown closes and all animations are complete."
               }
             ]
           }
@@ -3453,201 +3634,20 @@
               },
               {
                 "name": "ev-hide",
-                "description": "Emitted when the drawer closes."
-              },
-              {
-                "name": "ev-after-hide",
-                "description": "Emitted after the drawer closes and all animations are complete."
-              },
-              {
-                "name": "ev-initial-focus",
-                "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-              },
-              {
-                "name": "ev-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
-              }
-            ]
-          }
-        },
-        {
-          "name": "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\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": [
-            {
-              "name": "open",
-              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "value": {
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
-                "default": "'bottom-start'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the dropdown so the panel will not open.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "stay-open-on-select",
-              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ncontrols that allow multiple selections.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "block",
-              "description": "Display the dropdown component as a block instead of inline-block.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "hoist",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "sync",
-              "description": "Syncs the popup width or height to that of the trigger element.",
-              "value": {
-                "type": "'width' | 'height' | 'both' | undefined",
-                "default": "undefined"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dropdown's content." },
-            {
-              "name": "trigger",
-              "description": "The dropdown's trigger, usually a `<lynk-button>` element."
-            }
-          ],
-          "events": [
-            {
-              "name": "ev-show",
-              "description": "Emitted when the dropdown opens."
-            },
-            {
-              "name": "ev-after-show",
-              "description": "Emitted after the dropdown opens and all animations are complete."
-            },
-            {
-              "name": "ev-hide",
-              "description": "Emitted when the dropdown closes."
-            },
-            {
-              "name": "ev-after-hide",
-              "description": "Emitted after the dropdown closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "popup", "type": "LynkPopup" },
-              { "name": "trigger", "type": "HTMLSlotElement" },
-              { "name": "panel", "type": "HTMLSlotElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
-                "type": "boolean"
-              },
-              {
-                "name": "placement",
-                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the dropdown so the panel will not open.",
-                "type": "boolean"
-              },
-              {
-                "name": "stayOpenOnSelect",
-                "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ncontrols that allow multiple selections.",
-                "type": "boolean"
-              },
-              {
-                "name": "containingElement",
-                "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
-                "type": "HTMLElement | undefined"
-              },
-              {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its trigger.",
-                "type": "number"
-              },
-              {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its trigger.",
-                "type": "number"
-              },
-              {
-                "name": "block",
-                "description": "Display the dropdown component as a block instead of inline-block.",
-                "type": "boolean"
-              },
-              {
-                "name": "hoist",
-                "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-                "type": "boolean"
-              },
-              {
-                "name": "sync",
-                "description": "Syncs the popup width or height to that of the trigger element.",
-                "type": "'width' | 'height' | 'both' | undefined"
-              }
-            ],
-            "events": [
-              {
-                "name": "ev-show",
-                "description": "Emitted when the dropdown opens."
-              },
-              {
-                "name": "ev-after-show",
-                "description": "Emitted after the dropdown opens and all animations are complete."
-              },
-              {
-                "name": "ev-hide",
-                "description": "Emitted when the dropdown closes."
+                "description": "Emitted when the drawer closes."
               },
               {
                 "name": "ev-after-hide",
-                "description": "Emitted after the dropdown closes and all animations are complete."
+                "description": "Emitted after the drawer closes and all animations are complete."
+              },
+              {
+                "name": "ev-initial-focus",
+                "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              },
+              {
+                "name": "ev-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
               }
             ]
           }
@@ -3902,27 +3902,65 @@
           }
         },
         {
-          "name": "lynk-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n\n---\n",
+          "name": "lynk-format-number",
+          "description": "Formats a number using the specified locale and options.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
-              "description": "The number to format in bytes.",
+              "description": "The number to format.",
               "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "unit",
-              "description": "The type of unit to display.",
-              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
+              "name": "type",
+              "description": "The formatting style to use.",
+              "value": {
+                "type": "'currency' | 'decimal' | 'percent'",
+                "default": "'decimal'"
+              }
             },
             {
-              "name": "display",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "name": "no-grouping",
+              "description": "Turns off grouping separators.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "currency",
+              "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
+              "value": { "type": "string", "default": "'USD'" }
+            },
+            {
+              "name": "currency-display",
+              "description": "How to display the currency.",
               "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'short'"
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
+                "default": "'symbol'"
               }
+            },
+            {
+              "name": "minimum-integer-digits",
+              "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "minimum-fraction-digits",
+              "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "maximum-fraction-digits",
+              "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "minimum-significant-digits",
+              "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "maximum-significant-digits",
+              "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
+              "value": { "type": "number" }
             }
           ],
           "events": [],
@@ -3930,18 +3968,53 @@
             "properties": [
               {
                 "name": "value",
-                "description": "The number to format in bytes.",
+                "description": "The number to format.",
                 "type": "number"
               },
               {
-                "name": "unit",
-                "description": "The type of unit to display.",
-                "type": "'byte' | 'bit'"
+                "name": "type",
+                "description": "The formatting style to use.",
+                "type": "'currency' | 'decimal' | 'percent'"
               },
               {
-                "name": "display",
-                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-                "type": "'long' | 'short' | 'narrow'"
+                "name": "noGrouping",
+                "description": "Turns off grouping separators.",
+                "type": "boolean"
+              },
+              {
+                "name": "currency",
+                "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
+                "type": "string"
+              },
+              {
+                "name": "currencyDisplay",
+                "description": "How to display the currency.",
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+              },
+              {
+                "name": "minimumIntegerDigits",
+                "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
+                "type": "number"
+              },
+              {
+                "name": "minimumFractionDigits",
+                "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
+                "type": "number"
+              },
+              {
+                "name": "maximumFractionDigits",
+                "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
+                "type": "number"
+              },
+              {
+                "name": "minimumSignificantDigits",
+                "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
+                "type": "number"
+              },
+              {
+                "name": "maximumSignificantDigits",
+                "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
+                "type": "number"
               }
             ],
             "events": []
@@ -4083,65 +4156,27 @@
           }
         },
         {
-          "name": "lynk-format-number",
-          "description": "Formats a number using the specified locale and options.\n\n---\n",
+          "name": "lynk-format-bytes",
+          "description": "Formats a number as a human readable bytes value.\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
-              "description": "The number to format.",
+              "description": "The number to format in bytes.",
               "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "type",
-              "description": "The formatting style to use.",
-              "value": {
-                "type": "'currency' | 'decimal' | 'percent'",
-                "default": "'decimal'"
-              }
-            },
-            {
-              "name": "no-grouping",
-              "description": "Turns off grouping separators.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "currency",
-              "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
-              "value": { "type": "string", "default": "'USD'" }
+              "name": "unit",
+              "description": "The type of unit to display.",
+              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
             },
             {
-              "name": "currency-display",
-              "description": "How to display the currency.",
+              "name": "display",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
               "value": {
-                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
-                "default": "'symbol'"
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'short'"
               }
-            },
-            {
-              "name": "minimum-integer-digits",
-              "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "minimum-fraction-digits",
-              "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "maximum-fraction-digits",
-              "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "minimum-significant-digits",
-              "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
-              "value": { "type": "number" }
-            },
-            {
-              "name": "maximum-significant-digits",
-              "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
-              "value": { "type": "number" }
             }
           ],
           "events": [],
@@ -4149,53 +4184,18 @@
             "properties": [
               {
                 "name": "value",
-                "description": "The number to format.",
-                "type": "number"
-              },
-              {
-                "name": "type",
-                "description": "The formatting style to use.",
-                "type": "'currency' | 'decimal' | 'percent'"
-              },
-              {
-                "name": "noGrouping",
-                "description": "Turns off grouping separators.",
-                "type": "boolean"
-              },
-              {
-                "name": "currency",
-                "description": "The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`.",
-                "type": "string"
-              },
-              {
-                "name": "currencyDisplay",
-                "description": "How to display the currency.",
-                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
-              },
-              {
-                "name": "minimumIntegerDigits",
-                "description": "The minimum number of integer digits to use. Possible values are 1 - 21.",
-                "type": "number"
-              },
-              {
-                "name": "minimumFractionDigits",
-                "description": "The minimum number of fraction digits to use. Possible values are 0 - 20.",
-                "type": "number"
-              },
-              {
-                "name": "maximumFractionDigits",
-                "description": "The maximum number of fraction digits to use. Possible values are 0 - 20.",
+                "description": "The number to format in bytes.",
                 "type": "number"
               },
               {
-                "name": "minimumSignificantDigits",
-                "description": "The minimum number of significant digits to use. Possible values are 1 - 21.",
-                "type": "number"
+                "name": "unit",
+                "description": "The type of unit to display.",
+                "type": "'byte' | 'bit'"
               },
               {
-                "name": "maximumSignificantDigits",
-                "description": "The maximum number of significant digits to use,. Possible values are 1 - 21.",
-                "type": "number"
+                "name": "display",
+                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+                "type": "'long' | 'short' | 'narrow'"
               }
             ],
             "events": []
@@ -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\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 from the item's edge. Items are inset 4px inside the menu, so the default places a submenu just inside the parent menu's outer edge. _(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": [
             {
@@ -6079,13 +6079,13 @@
         },
         {
           "name": "lynk-page",
-          "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.",
+          "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 one or more `<lynk-page-content>` elements.\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 Properties:**\n - **--background-color** - The background color of the whole page layout. _(default: var(--lynk-page-background-color))_\n- **--main-background-color** - The background color of the main content area. _(default: var(--lynk-page-main-background-color))_\n- **--content-gap** - The gap between stacked `<lynk-page-content>` sections. _(default: var(--lynk-page-content-gap))_\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": [
             {
               "name": "",
-              "description": "The page's main content area. Works best with `<lynk-page-content>`."
+              "description": "The page's main content area. Works best with one or more `<lynk-page-content>` elements."
             },
             {
               "name": "header",
@@ -6113,11 +6113,20 @@
             }
           ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "scrollContainer",
+                "description": "The page's main area. This is the scroll container for stacked `<lynk-page-content>` sections that don't set a\nheight, and for content that isn't wrapped in `<lynk-page-content>`. A single page content, or one with a set\n`height`, scrolls itself instead; use its `scrollContainer` to get the right element for a given section.",
+                "type": "HTMLElement"
+              }
+            ],
+            "events": []
+          }
         },
         {
           "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\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 page content's scroll container to the top.\n\n### **Slots:**\n - _default_ - The page content.\n- **header** - Optional content that stays pinned to the top of the page content while the rest of it scrolls.\n\n### **CSS Properties:**\n - **--background-color** - The section's background color. _(default: var(--lynk-page-content-background-color))_\n- **--header-background-color** - The color painted beneath the sticky header so scrolled content doesn't show through it. The section's `--background-color` is layered on top. _(default: var(--lynk-page-content-header-background-color))_\n- **--border-radius** - The section's border radius. _(default: var(--lynk-page-content-border-radius))_\n- **--padding-top** - Padding above the content. _(default: var(--lynk-spacing-large))_\n- **--padding-bottom** - Padding below the content. _(default: var(--lynk-spacing-large))_\n- **--gap** - The space between the header and the main content. _(default: 8px)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper, which applies the width and page margins.\n- **header** - The sticky header area.\n- **main** - The main content area.\n- **scroller** - The `<lynk-scroller>` that wraps the main content area when `scroll-x` is set.\n- **scroller-content** - The scroller's scrolling container (the scroller's `content` part).",
           "doc-url": "",
           "attributes": [
             {
@@ -6127,6 +6136,23 @@
                 "type": "'auto' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'fluid'",
                 "default": "'fluid'"
               }
+            },
+            {
+              "name": "height",
+              "description": "Gives the page content a fixed height (any CSS length, e.g. `320px`, `40vh`, `50%`) and makes it scroll its own\ncontent. Use it on stacked sections inside a `<lynk-page>`; without it a stacked section takes its natural height\nand the page's main area scrolls. A lone page content fills the main area and scrolls itself without a height.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "scroll-x",
+              "description": "Lets content that is wider than the page content scroll sideways inside it, instead of spilling out and making the\npage's main area scroll. The main content is wrapped in a `<lynk-scroller>`, which only becomes a focusable,\nlabelled scroll region when its content overflows, and shows edge shadows where content is hidden. The sticky\nheader stays outside the scroller. Off by default: the scroller clips anything that extends past it, so menus and\nother popups inside it should use `hoist`, and `position: sticky` inside it sticks to the scroller, not the page.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The page content." },
+            {
+              "name": "header",
+              "description": "Optional content that stays pinned to the top of the page content while the rest of it scrolls."
             }
           ],
           "events": [],
@@ -6137,14 +6163,28 @@
                 "description": "Set an optional maximum width for page content",
                 "type": "'auto' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'fluid'"
               },
-              { "name": "pageContent", "type": "HTMLElement" }
+              {
+                "name": "height",
+                "description": "Gives the page content a fixed height (any CSS length, e.g. `320px`, `40vh`, `50%`) and makes it scroll its own\ncontent. Use it on stacked sections inside a `<lynk-page>`; without it a stacked section takes its natural height\nand the page's main area scrolls. A lone page content fills the main area and scrolls itself without a height.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "scrollX",
+                "description": "Lets content that is wider than the page content scroll sideways inside it, instead of spilling out and making the\npage's main area scroll. The main content is wrapped in a `<lynk-scroller>`, which only becomes a focusable,\nlabelled scroll region when its content overflows, and shows edge shadows where content is hidden. The sticky\nheader stays outside the scroller. Off by default: the scroller clips anything that extends past it, so menus and\nother popups inside it should use `hoist`, and `position: sticky` inside it sticks to the scroller, not the page.",
+                "type": "boolean"
+              },
+              {
+                "name": "scrollContainer",
+                "description": "The element that scrolls this page content's slotted content. That is the page content itself when it is a scroll\ncontainer (the only content in a page, a set `height`, or a standalone page content with a header). Otherwise it is\nthe nearest scrolling ancestor, which for stacked sections in a `<lynk-page>` is the page's main area.",
+                "type": "HTMLElement"
+              }
             ],
             "events": []
           }
         },
         {
           "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\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 Properties:**\n - **--background-color** - The footer panel's background color. _(default: var(--lynk-page-footer-background-color))_\n- **--border-color** - The footer panel's border color. _(default: var(--lynk-page-footer-border-color))_\n- **--border-radius** - The radius of the footer panel's top corners. _(default: var(--lynk-page-footer-border-radius))_\n- **--shadow** - The footer panel's shadow. _(default: var(--lynk-page-footer-shadow))_\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 +6224,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\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- **--background-color** - The header area's background color. _(default: var(--lynk-page-header-background-color))_\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 +6272,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\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- **--background-color** - The sidebar's background color. _(default: var(--lynk-page-sidebar-background-color))_\n- **--border-color** - The sidebar's border color. _(default: var(--lynk-page-sidebar-border-color))_\n- **--nav-border-color** - The border between the `nav` slot and the sidebar body. _(default: var(--lynk-page-sidebar-nav-border-color))_\n- **--inset-spacing** - The space above and below an inset sidebar. _(default: var(--lynk-page-sidebar-inset-spacing))_\n- **--inset-border-radius** - An inset sidebar's border radius. _(default: var(--lynk-page-sidebar-inset-border-radius))_\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": [
             {