@uplynk/lynk-design 1.19.0 → 1.19.1

package/dist/custom-elements.json

@@ -570,56 +570,119 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/alert/alert.js",
+      "path": "components/box/box.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkAlert",
+          "name": "LynkBox",
           "cssProperties": [
             {
-              "description": "The alert's box shadow.",
-              "name": "--box-shadow"
+              "description": "Custom text align (left, center, right).",
+              "name": "--align",
+              "default": "left"
             },
             {
-              "description": "The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value.",
-              "name": "--padding"
-            }
-          ],
-          "cssParts": [
+              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
+              "name": "--background",
+              "default": "transparent"
+            },
             {
-              "description": "The component's internal block wrapper.",
-              "name": "base"
+              "description": "<border-style> <border-width> <border-color>.",
+              "name": "--border"
             },
             {
-              "description": "The container that wraps the alert icon.",
-              "name": "icon"
+              "description": "Any Border Radius token (--lynk-border-radius-medium) or a custom value.",
+              "name": "--border-radius"
             },
             {
-              "description": "The alert message.",
-              "name": "message"
+              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
+              "name": "--color",
+              "default": "inherit"
             },
             {
-              "description": "The close button.",
-              "name": "close-button"
+              "description": "Any custom px, rem, %, or vh value.",
+              "name": "--height",
+              "default": "auto"
             },
             {
-              "description": "The close button's `base` part.",
-              "name": "close-button__base"
+              "description": "Any custom px, rem, %, or vh value.",
+              "name": "--width",
+              "default": "auto"
+            },
+            {
+              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
+              "name": "--margin",
+              "default": "0"
+            },
+            {
+              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
+              "name": "--padding",
+              "default": "0"
+            },
+            {
+              "description": "Any elevation shadow token (--lynk-shadow-large);",
+              "name": "--shadow"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
             }
           ],
           "slots": [
             {
-              "description": "The alert's content.",
+              "description": "The default slot.",
               "name": ""
-            },
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "tagNameWithoutPrefix": "box",
+          "tagName": "lynk-box",
+          "customElement": true,
+          "jsDoc": "/**\n * @since 1.0\n * @status deprecated\n * @description A box, the most basic of containers.\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--align=left] - Custom text align (left, center, right).\n * @cssproperty [--background=transparent] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty --border - <border-style> <border-width> <border-color>.\n * @cssproperty --border-radius - Any Border Radius token (--lynk-border-radius-medium) or a custom value.\n * @cssproperty [--color=inherit] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty [--height=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--width=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--margin=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty [--padding=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty --shadow - Any elevation shadow token (--lynk-shadow-large);\n */",
+          "since": "1.0",
+          "status": "deprecated"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkBox",
+            "module": "components/box/box.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkBreadcrumb",
+          "cssParts": [
             {
-              "description": "An icon to show in the alert.",
-              "name": "icon"
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
             },
             {
-              "description": "Append custom actions to alert.",
-              "name": "action"
+              "description": "The separator to use between breadcrumb items. Works best with `<lynk-icon>`.",
+              "name": "separator"
             }
           ],
           "members": [
@@ -630,401 +693,435 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-icon-button': LynkIconButton }"
+              "default": "{ 'lynk-icon': LynkIcon }"
             },
             {
               "kind": "field",
-              "name": "autoHideTimeout",
-              "type": {
-                "text": "number"
-              },
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "separatorDir",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "remainingTimeInterval",
+              "name": "defaultSlot",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "countdownAnimation",
+              "name": "separatorSlot",
               "type": {
-                "text": "Animation | undefined"
-              },
-              "privacy": "private"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'icon', 'suffix', 'action')"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "attribute": "label"
             },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "tagNameWithoutPrefix": "breadcrumb",
