@uplynk/lynk-design 1.0.0-beta.2 → 1.0.0-beta.4

package/cdn/custom-elements.json

@@ -126,345 +126,318 @@
     },
     {
       "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": "on:cancel",
-              "reactName": "OnCancel",
-              "eventName": "OnCancelEvent"
+              "description": "Emitted when the alert opens.",
+              "name": "on:show",
+              "reactName": "OnShow",
+              "eventName": "OnShowEvent"
             },
             {
-              "description": "Emitted when the animation finishes.",
-              "name": "on:finish",
-              "reactName": "OnFinish",
-              "eventName": "OnFinishEvent"
+              "description": "Emitted after the alert opens and all animations are complete.",
+              "name": "after:show",
+              "reactName": "AfterShow",
+              "eventName": "AfterShowEvent"
             },
             {
-              "description": "Emitted when the animation starts or restarts.",
-              "name": "on:start",
-              "reactName": "OnStart",
-              "eventName": "OnStartEvent"
+              "description": "Emitted when the alert closes.",
+              "name": "on:hide",
+              "reactName": "OnHide",
+              "eventName": "OnHideEvent"
+            },
+            {
+              "description": "Emitted after the alert closes and all animations are complete.",
+              "name": "after:hide",
+              "reactName": "AfterHide",
+              "eventName": "AfterHideEvent"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "fieldName": "name"
+              "default": "false",
+              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+              "fieldName": "open"
             },
             {
-              "name": "play",
+              "name": "closable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "fieldName": "play"
-            },
-            {
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "fieldName": "delay"
+              "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 on:cancel - Emitted when the animation is canceled.\n * @event on:finish - Emitted when the animation finishes.\n * @event on: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 on:show - Emitted when the alert opens.\n * @event after:show - Emitted after the alert opens and all animations are complete.\n * @event on:hide - Emitted when the alert closes.\n * @event 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": [
@@ -472,326 +445,353 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAnimation",
-            "module": "components/animation/animation.js"
+            "name": "LynkAlert",
+            "module": "components/alert/alert.js"
           }
         }
       ]
     },
     {
       "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",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'lynk-icon-button': LynkIconButton }"
-            },
-            {
-              "kind": "field",
-              "name": "autoHideTimeout",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "remainingTimeInterval",
+              "name": "animation",
               "type": {
-                "text": "number"
+                "text": "Animation | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "countdownAnimation",
+              "name": "hasStarted",
               "type": {
-                "text": "Animation | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'icon', 'suffix', 'action')"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
               "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "base",
+              "name": "defaultSlot",
               "type": {
-                "text": "HTMLElement"
+                "text": "Promise<HTMLSlotElement>"
               }
             },
             {
               "kind": "field",
-              "name": "countdownElement",
+              "name": "name",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "play",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-              "attribute": "open",
+              "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": "closable",
+              "name": "delay",
               "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 the start of the animation.",
+              "attribute": "delay"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "direction",
               "type": {
-                "text": "'primary' | 'info' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "PlaybackDirection"
               },
-              "default": "'primary'",
-              "description": "The alert's type (color).",
-              "attribute": "type",
-              "reflects": true
+              "default": "'normal'",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.",
+              "attribute": "direction"
             },
             {
               "kind": "field",
               "name": "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.",
               "attribute": "duration"
             },
             {
               "kind": "field",
-              "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.",
-              "attribute": "countdown",
-              "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": "remainingTime",
-              "privacy": "private"
+              "name": "endDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "attribute": "end-delay"
             },
             {
-              "kind": "method",
-              "name": "restartAutoHide",
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "'auto'",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "attribute": "fill"
+            },
+            {
+              "kind": "field",
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "attribute": "iterations"
+            },
+            {
+              "kind": "field",
+              "name": "iterationStart",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "attribute": "iteration-start"
+            },
+            {
+              "kind": "field",
+              "name": "keyframes",
+              "type": {
+                "text": "Keyframe[] | undefined"
+              },
+              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
+            },
+            {
+              "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": "on:show",
-              "reactName": "OnShow",
-              "eventName": "OnShowEvent"
-            },
-            {
-              "description": "Emitted after the alert opens and all animations are complete.",
-              "name": "after:show",
-              "reactName": "AfterShow",
-              "eventName": "AfterShowEvent"
+              "description": "Emitted when the animation is canceled.",
+              "name": "on:cancel",
+              "reactName": "OnCancel",
+              "eventName": "OnCancelEvent"
             },
             {
-              "description": "Emitted when the alert closes.",
-              "name": "on:hide",
-              "reactName": "OnHide",
-              "eventName": "OnHideEvent"
+              "description": "Emitted when the animation finishes.",
+              "name": "on:finish",
+              "reactName": "OnFinish",
+              "eventName": "OnFinishEvent"
             },
             {
-              "description": "Emitted after the alert closes and all animations are complete.",
-              "name": "after:hide",
-              "reactName": "AfterHide",
-              "eventName": "AfterHideEvent"
+              "description": "Emitted when the animation starts or restarts.",
+              "name": "on:start",
+              "reactName": "OnStart",
+              "eventName": "OnStartEvent"
             }
           ],
           "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 on:show - Emitted when the alert opens.\n * @event after:show - Emitted after the alert opens and all animations are complete.\n * @event on:hide - Emitted when the alert closes.\n * @event 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 on:cancel - Emitted when the animation is canceled.\n * @event on:finish - Emitted when the animation finishes.\n * @event on: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": [
@@ -799,8 +799,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkAlert",
-            "module": "components/alert/alert.js"
+            "name": "LynkAnimation",
+            "module": "components/animation/animation.js"
           }
         }
       ]
