@vscode-elements/elements 2.3.0 → 2.3.1-pre.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.
- package/custom-elements.json +179 -192
- package/dist/bundled.js +6 -6
- package/dist/includes/VscElement.js +1 -1
- package/dist/includes/VscElement.js.map +1 -1
- package/dist/vscode-radio/vscode-radio.d.ts +9 -12
- package/dist/vscode-radio/vscode-radio.d.ts.map +1 -1
- package/dist/vscode-radio/vscode-radio.js +44 -42
- package/dist/vscode-radio/vscode-radio.js.map +1 -1
- package/dist/vscode-radio-group/vscode-radio-group.d.ts +4 -6
- package/dist/vscode-radio-group/vscode-radio-group.d.ts.map +1 -1
- package/dist/vscode-radio-group/vscode-radio-group.js +37 -27
- package/dist/vscode-radio-group/vscode-radio-group.js.map +1 -1
- package/package.json +1 -1
- package/vscode.css-custom-data.json +5 -5
- package/vscode.html-custom-data.json +17 -17
|
@@ -14,24 +14,36 @@ import styles from './vscode-radio-group.styles.js';
|
|
|
14
14
|
* @fires {Event} change - Dispatched when a child radio button is changed.
|
|
15
15
|
*/
|
|
16
16
|
let VscodeRadioGroup = class VscodeRadioGroup extends VscElement {
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region lifecycle methods
|
|
17
19
|
constructor() {
|
|
18
|
-
super(
|
|
20
|
+
super();
|
|
21
|
+
//#region properties
|
|
19
22
|
this.variant = 'horizontal';
|
|
20
23
|
/** @internal */
|
|
21
24
|
this.role = 'radiogroup';
|
|
22
25
|
this._focusedRadio = -1;
|
|
23
26
|
this._checkedRadio = -1;
|
|
24
27
|
this._firstContentLoaded = false;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region event handlers
|
|
30
|
+
this._handleKeyDown = (ev) => {
|
|
31
|
+
const { key } = ev;
|
|
32
|
+
const listenedKeys = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];
|
|
33
|
+
if (listenedKeys.includes(key)) {
|
|
34
|
+
ev.preventDefault();
|
|
35
|
+
}
|
|
36
|
+
if (key === 'ArrowRight' || key === 'ArrowDown') {
|
|
37
|
+
this._checkNext();
|
|
38
|
+
}
|
|
39
|
+
if (key === 'ArrowLeft' || key === 'ArrowUp') {
|
|
40
|
+
this._checkPrev();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
this.addEventListener('keydown', this._handleKeyDown);
|
|
34
44
|
}
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region private methods
|
|
35
47
|
_uncheckPreviousChecked(prevChecked, prevFocused) {
|
|
36
48
|
if (prevChecked !== -1) {
|
|
37
49
|
this._radios[prevChecked].checked = false;
|
|
@@ -78,20 +90,7 @@ let VscodeRadioGroup = class VscodeRadioGroup extends VscElement {
|
|
|
78
90
|
}
|
|
79
91
|
this._afterCheck();
|
|
80
92
|
}
|
|
81
|
-
|
|
82
|
-
const { key } = ev;
|
|
83
|
-
const listenedKeys = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];
|
|
84
|
-
if (listenedKeys.includes(key)) {
|
|
85
|
-
ev.preventDefault();
|
|
86
|
-
}
|
|
87
|
-
if (key === 'ArrowRight' || key === 'ArrowDown') {
|
|
88
|
-
this._checkNext();
|
|
89
|
-
}
|
|
90
|
-
if (key === 'ArrowLeft' || key === 'ArrowUp') {
|
|
91
|
-
this._checkPrev();
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
_onChange(ev) {
|
|
93
|
+
_handleChange(ev) {
|
|
95
94
|
const clickedIndex = this._radios.findIndex((r) => r === ev.target);
|
|
96
95
|
if (clickedIndex !== -1) {
|
|
97
96
|
if (this._focusedRadio !== -1) {
|
|
@@ -105,7 +104,7 @@ let VscodeRadioGroup = class VscodeRadioGroup extends VscElement {
|
|
|
105
104
|
this._radios[clickedIndex].tabIndex = 0;
|
|
106
105
|
}
|
|
107
106
|
}
|
|
108
|
-
|
|
107
|
+
_handleSlotChange() {
|
|
109
108
|
if (!this._firstContentLoaded) {
|
|
110
109
|
const autoFocusedRadio = this._radios.findIndex((r) => r.autofocus);
|
|
111
110
|
if (autoFocusedRadio > -1) {
|
|
@@ -113,6 +112,7 @@ let VscodeRadioGroup = class VscodeRadioGroup extends VscElement {
|
|
|
113
112
|
}
|
|
114
113
|
this._firstContentLoaded = true;
|
|
115
114
|
}
|
|
115
|
+
let indexOfDefaultCheckedRadio = -1;
|
|
116
116
|
this._radios.forEach((r, i) => {
|
|
117
117
|
// if _focusedRadio is not set, the first radio should be focusable
|
|
118
118
|
if (this._focusedRadio > -1) {
|
|
@@ -121,14 +121,24 @@ let VscodeRadioGroup = class VscodeRadioGroup extends VscElement {
|
|
|
121
121
|
else {
|
|
122
122
|
r.tabIndex = i === 0 ? 0 : -1;
|
|
123
123
|
}
|
|
124
|
+
if (r.defaultChecked) {
|
|
125
|
+
if (indexOfDefaultCheckedRadio > -1) {
|
|
126
|
+
this._radios[indexOfDefaultCheckedRadio].defaultChecked = false;
|
|
127
|
+
}
|
|
128
|
+
indexOfDefaultCheckedRadio = i;
|
|
129
|
+
}
|
|
124
130
|
});
|
|
131
|
+
if (indexOfDefaultCheckedRadio > -1) {
|
|
132
|
+
this._radios[indexOfDefaultCheckedRadio].checked = true;
|
|
133
|
+
}
|
|
125
134
|
}
|
|
135
|
+
//#endregion
|
|
126
136
|
render() {
|
|
127
137
|
return html `
|
|
128
138
|
<div class="wrapper">
|
|
129
139
|
<slot
|
|
130
|
-
@slotchange=${this.
|
|
131
|
-
@
|
|
140
|
+
@slotchange=${this._handleSlotChange}
|
|
141
|
+
@change=${this._handleChange}
|
|
132
142
|
></slot>
|
|
133
143
|
</div>
|
|
134
144
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-radio-group.js","sourceRoot":"","sources":["../../src/vscode-radio-group/vscode-radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property, queryAssignedElements, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {VscodeRadio} from '../vscode-radio/index.js';\nimport styles from './vscode-radio-group.styles.js';\n\n/**\n * @tag vscode-radio-group\n *\n * @fires {Event} change - Dispatched when a child radio button is changed.\n */\n@customElement('vscode-radio-group')\nexport class VscodeRadioGroup extends VscElement {\n static override styles = styles;\n\n @property({reflect: true})\n variant: 'horizontal' | 'vertical' = 'horizontal';\n\n /** @internal */\n @property({reflect: true})\n override role = 'radiogroup';\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('keydown', this._onKeyDownBound);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.removeEventListener('keydown', this._onKeyDownBound);\n }\n\n @queryAssignedElements({selector: 'vscode-radio'})\n private _radios!: VscodeRadio[];\n\n @state()\n private _focusedRadio = -1;\n\n @state()\n private _checkedRadio = -1;\n\n private _firstContentLoaded = false;\n\n private _uncheckPreviousChecked(prevChecked: number, prevFocused: number) {\n if (prevChecked !== -1) {\n this._radios[prevChecked].checked = false;\n }\n\n if (prevFocused !== -1) {\n this._radios[prevFocused].tabIndex = -1;\n }\n }\n\n private _afterCheck() {\n this._focusedRadio = this._checkedRadio;\n this._radios[this._checkedRadio].checked = true;\n this._radios[this._checkedRadio].tabIndex = 0;\n this._radios[this._checkedRadio].focus();\n }\n\n private _checkPrev() {\n const prevChecked = this._radios.findIndex((r) => r.checked);\n const prevFocused = this._radios.findIndex((r) => r.focused);\n const startPos = prevFocused !== -1 ? prevFocused : prevChecked;\n\n this._uncheckPreviousChecked(prevChecked, prevFocused);\n\n if (startPos === -1) {\n this._checkedRadio = this._radios.length - 1;\n } else if (startPos - 1 >= 0) {\n this._checkedRadio = startPos - 1;\n } else {\n this._checkedRadio = this._radios.length - 1;\n }\n\n this._afterCheck();\n }\n\n private _checkNext() {\n const prevChecked = this._radios.findIndex((r) => r.checked);\n const prevFocused = this._radios.findIndex((r) => r.focused);\n const startPos = prevFocused !== -1 ? prevFocused : prevChecked;\n\n this._uncheckPreviousChecked(prevChecked, prevFocused);\n\n if (startPos === -1) {\n this._checkedRadio = 0;\n } else if (startPos + 1 < this._radios.length) {\n this._checkedRadio = startPos + 1;\n } else {\n this._checkedRadio = 0;\n }\n\n this._afterCheck();\n }\n\n private _onKeyDown(ev: KeyboardEvent) {\n const {key} = ev;\n const listenedKeys = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];\n\n if (listenedKeys.includes(key)) {\n ev.preventDefault();\n }\n\n if (key === 'ArrowRight' || key === 'ArrowDown') {\n this._checkNext();\n }\n\n if (key === 'ArrowLeft' || key === 'ArrowUp') {\n this._checkPrev();\n }\n }\n\n private _onKeyDownBound = this._onKeyDown.bind(this);\n\n private _onChange(ev: CustomEvent) {\n const clickedIndex = this._radios.findIndex((r) => r === ev.target);\n\n if (clickedIndex !== -1) {\n if (this._focusedRadio !== -1) {\n this._radios[this._focusedRadio].tabIndex = -1;\n }\n\n if (this._checkedRadio !== -1 && this._checkedRadio !== clickedIndex) {\n this._radios[this._checkedRadio].checked = false;\n }\n\n this._focusedRadio = clickedIndex;\n this._checkedRadio = clickedIndex;\n this._radios[clickedIndex].tabIndex = 0;\n }\n }\n\n private _onSlotChange() {\n if (!this._firstContentLoaded) {\n const autoFocusedRadio = this._radios.findIndex((r) => r.autofocus);\n\n if (autoFocusedRadio > -1) {\n this._focusedRadio = autoFocusedRadio;\n }\n\n this._firstContentLoaded = true;\n }\n\n this._radios.forEach((r, i) => {\n // if _focusedRadio is not set, the first radio should be focusable\n if (this._focusedRadio > -1) {\n r.tabIndex = i === this._focusedRadio ? 0 : -1;\n } else {\n r.tabIndex = i === 0 ? 0 : -1;\n }\n });\n }\n\n override render(): TemplateResult {\n return html`\n <div class=\"wrapper\">\n <slot\n @slotchange=${this._onSlotChange}\n @vsc-change=${this._onChange}\n ></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-radio-group': VscodeRadioGroup;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"vscode-radio-group.js","sourceRoot":"","sources":["../../src/vscode-radio-group/vscode-radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property, queryAssignedElements, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {VscodeRadio} from '../vscode-radio/index.js';\nimport styles from './vscode-radio-group.styles.js';\n\n/**\n * @tag vscode-radio-group\n *\n * @fires {Event} change - Dispatched when a child radio button is changed.\n */\n@customElement('vscode-radio-group')\nexport class VscodeRadioGroup extends VscElement {\n static override styles = styles;\n\n //#region properties\n\n @property({reflect: true})\n variant: 'horizontal' | 'vertical' = 'horizontal';\n\n /** @internal */\n @property({reflect: true})\n override role = 'radiogroup';\n\n //#endregion\n\n //#region private variables\n\n @queryAssignedElements({selector: 'vscode-radio'})\n private _radios!: VscodeRadio[];\n\n @state()\n private _focusedRadio = -1;\n\n @state()\n private _checkedRadio = -1;\n\n private _firstContentLoaded = false;\n\n //#endregion\n\n //#region lifecycle methods\n\n constructor() {\n super();\n\n this.addEventListener('keydown', this._handleKeyDown);\n }\n\n //#endregion\n\n //#region private methods\n\n private _uncheckPreviousChecked(prevChecked: number, prevFocused: number) {\n if (prevChecked !== -1) {\n this._radios[prevChecked].checked = false;\n }\n\n if (prevFocused !== -1) {\n this._radios[prevFocused].tabIndex = -1;\n }\n }\n\n private _afterCheck() {\n this._focusedRadio = this._checkedRadio;\n this._radios[this._checkedRadio].checked = true;\n this._radios[this._checkedRadio].tabIndex = 0;\n this._radios[this._checkedRadio].focus();\n }\n\n private _checkPrev() {\n const prevChecked = this._radios.findIndex((r) => r.checked);\n const prevFocused = this._radios.findIndex((r) => r.focused);\n const startPos = prevFocused !== -1 ? prevFocused : prevChecked;\n\n this._uncheckPreviousChecked(prevChecked, prevFocused);\n\n if (startPos === -1) {\n this._checkedRadio = this._radios.length - 1;\n } else if (startPos - 1 >= 0) {\n this._checkedRadio = startPos - 1;\n } else {\n this._checkedRadio = this._radios.length - 1;\n }\n\n this._afterCheck();\n }\n\n private _checkNext() {\n const prevChecked = this._radios.findIndex((r) => r.checked);\n const prevFocused = this._radios.findIndex((r) => r.focused);\n const startPos = prevFocused !== -1 ? prevFocused : prevChecked;\n\n this._uncheckPreviousChecked(prevChecked, prevFocused);\n\n if (startPos === -1) {\n this._checkedRadio = 0;\n } else if (startPos + 1 < this._radios.length) {\n this._checkedRadio = startPos + 1;\n } else {\n this._checkedRadio = 0;\n }\n\n this._afterCheck();\n }\n\n //#endregion\n\n //#region event handlers\n\n private _handleKeyDown = (ev: KeyboardEvent) => {\n const {key} = ev;\n const listenedKeys = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];\n\n if (listenedKeys.includes(key)) {\n ev.preventDefault();\n }\n\n if (key === 'ArrowRight' || key === 'ArrowDown') {\n this._checkNext();\n }\n\n if (key === 'ArrowLeft' || key === 'ArrowUp') {\n this._checkPrev();\n }\n };\n\n private _handleChange(ev: CustomEvent) {\n const clickedIndex = this._radios.findIndex((r) => r === ev.target);\n\n if (clickedIndex !== -1) {\n if (this._focusedRadio !== -1) {\n this._radios[this._focusedRadio].tabIndex = -1;\n }\n\n if (this._checkedRadio !== -1 && this._checkedRadio !== clickedIndex) {\n this._radios[this._checkedRadio].checked = false;\n }\n\n this._focusedRadio = clickedIndex;\n this._checkedRadio = clickedIndex;\n this._radios[clickedIndex].tabIndex = 0;\n }\n }\n\n private _handleSlotChange() {\n if (!this._firstContentLoaded) {\n const autoFocusedRadio = this._radios.findIndex((r) => r.autofocus);\n\n if (autoFocusedRadio > -1) {\n this._focusedRadio = autoFocusedRadio;\n }\n\n this._firstContentLoaded = true;\n }\n\n let indexOfDefaultCheckedRadio = -1;\n\n this._radios.forEach((r, i) => {\n // if _focusedRadio is not set, the first radio should be focusable\n if (this._focusedRadio > -1) {\n r.tabIndex = i === this._focusedRadio ? 0 : -1;\n } else {\n r.tabIndex = i === 0 ? 0 : -1;\n }\n\n if (r.defaultChecked) {\n if (indexOfDefaultCheckedRadio > -1) {\n this._radios[indexOfDefaultCheckedRadio].defaultChecked = false;\n }\n\n indexOfDefaultCheckedRadio = i;\n }\n });\n\n if (indexOfDefaultCheckedRadio > -1) {\n this._radios[indexOfDefaultCheckedRadio].checked = true;\n }\n }\n\n //#endregion\n\n override render(): TemplateResult {\n return html`\n <div class=\"wrapper\">\n <slot\n @slotchange=${this._handleSlotChange}\n @change=${this._handleChange}\n ></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-radio-group': VscodeRadioGroup;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -115,6 +115,11 @@
|
|
|
115
115
|
{ "name": "--vscode-menu-selectionForeground", "values": [] },
|
|
116
116
|
{ "name": "--vscode-menu-separatorBackground", "values": [] },
|
|
117
117
|
{ "name": "--vscode-foreground", "values": [] },
|
|
118
|
+
{
|
|
119
|
+
"name": "--vsc-foreground-translucent",
|
|
120
|
+
"description": "Default text color. 90% transparency version of `--vscode-foreground` by default.",
|
|
121
|
+
"values": []
|
|
122
|
+
},
|
|
118
123
|
{
|
|
119
124
|
"name": "--label-width",
|
|
120
125
|
"description": "The width of the label in horizontal mode",
|
|
@@ -125,11 +130,6 @@
|
|
|
125
130
|
"description": "The right margin of the label in horizontal mode",
|
|
126
131
|
"values": []
|
|
127
132
|
},
|
|
128
|
-
{
|
|
129
|
-
"name": "--vsc-foreground-translucent",
|
|
130
|
-
"description": "Default text color. 90% transparency version of `--vscode-foreground` by default.",
|
|
131
|
-
"values": []
|
|
132
|
-
},
|
|
133
133
|
{ "name": "--vscode-icon-foreground", "values": [] },
|
|
134
134
|
{
|
|
135
135
|
"name": "--vscode-toolbar-hoverBackground",
|
|
@@ -81,6 +81,17 @@
|
|
|
81
81
|
"attributes": [],
|
|
82
82
|
"references": []
|
|
83
83
|
},
|
|
84
|
+
{
|
|
85
|
+
"name": "vscode-checkbox-group",
|
|
86
|
+
"description": "Arranges a group of checkboxes horizontally or vertically.\n---\n",
|
|
87
|
+
"attributes": [
|
|
88
|
+
{
|
|
89
|
+
"name": "variant",
|
|
90
|
+
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
91
|
+
}
|
|
92
|
+
],
|
|
93
|
+
"references": []
|
|
94
|
+
},
|
|
84
95
|
{
|
|
85
96
|
"name": "vscode-checkbox",
|
|
86
97
|
"description": "Allows users to select one or more options from a set. When participating in a form, it supports\nthe `:invalid` pseudo class. Otherwise the error styles can be applied through the `invalid`\nproperty.\n---\n\n\n### **Events:**\n - **change** - Dispatched when checked state is changed. The event is bubbled, so it can be listened on a parent element like the `CheckboxGroup`.\n- **invalid** - Dispatched when the element is invalid and `checkValidity()` has been called or the form containing this element is submitted. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Returns `true` if the element's value is valid; otherwise, it returns `false`.\nIf the element's value is invalid, an invalid event is triggered on the element.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)\n- **reportValidity(): _boolean_** - Returns `true` if the element's value is valid; otherwise, it returns `false`.\nIf the element's value is invalid, an invalid event is triggered on the element, and the\nbrowser displays an error message to the user.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)\n\n### **CSS Properties:**\n - **--vscode-font-family** - undefined _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-foreground** - undefined _(default: #cccccc)_\n- **--vscode-settings-checkboxBackground** - undefined _(default: #313131)_\n- **--vscode-settings-checkboxBorder** - undefined _(default: #3c3c3c)_\n- **--vscode-settings-checkboxForeground** - undefined _(default: #cccccc)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_\n- **--vscode-inputValidation-errorBackground** - undefined _(default: #5a1d1d)_\n- **--vscode-inputValidation-errorBorder** - undefined _(default: #be1100)_",
|
|
@@ -124,17 +135,6 @@
|
|
|
124
135
|
],
|
|
125
136
|
"references": []
|
|
126
137
|
},
|
|
127
|
-
{
|
|
128
|
-
"name": "vscode-checkbox-group",
|
|
129
|
-
"description": "Arranges a group of checkboxes horizontally or vertically.\n---\n",
|
|
130
|
-
"attributes": [
|
|
131
|
-
{
|
|
132
|
-
"name": "variant",
|
|
133
|
-
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
134
|
-
}
|
|
135
|
-
],
|
|
136
|
-
"references": []
|
|
137
|
-
},
|
|
138
138
|
{
|
|
139
139
|
"name": "vscode-collapsible",
|
|
140
140
|
"description": "Allows users to reveal or hide related content on a page.\n---\n\n\n### **Events:**\n - **vsc-collapsible-toggle** - Dispatched when the content visibility is changed.\n\n### **Slots:**\n - _default_ - Main content.\n- **actions** - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n- **decorations** - The elements placed in the decorations slot are always visible.\n\n### **CSS Properties:**\n - **--vscode-sideBar-background** - Background color _(default: #181818)_\n- **--vscode-focusBorder** - Focus border color _(default: #0078d4)_\n- **--vscode-font-family** - Header font family _(default: sans-serif)_\n- **--vscode-sideBarSectionHeader-background** - Header background _(default: #181818)_\n- **--vscode-icon-foreground** - Arrow icon color _(default: #cccccc)_\n- **--vscode-sideBarTitle-foreground** - Header font color _(default: #cccccc)_\n\n### **CSS Parts:**\n - **body** - Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.",
|
|
@@ -204,6 +204,12 @@
|
|
|
204
204
|
],
|
|
205
205
|
"references": []
|
|
206
206
|
},
|
|
207
|
+
{
|
|
208
|
+
"name": "vscode-form-helper",
|
|
209
|
+
"description": "Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)\n---\n\n\n### **CSS Properties:**\n - **--vsc-foreground-translucent** - Default text color. 90% transparency version of `--vscode-foreground` by default. _(default: undefined)_",
|
|
210
|
+
"attributes": [],
|
|
211
|
+
"references": []
|
|
212
|
+
},
|
|
207
213
|
{
|
|
208
214
|
"name": "vscode-form-group",
|
|
209
215
|
"description": "\n---\n\n\n### **CSS Properties:**\n - **--label-width** - The width of the label in horizontal mode _(default: 150px)_\n- **--label-right-margin** - The right margin of the label in horizontal mode _(default: 14px)_",
|
|
@@ -212,12 +218,6 @@
|
|
|
212
218
|
],
|
|
213
219
|
"references": []
|
|
214
220
|
},
|
|
215
|
-
{
|
|
216
|
-
"name": "vscode-form-helper",
|
|
217
|
-
"description": "Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)\n---\n\n\n### **CSS Properties:**\n - **--vsc-foreground-translucent** - Default text color. 90% transparency version of `--vscode-foreground` by default. _(default: undefined)_",
|
|
218
|
-
"attributes": [],
|
|
219
|
-
"references": []
|
|
220
|
-
},
|
|
221
221
|
{
|
|
222
222
|
"name": "vscode-icon",
|
|
223
223
|
"description": "Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).\nIn \"action-icon\" mode it behaves like a button. In this case, it is\nrecommended that a meaningful label is specified with the `label` property.\n---\n\n\n### **CSS Properties:**\n - **--vscode-icon-foreground** - undefined _(default: #cccccc)_\n- **--vscode-toolbar-hoverBackground** - Hover state background color in `active-icon` mode _(default: rgba(90, 93, 94, 0.31))_\n- **--vscode-toolbar-activeBackground** - Active state background color in `active-icon` mode _(default: rgba(99, 102, 103, 0.31))_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_",
|