@vscode-elements/elements 2.1.1-pre.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +1235 -963
  3. package/dist/bundled.js +286 -124
  4. package/dist/includes/VscElement.js +1 -1
  5. package/dist/includes/VscElement.js.map +1 -1
  6. package/dist/includes/test-helpers.d.ts +2 -2
  7. package/dist/includes/test-helpers.d.ts.map +1 -1
  8. package/dist/includes/test-helpers.js +2 -1
  9. package/dist/includes/test-helpers.js.map +1 -1
  10. package/dist/main.d.ts +1 -0
  11. package/dist/main.d.ts.map +1 -1
  12. package/dist/main.js +1 -0
  13. package/dist/main.js.map +1 -1
  14. package/dist/vscode-button/vscode-button.d.ts +8 -0
  15. package/dist/vscode-button/vscode-button.d.ts.map +1 -1
  16. package/dist/vscode-button/vscode-button.js +37 -12
  17. package/dist/vscode-button/vscode-button.js.map +1 -1
  18. package/dist/vscode-button/vscode-button.styles.d.ts.map +1 -1
  19. package/dist/vscode-button/vscode-button.styles.js +47 -54
  20. package/dist/vscode-button/vscode-button.styles.js.map +1 -1
  21. package/dist/vscode-button-group/vscode-button-group.styles.d.ts.map +1 -1
  22. package/dist/vscode-button-group/vscode-button-group.styles.js +2 -0
  23. package/dist/vscode-button-group/vscode-button-group.styles.js.map +1 -1
  24. package/dist/vscode-checkbox/vscode-checkbox.d.ts +5 -2
  25. package/dist/vscode-checkbox/vscode-checkbox.d.ts.map +1 -1
  26. package/dist/vscode-checkbox/vscode-checkbox.js +14 -9
  27. package/dist/vscode-checkbox/vscode-checkbox.js.map +1 -1
  28. package/dist/vscode-checkbox/vscode-checkbox.styles.d.ts.map +1 -1
  29. package/dist/vscode-checkbox/vscode-checkbox.styles.js +71 -0
  30. package/dist/vscode-checkbox/vscode-checkbox.styles.js.map +1 -1
  31. package/dist/vscode-progress-bar/index.d.ts +2 -0
  32. package/dist/vscode-progress-bar/index.d.ts.map +1 -0
  33. package/dist/vscode-progress-bar/index.js +2 -0
  34. package/dist/vscode-progress-bar/index.js.map +1 -0
  35. package/dist/vscode-progress-bar/vscode-progress-bar.d.ts +45 -0
  36. package/dist/vscode-progress-bar/vscode-progress-bar.d.ts.map +1 -0
  37. package/dist/vscode-progress-bar/vscode-progress-bar.js +135 -0
  38. package/dist/vscode-progress-bar/vscode-progress-bar.js.map +1 -0
  39. package/dist/vscode-progress-bar/vscode-progress-bar.styles.d.ts +4 -0
  40. package/dist/vscode-progress-bar/vscode-progress-bar.styles.d.ts.map +1 -0
  41. package/dist/vscode-progress-bar/vscode-progress-bar.styles.js +82 -0
  42. package/dist/vscode-progress-bar/vscode-progress-bar.styles.js.map +1 -0
  43. package/dist/vscode-table/vscode-table.js +1 -1
  44. package/dist/vscode-table/vscode-table.js.map +1 -1
  45. package/package.json +1 -1
  46. package/vscode.css-custom-data.json +5 -0
  47. package/vscode.html-custom-data.json +33 -1
package/custom-elements.json CHANGED
@@ -4,78 +4,19 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "src/vscode-badge/vscode-badge.styles.ts",
8
- "declarations": [
9
- {
10
- "kind": "variable",
11
- "name": "styles",
12
- "type": {
13
- "text": "CSSResultGroup"
14
- },
15
- "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; } `, ]"
16
- }
17
- ],
18
- "exports": [
19
- {
20
- "kind": "js",
21
- "name": "default",
22
- "declaration": {
23
- "name": "styles",
24
- "module": "src/vscode-badge/vscode-badge.styles.ts"
25
- }
26
- }
27
- ]
7
+ "path": "src/includes/AssociatedFormControl.ts",
8
+ "declarations": [],
9
+ "exports": []
28
10
  },
29
11
  {
30
12
  "kind": "javascript-module",
31
- "path": "src/vscode-badge/vscode-badge.ts",
13
+ "path": "src/includes/VscElement.ts",
32
14
  "declarations": [
33
15
  {
34
16
  "kind": "class",
35
- "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.",
36
- "name": "VscodeBadge",
37
- "cssProperties": [
38
- {
39
- "description": "A sans-serif font type depends on the host OS.",
40
- "name": "--vscode-font-family",
41
- "default": "sans-serif"
42
- },
43
- {
44
- "name": "--vscode-contrastBorder",
45
- "default": "transparent"
46
- },
47
- {
48
- "description": "default and counter variant background color",
49
- "name": "--vscode-badge-background",
50
- "default": "#616161"
51
- },
52
- {
53
- "description": "default and counter variant foreground color",
54
- "name": "--vscode-badge-foreground",
55
- "default": "#f8f8f8"
56
- },
57
- {
58
- "description": "activity bar variant background color",
59
- "name": "--vscode-activityBarBadge-background",
60
- "default": "#0078d4"
61
- },
62
- {
63
- "description": "activity bar variant foreground color",
64
- "name": "--vscode-activityBarBadge-foreground",
65
- "default": "#ffffff"
66
- }
67
- ],
17
+ "description": "",
18
+ "name": "VscElement",
68
19
  "members": [
69
- {
70
- "kind": "field",
71
- "name": "variant",
72
- "type": {
73
- "text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
74
- },
75
- "default": "'default'",
76
- "attribute": "variant",
77
- "reflects": true
78
- },
79
20
  {
80
21
  "kind": "field",
81
22
  "name": "version",
@@ -83,501 +24,589 @@
83
24
  "text": "string"
84
25
  },
85
26
  "description": "VSCode Elements version",
86
- "readonly": true,
87
- "inheritedFrom": {
88
- "name": "VscElement",
89
- "module": "src/includes/VscElement.ts"
90
- }
27
+ "readonly": true
91
28
  }
92
29
  ],
93
- "attributes": [
30
+ "superclass": {
31
+ "name": "LitElement",
32
+ "package": "lit"
33
+ },
34
+ "customElement": true
35
+ },
36
+ {
37
+ "kind": "function",
38
+ "name": "customElement",
39
+ "parameters": [
94
40
  {
95
- "name": "variant",
41
+ "name": "tagName",
96
42
  "type": {
97
- "text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
98
- },
99
- "default": "'default'",
100
- "fieldName": "variant"
43
+ "text": "string"
44
+ }
101
45
  }
102
46
  ],
103
- "superclass": {
104
- "name": "VscElement",
105
- "module": "/src/includes/VscElement.js"
106
- },
107
- "tagName": "vscode-badge",
108
- "customElement": true
47
+ "description": "Own implementation of Lit's customElement decorator."
109
48
  }
110
49
  ],
111
50
  "exports": [
112
51
  {
113
52
  "kind": "js",
114
- "name": "VscodeBadge",
53
+ "name": "VscElement",
115
54
  "declaration": {
116
- "name": "VscodeBadge",
117
- "module": "src/vscode-badge/vscode-badge.ts"
55
+ "name": "VscElement",
56
+ "module": "src/includes/VscElement.ts"
57
+ }
58
+ },
59
+ {
60
+ "kind": "js",
61
+ "name": "customElement",
62
+ "declaration": {
63
+ "name": "customElement",
64
+ "module": "src/includes/VscElement.ts"
118
65
  }
119
66
  },
120
67
  {
121
68
  "kind": "custom-element-definition",
122
- "name": "vscode-badge",
69
+ "name": "tagName",
123
70
  "declaration": {
124
- "name": "VscodeBadge",
125
- "module": "src/vscode-badge/vscode-badge.ts"
71
+ "name": "anonymous_0",
72
+ "module": "src/includes/VscElement.ts"
126
73
  }
127
74
  }
128
75
  ]
129
76
  },
130
77
  {
131
78
  "kind": "javascript-module",
132
- "path": "src/vscode-button/vscode-button.styles.ts",
79
+ "path": "src/includes/default.styles.ts",
80
+ "declarations": [],
81
+ "exports": [
82
+ {
83
+ "kind": "js",
84
+ "name": "default",
85
+ "declaration": {
86
+ "module": "src/includes/default.styles.ts"
87
+ }
88
+ }
89
+ ]
90
+ },
91
+ {
92
+ "kind": "javascript-module",
93
+ "path": "src/includes/helpers.ts",
133
94
  "declarations": [
134
95
  {
135
96
  "kind": "variable",
136
- "name": "styles",
97
+ "name": "INPUT_LINE_HEIGHT_RATIO"
98
+ },
99
+ {
100
+ "kind": "variable",
101
+ "name": "DEFUALT_INPUT_WIDGET_WIDTH",
137
102
  "type": {
138
- "text": "CSSResultGroup"
103
+ "text": "number"
139
104
  },
140
- "default": "[ defaultStyles, css` :host { cursor: pointer; display: inline-block; width: auto; } .root { 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: 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; width: 100%; } :host([secondary]) .root { 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) .root { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) .root { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) .root { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) .root { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) .root { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) .root { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) .root { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) .root { 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 { align-items: center; box-sizing: border-box; display: flex; justify-content: center; position: relative; width: 100%; height: 100%; padding: 1px 13px; } :host(:empty) .content, :host([icon-only]) .content { min-height: 24px; min-width: 16px; padding: 1px 4px; } 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(--vsc-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; } `, ]"
105
+ "default": "320"
106
+ },
107
+ {
108
+ "kind": "function",
109
+ "name": "getDefaultFontStack"
110
+ },
111
+ {
112
+ "kind": "function",
113
+ "name": "getDefaultEditorFontStack"
141
114
  }
142
115
  ],
143
116
  "exports": [
144
117
  {
145
118
  "kind": "js",
146
- "name": "default",
119
+ "name": "INPUT_LINE_HEIGHT_RATIO",
147
120
  "declaration": {
148
- "name": "styles",
149
- "module": "src/vscode-button/vscode-button.styles.ts"
121
+ "name": "INPUT_LINE_HEIGHT_RATIO",
122
+ "module": "src/includes/helpers.ts"
123
+ }
124
+ },
125
+ {
126
+ "kind": "js",
127
+ "name": "DEFUALT_INPUT_WIDGET_WIDTH",
128
+ "declaration": {
129
+ "name": "DEFUALT_INPUT_WIDGET_WIDTH",
130
+ "module": "src/includes/helpers.ts"
131
+ }
132
+ },
133
+ {
134
+ "kind": "js",
135
+ "name": "getDefaultFontStack",
136
+ "declaration": {
137
+ "name": "getDefaultFontStack",
138
+ "module": "src/includes/helpers.ts"
139
+ }
140
+ },
141
+ {
142
+ "kind": "js",
143
+ "name": "getDefaultEditorFontStack",
144
+ "declaration": {
145
+ "name": "getDefaultEditorFontStack",
146
+ "module": "src/includes/helpers.ts"
150
147
  }
151
148
  }
152
149
  ]
153
150
  },
