@vonage/vivid 5.0.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"
                 ]
               }
             ]
@@ -7005,20 +7126,20 @@
             ]
           },
           "vividTesting": {
-            "selectors": [
-              {
-                "name": "byTestId",
-                "args": [
-                  "byTestId"
-                ]
-              }
-            ],
+            "selectors": [],
             "actions": [
               {
                 "name": "check",
                 "args": [
                   "check",
-                  "control"
+                  "#control"
+                ]
+              },
+              {
+                "name": "uncheck",
+                "args": [
+                  "uncheck",
+                  "#control"
                 ]
               }
             ],
@@ -7026,7 +7147,22 @@
               {
                 "name": "checked",
                 "args": [
-                  "checked"
+                  "checkedState",
+                  "\"checked\""
+                ]
+              },
+              {
+                "name": "unchecked",
+                "args": [
+                  "checkedState",
+                  "\"unchecked\""
+                ]
+              },
+              {
+                "name": "indeterminate",
+                "args": [
+                  "checkedState",
+                  "\"indeterminate\""
                 ]
               }
             ],
@@ -7035,7 +7171,7 @@
                 "name": "control",
                 "args": [
                   "shadow",
-                  ".control"
+                  "div.control"
                 ]
               }
             ]
@@ -7951,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -8016,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",
@@ -9942,6 +10270,19 @@
               }
             ]
           },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectDate",
+                "args": [
+                  "selectDate"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
+          },
           "attributes": [
             {
               "name": "min",
@@ -10918,6 +11259,26 @@
                 "valueMapping": "event.currentTarget.end"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectDateRange",
+                "args": [
+                  "selectDateRange"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "range",
+                "args": [
+                  "range"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -11834,6 +12195,19 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectDateTime",
+                "args": [
+                  "selectDateTime"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -12804,10 +13178,10 @@
             ],
             "actions": [
               {
-                "name": "clickDismissButton",
+                "name": "dismiss",
                 "args": [
                   "click",
-                  "dismissButton"
+                  "#dismissButton"
                 ]
               }
             ],
@@ -12815,7 +13189,15 @@
               {
                 "name": "open",
                 "args": [
-                  "dialogOpen"
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
                 ]
               },
               {
@@ -13257,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)"
@@ -13269,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)"
@@ -13281,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)"
@@ -13293,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)"
@@ -13305,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)"
@@ -13317,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)"
@@ -13328,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": [
@@ -13629,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",
@@ -14340,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -14354,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",
@@ -14404,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",
@@ -14443,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",
@@ -14489,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",
@@ -14524,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",
@@ -14565,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",
@@ -14597,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",
@@ -14631,181 +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": "#setupDragEventHandlers",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "control",
-                  "type": {
-                    "text": "HTMLDivElement"
-                  }
-                }
-              ],
-              "description": "Sets up drag event handlers for enhanced visual feedback",
-              "privacy": "private"
-            },
-            {
-              "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"
                   }
                 }
               ]
@@ -14817,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",
@@ -14898,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",
@@ -15127,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"
             }
           ],
@@ -15138,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"
             },
             {
@@ -15146,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"
             },
             {
@@ -15155,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"
             },
             {
@@ -15753,6 +16017,19 @@
           "vividComponent": {
             "public": true,
             "name": "icon"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "name",
+                "args": [
+                  "name"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -16477,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": []
           }
         }
       ],
@@ -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",
@@ -19606,6 +20151,13 @@
               },
               "fieldName": "_text"
             },
+            {
+              "name": "text-secondary",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "textSecondary"
+            },
             {
               "name": "matched-text",
               "type": {
@@ -19665,6 +20217,20 @@
           "vividComponent": {
             "public": true,
             "name": "option"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "#locator"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -19976,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -21681,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -22985,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"
+                ]
               }
             ]
           }
@@ -24632,9 +25375,15 @@
             "selectors": [],
             "actions": [
               {
-                "name": "toggleOptionsByValue",
+                "name": "selectOptionByValue",
+                "args": [
+                  "selectOptionByValue"
+                ]
+              },
+              {
+                "name": "selectOptionByText",
                 "args": [
-                  "toggleOptionsByValue"
+                  "selectOptionByText"
                 ]
               }
             ],
@@ -24644,6 +25393,12 @@
                 "args": [
                   "values"
                 ]