@@ -964,7 +964,7 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | undefined"
+                "text": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
               },
               "description": "The badge's variant.",
               "attribute": "type",
@@ -997,7 +997,7 @@
             {
               "name": "type",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | undefined"
+                "text": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
               },
               "description": "The badge's variant.",
               "fieldName": "type"
@@ -1141,132 +1141,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkBreadcrumb",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more breadcrumb items to display.",
-              "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<lynk-icon>`.",
-              "name": "separator"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'lynk-icon': LynkIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "separatorSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LynkElement",
-            "module": "/src/internal/lynk-element.js"
-          },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "tagNameWithoutPrefix": "breadcrumb",
-          "tagName": "lynk-breadcrumb",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://lynk.design/components/breadcrumb\n * @status stable\n * @since 1.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n *\n * @dependency lynk-icon\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://lynk.design/components/breadcrumb",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "lynk-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LynkBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LynkBreadcrumbItem",
+          "name": "LynkBreadcrumbItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -1437,6 +1317,126 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<lynk-icon>`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'lynk-icon': LynkIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "separatorDir",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "separatorSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "tagNameWithoutPrefix": "breadcrumb",
+          "tagName": "lynk-breadcrumb",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://lynk.design/components/breadcrumb\n * @status stable\n * @since 1.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n *\n * @dependency lynk-icon\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://lynk.design/components/breadcrumb",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "lynk-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.js",
@@ -1549,7 +1549,7 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "text": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               },
               "default": "'default'",
               "description": "The button's color.",