154
151
  {
155
152
  "kind": "javascript-module",
156
- "path": "src/vscode-button/vscode-button.ts",
153
+ "path": "src/includes/style-property-map.ts",
157
154
  "declarations": [
158
155
  {
159
- "kind": "class",
160
- "description": "Clickable element that are used to trigger actions.",
161
- "name": "VscodeButton",
162
- "cssProperties": [
156
+ "kind": "variable",
157
+ "name": "stylePropertyMap",
158
+ "description": "Implement a Lit directive similar to styleMap, but instead of setting styles via the style\nattribute (which violates CSP), it should apply styles using the style property.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)"
159
+ }
160
+ ],
161
+ "exports": [
162
+ {
163
+ "kind": "js",
164
+ "name": "stylePropertyMap",
165
+ "declaration": {
166
+ "name": "stylePropertyMap",
167
+ "module": "src/includes/style-property-map.ts"
168
+ }
169
+ }
170
+ ]
171
+ },
172
+ {
173
+ "kind": "javascript-module",
174
+ "path": "src/includes/test-helpers.ts",
175
+ "declarations": [
176
+ {
177
+ "kind": "function",
178
+ "name": "clickOnElement",
179
+ "parameters": [
163
180
  {
164
- "name": "--vscode-button-background",
165
- "default": "#0078d4"
181
+ "name": "el",
182
+ "type": {
183
+ "text": "Element"
184
+ }
166
185
  },
167
186
  {
168
- "name": "--vscode-button-foreground",
169
- "default": "#ffffff"
187
+ "name": "position",
188
+ "default": "'center'",
189
+ "type": {
190
+ "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
191
+ }
170
192
  },
171
193
  {
172
- "name": "--vscode-button-border",
173
- "default": "var(--vscode-button-background, rgba(255, 255, 255, 0.07))"
194
+ "name": "offsetX",
195
+ "default": "0"
174
196
  },
175
197
  {
176
- "name": "--vscode-button-hoverBackground",
177
- "default": "#026ec1"
178
- },
198
+ "name": "offsetY",
199
+ "default": "0"
200
+ }
201
+ ],
202
+ "description": "A testing utility that measures an element's position and clicks on it."
203
+ },
204
+ {
205
+ "kind": "function",
206
+ "name": "moveMouseOnElement",
207
+ "parameters": [
179
208
  {
180
- "description": "A sans-serif font type depends on the host OS.",
181
- "name": "--vscode-font-family",
182
- "default": "sans-serif"
209
+ "name": "el",
210
+ "type": {
211
+ "text": "Element"
212
+ }
183
213
  },
184
214
  {
185
- "name": "--vscode-font-size",
186
- "default": "13px"
187
- },
215
+ "name": "position",
216
+ "default": "'center'",
217
+ "type": {
218
+ "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
219
+ }
220
+ },
188
221
  {
189
- "name": "--vscode-font-weight",
190
- "default": "normal"
222
+ "name": "offsetX",
223
+ "default": "0"
191
224
  },
192
225
  {
193
- "name": "--vscode-button-secondaryForeground",
194
- "default": "#cccccc"
226
+ "name": "offsetY",
227
+ "default": "0"
228
+ }
229
+ ],
230
+ "description": "A testing utility that moves the mouse onto an element."
231
+ },
232
+ {
233
+ "kind": "function",
234
+ "name": "dragElement",
235
+ "return": {
236
+ "type": {
237
+ "text": "Promise<void>"
238
+ }
239
+ },
240
+ "parameters": [
241
+ {
242
+ "name": "el",
243
+ "type": {
244
+ "text": "Element"
245
+ }
195
246
  },
196
247
  {
197
- "name": "--vscode-button-secondaryBackground",
198
- "default": "#313131"
248
+ "name": "deltaX",
249
+ "default": "0"
199
250
  },
200
251
  {
201
- "name": "--vscode-button-secondaryHoverBackground",
202
- "default": "#3c3c3c"
252
+ "name": "deltaY",
253
+ "default": "0"
203
254
  },
204
255
  {
205
- "name": "--vscode-focusBorder",
206
- "default": "#0078d4"
256
+ "name": "callbacks",
257
+ "default": "{}",
258
+ "type": {
259
+ "text": "{\n afterMouseDown?: () => void | Promise<void>;\n afterMouseMove?: () => void | Promise<void>;\n }"
260
+ }
207
261
  }
208
262
  ],
209
- "members": [
263
+ "description": "A testing utility that drags an element with the mouse."
264
+ },
265
+ {
266
+ "kind": "function",
267
+ "name": "$",
268
+ "return": {
269
+ "type": {
270
+ "text": "TagNameToElement<K>"
271
+ }
272
+ },
273
+ "parameters": [
210
274
  {
211
- "kind": "field",
212
- "name": "autofocus",
275
+ "name": "selector",
213
276
  "type": {
214
- "text": "boolean"
215
- },
216
- "default": "false",
217
- "attribute": "autofocus",
218
- "reflects": true
219
- },
277
+ "text": "K"
278
+ }
279
+ }
280
+ ]
281
+ },
282
+ {
283
+ "kind": "function",
284
+ "name": "$",
285
+ "return": {
286
+ "type": {
287
+ "text": "TagNameToElement<K>"
288
+ }
289
+ },
290
+ "parameters": [
220
291
  {
221
- "kind": "field",
222
- "name": "secondary",
292
+ "name": "root",
223
293
  "type": {
224
- "text": "boolean"
225
- },
226
- "default": "false",
227
- "description": "Button has a less prominent style.",
228
- "attribute": "secondary",
229
- "reflects": true
294
+ "text": "Element | ShadowRoot"
295
+ }
230
296
  },
231
297
  {
232
- "kind": "field",
233
- "name": "disabled",
298
+ "name": "selector",
234
299
  "type": {
235
- "text": "boolean"
236
- },
237
- "default": "false",
238
- "attribute": "disabled",
239
- "reflects": true
240
- },
300
+ "text": "K"
301
+ }
302
+ }
303
+ ]
304
+ },
305
+ {
306
+ "kind": "function",
307
+ "name": "$",
308
+ "return": {
309
+ "type": {
310
+ "text": "T"
311
+ }
312
+ },
313
+ "parameters": [
241
314
  {
242
- "kind": "field",
243
- "name": "icon",
315
+ "name": "selector",
244
316
  "type": {
245
317
  "text": "string"
246
- },
247
- "default": "''",
248
- "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
249
- "attribute": "icon"
250
- },
251
- {
252
- "kind": "field",
253
- "name": "iconSpin",
254
- "type": {
255
- "text": "boolean"
256
- },
257
- "default": "false",
258
- "description": "Spin property for the icon",
259
- "attribute": "icon-spin",
260
- "reflects": true
261
- },
318
+ }
319
+ }
320
+ ]
321
+ },
322
+ {
323
+ "kind": "function",
324
+ "name": "$",
325
+ "return": {
326
+ "type": {
327
+ "text": "T"
328
+ }
329
+ },
330
+ "parameters": [
262
331
  {
263
- "kind": "field",
264
- "name": "iconSpinDuration",
332
+ "name": "root",
265
333
  "type": {
266
- "text": "number | undefined"
267
- },
268
- "description": "Duration property for the icon",
269
- "attribute": "icon-spin-duration",
270
- "reflects": true
334
+ "text": "Element | ShadowRoot"
335
+ }
271
336
  },
272
337
  {
273
- "kind": "field",
274
- "name": "iconAfter",
338
+ "name": "selector",
275
339
  "type": {
276
340
  "text": "string"
277
- },
278
- "default": "''",
279
- "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
280
- "attribute": "icon-after"
281
- },
341
+ }
342
+ }
343
+ ]
344
+ },
345
+ {
346
+ "kind": "function",
347
+ "name": "$",
348
+ "return": {
349
+ "type": {
350
+ "text": "T"
351
+ }
352
+ },
353
+ "parameters": [
282
354
  {
283
- "kind": "field",
284
- "name": "iconAfterSpin",
355
+ "name": "arg1",
285
356
  "type": {
286
- "text": "boolean"
287
- },
288
- "default": "false",
289
- "description": "Spin property for the after icon",
290
- "attribute": "icon-after-spin",
291
- "reflects": true
357
+ "text": "string | Element | ShadowRoot"
358
+ }
292
359
  },
293
360
  {
294
- "kind": "field",
295
- "name": "iconAfterSpinDuration",
361
+ "name": "arg2",
362
+ "optional": true,
296
363
  "type": {
297
- "text": "number | undefined"
298
- },
299
- "description": "Duration property for the after icon",
300
- "attribute": "icon-after-spin-duration",
301
- "reflects": true
302
- },
364
+ "text": "string"
365
+ }
366
+ }
367
+ ]
368
+ },
369
+ {
370
+ "kind": "function",
371
+ "name": "$$",
372
+ "return": {
373
+ "type": {
374
+ "text": "NodeListOf<TagNameToElement<K>>"
375
+ }
376
+ },
377
+ "parameters": [
303
378
  {
304
- "kind": "field",
305
- "name": "focused",
379
+ "name": "selector",
306
380
  "type": {
307
- "text": "boolean"
308
- },
309
- "default": "false",
310
- "attribute": "focused",
311
- "reflects": true
312
- },
381
+ "text": "K"
382
+ }
383
+ }
384
+ ]
385
+ },
386
+ {
387
+ "kind": "function",
388
+ "name": "$$",
389
+ "return": {
390
+ "type": {
391
+ "text": "NodeListOf<TagNameToElement<K>>"
392
+ }
393
+ },
394
+ "parameters": [
313
395
  {
314
- "kind": "field",
315
- "name": "name",
396
+ "name": "root",
316
397
  "type": {
317
- "text": "string | undefined"
318
- },
319
- "default": "undefined",
320
- "attribute": "name",
321
- "reflects": true
398
+ "text": "Element"
399
+ }
322
400
  },
323
401
  {
324
- "kind": "field",
325
- "name": "iconOnly",
402
+ "name": "selector",
326
403
  "type": {
327
- "text": "boolean"
328
- },
329
- "default": "false",
330
- "attribute": "icon-only",
331
- "reflects": true
332
- },
333
- {
334
- "kind": "field",
335
- "name": "type",
336
- "type": {
337
- "text": "'submit' | 'reset' | 'button'"
338
- },
339
- "default": "'button'",
340
- "attribute": "type",
341
- "reflects": true
342
- },
343
- {
344
- "kind": "field",
345
- "name": "value",
346
- "type": {
347
- "text": "string"
348
- },
349
- "default": "''",
350
- "attribute": "value"
351
- },
352
- {
353
- "kind": "field",
354
- "name": "_prevTabindex",
355
- "type": {
356
- "text": "number"
357
- },
358
- "privacy": "private",
359
- "default": "0"
360
- },
361
- {
362
- "kind": "field",
363
- "name": "_internals",
364
- "type": {
365
- "text": "ElementInternals"
366
- },
367
- "privacy": "private"
368
- },
369
- {
370
- "kind": "field",
371
- "name": "form",
372
- "type": {
373
- "text": "HTMLFormElement | null"
374
- },
375
- "readonly": true
376
- },
377
- {
378
- "kind": "method",
379
- "name": "_executeAction",
380
- "privacy": "private"
381
- },
382
- {
383
- "kind": "method",
384
- "name": "_handleKeyDown",
385
- "privacy": "private",
386
- "parameters": [
387
- {
388
- "name": "event",
389
- "type": {
390
- "text": "KeyboardEvent"
391
- }
392
- }
393
- ]
394
- },
395
- {
396
- "kind": "method",
397
- "name": "_handleClick",
398
- "privacy": "private",
399
- "parameters": [
400
- {
401
- "name": "event",
402
- "type": {
403
- "text": "MouseEvent"
404
- }
405
- }
406
- ]
407
- },
408
- {
409
- "kind": "field",
410
- "name": "_handleFocus",
411
- "privacy": "private"
412
- },
413
- {
414
- "kind": "field",
415
- "name": "_handleBlur",
416
- "privacy": "private"
417
- },
404
+ "text": "K"
405
+ }
406
+ }
407
+ ]
408
+ },
409
+ {
410
+ "kind": "function",
411
+ "name": "$$",
412
+ "return": {
413
+ "type": {
414
+ "text": "NodeListOf<T>"
415
+ }
416
+ },
417
+ "parameters": [
418
418
  {
419
- "kind": "field",
420
- "name": "version",
419
+ "name": "selector",
421
420
  "type": {
422
421
  "text": "string"
423
- },
424
- "description": "VSCode Elements version",
425
- "readonly": true,
426
- "inheritedFrom": {
427
- "name": "VscElement",
428
- "module": "src/includes/VscElement.ts"
429
422
  }
430
423
  }
431
- ],
432
- "attributes": [
433
- {
434
- "name": "autofocus",
435
- "type": {
436
- "text": "boolean"
437
- },
438
- "default": "false",
439
- "fieldName": "autofocus"
440
- },
441
- {
442
- "name": "secondary",
443
- "type": {
444
- "text": "boolean"
445
- },
446
- "default": "false",
447
- "description": "Button has a less prominent style.",
448
- "fieldName": "secondary"
449
- },
424
+ ]
425
+ },
426
+ {
427
+ "kind": "function",
428
+ "name": "$$",
429
+ "return": {
430
+ "type": {
431
+ "text": "NodeListOf<T>"
432
+ }
433
+ },
434
+ "parameters": [
450
435
  {
451
- "name": "disabled",
436
+ "name": "root",
452
437
  "type": {
453
- "text": "boolean"
454
- },
455
- "default": "false",
456
- "fieldName": "disabled"
438
+ "text": "Element"
439
+ }
457
440
  },
458
441
  {
459
- "name": "icon",
442
+ "name": "selector",
460
443
  "type": {
461
444
  "text": "string"
462
- },
463
- "default": "''",
464
- "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
465
- "fieldName": "icon"
466
- },
467
- {
468
- "name": "icon-spin",
469
- "type": {
470
- "text": "boolean"
471
- },
472
- "default": "false",
473
- "description": "Spin property for the icon",
474
- "fieldName": "iconSpin"
475
- },
445
+ }
446
+ }
447
+ ]
448
+ },
449
+ {
450
+ "kind": "function",
451
+ "name": "$$",
452
+ "return": {
453
+ "type": {
454
+ "text": "NodeListOf<T>"
455
+ }
456
+ },
457
+ "parameters": [
476
458
  {
477
- "name": "icon-spin-duration",
459
+ "name": "arg1",
478
460
  "type": {
479
- "text": "number | undefined"
480
- },
481
- "description": "Duration property for the icon",
482
- "fieldName": "iconSpinDuration"
461
+ "text": "string | Element"
462
+ }
483
463
  },
484
464
  {
485
- "name": "icon-after",
465
+ "name": "arg2",
466
+ "optional": true,
486
467
  "type": {
487
468
  "text": "string"
488
- },
489
- "default": "''",
490
- "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
491
- "fieldName": "iconAfter"
492
- },
493
- {
494
- "name": "icon-after-spin",
495
- "type": {
496
- "text": "boolean"
497
- },
498
- "default": "false",
499
- "description": "Spin property for the after icon",
500
- "fieldName": "iconAfterSpin"
501
- },
502
- {
503
- "name": "icon-after-spin-duration",
504
- "type": {
505
- "text": "number | undefined"
506
- },
507
- "description": "Duration property for the after icon",
508
- "fieldName": "iconAfterSpinDuration"
509
- },
510
- {
511
- "name": "focused",
512
- "type": {
513
- "text": "boolean"
514
- },
515
- "default": "false",
516
- "fieldName": "focused"
517
- },
518
- {
519
- "name": "name",
520
- "type": {
521
- "text": "string | undefined"
522
- },
523
- "default": "undefined",
524
- "fieldName": "name"
525
- },
526
- {
527
- "name": "icon-only",
528
- "type": {
529
- "text": "boolean"
530
- },
531
- "default": "false",
532
- "fieldName": "iconOnly"
533
- },
534
- {
535
- "name": "type",
536
- "type": {
537
- "text": "'submit' | 'reset' | 'button'"
538
- },
539
- "default": "'button'",
540
- "fieldName": "type"
541
- },
469
+ }
470
+ }
471
+ ]
472
+ }
473
+ ],
474
+ "exports": [
475
+ {
476
+ "kind": "js",
477
+ "name": "clickOnElement",
478
+ "declaration": {
479
+ "name": "clickOnElement",
480
+ "module": "src/includes/test-helpers.ts"
481
+ }
482
+ },
483
+ {
484
+ "kind": "js",
485
+ "name": "moveMouseOnElement",
486
+ "declaration": {
487
+ "name": "moveMouseOnElement",
488
+ "module": "src/includes/test-helpers.ts"
489
+ }
490
+ },
491
+ {
492
+ "kind": "js",
493
+ "name": "dragElement",
494
+ "declaration": {
495
+ "name": "dragElement",
496
+ "module": "src/includes/test-helpers.ts"
497
+ }
498
+ },
499
+ {
500
+ "kind": "js",
501
+ "name": "$",
502
+ "declaration": {
503
+ "name": "$",
504
+ "module": "src/includes/test-helpers.ts"
505
+ }
506
+ },
507
+ {
508
+ "kind": "js",
509
+ "name": "$",
510
+ "declaration": {
511
+ "name": "$",
512
+ "module": "src/includes/test-helpers.ts"
513
+ }
514
+ },
515
+ {
516
+ "kind": "js",
517
+ "name": "$",
518
+ "declaration": {
519
+ "name": "$",
520
+ "module": "src/includes/test-helpers.ts"
521
+ }
522
+ },
523
+ {
524
+ "kind": "js",
525
+ "name": "$",
526
+ "declaration": {
527
+ "name": "$",
528
+ "module": "src/includes/test-helpers.ts"
529
+ }
530
+ },
531
+ {
532
+ "kind": "js",
533
+ "name": "$",
534
+ "declaration": {
535
+ "name": "$",
536
+ "module": "src/includes/test-helpers.ts"
537
+ }
538
+ },
539
+ {
540
+ "kind": "js",
541
+ "name": "$$",
542
+ "declaration": {
543
+ "name": "$$",
544
+ "module": "src/includes/test-helpers.ts"
545
+ }
546
+ },
547
+ {
548
+ "kind": "js",
549
+ "name": "$$",
550
+ "declaration": {
551
+ "name": "$$",
552
+ "module": "src/includes/test-helpers.ts"
553
+ }
554
+ },
555
+ {
556
+ "kind": "js",
557
+ "name": "$$",
558
+ "declaration": {
559
+ "name": "$$",
560
+ "module": "src/includes/test-helpers.ts"
561
+ }
562
+ },
563
+ {
564
+ "kind": "js",
565
+ "name": "$$",
566
+ "declaration": {
567
+ "name": "$$",
568
+ "module": "src/includes/test-helpers.ts"
569
+ }
570
+ },
571
+ {
572
+ "kind": "js",
573
+ "name": "$$",
574
+ "declaration": {
575
+ "name": "$$",
576
+ "module": "src/includes/test-helpers.ts"
577
+ }
578
+ }
579
+ ]
580
+ },
581
+ {
582
+ "kind": "javascript-module",
583
+ "path": "src/includes/uniqueId.ts",
584
+ "declarations": [
585
+ {
586
+ "kind": "function",
587
+ "name": "uniqueId",
588
+ "parameters": [
542
589
  {
543
- "name": "value",
544
- "type": {
545
- "text": "string"
546
- },
547
- "default": "''",
548
- "fieldName": "value"
590
+ "name": "prefix",
591
+ "default": "''"
549
592
  }
550
- ],
551
- "superclass": {
552
- "name": "VscElement",
553
- "module": "/src/includes/VscElement.js"
554
- },
555
- "tagName": "vscode-button",
556
- "customElement": true
593
+ ]
557
594
  }
558
595
  ],
