@uplynk/lynk-design 1.11.3 → 1.12.1

package/dist/custom-elements.json

@@ -126,318 +126,345 @@
     },
     {
       "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"
+              "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",
-              "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`.",
+              "type": {
+                "text": "number"
+              },
+              "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"
+              "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"
+            },
+            {
+              "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": "Alerts are used to display important messages inline or as toast notifications.",
-          "tagNameWithoutPrefix": "alert",
-          "tagName": "lynk-alert",
+          "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 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",
+          "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",
-          "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."
-            }
-          ]
+          "status": "stable"
         }
       ],
       "exports": [
@@ -445,353 +472,326 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAlert",
-            "module": "components/alert/alert.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"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "remainingTimeInterval",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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",
+              "name": "countdownAnimation",
               "type": {
-                "text": "boolean"
+                "text": "Animation | undefined"
               },
-              "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
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "attribute": "delay"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'icon', 'suffix', 'action')"
             },
             {
               "kind": "field",
-              "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.",
-              "attribute": "direction"
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "duration",
+              "name": "base",
               "type": {
-                "text": "number"
-              },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "attribute": "duration"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "easing",
+              "name": "countdownElement",
               "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"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "endDelay",
+              "name": "open",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "attribute": "end-delay"
+              "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": "fill",
+              "name": "closable",
               "type": {
-                "text": "FillMode"
+                "text": "boolean"
               },
-              "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": "false",
+              "description": "Makes the alert closable.",
+              "attribute": "closable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iterationStart",
+              "name": "type",
               "type": {
-                "text": "number"
+                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "attribute": "iteration-start"
+              "default": "'primary'",
+              "description": "The alert's type (color).",
+              "attribute": "type",
+              "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",
+              "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 animation starts or restarts.",
-              "name": "ev-start",
-              "reactName": "EvStart",
-              "eventName": "EvStartEvent"
+              "description": "Emitted when the alert closes.",
+              "name": "ev-hide",
+              "reactName": "EvHide",
+              "eventName": "EvHideEvent"
+            },
+            {
+              "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": [
@@ -799,8 +799,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAnimation",
-            "module": "components/animation/animation.js"
+            "name": "LynkAlert",
+            "module": "components/alert/alert.js"
           }
         }
       ]
@@ -7469,6 +7469,16 @@
               "description": "The maximum date in ISO format (YYYY-MM-DD).",
               "attribute": "max"
             },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
