@vscode-elements/elements 1.13.2-pre.1 → 1.14.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 (57) hide show
  1. package/custom-elements.json +172 -81
  2. package/dist/bundled.js +150 -135
  3. package/dist/includes/VscElement.js +1 -1
  4. package/dist/includes/VscElement.js.map +1 -1
  5. package/dist/includes/vscode-select/styles.js +48 -48
  6. package/dist/includes/vscode-select/styles.js.map +1 -1
  7. package/dist/vscode-context-menu/vscode-context-menu.d.ts +7 -7
  8. package/dist/vscode-context-menu/vscode-context-menu.js +7 -7
  9. package/dist/vscode-context-menu/vscode-context-menu.js.map +1 -1
  10. package/dist/vscode-context-menu/vscode-context-menu.styles.js +7 -7
  11. package/dist/vscode-context-menu/vscode-context-menu.styles.js.map +1 -1
  12. package/dist/vscode-context-menu-item/vscode-context-menu-item.d.ts +9 -9
  13. package/dist/vscode-context-menu-item/vscode-context-menu-item.js +9 -9
  14. package/dist/vscode-context-menu-item/vscode-context-menu-item.js.map +1 -1
  15. package/dist/vscode-context-menu-item/vscode-context-menu-item.styles.d.ts.map +1 -1
  16. package/dist/vscode-context-menu-item/vscode-context-menu-item.styles.js +10 -13
  17. package/dist/vscode-context-menu-item/vscode-context-menu-item.styles.js.map +1 -1
  18. package/dist/vscode-divider/vscode-divider.d.ts +2 -0
  19. package/dist/vscode-divider/vscode-divider.d.ts.map +1 -1
  20. package/dist/vscode-divider/vscode-divider.js +2 -0
  21. package/dist/vscode-divider/vscode-divider.js.map +1 -1
  22. package/dist/vscode-divider/vscode-divider.styles.js +1 -1
  23. package/dist/vscode-divider/vscode-divider.styles.js.map +1 -1
  24. package/dist/vscode-icon/vscode-icon.d.ts +4 -4
  25. package/dist/vscode-icon/vscode-icon.js +4 -4
  26. package/dist/vscode-icon/vscode-icon.js.map +1 -1
  27. package/dist/vscode-icon/vscode-icon.styles.d.ts.map +1 -1
  28. package/dist/vscode-icon/vscode-icon.styles.js +10 -4
  29. package/dist/vscode-icon/vscode-icon.styles.js.map +1 -1
  30. package/dist/vscode-multi-select/vscode-multi-select.d.ts +21 -21
  31. package/dist/vscode-multi-select/vscode-multi-select.js +21 -21
  32. package/dist/vscode-multi-select/vscode-multi-select.js.map +1 -1
  33. package/dist/vscode-progress-ring/vscode-progress-ring.d.ts +2 -0
  34. package/dist/vscode-progress-ring/vscode-progress-ring.d.ts.map +1 -1
  35. package/dist/vscode-progress-ring/vscode-progress-ring.js +2 -0
  36. package/dist/vscode-progress-ring/vscode-progress-ring.js.map +1 -1
  37. package/dist/vscode-progress-ring/vscode-progress-ring.styles.js +1 -1
  38. package/dist/vscode-progress-ring/vscode-progress-ring.styles.js.map +1 -1
  39. package/dist/vscode-radio/vscode-radio.d.ts +9 -8
  40. package/dist/vscode-radio/vscode-radio.d.ts.map +1 -1
  41. package/dist/vscode-radio/vscode-radio.js +9 -8
  42. package/dist/vscode-radio/vscode-radio.js.map +1 -1
  43. package/dist/vscode-radio/vscode-radio.styles.js +2 -2
  44. package/dist/vscode-radio/vscode-radio.styles.js.map +1 -1
  45. package/dist/vscode-scrollable/vscode-scrollable.d.ts +4 -4
  46. package/dist/vscode-scrollable/vscode-scrollable.js +4 -4
  47. package/dist/vscode-scrollable/vscode-scrollable.js.map +1 -1
  48. package/dist/vscode-scrollable/vscode-scrollable.styles.d.ts.map +1 -1
  49. package/dist/vscode-scrollable/vscode-scrollable.styles.js +17 -5
  50. package/dist/vscode-scrollable/vscode-scrollable.styles.js.map +1 -1
  51. package/dist/vscode-single-select/vscode-single-select.d.ts +22 -20
  52. package/dist/vscode-single-select/vscode-single-select.d.ts.map +1 -1
  53. package/dist/vscode-single-select/vscode-single-select.js +22 -20
  54. package/dist/vscode-single-select/vscode-single-select.js.map +1 -1
  55. package/package.json +1 -1
  56. package/vscode.css-custom-data.json +11 -11
  57. package/vscode.html-custom-data.json +9 -9
@@ -1,5 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- const VERSION = '1.13.2-pre.1';
2
+ const VERSION = '1.14.0';
3
3
  const CONFIG_KEY = '__vscodeElements_disableRegistryWarning__';
