@uplynk/lynk-design 1.14.0 → 1.15.0

package/cdn/custom-elements.json

@@ -140,437 +140,343 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/alert/alert.js",
+      "path": "components/animation/animation.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "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"
-            }
-          ],
+          "name": "LynkAnimation",
           "slots": [
             {
-              "description": "The alert's content.",
+              "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": ""
-            },
-            {
-              "description": "An icon to show in the alert.",
-              "name": "icon"
-            },
-            {
-              "description": "Append custom actions to alert.",
-              "name": "action"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "animation",
               "type": {
-                "text": "object"
+                "text": "Animation | undefined"
               },
-              "static": true,
-              "default": "{ 'lynk-icon-button': LynkIconButton }"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "autoHideTimeout",
+              "name": "hasStarted",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "remainingTimeInterval",
+              "name": "defaultSlot",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private"
+                "text": "Promise<HTMLSlotElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "countdownAnimation",
+              "name": "name",
               "type": {
-                "text": "Animation | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'icon', 'suffix', 'action')"
+              "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
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "attribute": "delay"
             },
             {
               "kind": "field",
-              "name": "base",
+              "name": "direction",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "PlaybackDirection"
+              },
+              "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": "countdownElement",
+              "name": "duration",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "attribute": "duration"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "easing",
               "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": "'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": "closable",
+              "name": "endDelay",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the alert closable.",
-              "attribute": "closable",
-              "reflects": true
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "attribute": "end-delay"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "fill",
               "type": {
-                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "FillMode"
               },
-              "default": "'primary'",
-              "description": "The alert's type (color).",
-              "attribute": "type",
-              "reflects": true
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "attribute": "fill"
             },
             {
               "kind": "field",
-              "name": "duration",
+              "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",
-              "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"
-            },
-            {
-              "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"
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "fieldName": "delay"
             },
             {
-              "name": "countdown",
+              "name": "direction",
               "type": {
-                "text": "'rtl' | 'ltr' | undefined"
+                "text": "PlaybackDirection"
               },
-              "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."
-            },
-            {
-              "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/auto-grid/auto-grid.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkAutoGrid",
-          "cssProperties": [
-            {
-              "description": "Customize the gap of the auto-grid group.",
-              "name": "--gap",
-              "default": "var(--lynk-spacing-base)"
+              "default": "'normal'",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "fieldName": "direction"
             },
             {
-              "description": "Customize the allowed min-size of the auto-grid items.",
-              "name": "--min-size",
-              "default": "20rem"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "autoSize",
+              "name": "duration",
               "type": {
-                "text": "'fit' | 'fill'"
+                "text": "number"
               },
-              "default": "'fit'",
-              "description": "How to justify auto-grid items",
-              "attribute": "auto-size",
-              "reflects": true
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "fieldName": "duration"
             },
             {
-              "kind": "field",
-              "name": "minSize",
+              "name": "easing",
               "type": {
                 "text": "string"
               },
-              "default": "'20rem'",
-              "description": "How to align auto-grid items to each-other",
-              "attribute": "min-size",
-              "reflects": true
+              "default": "'linear'",
+              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "fieldName": "easing"
             },
             {
-              "kind": "field",
-              "name": "gap",
+              "name": "end-delay",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'var(--lynk-spacing-base)'",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "attribute": "gap",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "fieldName": "endDelay"
+            },
             {
-              "name": "auto-size",
+              "name": "fill",
               "type": {
-                "text": "'fit' | 'fill'"
+                "text": "FillMode"
               },
-              "default": "'fit'",
-              "description": "How to justify auto-grid items",
-              "fieldName": "autoSize"
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "fieldName": "fill"
             },
             {
-              "name": "min-size",
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "fieldName": "iterations"
+            },
+            {
+              "name": "iteration-start",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'20rem'",
-              "description": "How to align auto-grid items to each-other",
-              "fieldName": "minSize"
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "fieldName": "iterationStart"
             },
             {
-              "name": "gap",
+              "name": "playback-rate",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "'var(--lynk-spacing-base)'",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "fieldName": "gap"
+              "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": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.",
-          "tagNameWithoutPrefix": "auto-grid",
-          "tagName": "lynk-auto-grid",
+          "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 A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n * @documentation https://lynk.design/components/auto-grid\n * @since 1.0\n * @status stable\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--gap=var(--lynk-spacing-base)] - Customize the gap of the auto-grid group.\n * @cssproperty [--min-size=20rem] - Customize the allowed min-size of the auto-grid items.\n */",
-          "documentation": "https://lynk.design/components/auto-grid",
+          "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"
         }
@@ -580,353 +486,326 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAutoGrid",
-            "module": "components/auto-grid/auto-grid.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",
-          "slots": [
+          "name": "LynkAlert",
+          "cssProperties": [
             {
-              "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": ""
+              "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"
             }
           ],
-          "members": [
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "animation",
-              "type": {
-                "text": "Animation | undefined"
-              },
-              "privacy": "private"
+              "description": "The component's internal block wrapper.",
+              "name": "base"
             },
             {
-              "kind": "field",
-              "name": "hasStarted",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "The container that wraps the alert icon.",
+              "name": "icon"
             },
             {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
+              "description": "The alert message.",
+              "name": "message"
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "attribute": "name"
+              "description": "The close button.",
+              "name": "close-button"
+            },
+            {
+              "description": "The close button's `base` part.",
+              "name": "close-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "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": "play",
+              "name": "dependencies",
               "type": {
-                "text": "boolean"
+                "text": "object"
               },
-              "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
+              "static": true,
+              "default": "{ 'lynk-icon-button': LynkIconButton }"
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "autoHideTimeout",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "attribute": "delay"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "remainingTimeInterval",
               "type": {
-                "text": "PlaybackDirection"
+                "text": "number"
               },
-              "default": "'normal'",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "attribute": "direction"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "duration",
+              "name": "countdownAnimation",
               "type": {
-                "text": "number"
+                "text": "Animation | undefined"
               },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "attribute": "duration"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "easing",
-              "type": {
-                "text": "string"
-              },
-              "default": "'linear'",
-              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "attribute": "easing"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'icon', 'suffix', 'action')"
             },
             {
               "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"
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "fill",
+              "name": "base",
               "type": {
-                "text": "FillMode"
-              },
-              "default": "'auto'",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "attribute": "fill"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "attribute": "iterations"
+              "name": "countdownElement",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "iterationStart",
+              "name": "open",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "attribute": "iteration-start"
+              "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": "keyframes",
+              "name": "closable",
               "type": {
-                "text": "Keyframe[] | undefined"
+                "text": "boolean"
               },
-              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
+              "default": "false",
+              "description": "Makes the alert closable.",
+              "attribute": "closable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "playbackRate",
+              "name": "type",
               "type": {
-                "text": "number"
+                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "attribute": "playback-rate"
+              "default": "'primary'",
+              "description": "The alert's type (color).",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "currentTime",
+              "name": "duration",
+              "default": "Infinity",
+              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+              "attribute": "duration"
+            },
+            {
+              "kind": "field",
+              "name": "countdown",
               "type": {
-                "text": "CSSNumberish"
+                "text": "'rtl' | 'ltr' | undefined"
               },
-              "description": "Gets and sets the current animation time."
+              "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": "handleAnimationFinish",
+              "name": "remainingTime",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleAnimationCancel",
+              "kind": "method",
+              "name": "restartAutoHide",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleSlotChange",
+              "name": "pauseAutoHide",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "createAnimation",
+              "name": "resumeAutoHide",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "destroyAnimation",
+              "name": "handleCountdownChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleAnimationChange"
+              "name": "handleCloseClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handlePlayChange"
+              "name": "handleOpenChange"
             },
             {
               "kind": "method",
-              "name": "handlePlaybackRateChange"
+              "name": "handleDurationChange"
             },
             {
               "kind": "method",
-              "name": "cancel",
-              "description": "Clears all KeyframeEffects caused by this animation and aborts its playback."
+              "name": "show",
+              "description": "Shows the alert."
             },
             {
               "kind": "method",
-              "name": "finish",
-              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
+              "name": "hide",
+              "description": "Hides the alert"
+            },
+            {
+              "kind": "method",
+              "name": "toast",
+              "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 alert opens.",
+              "name": "ev-show",
+              "reactName": "EvShow",
+              "eventName": "EvShowEvent"
             },
             {
-              "description": "Emitted when the animation finishes.",
-              "name": "ev-finish",
-              "reactName": "EvFinish",
-              "eventName": "EvFinishEvent"
+              "description": "Emitted after the alert opens and all animations are complete.",
+              "name": "ev-after-show",
+              "reactName": "EvAfterShow",
+              "eventName": "EvAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the alert closes.",
+              "name": "ev-hide",
+              "reactName": "EvHide",
+              "eventName": "EvHideEvent"
             },
             {
-              "description": "Emitted when the animation starts or restarts.",
-              "name": "ev-start",
-              "reactName": "EvStart",
-              "eventName": "EvStartEvent"
+              "description": "Emitted after the alert closes and all animations are complete.",
+              "name": "ev-after-hide",
+              "reactName": "EvAfterHide",
+              "eventName": "EvAfterHideEvent"
             }
           ],
           "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",
+              "name": "open",
               "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"
+              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+              "fieldName": "open"
             },
             {
-              "name": "delay",
+              "name": "closable",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "fieldName": "delay"
+              "default": "false",
+              "description": "Makes the alert closable.",
+              "fieldName": "closable"
             },
             {
-              "name": "direction",
+              "name": "type",
               "type": {
-                "text": "PlaybackDirection"
+                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "'normal'",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
-              "fieldName": "direction"
+              "default": "'primary'",
+              "description": "The alert's type (color).",
+              "fieldName": "type"
             },
             {
               "name": "duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "fieldName": "duration"
-            },
-            {
-              "name": "easing",
-              "type": {
-                "text": "string"
-              },
-              "default": "'linear'",
-              "description": "The easing function to use for the animation. This can be a Lynk's easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "fieldName": "easing"
-            },
-            {
-              "name": "end-delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "fieldName": "endDelay"
-            },
-            {
-              "name": "fill",
-              "type": {
-                "text": "FillMode"
-              },
-              "default": "'auto'",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "fieldName": "fill"
-            },
-            {
-              "name": "iterations",
               "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "fieldName": "iterations"
-            },
-            {
-              "name": "iteration-start",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "fieldName": "iterationStart"
+              "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"
             },
             {
-              "name": "playback-rate",
+              "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.",
-              "fieldName": "playbackRate"
+              "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": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
-          "tagNameWithoutPrefix": "animation",
-          "tagName": "lynk-animation",
+          "summary": "Alerts are used to display important messages inline or as toast notifications.",
+          "tagNameWithoutPrefix": "alert",
+          "tagName": "lynk-alert",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n * @documentation https://lynk.design/components/animation\n * @since 1.0\n * @status stable\n *\n * @event ev-cancel - Emitted when the animation is canceled.\n * @event ev-finish - Emitted when the animation finishes.\n * @event ev-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.\n */",
-          "documentation": "https://lynk.design/components/animation",
+          "jsDoc": "/**\n * @summary 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"
+          "status": "stable",
+          "dependencies": [
+            "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."
+            }
+          ]
         }
       ],
       "exports": [
@@ -934,187 +813,120 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAnimation",
-            "module": "components/animation/animation.js"
+            "name": "LynkAlert",
+            "module": "components/alert/alert.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.js",
+      "path": "components/auto-grid/auto-grid.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkAvatar",
+          "name": "LynkAutoGrid",
           "cssProperties": [
             {
-              "description": "The size of the avatar.",
-              "name": "--size"
+              "description": "Customize the gap of the auto-grid group.",
+              "name": "--gap",
+              "default": "var(--lynk-spacing-base)"
+            },
+            {
+              "description": "Customize the allowed min-size of the auto-grid items.",
+              "name": "--min-size",
+              "default": "20rem"
             }
           ],
           "cssParts": [
             {
-              "description": "The container that wraps the avatar's icon.",
-              "name": "icon"
-            },
-            {
-              "description": "The container that wraps the avatar's initials.",
-              "name": "initials"
-            },
-            {
-              "description": "The avatar image. Only shown when the `image` attribute is set.",
-              "name": "image"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             }
           ],
           "slots": [
             {
-              "description": "The default icon to use when no image or initials are present. Works best with `<wa-icon>`.",
-              "name": "icon"
+              "description": "The default slot.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "image",
+              "name": "autoSize",
               "type": {
-                "text": "string"
+                "text": "'fit' | 'fill'"
               },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "attribute": "image"
+              "default": "'fit'",
+              "description": "How to justify auto-grid items",
+              "attribute": "auto-size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "minSize",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "attribute": "label"
+              "default": "'20rem'",
+              "description": "How to align auto-grid items to each-other",
+              "attribute": "min-size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "initials",
+              "name": "gap",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "attribute": "initials"
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "attribute": "loading"
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "attribute": "shape",
+              "default": "'var(--lynk-spacing-base)'",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "attribute": "gap",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleImageChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleImageLoadError",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.",
-              "name": "ev-error",
-              "reactName": "EvError",
-              "eventName": "EvErrorEvent"
             }
           ],
           "attributes": [
             {
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "fieldName": "image"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "fieldName": "label"
-            },
-            {
-              "name": "initials",
+              "name": "auto-size",
               "type": {
-                "text": "string"
+                "text": "'fit' | 'fill'"
               },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "fieldName": "initials"
+              "default": "'fit'",
+              "description": "How to justify auto-grid items",
+              "fieldName": "autoSize"
             },
             {
-              "name": "loading",
+              "name": "min-size",
               "type": {
-                "text": "'eager' | 'lazy'"
+                "text": "string"
               },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "fieldName": "loading"
+              "default": "'20rem'",
+              "description": "How to align auto-grid items to each-other",
+              "fieldName": "minSize"
             },
             {
-              "name": "shape",
+              "name": "gap",
               "type": {
-                "text": "'circle' | 'square' | 'rounded'"
+                "text": "string"
               },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "fieldName": "shape"
+              "default": "'var(--lynk-spacing-base)'",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "fieldName": "gap"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Avatars are used to represent a person or object.",
-          "tagNameWithoutPrefix": "avatar",
-          "tagName": "lynk-avatar",
+          "summary": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.",
+          "tagNameWithoutPrefix": "auto-grid",
+          "tagName": "lynk-auto-grid",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://lynk.design/components/avatar\n * @status stable\n * @since 1.4\n *\n * @dependency lynk-icon\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n *\n * @event ev-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
-          "documentation": "https://lynk.design/components/avatar",
-          "status": "stable",
-          "since": "1.4",
-          "dependencies": [
-            "lynk-icon"
-          ]
+          "jsDoc": "/**\n * @summary A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n * @documentation https://lynk.design/components/auto-grid\n * @since 1.0\n * @status stable\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's internal wrapper.\n *\n * @cssproperty [--gap=var(--lynk-spacing-base)] - Customize the gap of the auto-grid group.\n * @cssproperty [--min-size=20rem] - Customize the allowed min-size of the auto-grid items.\n */",
+          "documentation": "https://lynk.design/components/auto-grid",
+          "since": "1.0",
+          "status": "stable"
         }
       ],
       "exports": [
@@ -1122,8 +934,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAvatar",
-            "module": "components/avatar/avatar.js"
+            "name": "LynkAutoGrid",
+            "module": "components/auto-grid/auto-grid.js"
           }
         }
       ]