+            },
             {
               "kind": "field",
               "name": "clearable",
@@ -7786,6 +7796,15 @@
               "description": "The maximum date in ISO format (YYYY-MM-DD).",
               "fieldName": "max"
             },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
             {
               "name": "clearable",
               "type": {
@@ -8247,6 +8266,16 @@
               "description": "Adds a clear button when the input is populated.",
               "attribute": "clearable"
             },
+            {
+              "kind": "field",
+              "name": "normalizeMode",
+              "type": {
+                "text": "'none' | 'local'"
+              },
+              "default": "'none'",
+              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+              "attribute": "normalize"
+            },
             {
               "kind": "field",
               "name": "validity",
@@ -8402,6 +8431,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "toLocalISOString",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "Converts a Date to a local ISO string with timezone offset (e.g. 2024-01-15T16:30:00-06:00)"
+            },
             {
               "kind": "method",
               "name": "getTimezoneOffset",
@@ -8518,6 +8566,10 @@
               "kind": "method",
               "name": "handleValueChange"
             },
+            {
+              "kind": "method",
+              "name": "handleNormalizeModeChange"
+            },
             {
               "kind": "method",
               "name": "handleDisabledChange"
@@ -8756,6 +8808,15 @@
               "default": "false",
               "description": "Adds a clear button when the input is populated.",
               "fieldName": "clearable"
+            },
+            {
+              "name": "normalize",
+              "type": {
+                "text": "'none' | 'local'"
+              },
+              "default": "'none'",
+              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+              "fieldName": "normalizeMode"
             }
           ],
           "superclass": {
@@ -9662,9 +9723,13 @@
           "name": "LynkDropdown",
           "cssParts": [
             {
-              "description": "The component's internal wrapper.",
+              "description": "The component's base wrapper, an `<sl-popup>` element.",
               "name": "base"
             },
+            {
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "base__popup"
+            },
             {
               "description": "The container that wraps the trigger.",
               "name": "trigger"
@@ -9722,6 +9787,14 @@
               "readonly": true,
               "default": "new LocalizeController(this)"
             },
+            {
+              "kind": "field",
+              "name": "closeWatcher",
+              "type": {
+                "text": "CloseWatcher | null"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -9905,6 +9978,11 @@
               "name": "reposition",
               "description": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated."
             },
+            {
+              "kind": "field",
+              "name": "handleCloseWatcherKeyDown",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "addOpenListeners"
@@ -10035,7 +10113,7 @@
           "tagNameWithoutPrefix": "dropdown",
           "tagName": "lynk-dropdown",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https:/lynk.design/components/dropdown\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-popup\n *\n * @slot - The dropdown's content.\n * @slot trigger - The dropdown's trigger, usually a `<lynk-button>` element.\n *\n * @event ev-show - Emitted when the dropdown opens.\n * @event ev-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event ev-hide - Emitted when the dropdown closes.\n * @event ev-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
+          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https:/lynk.design/components/dropdown\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-popup\n *\n * @slot - The dropdown's content.\n * @slot trigger - The dropdown's trigger, usually a `<lynk-button>` element.\n *\n * @event ev-show - Emitted when the dropdown opens.\n * @event ev-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event ev-hide - Emitted when the dropdown closes.\n * @event ev-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<sl-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
           "documentation": "https:/lynk.design/components/dropdown",
           "since": "1.0",
           "status": "stable",
@@ -13367,6 +13445,13 @@
           "kind": "class",
           "description": "",
           "name": "LynkMenuItem",
+          "cssProperties": [
+            {
+              "description": "The distance submenus shift to overlap the parent menu.",
+              "name": "--submenu-offset",
+              "default": "-2px"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's internal wrapper.",
@@ -13387,6 +13472,18 @@
             {
               "description": "The suffix container.",
               "name": "suffix"
+            },
+            {
+              "description": "The spinner that shows when the menu item is in the loading state.",
+              "name": "spinner"
+            },
+            {
+              "description": "The spinner's base part.",
+              "name": "spinner__base"
+            },
+            {
+              "description": "The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
+              "name": "submenu-icon"
             }
           ],
           "slots": [
@@ -13401,6 +13498,10 @@
             {
               "description": "Used to append an icon or similar element to the menu item.",
               "name": "suffix"
+            },
+            {
+              "description": "Used to denote a nested menu.",
+              "name": "submenu"
             }
           ],
           "members": [
@@ -13411,7 +13512,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-icon': LynkIcon }"
+              "default": "{ 'lynk-icon': LynkIcon, 'lynk-popup': LynkPopup, 'lynk-spinner': LynkSpinner }"
             },
             {
               "kind": "field",
@@ -13421,6 +13522,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -13466,6 +13574,17 @@
               "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the menu item in a loading state.",
+              "attribute": "loading",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -13477,6 +13596,22 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'submenu')"
+            },
+            {
+              "kind": "field",
+              "name": "submenuController",
+              "type": {
+                "text": "SubmenuController"
+              },
+              "privacy": "private",
+              "default": "new SubmenuController(this, this.hasSlotController)"
+            },
             {
               "kind": "method",
               "name": "handleDefaultSlotChange",
@@ -13495,6 +13630,11 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "handleMouseOver",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleCheckedChange"
@@ -13511,6 +13651,10 @@
               "kind": "method",
               "name": "getTextLabel",
               "description": "Returns a text label based on the contents of the menu item's default slot."
+            },
+            {
+              "kind": "method",
+              "name": "isSubmenu"
             }
           ],
           "events": [
@@ -13549,6 +13693,15 @@
               "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
               "fieldName": "value"
             },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the menu item in a loading state.",
+              "fieldName": "loading"
+            },
             {
               "name": "disabled",
               "type": {
@@ -13567,12 +13720,14 @@
           "tagNameWithoutPrefix": "menu-item",
           "tagName": "lynk-menu-item",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Menu items provide options for the user to pick from in a menu.\n * @documentation https://lynk.design/components/menu-item\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @event ev-click - Emitted when a menu item is clicked\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n */",
+          "jsDoc": "/**\n * @summary Menu items provide options for the user to pick from in a menu.\n * @documentation https://lynk.design/components/menu-item\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n * @dependency lynk-popup\n * @dependency lynk-spinner\n *\n * @event ev-click - Emitted when a menu item is clicked\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n * @slot submenu - Used to denote a nested menu.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart spinner - The spinner that shows when the menu item is in the loading state.\n * @csspart spinner__base - The spinner's base part.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n *\n * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.\n */",
           "documentation": "https://lynk.design/components/menu-item",
           "since": "1.0",
           "status": "stable",
           "dependencies": [
-            "lynk-icon"
+            "lynk-icon",
+            "lynk-popup",
+            "lynk-spinner"
           ]
         }
       ],
@@ -17674,234 +17829,41 @@
               },
               "default": "''",
               "description": "A custom label for assistive devices.",
-              "attribute": "label"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The current progress as a percentage, 0 to 100.",
-              "fieldName": "value"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A custom label for assistive devices.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
-          "tagNameWithoutPrefix": "progress-ring",
-          "tagName": "lynk-progress-ring",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://lynk.design/components/progress-ring\n * @status stable\n * @since 1.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */",
-          "documentation": "https://lynk.design/components/progress-ring",
-          "status": "stable",
-          "since": "1.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkProgressRing",
-            "module": "components/progress-ring/progress-ring.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/radio/radio.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkRadio",
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The circular container that wraps the radio's checked state.",
-              "name": "control"
-            },
-            {
-              "description": "The radio control when the radio is checked.",
-              "name": "control--checked"
-            },
-            {
-              "description": "The checked icon, an `<lynk-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The container that wraps the radio's label.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The radio's label.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'lynk-icon': LynkIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The radio's size.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the radio.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setInitialAttributes",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleCheckedChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the control loses focus.",
-              "name": "ev-blur",
-              "reactName": "EvBlur",
-              "eventName": "EvBlurEvent"
-            },
-            {
-              "description": "Emitted when the control gains focus.",
-              "name": "ev-focus",
-              "reactName": "EvFocus",
-              "eventName": "EvFocusEvent"
+              "attribute": "label"
             }
           ],
           "attributes": [
             {
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "default": "0",
+              "description": "The current progress as a percentage, 0 to 100.",
               "fieldName": "value"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The radio's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the radio.",
-              "fieldName": "disabled"
+              "default": "''",
+              "description": "A custom label for assistive devices.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Radios allow the user to select a single option from a group.",
-          "tagNameWithoutPrefix": "radio",
-          "tagName": "lynk-radio",
+          "summary": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
+          "tagNameWithoutPrefix": "progress-ring",
+          "tagName": "lynk-progress-ring",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://lynk.design/components/radio\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The radio's label.\n *\n * @event ev-blur - Emitted when the control loses focus.\n * @event ev-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<lynk-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
-          "documentation": "https://lynk.design/components/radio",
-          "since": "1.0",
+          "jsDoc": "/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://lynk.design/components/progress-ring\n * @status stable\n * @since 1.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */",
+          "documentation": "https://lynk.design/components/progress-ring",
           "status": "stable",
-          "dependencies": [
-            "lynk-icon"
-          ]
+          "since": "1.0"
         }
       ],
       "exports": [
@@ -17909,8 +17871,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkRadio",
-            "module": "components/radio/radio.js"
+            "name": "LynkProgressRing",
+            "module": "components/progress-ring/progress-ring.js"
           }
         }
       ]
