@vscode-elements/elements 1.15.0 → 1.16.1

package/README.md

@@ -101,7 +101,11 @@ Same as above, but it also generates coverage.
 
 ### test:watch
 
-Watches the transpiled test files and runs them if any changes are detected. This script does not compile the test files; the `build:watch` script needs to be run in a separate terminal. However, it can also be run in parallel with the `start` script instead of build:watch.
+Watches file changes and runs the tests automatically when any modifications are detected.
+
+### wtr:watch
+
+Starts the web-test-runner in watch mode without rebuilding any files. It can be run in a separate terminal during development, allowing you to catch new errors as you code.
 
 ### checksize
 

package/custom-elements.json

@@ -451,7 +451,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-button-background, #0078d4); border-color: var(--vscode-button-border, transparent); border-style: solid; border-radius: 2px; border-width: 1px; color: var(--vscode-button-foreground, #ffffff); cursor: pointer; display: inline-block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); line-height: 22px; overflow: hidden; padding: 1px 13px; user-select: none; white-space: nowrap; } :host([secondary]) { color: var(--vscode-button-secondaryForeground, #cccccc); background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var( --vscode-button-border, var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07)) ); } :host([disabled]) { cursor: default; opacity: 0.4; pointer-events: none; } :host(:hover) { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(vscode-icon) { color: inherit; } .wrapper { align-items: center; box-sizing: border-box; display: flex; justify-content: center; position: relative; width: 100%; } slot { align-items: center; display: flex; height: 100%; } .icon { color: inherit; display: block; margin-right: 3px; } .icon-after { color: inherit; display: block; margin-left: 3px; } `, ]"
+          "default": "[ defaultStyles, css` :host { background-color: var(--vscode-button-background, #0078d4); border-color: var(--vscode-button-border, transparent); border-style: solid; border-radius: 2px; border-width: 1px; color: var(--vscode-button-foreground, #ffffff); cursor: pointer; display: inline-flex; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); line-height: 22px; overflow: hidden; padding: 0; user-select: none; white-space: nowrap; } :host([secondary]) { color: var(--vscode-button-secondaryForeground, #cccccc); background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var( --vscode-button-border, var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07)) ); } :host([disabled]) { cursor: default; opacity: 0.4; pointer-events: none; } :host(:hover) { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(*:last-child) { margin-right: 0; } ::slotted(vscode-icon) { color: inherit; } .wrapper { align-items: center; box-sizing: border-box; display: flex; justify-content: center; position: relative; width: 100%; height: 100%; padding: 1px 13px; } :host(:empty) .wrapper, :host([icon-only]) .wrapper { min-height: 24px; min-width: 16px; padding: 1px 5px; } slot { align-items: center; display: flex; height: 100%; } .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; } .divider { display: var(--divider-display, none); background-color: transparent; padding: 4px 0; box-sizing: border-box; } :host(:hover) .divider, :host(:focus) .divider { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([secondary]) .divider { background-color: var(--vscode-button-secondaryBackground, #313131); } :host([secondary]:hover) .divider, :host([secondary]:focus) .divider { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } .divider > div { background-color: var( --vscode-button-separator, rgba(255, 255, 255, 0.4) ); height: 100%; width: 1px; margin: 0; } :host([secondary]) .divider > div { background-color: var(--vscode-button-secondaryForeground, #cccccc); opacity: 0.4; } `, ]"
         }
       ],
       "exports": [
@@ -634,6 +634,16 @@
               "attribute": "name",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "icon-only",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "type",
@@ -837,6 +847,14 @@
               "default": "undefined",
               "fieldName": "name"
             },