@@ -1962,7 +1962,7 @@
             {
               "name": "color",
               "type": {
-                "text": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "text": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               },
               "default": "'default'",
               "description": "The button's color.",
@@ -2368,159 +2368,699 @@
               "name": "--border-width"
             },
             {
-              "description": "A custom color for the interactive state.",
-              "name": "--state-color"
+              "description": "A custom color for the interactive state.",
+              "name": "--state-color"
+            },
+            {
+              "description": "A custom speed for the pulse animation.",
+              "name": "--pulse-speed"
+            },
+            {
+              "description": "The padding to use for the card's sections.",
+              "name": "--padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the card's image.",
+              "name": "image"
+            },
+            {
+              "description": "The container that wraps the card's header.",
+              "name": "header"
+            },
+            {
+              "description": "The container that wraps the card's main content.",
+              "name": "body"
+            },
+            {
+              "description": "The container that wraps the card's footer.",
+              "name": "footer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card's main content.",
+              "name": ""
+            },
+            {
+              "description": "An optional header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "An optional footer for the card.",
+              "name": "footer"
+            },
+            {
+              "description": "An optional image to render at the start of the card.",
+              "name": "image"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "'primary' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | 'neutral'"
+              },
+              "description": "Draws the table row using status colors",
+              "attribute": "state",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether to highlight the card on hover",
+              "attribute": "interactive",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the card in a highlighted state",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pulse the status colors for increased visibility",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "state",
+              "type": {
+                "text": "'primary' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | 'neutral'"
+              },
+              "description": "Draws the table row using status colors",
+              "fieldName": "state"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether to highlight the card on hover",
+              "fieldName": "interactive"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the card in a highlighted state",
+              "fieldName": "active"
+            },
+            {
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pulse the status colors for increased visibility",
+              "fieldName": "pulse"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Cards can be used to group media with related subjects into a container.",
+          "tagNameWithoutPrefix": "card",
+          "tagName": "lynk-card",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Cards can be used to group media with related subjects into a container.\n * @documentation https://lynk.design/components/card\n * @status stable\n * @since 1.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --state-color - A custom color for the interactive state.\n * @cssproperty --pulse-speed - A custom speed for the pulse animation.\n * @cssproperty --padding - The padding to use for the card's sections.\n */",
+          "documentation": "https://lynk.design/components/card",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkCard",
+            "module": "components/card/card.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/checkbox/checkbox.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkCheckbox",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
+            },
+            {
+              "description": "The checked icon, an `<lynk-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The indeterminate icon, an `<lynk-icon>` element.",
+              "name": "indeterminate-icon"
+            },
+            {
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The checkbox's label.",
+              "name": ""
+            },
+            {
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'lynk-icon': LynkIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { value: (control: LynkCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: LynkCheckbox) => control.defaultChecked, setValue: (control: LynkCheckbox, checked: boolean) => (control.checked = checked) })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text')"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The checkbox's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "noBubble",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used to override the default event bubbling.",
+              "attribute": "no-bubble",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "'error' | 'warning' | 'success' | 'default'"
+              },
+              "default": "'default'",
+              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+              "attribute": "state",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleHostClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleStateChange"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "description": "A custom speed for the pulse animation.",
-              "name": "--pulse-speed"
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows a validation message if the control is invalid."
             },
             {
-              "description": "The padding to use for the card's sections.",
-              "name": "--padding"
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
             }
           ],
-          "cssParts": [
+          "events": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "Emitted when the control loses focus.",
+              "name": "on:blur",
+              "reactName": "OnBlur",
+              "eventName": "OnBlurEvent"
             },
             {
-              "description": "The container that wraps the card's image.",
-              "name": "image"
+              "description": "Emitted when the control's checked state changes.",
+              "name": "on:change",
+              "reactName": "OnChange",
+              "eventName": "OnChangeEvent"
             },
             {
-              "description": "The container that wraps the card's header.",
-              "name": "header"
+              "description": "Emitted when the control gains focus.",
+              "name": "on:focus",
+              "reactName": "OnFocus",
+              "eventName": "OnFocusEvent"
             },
             {
-              "description": "The container that wraps the card's main content.",
-              "name": "body"
+              "description": "Emitted when the checkbox receives input.",
+              "name": "on:input",
+              "reactName": "OnInput",
+              "eventName": "OnInputEvent"
             },
             {
-              "description": "The container that wraps the card's footer.",
-              "name": "footer"
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "on:invalid",
+              "reactName": "OnInvalid",
+              "eventName": "OnInvalidEvent"
             }
           ],