@@ -18197,6 +18159,199 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio/radio.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkRadio",
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The circular container that wraps the radio's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "The radio control when the radio is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "The checked icon, an `<lynk-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The container that wraps the radio's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The radio's label.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'lynk-icon': LynkIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setInitialAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "ev-blur",
+              "reactName": "EvBlur",
+              "eventName": "EvBlurEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "ev-focus",
+              "reactName": "EvFocus",
+              "eventName": "EvFocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Radios allow the user to select a single option from a group.",
+          "tagNameWithoutPrefix": "radio",
+          "tagName": "lynk-radio",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://lynk.design/components/radio\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The radio's label.\n *\n * @event ev-blur - Emitted when the control loses focus.\n * @event ev-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's internal wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<lynk-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
+          "documentation": "https://lynk.design/components/radio",
+          "since": "1.0",
+          "status": "stable",
+          "dependencies": [
+            "lynk-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkRadio",
+            "module": "components/radio/radio.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/radio-group/radio-group.js",
@@ -26353,6 +26508,16 @@
               "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
               "attribute": "minute-interval"
             },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
+            },
             {
               "kind": "field",
               "name": "clearable",
@@ -26668,6 +26833,15 @@
               "description": "Minute interval/step (e.g., 5 for 5-minute increments: 0, 5, 10, 15...)",
               "fieldName": "minuteInterval"
             },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
             {
               "name": "clearable",
               "type": {
@@ -28360,7 +28534,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.11.3",
+    "version": "1.12.1",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"