@uplynk/lynk-design 1.19.0 → 1.19.1

package/dist/types/vue/index.d.ts

@@ -4,10 +4,10 @@ import type { LynkAccordion } from "../../components/accordion/accordion.compone
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
-import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.component.js";
 import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { LynkAnimation } from "../../components/animation/animation.component.js";
+import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { LynkButton } from "../../components/button/button.component.js";
 import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
@@ -22,8 +22,8 @@ import type { LynkCombobox } from "../../components/combobox/combobox.component.
 import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { LynkDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { LynkDateTimePicker } from "../../components/date-time-picker/date-time-picker.component.js";
-import type { LynkDivider } from "../../components/divider/divider.component.js";
 import type { LynkDialog } from "../../components/dialog/dialog.component.js";
+import type { LynkDivider } from "../../components/divider/divider.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
@@ -136,39 +136,18 @@ type LynkBadgeProps = {
   pulse?: LynkBadge["pulse"];
 };
 
-type LynkAlertProps = {
-  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-  open?: LynkAlert["open"];
-  /** Makes the alert closable. */
-  closable?: LynkAlert["closable"];
-  /** The alert's type (color). */
-  type?: LynkAlert["type"];
-  /** The alert's visual appearance. */
-  appearance?: LynkAlert["appearance"];
-  /** The alert's size. */
-  size?: LynkAlert["size"];
-  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
-  duration?: LynkAlert["duration"];
-  /** Enables a countdown that indicates the remaining time the alert will be displayed.
-Typically used to indicate the remaining time before a whole app refresh. */
-  countdown?: LynkAlert["countdown"];
+type LynkBoxProps = {};
+
+type LynkBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: LynkBreadcrumb["label"];
   /**  */
-  base?: LynkAlert["base"];
+  defaultSlot?: LynkBreadcrumb["defaultSlot"];
   /**  */
-  countdownElement?: LynkAlert["countdownElement"];
-  /** Emitted when the alert opens. */
-  "onev-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert opens and all animations are complete. */
-  "onev-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the alert closes. */
-  "onev-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert closes and all animations are complete. */
-  "onev-after-hide"?: (e: CustomEvent<never>) => void;
+  separatorSlot?: LynkBreadcrumb["separatorSlot"];
 };
 
-type LynkBoxProps = {};
-
 type LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -210,14 +189,35 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: LynkBreadcrumb["label"];
+type LynkAlertProps = {
+  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+  open?: LynkAlert["open"];
+  /** Makes the alert closable. */
+  closable?: LynkAlert["closable"];
+  /** The alert's type (color). */
+  type?: LynkAlert["type"];
+  /** The alert's visual appearance. */
+  appearance?: LynkAlert["appearance"];
+  /** The alert's size. */
+  size?: LynkAlert["size"];
+  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
+the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`. */
+  duration?: LynkAlert["duration"];
+  /** Enables a countdown that indicates the remaining time the alert will be displayed.
+Typically used to indicate the remaining time before a whole app refresh. */
+  countdown?: LynkAlert["countdown"];
   /**  */
-  defaultSlot?: LynkBreadcrumb["defaultSlot"];
+  base?: LynkAlert["base"];
   /**  */
-  separatorSlot?: LynkBreadcrumb["separatorSlot"];
+  countdownElement?: LynkAlert["countdownElement"];
+  /** Emitted when the alert opens. */
+  "onev-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert opens and all animations are complete. */
+  "onev-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the alert closes. */
+  "onev-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert closes and all animations are complete. */
+  "onev-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
 type LynkBreadcrumbItemProps = {
@@ -869,11 +869,6 @@ inside of the viewport. */
   "onev-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: LynkDivider["vertical"];
-};
-
 type LynkDialogProps = {
   /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
@@ -908,6 +903,11 @@ accessible way for users to dismiss the dialog. */
   "onev-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type LynkDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: LynkDivider["vertical"];
+};
+
 type LynkDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -2798,42 +2798,6 @@ export type CustomElements = {
    */
   "lynk-badge": DefineComponent<LynkBadgeProps>;
 
-  /**
-   * Alerts are used to display important messages inline or as toast notifications.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the alert opens.
-   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
-   * - **ev-hide** - Emitted when the alert closes.
-   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the alert.
-   * - **hide()** - Hides the alert
-   * - **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   *
-   * ### **Slots:**
-   *  - _default_ - The alert's content.
-   * - **icon** - An icon to show in the alert.
-   * - **action** - Append custom actions to alert.
-   *
-   * ### **CSS Properties:**
-   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
-   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal block wrapper.
-   * - **icon** - The container that wraps the alert icon.
-   * - **message** - The alert message.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
-   */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
-
   /**
    *
    * ---
@@ -2859,6 +2823,20 @@ export type CustomElements = {
    */
   "lynk-box": DefineComponent<LynkBoxProps>;
 
+  /**
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+
   /**
    * 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).
    * ---
@@ -2879,18 +2857,40 @@ export type CustomElements = {
   "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the alert opens.
+   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
+   * - **ev-hide** - Emitted when the alert closes.
+   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the alert.
+   * - **hide()** - Hides the alert
+   * - **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
+   *
+   * ### **CSS Properties:**
+   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
+   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - The component's internal block wrapper.
+   * - **icon** - The container that wraps the alert icon.
+   * - **message** - The alert message.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
    */
-  "lynk-breadcrumb": DefineComponent<LynkBreadcrumbProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -3367,18 +3367,6 @@ export type CustomElements = {
    */
   "lynk-date-time-picker": DefineComponent<LynkDateTimePickerProps>;
 
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "lynk-divider": DefineComponent<LynkDividerProps>;
-
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
    * ---
@@ -3422,6 +3410,18 @@ export type CustomElements = {
    */
   "lynk-dialog": DefineComponent<LynkDialogProps>;
 
+  /**
+   * Dividers are used to visually separate or group elements.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   */
+  "lynk-divider": DefineComponent<LynkDividerProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---

package/dist/vscode.html-custom-data.json

@@ -137,71 +137,30 @@
       ]
     },
     {
-      "name": "lynk-alert",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
+      "name": "lynk-box",
+      "description": "\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--align** - Custom text align (left, center, right). _(default: left)_\n- **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_\n- **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_\n- **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_\n- **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_\n- **--height** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--width** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+      "attributes": [],
+      "references": [
+        { "name": "Documentation", "url": "https://lynk.design/components/box" }
+      ]
+    },
+    {
+      "name": "lynk-breadcrumb",
+      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
-          "name": "open",
-          "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Makes the alert closable.",
-          "values": []
-        },
-        {
-          "name": "type",
-          "description": "The alert's type (color).",
-          "values": [
-            { "name": "primary" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "appearance",
-          "description": "The alert's visual appearance.",
-          "values": [{ "name": "standard" }, { "name": "filled" }]
-        },
-        {
-          "name": "size",
-          "description": "The alert's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "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": "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.",
           "values": []
-        },
-        {
-          "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.",
-          "values": [{ "name": "rtl" }, { "name": "ltr" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://lynk.design/components/alert"
+          "url": "https://lynk.design/components/breadcrumb"
         }
       ]
     },
-    {
-      "name": "lynk-box",
-      "description": "\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--align** - Custom text align (left, center, right). _(default: left)_\n- **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_\n- **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_\n- **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_\n- **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_\n- **--height** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--width** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-      "attributes": [],
-      "references": [
-        { "name": "Documentation", "url": "https://lynk.design/components/box" }
-      ]
-    },
     {
       "name": "lynk-animation",
       "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **ev-cancel** - Emitted when the animation is canceled.\n- **ev-finish** - Emitted when the animation finishes.\n- **ev-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
@@ -270,19 +229,60 @@
       ]
     },
     {
-      "name": "lynk-breadcrumb",
-      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "lynk-alert",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(placement: _LynkToastPlacement_)** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
       "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.",
+          "name": "open",
+          "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Makes the alert closable.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "The alert's type (color).",
+          "values": [
+            { "name": "primary" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "The alert's visual appearance.",
+          "values": [{ "name": "standard" }, { "name": "filled" }]
+        },
+        {
+          "name": "size",
+          "description": "The alert's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "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`.",
           "values": []
+        },
+        {
+          "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.",
+          "values": [{ "name": "rtl" }, { "name": "ltr" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://lynk.design/components/breadcrumb"
+          "url": "https://lynk.design/components/alert"
         }
       ]
     },
@@ -1483,23 +1483,6 @@
         }
       ]
     },