559
596
  "exports": [
560
597
  {
561
598
  "kind": "js",
562
- "name": "VscodeButton",
563
- "declaration": {
564
- "name": "VscodeButton",
565
- "module": "src/vscode-button/vscode-button.ts"
566
- }
567
- },
568
- {
569
- "kind": "custom-element-definition",
570
- "name": "vscode-button",
599
+ "name": "default",
571
600
  "declaration": {
572
- "name": "VscodeButton",
573
- "module": "src/vscode-button/vscode-button.ts"
601
+ "name": "uniqueId",
602
+ "module": "src/includes/uniqueId.ts"
574
603
  }
575
604
  }
576
605
  ]
577
606
  },
578
607
  {
579
608
  "kind": "javascript-module",
580
- "path": "src/vscode-button-group/vscode-button-group.styles.ts",
609
+ "path": "src/vscode-badge/vscode-badge.styles.ts",
581
610
  "declarations": [
582
611
  {
583
612
  "kind": "variable",
@@ -585,7 +614,7 @@
585
614
  "type": {
586
615
  "text": "CSSResultGroup"
587
616
  },
588
- "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-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%; } `, ]"
617
+ "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; } `, ]"
589
618
  }
590
619
  ],
591
620
  "exports": [
@@ -594,67 +623,61 @@
594
623
  "name": "default",
595
624
  "declaration": {
596
625
  "name": "styles",
597
- "module": "src/vscode-button-group/vscode-button-group.styles.ts"
626
+ "module": "src/vscode-badge/vscode-badge.styles.ts"
598
627
  }
599
628
  }
600
629
  ]
