@vonage/vivid 4.31.0 → 5.1.0

package/custom-elements.json

@@ -613,6 +613,57 @@
           "vividComponent": {
             "public": true,
             "name": "accordion-item"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byHeading",
+                "args": [
+                  "byHeading"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "expand",
+                "args": [
+                  "toggleAccordionItem",
+                  "true"
+                ]
+              },
+              {
+                "name": "collapse",
+                "args": [
+                  "toggleAccordionItem",
+                  "false"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "expanded",
+                "args": [
+                  "expanded",
+                  "true"
+                ]
+              },
+              {
+                "name": "collapsed",
+                "args": [
+                  "expanded",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "button",
+                "args": [
+                  "shadow",
+                  ".heading-button"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -1246,6 +1297,34 @@
           "vividComponent": {
             "public": true,
             "name": "alert"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byHeadline",
+                "args": [
+                  "byHeadline"
+                ]
+              }
+            ],
+            "actions": [],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -3165,6 +3244,35 @@
           "vividComponent": {
             "public": true,
             "name": "banner"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byText",
+                "args": [
+                  "byText"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "dismiss",
+                "args": [
+                  "clickButton",
+                  "#dismissButton"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "dismissButton",
+                "args": [
+                  "shadowButton",
+                  ".dismiss-button"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -4041,6 +4149,19 @@
               "description": "Indicates the button's label.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "clickHandler",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles click events.\nPrevents interaction when disabled or pending."
+            },
             {
               "kind": "field",
               "name": "iconTrailing",
@@ -5012,7 +5133,7 @@
                 "name": "click",
                 "args": [
                   "click",
-                  "control"
+                  "#control"
                 ]
               }
             ],
@@ -5022,7 +5143,7 @@
                 "name": "control",
                 "args": [
                   "shadow",
-                  ".control"
+                  "button.control"
                 ]
               }
             ]
@@ -6411,10 +6532,6 @@
               "description": "The indeterminate state of the control.",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "ariaCheckedChanged"
-            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
@@ -7009,20 +7126,20 @@
             ]
           },
           "vividTesting": {
-            "selectors": [
-              {
-                "name": "byTestId",
-                "args": [
-                  "byTestId"
-                ]
-              }
-            ],
+            "selectors": [],
             "actions": [
               {
                 "name": "check",
                 "args": [
                   "check",
-                  "control"
+                  "#control"
+                ]
+              },
+              {
+                "name": "uncheck",
+                "args": [
+                  "uncheck",
+                  "#control"
                 ]
               }
             ],
@@ -7030,7 +7147,22 @@
               {
                 "name": "checked",
                 "args": [
-                  "checked"
+                  "checkedState",
+                  "\"checked\""
+                ]
+              },
+              {
+                "name": "unchecked",
+                "args": [
+                  "checkedState",
+                  "\"unchecked\""
+                ]
+              },
+              {
+                "name": "indeterminate",
+                "args": [
+                  "checkedState",
+                  "\"indeterminate\""
                 ]
               }
             ],
@@ -7039,7 +7171,7 @@
                 "name": "control",
                 "args": [
                   "shadow",
-                  ".control"
+                  "div.control"
                 ]
               }
             ]
