@vonage/vivid 4.5.0 → 4.6.0

package/custom-elements.json

@@ -8241,6 +8241,16 @@
               "description": "indicates whether the menu will automatically close when focus moves away from it.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "positionStrategy",
+              "type": {
+                "text": "Strategy | undefined"
+              },
+              "default": "'fixed'",
+              "description": "The strategy-absolute attribute.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -8385,6 +8395,15 @@
               "description": "indicates whether the menu will automatically close when focus moves away from it.",
               "fieldName": "autoDismiss"
             },
+            {
+              "name": "position-strategy",
+              "type": {
+                "text": "Strategy | undefined"
+              },
+              "default": "'fixed'",
+              "description": "The strategy-absolute attribute.",
+              "fieldName": "positionStrategy"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -9758,6 +9777,15 @@
               "description": "Sets the width of the element to a specified number of characters.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "scale",
+              "type": {
+                "text": "NumberFieldSize | undefined"
+              },
+              "description": "The size the number-field should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "step",
@@ -10004,6 +10032,14 @@
               "description": "Sets the width of the element to a specified number of characters.",
               "fieldName": "size"
             },
+            {
+              "name": "scale",
+              "type": {
+                "text": "NumberFieldSize | undefined"
+              },
+              "description": "The size the number-field should have.",
+              "fieldName": "scale"
+            },
             {
               "type": {
                 "text": "number"
@@ -11889,17 +11925,20 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/select/definition.ts",
+      "path": "libs/components/src/lib/searchable-select/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "selectDefinition",
-          "description": "The select element."
+          "name": "optionTagDefinition"
         },
         {
           "kind": "variable",
-          "name": "registerSelect",
-          "description": "Registers the select elements with the design system.",
+          "name": "searchableSelectDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerSearchableSelect",
+          "description": "Registers the searchable-select element with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -11911,316 +11950,1100 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SelectAppearance",
-          "declaration": {
-            "name": "SelectAppearance",
-            "module": "./select"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SelectShape",
+          "name": "optionTagDefinition",
           "declaration": {
-            "name": "SelectShape",
-            "module": "./select"
+            "name": "optionTagDefinition",
+            "module": "libs/components/src/lib/searchable-select/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "selectDefinition",
+          "name": "searchableSelectDefinition",
           "declaration": {
-            "name": "selectDefinition",
-            "module": "libs/components/src/lib/select/definition.ts"
+            "name": "searchableSelectDefinition",
+            "module": "libs/components/src/lib/searchable-select/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerSelect",
+          "name": "registerSearchableSelect",
           "declaration": {
-            "name": "registerSelect",
-            "module": "libs/components/src/lib/select/definition.ts"
+            "name": "registerSearchableSelect",
+            "module": "libs/components/src/lib/searchable-select/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/select/select.ts",
+      "path": "libs/components/src/lib/searchable-select/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/searchable-select/option-tag.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Select",
+          "name": "OptionTag",
           "cssProperties": [
             {
-              "name": "--vvd-select-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-select-accent-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-select-accent-primary-increment",
+              "name": "--vvd-option-tag-accent-contrast",
               "default": "var(--vvd-color-neutral-800)"
             },
             {
-              "name": "--vvd-select-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
-            },
-            {
-              "name": "--vvd-select-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
-            },
-            {
-              "name": "--vvd-select-accent-soft",
+              "name": "--vvd-option-tag-accent-soft",
               "default": "var(--vvd-color-neutral-100)"
             },
             {
-              "name": "--vvd-select-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "name": "--vvd-option-tag-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
             },
             {
-              "name": "--vvd-select-accent-fierce",
+              "name": "--vvd-option-tag-accent-fierce",
               "default": "var(--vvd-color-neutral-700)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot.",
-              "name": ""
             },
             {
-              "description": "Slot to add an icon to the select control.",
-              "name": "icon"
+              "name": "--vvd-option-tag-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
             },
             {
-              "description": "Slot to add meta content to the select control.",
-              "name": "meta"
+              "name": "--vvd-option-tag-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
             },
             {
-              "description": "Describes how to use the select. Alternative to the `helper-text` attribute.",
-              "name": "helper-text"
+              "name": "--vvd-option-tag-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "appearance",
+              "name": "shape",
               "type": {
-                "text": "SelectAppearance | undefined"
-              },
-              "description": "The appearance attribute.",
-              "privacy": "public"
+                "text": "OptionTagShape | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "shape",
+              "name": "label",
               "type": {
-                "text": "SelectShape | undefined"
-              },
-              "description": "The shape attribute.",
-              "privacy": "public"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "fixedDropdown",
+              "name": "removable",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "The fixed-dropdown attribute.",
-              "privacy": "public"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The placeholder attribute.",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "labelChanged"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "displayValue",
+              "name": "hasIconPlaceholder",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "setDefaultSelectedOption",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "slottedOptionsChanged",
-              "parameters": [
-                {
-                  "name": "prev",
-                  "type": {
-                    "text": "Element[] | undefined"
-                  }
-                },
-                {
-                  "name": "next",
-                  "type": {
-                    "text": "Element[]"
-                  }
-                }
-              ]
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "formResetCallback"
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Fires a custom 'input' event when the value updates",
-              "name": "input"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<HTMLElement>"
-              },
-              "description": "Fires a custom 'change' event when the value updates",
-              "name": "change"
+              "name": "_onClickRemove"
             }
           ],
           "attributes": [
             {
-              "name": "appearance",
+              "name": "shape",
               "type": {
-                "text": "SelectAppearance | undefined"
+                "text": "OptionTagShape | undefined"
               },
-              "description": "The appearance attribute.",
-              "fieldName": "appearance"
+              "fieldName": "shape"
             },
             {
-              "name": "shape",
+              "name": "label",
               "type": {
-                "text": "SelectShape | undefined"
+                "text": "string | undefined"
               },
-              "description": "The shape attribute.",
-              "fieldName": "shape"
+              "fieldName": "label"
             },
             {
-              "name": "fixed-dropdown",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The fixed-dropdown attribute.",
-              "fieldName": "fixedDropdown"
+              "fieldName": "removable"
             },
             {
-              "name": "placeholder",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The placeholder attribute.",
-              "fieldName": "placeholder"
+              "default": "false",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
-            "name": "FoundationSelect",
+            "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
-          },
-          "vividComponent": {
-            "public": true,
-            "name": "select",
-            "vueModels": [
-              {
-                "name": "modelValue",
-                "attributeName": "value",
-                "eventNames": [
-                  "input"
-                ],
-                "valueMapping": "(event.target as HTMLInputElement).value"
-              }
-            ]
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Select",
+          "name": "OptionTag",
           "declaration": {
-            "name": "Select",
-            "module": "libs/components/src/lib/select/select.ts"
+            "name": "OptionTag",
+            "module": "libs/components/src/lib/searchable-select/option-tag.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/selectable-box/definition.ts",
+      "path": "libs/components/src/lib/searchable-select/searchable-select.form-associated.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "selectableBoxDefinition"
-        },
-        {
-          "kind": "variable",
-          "name": "registerSelectableBox",
-          "description": "Registers the selectable-box element with the design system.",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedSearchableSelect",
+          "members": [
             {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
+              "kind": "field",
+              "name": "proxy"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "package": "@microsoft/fast-foundation"
+            }
+          ],
+          "superclass": {
+            "name": "_SearchableSelect",
+            "module": "libs/components/src/lib/searchable-select/searchable-select.form-associated.ts"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "selectableBoxDefinition",
-          "declaration": {
-            "name": "selectableBoxDefinition",
-            "module": "libs/components/src/lib/selectable-box/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerSelectableBox",
+          "name": "FormAssociatedSearchableSelect",
           "declaration": {
-            "name": "registerSelectableBox",
-            "module": "libs/components/src/lib/selectable-box/definition.ts"
+            "name": "FormAssociatedSearchableSelect",
+            "module": "libs/components/src/lib/searchable-select/searchable-select.form-associated.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/selectable-box/selectable-box.ts",
+      "path": "libs/components/src/lib/searchable-select/searchable-select.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SelectableBox",
+          "name": "SearchableSelect",
           "cssProperties": [
             {
-              "name": "--vvd-selectable-box-cta-firm-all",
-              "default": "var(--vvd-color-cta-600)"
+              "name": "--vvd-searchable-select-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "name": "--vvd-selectable-box-cta-pale",
+              "name": "--vvd-searchable-select-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-searchable-select-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-searchable-select-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-searchable-select-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-searchable-select-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-searchable-select-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-searchable-select-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Holds the available options.",
+              "name": ""
+            },
+            {
+              "description": "Slot to add an icon to the control.",
+              "name": "icon"
+            },
+            {
+              "description": "Slot to add meta content to the control.",
+              "name": "meta"
+            },
+            {
+              "description": "Describes how to use the component. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            },
+            {
+              "description": "Message that appears when no options are available.",
+              "name": "no-options"
+            },
+            {
+              "description": "Message that appears when no options match the search query.",
+              "name": "no-matches"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SearchableSelectAppearance | undefined"
+              },
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SearchableSelectShape | undefined"
+              },
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "fixedDropdown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "externalTags",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "maxLines",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null",
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "values",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "List of selected values."
+            },
+            {
+              "kind": "method",
+              "name": "#updateValuesThroughUserInteraction",
+              "parameters": [
+                {
+                  "name": "newValues",
+                  "type": {
+                    "text": "string[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateValuesWhileMaintainingOrder",
+              "parameters": [
+                {
+                  "name": "newValues",
+                  "type": {
+                    "text": "string[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "initialValues",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The initial values. This value sets the `values` property\nonly when the `values` property has not been explicitly set."
+            },
+            {
+              "kind": "method",
+              "name": "#isValidValue",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "selectedIndex"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "selectedOptions",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#slottedOptionsChangeHandler",
+              "privacy": "private",
+              "type": {
+                "text": "object"
+              },
+              "default": "{\n\t\thandleChange: (source: ListboxOption, _: string) => {\n\t\t\tif (source.selected && !this.values.includes(source.value)) {\n\t\t\t\tthis.values = [...this.values, source.value];\n\t\t\t} else if (!source.selected && this.values.includes(source.value)) {\n\t\t\t\tthis.values = this.values.filter((option) => option !== source.value);\n\t\t\t}\n\t\t},\n\t}"
+            },
+            {
+              "kind": "method",
+              "name": "#updateSelectedOnSlottedOptions"
+            },
+            {
+              "kind": "method",
+              "name": "#handleOptionInteraction",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "ListboxOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "#clonedTagIcons",
+              "privacy": "private",
+              "default": "new Map<ListboxOption, HTMLElement>()"
+            },
+            {
+              "kind": "method",
+              "name": "#tagIconOfOption",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "ListboxOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateClonedTagIconOfOption",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "ListboxOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "#suppressFilter",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#updateFilteredOptions"
+            },
+            {
+              "kind": "method",
+              "name": "#transitionHighlightedOptionTo",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#selectHighlightedOption"
+            },
+            {
+              "kind": "method",
+              "name": "#highlightFirstOption"
+            },
+            {
+              "kind": "method",
+              "name": "#highlightLastOption"
+            },
+            {
+              "kind": "method",
+              "name": "#highlightPrevPage"
+            },
+            {
+              "kind": "method",
+              "name": "#highlightNextPage"
+            },
+            {
+              "kind": "method",
+              "name": "#highlightPreviousOption"
+            },
+            {
+              "kind": "method",
+              "name": "#highlightNextOption"
+            },
+            {
+              "kind": "method",
+              "name": "#textForValue",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateTagLayout"
+            },
+            {
+              "kind": "method",
+              "name": "#moveTagFocusTo",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#nextTagIndexLeft",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#nextTagIndexRight",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#nextTagIndexForRemoved",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button to the input field that clears the selected values.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "#determineInitialValues"
+            },
+            {
+              "kind": "method",
+              "name": "#updateFormValue"
+            },
+            {
+              "kind": "field",
+              "name": "setFormValue"
+            },
+            {
+              "kind": "field",
+              "name": "#resizeObserver",
+              "privacy": "private",
+              "default": "new ResizeObserver(() => {\n\t\tthis.#updateTagLayout();\n\t})"
+            },
+            {
+              "kind": "field",
+              "name": "proxy",
+              "inheritedFrom": {
+                "name": "FormAssociatedSearchableSelect",
+                "module": "libs/components/src/lib/searchable-select/searchable-select.form-associated.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the selected options change",
+              "name": "input"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the selected options change",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "appearance",
+              "type": {
+                "text": "SearchableSelectAppearance | undefined"
+              },
+              "fieldName": "appearance"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "SearchableSelectShape | undefined"
+              },
+              "fieldName": "shape"
+            },
+            {
+              "name": "fixed-dropdown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fixedDropdown"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "external-tags",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "externalTags"
+            },
+            {
+              "name": "max-lines",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null",
+              "fieldName": "maxLines"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button to the input field that clears the selected values.",
+              "fieldName": "clearable"
+            }
+          ],
+          "superclass": {
+            "name": "FormAssociatedSearchableSelect",
+            "module": "/libs/components/src/lib/searchable-select/searchable-select.form-associated"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "searchable-select",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "value",
+                "eventNames": [
+                  "input"
+                ],
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              },
+              {
+                "name": "values",
+                "attributeName": "values",
+                "eventNames": [
+                  "input"
+                ],
+                "valueMapping": "(event.target as any).values"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SearchableSelect",
+          "declaration": {
+            "name": "SearchableSelect",
+            "module": "libs/components/src/lib/searchable-select/searchable-select.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/select/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "selectDefinition",
+          "description": "The select element."
+        },
+        {
+          "kind": "variable",
+          "name": "registerSelect",
+          "description": "Registers the select elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SelectAppearance",
+          "declaration": {
+            "name": "SelectAppearance",
+            "module": "./select"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectShape",
+          "declaration": {
+            "name": "SelectShape",
+            "module": "./select"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "selectDefinition",
+          "declaration": {
+            "name": "selectDefinition",
+            "module": "libs/components/src/lib/select/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerSelect",
+          "declaration": {
+            "name": "registerSelect",
+            "module": "libs/components/src/lib/select/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/select/select.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Select",
+          "cssProperties": [
+            {
+              "name": "--vvd-select-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-select-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-select-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-select-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-select-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-select-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-select-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-select-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            },
+            {
+              "description": "Slot to add an icon to the select control.",
+              "name": "icon"
+            },
+            {
+              "description": "Slot to add meta content to the select control.",
+              "name": "meta"
+            },
+            {
+              "description": "Describes how to use the select. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "scale",
+              "type": {
+                "text": "SelectSize | undefined"
+              },
+              "description": "The size the select should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SelectAppearance | undefined"
+              },
+              "description": "The appearance attribute.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SelectShape | undefined"
+              },
+              "description": "The shape attribute.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "fixedDropdown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The fixed-dropdown attribute.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The placeholder attribute.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "labelChanged"
+            },
+            {
+              "kind": "field",
+              "name": "displayValue",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "setDefaultSelectedOption",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "slottedOptionsChanged",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "Element[] | undefined"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "Element[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fires a custom 'input' event when the value updates",
+              "name": "input"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<HTMLElement>"
+              },
+              "description": "Fires a custom 'change' event when the value updates",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "scale",
+              "type": {
+                "text": "SelectSize | undefined"
+              },
+              "description": "The size the select should have.",
+              "fieldName": "scale"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "SelectAppearance | undefined"
+              },
+              "description": "The appearance attribute.",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "SelectShape | undefined"
+              },
+              "description": "The shape attribute.",
+              "fieldName": "shape"
+            },
+            {
+              "name": "fixed-dropdown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The fixed-dropdown attribute.",
+              "fieldName": "fixedDropdown"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The placeholder attribute.",
+              "fieldName": "placeholder"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationSelect",
+            "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "select",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "value",
+                "eventNames": [
+                  "input"
+                ],
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Select",
+          "declaration": {
+            "name": "Select",
+            "module": "libs/components/src/lib/select/select.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/selectable-box/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "selectableBoxDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerSelectableBox",
+          "description": "Registers the selectable-box element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "selectableBoxDefinition",
+          "declaration": {
+            "name": "selectableBoxDefinition",
+            "module": "libs/components/src/lib/selectable-box/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerSelectableBox",
+          "declaration": {
+            "name": "registerSelectableBox",
+            "module": "libs/components/src/lib/selectable-box/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/selectable-box/selectable-box.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SelectableBox",
+          "cssProperties": [
+            {
+              "name": "--vvd-selectable-box-cta-firm-all",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-selectable-box-cta-pale",
               "default": "var(--vvd-color-cta-300)"
             },
             {
@@ -13674,6 +14497,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/tab/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/tab/tab.ts",
@@ -13766,6 +14595,16 @@
               "description": "Indicates the tab's label.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates the tab's label.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "tabIndex",
@@ -13781,6 +14620,30 @@
                 "text": "string | null"
               },
               "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "_handleCloseClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyDown",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [
@@ -13808,6 +14671,14 @@
               "description": "Indicates the tab's label.",
               "fieldName": "label"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates the tab's label.",
+              "fieldName": "removable"
+            },
             {
               "type": {
                 "text": "number"
@@ -14199,6 +15070,14 @@
           "name": "tagDefinition",
           "description": "Represents a tag custom element.\ntag is a label that holds small amounts of information.\nA tag can be used to display unread notifications, or to label a block of text."
         },
+        {
+          "kind": "variable",
+          "name": "tagRegistries",
+          "type": {
+            "text": "array"
+          },
+          "default": "[tagDefinition(), ...iconRegistries]"
+        },
         {
           "kind": "variable",
           "name": "registerTag",
@@ -14244,6 +15123,14 @@
             "module": "libs/components/src/lib/tag/definition.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "tagRegistries",
+          "declaration": {
+            "name": "tagRegistries",
+            "module": "libs/components/src/lib/tag/definition.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "registerTag",
@@ -15144,6 +16031,15 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "scale",
+              "type": {
+                "text": "TextFieldSize | undefined"
+              },
+              "description": "The size the text-field should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "leadingActionItemsSlottedContent",
@@ -15230,6 +16126,14 @@
                 "text": "string | undefined"
               },
               "fieldName": "autoComplete"
+            },
+            {
+              "name": "scale",
+              "type": {
+                "text": "TextFieldSize | undefined"
+              },
+              "description": "The size the text-field should have.",
+              "fieldName": "scale"
             }
           ],
           "superclass": {