601
630
  },
602
631
  {
603
632
  "kind": "javascript-module",
604
- "path": "src/vscode-button-group/vscode-button-group.ts",
633
+ "path": "src/vscode-badge/vscode-badge.ts",
605
634
  "declarations": [
606
635
  {
607
636
  "kind": "class",
608
- "description": "Shows a split button, including several components in a single button. Commonly used to show a button with a dropdown to the right.",
609
- "name": "VscodeButtonGroup",
637
+ "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.",
638
+ "name": "VscodeBadge",
610
639
  "cssProperties": [
611
- {
612
- "name": "--vscode-button-background",
613
- "default": "#0078d4"
614
- },
615
- {
616
- "name": "--vscode-button-foreground",
617
- "default": "#ffffff"
618
- },
619
- {
620
- "name": "--vscode-button-border",
621
- "default": "var(--vscode-button-background, rgba(255, 255, 255, 0.07))"
622
- },
623
- {
624
- "name": "--vscode-button-hoverBackground",
625
- "default": "#026ec1"
626
- },
627
640
  {
628
641
  "description": "A sans-serif font type depends on the host OS.",
629
642
  "name": "--vscode-font-family",
630
643
  "default": "sans-serif"
631
644
  },
632
645
  {
633
- "name": "--vscode-font-size",
634
- "default": "13px"
635
- },
636
- {
637
- "name": "--vscode-font-weight",
638
- "default": "normal"
646
+ "name": "--vscode-contrastBorder",
647
+ "default": "transparent"
639
648
  },
640
649
  {
641
- "name": "--vscode-button-secondaryForeground",
642
- "default": "#cccccc"
650
+ "description": "default and counter variant background color",
651
+ "name": "--vscode-badge-background",
652
+ "default": "#616161"
643
653
  },
644
654
  {
645
- "name": "--vscode-button-secondaryBackground",
646
- "default": "#313131"
655
+ "description": "default and counter variant foreground color",
656
+ "name": "--vscode-badge-foreground",
657
+ "default": "#f8f8f8"
647
658
  },
648
659
  {
649
- "name": "--vscode-button-secondaryHoverBackground",
650
- "default": "#3c3c3c"
660
+ "description": "activity bar variant background color",
661
+ "name": "--vscode-activityBarBadge-background",
662
+ "default": "#0078d4"
651
663
  },
652
664
  {
653
- "name": "--vscode-focusBorder",
654
- "default": "#0078d4"
665
+ "description": "activity bar variant foreground color",
666
+ "name": "--vscode-activityBarBadge-foreground",
667
+ "default": "#ffffff"
655
668
  }
656
669
  ],
657
670
  "members": [
671
+ {
672
+ "kind": "field",
673
+ "name": "variant",
674
+ "type": {
675
+ "text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
676
+ },
677
+ "default": "'default'",
678
+ "attribute": "variant",
679
+ "reflects": true
680
+ },
658
681
  {
659
682
  "kind": "field",
660
683
  "name": "version",
@@ -669,631 +692,655 @@
669
692
  }
670
693
  }
671
694
  ],
672
- "superclass": {
673
- "name": "VscElement",
674
- "module": "/src/includes/VscElement.js"
675
- },
676
- "tagName": "vscode-button-group",
677
- "customElement": true
678
- }
679
- ],
680
- "exports": [
681
- {
682
- "kind": "js",
683
- "name": "VscodeButtonGroup",
684
- "declaration": {
685
- "name": "VscodeButtonGroup",
686
- "module": "src/vscode-button-group/vscode-button-group.ts"
687
- }
688
- },
689
- {
690
- "kind": "custom-element-definition",
691
- "name": "vscode-button-group",
692
- "declaration": {
693
- "name": "VscodeButtonGroup",
694
- "module": "src/vscode-button-group/vscode-button-group.ts"
695
- }
696
- }
697
- ]
698
- },
699
- {
700
- "kind": "javascript-module",
701
- "path": "src/includes/AssociatedFormControl.ts",
702
- "declarations": [],
703
- "exports": []
704
- },
705
- {
706
- "kind": "javascript-module",
707
- "path": "src/includes/VscElement.ts",
708
- "declarations": [
709
- {
710
- "kind": "class",
711
- "description": "",
712
- "name": "VscElement",
713
- "members": [
695
+ "attributes": [
714
696
  {
715
- "kind": "field",
716
- "name": "version",
697
+ "name": "variant",
717
698
  "type": {
718
- "text": "string"
699
+ "text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
719
700
  },
720
- "description": "VSCode Elements version",
721
- "readonly": true
701
+ "default": "'default'",
702
+ "fieldName": "variant"
722
703
  }
723
704
  ],
724
705
  "superclass": {
725
- "name": "LitElement",
726
- "package": "lit"
727
- },
728
- "customElement": true
729
- },
730
- {
731
- "kind": "function",
732
- "name": "customElement",
733
- "parameters": [
734
- {
735
- "name": "tagName",
736
- "type": {
737
- "text": "string"
738
- }
739
- }
740
- ],
741
- "description": "Own implementation of Lit's customElement decorator."
742
- }
743
- ],
744
- "exports": [
745
- {
746
- "kind": "js",
747
- "name": "VscElement",
748
- "declaration": {
749
706
  "name": "VscElement",
750
- "module": "src/includes/VscElement.ts"
751
- }
752
- },
753
- {
754
- "kind": "js",
755
- "name": "customElement",
756
- "declaration": {
757
- "name": "customElement",
758
- "module": "src/includes/VscElement.ts"
759
- }
760
- },
761
- {
762
- "kind": "custom-element-definition",
763
- "name": "tagName",
764
- "declaration": {
765
- "name": "anonymous_0",
766
- "module": "src/includes/VscElement.ts"
767
- }
768
- }
769
- ]
770
- },
771
- {
772
- "kind": "javascript-module",
773
- "path": "src/includes/default.styles.ts",
774
- "declarations": [],
775
- "exports": [
776
- {
777
- "kind": "js",
778
- "name": "default",
779
- "declaration": {
780
- "module": "src/includes/default.styles.ts"
781
- }
782
- }
783
- ]
784
- },
785
- {
786
- "kind": "javascript-module",
787
- "path": "src/includes/helpers.ts",
788
- "declarations": [
789
- {
790
- "kind": "variable",
791
- "name": "INPUT_LINE_HEIGHT_RATIO"
792
- },
793
- {
794
- "kind": "variable",
795
- "name": "DEFUALT_INPUT_WIDGET_WIDTH",
796
- "type": {
797
- "text": "number"
707
+ "module": "/src/includes/VscElement.js"
798
708
  },
799
- "default": "320"
800
- },
801
- {
802
- "kind": "function",
803
- "name": "getDefaultFontStack"
804
- },
805
- {
806
- "kind": "function",
807
- "name": "getDefaultEditorFontStack"
709
+ "tagName": "vscode-badge",
710
+ "customElement": true
808
711
  }
809
712
  ],
810
- "exports": [
811
- {
812
- "kind": "js",
813
- "name": "INPUT_LINE_HEIGHT_RATIO",
814
- "declaration": {
815
- "name": "INPUT_LINE_HEIGHT_RATIO",
816
- "module": "src/includes/helpers.ts"
817
- }
818
- },
819
- {
820
- "kind": "js",
821
- "name": "DEFUALT_INPUT_WIDGET_WIDTH",
822
- "declaration": {
823
- "name": "DEFUALT_INPUT_WIDGET_WIDTH",
824
- "module": "src/includes/helpers.ts"
825
- }
826
- },
713
+ "exports": [
827
714
  {
828
715
  "kind": "js",
829
- "name": "getDefaultFontStack",
716
+ "name": "VscodeBadge",
830
717
  "declaration": {
831
- "name": "getDefaultFontStack",
832
- "module": "src/includes/helpers.ts"
718
+ "name": "VscodeBadge",
719
+ "module": "src/vscode-badge/vscode-badge.ts"
833
720
  }
834
721
  },
835
722
  {
836
- "kind": "js",
837
- "name": "getDefaultEditorFontStack",
723
+ "kind": "custom-element-definition",
724
+ "name": "vscode-badge",
838
725
  "declaration": {
839
- "name": "getDefaultEditorFontStack",
840
- "module": "src/includes/helpers.ts"
726
+ "name": "VscodeBadge",
727
+ "module": "src/vscode-badge/vscode-badge.ts"
841
728
  }
842
729
  }
843
730
  ]
844
731
  },
845
732
  {
846
733
  "kind": "javascript-module",
847
- "path": "src/includes/style-property-map.ts",
734
+ "path": "src/vscode-button/vscode-button.styles.ts",
848
735
  "declarations": [
849
736
  {
850
737
  "kind": "variable",
851
- "name": "stylePropertyMap",
852
- "description": "Implement a Lit directive similar to styleMap, but instead of setting styles via the style\nattribute (which violates CSP), it should apply styles using the style property.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)"
738
+ "name": "styles",
739
+ "type": {
740
+ "text": "CSSResultGroup"
741
+ },
742
+ "default": "[ defaultStyles, css` :host { cursor: pointer; display: inline-block; width: auto; } .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%; } .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; } `, ]"
853
743
  }
854
744
  ],
855
745
  "exports": [
856
746
  {
857
747
  "kind": "js",
858
- "name": "stylePropertyMap",
748
+ "name": "default",
859
749
  "declaration": {
860
- "name": "stylePropertyMap",
861
- "module": "src/includes/style-property-map.ts"
750
+ "name": "styles",
751
+ "module": "src/vscode-button/vscode-button.styles.ts"
862
752
  }
863
753
  }
864
754
  ]
865
755
  },
866
756
  {
867
757
  "kind": "javascript-module",
868
- "path": "src/includes/test-helpers.ts",
758
+ "path": "src/vscode-button/vscode-button.ts",
869
759
  "declarations": [
870
760
  {
871
- "kind": "function",
872
- "name": "clickOnElement",
873
- "parameters": [
761
+ "kind": "class",
762
+ "description": "Clickable element that are used to trigger actions.",
763
+ "name": "VscodeButton",
764
+ "cssProperties": [
874
765
  {
875
- "name": "el",
766
+ "name": "--vscode-button-background",
767
+ "default": "#0078d4"
768
+ },
769
+ {
770
+ "name": "--vscode-button-foreground",
771
+ "default": "#ffffff"
772
+ },
773
+ {
774
+ "name": "--vscode-button-border",
775
+ "default": "var(--vscode-button-background, rgba(255, 255, 255, 0.07))"
776
+ },
777
+ {
778
+ "name": "--vscode-button-hoverBackground",
779
+ "default": "#026ec1"
780
+ },
781
+ {
782
+ "description": "A sans-serif font type depends on the host OS.",
783
+ "name": "--vscode-font-family",
784
+ "default": "sans-serif"
785
+ },
786
+ {
787
+ "name": "--vscode-font-size",
788
+ "default": "13px"
789
+ },
790
+ {
791
+ "name": "--vscode-font-weight",
792
+ "default": "normal"
793
+ },
794
+ {
795
+ "name": "--vscode-button-secondaryForeground",
796
+ "default": "#cccccc"
797
+ },
798
+ {
799
+ "name": "--vscode-button-secondaryBackground",
800
+ "default": "#313131"
801
+ },
802
+ {
803
+ "name": "--vscode-button-secondaryHoverBackground",
804
+ "default": "#3c3c3c"
805
+ },
806
+ {
807
+ "name": "--vscode-focusBorder",
808
+ "default": "#0078d4"
809
+ }
810
+ ],
811
+ "cssParts": [
812
+ {
813
+ "description": "The main content area of the component.",
814
+ "name": "base"
815
+ }
816
+ ],
817
+ "slots": [
818
+ {
819
+ "description": "Slot before the main content.",
820
+ "name": "content-before"
821
+ },
822
+ {
823
+ "description": "Slot after the main content.",
824
+ "name": "content-after"
825
+ }
826
+ ],
827
+ "members": [
828
+ {
829
+ "kind": "field",
830
+ "name": "autofocus",
876
831
  "type": {
877
- "text": "Element"
878
- }
832
+ "text": "boolean"
833
+ },
834
+ "default": "false",
835
+ "attribute": "autofocus",
836
+ "reflects": true
879
837
  },
880
838
  {
881
- "name": "position",
882
- "default": "'center'",
839
+ "kind": "field",
840
+ "name": "secondary",
883
841
  "type": {
884
- "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
885
- }
842
+ "text": "boolean"
843
+ },
844
+ "default": "false",
845
+ "description": "Button has a less prominent style.",
846
+ "attribute": "secondary",
847
+ "reflects": true
848
+ },
849
+ {
850
+ "kind": "field",
851
+ "name": "disabled",
852
+ "type": {
853
+ "text": "boolean"
854
+ },
855
+ "default": "false",
856
+ "attribute": "disabled",
857
+ "reflects": true
858
+ },
859
+ {
860
+ "kind": "field",
861
+ "name": "icon",
862
+ "type": {
863
+ "text": "string"
864
+ },
865
+ "default": "''",
866
+ "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
867
+ "attribute": "icon"
868
+ },
869
+ {
870
+ "kind": "field",
871
+ "name": "iconSpin",
872
+ "type": {
873
+ "text": "boolean"
874
+ },
875
+ "default": "false",
876
+ "description": "Spin property for the icon",
877
+ "attribute": "icon-spin",
878
+ "reflects": true
879
+ },
880
+ {
881
+ "kind": "field",
882
+ "name": "iconSpinDuration",
883
+ "type": {
884
+ "text": "number | undefined"
885
+ },
886
+ "description": "Duration property for the icon",
887
+ "attribute": "icon-spin-duration",
888
+ "reflects": true
889
+ },
890
+ {
891
+ "kind": "field",
892
+ "name": "iconAfter",
893
+ "type": {
894
+ "text": "string"
895
+ },
896
+ "default": "''",
897
+ "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
898
+ "attribute": "icon-after"
899
+ },
900
+ {
901
+ "kind": "field",
902
+ "name": "iconAfterSpin",
903
+ "type": {
904
+ "text": "boolean"
905
+ },
906
+ "default": "false",
907
+ "description": "Spin property for the after icon",
908
+ "attribute": "icon-after-spin",
909
+ "reflects": true
910
+ },
911
+ {
912
+ "kind": "field",
913
+ "name": "iconAfterSpinDuration",
914
+ "type": {
915
+ "text": "number | undefined"
916
+ },
917
+ "description": "Duration property for the after icon",
918
+ "attribute": "icon-after-spin-duration",
919
+ "reflects": true
920
+ },
921
+ {
922
+ "kind": "field",
923
+ "name": "focused",
924
+ "type": {
925
+ "text": "boolean"
926
+ },
927
+ "default": "false",
928
+ "attribute": "focused",
929
+ "reflects": true
930
+ },
931
+ {
932
+ "kind": "field",
933
+ "name": "name",
934
+ "type": {
935
+ "text": "string | undefined"
936
+ },
937
+ "default": "undefined",
938
+ "attribute": "name",
939
+ "reflects": true
940
+ },
941
+ {
942
+ "kind": "field",
943
+ "name": "iconOnly",
944
+ "type": {
945
+ "text": "boolean"
946
+ },
947
+ "default": "false",
948
+ "attribute": "icon-only",
949
+ "reflects": true
950
+ },
951
+ {
952
+ "kind": "field",
953
+ "name": "type",
954
+ "type": {
955
+ "text": "'submit' | 'reset' | 'button'"
956
+ },
957
+ "default": "'button'",
958
+ "attribute": "type",
959
+ "reflects": true
960
+ },
961
+ {
962
+ "kind": "field",
963
+ "name": "value",
964
+ "type": {
965
+ "text": "string"
966
+ },
967
+ "default": "''",
968
+ "attribute": "value"
969
+ },
970
+ {
971
+ "kind": "field",
972
+ "name": "_prevTabindex",
973
+ "type": {
974
+ "text": "number"
975
+ },
976
+ "privacy": "private",
977
+ "default": "0"
978
+ },
979
+ {
980
+ "kind": "field",
981
+ "name": "_internals",
982
+ "type": {
983
+ "text": "ElementInternals"
984
+ },
985
+ "privacy": "private"
886
986
  },
887
987
  {
888
- "name": "offsetX",
889
- "default": "0"
988
+ "kind": "field",
989
+ "name": "_hasContentBefore",
990
+ "type": {
991
+ "text": "boolean"
992
+ },
993
+ "privacy": "private",
994
+ "default": "false"
890
995
  },
891
996
  {
892
- "name": "offsetY",
893
- "default": "0"
894
- }
895
- ],
896
- "description": "A testing utility that measures an element's position and clicks on it."
897
- },
898
- {
899
- "kind": "function",
900
- "name": "moveMouseOnElement",
901
- "parameters": [
902
- {
903
- "name": "el",
997
+ "kind": "field",
998
+ "name": "_hasContentAfter",
904
999
  "type": {
905
- "text": "Element"
906
- }
1000
+ "text": "boolean"
1001
+ },
1002
+ "privacy": "private",
1003
+ "default": "false"
907
1004
  },
908
1005
  {
909
- "name": "position",
910
- "default": "'center'",
1006
+ "kind": "field",
1007
+ "name": "form",
911
1008
  "type": {
912
- "text": "'top' | 'right' | 'bottom' | 'left' | 'center'"
913
- }
1009
+ "text": "HTMLFormElement | null"
1010
+ },
1011
+ "readonly": true
914
1012
  },
915
1013
  {
916
- "name": "offsetX",
917
- "default": "0"
1014
+ "kind": "method",
1015
+ "name": "_executeAction",
1016
+ "privacy": "private"
918
1017
  },
919
1018
  {
920
- "name": "offsetY",
921
- "default": "0"
922
- }
923
- ],
924
- "description": "A testing utility that moves the mouse onto an element."
925
- },
926
- {
927
- "kind": "function",
928
- "name": "dragElement",
929
- "return": {
930
- "type": {
931
- "text": "Promise<void>"
932
- }
933
- },
934
- "parameters": [
1019
+ "kind": "method",
1020
+ "name": "_handleKeyDown",
1021
+ "privacy": "private",
1022
+ "parameters": [
1023
+ {
1024
+ "name": "event",
1025
+ "type": {
1026
+ "text": "KeyboardEvent"
1027
+ }
1028
+ }
1029
+ ]
1030
+ },
935
1031
  {
936
- "name": "el",
937
- "type": {
938
- "text": "Element"
939
- }
1032
+ "kind": "method",
1033
+ "name": "_handleClick",
1034
+ "privacy": "private",
1035
+ "parameters": [
1036
+ {
1037
+ "name": "event",
1038
+ "type": {
1039
+ "text": "MouseEvent"
1040
+ }
1041
+ }
1042
+ ]
940
1043
  },
941
1044
  {
942
- "name": "deltaX",
943
- "default": "0"
1045
+ "kind": "field",
1046
+ "name": "_handleFocus",
1047
+ "privacy": "private"
944
1048
  },
945
1049
  {
946
- "name": "deltaY",
947
- "default": "0"
1050
+ "kind": "field",
1051
+ "name": "_handleBlur",
1052
+ "privacy": "private"
948
1053
  },
949
1054
  {
950
- "name": "callbacks",
951
- "default": "{}",
952
- "type": {
953
- "text": "{\n afterMouseDown?: () => void | Promise<void>;\n afterMouseMove?: () => void | Promise<void>;\n }"
954
- }
955
- }
956
- ],
957
- "description": "A testing utility that drags an element with the mouse."
958
- },
959
- {
960
- "kind": "function",
961
- "name": "$",
962
- "return": {
963
- "type": {
964
- "text": "TagNameToElement<K>"
965
- }
966
- },
967
- "parameters": [
1055
+ "kind": "method",
1056
+ "name": "_handleSlotChange",
1057
+ "privacy": "private",
1058
+ "parameters": [
1059
+ {
1060
+ "name": "ev",
1061
+ "type": {
1062
+ "text": "Event"
1063
+ }
1064
+ }
1065
+ ]
1066
+ },
968
1067
  {
969
- "name": "selector",
1068
+ "kind": "field",
1069
+ "name": "version",
970
1070
  "type": {
971
- "text": "K"
1071
+ "text": "string"
1072
+ },
1073
+ "description": "VSCode Elements version",
1074
+ "readonly": true,
1075
+ "inheritedFrom": {
1076
+ "name": "VscElement",
1077
+ "module": "src/includes/VscElement.ts"
972
1078
  }
973
1079
  }
974
- ]
975
- },
976
- {
977
- "kind": "function",
978
- "name": "$",
979
- "return": {
980
- "type": {
981
- "text": "TagNameToElement<K>"
982
- }
983
- },
984
- "parameters": [
1080
+ ],
1081
+ "attributes": [
985
1082
  {
986
- "name": "root",
1083
+ "name": "autofocus",
987
1084
  "type": {
988
- "text": "Element"
989
- }
1085
+ "text": "boolean"
1086
+ },
1087
+ "default": "false",
1088
+ "fieldName": "autofocus"
990
1089
  },
991
1090
  {
992
- "name": "selector",
993
- "type": {
994
- "text": "K"
995
- }
996
- }
997
- ]
998
- },
999
- {
1000
- "kind": "function",
1001
- "name": "$",
1002
- "return": {
1003
- "type": {
1004
- "text": "T"
1005
- }
1006
- },
1007
- "parameters": [
1008
- {
1009
- "name": "selector",
1091
+ "name": "secondary",
1010
1092
  "type": {
1011
- "text": "string"
1012
- }
1013
- }
1014
- ]
1015
- },
1016
- {
1017
- "kind": "function",
1018
- "name": "$",
1019
- "return": {
1020
- "type": {
1021
- "text": "T"
1022
- }
1023
- },
1024
- "parameters": [
1093
+ "text": "boolean"
1094
+ },
1095
+ "default": "false",
1096
+ "description": "Button has a less prominent style.",
1097
+ "fieldName": "secondary"
1098
+ },
1025
1099
  {
1026
- "name": "root",
1100
+ "name": "disabled",
1027
1101
  "type": {
1028
- "text": "Element"
1029
- }
1102
+ "text": "boolean"
1103
+ },
1104
+ "default": "false",
1105
+ "fieldName": "disabled"
1030
1106
  },