+          "tagName": "lynk-breadcrumb",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://lynk.design/components/breadcrumb\n * @status stable\n * @since 1.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n *\n * @dependency lynk-icon\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://lynk.design/components/breadcrumb",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "lynk-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkAnimation",
+          "slots": [
+            {
+              "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "animation",
+              "type": {
+                "text": "Animation | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "base",
+              "name": "hasStarted",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "countdownElement",
+              "name": "defaultSlot",
               "type": {
-                "text": "HTMLElement"
+                "text": "Promise<HTMLSlotElement>"
               }
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-              "attribute": "open",
-              "reflects": true
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "closable",
+              "name": "play",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the alert closable.",
-              "attribute": "closable",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "attribute": "play",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "delay",
               "type": {
-                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "number"
               },
-              "default": "'primary'",
-              "description": "The alert's type (color).",
-              "attribute": "type",
-              "reflects": true
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "attribute": "delay"
             },
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "direction",
               "type": {
-                "text": "'standard' | 'filled'"
+                "text": "PlaybackDirection"
               },
-              "default": "'standard'",
-              "description": "The alert's visual appearance.",
-              "attribute": "appearance",
-              "reflects": true
+              "default": "'normal'",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "attribute": "direction"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "duration",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "number"
               },
-              "default": "'medium'",
-              "description": "The alert's size.",
-              "attribute": "size",
-              "reflects": true
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "attribute": "duration"
             },
             {
               "kind": "field",
-              "name": "duration",
+              "name": "easing",
+              "type": {
+                "text": "string"
+              },
+              "default": "'linear'",
+              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "attribute": "easing"
+            },
+            {
+              "kind": "field",
+              "name": "endDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "attribute": "end-delay"
+            },
+            {
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "attribute": "fill"
+            },
+            {
+              "kind": "field",
+              "name": "iterations",
               "default": "Infinity",
-              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
-              "attribute": "duration"
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "attribute": "iterations"
             },
             {
               "kind": "field",
-              "name": "countdown",
+              "name": "iterationStart",
               "type": {
-                "text": "'rtl' | 'ltr' | undefined"
+                "text": "number"
               },
-              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-              "attribute": "countdown",
-              "reflects": true
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "attribute": "iteration-start"
             },
             {
               "kind": "field",
-              "name": "remainingTime",
-              "privacy": "private"
+              "name": "keyframes",
+              "type": {
+                "text": "Keyframe[] | undefined"
+              },
+              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
             },
             {
-              "kind": "method",
-              "name": "restartAutoHide",
+              "kind": "field",
+              "name": "playbackRate",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+              "attribute": "playback-rate"
+            },
+            {
+              "kind": "field",
+              "name": "currentTime",
+              "type": {
+                "text": "CSSNumberish"
+              },
+              "description": "Gets and sets the current animation time."
+            },
+            {
+              "kind": "field",
+              "name": "handleAnimationFinish",
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "pauseAutoHide",
+              "kind": "field",
+              "name": "handleAnimationCancel",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "resumeAutoHide",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleCountdownChange",
+              "name": "createAnimation",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleCloseClick",
+              "name": "destroyAnimation",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleOpenChange"
+              "name": "handleAnimationChange"
             },
             {
               "kind": "method",
-              "name": "handleDurationChange"
+              "name": "handlePlayChange"
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Shows the alert."
+              "name": "handlePlaybackRateChange"
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Hides the alert"
+              "name": "cancel",
+              "description": "Clears all KeyframeEffects caused by this animation and aborts its playback."
             },
             {
               "kind": "method",
-              "name": "toast",
-              "parameters": [
-                {
-                  "name": "placement",
-                  "default": "DEFAULT_TOAST_PLACEMENT",
-                  "type": {
-                    "text": "LynkToastPlacement"
-                  },
-                  "description": "Where the toast appears. Defaults to `top-end` (top-right in LTR). `start`\nand `end` follow the inline direction, so they flip under RTL. Toasts shown with different\nplacements appear in separate stacks simultaneously."
-                }
-              ],
-              "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden."
+              "name": "finish",
+              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the alert opens.",
-              "name": "ev-show",
-              "reactName": "EvShow",
-              "eventName": "EvShowEvent"
-            },
-            {
-              "description": "Emitted after the alert opens and all animations are complete.",
-              "name": "ev-after-show",
-              "reactName": "EvAfterShow",
-              "eventName": "EvAfterShowEvent"
+              "description": "Emitted when the animation is canceled.",
+              "name": "ev-cancel",
+              "reactName": "EvCancel",
+              "eventName": "EvCancelEvent"
             },
             {
-              "description": "Emitted when the alert closes.",
-              "name": "ev-hide",
-              "reactName": "EvHide",
-              "eventName": "EvHideEvent"
+              "description": "Emitted when the animation finishes.",
+              "name": "ev-finish",
+              "reactName": "EvFinish",
+              "eventName": "EvFinishEvent"
             },
             {
-              "description": "Emitted after the alert closes and all animations are complete.",
-              "name": "ev-after-hide",
-              "reactName": "EvAfterHide",
-              "eventName": "EvAfterHideEvent"
+              "description": "Emitted when the animation starts or restarts.",
+              "name": "ev-start",
+              "reactName": "EvStart",
+              "eventName": "EvStartEvent"
             }
           ],
           "attributes": [
             {
-              "name": "open",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-              "fieldName": "open"
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "fieldName": "name"
             },
             {
-              "name": "closable",
+              "name": "play",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the alert closable.",
-              "fieldName": "closable"
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "fieldName": "play"
             },
             {
-              "name": "type",
+              "name": "delay",
               "type": {
-                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "number"
               },
-              "default": "'primary'",
-              "description": "The alert's type (color).",
-              "fieldName": "type"
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "fieldName": "delay"
             },
             {
-              "name": "appearance",
+              "name": "direction",
               "type": {
-                "text": "'standard' | 'filled'"
+                "text": "PlaybackDirection"
               },
-              "default": "'standard'",
-              "description": "The alert's visual appearance.",
-              "fieldName": "appearance"
+              "default": "'normal'",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "fieldName": "direction"
             },
             {
-              "name": "size",
+              "name": "duration",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "number"
               },
-              "default": "'medium'",
-              "description": "The alert's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "duration",
-              "default": "Infinity",
-              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
               "fieldName": "duration"
             },
             {
-              "name": "countdown",
+              "name": "easing",
               "type": {
-                "text": "'rtl' | 'ltr' | undefined"
+                "text": "string"
               },
-              "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.",
-              "fieldName": "countdown"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Alerts are used to display important messages inline or as toast notifications.",
-          "tagNameWithoutPrefix": "alert",
-          "tagName": "lynk-alert",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://lynk.design/components/alert\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot action - Append custom actions to alert.\n *\n * @event ev-show - Emitted when the alert opens.\n * @event ev-after-show - Emitted after the alert opens and all animations are complete.\n * @event ev-hide - Emitted when the alert closes.\n * @event ev-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's internal block wrapper.\n * @csspart icon - The container that wraps the alert icon.\n * @csspart message - The alert message.\n * @csspart close-button - The close button.\n * @csspart close-button__base - The close button's `base` part.\n *\n * @cssproperty --box-shadow - The alert's box shadow.\n * @cssproperty --padding - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */",
-          "documentation": "https://lynk.design/components/alert",
-          "since": "1.0",
-          "status": "stable",
-          "dependencies": [
-            "lynk-icon-button"
-          ],
-          "animations": [
-            {
-              "name": "alert.show",
-              "description": "The animation to use when showing the alert."
+              "default": "'linear'",
+              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "fieldName": "easing"
             },
             {
-              "name": "alert.hide",
-              "description": "The animation to use when hiding the alert."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkAlert",
-            "module": "components/alert/alert.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/box/box.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkBox",
-          "cssProperties": [
-            {
-              "description": "Custom text align (left, center, right).",
-              "name": "--align",
-              "default": "left"
-            },
-            {
-              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
-              "name": "--background",
-              "default": "transparent"
-            },
-            {
-              "description": "<border-style> <border-width> <border-color>.",
-              "name": "--border"
-            },
-            {
-              "description": "Any Border Radius token (--lynk-border-radius-medium) or a custom value.",
-              "name": "--border-radius"
-            },
-            {
-              "description": "Any color token (--lynk-color-neutral-100) or a custom value.",
-              "name": "--color",
-              "default": "inherit"
-            },
-            {
-              "description": "Any custom px, rem, %, or vh value.",
-              "name": "--height",
-              "default": "auto"
+              "name": "end-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "fieldName": "endDelay"
             },
             {
-              "description": "Any custom px, rem, %, or vh value.",
-              "name": "--width",
-              "default": "auto"
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "fieldName": "fill"
             },
             {
-              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
-              "name": "--margin",
-              "default": "0"
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "fieldName": "iterations"
             },
             {
-              "description": "Any spacing token (--lynk-spacing-large) or a custom value.",
-              "name": "--padding",
-              "default": "0"
+              "name": "iteration-start",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "fieldName": "iterationStart"
             },
             {
-              "description": "Any elevation shadow token (--lynk-shadow-large);",
-              "name": "--shadow"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
+              "name": "playback-rate",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+              "fieldName": "playbackRate"
             }
           ],
-          "members": [],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "tagNameWithoutPrefix": "box",
-          "tagName": "lynk-box",
+          "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
+          "tagNameWithoutPrefix": "animation",
+          "tagName": "lynk-animation",
           "customElement": true,
-          "jsDoc": "/**\n * @since 1.0\n * @status deprecated\n * @description A box, the most basic of containers.\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--align=left] - Custom text align (left, center, right).\n * @cssproperty [--background=transparent] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty --border - <border-style> <border-width> <border-color>.\n * @cssproperty --border-radius - Any Border Radius token (--lynk-border-radius-medium) or a custom value.\n * @cssproperty [--color=inherit] - Any color token (--lynk-color-neutral-100) or a custom value.\n * @cssproperty [--height=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--width=auto] - Any custom px, rem, %, or vh value.\n * @cssproperty [--margin=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty [--padding=0] - Any spacing token (--lynk-spacing-large) or a custom value.\n * @cssproperty --shadow - Any elevation shadow token (--lynk-shadow-large);\n */",
+          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n * @documentation https://lynk.design/components/animation\n * @since 1.0\n * @status stable\n *\n * @event ev-cancel - Emitted when the animation is canceled.\n * @event ev-finish - Emitted when the animation finishes.\n * @event ev-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.\n */",
+          "documentation": "https://lynk.design/components/animation",
           "since": "1.0",
-          "status": "deprecated"
+          "status": "stable"
         }
       ],
       "exports": [
@@ -1032,472 +1129,375 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkBox",
-            "module": "components/box/box.js"
+            "name": "LynkAnimation",
+            "module": "components/animation/animation.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/animation/animation.js",
+      "path": "components/alert/alert.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkAnimation",
+          "name": "LynkAlert",
+          "cssProperties": [
+            {
+              "description": "The alert's box shadow.",
+              "name": "--box-shadow"
+            },
+            {
+              "description": "The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value.",
+              "name": "--padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal block wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the alert icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The alert message.",
+              "name": "message"
+            },
+            {
+              "description": "The close button.",
+              "name": "close-button"
+            },
+            {
+              "description": "The close button's `base` part.",
+              "name": "close-button__base"
+            }
+          ],
           "slots": [
             {
-              "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.",
+              "description": "The alert's content.",
               "name": ""
+            },
+            {
+              "description": "An icon to show in the alert.",
+              "name": "icon"
+            },
+            {
+              "description": "Append custom actions to alert.",
+              "name": "action"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "animation",
+              "name": "dependencies",
               "type": {
-                "text": "Animation | undefined"
+                "text": "object"
               },
-              "privacy": "private"
+              "static": true,
+              "default": "{ 'lynk-icon-button': LynkIconButton }"
             },
             {
               "kind": "field",
-              "name": "hasStarted",
+              "name": "autoHideTimeout",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "remainingTimeInterval",
               "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
+                "text": "number"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "countdownAnimation",
               "type": {
-                "text": "string"
+                "text": "Animation | undefined"
               },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "attribute": "name"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "attribute": "play",
-              "reflects": true
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'icon', 'suffix', 'action')"
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "base",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "attribute": "delay"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "countdownElement",
               "type": {
-                "text": "PlaybackDirection"
-              },
-              "default": "'normal'",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "attribute": "direction"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "duration",
+              "name": "open",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "attribute": "duration"
+              "default": "false",
+              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "easing",
+              "name": "closable",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'linear'",
-              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "attribute": "easing"
+              "default": "false",
+              "description": "Makes the alert closable.",
+              "attribute": "closable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "endDelay",
+              "name": "type",
               "type": {
-                "text": "number"
+                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "attribute": "end-delay"
+              "default": "'primary'",
+              "description": "The alert's type (color).",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "fill",
+              "name": "appearance",
               "type": {
-                "text": "FillMode"
+                "text": "'standard' | 'filled'"
               },
-              "default": "'auto'",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "attribute": "fill"
-            },
-            {
-              "kind": "field",
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "attribute": "iterations"
+              "default": "'standard'",
+              "description": "The alert's visual appearance.",
+              "attribute": "appearance",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iterationStart",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "attribute": "iteration-start"
+              "default": "'medium'",
+              "description": "The alert's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "keyframes",
-              "type": {
-                "text": "Keyframe[] | undefined"
-              },
-              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
+              "name": "duration",
+              "default": "Infinity",
+              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+              "attribute": "duration"
             },
             {
               "kind": "field",
-              "name": "playbackRate",
+              "name": "countdown",
               "type": {
-                "text": "number"
+                "text": "'rtl' | 'ltr' | undefined"
               },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "attribute": "playback-rate"
+              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+              "attribute": "countdown",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "currentTime",
-              "type": {
-                "text": "CSSNumberish"
-              },
-              "description": "Gets and sets the current animation time."
+              "name": "remainingTime",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleAnimationFinish",
+              "kind": "method",
+              "name": "restartAutoHide",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleAnimationCancel",
+              "kind": "method",
+              "name": "pauseAutoHide",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleSlotChange",
+              "name": "resumeAutoHide",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "createAnimation",
+              "name": "handleCountdownChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "destroyAnimation",
+              "name": "handleCloseClick",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleAnimationChange"
+              "name": "handleOpenChange"
             },
             {
               "kind": "method",
-              "name": "handlePlayChange"
+              "name": "handleDurationChange"
             },
             {
               "kind": "method",
-              "name": "handlePlaybackRateChange"
+              "name": "show",
+              "description": "Shows the alert."
             },
             {
               "kind": "method",
-              "name": "cancel",
-              "description": "Clears all KeyframeEffects caused by this animation and aborts its playback."
+              "name": "hide",
+              "description": "Hides the alert"
             },
             {
               "kind": "method",
-              "name": "finish",
-              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
+              "name": "toast",
+              "parameters": [
+                {
+                  "name": "placement",
+                  "default": "DEFAULT_TOAST_PLACEMENT",
+                  "type": {
+                    "text": "LynkToastPlacement"
+                  },
+                  "description": "Where the toast appears. Defaults to `top-end` (top-right in LTR). `start`\nand `end` follow the inline direction, so they flip under RTL. Toasts shown with different\nplacements appear in separate stacks simultaneously."
+                }
+              ],
+              "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the animation is canceled.",
-              "name": "ev-cancel",
-              "reactName": "EvCancel",
-              "eventName": "EvCancelEvent"
-            },
-            {
-              "description": "Emitted when the animation finishes.",
-              "name": "ev-finish",
-              "reactName": "EvFinish",
-              "eventName": "EvFinishEvent"
-            },
-            {
-              "description": "Emitted when the animation starts or restarts.",
-              "name": "ev-start",
-              "reactName": "EvStart",
-              "eventName": "EvStartEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "fieldName": "name"
-            },
-            {
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "fieldName": "play"
-            },
-            {
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "fieldName": "delay"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "PlaybackDirection"
-              },
-              "default": "'normal'",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "fieldName": "duration"
-            },
-            {
-              "name": "easing",
-              "type": {
-                "text": "string"
-              },
-              "default": "'linear'",
-              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "fieldName": "easing"
-            },
-            {
-              "name": "end-delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "fieldName": "endDelay"
-            },
-            {
-              "name": "fill",
-              "type": {
-                "text": "FillMode"
-              },
-              "default": "'auto'",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "fieldName": "fill"
-            },
-            {
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "fieldName": "iterations"
+              "description": "Emitted when the alert opens.",
+              "name": "ev-show",
+              "reactName": "EvShow",
+              "eventName": "EvShowEvent"
             },
             {
-              "name": "iteration-start",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "fieldName": "iterationStart"
+              "description": "Emitted after the alert opens and all animations are complete.",
+              "name": "ev-after-show",
+              "reactName": "EvAfterShow",
+              "eventName": "EvAfterShowEvent"
             },
             {
-              "name": "playback-rate",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "fieldName": "playbackRate"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
-          "tagNameWithoutPrefix": "animation",
-          "tagName": "lynk-animation",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n * @documentation https://lynk.design/components/animation\n * @since 1.0\n * @status stable\n *\n * @event ev-cancel - Emitted when the animation is canceled.\n * @event ev-finish - Emitted when the animation finishes.\n * @event ev-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.\n */",
-          "documentation": "https://lynk.design/components/animation",
-          "since": "1.0",
-          "status": "stable"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkAnimation",
-            "module": "components/animation/animation.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkBreadcrumb",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more breadcrumb items to display.",
-              "name": ""
+              "description": "Emitted when the alert closes.",
+              "name": "ev-hide",
+              "reactName": "EvHide",
+              "eventName": "EvHideEvent"
             },
             {
-              "description": "The separator to use between breadcrumb items. Works best with `<lynk-icon>`.",
-              "name": "separator"
+              "description": "Emitted after the alert closes and all animations are complete.",
+              "name": "ev-after-hide",
+              "reactName": "EvAfterHide",
+              "eventName": "EvAfterHideEvent"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "dependencies",
+              "name": "open",
               "type": {
-                "text": "object"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "{ 'lynk-icon': LynkIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "false",
+              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+              "fieldName": "open"
             },
             {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the alert closable.",
+              "fieldName": "closable"
             },
             {
-              "kind": "field",
-              "name": "defaultSlot",
+              "name": "type",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The alert's type (color).",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "separatorSlot",
+              "name": "appearance",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "'standard' | 'filled'"
+              },
+              "default": "'standard'",
+              "description": "The alert's visual appearance.",
+              "fieldName": "appearance"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "''",
-              "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.",
-              "attribute": "label"
+              "default": "'medium'",
+              "description": "The alert's size.",
+              "fieldName": "size"
             },
             {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
+              "name": "duration",
+              "default": "Infinity",
+              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+              "fieldName": "duration"
             },
             {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "name": "countdown",
               "type": {
-                "text": "string"
+                "text": "'rtl' | 'ltr' | undefined"
               },
-              "default": "''",
-              "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.",
-              "fieldName": "label"
+              "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.",
+              "fieldName": "countdown"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "tagNameWithoutPrefix": "breadcrumb",
-          "tagName": "lynk-breadcrumb",
+          "summary": "Alerts are used to display important messages inline or as toast notifications.",
+          "tagNameWithoutPrefix": "alert",
+          "tagName": "lynk-alert",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://lynk.design/components/breadcrumb\n * @status stable\n * @since 1.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n *\n * @dependency lynk-icon\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://lynk.design/components/breadcrumb",
-          "status": "stable",
+          "jsDoc": "/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://lynk.design/components/alert\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon-button\n *\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot action - Append custom actions to alert.\n *\n * @event ev-show - Emitted when the alert opens.\n * @event ev-after-show - Emitted after the alert opens and all animations are complete.\n * @event ev-hide - Emitted when the alert closes.\n * @event ev-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's internal block wrapper.\n * @csspart icon - The container that wraps the alert icon.\n * @csspart message - The alert message.\n * @csspart close-button - The close button.\n * @csspart close-button__base - The close button's `base` part.\n *\n * @cssproperty --box-shadow - The alert's box shadow.\n * @cssproperty --padding - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */",
+          "documentation": "https://lynk.design/components/alert",
           "since": "1.0",
+          "status": "stable",
           "dependencies": [
-            "lynk-icon"
+            "lynk-icon-button"
+          ],
+          "animations": [
+            {
+              "name": "alert.show",
+              "description": "The animation to use when showing the alert."
+            },
+            {
+              "name": "alert.hide",
+              "description": "The animation to use when hiding the alert."
+            }
           ]
         }
       ],
@@ -1506,8 +1506,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
+            "name": "LynkAlert",
+            "module": "components/alert/alert.js"
           }
         }
       ]