+              },
+              {
+                "name": "selectedOptions",
+                "args": [
+                  "selectedOptionsText"
+                ]
               }
             ],
             "refs": []
@@ -25584,6 +26339,12 @@
           "vividTesting": {
             "selectors": [],
             "actions": [
+              {
+                "name": "selectOptionByValue",
+                "args": [
+                  "selectOptionByValue"
+                ]
+              },
               {
                 "name": "selectOptionByText",
                 "args": [
@@ -25873,6 +26634,51 @@
           "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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -26109,6 +26915,551 @@
         }
       ]
     },
+    {
+      "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": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the popup is open",
+              "fieldName": "open"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "Placement | undefined"
+              },
+              "default": "'top-start'",
+              "description": "Placement of the popup with color swatches",
+              "fieldName": "placement"
+            },
+            {
+              "name": "swatches-per-row",
+              "type": {
+                "text": "number"
+              },
+              "default": "7",
+              "description": "Number of swatches per row for grid layout",
+              "fieldName": "swatchesPerRow"
+            },
+            {
+              "name": "anchor",
+              "type": {
+                "text": "AnchorType | undefined"
+              },
+              "description": "ID or direct reference to the component's anchor element.",
+              "fieldName": "anchor",
+              "inheritedFrom": {
+                "name": "Anchored",
+                "module": "src/shared/patterns/anchored.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label for the form element.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormElement",
+                "module": "src/shared/patterns/form-elements/form-element.ts"
+              }
+            },
+            {
+              "name": "current-value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current value of the element.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "name": "value",
+              "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.",
+              "fieldName": "initialValue",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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"
+              }
+            },
+            {
+              "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": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Require the field to be completed prior to form submission.",
+              "default": "false",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/shared/foundation/form-associated/form-associated.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Localized",
+              "module": "/src/shared/patterns"
+            },
+            {
+              "name": "Anchored",
+              "module": "/src/shared/patterns/anchored"
+            },
+            {
+              "name": "FormElement",
+              "module": "/src/shared/patterns"
+            },
+            {
+              "name": "FormAssociated",
+              "module": "/src/shared/foundation/form-associated/form-associated"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "simple-color-picker",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "propName": "value",
+                "eventNames": [
+                  "input"
+                ],
+                "valueMapping": "event.currentTarget.value"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SimpleColorPicker",
+          "declaration": {
+            "name": "SimpleColorPicker",
+            "module": "src/lib/simple-color-picker/simple-color-picker.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/lib/slider/definition.ts",
@@ -26855,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"
+                ]
               }
             ]
           }
@@ -27262,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",
@@ -27433,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -28043,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -28421,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -28653,6 +30220,10 @@
               "description": "The orientation",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "#areSlotsSynced"
+            },
             {
               "kind": "field",
               "name": "_pairedTabs",
@@ -29472,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -30468,6 +32125,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -30522,7 +32183,14 @@
                 "name": "fill",
                 "args": [
                   "fill",
-                  "control"
+                  "#control"
+                ]
+              },
+              {
+                "name": "clear",
+                "args": [
+                  "clear",
+                  "#control"
                 ]
               }
             ],
@@ -31443,6 +33111,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+            },
             {
               "name": "WithLightDOMFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -31501,7 +33173,21 @@
                 "name": "fill",
                 "args": [
                   "fill",
-                  "control"
+                  "#control"
+                ]
+              },
+              {
+                "name": "clear",
+                "args": [
+                  "clear",
+                  "#control"
+                ]
+              },
+              {
+                "name": "blur",
+                "args": [
+                  "blur",
+                  "#control"
                 ]
               }
             ],
@@ -31511,8 +33197,7 @@
                 "name": "control",
                 "args": [
                   "light",
-                  "input[slot=\"_control\"]",
-                  "HTMLInputElement"
+                  "input[slot=\"_control\"]"
                 ]
               }
             ]
@@ -32318,6 +34003,19 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectTime",
+                "args": [
+                  "selectTime"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -32676,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": []
           }
         }
       ],
@@ -32956,7 +34682,15 @@
               {
                 "name": "open",
                 "args": [
-                  "open"
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
                 ]
               }
             ],
@@ -34018,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",
@@ -36307,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"
                 ]
               }
             ],
@@ -36369,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",
@@ -37051,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",
@@ -38592,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"
+                ]
+              }
+            ]
           }
         }
       ],