1031
1107
  {
1032
- "name": "selector",
1108
+ "name": "icon",
1033
1109
  "type": {
1034
1110
  "text": "string"
1035
- }
1036
- }
1037
- ]
1038
- },
1039
- {
1040
- "kind": "function",
1041
- "name": "$",
1042
- "return": {
1043
- "type": {
1044
- "text": "T"
1045
- }
1046
- },
1047
- "parameters": [
1111
+ },
1112
+ "default": "''",
1113
+ "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
1114
+ "fieldName": "icon"
1115
+ },
1048
1116
  {
1049
- "name": "arg1",
1117
+ "name": "icon-spin",
1050
1118
  "type": {
1051
- "text": "string | Element"
1052
- }
1119
+ "text": "boolean"
1120
+ },
1121
+ "default": "false",
1122
+ "description": "Spin property for the icon",
1123
+ "fieldName": "iconSpin"
1053
1124
  },
1054
1125
  {
1055
- "name": "arg2",
1056
- "optional": true,
1126
+ "name": "icon-spin-duration",
1057
1127
  "type": {
1058
- "text": "string"
1059
- }
1060
- }
1061
- ]
1062
- },
1063
- {
1064
- "kind": "function",
1065
- "name": "$$",
1066
- "return": {
1067
- "type": {
1068
- "text": "NodeListOf<TagNameToElement<K>>"
1069
- }
1070
- },
1071
- "parameters": [
1128
+ "text": "number | undefined"
1129
+ },
1130
+ "description": "Duration property for the icon",
1131
+ "fieldName": "iconSpinDuration"
1132
+ },
1072
1133
  {
1073
- "name": "selector",
1134
+ "name": "icon-after",
1074
1135
  "type": {
1075
- "text": "K"
1076
- }
1077
- }
1078
- ]
1079
- },
1080
- {
1081
- "kind": "function",
1082
- "name": "$$",
1083
- "return": {
1084
- "type": {
1085
- "text": "NodeListOf<TagNameToElement<K>>"
1086
- }
1087
- },
1088
- "parameters": [
1136
+ "text": "string"
1137
+ },
1138
+ "default": "''",
1139
+ "description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
1140
+ "fieldName": "iconAfter"
1141
+ },
1089
1142
  {
1090
- "name": "root",
1143
+ "name": "icon-after-spin",
1091
1144
  "type": {
1092
- "text": "Element"
1093
- }
1145
+ "text": "boolean"
1146
+ },
1147
+ "default": "false",
1148
+ "description": "Spin property for the after icon",
1149
+ "fieldName": "iconAfterSpin"
1094
1150
  },