-    {
-      "name": "lynk-divider",
-      "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "vertical",
-          "description": "Draws the divider in a vertical orientation.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/divider"
-        }
-      ]
-    },
     {
       "name": "lynk-dialog",
       "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dialog opens.\n- **ev-after-show** - Emitted after the dialog opens and all animations are complete.\n- **ev-hide** - Emitted when the dialog closes.\n- **ev-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the label prop.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The dialog panel (where the dialog and its content is rendered).\n- **header** - The dialog header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The dialog title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The dialog body.\n- **footer** - The dialog footer.",
@@ -1536,6 +1519,23 @@
         }
       ]
     },
+    {
+      "name": "lynk-divider",
+      "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "vertical",
+          "description": "Draws the divider in a vertical orientation.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/divider"
+        }
+      ]
+    },
     {
       "name": "lynk-drawer",
       "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the drawer opens.\n- **ev-after-show** - Emitted after the drawer opens and all animations are complete.\n- **ev-hide** - Emitted when the drawer closes.\n- **ev-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **ev-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **ev-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's content.\n- **label** - The drawer's label. Alternatively, you can use the label prop.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **overlay** - The overlay.\n- **panel** - The drawer panel (where the drawer and its content is rendered).\n- **header** - The drawer header.\n- **header-actions** - Optional actions to add to the header. Works best with `<lynk-icon-button>`.\n- **title** - The drawer title.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.\n- **body** - The drawer body.\n- **footer** - The drawer footer.",