@vscode-elements/elements 2.2.0 → 2.3.1-pre.0

package/custom-elements.json

@@ -604,6 +604,131 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-badge/vscode-badge.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { display: inline-block; } .root { 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: 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']) .root { border-radius: 11px; line-height: 11px; min-height: 18px; min-width: 18px; padding: 3px 6px; } :host([variant='activity-bar-counter']) .root { 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']) .root { 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": [
+            {
+              "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",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "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",
@@ -1101,7 +1226,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-badge/vscode-badge.styles.ts",
+      "path": "src/vscode-button-group/vscode-button-group.styles.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1109,7 +1234,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: inline-block; } .root { 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: 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']) .root { border-radius: 11px; line-height: 11px; min-height: 18px; min-width: 18px; padding: 3px 6px; } :host([variant='activity-bar-counter']) .root { 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']) .root { 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; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: inline-block; } .root { align-items: stretch; display: flex; width: 100%; } ::slotted(vscode-button:not(:first-child)) { --vsc-border-left-width: 0; --vsc-border-left-radius: 0; --vsc-border-left-width: 0; } ::slotted(vscode-button:not(:last-child)) { --vsc-divider-display: block; --vsc-base-additional-right-padding: 1px; --vsc-base-after-content: ''; --vsc-border-right-width: 0; --vsc-border-right-radius: 0; --vsc-border-right-width: 0; } ::slotted(vscode-button:focus) { z-index: 1; } ::slotted(vscode-button:not(:empty)) { width: 100%; } `, ]"
         }
       ],
       "exports": [
@@ -1118,61 +1243,67 @@
           "name": "default",
           "declaration": {
             "name": "styles",
-            "module": "src/vscode-badge/vscode-badge.styles.ts"
+            "module": "src/vscode-button-group/vscode-button-group.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-badge/vscode-badge.ts",
+      "path": "src/vscode-button-group/vscode-button-group.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",
+          "description": "Shows a split button, including several components in a single button. Commonly used to show a button with a dropdown to the right.",
+          "name": "VscodeButtonGroup",
           "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-contrastBorder",
-              "default": "transparent"
+              "name": "--vscode-font-size",
+              "default": "13px"
             },
             {
-              "description": "default and counter variant background color",
-              "name": "--vscode-badge-background",
-              "default": "#616161"
+              "name": "--vscode-font-weight",
+              "default": "normal"
             },
             {
-              "description": "default and counter variant foreground color",
-              "name": "--vscode-badge-foreground",
-              "default": "#f8f8f8"
+              "name": "--vscode-button-secondaryForeground",
+              "default": "#cccccc"
             },
             {
-              "description": "activity bar variant background color",
-              "name": "--vscode-activityBarBadge-background",
-              "default": "#0078d4"
+              "name": "--vscode-button-secondaryBackground",
+              "default": "#313131"
             },
             {
-              "description": "activity bar variant foreground color",
-              "name": "--vscode-activityBarBadge-foreground",
-              "default": "#ffffff"
+              "name": "--vscode-button-secondaryHoverBackground",
+              "default": "#3c3c3c"
+            },
+            {
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
             }
           ],
           "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",
@@ -1187,46 +1318,36 @@
               }
             }
           ],