+            {
+              "name": "icon-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "iconOnly"
+            },
             {
               "name": "type",
               "type": {
@@ -881,6 +899,127 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-button-group/vscode-button-group.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResultGroup"
+          },
+          "default": "[ defaultStyles, css` :host { display: inline-flex; align-items: stretch; padding: 0; border: none; } ::slotted(vscode-button:not(:first-child)) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; } ::slotted(vscode-button:not(:last-child)) { --divider-display: block; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; } ::slotted(vscode-button:focus) { z-index: 1; } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "styles",
+            "module": "src/vscode-button-group/vscode-button-group.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vscode-button-group/vscode-button-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"
+            },
+            {
+              "name": "--vscode-button-secondaryHoverBackground",
+              "default": "#3c3c3c"
+            },
+            {
+              "name": "--vscode-focusBorder",
+              "default": "#0078d4"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "version",
+              "type": {
+                "text": "string"
+              },
+              "description": "VSCode Elements version",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "VscElement",
+                "module": "src/includes/VscElement.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "VscElement",
+            "module": "/src/includes/VscElement.js"
+          },
+          "tagName": "vscode-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "VscodeButtonGroup",
+          "declaration": {
+            "name": "VscodeButtonGroup",
+            "module": "src/vscode-button-group/vscode-button-group.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "vscode-button-group",
+          "declaration": {
+            "name": "VscodeButtonGroup",
+            "module": "src/vscode-button-group/vscode-button-group.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vscode-checkbox/vscode-checkbox.styles.ts",
@@ -7472,7 +7611,7 @@
           "type": {
             "text": "CSSResultGroup"
           },
-          "default": "[ defaultStyles, css` :host { --separator-border: var(--vscode-editorWidget-border, transparent); border: 1px solid var(--vscode-editorWidget-border); display: block; overflow: hidden; position: relative; } ::slotted(*) { height: 100%; width: 100%; } ::slotted(vscode-split-layout) { border: 0; } .wrapper { display: flex; height: 100%; width: 100%; } .wrapper.horizontal { flex-direction: column; } .start { box-sizing: border-box; flex: 1; min-height: 0; min-width: 0; } :host([split='vertical']) .start { border-right: 1px solid var(--separator-border); } :host([split='horizontal']) .start { border-bottom: 1px solid var(--separator-border); } .end { flex: 1; min-height: 0; min-width: 0; } :host([split='vertical']) .start, :host([split='vertical']) .end { height: 100%; } :host([split='horizontal']) .start, :host([split='horizontal']) .end { width: 100%; } .handle-overlay { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .handle-overlay.active { display: block; } .handle-overlay.split-vertical { cursor: ew-resize; } .handle-overlay.split-horizontal { cursor: ns-resize; } .handle { background-color: transparent; position: absolute; z-index: 2; } .handle.hover { transition: background-color 0.1s ease-out 0.3s; background-color: var(--vscode-sash-hoverBorder); } .handle.hide { background-color: transparent; transition: background-color 0.1s ease-out; } .handle.split-vertical { cursor: ew-resize; height: 100%; } .handle.split-horizontal { cursor: ns-resize; width: 100%; } `, ]"
+          "default": "[ defaultStyles, css` :host { --separator-border: var(--vscode-editorWidget-border, #454545); border: 1px solid var(--vscode-editorWidget-border, #454545); display: block; overflow: hidden; position: relative; } ::slotted(*) { height: 100%; width: 100%; } ::slotted(vscode-split-layout) { border: 0; } .wrapper { display: flex; height: 100%; width: 100%; } .wrapper.horizontal { flex-direction: column; } .start { box-sizing: border-box; flex: 1; min-height: 0; min-width: 0; } :host([split='vertical']) .start { border-right: 1px solid var(--separator-border); } :host([split='horizontal']) .start { border-bottom: 1px solid var(--separator-border); } .end { flex: 1; min-height: 0; min-width: 0; } :host([split='vertical']) .start, :host([split='vertical']) .end { height: 100%; } :host([split='horizontal']) .start, :host([split='horizontal']) .end { width: 100%; } .handle-overlay { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .handle-overlay.active { display: block; } .handle-overlay.split-vertical { cursor: ew-resize; } .handle-overlay.split-horizontal { cursor: ns-resize; } .handle { background-color: transparent; position: absolute; z-index: 2; } .handle.hover { transition: background-color 0.1s ease-out 0.3s; background-color: var(--vscode-sash-hoverBorder, #0078d4); } .handle.hide { background-color: transparent; transition: background-color 0.1s ease-out; } .handle.split-vertical { cursor: ew-resize; height: 100%; } .handle.split-horizontal { cursor: ns-resize; width: 100%; } `, ]"
         }
       ],
       "exports": [
@@ -7549,8 +7688,16 @@
           "name": "VscodeSplitLayout",
           "cssProperties": [
             {
-              "name": "--hover-border",
-              "default": "var(--vscode-sash-hoverBorder)"
+              "name": "--separator-border",
+              "default": "#454545"
+            },
+            {
+              "name": "--vscode-editorWidget-border",
+              "default": "#454545"
+            },
+            {
+              "name": "--vscode-sash-hoverBorder",
+              "default": "#0078d4"
             }
           ],
           "members": [