@vscode-elements/elements 2.1.0 → 2.2.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 +198 -131
- package/dist/bundled.js +147 -76
- package/dist/includes/VscElement.js +1 -1
- package/dist/includes/VscElement.js.map +1 -1
- package/dist/includes/test-helpers.d.ts +2 -2
- package/dist/includes/test-helpers.d.ts.map +1 -1
- package/dist/includes/test-helpers.js +2 -1
- package/dist/includes/test-helpers.js.map +1 -1
- package/dist/vscode-button/vscode-button.d.ts +8 -0
- package/dist/vscode-button/vscode-button.d.ts.map +1 -1
- package/dist/vscode-button/vscode-button.js +37 -12
- package/dist/vscode-button/vscode-button.js.map +1 -1
- package/dist/vscode-button/vscode-button.styles.d.ts.map +1 -1
- package/dist/vscode-button/vscode-button.styles.js +47 -54
- package/dist/vscode-button/vscode-button.styles.js.map +1 -1
- package/dist/vscode-button-group/vscode-button-group.styles.d.ts.map +1 -1
- package/dist/vscode-button-group/vscode-button-group.styles.js +2 -0
- package/dist/vscode-button-group/vscode-button-group.styles.js.map +1 -1
- package/dist/vscode-checkbox/vscode-checkbox.d.ts +5 -2
- package/dist/vscode-checkbox/vscode-checkbox.d.ts.map +1 -1
- package/dist/vscode-checkbox/vscode-checkbox.js +14 -9
- package/dist/vscode-checkbox/vscode-checkbox.js.map +1 -1
- package/dist/vscode-checkbox/vscode-checkbox.styles.d.ts.map +1 -1
- package/dist/vscode-checkbox/vscode-checkbox.styles.js +71 -0
- package/dist/vscode-checkbox/vscode-checkbox.styles.js.map +1 -1
- package/package.json +1 -1
- package/vscode.css-custom-data.json +19 -15
- package/vscode.html-custom-data.json +23 -18
package/custom-elements.json
CHANGED
|
@@ -291,7 +291,7 @@
|
|
|
291
291
|
{
|
|
292
292
|
"name": "root",
|
|
293
293
|
"type": {
|
|
294
|
-
"text": "Element"
|
|
294
|
+
"text": "Element | ShadowRoot"
|
|
295
295
|
}
|
|
296
296
|
},
|
|
297
297
|
{
|
|
@@ -331,7 +331,7 @@
|
|
|
331
331
|
{
|
|
332
332
|
"name": "root",
|
|
333
333
|
"type": {
|
|
334
|
-
"text": "Element"
|
|
334
|
+
"text": "Element | ShadowRoot"
|
|
335
335
|
}
|
|
336
336
|
},
|
|
337
337
|
{
|
|
@@ -354,7 +354,7 @@
|
|
|
354
354
|
{
|
|
355
355
|
"name": "arg1",
|
|
356
356
|
"type": {
|
|
357
|
-
"text": "string | Element"
|
|
357
|
+
"text": "string | Element | ShadowRoot"
|
|
358
358
|
}
|
|
359
359
|
},
|
|
360
360
|
{
|
|
@@ -604,131 +604,6 @@
|
|
|
604
604
|
}
|
|
605
605
|
]
|
|
606
606
|
},
|
|
607
|
-
{
|
|
608
|
-
"kind": "javascript-module",
|
|
609
|
-
"path": "src/vscode-badge/vscode-badge.styles.ts",
|
|
610
|
-
"declarations": [
|
|
611
|
-
{
|
|
612
|
-
"kind": "variable",
|
|
613
|
-
"name": "styles",
|
|
614
|
-
"type": {
|
|
615
|
-
"text": "CSSResultGroup"
|
|
616
|
-
},
|
|
617
|
-
"default": "[ defaultStyles, css` :host { display: inline-block; } .root { background-color: var(--vscode-badge-background, #616161); border: 1px solid var(--vscode-contrastBorder, transparent); border-radius: 2px; box-sizing: border-box; color: var(--vscode-badge-foreground, #f8f8f8); display: block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: 11px; font-weight: 400; line-height: 14px; min-width: 18px; padding: 2px 3px; text-align: center; white-space: nowrap; } :host([variant='counter']) .root { border-radius: 11px; line-height: 11px; min-height: 18px; min-width: 18px; padding: 3px 6px; } :host([variant='activity-bar-counter']) .root { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 20px; color: var(--vscode-activityBarBadge-foreground, #ffffff); font-size: 9px; font-weight: 600; line-height: 16px; padding: 0 4px; } :host([variant='tab-header-counter']) .root { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 10px; color: var(--vscode-activityBarBadge-foreground, #ffffff); line-height: 10px; min-height: 16px; min-width: 16px; padding: 3px 5px; } `, ]"
|
|
618
|
-
}
|
|
619
|
-
],
|
|
620
|
-
"exports": [
|
|
621
|
-
{
|
|
622
|
-
"kind": "js",
|
|
623
|
-
"name": "default",
|
|
624
|
-
"declaration": {
|
|
625
|
-
"name": "styles",
|
|
626
|
-
"module": "src/vscode-badge/vscode-badge.styles.ts"
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
]
|
|
630
|
-
},
|
|
631
|
-
{
|
|
632
|
-
"kind": "javascript-module",
|
|
633
|
-
"path": "src/vscode-badge/vscode-badge.ts",
|
|
634
|
-
"declarations": [
|
|
635
|
-
{
|
|
636
|
-
"kind": "class",
|
|
637
|
-
"description": "Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.",
|
|
638
|
-
"name": "VscodeBadge",
|
|
639
|
-
"cssProperties": [
|
|
640
|
-
{
|
|
641
|
-
"description": "A sans-serif font type depends on the host OS.",
|
|
642
|
-
"name": "--vscode-font-family",
|
|
643
|
-
"default": "sans-serif"
|
|
644
|
-
},
|
|
645
|
-
{
|
|
646
|
-
"name": "--vscode-contrastBorder",
|
|
647
|
-
"default": "transparent"
|
|
648
|
-
},
|
|
649
|
-
{
|
|
650
|
-
"description": "default and counter variant background color",
|
|
651
|
-
"name": "--vscode-badge-background",
|
|
652
|
-
"default": "#616161"
|
|
653
|
-
},
|
|
654
|
-
{
|
|
655
|
-
"description": "default and counter variant foreground color",
|
|
656
|
-
"name": "--vscode-badge-foreground",
|
|
657
|
-
"default": "#f8f8f8"
|
|
658
|
-
},
|
|
659
|
-
{
|
|
660
|
-
"description": "activity bar variant background color",
|
|
661
|
-
"name": "--vscode-activityBarBadge-background",
|
|
662
|
-
"default": "#0078d4"
|
|
663
|
-
},
|
|
664
|
-
{
|
|
665
|
-
"description": "activity bar variant foreground color",
|
|
666
|
-
"name": "--vscode-activityBarBadge-foreground",
|
|
667
|
-
"default": "#ffffff"
|
|
668
|
-
}
|
|
669
|
-
],
|
|
670
|
-
"members": [
|
|
671
|
-
{
|
|
672
|
-
"kind": "field",
|
|
673
|
-
"name": "variant",
|
|
674
|
-
"type": {
|
|
675
|
-
"text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
|
|
676
|
-
},
|
|
677
|
-
"default": "'default'",
|
|
678
|
-
"attribute": "variant",
|
|
679
|
-
"reflects": true
|
|
680
|
-
},
|
|
681
|
-
{
|
|
682
|
-
"kind": "field",
|
|
683
|
-
"name": "version",
|
|
684
|
-
"type": {
|
|
685
|
-
"text": "string"
|
|
686
|
-
},
|
|
687
|
-
"description": "VSCode Elements version",
|
|
688
|
-
"readonly": true,
|
|
689
|
-
"inheritedFrom": {
|
|
690
|
-
"name": "VscElement",
|
|
691
|
-
"module": "src/includes/VscElement.ts"
|
|
692
|
-
}
|
|
693
|
-
}
|
|
694
|
-
],
|
|
695
|
-
"attributes": [
|
|
696
|
-
{
|
|
697
|
-
"name": "variant",
|
|
698
|
-
"type": {
|
|
699
|
-
"text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
|
|
700
|
-
},
|
|
701
|
-
"default": "'default'",
|
|
702
|
-
"fieldName": "variant"
|
|
703
|
-
}
|
|
704
|
-
],
|
|
705
|
-
"superclass": {
|
|
706
|
-
"name": "VscElement",
|
|
707
|
-
"module": "/src/includes/VscElement.js"
|
|
708
|
-
},
|
|
709
|
-
"tagName": "vscode-badge",
|
|
710
|
-
"customElement": true
|
|
711
|
-
}
|
|
712
|
-
],
|
|
713
|
-
"exports": [
|
|
714
|
-
{
|
|
715
|
-
"kind": "js",
|
|
716
|
-
"name": "VscodeBadge",
|
|
717
|
-
"declaration": {
|
|
718
|
-
"name": "VscodeBadge",
|
|
719
|
-
"module": "src/vscode-badge/vscode-badge.ts"
|
|
720
|
-
}
|
|
721
|
-
},
|
|
722
|
-
{
|
|
723
|
-
"kind": "custom-element-definition",
|
|
724
|
-
"name": "vscode-badge",
|
|
725
|
-
"declaration": {
|
|
726
|
-
"name": "VscodeBadge",
|
|
727
|
-
"module": "src/vscode-badge/vscode-badge.ts"
|
|
728
|
-
}
|
|
729
|
-
}
|
|
730
|
-
]
|
|
731
|
-
},
|
|
732
607
|
{
|
|
733
608
|
"kind": "javascript-module",
|
|
734
609
|
"path": "src/vscode-button/vscode-button.styles.ts",
|
|
@@ -739,7 +614,7 @@
|
|
|
739
614
|
"type": {
|
|
740
615
|
"text": "CSSResultGroup"
|
|
741
616
|
},
|
|
742
|
-
"default": "[ defaultStyles, css` :host { cursor: pointer; display: inline-block; width: auto; } .
|
|
617
|
+
"default": "[ defaultStyles, css` :host { cursor: pointer; display: inline-block; width: auto; } .base { align-items: center; background-color: var(--vscode-button-background, #0078d4); border-bottom-left-radius: var(--vsc-border-left-radius, 2px); border-bottom-right-radius: var(--vsc-border-right-radius, 2px); border-bottom-width: 1px; border-color: var(--vscode-button-border, transparent); border-left-width: var(--vsc-border-left-width, 1px); border-right-width: var(--vsc-border-right-width, 1px); border-style: solid; border-top-left-radius: var(--vsc-border-left-radius, 2px); border-top-right-radius: var(--vsc-border-right-radius, 2px); border-top-width: 1px; box-sizing: border-box; color: var(--vscode-button-foreground, #ffffff); display: flex; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: var(--vscode-font-size, 13px); font-weight: var(--vscode-font-weight, normal); height: 100%; justify-content: center; line-height: 22px; overflow: hidden; padding: 1px calc(13px + var(--vsc-base-additional-right-padding, 0px)) 1px 13px; position: relative; user-select: none; white-space: nowrap; width: 100%; } .base:after { background-color: var( --vscode-button-separator, rgba(255, 255, 255, 0.4) ); content: var(--vsc-base-after-content); display: var(--vsc-divider-display, none); position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; } :host([secondary]) .base:after { background-color: var(--vscode-button-secondaryForeground, #cccccc); opacity: 0.4; } :host([secondary]) .base { color: var(--vscode-button-secondaryForeground, #cccccc); background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var( --vscode-button-border, var(--vscode-button-secondaryBackground, rgba(255, 255, 255, 0.07)) ); } :host([disabled]) { cursor: default; opacity: 0.4; pointer-events: none; } :host(:hover) .base { background-color: var(--vscode-button-hoverBackground, #026ec1); } :host([disabled]:hover) .base { background-color: var(--vscode-button-background, #0078d4); } :host([secondary]:hover) .base { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:hover) .base { background-color: var(--vscode-button-secondaryBackground, #313131); } :host(:focus), :host(:active) { outline: none; } :host(:focus) .base { background-color: var(--vscode-button-hoverBackground, #026ec1); outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: 2px; } :host([disabled]:focus) .base { background-color: var(--vscode-button-background, #0078d4); outline: 0; } :host([secondary]:focus) .base { background-color: var(--vscode-button-secondaryHoverBackground, #3c3c3c); } :host([secondary][disabled]:focus) .base { background-color: var(--vscode-button-secondaryBackground, #313131); } ::slotted(*) { display: inline-block; margin-left: 4px; margin-right: 4px; } ::slotted(*:first-child) { margin-left: 0; } ::slotted(*:last-child) { margin-right: 0; } ::slotted(vscode-icon) { color: inherit; } .content { display: flex; position: relative; width: 100%; height: 100%; padding: 1px 13px; } :host(:empty) .base, .base.icon-only { min-height: 24px; min-width: 26px; padding: 1px 4px; } slot { align-items: center; display: flex; height: 100%; } .has-content-before slot[name='content-before'] { margin-right: 4px; } .has-content-after slot[name='content-after'] { margin-left: 4px; } .icon, .icon-after { color: inherit; display: block; } :host(:not(:empty)) .icon { margin-right: 3px; } :host(:not(:empty)) .icon-after, :host([icon]) .icon-after { margin-left: 3px; } `, ]"
|
|
743
618
|
}
|
|
744
619
|
],
|
|
745
620
|
"exports": [
|
|
@@ -808,6 +683,22 @@
|
|
|
808
683
|
"default": "#0078d4"
|
|
809
684
|
}
|
|
810
685
|
],
|
|
686
|
+
"cssParts": [
|
|
687
|
+
{
|
|
688
|
+
"description": "The main content area of the component.",
|
|
689
|
+
"name": "base"
|
|
690
|
+
}
|
|
691
|
+
],
|
|
692
|
+
"slots": [
|
|
693
|
+
{
|
|
694
|
+
"description": "Slot before the main content.",
|
|
695
|
+
"name": "content-before"
|
|
696
|
+
},
|
|
697
|
+
{
|
|
698
|
+
"description": "Slot after the main content.",
|
|
699
|
+
"name": "content-after"
|
|
700
|
+
}
|
|
701
|
+
],
|
|
811
702
|
"members": [
|
|
812
703
|
{
|
|
813
704
|
"kind": "field",
|
|
@@ -968,6 +859,24 @@
|
|
|
968
859
|
},
|
|
969
860
|
"privacy": "private"
|
|
970
861
|
},
|
|
862
|
+
{
|
|
863
|
+
"kind": "field",
|
|
864
|
+
"name": "_hasContentBefore",
|
|
865
|
+
"type": {
|
|
866
|
+
"text": "boolean"
|
|
867
|
+
},
|
|
868
|
+
"privacy": "private",
|
|
869
|
+
"default": "false"
|
|
870
|
+
},
|
|
871
|
+
{
|
|
872
|
+
"kind": "field",
|
|
873
|
+
"name": "_hasContentAfter",
|
|
874
|
+
"type": {
|
|
875
|
+
"text": "boolean"
|
|
876
|
+
},
|
|
877
|
+
"privacy": "private",
|
|
878
|
+
"default": "false"
|
|
879
|
+
},
|
|
971
880
|
{
|
|
972
881
|
"kind": "field",
|
|
973
882
|
"name": "form",
|
|
@@ -1017,6 +926,19 @@
|
|
|
1017
926
|
"name": "_handleBlur",
|
|
1018
927
|
"privacy": "private"
|
|
1019
928
|
},
|
|
929
|
+
{
|
|
930
|
+
"kind": "method",
|
|
931
|
+
"name": "_handleSlotChange",
|
|
932
|
+
"privacy": "private",
|
|
933
|
+
"parameters": [
|
|
934
|
+
{
|
|
935
|
+
"name": "ev",
|
|
936
|
+
"type": {
|
|
937
|
+
"text": "Event"
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
]
|
|
941
|
+
},
|
|
1020
942
|
{
|
|
1021
943
|
"kind": "field",
|
|
1022
944
|
"name": "version",
|
|
@@ -1177,6 +1099,131 @@
|
|
|
1177
1099
|
}
|
|
1178
1100
|
]
|
|
1179
1101
|
},
|
|
1102
|
+
{
|
|
1103
|
+
"kind": "javascript-module",
|
|
1104
|
+
"path": "src/vscode-badge/vscode-badge.styles.ts",
|
|
1105
|
+
"declarations": [
|
|
1106
|
+
{
|
|
1107
|
+
"kind": "variable",
|
|
1108
|
+
"name": "styles",
|
|
1109
|
+
"type": {
|
|
1110
|
+
"text": "CSSResultGroup"
|
|
1111
|
+
},
|
|
1112
|
+
"default": "[ defaultStyles, css` :host { display: inline-block; } .root { background-color: var(--vscode-badge-background, #616161); border: 1px solid var(--vscode-contrastBorder, transparent); border-radius: 2px; box-sizing: border-box; color: var(--vscode-badge-foreground, #f8f8f8); display: block; font-family: var(--vscode-font-family, ${defaultFontStack}); font-size: 11px; font-weight: 400; line-height: 14px; min-width: 18px; padding: 2px 3px; text-align: center; white-space: nowrap; } :host([variant='counter']) .root { border-radius: 11px; line-height: 11px; min-height: 18px; min-width: 18px; padding: 3px 6px; } :host([variant='activity-bar-counter']) .root { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 20px; color: var(--vscode-activityBarBadge-foreground, #ffffff); font-size: 9px; font-weight: 600; line-height: 16px; padding: 0 4px; } :host([variant='tab-header-counter']) .root { background-color: var(--vscode-activityBarBadge-background, #0078d4); border-radius: 10px; color: var(--vscode-activityBarBadge-foreground, #ffffff); line-height: 10px; min-height: 16px; min-width: 16px; padding: 3px 5px; } `, ]"
|
|
1113
|
+
}
|
|
1114
|
+
],
|
|
1115
|
+
"exports": [
|
|
1116
|
+
{
|
|
1117
|
+
"kind": "js",
|
|
1118
|
+
"name": "default",
|
|
1119
|
+
"declaration": {
|
|
1120
|
+
"name": "styles",
|
|
1121
|
+
"module": "src/vscode-badge/vscode-badge.styles.ts"
|
|
1122
|
+
}
|
|
1123
|
+
}
|
|
1124
|
+
]
|
|
1125
|
+
},
|
|
1126
|
+
{
|
|
1127
|
+
"kind": "javascript-module",
|
|
1128
|
+
"path": "src/vscode-badge/vscode-badge.ts",
|
|
1129
|
+
"declarations": [
|
|
1130
|
+
{
|
|
1131
|
+
"kind": "class",
|
|
1132
|
+
"description": "Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.",
|
|
1133
|
+
"name": "VscodeBadge",
|
|
1134
|
+
"cssProperties": [
|
|
1135
|
+
{
|
|
1136
|
+
"description": "A sans-serif font type depends on the host OS.",
|
|
1137
|
+
"name": "--vscode-font-family",
|
|
1138
|
+
"default": "sans-serif"
|
|
1139
|
+
},
|
|
1140
|
+
{
|
|
1141
|
+
"name": "--vscode-contrastBorder",
|
|
1142
|
+
"default": "transparent"
|
|
1143
|
+
},
|
|
1144
|
+
{
|
|
1145
|
+
"description": "default and counter variant background color",
|
|
1146
|
+
"name": "--vscode-badge-background",
|
|
1147
|
+
"default": "#616161"
|
|
1148
|
+
},
|
|
1149
|
+
{
|
|
1150
|
+
"description": "default and counter variant foreground color",
|
|
1151
|
+
"name": "--vscode-badge-foreground",
|
|
1152
|
+
"default": "#f8f8f8"
|
|
1153
|
+
},
|
|
1154
|
+
{
|
|
1155
|
+
"description": "activity bar variant background color",
|
|
1156
|
+
"name": "--vscode-activityBarBadge-background",
|
|
1157
|
+
"default": "#0078d4"
|
|
1158
|
+
},
|
|
1159
|
+
{
|
|
1160
|
+
"description": "activity bar variant foreground color",
|
|
1161
|
+
"name": "--vscode-activityBarBadge-foreground",
|
|
1162
|
+
"default": "#ffffff"
|
|
1163
|
+
}
|
|
1164
|
+
],
|
|
1165
|
+
"members": [
|
|
1166
|
+
{
|
|
1167
|
+
"kind": "field",
|
|
1168
|
+
"name": "variant",
|
|
1169
|
+
"type": {
|
|
1170
|
+
"text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
|
|
1171
|
+
},
|
|
1172
|
+
"default": "'default'",
|
|
1173
|
+
"attribute": "variant",
|
|
1174
|
+
"reflects": true
|
|
1175
|
+
},
|
|
1176
|
+
{
|
|
1177
|
+
"kind": "field",
|
|
1178
|
+
"name": "version",
|
|
1179
|
+
"type": {
|
|
1180
|
+
"text": "string"
|
|
1181
|
+
},
|
|
1182
|
+
"description": "VSCode Elements version",
|
|
1183
|
+
"readonly": true,
|
|
1184
|
+
"inheritedFrom": {
|
|
1185
|
+
"name": "VscElement",
|
|
1186
|
+
"module": "src/includes/VscElement.ts"
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
],
|
|
1190
|
+
"attributes": [
|
|
1191
|
+
{
|
|
1192
|
+
"name": "variant",
|
|
1193
|
+
"type": {
|
|
1194
|
+
"text": "| 'default'\n | 'counter'\n | 'activity-bar-counter'\n | 'tab-header-counter'"
|
|
1195
|
+
},
|
|
1196
|
+
"default": "'default'",
|
|
1197
|
+
"fieldName": "variant"
|
|
1198
|
+
}
|
|
1199
|
+
],
|
|
1200
|
+
"superclass": {
|
|
1201
|
+
"name": "VscElement",
|
|
1202
|
+
"module": "/src/includes/VscElement.js"
|
|
1203
|
+
},
|
|
1204
|
+
"tagName": "vscode-badge",
|
|
1205
|
+
"customElement": true
|
|
1206
|
+
}
|
|
1207
|
+
],
|
|
1208
|
+
"exports": [
|
|
1209
|
+
{
|
|
1210
|
+
"kind": "js",
|
|
1211
|
+
"name": "VscodeBadge",
|
|
1212
|
+
"declaration": {
|
|
1213
|
+
"name": "VscodeBadge",
|
|
1214
|
+
"module": "src/vscode-badge/vscode-badge.ts"
|
|
1215
|
+
}
|
|
1216
|
+
},
|
|
1217
|
+
{
|
|
1218
|
+
"kind": "custom-element-definition",
|
|
1219
|
+
"name": "vscode-badge",
|
|
1220
|
+
"declaration": {
|
|
1221
|
+
"name": "VscodeBadge",
|
|
1222
|
+
"module": "src/vscode-badge/vscode-badge.ts"
|
|
1223
|
+
}
|
|
1224
|
+
}
|
|
1225
|
+
]
|
|
1226
|
+
},
|
|
1180
1227
|
{
|
|
1181
1228
|
"kind": "javascript-module",
|
|
1182
1229
|
"path": "src/vscode-button-group/vscode-button-group.styles.ts",
|
|
@@ -1187,7 +1234,7 @@
|
|
|
1187
1234
|
"type": {
|
|
1188
1235
|
"text": "CSSResultGroup"
|
|
1189
1236
|
},
|
|
1190
|
-
"default": "[ defaultStyles, css` :host { display: inline-block; } .root { align-items: stretch; display: flex; width: 100%; } ::slotted(vscode-button:not(:first-child)) { --vsc-border-left-width: 0; --vsc-border-left-radius: 0; --vsc-border-left-width: 0; } ::slotted(vscode-button:not(:last-child)) { --vsc-divider-display: block; --vsc-border-right-width: 0; --vsc-border-right-radius: 0; --vsc-border-right-width: 0; } ::slotted(vscode-button:focus) { z-index: 1; } ::slotted(vscode-button:not(:empty)) { width: 100%; } `, ]"
|
|
1237
|
+
"default": "[ defaultStyles, css` :host { display: inline-block; } .root { align-items: stretch; display: flex; width: 100%; } ::slotted(vscode-button:not(:first-child)) { --vsc-border-left-width: 0; --vsc-border-left-radius: 0; --vsc-border-left-width: 0; } ::slotted(vscode-button:not(:last-child)) { --vsc-divider-display: block; --vsc-base-additional-right-padding: 1px; --vsc-base-after-content: ''; --vsc-border-right-width: 0; --vsc-border-right-radius: 0; --vsc-border-right-width: 0; } ::slotted(vscode-button:focus) { z-index: 1; } ::slotted(vscode-button:not(:empty)) { width: 100%; } `, ]"
|
|
1191
1238
|
}
|
|
1192
1239
|
],
|
|
1193
1240
|
"exports": [
|
|
@@ -1308,7 +1355,7 @@
|
|
|
1308
1355
|
"type": {
|
|
1309
1356
|
"text": "CSSResultGroup"
|
|
1310
1357
|
},
|
|
1311
|
-
"default": "[ defaultStyles, baseStyles, css` :host(:invalid) .icon, :host([invalid]) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } .icon { border-radius: 3px; } .indeterminate-icon { background-color: currentColor; position: absolute; height: 1px; width: 12px; } :host(:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } `, ]"
|
|
1358
|
+
"default": "[ defaultStyles, baseStyles, css` :host(:invalid) .icon, :host([invalid]) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } .icon { border-radius: 3px; } .indeterminate-icon { background-color: currentColor; position: absolute; height: 1px; width: 12px; } :host(:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } /* Toggle appearance */ :host([toggle]) .icon { /* Track */ width: 36px; height: 20px; border-radius: 999px; background-color: var(--vscode-button-secondaryBackground, #313131); border-color: var(--vscode-button-border, transparent); justify-content: flex-start; position: absolute; } :host(:focus):host([toggle]):host(:not([disabled])) .icon { outline-offset: 2px; } /* Reserve space for the wider toggle track so text doesn't overlap */ :host([toggle]) .label-inner { padding-left: 45px; /* 36px track + 9px spacing */ } :host([toggle]) .label { min-height: 20px; } :host([toggle]) .wrapper { min-height: 20px; line-height: 20px; } :host([toggle]) .thumb { /* Thumb */ box-sizing: border-box; display: block; width: 16px; height: 16px; border-radius: 50%; background-color: var(--vscode-button-secondaryForeground, #cccccc); margin-left: 1px; transition: transform 120ms ease-in-out; } :host([toggle][checked]) .icon { background-color: var(--vscode-button-background, #04395e); border-color: var(--vscode-button-border, transparent); } :host([toggle][checked]) .thumb { transform: translateX(16px); background-color: var(--vscode-button-foreground, #ffffff); } :host([toggle]):host(:invalid) .icon { background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); border-color: var(--vscode-inputValidation-errorBorder, #be1100); } :host([toggle]):host(:invalid) .thumb { background-color: var(--vscode-inputValidation-errorBorder, #be1100); } :host([toggle]) .check-icon, :host([toggle]) .indeterminate-icon { display: none; } :host([toggle]:focus):host(:not([disabled])) .icon { outline: 1px solid var(--vscode-focusBorder, #0078d4); outline-offset: -1px; } `, ]"
|
|
1312
1359
|
}
|
|
1313
1360
|
],
|
|
1314
1361
|
"exports": [
|
|
@@ -1433,6 +1480,17 @@
|
|
|
1433
1480
|
"attribute": "name",
|
|
1434
1481
|
"reflects": true
|
|
1435
1482
|
},
|
|
1483
|
+
{
|
|
1484
|
+
"kind": "field",
|
|
1485
|
+
"name": "toggle",
|
|
1486
|
+
"type": {
|
|
1487
|
+
"text": "boolean"
|
|
1488
|
+
},
|
|
1489
|
+
"default": "false",
|
|
1490
|
+
"description": "When true, renders as a toggle switch instead of a checkbox.",
|
|
1491
|
+
"attribute": "toggle",
|
|
1492
|
+
"reflects": true
|
|
1493
|
+
},
|
|
1436
1494
|
{
|
|
1437
1495
|
"kind": "field",
|
|
1438
1496
|
"name": "value",
|
|
@@ -1768,6 +1826,15 @@
|
|
|
1768
1826
|
"default": "false",
|
|
1769
1827
|
"fieldName": "invalid"
|
|
1770
1828
|
},
|
|
1829
|
+
{
|
|
1830
|
+
"name": "toggle",
|
|
1831
|
+
"type": {
|
|
1832
|
+
"text": "boolean"
|
|
1833
|
+
},
|
|
1834
|
+
"default": "false",
|
|
1835
|
+
"description": "When true, renders as a toggle switch instead of a checkbox.",
|
|
1836
|
+
"fieldName": "toggle"
|
|
1837
|
+
},
|
|
1771
1838
|
{
|
|
1772
1839
|
"name": "value",
|
|
1773
1840
|
"type": {
|