@@ -1342,6 +1154,194 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatar/avatar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkAvatar",
+          "cssProperties": [
+            {
+              "description": "The size of the avatar.",
+              "name": "--size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container that wraps the avatar's icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The container that wraps the avatar's initials.",
+              "name": "initials"
+            },
+            {
+              "description": "The avatar image. Only shown when the `image` attribute is set.",
+              "name": "image"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default icon to use when no image or initials are present. Works best with `<wa-icon>`.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "attribute": "image"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "attribute": "initials"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "attribute": "shape",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleImageChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleImageLoadError",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.",
+              "name": "ev-error",
+              "reactName": "EvError",
+              "eventName": "EvErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "fieldName": "image"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "fieldName": "label"
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "fieldName": "initials"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "fieldName": "shape"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Avatars are used to represent a person or object.",
+          "tagNameWithoutPrefix": "avatar",
+          "tagName": "lynk-avatar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://lynk.design/components/avatar\n * @status stable\n * @since 1.4\n *\n * @dependency lynk-icon\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n *\n * @event ev-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
+          "documentation": "https://lynk.design/components/avatar",
+          "status": "stable",
+          "since": "1.4",
+          "dependencies": [
+            "lynk-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkAvatar",
+            "module": "components/avatar/avatar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb/breadcrumb.js",
@@ -16249,6 +16249,10 @@
               "description": "The expand/collapse toggle icon in the header.",
               "name": "toggle-icon"
             },
+            {
+              "description": "The panel subheader area, visible only when expanded.",
+              "name": "subheader"
+            },
             {
               "description": "The panel content.",
               "name": "content"
@@ -16283,6 +16287,10 @@
               "description": "The collapse icon's `<slot>`.",
               "name": "collapse-icon"
             },
+            {
+              "description": "Optional content displayed below the header, only visible when the panel is expanded.",
+              "name": "subheader"
+            },
             {
               "description": "The panels' footer `<slot>`.",
               "name": "footer"
@@ -16331,7 +16339,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix', 'footer')"
+              "default": "new HasSlotController(this, 'prefix', 'suffix', 'subheader', 'footer')"
             },
             {
               "kind": "field",
@@ -16622,7 +16630,7 @@
           "tagNameWithoutPrefix": "panel",
           "tagName": "lynk-panel",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Panels are lightweight content containers that function like a native `detail` HTML element with a collapsable body. They can either stand alone or be grouped together to form an [Accordion](/components/accordion).\n * @documentation https://lynk.design/components/panel\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The panels' main content.\n * @slot heading - The panels' heading. Alternatively, you can use the `heading` attribute.\n * @slot prefix - The panels' summary prefix `<slot>`.\n * @slot suffix - The panels' summary suffix `<slot>`.\n * @slot expand-icon - The expand icon's `<slot>`.\n * @slot collapse-icon - The collapse icon's `<slot>`.\n * @slot footer - The panels' footer `<slot>`.\n *\n * @event ev-expand - Emitted when the panel expands.\n * @event ev-after-expand - Emitted after the panel expands and all animations are complete.\n * @event ev-collapse - Emitted when the panel closes.\n * @event ev-after-collapse - Emitted after the panel closes and all animations are complete.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart header - The panel header area.\n * @csspart heading - The panel heading.\n * @csspart prefix - The panel header prefix area.\n * @csspart suffix - The panel header suffix area.\n * @csspart toggle-icon - The expand/collapse toggle icon in the header.\n * @csspart content - The panel content.\n * @csspart footer - The panel footer.\n *\n * @cssproperty --background-color - The panels background color\n * @cssproperty --spacing - The amount of padding to use for the header, body, and footer.\n * @cssproperty --border-color - Apply a panel border of your choosing.\n * @cssproperty --border-radius - The panels border radius.\n *\n * @animation panel.expand - The animation to use when expanding the panel. You can use `height: auto` with this animation.\n * @animation panel.collapse - The animation to use when collapsing the panel. You can use `height: auto` with this animation.\n */",
+          "jsDoc": "/**\n * @summary Panels are lightweight content containers that function like a native `detail` HTML element with a collapsable body. They can either stand alone or be grouped together to form an [Accordion](/components/accordion).\n * @documentation https://lynk.design/components/panel\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The panels' main content.\n * @slot heading - The panels' heading. Alternatively, you can use the `heading` attribute.\n * @slot prefix - The panels' summary prefix `<slot>`.\n * @slot suffix - The panels' summary suffix `<slot>`.\n * @slot expand-icon - The expand icon's `<slot>`.\n * @slot collapse-icon - The collapse icon's `<slot>`.\n * @slot subheader - Optional content displayed below the header, only visible when the panel is expanded.\n * @slot footer - The panels' footer `<slot>`.\n *\n * @event ev-expand - Emitted when the panel expands.\n * @event ev-after-expand - Emitted after the panel expands and all animations are complete.\n * @event ev-collapse - Emitted when the panel closes.\n * @event ev-after-collapse - Emitted after the panel closes and all animations are complete.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart header - The panel header area.\n * @csspart heading - The panel heading.\n * @csspart prefix - The panel header prefix area.\n * @csspart suffix - The panel header suffix area.\n * @csspart toggle-icon - The expand/collapse toggle icon in the header.\n * @csspart subheader - The panel subheader area, visible only when expanded.\n * @csspart content - The panel content.\n * @csspart footer - The panel footer.\n *\n * @cssproperty --background-color - The panels background color\n * @cssproperty --spacing - The amount of padding to use for the header, body, and footer.\n * @cssproperty --border-color - Apply a panel border of your choosing.\n * @cssproperty --border-radius - The panels border radius.\n *\n * @animation panel.expand - The animation to use when expanding the panel. You can use `height: auto` with this animation.\n * @animation panel.collapse - The animation to use when collapsing the panel. You can use `height: auto` with this animation.\n */",
           "documentation": "https://lynk.design/components/panel",
           "since": "1.0",
           "status": "stable",
@@ -19107,6 +19115,14 @@
               "description": "The component's base wrapper.",
               "name": "base"
             },
+            {
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
+            },
             {
               "description": "The range track wrapper.",
               "name": "wrapper"
@@ -19145,6 +19161,14 @@
               "description": "The range's label. Alternatively, you can use the `label` attribute.",
               "name": "label"
             },
+            {
+              "description": "Used to prepend an icon or similar element to the range.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append an icon or similar element to the range.",
+              "name": "suffix"
+            },
             {
               "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
               "name": "help-text"
@@ -19184,7 +19208,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'help-tip', 'label', 'reference')"
+              "default": "new HasSlotController( this, 'help-text', 'help-tip', 'label', 'prefix', 'suffix', 'reference' )"
             },
             {
               "kind": "field",
@@ -19983,7 +20007,7 @@
           "tagNameWithoutPrefix": "range",
           "tagName": "lynk-range",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Ranges allow the user to select a single value within a given range using a slider.\n * @documentation https://lynk.design/components/range\n * @status stable\n * @since 1.0\n *\n * @dependency lynk-form-field\n * @dependency lynk-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot help-tip - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n * @slot ticks - Custom tick markers. Use this to override the default tick rendering.\n * @slot reference - Reference labels displayed below the range (e.g., min/max labels).\n *\n * @event ev-blur - Emitted when the control loses focus.\n * @event ev-change - Emitted when an alteration to the control's value is committed by the user.\n * @event ev-focus - Emitted when the control gains focus.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart wrapper - The range track wrapper.\n * @csspart track - The range track (inactive portion).\n * @csspart track-active - The active portion of the track.\n * @csspart thumb - The draggable thumb.\n * @csspart ticks - The container for custom tick markers.\n * @csspart markers - The container that holds all the markers when `with-markers` is used.\n * @csspart marker - The individual markers that are shown when `with-markers` is used.\n * @csspart references - The container for reference labels.\n *\n * @cssproperty --thumb-size - The size of the thumb.\n * @cssproperty --thumb-color - The color of the thumb.\n * @cssproperty --thumb-border - The box-shadow used for the thumb border.\n * @cssproperty --track-color-active - The color of the active portion of the track.\n * @cssproperty --track-color-inactive - The color of the inactive portion of the track.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The starting point of the active track (useful for ranges that don't start at 0).\n * @cssproperty --tick-color - The color of tick markers.\n * @cssproperty --tick-label-color - The color of tick labels.\n * @cssproperty --tick-width - The width of tick markers.\n * @cssproperty --tick-height - The height of tick markers.\n * @cssproperty --tick-selected-color - The color of selected tick markers.\n */",
+          "jsDoc": "/**\n * @summary Ranges allow the user to select a single value within a given range using a slider.\n * @documentation https://lynk.design/components/range\n * @status stable\n * @since 1.0\n *\n * @dependency lynk-form-field\n * @dependency lynk-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend an icon or similar element to the range.\n * @slot suffix - Used to append an icon or similar element to the range.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot help-tip - Help tooltip next to the label. Alternatively, you can use the `help-tip` attribute.\n * @slot ticks - Custom tick markers. Use this to override the default tick rendering.\n * @slot reference - Reference labels displayed below the range (e.g., min/max labels).\n *\n * @event ev-blur - Emitted when the control loses focus.\n * @event ev-change - Emitted when an alteration to the control's value is committed by the user.\n * @event ev-focus - Emitted when the control gains focus.\n * @event ev-input - Emitted when the control receives input.\n * @event ev-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart wrapper - The range track wrapper.\n * @csspart track - The range track (inactive portion).\n * @csspart track-active - The active portion of the track.\n * @csspart thumb - The draggable thumb.\n * @csspart ticks - The container for custom tick markers.\n * @csspart markers - The container that holds all the markers when `with-markers` is used.\n * @csspart marker - The individual markers that are shown when `with-markers` is used.\n * @csspart references - The container for reference labels.\n *\n * @cssproperty --thumb-size - The size of the thumb.\n * @cssproperty --thumb-color - The color of the thumb.\n * @cssproperty --thumb-border - The box-shadow used for the thumb border.\n * @cssproperty --track-color-active - The color of the active portion of the track.\n * @cssproperty --track-color-inactive - The color of the inactive portion of the track.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The starting point of the active track (useful for ranges that don't start at 0).\n * @cssproperty --tick-color - The color of tick markers.\n * @cssproperty --tick-label-color - The color of tick labels.\n * @cssproperty --tick-width - The width of tick markers.\n * @cssproperty --tick-height - The height of tick markers.\n * @cssproperty --tick-selected-color - The color of selected tick markers.\n */",
           "documentation": "https://lynk.design/components/range",
           "status": "stable",
           "since": "1.0",
@@ -28826,7 +28850,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.14.0",
+    "version": "1.15.0",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"