@@ -7955,6 +8087,45 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "fill",
+                "args": [
+                  "comboboxFill"
+                ]
+              },
+              {
+                "name": "clear",
+                "args": [
+                  "comboboxClear"
+                ]
+              },
+              {
+                "name": "selectOptionByText",
+                "args": [
+                  "selectOptionByText"
+                ]
+              },
+              {
+                "name": "selectOptionByValue",
+                "args": [
+                  "selectOptionByValue"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  "input.control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -8020,6 +8191,159 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/contextual-help/contextual-help.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ContextualHelp",
+          "cssProperties": [
+            {
+              "name": "--vvd-button-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-button-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-button-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-button-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-button-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-button-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-button-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-button-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-button-accent-fierce-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            },
+            {
+              "description": "Custom icon slot (optional).",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement | undefined"
+              },
+              "default": "'right'",
+              "description": "Placement of the toggletip",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "componentName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "description": "Core component name, without prefix",
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placement",
+              "type": {
+                "text": "Placement | undefined"
+              },
+              "default": "'right'",
+              "description": "Placement of the toggletip",
+              "fieldName": "placement"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "name": "contextual-help"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ContextualHelp",
+          "declaration": {
+            "name": "ContextualHelp",
+            "module": "src/lib/contextual-help/contextual-help.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/contextual-help/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerContextualHelp",
+          "description": "Registers the contextual-help element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerContextualHelp",
+          "declaration": {
+            "name": "registerContextualHelp",
+            "module": "src/lib/contextual-help/definition.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/lib/data-grid/data-grid-cell.ts",
@@ -8233,12 +8557,6 @@
               "name": "updateCellStyle",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "calculateAriaSelectedValue",
-              "privacy": "private",
-              "description": ""
-            },
             {
               "kind": "field",
               "name": "selected",
@@ -8282,6 +8600,18 @@
               "kind": "method",
               "name": "#getColumnDataKey"
             },
+            {
+              "kind": "field",
+              "name": "_vividAriaBehaviour",
+              "default": "'host'",
+              "type": {
+                "text": "'host'"
+              },
+              "inheritedFrom": {
+                "name": "HostSemantics",
+                "module": "src/shared/aria/host-semantics.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "VIVID_VERSION",
@@ -8359,24 +8689,6 @@
               "description": "Reflects selected state of the row",
               "fieldName": "selected"
             },
-            {
-              "name": "aria-selected",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Indicates the selected status.",
-              "fieldName": "ariaSelected"
-            },
-            {
-              "name": "aria-sort",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Indicates the sort status.",
-              "fieldName": "ariaSort"
-            },
             {
               "name": "sort-direction",
               "type": {
@@ -8390,6 +8702,10 @@
             {
               "name": "Localized",
               "module": "/src/shared/patterns"
+            },
+            {
+              "name": "HostSemantics",
+              "module": "/src/shared/aria/host-semantics"
             }
           ],
           "superclass": {
@@ -8663,6 +8979,18 @@
               "description": "Reflects selected state of the row",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "_vividAriaBehaviour",
+              "default": "'host'",
+              "type": {
+                "text": "'host'"
+              },
+              "inheritedFrom": {
+                "name": "HostSemantics",
+                "module": "src/shared/aria/host-semantics.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "VIVID_VERSION",
@@ -8724,15 +9052,6 @@
               "description": "The type of row",
               "fieldName": "rowType"
             },
-            {
-              "name": "aria-selected",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Indicates the selected status.",
-              "fieldName": "ariaSelected"
-            },
             {
               "name": "selected",
               "type": {
@@ -8743,6 +9062,12 @@
               "fieldName": "selected"
             }
           ],
+          "mixins": [
+            {
+              "name": "HostSemantics",
+              "module": "/src/shared/aria/host-semantics"
+            }
+          ],
           "superclass": {
             "name": "VividElement",
             "module": "/src/shared/foundation/vivid-element/vivid-element"
@@ -9945,6 +10270,19 @@
               }
             ]
           },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectDate",
+                "args": [
+                  "selectDate"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
+          },
           "attributes": [
             {
               "name": "min",
@@ -10921,6 +11259,26 @@
                 "valueMapping": "event.currentTarget.end"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectDateRange",
+                "args": [
+                  "selectDateRange"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "range",
+                "args": [
+                  "range"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -11837,6 +12195,19 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectDateTime",
+                "args": [
+                  "selectDateTime"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -12807,10 +13178,10 @@
             ],
             "actions": [
               {
-                "name": "clickDismissButton",
+                "name": "dismiss",
                 "args": [
                   "click",
-                  "dismissButton"
+                  "#dismissButton"
                 ]
               }
             ],
@@ -12818,7 +13189,15 @@
               {
                 "name": "open",
                 "args": [
-                  "dialogOpen"
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
                 ]
               },
               {
@@ -12996,14 +13375,6 @@
             }
           ],
           "attributes": [
-            {
-              "name": "role",
-              "type": {
-                "text": "DividerRole"
-              },
-              "description": "The role of the element. This property will be removed",
-              "fieldName": "role"
-            },
             {
               "name": "orientation",
               "type": {
@@ -13268,6 +13639,10 @@
               "name": "--vvd-empty-state-cta-faint",
               "default": "var(--vvd-color-cta-50)"
             },
+            {
+              "name": "--vvd-empty-state-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
             {
               "name": "--vvd-empty-state-success-firm-all",
               "default": "var(--vvd-color-success-600)"
@@ -13280,6 +13655,10 @@
               "name": "--vvd-empty-state-success-faint",
               "default": "var(--vvd-color-success-50)"
             },
+            {
+              "name": "--vvd-empty-state-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
             {
               "name": "--vvd-empty-state-alert-firm-all",
               "default": "var(--vvd-color-alert-600)"
@@ -13292,6 +13671,10 @@
               "name": "--vvd-empty-state-alert-faint",
               "default": "var(--vvd-color-alert-50)"
             },
+            {
+              "name": "--vvd-empty-state-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
             {
               "name": "--vvd-empty-state-warning-firm-all",
               "default": "var(--vvd-color-warning-600)"
@@ -13304,6 +13687,10 @@
               "name": "--vvd-empty-state-warning-faint",
               "default": "var(--vvd-color-warning-50)"
             },
+            {
+              "name": "--vvd-empty-state-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
             {
               "name": "--vvd-empty-state-information-firm-all",
               "default": "var(--vvd-color-information-600)"
@@ -13316,6 +13703,10 @@
               "name": "--vvd-empty-state-information-faint",
               "default": "var(--vvd-color-information-50)"
             },
+            {
+              "name": "--vvd-empty-state-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            },
             {
               "name": "--vvd-empty-state-announcement-firm-all",
               "default": "var(--vvd-color-announcement-600)"
@@ -13328,6 +13719,10 @@
               "name": "--vvd-empty-state-announcement-faint",
               "default": "var(--vvd-color-announcement-50)"
             },
+            {
+              "name": "--vvd-empty-state-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
             {
               "name": "--vvd-empty-state-accent-firm-all",
               "default": "var(--vvd-color-neutral-600)"
@@ -13339,6 +13734,10 @@
             {
               "name": "--vvd-empty-state-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
             }
           ],
           "slots": [
@@ -13640,6 +14039,19 @@
               "description": "Indicates the fab's label.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "clickHandler",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles click events.\nPrevents interaction when disabled."
+            },
             {
               "kind": "field",
               "name": "iconTrailing",
@@ -14351,6 +14763,35 @@
           "vividComponent": {
             "public": true,
             "name": "fab"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "#control"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  "button.control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -14365,6 +14806,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/file-picker/accept.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isAcceptedFileType",
+          "parameters": [
+            {
+              "name": "file",
+              "type": {
+                "text": "File"
+              }
+            },
+            {
+              "name": "accept",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ],
+          "description": "Match a file against an accept string, like native file input"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isAcceptedFileType",
+          "declaration": {
+            "name": "isAcceptedFileType",
+            "module": "src/lib/file-picker/accept.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/file-picker/data-transfer.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "filesFromDataTransfer",
+          "return": {
+            "type": {
+              "text": "Promise<File[]>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "dataTransfer",
+              "type": {
+                "text": "DataTransfer"
+              }
+            }
+          ],
+          "description": "Extracts files from a DataTransfer, including files from directories.",
+          "async": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "filesFromDataTransfer",
+          "declaration": {
+            "name": "filesFromDataTransfer",
+            "module": "src/lib/file-picker/data-transfer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/lib/file-picker/definition.ts",
@@ -14415,38 +14926,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "#dropzone",
-              "privacy": "private",
-              "type": {
-                "text": "Dropzone | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "files",
-              "type": {
-                "text": "File[]"
-              },
-              "description": "Files that have been added to the file picker and passed validation.",
-              "privacy": "public",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "rejectedFiles",
-              "type": {
-                "text": "File[]"
-              },
-              "description": "Files that have been rejected by the file picker for failing validation.",
-              "privacy": "public",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "#syncSingleFileState"
-            },
             {
               "kind": "field",
               "name": "singleFile",
@@ -14454,45 +14933,18 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Single file state.",
+              "description": "Whether to allow only a single file. Subsequent added file will replace the current file.",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "singleFileChanged"
-            },
             {
               "kind": "field",
               "name": "maxFiles",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "The max files that can be selected.",
+              "description": "The max number of files that can be selected. Additional files will be rejected.",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "maxFilesChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "maxFileSize",
@@ -14500,32 +14952,9 @@
                 "text": "number"
               },
               "default": "256",
-              "description": "The max file size that can be selected.",
+              "description": "The maximum file size (in megabytes) for each file.",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "maxFileSizeChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "accept",
@@ -14535,29 +14964,6 @@
               "description": "List of accepted files types",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "acceptChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "size",
@@ -14576,29 +14982,6 @@
               "description": "Overrides the localized error message for invalid file type",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "invalidFileTypeErrorChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "maxFilesExceededError",
@@ -14608,29 +14991,6 @@
               "description": "Overrides the localized error message for max file exceed",
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "maxFilesExceededErrorChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "fileTooBigError",
@@ -14642,162 +15002,54 @@
             },
             {
               "kind": "method",
-              "name": "fileTooBigErrorChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "nameChanged",
-              "parameters": [
-                {
-                  "name": "previous",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "next",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "buttonTag",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "'vwc-button'",
-              "description": "Used internally to hold the tag that button is registered at."
-            },
-            {
-              "kind": "field",
-              "name": "iconTag",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "'vwc-icon'",
-              "description": "Used internally to hold the tag that icon is registered at."
-            },
-            {
-              "kind": "field",
-              "name": "#localizeErrorMessage",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#localizeFileSizeNumberAndUnits",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "#addRemoveButtonToFilesPreview"
-            },
-            {
-              "kind": "method",
-              "name": "#chooseFile",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#updateHiddenFileInput",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "#updateFormValue"
             },
             {
               "kind": "method",
-              "name": "#keepOnlyNewestFile"
+              "name": "#setValueToAFakePathLikeNativeInput"
             },
             {
               "kind": "method",
-              "name": "#handleFilesChanged",
+              "name": "#getCustomValidationError",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "string | null"
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "#updateFormValue"
-            },
-            {
-              "kind": "method",
-              "name": "#setValueToAFakePathLikeNativeInput"
-            },
             {
               "kind": "field",
-              "name": "setFormValue"
+              "name": "#customValidationChangeHandler",
+              "privacy": "private",
+              "type": {
+                "text": "object"
+              },
+              "default": "{\n\t\thandleChange: () => {\n\t\t\tthis._customValidationError =\n\t\t\t\tthis.#customValidationChangeObserver.observe(\n\t\t\t\t\tthis,\n\t\t\t\t\tdefaultExecutionContext\n\t\t\t\t);\n\t\t},\n\t}"
             },
             {
-              "kind": "method",
-              "name": "#getCustomValidationError",
-              "return": {
-                "type": {
-                  "text": "string | null"
-                }
+              "kind": "field",
+              "name": "#customValidationChangeObserver",
+              "privacy": "private",
+              "type": {
+                "text": "BindingObserver"
               }
             },
             {
               "kind": "method",
-              "name": "validate",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "{@inheritDoc (FormAssociated:interface).validate}",
-              "inheritedFrom": {
-                "name": "WithErrorText",
-                "module": "src/shared/patterns/form-elements/with-error-text.ts"
-              }
+              "name": "#startObservingCustomValidation"
             },
             {
               "kind": "method",
-              "name": "formResetCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "#stopObservingCustomValidation"
             },
             {
               "kind": "method",
-              "name": "#formatNumbersInMessage",
+              "name": "#addFiles",
               "parameters": [
                 {
-                  "name": "message",
+                  "name": "files",
                   "type": {
-                    "text": "string"
+                    "text": "File[] | FileList"
                   }
                 }
               ]
@@ -14809,11 +15061,23 @@
             },
             {
               "kind": "field",
-              "name": "autoDiscover",
+              "name": "files",
               "type": {
-                "text": "boolean"
+                "text": "File[]"
               },
-              "default": "false"
+              "description": "Files that have been added to the file picker and passed validation.",
+              "privacy": "public",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "rejectedFiles",
+              "type": {
+                "text": "File[]"
+              },
+              "description": "Files that have been rejected by the file picker for failing validation.",
+              "privacy": "public",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -14890,6 +15154,14 @@
                 "module": "src/shared/patterns/form-elements/with-error-text.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "validate",
+              "inheritedFrom": {
+                "name": "WithErrorText",
+                "module": "src/shared/patterns/form-elements/with-error-text.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "label",
@@ -15119,7 +15391,7 @@
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "Emitted when a file is added or removed.",
+              "description": "Emitted when files are added or removed.",
               "name": "change"
             }
           ],
@@ -15130,7 +15402,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Single file state.",
+              "description": "Whether to allow only a single file. Subsequent added file will replace the current file.",
               "fieldName": "singleFile"
             },
             {
@@ -15138,7 +15410,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "The max files that can be selected.",
+              "description": "The max number of files that can be selected. Additional files will be rejected.",
               "fieldName": "maxFiles"
             },
             {
@@ -15147,7 +15419,7 @@
                 "text": "number"
               },
               "default": "256",
-              "description": "The max file size that can be selected.",
+              "description": "The maximum file size (in megabytes) for each file.",
               "fieldName": "maxFileSize"
             },
             {
@@ -15745,6 +16017,19 @@
           "vividComponent": {
             "public": true,
             "name": "icon"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "name",
+                "args": [
+                  "name"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -16469,6 +16754,34 @@
           "vividComponent": {
             "public": true,
             "name": "menu"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -16875,14 +17188,6 @@
               "description": "The expanded state of the element.",
               "fieldName": "expanded"
             },
-            {
-              "name": "role",
-              "type": {
-                "text": "MenuItemRole"
-              },
-              "description": "The role of the element.",
-              "fieldName": "role"
-            },
             {
               "name": "control-type",
               "type": {
@@ -16981,6 +17286,56 @@
                 "valueMapping": "event.currentTarget.checked"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byText",
+                "args": [
+                  "byText"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "#base"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "checked",
+                "args": [
+                  "checked",
+                  "true"
+                ]
+              },
+              {
+                "name": "unchecked",
+                "args": [
+                  "checked",
+                  "false"
+                ]
+              },
+              {
+                "name": "disabled",
+                "args": [
+                  "disabled"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "base",
+                "args": [
+                  "shadow",
+                  ".base"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -17437,6 +17792,71 @@
           "vividComponent": {
             "public": true,
             "name": "nav-disclosure"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "expand",
+                "args": [
+                  "toggleNavDisclosure",
+                  "true"
+                ]
+              },
+              {
+                "name": "collapse",
+                "args": [
+                  "toggleNavDisclosure",
+                  "false"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "current",
+                "args": [
+                  "navCurrent",
+                  "true"
+                ]
+              },
+              {
+                "name": "!current",
+                "args": [
+                  "navCurrent",
+                  "false"
+                ]
+              },
+              {
+                "name": "open",
+                "args": [
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "summary",
+                "args": [
+                  "shadow",
+                  "summary"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -17945,6 +18365,50 @@
           "vividComponent": {
             "public": true,
             "name": "nav-item"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "#control"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "current",
+                "args": [
+                  "navCurrent",
+                  "true"
+                ]
+              },
+              {
+                "name": "!current",
+                "args": [
+                  "navCurrent",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -19152,6 +19616,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -19210,6 +19678,70 @@
                 "valueMapping": "event.currentTarget.valueAsNumber"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "fill",
+                "args": [
+                  "fill",
+                  "#control"
+                ]
+              },
+              {
+                "name": "clear",
+                "args": [
+                  "clear",
+                  "#control"
+                ]
+              },
+              {
+                "name": "clickIncrement",
+                "args": [
+                  "clickButton",
+                  "#incrementButton"
+                ]
+              },
+              {
+                "name": "clickDecrement",
+                "args": [
+                  "clickButton",
+                  "#decrementButton"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "valueAsNumber",
+                "args": [
+                  "valueAsNumber"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  "input.control"
+                ]
+              },
+              {
+                "name": "incrementButton",
+                "args": [
+                  "shadowButton",
+                  "#add"
+                ]
+              },
+              {
+                "name": "decrementButton",
+                "args": [
+                  "shadowButton",
+                  "#subtract"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -19328,6 +19860,10 @@
             {
               "description": "The preferred way to add an icon to the component.",
               "name": "icon"
+            },
+            {
+              "description": "For additional elements at the end of the Option.",
+              "name": "trailing-meta"
             }
           ],
           "members": [
@@ -19446,6 +19982,15 @@
               "kind": "field",
               "name": "text"
             },
+            {
+              "kind": "field",
+              "name": "textSecondary",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": ""
+            },
             {
               "kind": "field",
               "name": "form",
@@ -19550,6 +20095,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The checked state is used when the parent listbox is in multiple selection mode.\nTo avoid accessibility conflicts, the checked state should not be present in\nsingle selection mode.",
+              "fieldName": "checked"
+            },
             {
               "name": "selected",
               "type": {
@@ -19598,6 +20151,13 @@
               },
               "fieldName": "_text"
             },
+            {
+              "name": "text-secondary",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "textSecondary"
+            },
             {
               "name": "matched-text",
               "type": {
@@ -19657,6 +20217,20 @@
           "vividComponent": {
             "public": true,
             "name": "option"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "#locator"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -19968,7 +20542,72 @@
           },
           "vividComponent": {
             "public": true,
-            "name": "pagination"
+            "name": "pagination",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "propName": "selectedIndex",
+                "eventNames": [
+                  "pagination-change"
+                ],
+                "valueMapping": "event.currentTarget.selectedIndex"
+              }
+            ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "clickNext",
+                "args": [
+                  "click",
+                  "#nextButton"
+                ]
+              },
+              {
+                "name": "clickPrev",
+                "args": [
+                  "click",
+                  "#prevButton"
+                ]
+              },
+              {
+                "name": "clickPageIndex",
+                "args": [
+                  "clickPaginationPage"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "total",
+                "args": [
+                  "total"
+                ]
+              },
+              {
+                "name": "selectedPage",
+                "args": [
+                  "paginationSelectedPage"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "nextButton",
+                "args": [
+                  "shadow",
+                  ".next-button"
+                ]
+              },
+              {
+                "name": "prevButton",
+                "args": [
+                  "shadow",
+                  ".prev-button"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -21125,14 +21764,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null"
-            },
             {
               "kind": "field",
               "name": "connotation",
@@ -21532,14 +22163,6 @@
             }
           ],
           "attributes": [
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "fieldName": "ariaLabel"
-            },
             {
               "name": "connotation",
               "type": {
@@ -21689,6 +22312,43 @@
           "vividComponent": {
             "public": true,
             "name": "radio"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "check",
+                "args": [
+                  "click",
+                  "#control"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "checked",
+                "args": [
+                  "checked",
+                  "true"
+                ]
+              },
+              {
+                "name": "unchecked",
+                "args": [
+                  "checked",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -22993,6 +23653,81 @@
                   "input:end"
                 ],
                 "valueMapping": "event.currentTarget.end"
+              },
+              {
+                "name": "startAsNumber",
+                "propName": "startAsNumber",
+                "eventNames": [
+                  "input:start"
+                ],
+                "valueMapping": "event.currentTarget.startAsNumber"
+              },
+              {
+                "name": "endAsNumber",
+                "propName": "endAsNumber",
+                "eventNames": [
+                  "input:end"
+                ],
+                "valueMapping": "event.currentTarget.endAsNumber"
+              }
+            ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "slideStartTo",
+                "args": [
+                  "slideTo",
+                  "#track",
+                  "#startThumb"
+                ]
+              },
+              {
+                "name": "slideEndTo",
+                "args": [
+                  "slideTo",
+                  "#track",
+                  "#endThumb"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "range",
+                "args": [
+                  "rangeAsNumber"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "track",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              },
+              {
+                "name": "startThumb",
+                "args": [
+                  "shadow",
+                  "#start-thumb"
+                ]
+              },
+              {
+                "name": "endThumb",
+                "args": [
+                  "shadow",
+                  "#end-thumb"
+                ]
               }
             ]
           }
@@ -24640,9 +25375,15 @@
             "selectors": [],
             "actions": [
               {
-                "name": "toggleOptionsByValue",
+                "name": "selectOptionByValue",
                 "args": [
-                  "toggleOptionsByValue"
+                  "selectOptionByValue"
+                ]
+              },
+              {
+                "name": "selectOptionByText",
+                "args": [
+                  "selectOptionByText"
                 ]
               }
             ],
@@ -24652,6 +25393,12 @@
                 "args": [
                   "values"
                 ]
+              },
+              {
+                "name": "selectedOptions",
+                "args": [
+                  "selectedOptionsText"
+                ]
               }
             ],
             "refs": []
@@ -25592,6 +26339,12 @@
           "vividTesting": {
             "selectors": [],
             "actions": [
+              {
+                "name": "selectOptionByValue",
+                "args": [
+                  "selectOptionByValue"
+                ]
+              },
               {
                 "name": "selectOptionByText",
                 "args": [
@@ -25717,16 +26470,6 @@
               "description": "Controls the checked state of the box",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "clickable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "privacy": "public",
-              "description": ""
-            },
             {
               "kind": "field",
               "name": "clickableBox",
@@ -25820,298 +26563,870 @@
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "Fired when the checked state changes",
+              "description": "Fired when the checked state changes",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls the checked state of the box",
+              "fieldName": "checked"
+            },
+            {
+              "name": "clickable-box",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the entire selectable box clickable",
+              "fieldName": "clickableBox"
+            },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "SelectableBoxConnotation | undefined"
+              },
+              "description": "The connotation the selectable box should have.",
+              "fieldName": "connotation"
+            },
+            {
+              "name": "control-type",
+              "type": {
+                "text": "SelectableBoxControlType | undefined"
+              },
+              "description": "The type of control the box should have: checkbox or radio.",
+              "fieldName": "controlType"
+            },
+            {
+              "name": "control-placement",
+              "type": {
+                "text": "SelectableBoxControlPlacement"
+              },
+              "default": "'end-stacked'",
+              "description": "Defines where the control (checkbox or radio) should be located.",
+              "fieldName": "controlPlacement"
+            },
+            {
+              "name": "tight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the padding around the box's slot content",
+              "fieldName": "tight"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DelegatesAria",
+              "module": "/src/shared/aria/delegates-aria"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "selectable-box"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "check",
+                "args": [
+                  "check",
+                  "#control"
+                ]
+              },
+              {
+                "name": "uncheck",
+                "args": [
+                  "uncheck",
+                  "#control"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "checked",
+                "args": [
+                  "checked",
+                  "true"
+                ]
+              },
+              {
+                "name": "unchecked",
+                "args": [
+                  "checked",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "nestedShadow",
+                  "[data-vvd-component].control",
+                  "div.control"
+                ]
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SelectableBox",
+          "declaration": {
+            "name": "SelectableBox",
+            "module": "src/lib/selectable-box/selectable-box.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/side-drawer/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerSideDrawer",
+          "description": "Registers the side-drawer elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerSideDrawer",
+          "declaration": {
+            "name": "registerSideDrawer",
+            "module": "src/lib/side-drawer/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VwcSideDrawerElement",
+          "declaration": {
+            "name": "SideDrawer",
+            "module": "src/lib/side-drawer/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/side-drawer/side-drawer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SideDrawer",
+          "slots": [
+            {
+              "description": "Sets assigned nodes to the side drawer itself.",
+              "name": ""
+            },
+            {
+              "description": "Sets assigned nodes to the main application content, the side drawer is opened next to.",
+              "name": "app-content"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "alternate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "applies scheme alternate region",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "modal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "sets the side drawer's type to modal",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "indicates whether the side drawer is open",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "trailing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "sets the side of the side drawer",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "#close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#open",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "componentName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "description": "Core component name, without prefix",
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the side drawer is closed.",
+              "name": "close"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the side drawer is opened.",
+              "name": "open"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the user requests to close the side-drawer. You can prevent the side drawer from closing by calling `.preventDefault()` on the event.",
+              "name": "cancel"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "alternate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "applies scheme alternate region",
+              "fieldName": "alternate"
+            },
+            {
+              "name": "modal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "sets the side drawer's type to modal",
+              "fieldName": "modal"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "indicates whether the side drawer is open",
+              "fieldName": "open"
+            },
+            {
+              "name": "trailing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "sets the side of the side drawer",
+              "fieldName": "trailing"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "side-drawer"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SideDrawer",
+          "declaration": {
+            "name": "SideDrawer",
+            "module": "src/lib/side-drawer/side-drawer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/simple-color-picker/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "simpleColorPickerDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerSimpleColorPicker",
+          "description": "Registers the simple-color-picker element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "simpleColorPickerDefinition",
+          "declaration": {
+            "name": "simpleColorPickerDefinition",
+            "module": "src/lib/simple-color-picker/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerSimpleColorPicker",
+          "declaration": {
+            "name": "registerSimpleColorPicker",
+            "module": "src/lib/simple-color-picker/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VwcSimpleColorPickerElement",
+          "declaration": {
+            "name": "SimpleColorPicker",
+            "module": "src/lib/simple-color-picker/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/simple-color-picker/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/simple-color-picker/simple-color-picker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SimpleColorPicker",
+          "slots": [
+            {
+              "description": "Slot for attaching the toggle button",
+              "name": "anchor"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the popup is open",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement | undefined"
+              },
+              "default": "'top-start'",
+              "description": "Placement of the popup with color swatches",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "swatches",
+              "type": {
+                "text": "ColorSwatch[]"
+              },
+              "default": "[]",
+              "description": "List of color swatches, has to be an array of objects\n\n### Examples",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "swatchesPerRow",
+              "type": {
+                "text": "number"
+              },
+              "default": "7",
+              "description": "Number of swatches per row for grid layout",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "AnchorType | undefined"
+              },
+              "description": "ID or direct reference to the component's anchor element.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#updateAnchorEl",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#observer",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#observeMissingAnchor",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#cleanupObserverIfNeeded",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label for the form element.",
+              "inheritedFrom": {
+                "name": "FormElement",
+                "module": "src/shared/patterns/form-elements/form-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#handleInvalidEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "FormElement",
+                "module": "src/shared/patterns/form-elements/form-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "description": "Returns the validity state of the element",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "description": "Retrieve a reference to the associated form.\nReturns null if not associated to any form.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "description": "Retrieve the localized validation message,\nor custom validation message if set.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the element will be validated when the\nform is submitted",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "ReadonlyArray<Node>"
+              },
+              "description": "A reference to all associated label elements",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the element.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "currentValue",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "initialValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "The default value of the element. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the element's disabled state. A disabled element will not be included during form submission.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name of the element. This element's value will be surfaced during form submission under the provided name.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Require the field to be completed prior to form submission.",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Return the current validity of the element.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Return the current validity of the element.\nIf false, fires an invalid event at the element.",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "componentName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "description": "Core component name, without prefix",
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fires when the value changes",
               "name": "change"
             }
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls the checked state of the box",
-              "fieldName": "checked"
-            },
-            {
-              "name": "clickable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "clickable"
-            },
-            {
-              "name": "clickable-box",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the entire selectable box clickable",
-              "fieldName": "clickableBox"
-            },
-            {
-              "name": "connotation",
-              "type": {
-                "text": "SelectableBoxConnotation | undefined"
-              },
-              "description": "The connotation the selectable box should have.",
-              "fieldName": "connotation"
+              "description": "Indicates whether the popup is open",
+              "fieldName": "open"
             },
             {
-              "name": "control-type",
+              "name": "placement",
               "type": {
-                "text": "SelectableBoxControlType | undefined"
+                "text": "Placement | undefined"
               },
-              "description": "The type of control the box should have: checkbox or radio.",
-              "fieldName": "controlType"
+              "default": "'top-start'",
+              "description": "Placement of the popup with color swatches",
+              "fieldName": "placement"
             },
             {
-              "name": "control-placement",
+              "name": "swatches-per-row",
               "type": {
-                "text": "SelectableBoxControlPlacement"
+                "text": "number"
               },
-              "default": "'end-stacked'",
-              "description": "Defines where the control (checkbox or radio) should be located.",
-              "fieldName": "controlPlacement"
+              "default": "7",
+              "description": "Number of swatches per row for grid layout",
+              "fieldName": "swatchesPerRow"
             },
             {
-              "name": "tight",
+              "name": "anchor",
               "type": {
-                "text": "boolean"
+                "text": "AnchorType | undefined"
               },
-              "default": "false",
-              "description": "Removes the padding around the box's slot content",
-              "fieldName": "tight"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DelegatesAria",
-              "module": "/src/shared/aria/delegates-aria"
-            }
-          ],
-          "superclass": {
-            "name": "VividElement",
-            "module": "/src/shared/foundation/vivid-element/vivid-element"
-          },
-          "vividComponent": {
-            "public": true,
-            "name": "selectable-box"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SelectableBox",
-          "declaration": {
-            "name": "SelectableBox",
-            "module": "src/lib/selectable-box/selectable-box.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/lib/side-drawer/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "registerSideDrawer",
-          "description": "Registers the side-drawer elements with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerSideDrawer",
-          "declaration": {
-            "name": "registerSideDrawer",
-            "module": "src/lib/side-drawer/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "VwcSideDrawerElement",
-          "declaration": {
-            "name": "SideDrawer",
-            "module": "src/lib/side-drawer/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/lib/side-drawer/side-drawer.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SideDrawer",
-          "slots": [
-            {
-              "description": "Sets assigned nodes to the side drawer itself.",
-              "name": ""
+              "description": "ID or direct reference to the component's anchor element.",
+              "fieldName": "anchor",
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
             },
             {
-              "description": "Sets assigned nodes to the main application content, the side drawer is opened next to.",
-              "name": "app-content"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "alternate",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "applies scheme alternate region",
-              "privacy": "public"
+              "description": "The label for the form element.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormElement",
+                "module": "src/shared/patterns/form-elements/form-element.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "modal",
+              "name": "current-value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "sets the side drawer's type to modal",
-              "privacy": "public"
+              "description": "The current value of the element.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "open",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "indicates whether the side drawer is open",
-              "privacy": "public"
+              "description": "The default value of the element. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
+              "fieldName": "initialValue",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "trailing",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "sets the side of the side drawer",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "#close",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#open",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "description": "Sets the element's disabled state. A disabled element will not be included during form submission.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "VIVID_VERSION",
-              "static": true,
-              "default": "__PACKAGE_VERSION__",
-              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "name": "name",
               "type": {
                 "text": "string"
               },
+              "description": "The name of the element. This element's value will be surfaced during form submission under the provided name.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "componentName",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "static": true,
-              "description": "Core component name, without prefix",
+              "description": "Require the field to be completed prior to form submission.",
+              "default": "false",
+              "fieldName": "required",
               "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
               }
             }
           ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Fired when the side drawer is closed.",
-              "name": "close"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Fired when the side drawer is opened.",
-              "name": "open"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Fired when the user requests to close the side-drawer. You can prevent the side drawer from closing by calling `.preventDefault()` on the event.",
-              "name": "cancel"
-            }
-          ],
-          "attributes": [
+          "mixins": [
             {
-              "name": "alternate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "applies scheme alternate region",
-              "fieldName": "alternate"
+              "name": "Localized",
+              "module": "/src/shared/patterns"
             },
             {
-              "name": "modal",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "sets the side drawer's type to modal",
-              "fieldName": "modal"
+              "name": "Anchored",
+              "module": "/src/shared/patterns/anchored"
             },
             {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "indicates whether the side drawer is open",
-              "fieldName": "open"
+              "name": "FormElement",
+              "module": "/src/shared/patterns"
             },
             {
-              "name": "trailing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "sets the side of the side drawer",
-              "fieldName": "trailing"
+              "name": "FormAssociated",
+              "module": "/src/shared/foundation/form-associated/form-associated"
             }
           ],
           "superclass": {
@@ -26120,17 +27435,27 @@
           },
           "vividComponent": {
             "public": true,
-            "name": "side-drawer"
+            "name": "simple-color-picker",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "propName": "value",
+                "eventNames": [
+                  "input"
+                ],
+                "valueMapping": "event.currentTarget.value"
+              }
+            ]
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SideDrawer",
+          "name": "SimpleColorPicker",
           "declaration": {
-            "name": "SideDrawer",
-            "module": "src/lib/side-drawer/side-drawer.ts"
+            "name": "SimpleColorPicker",
+            "module": "src/lib/simple-color-picker/simple-color-picker.ts"
           }
         }
       ]
@@ -26881,6 +28206,58 @@
                   "change"
                 ],
                 "valueMapping": "event.currentTarget.value"
+              },
+              {
+                "name": "valueAsNumber",
+                "propName": "valueAsNumber",
+                "eventNames": [
+                  "change"
+                ],
+                "valueMapping": "event.currentTarget.valueAsNumber"
+              }
+            ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "slideTo",
+                "args": [
+                  "slideTo",
+                  "#track",
+                  "#thumb"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "valueAsNumber",
+                "args": [
+                  "valueAsNumber"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "track",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              },
+              {
+                "name": "thumb",
+                "args": [
+                  "shadow",
+                  ".thumb-container"
+                ]
               }
             ]
           }
@@ -27288,6 +28665,32 @@
               "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "handleActionClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles action click events.\nPrevents interaction when disabled or pending."
+            },
+            {
+              "kind": "method",
+              "name": "handleIndicatorClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles indicator click events.\nPrevents interaction when disabled or pending."
+            },
             {
               "kind": "field",
               "name": "icon",
@@ -27459,6 +28862,49 @@
           "vividComponent": {
             "public": true,
             "name": "split-button"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "clickAction",
+                "args": [
+                  "click",
+                  "#actionButton"
+                ]
+              },
+              {
+                "name": "clickIndicator",
+                "args": [
+                  "click",
+                  "#indicatorButton"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "actionButton",
+                "args": [
+                  "shadow",
+                  "button.control"
+                ]
+              },
+              {
+                "name": "indicatorButton",
+                "args": [
+                  "shadow",
+                  "button.indicator"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -28069,6 +29515,57 @@
                 "valueMapping": "event.currentTarget.checked"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "check",
+                "args": [
+                  "click",
+                  "#switch"
+                ]
+              },
+              {
+                "name": "uncheck",
+                "args": [
+                  "click",
+                  "#switch"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "checked",
+                "args": [
+                  "checked",
+                  "true"
+                ]
+              },
+              {
+                "name": "unchecked",
+                "args": [
+                  "checked",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "switch",
+                "args": [
+                  "shadow",
+                  ".switch"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -28447,6 +29944,50 @@
           "vividComponent": {
             "public": true,
             "name": "tab"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "select",
+                "args": [
+                  "click",
+                  "#base"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "active",
+                "args": [
+                  "active",
+                  "true"
+                ]
+              },
+              {
+                "name": "inactive",
+                "args": [
+                  "active",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "base",
+                "args": [
+                  "shadow",
+                  ".base"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -28679,6 +30220,10 @@
               "description": "The orientation",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "#areSlotsSynced"
+            },
             {
               "kind": "field",
               "name": "_pairedTabs",
@@ -29498,6 +31043,92 @@
           "vividComponent": {
             "public": true,
             "name": "tag"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "#base"
+                ]
+              },
+              {
+                "name": "remove",
+                "args": [
+                  "click",
+                  "#dismissButton"
+                ]
+              },
+              {
+                "name": "select",
+                "args": [
+                  "toggleTag",
+                  "true"
+                ]
+              },
+              {
+                "name": "unselect",
+                "args": [
+                  "toggleTag",
+                  "false"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "selected",
+                "args": [
+                  "selected",
+                  "true"
+                ]
+              },
+              {
+                "name": "unselected",
+                "args": [
+                  "selected",
+                  "false"
+                ]
+              },
+              {
+                "name": "disabled",
+                "args": [
+                  "disabled",
+                  "true"
+                ]
+              },
+              {
+                "name": "!disabled",
+                "args": [
+                  "disabled",
+                  "false"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "base",
+                "args": [
+                  "shadow",
+                  ".base"
+                ]
+              },
+              {
+                "name": "dismissButton",
+                "args": [
+                  "shadow",
+                  ".dismiss-button"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -30494,6 +32125,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -30548,7 +32183,14 @@
                 "name": "fill",
                 "args": [
                   "fill",
-                  "control"
+                  "#control"
+                ]
+              },
+              {
+                "name": "clear",
+                "args": [
+                  "clear",
+                  "#control"
                 ]
               }
             ],
@@ -31469,6 +33111,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+            },
             {
               "name": "WithLightDOMFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -31527,7 +33173,21 @@
                 "name": "fill",
                 "args": [
                   "fill",
-                  "control"
+                  "#control"
+                ]
+              },
+              {
+                "name": "clear",
+                "args": [
+                  "clear",
+                  "#control"
+                ]
+              },
+              {
+                "name": "blur",
+                "args": [
+                  "blur",
+                  "#control"
                 ]
               }
             ],
@@ -31537,8 +33197,7 @@
                 "name": "control",
                 "args": [
                   "light",
-                  "input[slot=\"_control\"]",
-                  "HTMLInputElement"
+                  "input[slot=\"_control\"]"
                 ]
               }
             ]
@@ -32344,6 +34003,19 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectTime",
+                "args": [
+                  "selectTime"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -32702,6 +34374,34 @@
           "vividComponent": {
             "public": true,
             "name": "toggletip"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byHeadline",
+                "args": [
+                  "byHeadline"
+                ]
+              }
+            ],
+            "actions": [],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -32982,7 +34682,15 @@
               {
                 "name": "open",
                 "args": [
-                  "open"
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
                 ]
               }
             ],
@@ -33055,9 +34763,7 @@
                 "text": "Element"
               }
             }
-          ],
-          "description": "check if the item is a tree item",
-          "privacy": "public"
+          ]
         },
         {
           "kind": "class",
@@ -34046,6 +35752,244 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/file-picker/__mocks__/data-transfer.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mockFile",
+          "parameters": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mockNonFileOrDir",
+          "parameters": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mockString"
+        },
+        {
+          "kind": "function",
+          "name": "mockDir",
+          "parameters": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "children",
+              "type": {
+                "text": "DataTransferItem[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mockTransfer",
+          "return": {
+            "type": {
+              "text": "DataTransfer"
+            }
+          },
+          "parameters": [
+            {
+              "name": "items",
+              "type": {
+                "text": "DataTransferItem[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "simulateNoItemsSupport",
+          "return": {
+            "type": {
+              "text": "DataTransfer"
+            }
+          },
+          "parameters": [
+            {
+              "name": "transfer",
+              "type": {
+                "text": "DataTransfer"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "simulateNoWebkitGetAsEntrySupport",
+          "return": {
+            "type": {
+              "text": "DataTransfer"
+            }
+          },
+          "parameters": [
+            {
+              "name": "transfer",
+              "type": {
+                "text": "DataTransfer"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "simulateWebkitGetAsEntryReturnsNull",
+          "return": {
+            "type": {
+              "text": "DataTransfer"
+            }
+          },
+          "parameters": [
+            {
+              "name": "transfer",
+              "type": {
+                "text": "DataTransfer"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "simulateFileReadError",
+          "parameters": [
+            {
+              "name": "item",
+              "type": {
+                "text": "DataTransferItem"
+              }
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "DOMException"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "simulateDirReadError",
+          "parameters": [
+            {
+              "name": "item",
+              "type": {
+                "text": "DataTransferItem"
+              }
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "DOMException"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mockFile",
+          "declaration": {
+            "name": "mockFile",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mockNonFileOrDir",
+          "declaration": {
+            "name": "mockNonFileOrDir",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mockString",
+          "declaration": {
+            "name": "mockString",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mockDir",
+          "declaration": {
+            "name": "mockDir",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mockTransfer",
+          "declaration": {
+            "name": "mockTransfer",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "simulateNoItemsSupport",
+          "declaration": {
+            "name": "simulateNoItemsSupport",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "simulateNoWebkitGetAsEntrySupport",
+          "declaration": {
+            "name": "simulateNoWebkitGetAsEntrySupport",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "simulateWebkitGetAsEntryReturnsNull",
+          "declaration": {
+            "name": "simulateWebkitGetAsEntryReturnsNull",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "simulateFileReadError",
+          "declaration": {
+            "name": "simulateFileReadError",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "simulateDirReadError",
+          "declaration": {
+            "name": "simulateDirReadError",
+            "module": "src/lib/file-picker/__mocks__/data-transfer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/lib/range-slider/utils/lerp.ts",
@@ -36291,18 +38235,6 @@
               "static": true,
               "description": "Core component name, without prefix"
             },
-            {
-              "kind": "field",
-              "name": "specialHandling",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "AriaMixin",
-                "module": "src/shared/aria/aria-mixin.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
@@ -36347,12 +38279,34 @@
             "package": "@microsoft/fast-element"
           },
           "vividTesting": {
-            "selectors": [],
+            "selectors": [
+              {
+                "name": "byTestId",
+                "args": [
+                  "byTestId"
+                ]
+              }
+            ],
             "actions": [
               {
                 "name": "hover",
                 "args": [
-                  "hover"
+                  "hover",
+                  "#locator"
+                ]
+              },
+              {
+                "name": "focus",
+                "args": [
+                  "focus",
+                  "#locator"
+                ]
+              },
+              {
+                "name": "blur",
+                "args": [
+                  "blur",
+                  "#locator"
                 ]
               }
             ],
@@ -36409,7 +38363,20 @@
               "description": "A decorative icon the custom element should have.",
               "fieldName": "icon"
             }
-          ]
+          ],
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "icon",
+                "args": [
+                  "affixIcon"
+                ]
+              }
+            ],
+            "refs": []
+          }
         },
         {
           "kind": "mixin",
@@ -37091,6 +39058,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/patterns/form-elements/with-contextual-help.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "Mixin for elements that can display optional contextual help for the label.",
+          "name": "WithContextualHelp",
+          "parameters": [
+            {
+              "name": "Base",
+              "type": {
+                "text": "T"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the contextual-help component, displayed next to the label.",
+              "name": "contextual-help"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WithContextualHelp",
+          "declaration": {
+            "name": "WithContextualHelp",
+            "module": "src/shared/patterns/form-elements/with-contextual-help.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/patterns/form-elements/with-error-text.ts",
@@ -37349,14 +39351,6 @@
           "description": "Mixin for all components. Declares all ARIA attributes.",
           "name": "AriaMixin",
           "members": [
-            {
-              "kind": "field",
-              "name": "specialHandling",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
@@ -37403,6 +39397,60 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/aria/attribute-removal.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "handleAriaPropertyChange",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "AriaMixinElement"
+              }
+            },
+            {
+              "name": "ariaProperty",
+              "type": {
+                "text": "AriaPropertyName"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "handleElementConnectedCallback",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "AriaMixinElement"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "handleAriaPropertyChange",
+          "declaration": {
+            "name": "handleAriaPropertyChange",
+            "module": "src/shared/aria/attribute-removal.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleElementConnectedCallback",
+          "declaration": {
+            "name": "handleElementConnectedCallback",
+            "module": "src/shared/aria/attribute-removal.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/aria/delegate-aria-behavior.ts",
@@ -37430,15 +39478,6 @@
               "privacy": "private",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "isMitigationDisabled",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "source",
@@ -37578,20 +39617,6 @@
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "mitigateAccessibilityIssues",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "source",
-                  "type": {
-                    "text": "AriaMixinElement"
-                  }
-                }
-              ],
-              "description": "Sets role to presentation unless there are properties present that prohibit it.\nUsing role=\"presentation\" will cause non-global states or properties to be ignored.\nSee: https://www.w3.org/TR/wai-aria-1.3/#conflict_resolution_presentation_none"
             }
           ]
         }
@@ -37892,18 +39917,6 @@
                 "module": "src/shared/foundation/vivid-element/vivid-element.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "specialHandling",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
@@ -38454,18 +40467,6 @@
                 "module": "src/shared/foundation/vivid-element/vivid-element.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "specialHandling",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
@@ -38633,6 +40634,41 @@
           "superclass": {
             "name": "VividElement",
             "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "clear",
+                "args": [
+                  "clearPicker"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadowTextField",
+                  "[data-vvd-component=text-field].control"
+                ]
+              },
+              {
+                "name": "pickerButton",
+                "args": [
+                  "shadowButton",
+                  "#picker-button"
+                ]
+              },
+              {
+                "name": "clearButton",
+                "args": [
+                  "shadowButton",
+                  "#clear-button"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -39324,18 +41360,6 @@
                 "module": "src/shared/foundation/vivid-element/vivid-element.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "specialHandling",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",