-          "slots": [
-            {
-              "description": "The card's main content.",
-              "name": ""
-            },
+          "attributes": [
             {
-              "description": "An optional header for the card.",
-              "name": "header"
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
             },
             {
-              "description": "An optional footer for the card.",
-              "name": "footer"
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+              "fieldName": "name"
             },
             {
-              "description": "An optional image to render at the start of the card.",
-              "name": "image"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "state",
+              "name": "size",
               "type": {
-                "text": "'primary' | 'danger' | 'success' | 'warning' | 'neutral'"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "description": "Draws the table row using status colors",
-              "attribute": "state",
-              "reflects": true
+              "default": "'medium'",
+              "description": "The checkbox's size.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "interactive",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether to highlight the card on hover",
-              "attribute": "interactive",
-              "reflects": true
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "active",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the card in a highlighted state",
-              "attribute": "active",
-              "reflects": true
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "pulse",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Pulse the status colors for increased visibility",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "fieldName": "indeterminate"
+            },
             {
-              "name": "state",
+              "name": "form",
               "type": {
-                "text": "'primary' | 'danger' | 'success' | 'warning' | 'neutral'"
+                "text": "string"
               },
-              "description": "Draws the table row using status colors",
-              "fieldName": "state"
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
             },
             {
-              "name": "interactive",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether to highlight the card on hover",
-              "fieldName": "interactive"
+              "description": "Makes the checkbox a required field.",
+              "fieldName": "required"
             },
             {
-              "name": "active",
+              "name": "no-bubble",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the card in a highlighted state",
-              "fieldName": "active"
+              "description": "Used to override the default event bubbling.",
+              "fieldName": "noBubble"
             },
             {
-              "name": "pulse",
+              "name": "state",
               "type": {
-                "text": "boolean"
+                "text": "'error' | 'warning' | 'success' | 'default'"
               },
-              "default": "false",
-              "description": "Pulse the status colors for increased visibility",
-              "fieldName": "pulse"
+              "default": "'default'",
+              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+              "fieldName": "state"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Cards can be used to group media with related subjects into a container.",
-          "tagNameWithoutPrefix": "card",
-          "tagName": "lynk-card",
+          "summary": "Checkboxes allow the user to toggle an option on or off.",
+          "tagNameWithoutPrefix": "checkbox",
+          "tagName": "lynk-checkbox",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Cards can be used to group media with related subjects into a container.\n * @documentation https://lynk.design/components/card\n * @status stable\n * @since 1.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --state-color - A custom color for the interactive state.\n * @cssproperty --pulse-speed - A custom speed for the pulse animation.\n * @cssproperty --padding - The padding to use for the card's sections.\n */",
-          "documentation": "https://lynk.design/components/card",
+          "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://lynk.design/components/checkbox\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event on:blur - Emitted when the control loses focus.\n * @event on:change - Emitted when the control's checked state changes.\n * @event on:focus - Emitted when the control gains focus.\n * @event on:input - Emitted when the checkbox receives input.\n * @event on: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 control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<lynk-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<lynk-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */",
+          "documentation": "https://lynk.design/components/checkbox",
+          "since": "1.0",
           "status": "stable",
-          "since": "1.0"
+          "dependencies": [
+            "lynk-icon"
+          ]
         }
       ],
       "exports": [
@@ -2528,61 +3068,97 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkCard",
-            "module": "components/card/card.js"
+            "name": "LynkCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
+      "path": "components/combobox/combobox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LynkCheckbox",
+          "name": "LynkCombobox",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The form control that wraps the label, combobox, and help text.",
+              "name": "form-control"
             },
             {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
+              "description": "The combobox's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The checked icon, an `<lynk-icon>` element.",
-              "name": "checked-icon"
+              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
+              "name": "combobox"
             },
             {
-              "description": "The indeterminate icon, an `<lynk-icon>` element.",
-              "name": "indeterminate-icon"
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
             },
             {
-              "description": "The container that wraps the checkbox's label.",
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
+            },
+            {
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
+            },
+            {
+              "description": "The listbox container where the options are slotted and the filtered options list exists.",
+              "name": "listbox"
+            },
+            {
+              "description": "The container that wraps the filtered options.",
+              "name": "filtered-listbox"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.",
+              "name": ""
+            },
+            {
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
               "name": "label"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            }
-          ],
-          "slots": [
+              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append a presentational icon or similar element to the combobox.",
+              "name": "suffix"
+            },
+            {
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
             {
-              "description": "The checkbox's label.",
-              "name": ""
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
+              "name": "expand-icon"
             },
             {
-              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.",
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
               "name": "help-text"
             }
           ],
@@ -2594,44 +3170,98 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'lynk-icon': LynkIcon }"
+              "default": "{ 'lynk-icon': LynkIcon, 'lynk-stack': LynkStack, 'lynk-popup': LynkPopup }"
             },
             {
               "kind": "field",
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, { value: (control: LynkCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: LynkCheckbox) => control.defaultChecked, setValue: (control: LynkCheckbox, checked: boolean) => (control.checked = checked) })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['on:blur', 'on:input'] })"
             },
             {
               "kind": "field",
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'help-text')"
+              "default": "new HasSlotController(this, 'action', 'help-text', 'help-tip', 'label')"
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "closeWatcher",
+              "type": {
+                "text": "CloseWatcher | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lastOptionValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "description": "The last value of a lynk-option, that was selected by click or via keyboard navigation"
+            },
+            {
+              "kind": "field",
+              "name": "isOptionRendererTriggered",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "LynkPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "combobox",
               "type": {
                 "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "displayInput",
               "type": {
                 "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasLabel",
+              "name": "valueInput",
               "type": {
-                "text": "boolean"
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "listbox",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -2644,12 +3274,34 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "displayLabel",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "title"
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "selectedOption",
+              "type": {
+                "text": "LynkOption | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "numberFilteredOptions",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "cachedOptions",
+              "type": {
+                "text": "LynkOption[]"
+              },
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -2658,7 +3310,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
               "attribute": "name"
             },
             {
@@ -2667,9 +3319,30 @@
               "type": {
                 "text": "string"
               },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "default": "''",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "'error' | 'warning' | 'success' | 'default'"
+              },
+              "default": "'default'",
+              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+              "attribute": "state",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -2677,10 +3350,20 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The checkbox's size.",
+              "description": "The combobox's size.",
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "attribute": "placeholder"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -2688,40 +3371,81 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the checkbox.",
+              "description": "Disables the combobox control.",
               "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Adds a clear button when the combobox is not empty.",
+              "attribute": "clearable"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "attribute": "indeterminate",
+              "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpTip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "attribute": "help-tip"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
@@ -2730,7 +3454,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
               "attribute": "form",
               "reflects": true
             },
@@ -2741,57 +3465,99 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the checkbox a required field.",
+              "description": "The combobox's required attribute.",
               "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "noBubble",
+              "name": "getOption",
               "type": {
-                "text": "boolean"
+                "text": "OptionRenderer"
               },
-              "default": "false",
-              "description": "Used to override the default event bubbling.",
-              "attribute": "no-bubble",
-              "reflects": true
+              "default": "defaultOptionRenderer",
+              "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+              "attribute": "getOption"
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "filter",
               "type": {
-                "text": "'error' | 'warning' | 'success' | 'default'"
+                "text": "(option: LynkOption, queryString: string) => boolean"
               },
-              "default": "'default'",
-              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
-              "attribute": "state",
-              "reflects": true
+              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+              "parameters": [
+                {
+                  "description": "The option to be filtered.",
+                  "name": "option"
+                },
+                {
+                  "description": "The query string used for filtering.",
+                  "name": "queryString"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "attribute": "filter"
             },
             {
               "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentFocusIn",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleHostClick",
+              "name": "handleLabelClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleComboboxMouseDown",
               "privacy": "private",
               "parameters": [
                 {
@@ -2804,78 +3570,156 @@
             },
             {
               "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
+              "name": "handleComboboxKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "clearCombobox",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleInvalid",
+              "name": "preventLoosingFocus",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
+              "name": "handleOptionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "selectNextOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isNext",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating whether to select the following option (true)\n  or the previous option (false)."
+                }
+              ],
+              "description": "Selects the following or previous option."
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
+              "name": "getAllFilteredOptions",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleStateChange"
+              "name": "getCurrentOption",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the checkbox."
+              "name": "setCurrentOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "LynkOption | null"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "setSelectedOption",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "option",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "LynkOption | undefined"
                   }
                 }
               ],
-              "description": "Sets focus on the checkbox."
+              "description": "Updates the selected options cache, the current value, and the display value"
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the checkbox."
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handlePropertiesChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a on:error is emitted and the listbox stays closed."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
             },
             {
               "kind": "method",
               "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns true when valid and false when invalid."
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
             },
             {
               "kind": "method",
@@ -2890,7 +3734,7 @@
             {
               "kind": "method",
               "name": "reportValidity",
-              "description": "Checks for validity and shows a validation message if the control is invalid."
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
               "kind": "method",
@@ -2903,22 +3747,95 @@
                   }
                 }
               ],
