@vscode-elements/elements 2.4.1-pre.0 → 2.5.0

package/custom-elements.json

@@ -180,6 +180,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/includes/sizes.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "px",
+          "return": {
+            "type": {
+              "text": "Px"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "percent",
+          "return": {
+            "type": {
+              "text": "Percent"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "toPercent",
+          "return": {
+            "type": {
+              "text": "Percent"
+            }
+          },
+          "parameters": [
+            {
+              "name": "px",
+              "type": {
+                "text": "Px"
+              }
+            },
+            {
+              "name": "container",
+              "type": {
+                "text": "Px"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "toPx",
+          "return": {
+            "type": {
+              "text": "Px"
+            }
+          },
+          "parameters": [
+            {
+              "name": "p",
+              "type": {
+                "text": "Percent"
+              }
+            },
+            {
+              "name": "container",
+              "type": {
+                "text": "Px"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "parseSizeAttributeToPercent",
+          "return": {
+            "type": {
+              "text": "Percent | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "raw",
+              "type": {
+                "text": "string | number"
+              }
+            },
+            {
+              "name": "base",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "px",
+          "declaration": {
+            "name": "px",
+            "module": "src/includes/sizes.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "percent",
+          "declaration": {
+            "name": "percent",
+            "module": "src/includes/sizes.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toPercent",
+          "declaration": {
+            "name": "toPercent",
+            "module": "src/includes/sizes.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toPx",
+          "declaration": {
+            "name": "toPx",
+            "module": "src/includes/sizes.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "parseSizeAttributeToPercent",
+          "declaration": {
+            "name": "parseSizeAttributeToPercent",
+            "module": "src/includes/sizes.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/includes/style-property-map.ts",
@@ -636,6 +787,147 @@
         }
       ]
     },
+    {
+      "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"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "warn",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "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",
@@ -646,7 +938,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { cursor: pointer; display: inline-block; width: auto; } :host([block]) { display: block; width: 100%; } .base { align-items: center; background-color: var(--vscode-button-background, #0078d4); border-bottom-left-radius: var(--vsc-border-left-radius, 2px); border-bottom-right-radius: var(--vsc-border-right-radius, 2px); border-bottom-width: 1px; border-color: var(--vscode-button-border, transparent); border-left-width: var(--vsc-border-left-width, 1px); border-right-width: var(--vsc-border-right-width, 1px); border-style: solid; border-top-left-radius: var(--vsc-border-left-radius, 2px); border-top-right-radius: var(--vsc-border-right-radius, 2px); border-top-width: 1px; box-sizing: border-box; color: var(--vscode-button-foreground, #ffffff); display: flex; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); height: 100%; justify-content: center; line-height: 22px; overflow: hidden; padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px)) 1px 13px; position: relative; user-select: none; white-space: nowrap; width: 100%; } :host([block]) .base { min-height: 28px; text-align: center; width: 100%; } .base:after { background-color: var( --vscode-button-separator, rgba(255, 255, 255, 0.4) ); content: var(--vsc-base-after-content); display: var(--vsc-divider-display, none); position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; } :host([secondary]) .base:after { background-color: var(--vscode-button-secondaryForeground, #cccccc); opacity: 0.4; } :host([secondary]) .base { 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) .base { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) .base { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) .base { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) .base { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) .base { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) .base { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) .base { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) .base { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(*:last-child) { margin-right: 0; } ::slotted(vscode-icon) { color: inherit; } .content { display: flex; position: relative; width: 100%; height: 100%; padding: 1px 13px; } :host(:empty) .base, .base.icon-only { min-height: 24px; min-width: 26px; padding: 1px 4px; } slot { align-items: center; display: flex; height: 100%; } .has-content-before slot[name='content-before'] { margin-right: 4px; } .has-content-after slot[name='content-after'] { margin-left: 4px; } .icon, .icon-after { color: inherit; display: block; } :host(:not(:empty)) .icon { margin-right: 3px; } :host(:not(:empty)) .icon-after, :host([icon]) .icon-after { margin-left: 3px; } `, ]"
+          "default": "[ defaultStyles, css` :host { cursor: pointer; display: inline-block; width: auto; } :host([block]) { display: block; width: 100%; } .base { align-items: center; background-color: var(--vscode-button-background, #0078d4); border-bottom-left-radius: var(--vsc-border-left-radius, 4px); border-bottom-right-radius: var(--vsc-border-right-radius, 4px); border-bottom-width: 1px; border-color: var(--vscode-button-border, transparent); border-left-width: var(--vsc-border-left-width, 1px); border-right-width: var(--vsc-border-right-width, 1px); border-style: solid; border-top-left-radius: var(--vsc-border-left-radius, 4px); border-top-right-radius: var(--vsc-border-right-radius, 4px); border-top-width: 1px; box-sizing: border-box; color: var(--vscode-button-foreground, #ffffff); display: flex; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); height: 100%; justify-content: center; line-height: 22px; overflow: hidden; padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px)) 1px 13px; position: relative; user-select: none; white-space: nowrap; width: 100%; } :host([block]) .base { min-height: 28px; text-align: center; width: 100%; } .base:after { background-color: var( --vscode-button-separator, rgba(255, 255, 255, 0.4) ); content: var(--vsc-base-after-content); display: var(--vsc-divider-display, none); position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; } :host([secondary]) .base:after { background-color: var(--vscode-button-secondaryForeground, #cccccc); opacity: 0.4; } :host([secondary]) .base { 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) .base { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) .base { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) .base { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) .base { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) .base { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) .base { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) .base { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) .base { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(*:last-child) { margin-right: 0; } ::slotted(vscode-icon) { color: inherit; } .content { display: flex; position: relative; width: 100%; height: 100%; padding: 1px 13px; } :host(:empty) .base, .base.icon-only { min-height: 24px; min-width: 26px; padding: 1px 4px; } slot { align-items: center; display: flex; height: 100%; } .has-content-before slot[name='content-before'] { margin-right: 4px; } .has-content-after slot[name='content-after'] { margin-left: 4px; } .icon, .icon-after { color: inherit; display: block; } :host(:not(:empty)) .icon { margin-right: 3px; } :host(:not(:empty)) .icon-after, :host([icon]) .icon-after { margin-left: 3px; } `, ]"
         }
       ],
       "exports": [
@@ -1121,189 +1413,48 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "iconOnly"
-            },
-            {
-              "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/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
+              "fieldName": "iconOnly"
             },
             {
-              "kind": "field",
-              "name": "version",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "'submit' | 'reset' | 'button'"
               },
-              "description": "VSCode Elements version",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
+              "default": "'button'",
+              "fieldName": "type"
             },
             {
-              "kind": "method",
-              "name": "warn",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
+              "name": "value",
               "type": {
-                "text": "| 'default'\n    | 'counter'\n    | 'activity-bar-counter'\n    | 'tab-header-counter'"
+                "text": "string"
               },
-              "default": "'default'",
-              "fieldName": "variant"
+              "default": "''",
+              "fieldName": "value"
             }
           ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
           },
-          "tagName": "vscode-badge",
+          "tagName": "vscode-button",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeBadge",
+          "name": "VscodeButton",
           "declaration": {
-            "name": "VscodeBadge",
-            "module": "src/vscode-badge/vscode-badge.ts"
+            "name": "VscodeButton",
+            "module": "src/vscode-button/vscode-button.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-badge",
+          "name": "vscode-button",
           "declaration": {
-            "name": "VscodeBadge",
-            "module": "src/vscode-badge/vscode-badge.ts"
+            "name": "VscodeButton",
+            "module": "src/vscode-button/vscode-button.ts"
           }
         }
       ]
@@ -2298,7 +2449,7 @@
             },
             {
               "kind": "method",
-              "name": "_onActionClick",
+              "name": "_onHeaderSlotClick",
               "privacy": "private",
               "parameters": [
                 {
@@ -3721,253 +3872,56 @@
               "fieldName": "size"
             },
             {
-              "name": "spin",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable rotation animation",
-              "fieldName": "spin"
-            },
-            {
-              "name": "spin-duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "1.5",
-              "description": "Animation duration in seconds",
-              "fieldName": "spinDuration"
-            },
-            {
-              "name": "action-icon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Behaves like a button",
-              "fieldName": "actionIcon"
-            }
-          ],
-          "superclass": {
-            "name": "VscElement",
-            "module": "/src/includes/VscElement.js"
-          },
-          "tagName": "vscode-icon",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "VscodeIcon",
-          "declaration": {
-            "name": "VscodeIcon",
-            "module": "src/vscode-icon/vscode-icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "vscode-icon",
-          "declaration": {
-            "name": "VscodeIcon",
-            "module": "src/vscode-icon/vscode-icon.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-label/vscode-label.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "type": {
-            "text": "CSSResultGroup"
-          },
-          "default": "[ defaultStyles, css` :host { display: block; } .wrapper { color: var(--vscode-foreground, #cccccc); cursor: default; display: block; font-family: var(--vscode-font-family, sans-serif); font-size: var(--vscode-font-size, 13px); font-weight: 600; line-height: ${INPUT_LINE_HEIGHT_RATIO}; padding: 5px 0; } .wrapper.required:after { content: ' *'; } ::slotted(.normal) { font-weight: normal; } ::slotted(.lightened) { color: var(--vscode-foreground, #cccccc); opacity: 0.9; } `, ]"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "styles",
-            "module": "src/vscode-label/vscode-label.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/vscode-label/vscode-label.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "VscodeLabel",
-          "cssProperties": [
-            {
-              "name": "--vscode-font-family",
-              "default": "sans-serif"
-            },
-            {
-              "name": "--vscode-font-size",
-              "default": "13px"
-            },
-            {
-              "name": "--vscode-foreground",
-              "default": "#cccccc"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "htmlFor",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "for",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "id"
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_id",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "_htmlFor",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "_connected",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "_getTarget",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_connectWithTarget",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "version",
-              "type": {
-                "text": "string"
-              },
-              "description": "VSCode Elements version",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "warn",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "for",
+              "name": "spin",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "fieldName": "htmlFor"
+              "default": "false",
+              "description": "Enable rotation animation",
+              "fieldName": "spin"
             },
             {
-              "name": "id",
+              "name": "spin-duration",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "fieldName": "id"
+              "default": "1.5",
+              "description": "Animation duration in seconds",
+              "fieldName": "spinDuration"
             },
             {
-              "name": "required",
+              "name": "action-icon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "required"
+              "description": "Behaves like a button",
+              "fieldName": "actionIcon"
             }
           ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
           },
-          "tagName": "vscode-label",
+          "tagName": "vscode-icon",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeLabel",
+          "name": "VscodeIcon",
           "declaration": {
-            "name": "VscodeLabel",
-            "module": "src/vscode-label/vscode-label.ts"
+            "name": "VscodeIcon",
+            "module": "src/vscode-icon/vscode-icon.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-label",
+          "name": "vscode-icon",
           "declaration": {
-            "name": "VscodeLabel",
-            "module": "src/vscode-label/vscode-label.ts"
+            "name": "VscodeIcon",
+            "module": "src/vscode-icon/vscode-icon.ts"
           }
         }
       ]
@@ -5669,101 +5623,311 @@
         {
           "kind": "class",
           "description": "",
-          "name": "VscodeProgressBar",
+          "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"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "warn",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "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-label/vscode-label.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { display: block; } .wrapper { color: var(--vscode-foreground, #cccccc); cursor: default; display: block; font-family: var(--vscode-font-family, sans-serif); font-size: var(--vscode-font-size, 13px); font-weight: 600; line-height: ${INPUT_LINE_HEIGHT_RATIO}; padding: 5px 0; } .wrapper.required:after { content: ' *'; } ::slotted(.normal) { font-weight: normal; } ::slotted(.lightened) { color: var(--vscode-foreground, #cccccc); opacity: 0.9; } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "styles",
+            "module": "src/vscode-label/vscode-label.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-label/vscode-label.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "VscodeLabel",
           "cssProperties": [
             {
-              "name": "--vscode-progressBar-background",
-              "default": "#0078d4"
+              "name": "--vscode-font-family",
+              "default": "sans-serif"
+            },
+            {
+              "name": "--vscode-font-size",
+              "default": "13px"
+            },
+            {
+              "name": "--vscode-foreground",
+              "default": "#cccccc"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "htmlFor",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Current value for determinate mode. If undefined/NaN, the bar is indeterminate.",
-              "attribute": "value",
+              "attribute": "for",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "id",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "100",
-              "description": "Maximum value for determinate mode.",
-              "attribute": "max",
-              "reflects": true
+              "attribute": "id"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Force indeterminate mode even if value is set.",
-              "attribute": "indeterminate",
+              "attribute": "required",
               "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",
+              "name": "_id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "_longRunningHandle",
+              "name": "_htmlFor",
               "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "_isDeterminate",
+              "name": "_connected",
               "type": {
                 "text": "boolean"
               },
               "privacy": "private",
-              "readonly": true
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "_maybeStartLongRunningTimer",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "_getTarget",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_clearLongRunningTimer",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "_connectWithTarget",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -5797,64 +5961,51 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "for",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Current value for determinate mode. If undefined/NaN, the bar is indeterminate.",
-              "fieldName": "value"
+              "fieldName": "htmlFor"
             },
             {
-              "name": "max",
+              "name": "id",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "100",
-              "description": "Maximum value for determinate mode.",
-              "fieldName": "max"
+              "fieldName": "id"
             },
             {
-              "name": "indeterminate",
+              "name": "required",
               "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"
+              "fieldName": "required"
             }
           ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
           },
-          "tagName": "vscode-progress-bar",
+          "tagName": "vscode-label",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "VscodeProgressBar",
+          "name": "VscodeLabel",
           "declaration": {
-            "name": "VscodeProgressBar",
-            "module": "src/vscode-progress-bar/vscode-progress-bar.ts"
+            "name": "VscodeLabel",
+            "module": "src/vscode-label/vscode-label.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "vscode-progress-bar",
+          "name": "vscode-label",
           "declaration": {
-            "name": "VscodeProgressBar",
-            "module": "src/vscode-progress-bar/vscode-progress-bar.ts"
+            "name": "VscodeLabel",
+            "module": "src/vscode-label/vscode-label.ts"
           }
         }
       ]
@@ -9757,8 +9908,9 @@
             },
             {
               "kind": "field",
-              "name": "_minColumnWidth",
-              "privacy": "private"
+              "name": "_columnMinWidths",
+              "privacy": "private",
+              "default": "new Map<number, Percent>()"
             },
             {
               "kind": "field",
@@ -9821,6 +9973,11 @@
               "name": "columnWidths",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "columnMinWidths",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "saveHostDimensions"
@@ -9843,10 +10000,16 @@
             },
             {
               "kind": "method",
-              "name": "setMinColumnWidth",
+              "name": "setColumnMinWidthAt",
               "parameters": [
                 {
-                  "name": "width",
+                  "name": "colIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "value",
                   "type": {
                     "text": "Percent"
                   }
@@ -9959,176 +10122,41 @@
       "declarations": [
         {
           "kind": "function",
-          "name": "px",
-          "return": {
-            "type": {
-              "text": "Px"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "percent",
-          "return": {
-            "type": {
-              "text": "Percent"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "toPercent",
-          "return": {
-            "type": {
-              "text": "Percent"
-            }
-          },
-          "parameters": [
-            {
-              "name": "px",
-              "type": {
-                "text": "Px"
-              }
-            },
-            {
-              "name": "container",
-              "type": {
-                "text": "Px"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "toPx",
-          "return": {
-            "type": {
-              "text": "Px"
-            }
-          },
-          "parameters": [
-            {
-              "name": "p",
-              "type": {
-                "text": "Percent"
-              }
-            },
-            {
-              "name": "container",
-              "type": {
-                "text": "Px"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "calculateColumnWidths",
-          "return": {
-            "type": {
-              "text": "Percent[]"
-            }
-          },
-          "parameters": [
-            {
-              "name": "widths",
-              "type": {
-                "text": "Percent[]"
-              }
-            },
-            {
-              "name": "splitterIndex",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "name": "delta",
-              "type": {
-                "text": "Percent"
-              }
-            },
-            {
-              "name": "minWidth",
-              "type": {
-                "text": "Percent"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "parseSizeAttributeToPercent",
+          "name": "calculateColumnWidths",
           "return": {
             "type": {
-              "text": "number | null"
+              "text": "Percent[]"
             }
           },
           "parameters": [
             {
-              "name": "raw",
+              "name": "widths",
               "type": {
-                "text": "string | number"
+                "text": "Percent[]"
               }
             },
             {
-              "name": "base",
+              "name": "splitterIndex",
               "type": {
                 "text": "number"
               }
+            },
+            {
+              "name": "delta",
+              "type": {
+                "text": "Percent"
+              }
+            },
+            {
+              "name": "minWidths",
+              "type": {
+                "text": "Map<number, Percent>"
+              }
             }
           ]
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "px",
-          "declaration": {
-            "name": "px",
-            "module": "src/vscode-table/calculations.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "percent",
-          "declaration": {
-            "name": "percent",
-            "module": "src/vscode-table/calculations.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toPercent",
-          "declaration": {
-            "name": "toPercent",
-            "module": "src/vscode-table/calculations.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "toPx",
-          "declaration": {
-            "name": "toPx",
-            "module": "src/vscode-table/calculations.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "calculateColumnWidths",
@@ -10136,14 +10164,6 @@
             "name": "calculateColumnWidths",
             "module": "src/vscode-table/calculations.ts"
           }
-        },
-        {
-          "kind": "js",
-          "name": "parseSizeAttributeToPercent",
-          "declaration": {
-            "name": "parseSizeAttributeToPercent",
-            "module": "src/vscode-table/calculations.ts"
-          }
         }
       ]
     },
@@ -10739,6 +10759,11 @@
               "name": "_handleSplitterPointerCancel",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_handleMinColumnWidthChange",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "version",
@@ -11275,6 +11300,15 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "minWidth",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "attribute": "min-width"
+            },
             {
               "kind": "field",
               "name": "version",
@@ -11305,6 +11339,16 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "min-width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "fieldName": "minWidth"
+            }
+          ],
           "superclass": {
             "name": "VscElement",
             "module": "/src/includes/VscElement.js"
@@ -11726,7 +11770,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: inline-block; height: auto; position: relative; width: 320px; } :host([cols]) { width: auto; } :host([rows]) { height: auto; } .shadow { box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset; display: none; inset: 0 0 auto 0; height: 6px; pointer-events: none; position: absolute; width: 100%; } .shadow.visible { display: block; } textarea { background-color: var(--vscode-settings-textInputBackground, #313131); border-color: var(--vscode-settings-textInputBorder, transparent); border-radius: 2px; border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--vscode-settings-textInputForeground, #cccccc); display: block; font-family: var(--vscode-font-family, sans-serif); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); height: 100%; width: 100%; } :host([cols]) textarea { width: auto; } :host([rows]) textarea { height: auto; } :host([invalid]) textarea, :host(:invalid) textarea { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } textarea.monospace { background-color: var(--vscode-editor-background, #1f1f1f); color: var(--vscode-editor-foreground, #cccccc); font-family: var(--vscode-editor-font-family, monospace); font-size: var(--vscode-editor-font-size, 14px); font-weight: var(--vscode-editor-font-weight, normal); } .textarea.monospace::placeholder { color: var( --vscode-editor-inlineValuesForeground, rgba(255, 255, 255, 0.5) ); } textarea.cursor-pointer { cursor: pointer; } textarea:focus { border-color: var(--vscode-focusBorder, #0078d4); outline: none; } textarea::placeholder { color: var(--vscode-input-placeholderForeground, #989898); opacity: 1; } textarea::-webkit-scrollbar-track { background-color: transparent; } textarea::-webkit-scrollbar { width: 14px; } textarea::-webkit-scrollbar-thumb { background-color: transparent; } textarea:hover::-webkit-scrollbar-thumb { background-color: var( --vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4) ); } textarea::-webkit-scrollbar-thumb:hover { background-color: var( --vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7) ); } textarea::-webkit-scrollbar-thumb:active { background-color: var( --vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4) ); } textarea::-webkit-scrollbar-corner { background-color: transparent; } textarea::-webkit-resizer { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACJJREFUeJxjYMAOZuIQZ5j5//9/rJJESczEKYGsG6cEXgAAsEEefMxkua4AAAAASUVORK5CYII='); background-repeat: no-repeat; background-position: right bottom; } `, ]"
+          "default": "[ defaultStyles, css` :host { display: inline-block; height: auto; position: relative; width: 320px; } :host([cols]) { width: auto; } :host([rows]) { height: auto; } .shadow { box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset; display: none; inset: 0 0 auto 0; height: 6px; pointer-events: none; position: absolute; width: 100%; } .shadow.visible { display: block; } textarea { background-color: var(--vscode-settings-textInputBackground, #313131); border-color: var(--vscode-settings-textInputBorder, transparent); border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--vscode-settings-textInputForeground, #cccccc); display: block; font-family: var(--vscode-font-family, sans-serif); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); height: 100%; width: 100%; } :host([cols]) textarea { width: auto; } :host([rows]) textarea { height: auto; } :host([invalid]) textarea, :host(:invalid) textarea { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } textarea.monospace { background-color: var(--vscode-editor-background, #1f1f1f); color: var(--vscode-editor-foreground, #cccccc); font-family: var(--vscode-editor-font-family, monospace); font-size: var(--vscode-editor-font-size, 14px); font-weight: var(--vscode-editor-font-weight, normal); } .textarea.monospace::placeholder { color: var( --vscode-editor-inlineValuesForeground, rgba(255, 255, 255, 0.5) ); } textarea.cursor-pointer { cursor: pointer; } textarea:focus { border-color: var(--vscode-focusBorder, #0078d4); outline: none; } textarea::placeholder { color: var(--vscode-input-placeholderForeground, #989898); opacity: 1; } textarea::-webkit-scrollbar-track { background-color: transparent; } textarea::-webkit-scrollbar { width: 14px; } textarea::-webkit-scrollbar-thumb { background-color: transparent; } textarea:hover::-webkit-scrollbar-thumb { background-color: var( --vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4) ); } textarea::-webkit-scrollbar-thumb:hover { background-color: var( --vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7) ); } textarea::-webkit-scrollbar-thumb:active { background-color: var( --vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4) ); } textarea::-webkit-scrollbar-corner { background-color: transparent; } textarea::-webkit-resizer { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACJJREFUeJxjYMAOZuIQZ5j5//9/rJJESczEKYGsG6cEXgAAsEEefMxkua4AAAAASUVORK5CYII='); background-repeat: no-repeat; background-position: right bottom; } `, ]"
         }
       ],
       "exports": [
@@ -12359,7 +12403,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { display: inline-block; width: 320px; } .root { align-items: center; background-color: var(--vscode-settings-textInputBackground, #313131); border-color: var( --vscode-settings-textInputBorder, var(--vscode-settings-textInputBackground, #3c3c3c) ); border-radius: 2px; border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--vscode-settings-textInputForeground, #cccccc); display: flex; max-width: 100%; position: relative; width: 100%; } :host([focused]) .root { border-color: var(--vscode-focusBorder, #0078d4); } :host([invalid]), :host(:invalid) { border-color: var(--vscode-inputValidation-errorBorder, #be1100); } :host([invalid]) input, :host(:invalid) input { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); } ::slotted([slot='content-before']) { display: block; margin-left: 2px; } ::slotted([slot='content-after']) { display: block; margin-right: 2px; } slot[name='content-before'], slot[name='content-after'] { align-items: center; display: flex; } input { background-color: var(--vscode-settings-textInputBackground, #313131); border: 0; box-sizing: border-box; color: var(--vscode-settings-textInputForeground, #cccccc); display: block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, 'normal'); line-height: 18px; outline: none; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; padding-top: 3px; width: 100%; } input:read-only:not([type='file']) { cursor: not-allowed; } input::placeholder { color: var(--vscode-input-placeholderForeground, #989898); opacity: 1; } input[type='file'] { line-height: 24px; padding-bottom: 0; padding-left: 2px; padding-top: 0; } input[type='file']::file-selector-button { background-color: var(--vscode-button-background, #0078d4); border: 0; border-radius: 2px; color: var(--vscode-button-foreground, #ffffff); cursor: pointer; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, 'normal'); line-height: 20px; padding: 0 14px; } input[type='file']::file-selector-button:hover { background-color: var(--vscode-button-hoverBackground, #026ec1); } `, ]"
+          "default": "[ defaultStyles, css` :host { display: inline-block; width: 320px; } .root { align-items: center; background-color: var(--vscode-settings-textInputBackground, #313131); border-color: var( --vscode-settings-textInputBorder, var(--vscode-settings-textInputBackground, #3c3c3c) ); border-radius: 4px; border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--vscode-settings-textInputForeground, #cccccc); display: flex; max-width: 100%; position: relative; width: 100%; } :host([focused]) .root { border-color: var(--vscode-focusBorder, #0078d4); } :host([invalid]), :host(:invalid) { border-color: var(--vscode-inputValidation-errorBorder, #be1100); } :host([invalid]) input, :host(:invalid) input { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); } ::slotted([slot='content-before']) { display: block; margin-left: 2px; } ::slotted([slot='content-after']) { display: block; margin-right: 2px; } slot[name='content-before'], slot[name='content-after'] { align-items: center; display: flex; } input { background-color: var(--vscode-settings-textInputBackground, #313131); border: 0; box-sizing: border-box; color: var(--vscode-settings-textInputForeground, #cccccc); display: block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, 'normal'); line-height: 18px; outline: none; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; padding-top: 3px; width: 100%; } input:read-only:not([type='file']) { cursor: not-allowed; } input::placeholder { color: var(--vscode-input-placeholderForeground, #989898); opacity: 1; } input[type='file'] { line-height: 24px; padding-bottom: 0; padding-left: 2px; padding-top: 0; } input[type='file']::file-selector-button { background-color: var(--vscode-button-background, #0078d4); border: 0; border-radius: 2px; color: var(--vscode-button-foreground, #ffffff); cursor: pointer; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, 'normal'); line-height: 20px; padding: 0 14px; } input[type='file']::file-selector-button:hover { background-color: var(--vscode-button-hoverBackground, #026ec1); } `, ]"
         }
       ],
       "exports": [
@@ -13197,96 +13241,6 @@
         }
       ]
     },
-    {
-      "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 { display: block; } div { 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": "Simple container to arrange the toolar buttons",
-          "name": "VscodeToolbarContainer",
-          "members": [
-            {
-              "kind": "field",
-              "name": "version",
-              "type": {
-                "text": "string"
-              },
-              "description": "VSCode Elements version",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "VscElement",
-                "module": "src/includes/VscElement.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "warn",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "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/helpers.ts",
@@ -14784,6 +14738,96 @@
         }
       ]
     },
+    {
+      "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 { display: block; } div { 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": "Simple container to arrange the toolar buttons",
+          "name": "VscodeToolbarContainer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "warn",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "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/includes/vscode-select/OptionListController.ts",