-          "attributes": [
-            {
-              "name": "variant",
-              "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",
+          "tagName": "vscode-button-group",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeBadge",
+          "name": "VscodeButtonGroup",
           "declaration": {
-            "name": "VscodeBadge",
-            "module": "src/vscode-badge/vscode-badge.ts"
+            "name": "VscodeButtonGroup",
+            "module": "src/vscode-button-group/vscode-button-group.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-badge",
+          "name": "vscode-button-group",
           "declaration": {
-            "name": "VscodeBadge",
-            "module": "src/vscode-badge/vscode-badge.ts"
+            "name": "VscodeButtonGroup",
+            "module": "src/vscode-button-group/vscode-button-group.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-button-group/vscode-button-group.styles.ts",
+      "path": "src/vscode-checkbox-group/vscode-checkbox-group.styles.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1234,7 +1355,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: inline-block; } .root { align-items: stretch; display: flex; width: 100%; } ::slotted(vscode-button:not(:first-child)) { --vsc-border-left-width: 0; --vsc-border-left-radius: 0; --vsc-border-left-width: 0; } ::slotted(vscode-button:not(:last-child)) { --vsc-divider-display: block; --vsc-base-additional-right-padding: 1px; --vsc-base-after-content: ''; --vsc-border-right-width: 0; --vsc-border-right-radius: 0; --vsc-border-right-width: 0; } ::slotted(vscode-button:focus) { z-index: 1; } ::slotted(vscode-button:not(:empty)) { width: 100%; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: block; } .wrapper { display: flex; flex-wrap: wrap; } :host([variant='vertical']) .wrapper { display: block; } ::slotted(vscode-checkbox) { margin-right: 20px; } ::slotted(vscode-checkbox:last-child) { margin-right: 0; } :host([variant='vertical']) ::slotted(vscode-checkbox) { display: block; margin-bottom: 15px; } :host([variant='vertical']) ::slotted(vscode-checkbox:last-child) { margin-bottom: 0; } `, ]"
         }
       ],
       "exports": [
@@ -1243,67 +1364,30 @@
           "name": "default",
           "declaration": {
             "name": "styles",
-            "module": "src/vscode-button-group/vscode-button-group.styles.ts"
+            "module": "src/vscode-checkbox-group/vscode-checkbox-group.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-button-group/vscode-button-group.ts",
+      "path": "src/vscode-checkbox-group/vscode-checkbox-group.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Shows a split button, including several components in a single button. Commonly used to show a button with a dropdown to the right.",
-          "name": "VscodeButtonGroup",
-          "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"
-            },
+          "description": "Arranges a group of checkboxes horizontally or vertically.",
+          "name": "VscodeCheckboxGroup",
+          "members": [
             {
-              "name": "--vscode-button-secondaryHoverBackground",
-              "default": "#3c3c3c"
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "attribute": "variant",
+              "reflects": true
             },
-            {
-              "name": "--vscode-focusBorder",
-              "default": "#0078d4"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
               "name": "version",
@@ -1318,29 +1402,39 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "fieldName": "variant"
+            }
+          ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
           },
-          "tagName": "vscode-button-group",
+          "tagName": "vscode-checkbox-group",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeButtonGroup",
+          "name": "VscodeCheckboxGroup",
           "declaration": {
-            "name": "VscodeButtonGroup",
-            "module": "src/vscode-button-group/vscode-button-group.ts"
+            "name": "VscodeCheckboxGroup",
+            "module": "src/vscode-checkbox-group/vscode-checkbox-group.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-button-group",
+          "name": "vscode-checkbox-group",
           "declaration": {
-            "name": "VscodeButtonGroup",
-            "module": "src/vscode-button-group/vscode-button-group.ts"
+            "name": "VscodeCheckboxGroup",
+            "module": "src/vscode-checkbox-group/vscode-checkbox-group.ts"
           }
         }
       ]
@@ -1910,100 +2004,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-checkbox-group/vscode-checkbox-group.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "type": {
-            "text": "CSSResultGroup"
-          },
-          "default": "[ defaultStyles, css` :host { display: block; } .wrapper { display: flex; flex-wrap: wrap; } :host([variant='vertical']) .wrapper { display: block; } ::slotted(vscode-checkbox) { margin-right: 20px; } ::slotted(vscode-checkbox:last-child) { margin-right: 0; } :host([variant='vertical']) ::slotted(vscode-checkbox) { display: block; margin-bottom: 15px; } :host([variant='vertical']) ::slotted(vscode-checkbox:last-child) { margin-bottom: 0; } `, ]"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "styles",
-            "module": "src/vscode-checkbox-group/vscode-checkbox-group.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-checkbox-group/vscode-checkbox-group.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Arranges a group of checkboxes horizontally or vertically.",
-          "name": "VscodeCheckboxGroup",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "version",
-              "type": {
-                "text": "string"
-              },
-              "description": "VSCode Elements version",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "VscElement",
-            "module": "/src/includes/VscElement.js"
-          },
-          "tagName": "vscode-checkbox-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "VscodeCheckboxGroup",
-          "declaration": {
-            "name": "VscodeCheckboxGroup",
-            "module": "src/vscode-checkbox-group/vscode-checkbox-group.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "vscode-checkbox-group",
-          "declaration": {
-            "name": "VscodeCheckboxGroup",
-            "module": "src/vscode-checkbox-group/vscode-checkbox-group.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/vscode-collapsible/vscode-collapsible.styles.ts",
@@ -3065,7 +3065,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-form-group/vscode-form-group.styles.ts",
+      "path": "src/vscode-form-helper/vscode-form-helper.styles.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -3073,7 +3073,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { --label-right-margin: 14px; --label-width: 150px; display: block; margin: 15px 0; } :host([variant='settings-group']) { margin: 0; padding: 12px 14px 18px; max-width: 727px; } .wrapper { display: flex; flex-wrap: wrap; } :host([variant='vertical']) .wrapper, :host([variant='settings-group']) .wrapper { display: block; } :host([variant='horizontal']) ::slotted(vscode-checkbox-group), :host([variant='horizontal']) ::slotted(vscode-radio-group) { width: calc(100% - calc(var(--label-width) + var(--label-right-margin))); } :host([variant='horizontal']) ::slotted(vscode-label) { margin-right: var(--label-right-margin); text-align: right; width: var(--label-width); } :host([variant='settings-group']) ::slotted(vscode-label) { height: 18px; line-height: 18px; margin-bottom: 4px; margin-right: 0; padding: 0; } ::slotted(vscode-form-helper) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-form-helper), :host([variant='settings-group']) ::slotted(vscode-form-helper) { display: block; margin-left: 0; } :host([variant='settings-group']) ::slotted(vscode-form-helper) { margin-bottom: 0; margin-top: 0; } :host([variant='vertical']) ::slotted(vscode-label), :host([variant='settings-group']) ::slotted(vscode-label) { display: block; margin-left: 0; text-align: left; } :host([variant='settings-group']) ::slotted(vscode-inputbox), :host([variant='settings-group']) ::slotted(vscode-textfield), :host([variant='settings-group']) ::slotted(vscode-textarea), :host([variant='settings-group']) ::slotted(vscode-single-select), :host([variant='settings-group']) ::slotted(vscode-multi-select) { margin-top: 9px; } ::slotted(vscode-button:first-child) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-button) { margin-left: 0; } ::slotted(vscode-button) { margin-right: 4px; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: block; line-height: 1.4em; margin-bottom: 4px; margin-top: 4px; max-width: 720px; opacity: 0.9; } :host([vertical]) { margin-left: 0; } `, ]"
         }
       ],
       "exports": [
@@ -3082,41 +3082,30 @@
           "name": "default",
           "declaration": {
             "name": "styles",
-            "module": "src/vscode-form-group/vscode-form-group.styles.ts"
+            "module": "src/vscode-form-helper/vscode-form-helper.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-form-group/vscode-form-group.ts",
+      "path": "src/vscode-form-helper/vscode-form-helper.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "VscodeFormGroup",
+          "description": "Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)",
+          "name": "VscodeFormHelper",
           "cssProperties": [
             {
-              "description": "The width of the label in horizontal mode",
-              "name": "--label-width",
-              "default": "150px"
-            },
-            {
-              "description": "The right margin of the label in horizontal mode",
-              "name": "--label-right-margin",
-              "default": "14px"
+              "description": "Default text color. 90% transparency version of `--vscode-foreground` by default.",
+              "name": "--vsc-foreground-translucent"
             }
           ],
           "members": [
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "FormGroupVariant"
-              },
-              "default": "'horizontal'",
-              "attribute": "variant",
-              "reflects": true
+              "kind": "method",
+              "name": "_injectLightDOMStyles",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -3132,46 +3121,36 @@
               }
             }
           ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "FormGroupVariant"
-              },
-              "default": "'horizontal'",
-              "fieldName": "variant"
-            }
-          ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
           },