-              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
+            },
+            {
+              "kind": "method",
+              "name": "createComboboxOptionsFromQuery",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "queryString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getSlottedOptions",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getSlottedOptGroups",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SynOptGroup[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "cacheSlottedOptionsAndOptgroups",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "public"
             }
           ],
           "events": [
             {
-              "description": "Emitted when the control loses focus.",
-              "name": "on:blur",
-              "reactName": "OnBlur",
-              "eventName": "OnBlurEvent"
-            },
-            {
-              "description": "Emitted when the control's checked state changes.",
+              "description": "Emitted when the control's value changes.",
               "name": "on:change",
               "reactName": "OnChange",
               "eventName": "OnChangeEvent"
             },
+            {
+              "description": "Emitted when the control's value is cleared.",
+              "name": "on:clear",
+              "reactName": "OnClear",
+              "eventName": "OnClearEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "on:input",
+              "reactName": "OnInput",
+              "eventName": "OnInputEvent"
+            },
             {
               "description": "Emitted when the control gains focus.",
               "name": "on:focus",
@@ -2926,34 +3843,56 @@
               "eventName": "OnFocusEvent"
             },
             {
-              "description": "Emitted when the checkbox receives input.",
-              "name": "on:input",
-              "reactName": "OnInput",
-              "eventName": "OnInputEvent"
+              "description": "Emitted when the control loses focus.",
+              "name": "on:blur",
+              "reactName": "OnBlur",
+              "eventName": "OnBlurEvent"
+            },
+            {
+              "description": "Emitted when the combobox's menu opens.",
+              "name": "on:show",
+              "reactName": "OnShow",
+              "eventName": "OnShowEvent"
+            },
+            {
+              "description": "Emitted after the combobox's menu opens and all animations are complete.",
+              "name": "after:show",
+              "reactName": "AfterShow",
+              "eventName": "AfterShowEvent"
+            },
+            {
+              "description": "Emitted when the combobox's menu closes.",
+              "name": "on:hide",
+              "reactName": "OnHide",
+              "eventName": "OnHideEvent"
+            },
+            {
+              "description": "Emitted after the combobox's menu closes and all animations are complete.",
+              "name": "after:hide",
+              "reactName": "AfterHide",
+              "eventName": "AfterHideEvent"
             },
             {
               "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
               "name": "on:invalid",
               "reactName": "OnInvalid",
               "eventName": "OnInvalidEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
             },
+            {
+              "description": "Emitted when the combobox menu fails to open.",
+              "name": "on:error",
+              "reactName": "OnError",
+              "eventName": "OnErrorEvent"
+            }
+          ],
+          "attributes": [
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
               "fieldName": "name"
             },
             {
@@ -2961,44 +3900,108 @@
               "type": {
                 "text": "string"
               },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "default": "''",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
               "fieldName": "value"
             },