1095
1151
  {
1096
- "name": "selector",
1152
+ "name": "icon-after-spin-duration",
1097
1153
  "type": {
1098
- "text": "K"
1099
- }
1100
- }
1101
- ]
1102
- },
1103
- {
1104
- "kind": "function",
1105
- "name": "$$",
1106
- "return": {
1107
- "type": {
1108
- "text": "NodeListOf<T>"
1109
- }
1110
- },
1111
- "parameters": [
1154
+ "text": "number | undefined"
1155
+ },
1156
+ "description": "Duration property for the after icon",
1157
+ "fieldName": "iconAfterSpinDuration"
1158
+ },
1112
1159
  {
1113
- "name": "selector",
1160
+ "name": "focused",
1114
1161
  "type": {
1115
- "text": "string"
1116
- }
1117
- }
1118
- ]
1119
- },
1120
- {
1121
- "kind": "function",
1122
- "name": "$$",
1123
- "return": {
1124
- "type": {
1125
- "text": "NodeListOf<T>"
1126
- }
1127
- },
1128
- "parameters": [
1162
+ "text": "boolean"
1163
+ },
1164
+ "default": "false",
1165
+ "fieldName": "focused"
1166
+ },
1129
1167
  {
1130
- "name": "root",
1168
+ "name": "name",
1131
1169
  "type": {
1132
- "text": "Element"
1133
- }
1170
+ "text": "string | undefined"
1171
+ },
1172
+ "default": "undefined",
1173
+ "fieldName": "name"
1134
1174
  },
