@vscode-elements/elements 1.13.2-pre.1 → 1.14.1-pre.0

package/custom-elements.json

@@ -4,19 +4,78 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/includes/AssociatedFormControl.ts",
-      "declarations": [],
-      "exports": []
+      "path": "src/vscode-badge/vscode-badge.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-badge-background, #616161); border: 1px solid var(--vscode-contrastBorder, transparent); border-radius: 2px; box-sizing: border-box; color: var(--vscode-badge-foreground, #f8f8f8); display: inline-block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: 11px; font-weight: 400; line-height: 14px; min-width: 18px; padding: 2px 3px; text-align: center; white-space: nowrap; } :host([variant='counter']) { border-radius: 11px; line-height: 11px; min-height: 18px; min-width: 18px; padding: 3px 6px; } :host([variant='activity-bar-counter']) { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 20px; color: var(--vscode-activityBarBadge-foreground, #ffffff); font-size: 9px; font-weight: 600; line-height: 16px; padding: 0 4px; } :host([variant='tab-header-counter']) { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 10px; color: var(--vscode-activityBarBadge-foreground, #ffffff); line-height: 10px; min-height: 16px; min-width: 16px; padding: 3px 5px; } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "styles",
+            "module": "src/vscode-badge/vscode-badge.styles.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/includes/VscElement.ts",
+      "path": "src/vscode-badge/vscode-badge.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "VscElement",
+          "description": "Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.",
+          "name": "VscodeBadge",
+          "cssProperties": [
+            {
+              "description": "A sans-serif font type depends on the host OS.",
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
+            },
+            {
+              "name": "--vscode-contrastBorder",
+              "default": "transparent"
+            },
+            {
+              "description": "default and counter variant background color",
+              "name": "--vscode-badge-background",
+              "default": "#616161"
+            },
+            {
+              "description": "default and counter variant foreground color",
+              "name": "--vscode-badge-foreground",
+              "default": "#f8f8f8"
+            },
+            {
+              "description": "activity bar variant background color",
+              "name": "--vscode-activityBarBadge-background",
+              "default": "#0078d4"
+            },
+            {
+              "description": "activity bar variant foreground color",
+              "name": "--vscode-activityBarBadge-foreground",
+              "default": "#ffffff"
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "| 'default'\n    | 'counter'\n    | 'activity-bar-counter'\n    | 'tab-header-counter'"
+              },
+              "default": "'default'",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "version",
@@ -24,601 +83,228 @@
                 "text": "string"
               },
               "description": "VSCode Elements version",