+            {
+              "name": "state",
+              "type": {
+                "text": "'error' | 'warning' | 'success' | 'default'"
+              },
+              "default": "'default'",
+              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+              "fieldName": "state"
+            },
             {
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The checkbox's size.",
+              "description": "The combobox's size.",
               "fieldName": "size"
             },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "fieldName": "placeholder"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the checkbox.",
+              "description": "Disables the combobox control.",
               "fieldName": "disabled"
             },
             {
-              "name": "checked",
+              "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "fieldName": "checked"
+              "description": "Adds a clear button when the combobox is not empty.",
+              "fieldName": "clearable"
             },
             {
-              "name": "indeterminate",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "fieldName": "indeterminate"
+              "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+              "fieldName": "open"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "help-tip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "fieldName": "helpTip"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             },
             {
               "name": "form",
@@ -3006,7 +4009,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
               "fieldName": "form"
             },
             {
@@ -3015,51 +4018,67 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the checkbox a required field.",
+              "description": "The combobox's required attribute.",
               "fieldName": "required"
             },
             {
-              "name": "no-bubble",
+              "name": "getOption",
               "type": {
-                "text": "boolean"
+                "text": "OptionRenderer"
               },
-              "default": "false",
-              "description": "Used to override the default event bubbling.",
-              "fieldName": "noBubble"
+              "default": "defaultOptionRenderer",
+              "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+              "fieldName": "getOption"
             },
             {
-              "name": "state",
+              "name": "filter",
               "type": {
-                "text": "'error' | 'warning' | 'success' | 'default'"
+                "text": "(option: LynkOption, queryString: string) => boolean"
               },
-              "default": "'default'",
-              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
-              "fieldName": "state"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
+              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+              "parameters": [
+                {
+                  "description": "The option to be filtered.",
+                  "name": "option"
+                },
+                {
+                  "description": "The query string used for filtering.",
+                  "name": "queryString"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "''",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "fieldName": "filter"
             }
           ],
           "superclass": {
             "name": "LynkElement",
             "module": "/src/internal/lynk-element.js"
           },
-          "summary": "Checkboxes allow the user to toggle an option on or off.",
-          "tagNameWithoutPrefix": "checkbox",
-          "tagName": "lynk-checkbox",
+          "summary": "Comboboxes allow you to choose items from a menu of predefined options.",
+          "tagNameWithoutPrefix": "combobox",
+          "tagName": "lynk-combobox",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://lynk.design/components/checkbox\n * @since 1.0\n * @status stable\n *\n * @dependency lynk-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event on:blur - Emitted when the control loses focus.\n * @event on:change - Emitted when the control's checked state changes.\n * @event on:focus - Emitted when the control gains focus.\n * @event on:input - Emitted when the checkbox receives input.\n * @event on: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 control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<lynk-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<lynk-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */",
-          "documentation": "https://lynk.design/components/checkbox",
+          "jsDoc": "/**\n * @summary Comboboxes allow you to choose items from a menu of predefined options.\n * @documentation https://lynk.design/components/combobox\n * @since 1.0\n * @status experimental\n *\n * @dependency lynk-icon\n * @dependency lynk-popup\n *\n * @slot - The listbox options. Must be `<lynk-option>` elements.\n *    You can use `<lynk-optgroup>`'s to group items visually.\n * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    Alternatively, you can use the `help-text` attribute.\n *\n * @event on:change - Emitted when the control's value changes.\n * @event on:clear - Emitted when the control's value is cleared.\n * @event on:input - Emitted when the control receives input.\n * @event on:focus - Emitted when the control gains focus.\n * @event on:blur - Emitted when the control loses focus.\n * @event on:show - Emitted when the combobox's menu opens.\n * @event after:show - Emitted after the combobox's menu opens and all animations are complete.\n * @event on:hide - Emitted when the combobox's menu closes.\n * @event after:hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event on:invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event on:error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */",
+          "documentation": "https://lynk.design/components/combobox",
           "since": "1.0",
-          "status": "stable",
+          "status": "experimental",
           "dependencies": [
-            "lynk-icon"
+            "lynk-icon",
+            "lynk-popup"
+          ],
+          "animations": [
+            {
+              "name": "combobox.show",
+              "description": "The animation to use when showing the combobox."
+            },
+            {
+              "name": "combobox.hide",
+              "description": "The animation to use when hiding the combobox."
+            }
           ]
         }
       ],