1135
1175
  {
1136
- "name": "selector",
1176
+ "name": "icon-only",
1137
1177
  "type": {
1138
- "text": "string"
1139
- }
1140
- }
1141
- ]
1142
- },
1143
- {
1144
- "kind": "function",
1145
- "name": "$$",
1146
- "return": {
1147
- "type": {
1148
- "text": "NodeListOf<T>"
1149
- }
1150
- },
1151
- "parameters": [
1178
+ "text": "boolean"
1179
+ },
1180
+ "default": "false",
1181
+ "fieldName": "iconOnly"
1182
+ },
1152
1183
  {
1153
- "name": "arg1",
1184
+ "name": "type",
1154
1185
  "type": {
1155
- "text": "string | Element"
1156
- }
1186
+ "text": "'submit' | 'reset' | 'button'"
1187
+ },
1188
+ "default": "'button'",
1189
+ "fieldName": "type"
1157
1190
  },
1158
1191
  {
1159
- "name": "arg2",
1160
- "optional": true,
1192
+ "name": "value",
1161
1193
  "type": {
1162
1194
  "text": "string"
1163
- }
1195
+ },
1196
+ "default": "''",
1197
+ "fieldName": "value"
1164
1198
  }
1165
- ]
1199
+ ],
1200
+ "superclass": {
1201
+ "name": "VscElement",
1202
+ "module": "/src/includes/VscElement.js"
1203
+ },
1204
+ "tagName": "vscode-button",
1205
+ "customElement": true
1166
1206
  }
1167
1207
  ],
1168
1208
  "exports": [
1169
1209
  {
1170
1210
  "kind": "js",
1171
- "name": "clickOnElement",
1172
- "declaration": {
1173
- "name": "clickOnElement",
1174
- "module": "src/includes/test-helpers.ts"
1175
- }
1176
- },
1177
- {
1178
- "kind": "js",
1179
- "name": "moveMouseOnElement",
1180
- "declaration": {
1181
- "name": "moveMouseOnElement",
1182
- "module": "src/includes/test-helpers.ts"
1183
- }
1184
- },
1185
- {
1186
- "kind": "js",
1187
- "name": "dragElement",
1188
- "declaration": {
1189
- "name": "dragElement",
1190
- "module": "src/includes/test-helpers.ts"
1191
- }
1192
- },
1193
- {
1194
- "kind": "js",
1195
- "name": "$",
1196
- "declaration": {
1197
- "name": "$",
1198
- "module": "src/includes/test-helpers.ts"
1199
- }
1200
- },
1201
- {
1202
- "kind": "js",
1203
- "name": "$",
1204
- "declaration": {
1205
- "name": "$",
1206
- "module": "src/includes/test-helpers.ts"
1207
- }
1208
- },
1209
- {
1210
- "kind": "js",
1211
- "name": "$",
1212
- "declaration": {
1213
- "name": "$",
1214
- "module": "src/includes/test-helpers.ts"
1215
- }
1216
- },
1217
- {
1218
- "kind": "js",
1219
- "name": "$",
1220
- "declaration": {
1221
- "name": "$",
1222
- "module": "src/includes/test-helpers.ts"
1223
- }
1224
- },
1225
- {
1226
- "kind": "js",
1227
- "name": "$",
1228
- "declaration": {
1229
- "name": "$",
1230
- "module": "src/includes/test-helpers.ts"
1231
- }
1232
- },
1233
- {
1234
- "kind": "js",
1235
- "name": "$$",
1236
- "declaration": {
1237
- "name": "$$",
1238
- "module": "src/includes/test-helpers.ts"
1239
- }
1240
- },
1241
- {
1242
- "kind": "js",
1243
- "name": "$$",
1211
+ "name": "VscodeButton",
1244
1212
  "declaration": {
1245
- "name": "$$",
1246
- "module": "src/includes/test-helpers.ts"
1213
+ "name": "VscodeButton",
1214
+ "module": "src/vscode-button/vscode-button.ts"
1247
1215
  }
1248
1216
  },
1249
1217
  {
1250
- "kind": "js",
1251
- "name": "$$",
1218
+ "kind": "custom-element-definition",
1219
+ "name": "vscode-button",
1252
1220
  "declaration": {
1253
- "name": "$$",
1254
- "module": "src/includes/test-helpers.ts"
1221
+ "name": "VscodeButton",
1222
+ "module": "src/vscode-button/vscode-button.ts"
1255
1223
  }
1256
- },
1224
+ }
1225
+ ]
1226
+ },
1227
+ {
1228
+ "kind": "javascript-module",
1229
+ "path": "src/vscode-button-group/vscode-button-group.styles.ts",
1230
+ "declarations": [
1257
1231
  {
1258
- "kind": "js",
1259
- "name": "$$",
1260
- "declaration": {
1261
- "name": "$$",
1262
- "module": "src/includes/test-helpers.ts"
1263
- }
1264
- },
1232
+ "kind": "variable",
1233
+ "name": "styles",
1234
+ "type": {
1235
+ "text": "CSSResultGroup"
1236
+ },
1237
+ "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%; } `, ]"
1238
+ }
1239
+ ],
1240
+ "exports": [
1265
1241
  {
1266
1242
  "kind": "js",
1267
- "name": "$$",
1243
+ "name": "default",
1268
1244
  "declaration": {
1269
- "name": "$$",
1270
- "module": "src/includes/test-helpers.ts"
1245
+ "name": "styles",
1246
+ "module": "src/vscode-button-group/vscode-button-group.styles.ts"
1271
1247
  }
1272
1248
  }
1273
1249
  ]
1274
1250
  },
1275
1251
  {
1276
1252
  "kind": "javascript-module",
1277
- "path": "src/includes/uniqueId.ts",
1253
+ "path": "src/vscode-button-group/vscode-button-group.ts",
1278
1254
  "declarations": [
1279
1255
  {
1280
- "kind": "function",
1281
- "name": "uniqueId",
1282
- "parameters": [
1256
+ "kind": "class",
1257
+ "description": "Shows a split button, including several components in a single button. Commonly used to show a button with a dropdown to the right.",
1258
+ "name": "VscodeButtonGroup",
1259
+ "cssProperties": [
1260
+ {
1261
+ "name": "--vscode-button-background",
1262
+ "default": "#0078d4"
1263
+ },
1264
+ {
1265
+ "name": "--vscode-button-foreground",
1266
+ "default": "#ffffff"
1267
+ },
1268
+ {
1269
+ "name": "--vscode-button-border",
1270
+ "default": "var(--vscode-button-background, rgba(255, 255, 255, 0.07))"
1271
+ },
1283
1272
  {
1284
- "name": "prefix",
1285
- "default": "''"
1273
+ "name": "--vscode-button-hoverBackground",
1274
+ "default": "#026ec1"
1275
+ },
1276
+ {
1277
+ "description": "A sans-serif font type depends on the host OS.",
1278
+ "name": "--vscode-font-family",
1279
+ "default": "sans-serif"
1280
+ },
1281
+ {
1282
+ "name": "--vscode-font-size",
1283
+ "default": "13px"
1284
+ },
1285
+ {
1286
+ "name": "--vscode-font-weight",
1287
+ "default": "normal"
1288
+ },
1289
+ {
1290
+ "name": "--vscode-button-secondaryForeground",
1291
+ "default": "#cccccc"
1292
+ },
1293
+ {
1294
+ "name": "--vscode-button-secondaryBackground",
1295
+ "default": "#313131"
1296
+ },
1297
+ {
1298
+ "name": "--vscode-button-secondaryHoverBackground",
1299
+ "default": "#3c3c3c"
1300
+ },
1301
+ {
1302
+ "name": "--vscode-focusBorder",
1303
+ "default": "#0078d4"
1286
1304
  }
1287
- ]
1305
+ ],
1306
+ "members": [
1307
+ {
1308
+ "kind": "field",
1309
+ "name": "version",
1310
+ "type": {
1311
+ "text": "string"
1312
+ },
1313
+ "description": "VSCode Elements version",
1314
+ "readonly": true,
1315
+ "inheritedFrom": {
1316
+ "name": "VscElement",
1317
+ "module": "src/includes/VscElement.ts"
1318
+ }
1319
+ }
1320
+ ],
1321
+ "superclass": {
1322
+ "name": "VscElement",
1323
+ "module": "/src/includes/VscElement.js"
1324
+ },
1325
+ "tagName": "vscode-button-group",
1326
+ "customElement": true
1288
1327
  }
1289
1328
  ],
1290
1329
  "exports": [
1291
1330
  {
1292
1331
  "kind": "js",
1293
- "name": "default",
1332
+ "name": "VscodeButtonGroup",
1294
1333
  "declaration": {
1295
- "name": "uniqueId",
1296
- "module": "src/includes/uniqueId.ts"
1334
+ "name": "VscodeButtonGroup",
1335
+ "module": "src/vscode-button-group/vscode-button-group.ts"
1336
+ }
1337
+ },
1338
+ {
1339
+ "kind": "custom-element-definition",
1340
+ "name": "vscode-button-group",
1341
+ "declaration": {
1342
+ "name": "VscodeButtonGroup",
1343
+ "module": "src/vscode-button-group/vscode-button-group.ts"
1297
1344
  }
1298
1345
  }
1299
1346
  ]
@@ -1308,7 +1355,7 @@
1308
1355
  "type": {
1309
1356
  "text": "CSSResultGroup"
1310
1357
  },
1311
- "default": "[ defaultStyles, baseStyles, css` :host(:invalid) .icon, :host([invalid]) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } .icon { border-radius: 3px; } .indeterminate-icon { background-color: currentColor; position: absolute; height: 1px; width: 12px; } :host(:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } `, ]"
1358
+ "default": "[ defaultStyles, baseStyles, css` :host(:invalid) .icon, :host([invalid]) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } .icon { border-radius: 3px; } .indeterminate-icon { background-color: currentColor; position: absolute; height: 1px; width: 12px; } :host(:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } /* Toggle appearance */ :host([toggle]) .icon { /* Track */ width: 36px; height: 20px; border-radius: 999px; background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var(--vscode-button-border, transparent); justify-content: flex-start; position: absolute; } :host(:focus):host([toggle]):host(:not([disabled])) .icon { outline-offset: 2px; } /* Reserve space for the wider toggle track so text doesn't overlap */ :host([toggle]) .label-inner { padding-left: 45px; /* 36px track + 9px spacing */ } :host([toggle]) .label { min-height: 20px; } :host([toggle]) .wrapper { min-height: 20px; line-height: 20px; } :host([toggle]) .thumb { /* Thumb */ box-sizing: border-box; display: block; width: 16px; height: 16px; border-radius: 50%; background-color: var(--vscode-button-secondaryForeground, #cccccc); margin-left: 1px; transition: transform 120ms ease-in-out; } :host([toggle][checked]) .icon { background-color: var(--vscode-button-background, #04395e); border-color: var(--vscode-button-border, transparent); } :host([toggle][checked]) .thumb { transform: translateX(16px); background-color: var(--vscode-button-foreground, #ffffff); } :host([toggle]):host(:invalid) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } :host([toggle]):host(:invalid) .thumb { background-color: var(--vscode-inputValidation-errorBorder, #be1100); } :host([toggle]) .check-icon, :host([toggle]) .indeterminate-icon { display: none; } :host([toggle]:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } `, ]"
1312
1359
  }