-              "readonly": true
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        },
-        {
-          "kind": "function",
-          "name": "customElement",
-          "parameters": [
+          "attributes": [
             {
-              "name": "tagName",
+              "name": "variant",
               "type": {
-                "text": "string"
-              }
+                "text": "| 'default'\n    | 'counter'\n    | 'activity-bar-counter'\n    | 'tab-header-counter'"
+              },
+              "default": "'default'",
+              "fieldName": "variant"
             }
           ],
-          "description": "Own implementation of Lit's customElement decorator."
+          "superclass": {
+            "name": "VscElement",
+            "module": "/src/includes/VscElement.js"
+          },
+          "tagName": "vscode-badge",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscElement",
-          "declaration": {
-            "name": "VscElement",
-            "module": "src/includes/VscElement.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "customElement",
+          "name": "VscodeBadge",
           "declaration": {
-            "name": "customElement",
-            "module": "src/includes/VscElement.ts"
+            "name": "VscodeBadge",
+            "module": "src/vscode-badge/vscode-badge.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "tagName",
-          "declaration": {
-            "name": "anonymous_0",
-            "module": "src/includes/VscElement.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/includes/default.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "vscode-badge",
           "declaration": {
-            "module": "src/includes/default.styles.ts"
+            "name": "VscodeBadge",
+            "module": "src/vscode-badge/vscode-badge.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/includes/helpers.ts",
+      "path": "src/vscode-button/vscode-button.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "INPUT_LINE_HEIGHT_RATIO"
-        },
-        {
-          "kind": "variable",
-          "name": "DEFUALT_INPUT_WIDGET_WIDTH",
+          "name": "styles",
           "type": {
-            "text": "number"
+            "text": "CSSResultGroup"
           },
-          "default": "320"
-        },
-        {
-          "kind": "function",
-          "name": "getDefaultFontStack"
-        },
-        {
-          "kind": "function",
-          "name": "getDefaultEditorFontStack"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "INPUT_LINE_HEIGHT_RATIO",
-          "declaration": {
-            "name": "INPUT_LINE_HEIGHT_RATIO",
-            "module": "src/includes/helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DEFUALT_INPUT_WIDGET_WIDTH",
-          "declaration": {
-            "name": "DEFUALT_INPUT_WIDGET_WIDTH",
-            "module": "src/includes/helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getDefaultFontStack",
-          "declaration": {
-            "name": "getDefaultFontStack",
-            "module": "src/includes/helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getDefaultEditorFontStack",
-          "declaration": {
-            "name": "getDefaultEditorFontStack",
-            "module": "src/includes/helpers.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/includes/style-property-map.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "stylePropertyMap",
-          "description": "Implement a Lit directive similar to styleMap, but instead of setting styles via the style\nattribute (which violates CSP), it should apply styles using the style property.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)"
+          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-button-background, #0078d4); border-color: var(--vscode-button-border, transparent); border-style: solid; border-radius: 2px; border-width: 1px; color: var(--vscode-button-foreground, #ffffff); cursor: pointer; display: inline-block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); line-height: 22px; overflow: hidden; padding: 1px 13px; user-select: none; white-space: nowrap; } :host([secondary]) { color: var(--vscode-button-secondaryForeground, #cccccc); background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var( --vscode-button-border, var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07)) ); } :host([disabled]) { cursor: default; opacity: 0.4; pointer-events: none; } :host(:hover) { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(vscode-icon) { color: inherit; } .wrapper { align-items: center; box-sizing: border-box; display: flex; justify-content: center; position: relative; width: 100%; } slot { align-items: center; display: flex; height: 100%; } .icon { color: inherit; display: block; margin-right: 3px; } .icon-after { color: inherit; display: block; margin-left: 3px; } `, ]"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "stylePropertyMap",
+          "name": "default",
           "declaration": {
-            "name": "stylePropertyMap",
-            "module": "src/includes/style-property-map.ts"
+            "name": "styles",
+            "module": "src/vscode-button/vscode-button.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/includes/test-helpers.ts",
+      "path": "src/vscode-button/vscode-button.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "clickOnElement",
-          "parameters": [
+          "kind": "class",
+          "description": "Clickable element that are used to trigger actions.",
+          "name": "VscodeButton",
+          "cssProperties": [
             {
-              "name": "el",
-              "type": {
-                "text": "Element"
-              }
+              "name": "--vscode-button-background",
+              "default": "#0078d4"
             },
             {
-              "name": "position",
-              "default": "'center'",
-              "type": {
-                "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
-              }
+              "name": "--vscode-button-foreground",
+              "default": "#ffffff"
             },
             {
-              "name": "offsetX",
-              "default": "0"
+              "name": "--vscode-button-border",
+              "default": "var(--vscode-button-background, rgba(255, 255, 255, 0.07))"
             },
             {
-              "name": "offsetY",
-              "default": "0"
-            }
-          ],
-          "description": "A testing utility that measures an element's position and clicks on it."
-        },
-        {
-          "kind": "function",
-          "name": "moveMouseOnElement",
-          "parameters": [
+              "name": "--vscode-button-hoverBackground",
+              "default": "#026ec1"
+            },
             {
-              "name": "el",
-              "type": {
-                "text": "Element"
-              }
+              "description": "A sans-serif font type depends on the host OS.",
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
             },
             {
-              "name": "position",
-              "default": "'center'",
-              "type": {
-                "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
-              }
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "name": "offsetX",
-              "default": "0"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "name": "offsetY",
-              "default": "0"
-            }
-          ],
-          "description": "A testing utility that moves the mouse onto an element."
-        },
-        {
-          "kind": "function",
-          "name": "dragElement",
-          "return": {
-            "type": {
-              "text": "Promise<void>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "el",
-              "type": {
-                "text": "Element"
-              }
+              "name": "--vscode-button-secondaryForeground",
+              "default": "#cccccc"
             },
             {
-              "name": "deltaX",
-              "default": "0"
+              "name": "--vscode-button-secondaryBackground",
+              "default": "#313131"
             },
             {
-              "name": "deltaY",
-              "default": "0"
+              "name": "--vscode-button-secondaryHoverBackground",
+              "default": "#3c3c3c"
             },
             {
-              "name": "callbacks",
-              "default": "{}",
-              "type": {
-                "text": "{\n    afterMouseDown?: () => void | Promise<void>;\n    afterMouseMove?: () => void | Promise<void>;\n  }"
-              }
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
             }
           ],
-          "description": "A testing utility that drags an element with the mouse."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "clickOnElement",
-          "declaration": {
-            "name": "clickOnElement",
-            "module": "src/includes/test-helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "moveMouseOnElement",
-          "declaration": {
-            "name": "moveMouseOnElement",
-            "module": "src/includes/test-helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "dragElement",
-          "declaration": {
-            "name": "dragElement",
-            "module": "src/includes/test-helpers.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/includes/uniqueId.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "uniqueId",
-          "parameters": [
+          "members": [
             {
-              "name": "prefix",
-              "default": "''"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "uniqueId",
-            "module": "src/includes/uniqueId.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-badge/vscode-badge.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "type": {
-            "text": "CSSResultGroup"
-          },
-          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-badge-background, #616161); border: 1px solid var(--vscode-contrastBorder, transparent); border-radius: 2px; box-sizing: border-box; color: var(--vscode-badge-foreground, #f8f8f8); display: inline-block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: 11px; font-weight: 400; line-height: 14px; min-width: 18px; padding: 2px 3px; text-align: center; white-space: nowrap; } :host([variant='counter']) { border-radius: 11px; line-height: 11px; min-height: 18px; min-width: 18px; padding: 3px 6px; } :host([variant='activity-bar-counter']) { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 20px; color: var(--vscode-activityBarBadge-foreground, #ffffff); font-size: 9px; font-weight: 600; line-height: 16px; padding: 0 4px; } :host([variant='tab-header-counter']) { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 10px; color: var(--vscode-activityBarBadge-foreground, #ffffff); line-height: 10px; min-height: 16px; min-width: 16px; padding: 3px 5px; } `, ]"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "styles",
-            "module": "src/vscode-badge/vscode-badge.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-badge/vscode-badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.",
-          "name": "VscodeBadge",
-          "cssProperties": [
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "autofocus",
+              "reflects": true
+            },
             {
-              "description": "A sans-serif font type depends on the host OS.",
-              "name": "--vscode-font-family",
-              "default": "sans-serif"
+              "kind": "field",
+              "name": "secondary",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Button has a less prominent style.",
+              "attribute": "secondary",
+              "reflects": true
             },
             {
-              "name": "--vscode-contrastBorder",
-              "default": "transparent"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "description": "default and counter variant background color",
-              "name": "--vscode-badge-background",
-              "default": "#616161"
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
+              "attribute": "icon"
             },
             {
-              "description": "default and counter variant foreground color",
-              "name": "--vscode-badge-foreground",
-              "default": "#f8f8f8"
+              "kind": "field",
+              "name": "iconSpin",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Spin property for the icon",
+              "attribute": "icon-spin",
+              "reflects": true
             },
             {
-              "description": "activity bar variant background color",
-              "name": "--vscode-activityBarBadge-background",
-              "default": "#0078d4"
+              "kind": "field",
+              "name": "iconSpinDuration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Duration property for the icon",
+              "attribute": "icon-spin-duration",
+              "reflects": true
             },
             {
-              "description": "activity bar variant foreground color",
-              "name": "--vscode-activityBarBadge-foreground",
-              "default": "#ffffff"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "iconAfter",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
+              "attribute": "icon-after"
+            },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "iconAfterSpin",
               "type": {
-                "text": "| 'default'\n    | 'counter'\n    | 'activity-bar-counter'\n    | 'tab-header-counter'"
+                "text": "boolean"
               },
-              "default": "'default'",
-              "attribute": "variant",
+              "default": "false",
+              "description": "Spin property for the after icon",
+              "attribute": "icon-after-spin",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "version",
+              "name": "iconAfterSpinDuration",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "description": "VSCode Elements version",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "description": "Duration property for the after icon",
+              "attribute": "icon-after-spin-duration",
+              "reflects": true
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "focused",
               "type": {
-                "text": "| 'default'\n    | 'counter'\n    | 'activity-bar-counter'\n    | 'tab-header-counter'"
-              },
-              "default": "'default'",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "VscElement",
-            "module": "/src/includes/VscElement.js"
-          },
-          "tagName": "vscode-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "VscodeBadge",
-          "declaration": {
-            "name": "VscodeBadge",
-            "module": "src/vscode-badge/vscode-badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "vscode-badge",
-          "declaration": {
-            "name": "VscodeBadge",
-            "module": "src/vscode-badge/vscode-badge.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-button/vscode-button.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "type": {
-            "text": "CSSResultGroup"
-          },
-          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-button-background, #0078d4); border-color: var(--vscode-button-border, transparent); border-style: solid; border-radius: 2px; border-width: 1px; color: var(--vscode-button-foreground, #ffffff); cursor: pointer; display: inline-block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); line-height: 22px; overflow: hidden; padding: 1px 13px; user-select: none; white-space: nowrap; } :host([secondary]) { color: var(--vscode-button-secondaryForeground, #cccccc); background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var( --vscode-button-border, var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07)) ); } :host([disabled]) { cursor: default; opacity: 0.4; pointer-events: none; } :host(:hover) { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(vscode-icon) { color: inherit; } .wrapper { align-items: center; box-sizing: border-box; display: flex; justify-content: center; position: relative; width: 100%; } slot { align-items: center; display: flex; height: 100%; } .icon { color: inherit; display: block; margin-right: 3px; } .icon-after { color: inherit; display: block; margin-left: 3px; } `, ]"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "styles",
-            "module": "src/vscode-button/vscode-button.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-button/vscode-button.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Clickable element that are used to trigger actions.",
-          "name": "VscodeButton",
-          "cssProperties": [
-            {
-              "name": "--vscode-button-background",
-              "default": "#0078d4"
-            },
-            {
-              "name": "--vscode-button-foreground",
-              "default": "#ffffff"
-            },
-            {
-              "name": "--vscode-button-border",
-              "default": "var(--vscode-button-background, rgba(255, 255, 255, 0.07))"
-            },
-            {
-              "name": "--vscode-button-hoverBackground",
-              "default": "#026ec1"
-            },
-            {
-              "description": "A sans-serif font type depends on the host OS.",
-              "name": "--vscode-font-family",
-              "default": "sans-serif"
-            },
-            {
-              "name": "--vscode-font-size",
-              "default": "13px"
-            },
-            {
-              "name": "--vscode-font-weight",
-              "default": "normal"
-            },
-            {
-              "name": "--vscode-button-secondaryForeground",
-              "default": "#cccccc"
-            },
-            {
-              "name": "--vscode-button-secondaryBackground",
-              "default": "#313131"
-            },
-            {
-              "name": "--vscode-button-secondaryHoverBackground",
-              "default": "#3c3c3c"
-            },
-            {
-              "name": "--vscode-focusBorder",
-              "default": "#0078d4"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "autofocus",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "secondary",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Button has a less prominent style.",
-              "attribute": "secondary",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
-              "attribute": "icon"
-            },
-            {
-              "kind": "field",
-              "name": "iconSpin",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Spin property for the icon",
-              "attribute": "icon-spin",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconSpinDuration",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Duration property for the icon",
-              "attribute": "icon-spin-duration",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconAfter",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
-              "attribute": "icon-after"
-            },
-            {
-              "kind": "field",
-              "name": "iconAfterSpin",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Spin property for the after icon",
-              "attribute": "icon-after-spin",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconAfterSpinDuration",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Duration property for the after icon",
-              "attribute": "icon-after-spin-duration",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "focused",
-              "type": {
-                "text": "boolean"
+                "text": "boolean"
               },
               "default": "false",
               "attribute": "focused",
@@ -796,87 +482,401 @@
               "fieldName": "iconSpinDuration"
             },
             {
-              "name": "icon-after",
+              "name": "icon-after",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
+              "fieldName": "iconAfter"
+            },
+            {
+              "name": "icon-after-spin",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Spin property for the after icon",
+              "fieldName": "iconAfterSpin"
+            },
+            {
+              "name": "icon-after-spin-duration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Duration property for the after icon",
+              "fieldName": "iconAfterSpinDuration"
+            },
+            {
+              "name": "focused",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "focused"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "fieldName": "name"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "'submit' | 'reset' | 'button'"
+              },
+              "default": "'button'",
+              "fieldName": "type"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "VscElement",
+            "module": "/src/includes/VscElement.js"
+          },
+          "tagName": "vscode-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VscodeButton",
+          "declaration": {
+            "name": "VscodeButton",
+            "module": "src/vscode-button/vscode-button.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "vscode-button",
+          "declaration": {
+            "name": "VscodeButton",
+            "module": "src/vscode-button/vscode-button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/AssociatedFormControl.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/VscElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "VscElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        },
+        {
+          "kind": "function",
+          "name": "customElement",
+          "parameters": [
+            {
+              "name": "tagName",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Own implementation of Lit's customElement decorator."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VscElement",
+          "declaration": {
+            "name": "VscElement",
+            "module": "src/includes/VscElement.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "customElement",
+          "declaration": {
+            "name": "customElement",
+            "module": "src/includes/VscElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tagName",
+          "declaration": {
+            "name": "anonymous_0",
+            "module": "src/includes/VscElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/default.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/includes/default.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/helpers.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "INPUT_LINE_HEIGHT_RATIO"
+        },
+        {
+          "kind": "variable",
+          "name": "DEFUALT_INPUT_WIDGET_WIDTH",
+          "type": {
+            "text": "number"
+          },
+          "default": "320"
+        },
+        {
+          "kind": "function",
+          "name": "getDefaultFontStack"
+        },
+        {
+          "kind": "function",
+          "name": "getDefaultEditorFontStack"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "INPUT_LINE_HEIGHT_RATIO",
+          "declaration": {
+            "name": "INPUT_LINE_HEIGHT_RATIO",
+            "module": "src/includes/helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFUALT_INPUT_WIDGET_WIDTH",
+          "declaration": {
+            "name": "DEFUALT_INPUT_WIDGET_WIDTH",
+            "module": "src/includes/helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getDefaultFontStack",
+          "declaration": {
+            "name": "getDefaultFontStack",
+            "module": "src/includes/helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getDefaultEditorFontStack",
+          "declaration": {
+            "name": "getDefaultEditorFontStack",
+            "module": "src/includes/helpers.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/style-property-map.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "stylePropertyMap",
+          "description": "Implement a Lit directive similar to styleMap, but instead of setting styles via the style\nattribute (which violates CSP), it should apply styles using the style property.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "stylePropertyMap",
+          "declaration": {
+            "name": "stylePropertyMap",
+            "module": "src/includes/style-property-map.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/test-helpers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "clickOnElement",
+          "parameters": [
+            {
+              "name": "el",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "position",
+              "default": "'center'",
+              "type": {
+                "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
+              }
+            },
+            {
+              "name": "offsetX",
+              "default": "0"
+            },
+            {
+              "name": "offsetY",
+              "default": "0"
+            }
+          ],
+          "description": "A testing utility that measures an element's position and clicks on it."
+        },
+        {
+          "kind": "function",
+          "name": "moveMouseOnElement",
+          "parameters": [
+            {
+              "name": "el",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
-              "fieldName": "iconAfter"
+                "text": "Element"
+              }
             },
             {
-              "name": "icon-after-spin",
+              "name": "position",
+              "default": "'center'",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Spin property for the after icon",
-              "fieldName": "iconAfterSpin"
+                "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
+              }
             },
             {
-              "name": "icon-after-spin-duration",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Duration property for the after icon",
-              "fieldName": "iconAfterSpinDuration"
+              "name": "offsetX",
+              "default": "0"
             },
             {
-              "name": "focused",
+              "name": "offsetY",
+              "default": "0"
+            }
+          ],
+          "description": "A testing utility that moves the mouse onto an element."
+        },
+        {
+          "kind": "function",
+          "name": "dragElement",
+          "return": {
+            "type": {
+              "text": "Promise<void>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "el",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "focused"
+                "text": "Element"
+              }
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "fieldName": "name"
+              "name": "deltaX",
+              "default": "0"
             },
             {
-              "name": "type",
-              "type": {
-                "text": "'submit' | 'reset' | 'button'"
-              },
-              "default": "'button'",
-              "fieldName": "type"
+              "name": "deltaY",
+              "default": "0"
             },
             {
-              "name": "value",
+              "name": "callbacks",
+              "default": "{}",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "value"
+                "text": "{\n    afterMouseDown?: () => void | Promise<void>;\n    afterMouseMove?: () => void | Promise<void>;\n  }"
+              }
             }
           ],
-          "superclass": {
-            "name": "VscElement",
-            "module": "/src/includes/VscElement.js"
-          },
-          "tagName": "vscode-button",
-          "customElement": true
+          "description": "A testing utility that drags an element with the mouse."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeButton",
+          "name": "clickOnElement",
           "declaration": {
-            "name": "VscodeButton",
-            "module": "src/vscode-button/vscode-button.ts"
+            "name": "clickOnElement",
+            "module": "src/includes/test-helpers.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "vscode-button",
+          "kind": "js",
+          "name": "moveMouseOnElement",
           "declaration": {
-            "name": "VscodeButton",
-            "module": "src/vscode-button/vscode-button.ts"
+            "name": "moveMouseOnElement",
+            "module": "src/includes/test-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "dragElement",
+          "declaration": {
+            "name": "dragElement",
+            "module": "src/includes/test-helpers.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/uniqueId.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "uniqueId",
+          "parameters": [
+            {
+              "name": "prefix",
+              "default": "''"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "uniqueId",
+            "module": "src/includes/uniqueId.ts"
           }
         }
       ]
@@ -1753,7 +1753,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: block; font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); font-weight: var(--vscode-font-weight); line-height: 1.4em; position: relative; } .context-menu { background-color: var(--vscode-menu-background); border-color: var(--vscode-menu-border, var(--vscode-menu-background)); border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 0 2px 8px var(--vscode-widget-shadow); color: var(--vscode-menu-foreground); padding: 4px 0; white-space: nowrap; } .context-menu:focus { outline: 0; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: block; font-family: var(--vscode-font-family, sans-serif); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); line-height: 1.4em; position: relative; } .context-menu { background-color: var(--vscode-menu-background, #1f1f1f); border-color: var(--vscode-menu-border, #454545); border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36)); color: var(--vscode-menu-foreground, #cccccc); padding: 4px 0; white-space: nowrap; } .context-menu:focus { outline: 0; } `, ]"
         }
       ],
       "exports": [
@@ -1777,25 +1777,32 @@
           "name": "VscodeContextMenu",
           "cssProperties": [
             {
-              "name": "--vscode-font-family"
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
             },
             {
-              "name": "--vscode-font-size"
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "name": "--vscode-font-weight"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "name": "--vscode-menu-background"
+              "name": "--vscode-menu-background",
+              "default": "#1f1f1f"
             },
             {
-              "name": "--vscode-menu-border"
+              "name": "--vscode-menu-border",
+              "default": "#454545"
             },
             {
-              "name": "--vscode-menu-foreground"
+              "name": "--vscode-menu-foreground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-widget-shadow"
+              "name": "--vscode-widget-shadow",
+              "default": "rgba(0, 0, 0, 0.36)"
             }
           ],
           "members": [
@@ -2063,7 +2070,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: block; font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); font-weight: var(--vscode-font-weight); line-height: 1.4em; outline: none; position: relative; } .context-menu-item { background-color: var(--vscode-menu-background); color: var(--vscode-menu-foreground); display: flex; user-select: none; white-space: nowrap; } .ruler { border-bottom: 1px solid var(--vscode-menu-separatorBackground); display: block; margin: 0 0 4px; padding-top: 4px; width: 100%; } .context-menu-item a { align-items: center; border-color: transparent; border-radius: 3px; border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--vscode-menu-foreground); cursor: pointer; display: flex; flex: 1 1 auto; height: 2em; margin-left: 4px; margin-right: 4px; outline: none; position: relative; text-decoration: inherit; } :host([selected]) .context-menu-item a { background-color: var(--vscode-menu-selectionBackground); border-color: var( --vscode-menu-selectionBorder, var(--vscode-menu-selectionBackground) ); color: var(--vscode-menu-selectionForeground); } .label { background: none; display: flex; flex: 1 1 auto; font-size: 12px; line-height: 1; padding: 0 22px; text-decoration: none; } .keybinding { display: block; flex: 2 1 auto; line-height: 1; padding: 0 22px; text-align: right; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: block; font-family: var(--vscode-font-family, sans-serif); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); line-height: 1.4em; outline: none; position: relative; } .context-menu-item { background-color: var(--vscode-menu-background, #1f1f1f); color: var(--vscode-menu-foreground, #cccccc); display: flex; user-select: none; white-space: nowrap; } .ruler { border-bottom: 1px solid var(--vscode-menu-separatorBackground, #454545); display: block; margin: 0 0 4px; padding-top: 4px; width: 100%; } .context-menu-item a { align-items: center; border-color: transparent; border-radius: 3px; border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--vscode-menu-foreground, #cccccc); cursor: pointer; display: flex; flex: 1 1 auto; height: 2em; margin-left: 4px; margin-right: 4px; outline: none; position: relative; text-decoration: inherit; } :host([selected]) .context-menu-item a { background-color: var(--vscode-menu-selectionBackground, #0078d4); border-color: var(--vscode-menu-selectionBorder, transparent); color: var(--vscode-menu-selectionForeground, #ffffff); } .label { background: none; display: flex; flex: 1 1 auto; font-size: 12px; line-height: 1; padding: 0 22px; text-decoration: none; } .keybinding { display: block; flex: 2 1 auto; line-height: 1; padding: 0 22px; text-align: right; } `, ]"
         }
       ],
       "exports": [
@@ -2087,32 +2094,40 @@
           "name": "VscodeContextMenuItem",
           "cssProperties": [
             {
-              "name": "--vscode-font-family"
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
             },
             {
-              "name": "--vscode-font-size"
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "name": "--vscode-font-weight"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "name": "--vscode-menu-background"
+              "name": "--vscode-menu-background",
+              "default": "#1f1f1f"
             },
             {
               "name": "--vscode-menu-selectionBorder",
-              "default": "var(--vscode-menu-selectionBackground)"
+              "default": "transparent"
             },
             {
-              "name": "--vscode-menu-foreground"
+              "name": "--vscode-menu-foreground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-menu-selectionBackground"
+              "name": "--vscode-menu-selectionBackground",
+              "default": "#0078d4"
             },
             {
-              "name": "--vscode-menu-selectionForeground"
+              "name": "--vscode-menu-selectionForeground",
+              "default": "#ffffff"
             },
             {
-              "name": "--vscode-menu-separatorBackground"
+              "name": "--vscode-menu-separatorBackground",
+              "default": "#454545"
             }
           ],
           "members": [
@@ -2260,7 +2275,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-foreground); display: block; height: 1px; margin-bottom: 10px; margin-top: 10px; opacity: 0.4; } `, ]"
+          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-foreground, #cccccc); display: block; height: 1px; margin-bottom: 10px; margin-top: 10px; opacity: 0.4; } `, ]"
         }
       ],
       "exports": [
@@ -2282,6 +2297,12 @@
           "kind": "class",
           "description": "",
           "name": "VscodeDivider",
+          "cssProperties": [
+            {
+              "name": "--vscode-foreground",
+              "default": "#cccccc"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2769,7 +2790,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { color: var(--vscode-icon-foreground); display: inline-block; } .codicon[class*='codicon-'] { display: block; } .icon, .button { background-color: transparent; display: block; padding: 0; } .button { border-color: transparent; border-style: solid; border-width: 1px; border-radius: 5px; color: currentColor; cursor: pointer; padding: 2px; } .button:hover { background-color: var(--vscode-toolbar-hoverBackground); } .button:active { background-color: var(--vscode-toolbar-activeBackground); } .button:focus { outline: none; } .button:focus-visible { border-color: var(--vscode-focusBorder); } @keyframes icon-spin { 100% { transform: rotate(360deg); } } .spin { animation-name: icon-spin; animation-timing-function: linear; animation-iteration-count: infinite; } `, ]"
+          "default": "[ defaultStyles, css` :host { color: var(--vscode-icon-foreground, #cccccc); display: inline-block; } .codicon[class*='codicon-'] { display: block; } .icon, .button { background-color: transparent; display: block; padding: 0; } .button { border-color: transparent; border-style: solid; border-width: 1px; border-radius: 5px; color: currentColor; cursor: pointer; padding: 2px; } .button:hover { background-color: var( --vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31) ); } .button:active { background-color: var( --vscode-toolbar-activeBackground, rgba(99, 102, 103, 0.31) ); } .button:focus { outline: none; } .button:focus-visible { border-color: var(--vscode-focusBorder, #0078d4); } @keyframes icon-spin { 100% { transform: rotate(360deg); } } .spin { animation-name: icon-spin; animation-timing-function: linear; animation-iteration-count: infinite; } `, ]"
         }
       ],
       "exports": [
@@ -2793,18 +2814,22 @@
           "name": "VscodeIcon",
           "cssProperties": [
             {
-              "name": "--vscode-icon-foreground"
+              "name": "--vscode-icon-foreground",
+              "default": "#cccccc"
             },
             {
               "description": "Hover state background color in `active-icon` mode",
-              "name": "--vscode-toolbar-hoverBackground"
+              "name": "--vscode-toolbar-hoverBackground",
+              "default": "rgba(90, 93, 94, 0.31)"
             },
             {
               "description": "Active state background color in `active-icon` mode",
-              "name": "--vscode-toolbar-activeBackground"
+              "name": "--vscode-toolbar-activeBackground",
+              "default": "rgba(99, 102, 103, 0.31)"
             },
             {
-              "name": "--vscode-focusBorder"
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
             }
           ],
           "members": [
@@ -3218,67 +3243,88 @@
               }
             },
             {
-              "name": "--vscode-badge-background"
+              "name": "--vscode-badge-background",
+              "default": "#616161"
             },
             {
-              "name": "--vscode-badge-foreground"
+              "name": "--vscode-badge-foreground",
+              "default": "#f8f8f8"
             },
             {
-              "name": "--vscode-settings-dropdownBorder"
+              "name": "--vscode-settings-dropdownBorder",
+              "default": "#3c3c3c"
             },
             {
-              "name": "--vscode-settings-checkboxBackground"
+              "name": "--vscode-settings-checkboxBackground",
+              "default": "#313131"
             },
             {
-              "name": "--vscode-settings-dropdownBackground"
+              "name": "--vscode-settings-dropdownBackground",
+              "default": "#313131"
             },
             {
-              "name": "--vscode-settings-dropdownListBorder"
+              "name": "--vscode-settings-dropdownForeground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-focusBorder"
+              "name": "--vscode-settings-dropdownListBorder",
+              "default": "#454545"
             },
             {
-              "name": "--vscode-foreground"
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
             },
             {
-              "name": "--vscode-font-family"
+              "name": "--vscode-foreground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-font-size"
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
             },
             {
-              "name": "--vscode-font-weight"
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "name": "--vscode-list-activeSelectionBackground"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "name": "--vscode-list-activeSelectionForeground"
+              "name": "--vscode-inputValidation-errorBackground",
+              "default": "#5a1d1d"
             },
             {
-              "name": "--vscode-list-focusOutline"
+              "name": "--vscode-inputValidation-errorBorder",
+              "default": "#be1100"
             },
             {
-              "name": "--vscode-list-focusHighlightForeground"
+              "name": "--vscode-list-activeSelectionBackground",
+              "default": "#04395e"
             },
             {
-              "name": "--vscode-list-highlightForeground"
+              "name": "--vscode-list-activeSelectionForeground",
+              "default": "#ffffff"
             },
             {
-              "name": "--vscode-list-hoverBackground"
+              "name": "--vscode-list-focusOutline",
+              "default": "#0078d4"
             },
             {
-              "name": "--vscode-list-hoverForeground"
+              "name": "--vscode-list-focusHighlightForeground",
+              "default": "#2aaaff"
             },
             {
-              "name": "--vscode-list-hoverBackground"
+              "name": "--vscode-list-highlightForeground",
+              "default": "#2aaaff"
             },
             {
-              "name": "--vscode-settings-textInputBackground"
+              "name": "--vscode-list-hoverBackground",
+              "default": "#2a2d2e"
             },
             {
-              "name": "--vscode-list-hoverBackground"
+              "name": "--vscode-list-hoverForeground",
+              "default": "#ffffff"
             }
           ],
           "members": [
@@ -4572,7 +4618,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { align-items: center; display: block; height: 28px; margin: 0; outline: none; width: 28px; } .progress { height: 100%; width: 100%; } .background { fill: none; stroke: transparent; stroke-width: 2px; } .indeterminate-indicator-1 { fill: none; stroke: var(--vscode-progressBar-background); stroke-width: 2px; stroke-linecap: square; transform-origin: 50% 50%; transform: rotate(-90deg); transition: all 0.2s ease-in-out; animation: spin-infinite 2s linear infinite; } @keyframes spin-infinite { 0% { stroke-dasharray: 0.01px 43.97px; transform: rotate(0deg); } 50% { stroke-dasharray: 21.99px 21.99px; transform: rotate(450deg); } 100% { stroke-dasharray: 0.01px 43.97px; transform: rotate(1080deg); } } `, ]"
+          "default": "[ defaultStyles, css` :host { align-items: center; display: block; height: 28px; margin: 0; outline: none; width: 28px; } .progress { height: 100%; width: 100%; } .background { fill: none; stroke: transparent; stroke-width: 2px; } .indeterminate-indicator-1 { fill: none; stroke: var(--vscode-progressBar-background, #0078d4); stroke-width: 2px; stroke-linecap: square; transform-origin: 50% 50%; transform: rotate(-90deg); transition: all 0.2s ease-in-out; animation: spin-infinite 2s linear infinite; } @keyframes spin-infinite { 0% { stroke-dasharray: 0.01px 43.97px; transform: rotate(0deg); } 50% { stroke-dasharray: 21.99px 21.99px; transform: rotate(450deg); } 100% { stroke-dasharray: 0.01px 43.97px; transform: rotate(1080deg); } } `, ]"
         }
       ],
       "exports": [
@@ -4594,6 +4640,12 @@
           "kind": "class",
           "description": "",
           "name": "VscodeProgressRing",
+          "cssProperties": [
+            {
+              "name": "--vscode-progressBar-background",
+              "default": "#0078d4"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4702,7 +4754,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, baseStyles, css` :host(:invalid) .icon, :host([invalid]) .icon { background-color: var(--vscode-inputValidation-errorBackground); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } .icon { border-radius: 9px; } .icon.checked:before { background-color: currentColor; border-radius: 4px; content: ''; height: 8px; left: 50%; margin: -4px 0 0 -4px; position: absolute; top: 50%; width: 8px; } :host(:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; } `, ]"
+          "default": "[ defaultStyles, baseStyles, css` :host(:invalid) .icon, :host([invalid]) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } .icon { border-radius: 9px; } .icon.checked:before { background-color: currentColor; border-radius: 4px; content: ''; height: 8px; left: 50%; margin: -4px 0 0 -4px; position: absolute; top: 50%; width: 8px; } :host(:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } `, ]"
         }
       ],
       "exports": [
@@ -4726,29 +4778,40 @@
           "name": "VscodeRadio",
           "cssProperties": [
             {
-              "name": "--vscode-font-family"
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
             },
             {
-              "name": "--vscode-font-size"
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "name": "--vscode-font-weight"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "description": "Label font color. 90% transparency version of `--vscode-foreground` by default.",
-              "name": "--vsc-foreground-translucent"
+              "name": "--vscode-settings-checkboxBackground",
+              "default": "#313131"
+            },
+            {
+              "name": "--vscode-settings-checkboxBorder",
+              "default": "#3c3c3c"
             },
             {
-              "name": "--vscode-settings-checkboxBackground"
+              "name": "--vscode-settings-checkboxForeground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-settings-checkboxBorder"
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
             },
             {
-              "name": "--vscode-settings-checkboxForeground"
+              "name": "--vscode-inputValidation-errorBackground",
+              "default": "#5a1d1d"
             },
             {
-              "name": "--vscode-focusBorder"
+              "name": "--vscode-inputValidation-errorBorder",
+              "default": "#be1100"
             }
           ],
           "members": [
@@ -5461,7 +5524,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: block; position: relative; } .scrollable-container { height: 100%; overflow: auto; } .scrollable-container::-webkit-scrollbar { cursor: default; width: 0; } .scrollable-container { scrollbar-width: none; } .shadow { box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset; display: none; height: 3px; left: 0; pointer-events: none; position: absolute; top: 0; z-index: 1; width: 100%; } .shadow.visible { display: block; } .scrollbar-track { height: 100%; position: absolute; right: 0; top: 0; width: 10px; z-index: 100; } .scrollbar-track.hidden { display: none; } .scrollbar-thumb { background-color: transparent; min-height: var(--min-thumb-height, 20px); opacity: 0; position: absolute; right: 0; width: 10px; } .scrollbar-thumb.visible { background-color: var(--vscode-scrollbarSlider-background); opacity: 1; transition: opacity 100ms; } .scrollbar-thumb.fade { background-color: var(--vscode-scrollbarSlider-background); opacity: 0; transition: opacity 800ms; } .scrollbar-thumb.visible:hover { background-color: var(--vscode-scrollbarSlider-hoverBackground); } .scrollbar-thumb.visible.active, .scrollbar-thumb.visible.active:hover { background-color: var(--vscode-scrollbarSlider-activeBackground); } .prevent-interaction { bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 99; } .content { overflow: hidden; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: block; position: relative; } .scrollable-container { height: 100%; overflow: auto; } .scrollable-container::-webkit-scrollbar { cursor: default; width: 0; } .scrollable-container { scrollbar-width: none; } .shadow { box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset; display: none; height: 3px; left: 0; pointer-events: none; position: absolute; top: 0; z-index: 1; width: 100%; } .shadow.visible { display: block; } .scrollbar-track { height: 100%; position: absolute; right: 0; top: 0; width: 10px; z-index: 100; } .scrollbar-track.hidden { display: none; } .scrollbar-thumb { background-color: transparent; min-height: var(--min-thumb-height, 20px); opacity: 0; position: absolute; right: 0; width: 10px; } .scrollbar-thumb.visible { background-color: var( --vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4) ); opacity: 1; transition: opacity 100ms; } .scrollbar-thumb.fade { background-color: var( --vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4) ); opacity: 0; transition: opacity 800ms; } .scrollbar-thumb.visible:hover { background-color: var( --vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7) ); } .scrollbar-thumb.visible.active, .scrollbar-thumb.visible.active:hover { background-color: var( --vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4) ); } .prevent-interaction { bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 99; } .content { overflow: hidden; } `, ]"
         }
       ],
       "exports": [
@@ -5490,16 +5553,20 @@
               "default": "20px"
             },
             {
-              "name": "--vscode-scrollbar-shadow"
+              "name": "--vscode-scrollbar-shadow",
+              "default": "#000000"
             },
             {
-              "name": "--vscode-scrollbarSlider-background"
+              "name": "--vscode-scrollbarSlider-background",
+              "default": "rgba(121, 121, 121, 0.4)"
             },
             {
-              "name": "--vscode-scrollbarSlider-hoverBackground"
+              "name": "--vscode-scrollbarSlider-hoverBackground",
+              "default": "rgba(100, 100, 100, 0.7)"
             },
             {
-              "name": "--vscode-scrollbarSlider-activeBackground"
+              "name": "--vscode-scrollbarSlider-activeBackground",
+              "default": "rgba(191, 191, 191, 0.4)"
             }
           ],
           "members": [
@@ -5880,64 +5947,88 @@
               }
             },
             {
-              "name": "--vscode-badge-background"
+              "name": "--vscode-badge-background",
+              "default": "#616161"
+            },
+            {
+              "name": "--vscode-badge-foreground",
+              "default": "#f8f8f8"
             },
             {
-              "name": "--vscode-badge-foreground"
+              "name": "--vscode-settings-dropdownBorder",
+              "default": "#3c3c3c"
             },
             {
-              "name": "--vscode-settings-dropdownBorder"
+              "name": "--vscode-settings-checkboxBackground",
+              "default": "#313131"
             },
             {
-              "name": "--vscode-settings-checkboxBackground"
+              "name": "--vscode-settings-dropdownBackground",
+              "default": "#313131"
             },
             {
-              "name": "--vscode-settings-dropdownBackground"
+              "name": "--vscode-settings-dropdownForeground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-settings-dropdownListBorder"
+              "name": "--vscode-settings-dropdownListBorder",
+              "default": "#454545"
             },
             {
-              "name": "--vscode-focusBorder"
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
             },
             {
-              "name": "--vscode-foreground"
+              "name": "--vscode-foreground",
+              "default": "#cccccc"
             },
             {
-              "name": "--vscode-font-family"
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
             },
             {
-              "name": "--vscode-font-size"
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "name": "--vscode-font-weight"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "name": "--vscode-list-activeSelectionBackground"
+              "name": "--vscode-inputValidation-errorBackground",
+              "default": "#5a1d1d"
             },
             {
-              "name": "--vscode-list-activeSelectionForeground"
+              "name": "--vscode-inputValidation-errorBorder",
+              "default": "#be1100"
             },
             {
-              "name": "--vscode-list-focusOutline"
+              "name": "--vscode-list-activeSelectionBackground",
+              "default": "#04395e"
             },
             {
-              "name": "--vscode-list-highlightForeground"
+              "name": "--vscode-list-activeSelectionForeground",
+              "default": "#ffffff"
             },
             {
-              "name": "--vscode-list-focusHighlightForeground"
+              "name": "--vscode-list-focusOutline",
+              "default": "#0078d4"
             },
             {
-              "name": "--vscode-list-hoverBackground"
+              "name": "--vscode-list-focusHighlightForeground",
+              "default": "#2aaaff"
             },
             {
-              "name": "--vscode-list-hoverForeground"
+              "name": "--vscode-list-highlightForeground",
+              "default": "#2aaaff"
             },
             {
-              "name": "--vscode-list-hoverBackground"
+              "name": "--vscode-list-hoverBackground",
+              "default": "#2a2d2e"
             },
             {
-              "name": "--vscode-settings-textInputBackground"
+              "name": "--vscode-list-hoverForeground",
+              "default": "#ffffff"
             }
           ],
           "members": [
@@ -8280,6 +8371,11 @@
               "privacy": "private",
               "description": "Get cached cells of first row"
             },
+            {
+              "kind": "method",
+              "name": "_resizeTableBody",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "_initResizeObserver",
@@ -10646,6 +10742,262 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-toolbar-button/vscode-toolbar-button.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { display: inline-flex; } button { align-items: center; background-color: transparent; border: 0; border-radius: 5px; color: var(--vscode-foreground, #cccccc); cursor: pointer; display: flex; outline-offset: -1px; outline-width: 1px; padding: 0; user-select: none; } button:focus-visible { outline-color: var(--vscode-focusBorder, #0078d4); outline-style: solid; } button:hover { background-color: var( --vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31) ); outline-style: dashed; outline-color: var(--vscode-toolbar-hoverOutline, transparent); } button:active { background-color: var( --vscode-toolbar-activeBackground, rgba(99, 102, 103, 0.31) ); } button.checked { background-color: var( --vscode-inputOption-activeBackground, rgba(36, 137, 219, 0.51) ); outline-color: var(--vscode-inputOption-activeBorder, #2488db); outline-style: solid; color: var(--vscode-inputOption-activeForeground, #ffffff); } button.checked vscode-icon { color: var(--vscode-inputOption-activeForeground, #ffffff); } vscode-icon { display: block; padding: 3px; } slot:not(.empty) { align-items: center; display: flex; height: 22px; padding: 0 5px 0 2px; } slot.textOnly:not(.empty) { padding: 0 5px; } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "styles",
+            "module": "src/vscode-toolbar-button/vscode-toolbar-button.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-toolbar-button/vscode-toolbar-button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toolbar button",
+          "name": "VscodeToolbarButton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "toggleable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "toggleable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_isSlotEmpty",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "_assignedNodes",
+              "type": {
+                "text": "NodeList | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleButtonClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "icon"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "fieldName": "label"
+            },
+            {
+              "name": "toggleable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "toggleable"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "checked"
+            }
+          ],
+          "superclass": {
+            "name": "VscElement",
+            "module": "/src/includes/VscElement.js"
+          },
+          "tagName": "vscode-toolbar-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VscodeToolbarButton",
+          "declaration": {
+            "name": "VscodeToolbarButton",
+            "module": "src/vscode-toolbar-button/vscode-toolbar-button.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "vscode-toolbar-button",
+          "declaration": {
+            "name": "VscodeToolbarButton",
+            "module": "src/vscode-toolbar-button/vscode-toolbar-button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-toolbar-container/vscode-toolbar-container.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { gap: 4px; display: flex; align-items: center; } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "styles",
+            "module": "src/vscode-toolbar-container/vscode-toolbar-container.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-toolbar-container/vscode-toolbar-container.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toolbar container",
+          "name": "VscodeToolbarContainer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "VscElement",
+            "module": "/src/includes/VscElement.js"
+          },
+          "tagName": "vscode-toolbar-container",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VscodeToolbarContainer",
+          "declaration": {
+            "name": "VscodeToolbarContainer",
+            "module": "src/vscode-toolbar-container/vscode-toolbar-container.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "vscode-toolbar-container",
+          "declaration": {
+            "name": "VscodeToolbarContainer",
+            "module": "src/vscode-toolbar-container/vscode-toolbar-container.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vscode-tree/vscode-tree.styles.ts",