@@ -3068,8 +4087,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LynkCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "LynkCombobox",
+            "module": "components/combobox/combobox.js"
           }
         }
       ]
@@ -9185,6 +10204,168 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/optgroup/optgroup.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LynkOptgroup",
+          "cssProperties": [
+            {
+              "description": "Display property of the divider. Defaults to \"block\"",
+              "name": "--display-divider"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps prefix, label and base",
+              "name": "label-container"
+            },
+            {
+              "description": "The divider that is displayed above the content",
+              "name": "divider"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the option elements.",
+              "name": "options"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The given options. Must be `lynk-option` elements.",
+              "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "The label for the optgroup",
+              "name": "label"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'lynk-divider': LynkDivider }"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleDisableOptions",
+              "privacy": "private",
+              "description": "Syncs the disabled prop for all slotted lynk-options when it is triggered"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all options in the optgroup.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all options in the optgroup.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LynkElement",
+            "module": "/src/internal/lynk-element.js"
+          },
+          "summary": "Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).",
+          "tagNameWithoutPrefix": "optgroup",
+          "tagName": "lynk-optgroup",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).\n * @documentation https://lynk.design/components/optgroup\n * @status experimental\n * @since 1.0.0\n *\n * @dependency lynk-divider\n *\n * @slot - The given options. Must be `lynk-option` elements.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot label - The label for the optgroup\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label-container - The container that wraps prefix, label and base\n * @csspart divider - The divider that is displayed above the content\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart options - The container that wraps the option elements.\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */",
+          "documentation": "https://lynk.design/components/optgroup",
+          "status": "experimental",
+          "since": "1.0.0",
+          "dependencies": [
+            "lynk-divider"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "LynkOptgroup",
+            "module": "components/optgroup/optgroup.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/option/option.js",
@@ -17375,7 +18556,7 @@
               "kind": "field",
               "name": "state",
               "type": {
-                "text": "'primary' | 'danger' | 'success' | 'warning' | 'neutral' | 'custom'"
+                "text": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
               },
               "description": "Draws the table row using status colors",
               "attribute": "state",
@@ -17441,7 +18622,7 @@
             {
               "name": "state",
               "type": {
-                "text": "'primary' | 'danger' | 'success' | 'warning' | 'neutral' | 'custom'"
+                "text": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
               },
               "description": "Draws the table row using status colors",
               "fieldName": "state"
@@ -17583,7 +18764,7 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "text": "| 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               },
               "description": "The tag's variant.",
               "attribute": "type",
@@ -17639,7 +18820,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Drwas a solid filled badge-styled tag .",
+              "description": "Draws a solid filled badge-styled tag .",
               "attribute": "badge",
               "reflects": true
             },
@@ -17660,7 +18841,7 @@
             {
               "name": "type",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "text": "| 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               },
               "description": "The tag's variant.",
               "fieldName": "type"
@@ -17707,7 +18888,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Drwas a solid filled badge-styled tag .",
+              "description": "Draws a solid filled badge-styled tag .",
               "fieldName": "badge"
             }
           ],
@@ -19179,7 +20360,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.0.0-beta.2",
+    "version": "1.0.0-beta.4",
     "author": "Harley Jessop",
     "homepage": "https://lynk.design/",
     "license": "SEE LICENSE IN .LICENSE"