-          "tagName": "vscode-form-group",
+          "tagName": "vscode-form-helper",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeFormGroup",
+          "name": "VscodeFormHelper",
           "declaration": {
-            "name": "VscodeFormGroup",
-            "module": "src/vscode-form-group/vscode-form-group.ts"
+            "name": "VscodeFormHelper",
+            "module": "src/vscode-form-helper/vscode-form-helper.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-form-group",
+          "name": "vscode-form-helper",
           "declaration": {
-            "name": "VscodeFormGroup",
-            "module": "src/vscode-form-group/vscode-form-group.ts"
+            "name": "VscodeFormHelper",
+            "module": "src/vscode-form-helper/vscode-form-helper.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-form-helper/vscode-form-helper.styles.ts",
+      "path": "src/vscode-form-group/vscode-form-group.styles.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -3179,7 +3158,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: block; line-height: 1.4em; margin-bottom: 4px; margin-top: 4px; max-width: 720px; opacity: 0.9; } :host([vertical]) { margin-left: 0; } `, ]"
+          "default": "[ defaultStyles, css` :host { --label-right-margin: 14px; --label-width: 150px; display: block; margin: 15px 0; } :host([variant='settings-group']) { margin: 0; padding: 12px 14px 18px; max-width: 727px; } .wrapper { display: flex; flex-wrap: wrap; } :host([variant='vertical']) .wrapper, :host([variant='settings-group']) .wrapper { display: block; } :host([variant='horizontal']) ::slotted(vscode-checkbox-group), :host([variant='horizontal']) ::slotted(vscode-radio-group) { width: calc(100% - calc(var(--label-width) + var(--label-right-margin))); } :host([variant='horizontal']) ::slotted(vscode-label) { margin-right: var(--label-right-margin); text-align: right; width: var(--label-width); } :host([variant='settings-group']) ::slotted(vscode-label) { height: 18px; line-height: 18px; margin-bottom: 4px; margin-right: 0; padding: 0; } ::slotted(vscode-form-helper) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-form-helper), :host([variant='settings-group']) ::slotted(vscode-form-helper) { display: block; margin-left: 0; } :host([variant='settings-group']) ::slotted(vscode-form-helper) { margin-bottom: 0; margin-top: 0; } :host([variant='vertical']) ::slotted(vscode-label), :host([variant='settings-group']) ::slotted(vscode-label) { display: block; margin-left: 0; text-align: left; } :host([variant='settings-group']) ::slotted(vscode-inputbox), :host([variant='settings-group']) ::slotted(vscode-textfield), :host([variant='settings-group']) ::slotted(vscode-textarea), :host([variant='settings-group']) ::slotted(vscode-single-select), :host([variant='settings-group']) ::slotted(vscode-multi-select) { margin-top: 9px; } ::slotted(vscode-button:first-child) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-button) { margin-left: 0; } ::slotted(vscode-button) { margin-right: 4px; } `, ]"
         }
       ],
       "exports": [
@@ -3188,30 +3167,41 @@
           "name": "default",
           "declaration": {
             "name": "styles",
-            "module": "src/vscode-form-helper/vscode-form-helper.styles.ts"
+            "module": "src/vscode-form-group/vscode-form-group.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/vscode-form-helper/vscode-form-helper.ts",
+      "path": "src/vscode-form-group/vscode-form-group.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)",
-          "name": "VscodeFormHelper",
+          "description": "",
+          "name": "VscodeFormGroup",
           "cssProperties": [
             {
-              "description": "Default text color. 90% transparency version of `--vscode-foreground` by default.",
-              "name": "--vsc-foreground-translucent"
+              "description": "The width of the label in horizontal mode",
+              "name": "--label-width",
+              "default": "150px"
+            },
+            {
+              "description": "The right margin of the label in horizontal mode",
+              "name": "--label-right-margin",
+              "default": "14px"
             }
           ],
           "members": [
             {
-              "kind": "method",
-              "name": "_injectLightDOMStyles",
-              "privacy": "private"
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "FormGroupVariant"
+              },
+              "default": "'horizontal'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -3227,29 +3217,39 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "FormGroupVariant"
+              },
+              "default": "'horizontal'",
+              "fieldName": "variant"
+            }
+          ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
           },