@@ -9642,81 +9642,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkDivider",
-          "cssProperties": [
-            {
-              "description": "The color of the divider.",
-              "name": "--color"
-            },
-            {
-              "description": "The width of the divider.",
-              "name": "--width"
-            },
-            {
-              "description": "The spacing of the divider.",
-              "name": "--spacing"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "attribute": "vertical",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleVerticalChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Dividers are used to visually separate or group elements.",
-          "tagNameWithoutPrefix": "divider",
-          "tagName": "lynk-divider",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://lynk.design/components/divider\n * @status stable\n * @since 1.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
-          "documentation": "https://lynk.design/components/divider",
-          "status": "stable",
-          "since": "1.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkDivider",
-            "module": "components/divider/divider.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/dialog/dialog.js",
@@ -10089,6 +10014,81 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkDivider",
+          "cssProperties": [
+            {
+              "description": "The color of the divider.",
+              "name": "--color"
+            },
+            {
+              "description": "The width of the divider.",
+              "name": "--width"
+            },
+            {
+              "description": "The spacing of the divider.",
+              "name": "--spacing"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "attribute": "vertical",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleVerticalChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Dividers are used to visually separate or group elements.",
+          "tagNameWithoutPrefix": "divider",
+          "tagName": "lynk-divider",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://lynk.design/components/divider\n * @status stable\n * @since 1.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
+          "documentation": "https://lynk.design/components/divider",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkDivider",
+            "module": "components/divider/divider.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/drawer/drawer.js",
@@ -32000,7 +32000,7 @@
   "package": {
     "name": "@uplynk/lynk-design",
     "description": "A library of web components for building web applications with the Uplynk user interface style guide.",
-    "version": "1.19.0",
+    "version": "1.19.1",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"