1313
1360
  ],
1314
1361
  "exports": [
@@ -1433,6 +1480,17 @@
1433
1480
  "attribute": "name",
1434
1481
  "reflects": true
1435
1482
  },
1483
+ {
1484
+ "kind": "field",
1485
+ "name": "toggle",
1486
+ "type": {
1487
+ "text": "boolean"
1488
+ },
1489
+ "default": "false",
1490
+ "description": "When true, renders as a toggle switch instead of a checkbox.",
1491
+ "attribute": "toggle",
1492
+ "reflects": true
1493
+ },
1436
1494
  {
1437
1495
  "kind": "field",
1438
1496
  "name": "value",
@@ -1768,6 +1826,15 @@
1768
1826
  "default": "false",
1769
1827
  "fieldName": "invalid"
1770
1828
  },
1829
+ {
1830
+ "name": "toggle",
1831
+ "type": {
1832
+ "text": "boolean"
1833
+ },
1834
+ "default": "false",
1835
+ "description": "When true, renders as a toggle switch instead of a checkbox.",
1836
+ "fieldName": "toggle"
1837
+ },
1771
1838
  {
1772
1839
  "name": "value",
1773
1840
  "type": {
@@ -5219,6 +5286,211 @@
5219
5286
  }
5220
5287
  ]
5221
5288
  },
5289
+ {
5290
+ "kind": "javascript-module",
5291
+ "path": "src/vscode-progress-bar/vscode-progress-bar.styles.ts",
5292
+ "declarations": [
5293
+ {
5294
+ "kind": "variable",
5295
+ "name": "styles",
5296
+ "type": {
5297
+ "text": "CSSResultGroup"
5298
+ },
5299
+ "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%; } } `, ]"
5300
+ }
5301
+ ],
5302
+ "exports": [
5303
+ {
5304
+ "kind": "js",
5305
+ "name": "default",
5306
+ "declaration": {
5307
+ "name": "styles",
5308
+ "module": "src/vscode-progress-bar/vscode-progress-bar.styles.ts"
5309
+ }
5310
+ }
5311
+ ]
5312
+ },
5313
+ {
5314
+ "kind": "javascript-module",
5315
+ "path": "src/vscode-progress-bar/vscode-progress-bar.ts",
5316
+ "declarations": [
5317
+ {
5318
+ "kind": "class",
5319
+ "description": "",
5320
+ "name": "VscodeProgressBar",
5321
+ "cssProperties": [
5322
+ {
5323
+ "name": "--vscode-progressBar-background",
5324
+ "default": "#0078d4"
5325
+ }
5326
+ ],
5327
+ "members": [
5328
+ {
5329
+ "kind": "field",
5330
+ "name": "value",
5331
+ "type": {
5332
+ "text": "number | undefined"
5333
+ },
5334
+ "description": "Current value for determinate mode. If undefined/NaN, the bar is indeterminate.",
5335
+ "attribute": "value",
5336
+ "reflects": true
5337
+ },
5338
+ {
5339
+ "kind": "field",
5340
+ "name": "max",
5341
+ "type": {
5342
+ "text": "number"
5343
+ },
5344
+ "default": "100",
5345
+ "description": "Maximum value for determinate mode.",
5346
+ "attribute": "max",
5347
+ "reflects": true
5348
+ },
5349
+ {
5350
+ "kind": "field",
5351
+ "name": "indeterminate",
5352
+ "type": {
5353
+ "text": "boolean"
5354
+ },
5355
+ "default": "false",
5356
+ "description": "Force indeterminate mode even if value is set.",
5357
+ "attribute": "indeterminate",
5358
+ "reflects": true
5359
+ },
5360
+ {
5361
+ "kind": "field",
5362
+ "name": "longRunningThreshold",
5363
+ "type": {
5364
+ "text": "number"
5365
+ },
5366
+ "default": "15000",
5367
+ "description": "Switch to a gentler animation after this many ms in indeterminate mode.",
5368
+ "attribute": "long-running-threshold"
5369
+ },
5370
+ {
5371
+ "kind": "field",
5372
+ "name": "_longRunning",
5373
+ "type": {
5374
+ "text": "boolean"
5375
+ },
5376
+ "privacy": "private",
5377
+ "default": "false"
5378
+ },
5379
+ {
5380
+ "kind": "field",
5381
+ "name": "_longRunningHandle",
5382
+ "type": {
5383
+ "text": "ReturnType<typeof setTimeout> | undefined"
5384
+ },
5385
+ "privacy": "private"
5386
+ },
5387
+ {
5388
+ "kind": "field",
5389
+ "name": "_isDeterminate",
5390
+ "type": {
5391
+ "text": "boolean"
5392
+ },
5393
+ "privacy": "private",
5394
+ "readonly": true
5395
+ },
5396
+ {
5397
+ "kind": "method",
5398
+ "name": "_maybeStartLongRunningTimer",
5399
+ "privacy": "private",
5400
+ "return": {
5401
+ "type": {
5402
+ "text": "void"
5403
+ }
5404
+ }
5405
+ },
5406
+ {
5407
+ "kind": "method",
5408
+ "name": "_clearLongRunningTimer",
5409
+ "privacy": "private",
5410
+ "return": {
5411
+ "type": {
5412
+ "text": "void"
5413
+ }
5414
+ }
5415
+ },
5416
+ {
5417
+ "kind": "field",
5418
+ "name": "version",
5419
+ "type": {
5420
+ "text": "string"
5421
+ },
5422
+ "description": "VSCode Elements version",
5423
+ "readonly": true,
5424
+ "inheritedFrom": {
5425
+ "name": "VscElement",
5426
+ "module": "src/includes/VscElement.ts"
5427
+ }
5428
+ }
5429
+ ],
5430
+ "attributes": [
5431
+ {
5432
+ "name": "value",
5433
+ "type": {
5434
+ "text": "number | undefined"
5435
+ },
5436
+ "description": "Current value for determinate mode. If undefined/NaN, the bar is indeterminate.",
5437
+ "fieldName": "value"
5438
+ },
5439
+ {
5440
+ "name": "max",
5441
+ "type": {
5442
+ "text": "number"
5443
+ },
5444
+ "default": "100",
5445
+ "description": "Maximum value for determinate mode.",
5446
+ "fieldName": "max"
5447
+ },
5448
+ {
5449
+ "name": "indeterminate",
5450
+ "type": {
5451
+ "text": "boolean"
5452
+ },
5453
+ "default": "false",
5454
+ "description": "Force indeterminate mode even if value is set.",
5455
+ "fieldName": "indeterminate"
5456
+ },
5457
+ {
5458
+ "name": "long-running-threshold",
5459
+ "type": {
5460
+ "text": "number"
5461
+ },
5462
+ "default": "15000",
5463
+ "description": "Switch to a gentler animation after this many ms in indeterminate mode.",
5464
+ "fieldName": "longRunningThreshold"
5465
+ }
5466
+ ],
5467
+ "superclass": {
5468
+ "name": "VscElement",
5469
+ "module": "/src/includes/VscElement.js"
5470
+ },
5471
+ "tagName": "vscode-progress-bar",
5472
+ "customElement": true
5473
+ }
5474
+ ],
5475
+ "exports": [
5476
+ {
5477
+ "kind": "js",
5478
+ "name": "VscodeProgressBar",
5479
+ "declaration": {
5480
+ "name": "VscodeProgressBar",
5481
+ "module": "src/vscode-progress-bar/vscode-progress-bar.ts"
5482
+ }
5483
+ },
5484
+ {
5485
+ "kind": "custom-element-definition",
5486
+ "name": "vscode-progress-bar",
5487
+ "declaration": {
5488
+ "name": "VscodeProgressBar",
5489
+ "module": "src/vscode-progress-bar/vscode-progress-bar.ts"
5490
+ }
5491
+ }
5492
+ ]
5493
+ },
5222
5494
  {
5223
5495
  "kind": "javascript-module",
5224
5496
  "path": "src/vscode-progress-ring/vscode-progress-ring.styles.ts",