-          "tagName": "vscode-form-helper",
+          "tagName": "vscode-form-group",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeFormHelper",
+          "name": "VscodeFormGroup",
           "declaration": {
-            "name": "VscodeFormHelper",
-            "module": "src/vscode-form-helper/vscode-form-helper.ts"
+            "name": "VscodeFormGroup",
+            "module": "src/vscode-form-group/vscode-form-group.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-form-helper",
+          "name": "vscode-form-group",
           "declaration": {
-            "name": "VscodeFormHelper",
-            "module": "src/vscode-form-helper/vscode-form-helper.ts"
+            "name": "VscodeFormGroup",
+            "module": "src/vscode-form-group/vscode-form-group.ts"
           }
         }
       ]
@@ -5286,6 +5286,211 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-progress-bar/vscode-progress-bar.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { display: block; height: 2px; width: 100%; outline: none; } .container { position: relative; width: 100%; height: 100%; overflow: hidden; } .track { position: absolute; inset: 0; background: transparent; } .indicator { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; background: var(--vscode-progressBar-background, #0078d4); will-change: transform, width, left; } /* Determinate mode: width is set inline via style attribute */ .discrete .indicator { transition: width 100ms linear; } /* Indeterminate mode: VS Code style progress bit */ .infinite .indicator { width: 2%; animation-name: progress; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; transform: translate3d(0px, 0px, 0px); } /* Long running: reduce GPU pressure using stepped animation */ .infinite.infinite-long-running .indicator { animation-timing-function: steps(100); } /* Keyframes adapted from VS Code */ @keyframes progress { from { transform: translateX(0%) scaleX(1); } 50% { transform: translateX(2500%) scaleX(3); } to { transform: translateX(4900%) scaleX(1); } } @media (prefers-reduced-motion: reduce) { .discrete .indicator { transition: none; } .infinite .indicator, .infinite-long-running .indicator { animation: none; width: 100%; } } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "styles",
+            "module": "src/vscode-progress-bar/vscode-progress-bar.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-progress-bar/vscode-progress-bar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "VscodeProgressBar",
+          "cssProperties": [
+            {
+              "name": "--vscode-progressBar-background",
+              "default": "#0078d4"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Current value for determinate mode. If undefined/NaN, the bar is indeterminate.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Maximum value for determinate mode.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force indeterminate mode even if value is set.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "longRunningThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "15000",
+              "description": "Switch to a gentler animation after this many ms in indeterminate mode.",
+              "attribute": "long-running-threshold"
+            },
+            {
+              "kind": "field",
+              "name": "_longRunning",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_longRunningHandle",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_isDeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_maybeStartLongRunningTimer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_clearLongRunningTimer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Current value for determinate mode. If undefined/NaN, the bar is indeterminate.",
+              "fieldName": "value"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "Maximum value for determinate mode.",
+              "fieldName": "max"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force indeterminate mode even if value is set.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "long-running-threshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "15000",
+              "description": "Switch to a gentler animation after this many ms in indeterminate mode.",
+              "fieldName": "longRunningThreshold"
+            }
+          ],
+          "superclass": {
+            "name": "VscElement",
+            "module": "/src/includes/VscElement.js"
+          },
+          "tagName": "vscode-progress-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VscodeProgressBar",
+          "declaration": {
+            "name": "VscodeProgressBar",
+            "module": "src/vscode-progress-bar/vscode-progress-bar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "vscode-progress-bar",
+          "declaration": {
+            "name": "VscodeProgressBar",
+            "module": "src/vscode-progress-bar/vscode-progress-bar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vscode-progress-ring/vscode-progress-ring.styles.ts",
@@ -5575,64 +5780,64 @@
             },
             {
               "kind": "field",
-              "name": "_slottedText",
+              "name": "form",
               "type": {
-                "text": "string"
+                "text": "HTMLFormElement | null"
               },
-              "privacy": "private",
-              "default": "''",
-              "inheritedFrom": {
-                "name": "LabelledCheckboxOrRadioMixin",
-                "module": "src/includes/form-button-widget/LabelledCheckboxOrRadio.ts"
-              }
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "_inputEl",
+              "name": "validity",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "ValidityState"
               },
-              "privacy": "private"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "_internals",
+              "name": "validationMessage",
               "type": {
-                "text": "ElementInternals"
+                "text": "string"
               },
-              "privacy": "private"
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "willValidate",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "boolean"
               },
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "_slottedText",
               "type": {
-                "text": "ValidityState"
+                "text": "string"
               },
-              "readonly": true
+              "privacy": "private",
+              "default": "''",
+              "inheritedFrom": {
+                "name": "LabelledCheckboxOrRadioMixin",
+                "module": "src/includes/form-button-widget/LabelledCheckboxOrRadio.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "_inputEl",
               "type": {
-                "text": "string"
+                "text": "HTMLInputElement"
               },
-              "readonly": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "willValidate",
+              "name": "_internals",
               "type": {
-                "text": "boolean"
+                "text": "ElementInternals"
               },
-              "readonly": true
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -6084,27 +6289,14 @@
               "name": "_checkNext",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "_onKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
-              "name": "_onKeyDownBound",
+              "name": "_handleKeyDown",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_onChange",
+              "name": "_handleChange",
               "privacy": "private",
               "parameters": [
                 {
@@ -6117,7 +6309,7 @@
             },
             {
               "kind": "method",
-              "name": "_onSlotChange",
+              "name": "_handleSlotChange",
               "privacy": "private"
             },
             {