4
4
  export class VscElement extends LitElement {
5
5
  /** VSCode Elements version */
@@ -1 +1 @@
1
- {"version":3,"file":"VscElement.js","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,MAAM,OAAO,GAAG,cAAc,CAAC;AAC/B,MAAM,UAAU,GAAG,2CAA2C,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IACxC,8BAA8B;IAC9B,IAAI,OAAO;QACT,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AASD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,OAAO,CAAC,aAAiC,EAAE,EAAE;QAC3C,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvD,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAyC,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,IAAI,UAAU,IAAI,MAAM,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,MAAM,cAAc,GAAI,EAAiB,EAAE,OAAO,CAAC;QACnD,IAAI,OAAO,GAAG,EAAE,CAAC;QAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CACV,OAAO,EACP,mEAAmE,CACpE,CAAC;YACF,OAAO;gBACL,mEAAmE,CAAC;QACxE,CAAC;aAAM,IAAI,cAAc,KAAK,OAAO,EAAE,CAAC;YACtC,OAAO;gBACL,mEAAmE,CAAC;YACtE,OAAO,IAAI,oBAAoB,OAAO,8BAA8B,cAAc,IAAI,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO;gBACL,gEAAgE,CAAC;QACrE,CAAC;QAED,OAAO,CAAC,IAAI,CACV,qBAAqB,OAAO,IAAI,OAAO,0CAA0C,UAAU,UAAU,CACtG,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {LitElement} from 'lit';\n\nconst VERSION = '1.13.2-pre.1';\nconst CONFIG_KEY = '__vscodeElements_disableRegistryWarning__';\n\nexport class VscElement extends LitElement {\n /** VSCode Elements version */\n get version(): string {\n return VERSION;\n }\n}\n\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\nexport type Constructor<T> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n};\n\n/**\n * Own implementation of Lit's customElement decorator.\n */\nexport const customElement = (tagName: string) => {\n return (classOrTarget: CustomElementClass) => {\n const customElementClass = customElements.get(tagName);\n\n if (!customElementClass) {\n customElements.define(tagName, classOrTarget as CustomElementConstructor);\n return;\n }\n\n if (CONFIG_KEY in window) {\n return;\n }\n\n const el = document.createElement(tagName);\n const anotherVersion = (el as VscElement)?.version;\n let message = '';\n\n if (!anotherVersion) {\n console.warn(\n tagName,\n 'is already registered by an unknown custom element handler class.'\n );\n message +=\n 'is already registered by an unknown custom element handler class.';\n } else if (anotherVersion !== VERSION) {\n message +=\n 'is already registered by a different version of VSCode Elements. ';\n message += `This version is \"${VERSION}\", while the other one is \"${anotherVersion}\".`;\n } else {\n message +=\n 'is already registered by the same version of VSCode Elements. ';\n }\n\n console.warn(\n `[VSCode Elements] ${tagName} ${message}\\nTo suppress this warning, set window.${CONFIG_KEY} to true`\n );\n };\n};\n"]}
1
+ {"version":3,"file":"VscElement.js","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,MAAM,OAAO,GAAG,QAAQ,CAAC;AACzB,MAAM,UAAU,GAAG,2CAA2C,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IACxC,8BAA8B;IAC9B,IAAI,OAAO;QACT,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AASD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,OAAO,CAAC,aAAiC,EAAE,EAAE;QAC3C,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvD,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAyC,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,IAAI,UAAU,IAAI,MAAM,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,MAAM,cAAc,GAAI,EAAiB,EAAE,OAAO,CAAC;QACnD,IAAI,OAAO,GAAG,EAAE,CAAC;QAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CACV,OAAO,EACP,mEAAmE,CACpE,CAAC;YACF,OAAO;gBACL,mEAAmE,CAAC;QACxE,CAAC;aAAM,IAAI,cAAc,KAAK,OAAO,EAAE,CAAC;YACtC,OAAO;gBACL,mEAAmE,CAAC;YACtE,OAAO,IAAI,oBAAoB,OAAO,8BAA8B,cAAc,IAAI,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO;gBACL,gEAAgE,CAAC;QACrE,CAAC;QAED,OAAO,CAAC,IAAI,CACV,qBAAqB,OAAO,IAAI,OAAO,0CAA0C,UAAU,UAAU,CACtG,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {LitElement} from 'lit';\n\nconst VERSION = '1.14.0';\nconst CONFIG_KEY = '__vscodeElements_disableRegistryWarning__';\n\nexport class VscElement extends LitElement {\n /** VSCode Elements version */\n get version(): string {\n return VERSION;\n }\n}\n\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\nexport type Constructor<T> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n};\n\n/**\n * Own implementation of Lit's customElement decorator.\n */\nexport const customElement = (tagName: string) => {\n return (classOrTarget: CustomElementClass) => {\n const customElementClass = customElements.get(tagName);\n\n if (!customElementClass) {\n customElements.define(tagName, classOrTarget as CustomElementConstructor);\n return;\n }\n\n if (CONFIG_KEY in window) {\n return;\n }\n\n const el = document.createElement(tagName);\n const anotherVersion = (el as VscElement)?.version;\n let message = '';\n\n if (!anotherVersion) {\n console.warn(\n tagName,\n 'is already registered by an unknown custom element handler class.'\n );\n message +=\n 'is already registered by an unknown custom element handler class.';\n } else if (anotherVersion !== VERSION) {\n message +=\n 'is already registered by a different version of VSCode Elements. ';\n message += `This version is \"${VERSION}\", while the other one is \"${anotherVersion}\".`;\n } else {\n message +=\n 'is already registered by the same version of VSCode Elements. ';\n }\n\n console.warn(\n `[VSCode Elements] ${tagName} ${message}\\nTo suppress this warning, set window.${CONFIG_KEY} to true`\n );\n };\n};\n"]}
@@ -17,16 +17,16 @@ export default [
17
17
 
18
18
  .select-face,
19
19
  .combobox-face {
20
- background-color: var(--vscode-settings-dropdownBackground);
21
- border-color: var(--vscode-settings-dropdownBorder);
20
+ background-color: var(--vscode-settings-dropdownBackground, #313131);
21
+ border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);
22
22
  border-radius: 2px;
23
23
  border-style: solid;
24
24
  border-width: 1px;
25
25
  box-sizing: border-box;
26
- color: var(--vscode-settings-dropdownForeground);
27
- font-family: var(--vscode-font-family);
28
- font-size: var(--vscode-font-size);
29
- font-weight: var(--vscode-font-weight);
26
+ color: var(--vscode-settings-dropdownForeground, #cccccc);
27
+ font-family: var(--vscode-font-family, sans-serif);
28
+ font-size: var(--vscode-font-size, 13px);
29
+ font-weight: var(--vscode-font-weight, normal);
30
30
  line-height: 18px;
31
31
  position: relative;
32
32
  user-select: none;
@@ -37,7 +37,7 @@ export default [
37
37
  :host(:invalid) .select-face,
38
38
  :host([invalid]) .combobox-face,
39
39
  :host(:invalid) .combobox-face {
40
- background-color: var(--vscode-inputValidation-errorBackground);
40
+ background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
41
41
  border-color: var(--vscode-inputValidation-errorBorder, #be1100);
42
42
  }
43
43
 
@@ -58,9 +58,9 @@ export default [
58
58
  }
59
59
 
60
60
  .select-face-badge {
61
- background-color: var(--vscode-badge-background);
61
+ background-color: var(--vscode-badge-background, #616161);
62
62
  border-radius: 2px;
63
- color: var(--vscode-badge-foreground);
63
+ color: var(--vscode-badge-foreground, #f8f8f8);
64
64
  display: inline-block;
65
65
  flex-shrink: 0;
66
66
  font-size: 11px;
@@ -84,7 +84,7 @@ export default [
84
84
  :host(:focus) .combobox-face,
85
85
  :host([focused]) .select-face,
86
86
  :host([focused]) .combobox-face {
87
- border-color: var(--vscode-focusBorder);
87
+ border-color: var(--vscode-focusBorder, #0078d4);
88
88
  outline: none;
89
89
  }
90
90
 
@@ -92,10 +92,10 @@ export default [
92
92
  background-color: transparent;
93
93
  box-sizing: border-box;
94
94
  border: 0;
95
- color: var(--vscode-foreground);
95
+ color: var(--vscode-foreground, #cccccc);
96
96
  display: block;
97
- font-family: var(--vscode-font-family);
98
- font-size: var(--vscode-font-size);
97
+ font-family: var(--vscode-font-family, sans-serif);
98
+ font-size: var(--vscode-font-size, 13px);
99
99
  line-height: 16px;
100
100
  padding: 4px;
101
101
  width: 100%;
@@ -108,7 +108,7 @@ export default [
108
108
  .combobox-button {
109
109
  background-color: transparent;
110
110
  border: 0;
111
- color: var(--vscode-foreground);
111
+ color: var(--vscode-foreground, #cccccc);
112
112
  cursor: pointer;
113
113
  flex-shrink: 0;
114
114
  height: 24px;
@@ -119,7 +119,7 @@ export default [
119
119
 
120
120
  .combobox-button:focus,
121
121
  .combobox-button:hover {
122
- background-color: var(--vscode-list-hoverBackground);
122
+ background-color: var(--vscode-list-hoverBackground, #2a2d2e);
123
123
  }
124
124
 
125
125
  .combobox-button:focus {
@@ -127,7 +127,7 @@ export default [
127
127
  }
128
128
 
129
129
  .icon {
130
- color: var(--vscode-foreground);
130
+ color: var(--vscode-foreground, #cccccc);
131
131
  display: block;
132
132
  height: 14px;
133
133
  pointer-events: none;
@@ -138,14 +138,14 @@ export default [
138
138
  }
139
139
 
140
140
  .icon svg {
141
- color: var(--vscode-foreground);
141
+ color: var(--vscode-foreground, #cccccc);
142
142
  height: 100%;
143
143
  width: 100%;
144
144
  }
145
145
 
146
146
  .dropdown {
147
- background-color: var(--vscode-settings-dropdownBackground);
148
- border-color: var(--vscode-settings-dropdownListBorder);
147
+ background-color: var(--vscode-settings-dropdownBackground, #313131);
148
+ border-color: var(--vscode-settings-dropdownListBorder, #454545);
149
149
  border-radius: 0 0 3px 3px;
150
150
  border-style: solid;
151
151
  border-width: 1px;
@@ -168,7 +168,7 @@ export default [
168
168
 
169
169
  :host(:focus) .dropdown,
170
170
  :host([focused]) .dropdown {
171
- border-color: var(--vscode-focusBorder);
171
+ border-color: var(--vscode-focusBorder, #0078d4);
172
172
  }
173
173
 
174
174
  .options {
@@ -183,12 +183,12 @@ export default [
183
183
 
184
184
  .option {
185
185
  align-items: center;
186
- color: var(--vscode-foreground);
186
+ color: var(--vscode-foreground, #cccccc);
187
187
  cursor: pointer;
188
188
  display: flex;
189
- font-family: var(--vscode-font-family);
190
- font-size: var(--vscode-font-size);
191
- font-weight: var(--vscode-font-weight);
189
+ font-family: var(--vscode-font-family, sans-serif);
190
+ font-size: var(--vscode-font-size, 13px);
191
+ font-weight: var(--vscode-font-weight, normal);
192
192
  line-height: 18px;
193
193
  min-height: calc(var(--vscode-font-size) * 1.3);
194
194
  padding: 1px 3px;
@@ -199,16 +199,16 @@ export default [
199
199
  }
200
200
 
201
201
  .option b {
202
- color: var(--vscode-list-highlightForeground);
202
+ color: var(--vscode-list-highlightForeground, #2aaaff);
203
203
  }
204
204
 
205
205
  .option.active b {
206
- color: var(--vscode-list-focusHighlightForeground);
206
+ color: var(--vscode-list-focusHighlightForeground, #2aaaff);
207
207
  }
208
208
 
209
209
  .option:not(.disabled):hover {
210
- background-color: var(--vscode-list-hoverBackground);
211
- color: var(--vscode-list-hoverForeground);
210
+ background-color: var(--vscode-list-hoverBackground, #2a2d2e);
211
+ color: var(--vscode-list-hoverForeground, #ffffff);
212
212
  }
213
213
 
214
214
  :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])
@@ -216,7 +216,7 @@ export default [
216
216
  :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])
217
217
  .option:hover {
218
218
  border-style: dotted;
219
- border-color: var(--vscode-list-focusOutline);
219
+ border-color: var(--vscode-list-focusOutline, #0078d4);
220
220
  }
221
221
 
222
222
  .option.disabled {
@@ -226,9 +226,9 @@ export default [
226
226
 
227
227
  .option.active,
228
228
  .option.active:hover {
229
- background-color: var(--vscode-list-activeSelectionBackground);
230
- color: var(--vscode-list-activeSelectionForeground);
231
- border-color: var(--vscode-list-activeSelectionBackground);
229
+ background-color: var(--vscode-list-activeSelectionBackground, #04395e);
230
+ color: var(--vscode-list-activeSelectionForeground, #ffffff);
231
+ border-color: var(--vscode-list-activeSelectionBackground, #04395e);
232
232
  border-style: solid;
233
233
  border-width: 1px;
234
234
  }
@@ -237,7 +237,7 @@ export default [
237
237
  .option.active,
238
238
  :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])
239
239
  .option.active:hover {
240
- border-color: var(--vscode-list-focusOutline);
240
+ border-color: var(--vscode-list-focusOutline, #0078d4);
241
241
  border-style: dashed;
242
242
  }
243
243
 
@@ -248,18 +248,18 @@ export default [
248
248
  }
249
249
 
250
250
  .dropdown.multiple .option.selected {
251
- background-color: var(--vscode-list-hoverBackground);
252
- border-color: var(--vscode-list-hoverBackground);
251
+ background-color: var(--vscode-list-hoverBackground, #2a2d2e);
252
+ border-color: var(--vscode-list-hoverBackground, #2a2d2e);
253
253
  }
254
254
 
255
255
  .dropdown.multiple .option.selected.active {
256
- background-color: var(--vscode-list-activeSelectionBackground);
257
- color: var(--vscode-list-activeSelectionForeground);
258
- border-color: var(--vscode-list-activeSelectionBackground);
256
+ background-color: var(--vscode-list-activeSelectionBackground, #04395e);
257
+ color: var(--vscode-list-activeSelectionForeground, #ffffff);
258
+ border-color: var(--vscode-list-activeSelectionBackground, #04395e);
259
259
  }
260
260
 
261
261
  .checkbox-icon {
262
- background-color: var(--vscode-settings-checkboxBackground);
262
+ background-color: var(--vscode-settings-checkboxBackground, #313131);
263
263
  border: 1px solid currentColor;
264
264
  border-radius: 2px;
265
265
  box-sizing: border-box;
@@ -281,13 +281,13 @@ export default [
281
281
  }
282
282
 
283
283
  .checkbox-icon.checked:before {
284
- background-color: var(--vscode-foreground);
284
+ background-color: var(--vscode-foreground, #cccccc);
285
285
  left: 1px;
286
286
  top: 2.5px;
287
287
  }
288
288
 
289
289
  .checkbox-icon.checked:after {
290
- background-color: var(--vscode-settings-checkboxBackground);
290
+ background-color: var(--vscode-settings-checkboxBackground, #313131);
291
291
  left: 1px;
292
292
  top: -0.5px;
293
293
  }
@@ -306,7 +306,7 @@ export default [
306
306
  align-items: center;
307
307
  background-color: transparent;
308
308
  border: 0;
309
- color: var(--vscode-foreground);
309
+ color: var(--vscode-foreground, #cccccc);
310
310
  cursor: pointer;
311
311
  display: flex;
312
312
  height: 24px;
@@ -320,18 +320,18 @@ export default [
320
320
  }
321
321
 
322
322
  .action-icon:focus-visible {
323
- outline: 1px solid var(--vscode-focusBorder);
323
+ outline: 1px solid var(--vscode-focusBorder, #0078d4);
324
324
  outline-offset: -1px;
325
325
  }
326
326
 
327
327
  .description {
328
- border-color: var(--vscode-settings-dropdownBorder);
328
+ border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);
329
329
  border-style: solid;
330
330
  border-width: 1px 0 0;
331
- color: var(--vscode-foreground);
332
- font-family: var(--vscode-font-family);
333
- font-size: var(--vscode-font-size);
334
- font-weight: var(--vscode-font-weight);
331
+ color: var(--vscode-foreground, #cccccc);
332
+ font-family: var(--vscode-font-family, sans-serif);
333
+ font-size: var(--vscode-font-size, 13px);
334
+ font-weight: var(--vscode-font-weight, normal);
335
335
  line-height: 1.3;
336
336
  padding: 6px 4px;
337
337
  word-wrap: break-word;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkVF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground);\n border-color: var(--vscode-settings-dropdownBorder);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground);\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background);\n border-radius: 2px;\n color: var(--vscode-badge-foreground);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground);\n display: block;\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground);\n cursor: pointer;\n flex-shrink: 0;\n height: 24px;\n margin: 0;\n padding: 0;\n width: 30px;\n }\n\n .combobox-button:focus,\n .combobox-button:hover {\n background-color: var(--vscode-list-hoverBackground);\n }\n\n .combobox-button:focus {\n outline: 0;\n }\n\n .icon {\n color: var(--vscode-foreground);\n display: block;\n height: 14px;\n pointer-events: none;\n position: absolute;\n right: 8px;\n top: 5px;\n width: 14px;\n }\n\n .icon svg {\n color: var(--vscode-foreground);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground);\n border-color: var(--vscode-settings-dropdownListBorder);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n left: 0;\n padding-bottom: 2px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: var(--dropdown-z-index, 2);\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: auto;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder);\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n max-height: 222px;\n overflow: auto;\n padding: 1px;\n }\n\n .option {\n align-items: center;\n color: var(--vscode-foreground);\n cursor: pointer;\n display: flex;\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground);\n color: var(--vscode-list-hoverForeground);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n border-style: dotted;\n border-color: var(--vscode-list-focusOutline);\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground);\n color: var(--vscode-list-activeSelectionForeground);\n border-color: var(--vscode-list-activeSelectionBackground);\n border-style: solid;\n border-width: 1px;\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n border-color: var(--vscode-list-focusOutline);\n border-style: dashed;\n }\n\n .option-label {\n display: block;\n pointer-events: none;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground);\n border-color: var(--vscode-list-hoverBackground);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground);\n color: var(--vscode-list-activeSelectionForeground);\n border-color: var(--vscode-list-activeSelectionBackground);\n }\n\n .checkbox-icon {\n background-color: var(--vscode-settings-checkboxBackground);\n border: 1px solid currentColor;\n border-radius: 2px;\n box-sizing: border-box;\n height: 14px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 14px;\n }\n\n .checkbox-icon.checked:before,\n .checkbox-icon.checked:after {\n content: '';\n display: block;\n height: 5px;\n position: absolute;\n transform: rotate(-45deg);\n width: 10px;\n }\n\n .checkbox-icon.checked:before {\n background-color: var(--vscode-foreground);\n left: 1px;\n top: 2.5px;\n }\n\n .checkbox-icon.checked:after {\n background-color: var(--vscode-settings-checkboxBackground);\n left: 1px;\n top: -0.5px;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground);\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkVF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n flex-shrink: 0;\n height: 24px;\n margin: 0;\n padding: 0;\n width: 30px;\n }\n\n .combobox-button:focus,\n .combobox-button:hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .combobox-button:focus {\n outline: 0;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n position: absolute;\n right: 8px;\n top: 5px;\n width: 14px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n left: 0;\n padding-bottom: 2px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: var(--dropdown-z-index, 2);\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: auto;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n max-height: 222px;\n overflow: auto;\n padding: 1px;\n }\n\n .option {\n align-items: center;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n border-style: dotted;\n border-color: var(--vscode-list-focusOutline, #0078d4);\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n border-color: var(--vscode-list-activeSelectionBackground, #04395e);\n border-style: solid;\n border-width: 1px;\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n border-color: var(--vscode-list-focusOutline, #0078d4);\n border-style: dashed;\n }\n\n .option-label {\n display: block;\n pointer-events: none;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n border-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n border-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n background-color: var(--vscode-settings-checkboxBackground, #313131);\n border: 1px solid currentColor;\n border-radius: 2px;\n box-sizing: border-box;\n height: 14px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 14px;\n }\n\n .checkbox-icon.checked:before,\n .checkbox-icon.checked:after {\n content: '';\n display: block;\n height: 5px;\n position: absolute;\n transform: rotate(-45deg);\n width: 10px;\n }\n\n .checkbox-icon.checked:before {\n background-color: var(--vscode-foreground, #cccccc);\n left: 1px;\n top: 2.5px;\n }\n\n .checkbox-icon.checked:after {\n background-color: var(--vscode-settings-checkboxBackground, #313131);\n left: 1px;\n top: -0.5px;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
@@ -20,13 +20,13 @@ export type VscContextMenuSelectEvent = CustomEvent<{
20
20
  *
21
21
  * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked
22
22
  *
23
- * @cssprop --vscode-font-family
24
- * @cssprop --vscode-font-size
25
- * @cssprop --vscode-font-weight
26
- * @cssprop --vscode-menu-background
27
- * @cssprop --vscode-menu-border
28
- * @cssprop --vscode-menu-foreground
29
- * @cssprop --vscode-widget-shadow
23
+ * @cssprop [--vscode-font-family=sans-serif]
24
+ * @cssprop [--vscode-font-size=13px]
25
+ * @cssprop [--vscode-font-weight=normal]
26
+ * @cssprop [--vscode-menu-background=#1f1f1f]
27
+ * @cssprop [--vscode-menu-border=#454545]
28
+ * @cssprop [--vscode-menu-foreground=#cccccc]
29
+ * @cssprop [--vscode-widget-shadow=rgba(0, 0, 0, 0.36)]
30
30
  */
31
31
  export declare class VscodeContextMenu extends VscElement {
32
32
  static styles: import("lit").CSSResultGroup;
@@ -14,13 +14,13 @@ import styles from './vscode-context-menu.styles.js';
14
14
  *
15
15
  * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked
16
16
  *
17
- * @cssprop --vscode-font-family
18
- * @cssprop --vscode-font-size
19
- * @cssprop --vscode-font-weight
20
- * @cssprop --vscode-menu-background
21
- * @cssprop --vscode-menu-border
22
- * @cssprop --vscode-menu-foreground
23
- * @cssprop --vscode-widget-shadow
17
+ * @cssprop [--vscode-font-family=sans-serif]
18
+ * @cssprop [--vscode-font-size=13px]
19
+ * @cssprop [--vscode-font-weight=normal]
20
+ * @cssprop [--vscode-menu-background=#1f1f1f]
21
+ * @cssprop [--vscode-menu-border=#454545]
22
+ * @cssprop [--vscode-menu-foreground=#cccccc]
23
+ * @cssprop [--vscode-widget-shadow=rgba(0, 0, 0, 0.36)]
24
24
  */
25
25
  let VscodeContextMenu = class VscodeContextMenu extends VscElement {
26
26
  set data(data) {
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-context-menu.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport type {\n VscClickEventDetail,\n VscodeContextMenuItem,\n} from '../vscode-context-menu-item/vscode-context-menu-item.js';\nimport '../vscode-context-menu-item/index.js';\nimport styles from './vscode-context-menu.styles.js';\n\ninterface MenuItemData {\n // TODO: make optional\n label: string;\n keybinding?: string;\n value?: string;\n separator?: boolean;\n tabindex?: number;\n}\n\nexport type VscContextMenuSelectEvent = CustomEvent<{\n keybinding: string;\n label: string;\n value: string;\n separator: boolean;\n tabindex: number;\n}>;\n\n/**\n * @tag vscode-context-menu\n *\n * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked\n *\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-menu-background\n * @cssprop --vscode-menu-border\n * @cssprop --vscode-menu-foreground\n * @cssprop --vscode-widget-shadow\n */\n@customElement('vscode-context-menu')\nexport class VscodeContextMenu extends VscElement {\n static override styles = styles;\n\n @property({type: Array, attribute: false})\n set data(data: MenuItemData[]) {\n this._data = data;\n\n const indexes: number[] = [];\n\n data.forEach((v, i) => {\n if (!v.separator) {\n indexes.push(i);\n }\n });\n\n this._clickableItemIndexes = indexes;\n }\n get data(): MenuItemData[] {\n return this._data;\n }\n\n /**\n * By default, the menu closes when an item is clicked. This attribute prevents the menu from closing.\n */\n @property({type: Boolean, reflect: true, attribute: 'prevent-close'})\n preventClose = false;\n\n @property({type: Boolean, reflect: true})\n set show(show: boolean) {\n this._show = show;\n this._selectedClickableItemIndex = -1;\n\n if (show) {\n this.updateComplete.then(() => {\n if (this._wrapperEl) {\n this._wrapperEl.focus();\n }\n\n requestAnimationFrame(() => {\n document.addEventListener('click', this._onClickOutsideBound, {\n once: true,\n });\n });\n });\n }\n }\n get show(): boolean {\n return this._show;\n }\n\n /** @internal */\n @property({type: Number, reflect: true})\n override tabIndex = 0;\n\n constructor() {\n super();\n this.addEventListener('keydown', this._onKeyDown);\n }\n\n /* connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._onClickOutsideBound);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._onClickOutsideBound);\n } */\n\n @state()\n private _selectedClickableItemIndex = -1;\n\n @state()\n private _show = false;\n\n @query('.context-menu')\n private _wrapperEl!: HTMLDivElement;\n\n private _data: MenuItemData[] = [];\n\n private _clickableItemIndexes: number[] = [];\n\n private _onClickOutside(ev: MouseEvent) {\n if (!ev.composedPath().includes(this)) {\n this.show = false;\n }\n }\n\n private _onClickOutsideBound = this._onClickOutside.bind(this);\n\n private _onKeyDown(ev: KeyboardEvent) {\n const {key} = ev;\n\n if (\n key === 'ArrowUp' ||\n key === 'ArrowDown' ||\n key === 'Escape' ||\n key === 'Enter'\n ) {\n ev.preventDefault();\n }\n\n switch (key) {\n case 'ArrowUp':\n this._handleArrowUp();\n break;\n case 'ArrowDown':\n this._handleArrowDown();\n break;\n case 'Escape':\n this._handleEscape();\n break;\n case 'Enter':\n this._handleEnter();\n break;\n default:\n }\n }\n\n private _handleArrowUp() {\n if (this._selectedClickableItemIndex === 0) {\n this._selectedClickableItemIndex = this._clickableItemIndexes.length - 1;\n } else {\n this._selectedClickableItemIndex -= 1;\n }\n }\n\n private _handleArrowDown() {\n if (\n this._selectedClickableItemIndex + 1 <\n this._clickableItemIndexes.length\n ) {\n this._selectedClickableItemIndex += 1;\n } else {\n this._selectedClickableItemIndex = 0;\n }\n }\n\n private _handleEscape() {\n this.show = false;\n document.removeEventListener('click', this._onClickOutsideBound);\n }\n\n private _dispatchSelectEvent(selectedOption: VscodeContextMenuItem) {\n const {keybinding, label, value, separator, tabindex} = selectedOption;\n\n this.dispatchEvent(\n new CustomEvent('vsc-context-menu-select', {\n detail: {\n keybinding,\n label,\n separator,\n tabindex,\n value,\n },\n }) as VscContextMenuSelectEvent\n );\n }\n\n private _dispatchLegacySelectEvent(selectedOption: VscodeContextMenuItem) {\n const {keybinding, label, value, separator, tabindex} = selectedOption;\n const detail: VscClickEventDetail = {\n keybinding,\n label,\n value,\n separator,\n tabindex,\n };\n\n /** @deprecated - Renamed to `vsc-context-menu-select` */\n this.dispatchEvent(\n new CustomEvent('vsc-select', {\n detail,\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _handleEnter() {\n if (this._selectedClickableItemIndex === -1) {\n return;\n }\n\n const realItemIndex =\n this._clickableItemIndexes[this._selectedClickableItemIndex];\n const options = this._wrapperEl.querySelectorAll(\n 'vscode-context-menu-item'\n );\n const selectedOption = options[realItemIndex];\n\n this._dispatchLegacySelectEvent(selectedOption);\n this._dispatchSelectEvent(selectedOption);\n\n if (!this.preventClose) {\n this.show = false;\n document.removeEventListener('click', this._onClickOutsideBound);\n }\n }\n\n private _onItemClick(event: CustomEvent) {\n const et = event.currentTarget as VscodeContextMenuItem;\n\n this._dispatchLegacySelectEvent(et);\n this._dispatchSelectEvent(et);\n\n if (!this.preventClose) {\n this.show = false;\n }\n }\n\n private _onItemMouseOver(event: MouseEvent) {\n const el = event.target as HTMLElement;\n const index = el.dataset.index ? +el.dataset.index : -1;\n const found = this._clickableItemIndexes.findIndex(\n (item) => item === index\n );\n\n if (found !== -1) {\n this._selectedClickableItemIndex = found;\n }\n }\n\n private _onItemMouseOut() {\n this._selectedClickableItemIndex = -1;\n }\n\n override render(): TemplateResult {\n if (!this._show) {\n return html`${nothing}`;\n }\n\n const selectedIndex =\n this._clickableItemIndexes[this._selectedClickableItemIndex];\n\n return html`\n <div class=\"context-menu\" tabindex=\"0\">\n ${this.data\n ? this.data.map(\n (\n {\n label = '',\n keybinding = '',\n value = '',\n separator = false,\n tabindex = 0,\n },\n index\n ) => html`\n <vscode-context-menu-item\n label=${label}\n keybinding=${keybinding}\n value=${value}\n ?separator=${separator}\n ?selected=${index === selectedIndex}\n tabindex=${tabindex}\n @vsc-click=${this._onItemClick}\n @mouseover=${this._onItemMouseOver}\n @mouseout=${this._onItemMouseOut}\n data-index=${index}\n ></vscode-context-menu-item>\n `\n )\n : html`<slot></slot>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-context-menu': VscodeContextMenu;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-context-menu-select': VscContextMenuSelectEvent;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-context-menu.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport type {\n VscClickEventDetail,\n VscodeContextMenuItem,\n} from '../vscode-context-menu-item/vscode-context-menu-item.js';\nimport '../vscode-context-menu-item/index.js';\nimport styles from './vscode-context-menu.styles.js';\n\ninterface MenuItemData {\n // TODO: make optional\n label: string;\n keybinding?: string;\n value?: string;\n separator?: boolean;\n tabindex?: number;\n}\n\nexport type VscContextMenuSelectEvent = CustomEvent<{\n keybinding: string;\n label: string;\n value: string;\n separator: boolean;\n tabindex: number;\n}>;\n\n/**\n * @tag vscode-context-menu\n *\n * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-menu-background=#1f1f1f]\n * @cssprop [--vscode-menu-border=#454545]\n * @cssprop [--vscode-menu-foreground=#cccccc]\n * @cssprop [--vscode-widget-shadow=rgba(0, 0, 0, 0.36)]\n */\n@customElement('vscode-context-menu')\nexport class VscodeContextMenu extends VscElement {\n static override styles = styles;\n\n @property({type: Array, attribute: false})\n set data(data: MenuItemData[]) {\n this._data = data;\n\n const indexes: number[] = [];\n\n data.forEach((v, i) => {\n if (!v.separator) {\n indexes.push(i);\n }\n });\n\n this._clickableItemIndexes = indexes;\n }\n get data(): MenuItemData[] {\n return this._data;\n }\n\n /**\n * By default, the menu closes when an item is clicked. This attribute prevents the menu from closing.\n */\n @property({type: Boolean, reflect: true, attribute: 'prevent-close'})\n preventClose = false;\n\n @property({type: Boolean, reflect: true})\n set show(show: boolean) {\n this._show = show;\n this._selectedClickableItemIndex = -1;\n\n if (show) {\n this.updateComplete.then(() => {\n if (this._wrapperEl) {\n this._wrapperEl.focus();\n }\n\n requestAnimationFrame(() => {\n document.addEventListener('click', this._onClickOutsideBound, {\n once: true,\n });\n });\n });\n }\n }\n get show(): boolean {\n return this._show;\n }\n\n /** @internal */\n @property({type: Number, reflect: true})\n override tabIndex = 0;\n\n constructor() {\n super();\n this.addEventListener('keydown', this._onKeyDown);\n }\n\n /* connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._onClickOutsideBound);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._onClickOutsideBound);\n } */\n\n @state()\n private _selectedClickableItemIndex = -1;\n\n @state()\n private _show = false;\n\n @query('.context-menu')\n private _wrapperEl!: HTMLDivElement;\n\n private _data: MenuItemData[] = [];\n\n private _clickableItemIndexes: number[] = [];\n\n private _onClickOutside(ev: MouseEvent) {\n if (!ev.composedPath().includes(this)) {\n this.show = false;\n }\n }\n\n private _onClickOutsideBound = this._onClickOutside.bind(this);\n\n private _onKeyDown(ev: KeyboardEvent) {\n const {key} = ev;\n\n if (\n key === 'ArrowUp' ||\n key === 'ArrowDown' ||\n key === 'Escape' ||\n key === 'Enter'\n ) {\n ev.preventDefault();\n }\n\n switch (key) {\n case 'ArrowUp':\n this._handleArrowUp();\n break;\n case 'ArrowDown':\n this._handleArrowDown();\n break;\n case 'Escape':\n this._handleEscape();\n break;\n case 'Enter':\n this._handleEnter();\n break;\n default:\n }\n }\n\n private _handleArrowUp() {\n if (this._selectedClickableItemIndex === 0) {\n this._selectedClickableItemIndex = this._clickableItemIndexes.length - 1;\n } else {\n this._selectedClickableItemIndex -= 1;\n }\n }\n\n private _handleArrowDown() {\n if (\n this._selectedClickableItemIndex + 1 <\n this._clickableItemIndexes.length\n ) {\n this._selectedClickableItemIndex += 1;\n } else {\n this._selectedClickableItemIndex = 0;\n }\n }\n\n private _handleEscape() {\n this.show = false;\n document.removeEventListener('click', this._onClickOutsideBound);\n }\n\n private _dispatchSelectEvent(selectedOption: VscodeContextMenuItem) {\n const {keybinding, label, value, separator, tabindex} = selectedOption;\n\n this.dispatchEvent(\n new CustomEvent('vsc-context-menu-select', {\n detail: {\n keybinding,\n label,\n separator,\n tabindex,\n value,\n },\n }) as VscContextMenuSelectEvent\n );\n }\n\n private _dispatchLegacySelectEvent(selectedOption: VscodeContextMenuItem) {\n const {keybinding, label, value, separator, tabindex} = selectedOption;\n const detail: VscClickEventDetail = {\n keybinding,\n label,\n value,\n separator,\n tabindex,\n };\n\n /** @deprecated - Renamed to `vsc-context-menu-select` */\n this.dispatchEvent(\n new CustomEvent('vsc-select', {\n detail,\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _handleEnter() {\n if (this._selectedClickableItemIndex === -1) {\n return;\n }\n\n const realItemIndex =\n this._clickableItemIndexes[this._selectedClickableItemIndex];\n const options = this._wrapperEl.querySelectorAll(\n 'vscode-context-menu-item'\n );\n const selectedOption = options[realItemIndex];\n\n this._dispatchLegacySelectEvent(selectedOption);\n this._dispatchSelectEvent(selectedOption);\n\n if (!this.preventClose) {\n this.show = false;\n document.removeEventListener('click', this._onClickOutsideBound);\n }\n }\n\n private _onItemClick(event: CustomEvent) {\n const et = event.currentTarget as VscodeContextMenuItem;\n\n this._dispatchLegacySelectEvent(et);\n this._dispatchSelectEvent(et);\n\n if (!this.preventClose) {\n this.show = false;\n }\n }\n\n private _onItemMouseOver(event: MouseEvent) {\n const el = event.target as HTMLElement;\n const index = el.dataset.index ? +el.dataset.index : -1;\n const found = this._clickableItemIndexes.findIndex(\n (item) => item === index\n );\n\n if (found !== -1) {\n this._selectedClickableItemIndex = found;\n }\n }\n\n private _onItemMouseOut() {\n this._selectedClickableItemIndex = -1;\n }\n\n override render(): TemplateResult {\n if (!this._show) {\n return html`${nothing}`;\n }\n\n const selectedIndex =\n this._clickableItemIndexes[this._selectedClickableItemIndex];\n\n return html`\n <div class=\"context-menu\" tabindex=\"0\">\n ${this.data\n ? this.data.map(\n (\n {\n label = '',\n keybinding = '',\n value = '',\n separator = false,\n tabindex = 0,\n },\n index\n ) => html`\n <vscode-context-menu-item\n label=${label}\n keybinding=${keybinding}\n value=${value}\n ?separator=${separator}\n ?selected=${index === selectedIndex}\n tabindex=${tabindex}\n @vsc-click=${this._onItemClick}\n @mouseover=${this._onItemMouseOver}\n @mouseout=${this._onItemMouseOut}\n data-index=${index}\n ></vscode-context-menu-item>\n `\n )\n : html`<slot></slot>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-context-menu': VscodeContextMenu;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-context-menu-select': VscContextMenuSelectEvent;\n }\n}\n"]}
@@ -5,21 +5,21 @@ const styles = [
5
5
  css `
6
6
  :host {
7
7
  display: block;
8
- font-family: var(--vscode-font-family);
9
- font-size: var(--vscode-font-size);
10
- font-weight: var(--vscode-font-weight);
8
+ font-family: var(--vscode-font-family, sans-serif);
9
+ font-size: var(--vscode-font-size, 13px);
10
+ font-weight: var(--vscode-font-weight, normal);
11
11
  line-height: 1.4em;
12
12
  position: relative;
13
13
  }
14
14
 
15
15
  .context-menu {
16
- background-color: var(--vscode-menu-background);
17
- border-color: var(--vscode-menu-border, var(--vscode-menu-background));
16
+ background-color: var(--vscode-menu-background, #1f1f1f);
17
+ border-color: var(--vscode-menu-border, #454545);
18
18
  border-radius: 5px;
19
19
  border-style: solid;
20
20
  border-width: 1px;
21
- box-shadow: 0 2px 8px var(--vscode-widget-shadow);
22
- color: var(--vscode-menu-foreground);
21
+ box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
22
+ color: var(--vscode-menu-foreground, #cccccc);
23
23
  padding: 4px 0;
24
24
  white-space: nowrap;
25
25
  }
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-context-menu.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n display: block;\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n line-height: 1.4em;\n position: relative;\n }\n\n .context-menu {\n background-color: var(--vscode-menu-background);\n border-color: var(--vscode-menu-border, var(--vscode-menu-background));\n border-radius: 5px;\n border-style: solid;\n border-width: 1px;\n box-shadow: 0 2px 8px var(--vscode-widget-shadow);\n color: var(--vscode-menu-foreground);\n padding: 4px 0;\n white-space: nowrap;\n }\n\n .context-menu:focus {\n outline: 0;\n }\n `,\n];\n\nexport default styles;\n"]}
1
+ {"version":3,"file":"vscode-context-menu.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.4em;\n position: relative;\n }\n\n .context-menu {\n background-color: var(--vscode-menu-background, #1f1f1f);\n border-color: var(--vscode-menu-border, #454545);\n border-radius: 5px;\n border-style: solid;\n border-width: 1px;\n box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));\n color: var(--vscode-menu-foreground, #cccccc);\n padding: 4px 0;\n white-space: nowrap;\n }\n\n .context-menu:focus {\n outline: 0;\n }\n `,\n];\n\nexport default styles;\n"]}
@@ -12,15 +12,15 @@ export interface VscClickEventDetail {
12
12
  *
13
13
  * Child component of [ContextMenu](/components/context-menu/).
14
14
  *
15
- * @cssprop --vscode-font-family
16
- * @cssprop --vscode-font-size
17
- * @cssprop --vscode-font-weight
18
- * @cssprop --vscode-menu-background
19
- * @cssprop [--vscode-menu-selectionBorder=var(--vscode-menu-selectionBackground)]
20
- * @cssprop --vscode-menu-foreground
21
- * @cssprop --vscode-menu-selectionBackground
22
- * @cssprop --vscode-menu-selectionForeground
23
- * @cssprop --vscode-menu-separatorBackground
15
+ * @cssprop [--vscode-font-family=sans-serif]
16
+ * @cssprop [--vscode-font-size=13px]
17
+ * @cssprop [--vscode-font-weight=normal]
18
+ * @cssprop [--vscode-menu-background=#1f1f1f]
19
+ * @cssprop [--vscode-menu-selectionBorder=transparent]
20
+ * @cssprop [--vscode-menu-foreground=#cccccc]
21
+ * @cssprop [--vscode-menu-selectionBackground=#0078d4]
22
+ * @cssprop [--vscode-menu-selectionForeground=#ffffff]
23
+ * @cssprop [--vscode-menu-separatorBackground=#454545]
24
24
  */
25
25
  export declare class VscodeContextMenuItem extends VscElement {
26
26
  static styles: import("lit").CSSResultGroup;
@@ -13,15 +13,15 @@ import styles from './vscode-context-menu-item.styles.js';
13
13
  *
14
14
  * Child component of [ContextMenu](/components/context-menu/).
15
15
  *
16
- * @cssprop --vscode-font-family
17
- * @cssprop --vscode-font-size
18
- * @cssprop --vscode-font-weight
19
- * @cssprop --vscode-menu-background
20
- * @cssprop [--vscode-menu-selectionBorder=var(--vscode-menu-selectionBackground)]
21
- * @cssprop --vscode-menu-foreground
22
- * @cssprop --vscode-menu-selectionBackground
23
- * @cssprop --vscode-menu-selectionForeground
24
- * @cssprop --vscode-menu-separatorBackground
16
+ * @cssprop [--vscode-font-family=sans-serif]
17
+ * @cssprop [--vscode-font-size=13px]
18
+ * @cssprop [--vscode-font-weight=normal]
19
+ * @cssprop [--vscode-menu-background=#1f1f1f]
20
+ * @cssprop [--vscode-menu-selectionBorder=transparent]
21
+ * @cssprop [--vscode-menu-foreground=#cccccc]
22
+ * @cssprop [--vscode-menu-selectionBackground=#0078d4]
23
+ * @cssprop [--vscode-menu-selectionForeground=#ffffff]
24
+ * @cssprop [--vscode-menu-separatorBackground=#454545]
25
25
  */
26
26
  let VscodeContextMenuItem = class VscodeContextMenuItem extends VscElement {
27
27
  constructor() {
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-context-menu-item.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,sCAAsC,CAAC;AAU1D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAIL,UAAK,GAAG,EAAE,CAAC;QAGX,eAAU,GAAG,EAAE,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,KAAK,CAAC;QAGlB,aAAQ,GAAG,CAAC,CAAC;IAyCf,CAAC;IAvCS,WAAW;QACjB,gBAAgB;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,WAAW,EAAE;YAChD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;gBAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;WAIH;YACH,CAAC,CAAC,IAAI,CAAA;;0BAEY,IAAI,CAAC,WAAW;kBACxB,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS;gBAChD,CAAC,CAAC,OAAO;kBACT,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,UAAU,SAAS;gBAC1D,CAAC,CAAC,OAAO;;;WAGhB;KACN,CAAC;IACJ,CAAC;;AAvDe,4BAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yDACT;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wDACvB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uDACZ;AAhBF,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAyDjC","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-context-menu-item.styles.js';\n\nexport interface VscClickEventDetail {\n label: string;\n keybinding: string;\n value: string;\n separator: boolean;\n tabindex: number;\n}\n\n/**\n * @tag vscode-context-menu-item\n *\n * Child component of [ContextMenu](/components/context-menu/).\n *\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-menu-background\n * @cssprop [--vscode-menu-selectionBorder=var(--vscode-menu-selectionBackground)]\n * @cssprop --vscode-menu-foreground\n * @cssprop --vscode-menu-selectionBackground\n * @cssprop --vscode-menu-selectionForeground\n * @cssprop --vscode-menu-separatorBackground\n */\n@customElement('vscode-context-menu-item')\nexport class VscodeContextMenuItem extends VscElement {\n static override styles = styles;\n\n @property({type: String})\n label = '';\n\n @property({type: String})\n keybinding = '';\n\n @property({type: String})\n value = '';\n\n @property({type: Boolean, reflect: true})\n separator = false;\n\n @property({type: Number})\n tabindex = 0;\n\n private onItemClick() {\n /** @internal */\n this.dispatchEvent(\n new CustomEvent<VscClickEventDetail>('vsc-click', {\n detail: {\n label: this.label,\n keybinding: this.keybinding,\n value: this.value || this.label,\n separator: this.separator,\n tabindex: this.tabindex,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n override render(): TemplateResult {\n return html`\n ${this.separator\n ? html`\n <div class=\"context-menu-item separator\">\n <span class=\"ruler\"></span>\n </div>\n `\n : html`\n <div class=\"context-menu-item\">\n <a @click=${this.onItemClick}>\n ${this.label\n ? html`<span class=\"label\">${this.label}</span>`\n : nothing}\n ${this.keybinding\n ? html`<span class=\"keybinding\">${this.keybinding}</span>`\n : nothing}\n </a>\n </div>\n `}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-context-menu-item': VscodeContextMenuItem;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-context-menu-item.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,sCAAsC,CAAC;AAU1D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAIL,UAAK,GAAG,EAAE,CAAC;QAGX,eAAU,GAAG,EAAE,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,KAAK,CAAC;QAGlB,aAAQ,GAAG,CAAC,CAAC;IAyCf,CAAC;IAvCS,WAAW;QACjB,gBAAgB;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,WAAW,EAAE;YAChD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;gBAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;WAIH;YACH,CAAC,CAAC,IAAI,CAAA;;0BAEY,IAAI,CAAC,WAAW;kBACxB,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS;gBAChD,CAAC,CAAC,OAAO;kBACT,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,UAAU,SAAS;gBAC1D,CAAC,CAAC,OAAO;;;WAGhB;KACN,CAAC;IACJ,CAAC;;AAvDe,4BAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yDACT;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wDACvB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uDACZ;AAhBF,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAyDjC","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-context-menu-item.styles.js';\n\nexport interface VscClickEventDetail {\n label: string;\n keybinding: string;\n value: string;\n separator: boolean;\n tabindex: number;\n}\n\n/**\n * @tag vscode-context-menu-item\n *\n * Child component of [ContextMenu](/components/context-menu/).\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-menu-background=#1f1f1f]\n * @cssprop [--vscode-menu-selectionBorder=transparent]\n * @cssprop [--vscode-menu-foreground=#cccccc]\n * @cssprop [--vscode-menu-selectionBackground=#0078d4]\n * @cssprop [--vscode-menu-selectionForeground=#ffffff]\n * @cssprop [--vscode-menu-separatorBackground=#454545]\n */\n@customElement('vscode-context-menu-item')\nexport class VscodeContextMenuItem extends VscElement {\n static override styles = styles;\n\n @property({type: String})\n label = '';\n\n @property({type: String})\n keybinding = '';\n\n @property({type: String})\n value = '';\n\n @property({type: Boolean, reflect: true})\n separator = false;\n\n @property({type: Number})\n tabindex = 0;\n\n private onItemClick() {\n /** @internal */\n this.dispatchEvent(\n new CustomEvent<VscClickEventDetail>('vsc-click', {\n detail: {\n label: this.label,\n keybinding: this.keybinding,\n value: this.value || this.label,\n separator: this.separator,\n tabindex: this.tabindex,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n override render(): TemplateResult {\n return html`\n ${this.separator\n ? html`\n <div class=\"context-menu-item separator\">\n <span class=\"ruler\"></span>\n </div>\n `\n : html`\n <div class=\"context-menu-item\">\n <a @click=${this.onItemClick}>\n ${this.label\n ? html`<span class=\"label\">${this.label}</span>`\n : nothing}\n ${this.keybinding\n ? html`<span class=\"keybinding\">${this.keybinding}</span>`\n : nothing}\n </a>\n </div>\n `}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-context-menu-item': VscodeContextMenuItem;\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-context-menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA2Eb,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"vscode-context-menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -5,24 +5,24 @@ const styles = [
5
5
  css `
6
6
  :host {
7
7
  display: block;
8
- font-family: var(--vscode-font-family);
9
- font-size: var(--vscode-font-size);
10
- font-weight: var(--vscode-font-weight);
8
+ font-family: var(--vscode-font-family, sans-serif);
9
+ font-size: var(--vscode-font-size, 13px);
10
+ font-weight: var(--vscode-font-weight, normal);
11
11
  line-height: 1.4em;
12
12
  outline: none;
13
13
  position: relative;
14
14
  }
15
15
 
16
16
  .context-menu-item {
17
- background-color: var(--vscode-menu-background);
18
- color: var(--vscode-menu-foreground);
17
+ background-color: var(--vscode-menu-background, #1f1f1f);
18
+ color: var(--vscode-menu-foreground, #cccccc);
19
19
  display: flex;
20
20
  user-select: none;
21
21
  white-space: nowrap;
22
22
  }
23
23
 
24
24
  .ruler {
25
- border-bottom: 1px solid var(--vscode-menu-separatorBackground);
25
+ border-bottom: 1px solid var(--vscode-menu-separatorBackground, #454545);
26
26
  display: block;
27
27
  margin: 0 0 4px;
28
28
  padding-top: 4px;
@@ -36,7 +36,7 @@ const styles = [
36
36
  border-style: solid;
37
37
  border-width: 1px;
38
38
  box-sizing: border-box;
39
- color: var(--vscode-menu-foreground);
39
+ color: var(--vscode-menu-foreground, #cccccc);
40
40
  cursor: pointer;
41
41
  display: flex;
42
42
  flex: 1 1 auto;
@@ -49,12 +49,9 @@ const styles = [
49
49
  }
50
50
 
51
51
  :host([selected]) .context-menu-item a {
52
- background-color: var(--vscode-menu-selectionBackground);
53
- border-color: var(
54
- --vscode-menu-selectionBorder,
55
- var(--vscode-menu-selectionBackground)
56
- );
57
- color: var(--vscode-menu-selectionForeground);
52
+ background-color: var(--vscode-menu-selectionBackground, #0078d4);
53
+ border-color: var(--vscode-menu-selectionBorder, transparent);
54
+ color: var(--vscode-menu-selectionForeground, #ffffff);
58
55
  }
59
56
 
60
57
  .label {
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-context-menu-item.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n display: block;\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n line-height: 1.4em;\n outline: none;\n position: relative;\n }\n\n .context-menu-item {\n background-color: var(--vscode-menu-background);\n color: var(--vscode-menu-foreground);\n display: flex;\n user-select: none;\n white-space: nowrap;\n }\n\n .ruler {\n border-bottom: 1px solid var(--vscode-menu-separatorBackground);\n display: block;\n margin: 0 0 4px;\n padding-top: 4px;\n width: 100%;\n }\n\n .context-menu-item a {\n align-items: center;\n border-color: transparent;\n border-radius: 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-menu-foreground);\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n height: 2em;\n margin-left: 4px;\n margin-right: 4px;\n outline: none;\n position: relative;\n text-decoration: inherit;\n }\n\n :host([selected]) .context-menu-item a {\n background-color: var(--vscode-menu-selectionBackground);\n border-color: var(\n --vscode-menu-selectionBorder,\n var(--vscode-menu-selectionBackground)\n );\n color: var(--vscode-menu-selectionForeground);\n }\n\n .label {\n background: none;\n display: flex;\n flex: 1 1 auto;\n font-size: 12px;\n line-height: 1;\n padding: 0 22px;\n text-decoration: none;\n }\n\n .keybinding {\n display: block;\n flex: 2 1 auto;\n line-height: 1;\n padding: 0 22px;\n text-align: right;\n }\n `,\n];\n\nexport default styles;\n"]}
1
+ {"version":3,"file":"vscode-context-menu-item.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.4em;\n outline: none;\n position: relative;\n }\n\n .context-menu-item {\n background-color: var(--vscode-menu-background, #1f1f1f);\n color: var(--vscode-menu-foreground, #cccccc);\n display: flex;\n user-select: none;\n white-space: nowrap;\n }\n\n .ruler {\n border-bottom: 1px solid var(--vscode-menu-separatorBackground, #454545);\n display: block;\n margin: 0 0 4px;\n padding-top: 4px;\n width: 100%;\n }\n\n .context-menu-item a {\n align-items: center;\n border-color: transparent;\n border-radius: 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-menu-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n height: 2em;\n margin-left: 4px;\n margin-right: 4px;\n outline: none;\n position: relative;\n text-decoration: inherit;\n }\n\n :host([selected]) .context-menu-item a {\n background-color: var(--vscode-menu-selectionBackground, #0078d4);\n border-color: var(--vscode-menu-selectionBorder, transparent);\n color: var(--vscode-menu-selectionForeground, #ffffff);\n }\n\n .label {\n background: none;\n display: flex;\n flex: 1 1 auto;\n font-size: 12px;\n line-height: 1;\n padding: 0 22px;\n text-decoration: none;\n }\n\n .keybinding {\n display: block;\n flex: 2 1 auto;\n line-height: 1;\n padding: 0 22px;\n text-align: right;\n }\n `,\n];\n\nexport default styles;\n"]}