q2-tecton-elements 1.54.3 → 1.54.5
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/dist/bundle-report.json +100 -19
- package/dist/cjs/q2-badge_7.cjs.entry.js +13 -5
- package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +21 -2
- package/dist/cjs/q2-dropdown-item.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-option-list_2.cjs.entry.js +7 -5
- package/dist/cjs/q2-option-list_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-option.cjs.entry.js +15 -1
- package/dist/cjs/q2-option.cjs.entry.js.map +1 -1
- package/dist/collection/components/q2-btn/q2-btn.css +56 -51
- package/dist/collection/components/q2-btn/q2-btn.js +12 -4
- package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
- package/dist/collection/components/q2-dropdown/test/q2-dropdown-test.e2e.js +38 -2
- package/dist/collection/components/q2-dropdown/test/q2-dropdown-test.e2e.js.map +1 -1
- package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js +21 -2
- package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map +1 -1
- package/dist/collection/components/q2-dropdown-item/test/q2-dropdown-item-test.e2e.js +43 -2
- package/dist/collection/components/q2-dropdown-item/test/q2-dropdown-item-test.e2e.js.map +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.css +1 -1
- package/dist/collection/components/q2-option/q2-option.js +29 -1
- package/dist/collection/components/q2-option/q2-option.js.map +1 -1
- package/dist/collection/components/q2-option/test/q2-option-test.e2e.js +33 -114
- package/dist/collection/components/q2-option/test/q2-option-test.e2e.js.map +1 -1
- package/dist/collection/components/q2-option-list/q2-option-list.js +7 -5
- package/dist/collection/components/q2-option-list/q2-option-list.js.map +1 -1
- package/dist/collection/utils/mirror-emit.js +19 -0
- package/dist/collection/utils/mirror-emit.js.map +1 -0
- package/dist/components/q2-btn2.js +13 -5
- package/dist/components/q2-btn2.js.map +1 -1
- package/dist/components/q2-dropdown-item2.js +21 -2
- package/dist/components/q2-dropdown-item2.js.map +1 -1
- package/dist/components/q2-file-picker.js +1 -1
- package/dist/components/q2-file-picker.js.map +1 -1
- package/dist/components/q2-option-list2.js +7 -5
- package/dist/components/q2-option-list2.js.map +1 -1
- package/dist/components/q2-option2.js +15 -1
- package/dist/components/q2-option2.js.map +1 -1
- package/dist/esm/q2-badge_7.entry.js +13 -5
- package/dist/esm/q2-badge_7.entry.js.map +1 -1
- package/dist/esm/q2-dropdown-item.entry.js +21 -2
- package/dist/esm/q2-dropdown-item.entry.js.map +1 -1
- package/dist/esm/q2-file-picker.entry.js +1 -1
- package/dist/esm/q2-file-picker.entry.js.map +1 -1
- package/dist/esm/q2-option-list_2.entry.js +7 -5
- package/dist/esm/q2-option-list_2.entry.js.map +1 -1
- package/dist/esm/q2-option.entry.js +15 -1
- package/dist/esm/q2-option.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-badge_7.entry.js +8 -7
- package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-dropdown-item.entry.js +23 -6
- package/dist/q2-tecton-elements/q2-dropdown-item.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-option-list_2.entry.js +29 -23
- package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-option.entry.js +35 -15
- package/dist/q2-tecton-elements/q2-option.entry.js.map +1 -1
- package/dist/types/components/q2-dropdown-item/q2-dropdown-item.d.ts +8 -0
- package/dist/types/components/q2-option/q2-option.d.ts +7 -0
- package/dist/types/components.d.ts +11 -0
- package/dist/types/utils/mirror-emit.d.ts +11 -0
- package/package.json +3 -3
package/dist/bundle-report.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-05-
|
|
2
|
+
"timestamp": "2025-05-28T13:42:21",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "node",
|
|
5
5
|
"version": "20.18.1"
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
"fsNamespace": "q2-tecton-elements",
|
|
10
10
|
"components": 56,
|
|
11
11
|
"entries": 56,
|
|
12
|
-
"bundles":
|
|
12
|
+
"bundles": 916,
|
|
13
13
|
"outputs": [
|
|
14
14
|
{
|
|
15
15
|
"name": "dist-collection",
|
|
16
|
-
"files":
|
|
16
|
+
"files": 336,
|
|
17
17
|
"generatedFiles": [
|
|
18
18
|
"./dist/collection/components/click-elsewhere/click-elsewhere.js",
|
|
19
19
|
"./dist/collection/components/click-elsewhere/click-elsewhere.js.map",
|
|
@@ -341,6 +341,8 @@
|
|
|
341
341
|
"./dist/collection/utils/helpers.js.map",
|
|
342
342
|
"./dist/collection/utils/index.js",
|
|
343
343
|
"./dist/collection/utils/index.js.map",
|
|
344
|
+
"./dist/collection/utils/mirror-emit.js",
|
|
345
|
+
"./dist/collection/utils/mirror-emit.js.map",
|
|
344
346
|
"./dist/collection/utils/sanitize-html-string.js",
|
|
345
347
|
"./dist/collection/utils/sanitize-html-string.js.map",
|
|
346
348
|
"./dist/collection/utils/sanitize-regex-string.js",
|
|
@@ -978,7 +980,7 @@
|
|
|
978
980
|
"index-504f1a9e.js",
|
|
979
981
|
"shapes-c7e1a3fa.js"
|
|
980
982
|
],
|
|
981
|
-
"originalByteSize":
|
|
983
|
+
"originalByteSize": 226725
|
|
982
984
|
},
|
|
983
985
|
{
|
|
984
986
|
"key": "q2-action-group.entry",
|
|
@@ -1206,7 +1208,7 @@
|
|
|
1206
1208
|
"index-7a5365e2.js",
|
|
1207
1209
|
"index-504f1a9e.js"
|
|
1208
1210
|
],
|
|
1209
|
-
"originalByteSize":
|
|
1211
|
+
"originalByteSize": 19011
|
|
1210
1212
|
},
|
|
1211
1213
|
{
|
|
1212
1214
|
"key": "q2-formatted-text.entry",
|
|
@@ -1466,7 +1468,7 @@
|
|
|
1466
1468
|
"index-7a5365e2.js",
|
|
1467
1469
|
"index-504f1a9e.js"
|
|
1468
1470
|
],
|
|
1469
|
-
"originalByteSize":
|
|
1471
|
+
"originalByteSize": 8402
|
|
1470
1472
|
},
|
|
1471
1473
|
{
|
|
1472
1474
|
"key": "q2-item.q2-link.q2-list.entry",
|
|
@@ -1558,7 +1560,7 @@
|
|
|
1558
1560
|
"index-7a5365e2.js",
|
|
1559
1561
|
"index-504f1a9e.js"
|
|
1560
1562
|
],
|
|
1561
|
-
"originalByteSize":
|
|
1563
|
+
"originalByteSize": 7450
|
|
1562
1564
|
},
|
|
1563
1565
|
{
|
|
1564
1566
|
"key": "q2-option-list.q2-popover.entry",
|
|
@@ -1572,7 +1574,7 @@
|
|
|
1572
1574
|
"index-7a5365e2.js",
|
|
1573
1575
|
"index-504f1a9e.js"
|
|
1574
1576
|
],
|
|
1575
|
-
"originalByteSize":
|
|
1577
|
+
"originalByteSize": 42276
|
|
1576
1578
|
},
|
|
1577
1579
|
{
|
|
1578
1580
|
"key": "click-elsewhere.entry",
|
|
@@ -1606,7 +1608,7 @@
|
|
|
1606
1608
|
"index-504f1a9e.js",
|
|
1607
1609
|
"shapes-c7e1a3fa.js"
|
|
1608
1610
|
],
|
|
1609
|
-
"originalByteSize":
|
|
1611
|
+
"originalByteSize": 226725
|
|
1610
1612
|
},
|
|
1611
1613
|
{
|
|
1612
1614
|
"key": "q2-action-group.entry",
|
|
@@ -1834,7 +1836,7 @@
|
|
|
1834
1836
|
"index-7a5365e2.js",
|
|
1835
1837
|
"index-504f1a9e.js"
|
|
1836
1838
|
],
|
|
1837
|
-
"originalByteSize":
|
|
1839
|
+
"originalByteSize": 19011
|
|
1838
1840
|
},
|
|
1839
1841
|
{
|
|
1840
1842
|
"key": "q2-formatted-text.entry",
|
|
@@ -2094,7 +2096,7 @@
|
|
|
2094
2096
|
"index-7a5365e2.js",
|
|
2095
2097
|
"index-504f1a9e.js"
|
|
2096
2098
|
],
|
|
2097
|
-
"originalByteSize":
|
|
2099
|
+
"originalByteSize": 8402
|
|
2098
2100
|
},
|
|
2099
2101
|
{
|
|
2100
2102
|
"key": "q2-item.q2-link.q2-list.entry",
|
|
@@ -2186,7 +2188,7 @@
|
|
|
2186
2188
|
"index-7a5365e2.js",
|
|
2187
2189
|
"index-504f1a9e.js"
|
|
2188
2190
|
],
|
|
2189
|
-
"originalByteSize":
|
|
2191
|
+
"originalByteSize": 7450
|
|
2190
2192
|
},
|
|
2191
2193
|
{
|
|
2192
2194
|
"key": "q2-option-list.q2-popover.entry",
|
|
@@ -2200,7 +2202,7 @@
|
|
|
2200
2202
|
"index-7a5365e2.js",
|
|
2201
2203
|
"index-504f1a9e.js"
|
|
2202
2204
|
],
|
|
2203
|
-
"originalByteSize":
|
|
2205
|
+
"originalByteSize": 42276
|
|
2204
2206
|
},
|
|
2205
2207
|
{
|
|
2206
2208
|
"key": "click-elsewhere.entry",
|
|
@@ -2236,7 +2238,7 @@
|
|
|
2236
2238
|
"index-76f63767.js",
|
|
2237
2239
|
"shapes-5d45fc11.js"
|
|
2238
2240
|
],
|
|
2239
|
-
"originalByteSize":
|
|
2241
|
+
"originalByteSize": 227529
|
|
2240
2242
|
},
|
|
2241
2243
|
{
|
|
2242
2244
|
"key": "q2-action-group.entry",
|
|
@@ -2464,7 +2466,7 @@
|
|
|
2464
2466
|
"index-e7e68b1e.js",
|
|
2465
2467
|
"index-76f63767.js"
|
|
2466
2468
|
],
|
|
2467
|
-
"originalByteSize":
|
|
2469
|
+
"originalByteSize": 19325
|
|
2468
2470
|
},
|
|
2469
2471
|
{
|
|
2470
2472
|
"key": "q2-formatted-text.entry",
|
|
@@ -2724,7 +2726,7 @@
|
|
|
2724
2726
|
"index-e7e68b1e.js",
|
|
2725
2727
|
"index-76f63767.js"
|
|
2726
2728
|
],
|
|
2727
|
-
"originalByteSize":
|
|
2729
|
+
"originalByteSize": 8506
|
|
2728
2730
|
},
|
|
2729
2731
|
{
|
|
2730
2732
|
"key": "q2-item.q2-link.q2-list.entry",
|
|
@@ -2816,7 +2818,7 @@
|
|
|
2816
2818
|
"index-e7e68b1e.js",
|
|
2817
2819
|
"index-76f63767.js"
|
|
2818
2820
|
],
|
|
2819
|
-
"originalByteSize":
|
|
2821
|
+
"originalByteSize": 7560
|
|
2820
2822
|
},
|
|
2821
2823
|
{
|
|
2822
2824
|
"key": "q2-option-list.q2-popover.entry",
|
|
@@ -2830,7 +2832,7 @@
|
|
|
2830
2832
|
"index-e7e68b1e.js",
|
|
2831
2833
|
"index-76f63767.js"
|
|
2832
2834
|
],
|
|
2833
|
-
"originalByteSize":
|
|
2835
|
+
"originalByteSize": 42371
|
|
2834
2836
|
},
|
|
2835
2837
|
{
|
|
2836
2838
|
"key": "click-elsewhere.entry",
|
|
@@ -9529,6 +9531,27 @@
|
|
|
9529
9531
|
"bubbles": true,
|
|
9530
9532
|
"cancelable": true,
|
|
9531
9533
|
"composed": true,
|
|
9534
|
+
"docs": {
|
|
9535
|
+
"tags": [
|
|
9536
|
+
{
|
|
9537
|
+
"name": "deprecated"
|
|
9538
|
+
}
|
|
9539
|
+
],
|
|
9540
|
+
"text": "Is emitted when the item is clicked."
|
|
9541
|
+
},
|
|
9542
|
+
"complexType": {
|
|
9543
|
+
"original": "{ type: 'select' | 'remove'; value: string }",
|
|
9544
|
+
"resolved": "{ type: \"select\" | \"remove\"; value: string; }",
|
|
9545
|
+
"references": {}
|
|
9546
|
+
},
|
|
9547
|
+
"internal": false
|
|
9548
|
+
},
|
|
9549
|
+
{
|
|
9550
|
+
"name": "tctClick",
|
|
9551
|
+
"method": "tctClick",
|
|
9552
|
+
"bubbles": true,
|
|
9553
|
+
"cancelable": true,
|
|
9554
|
+
"composed": true,
|
|
9532
9555
|
"docs": {
|
|
9533
9556
|
"tags": [],
|
|
9534
9557
|
"text": "Is emitted when the item is clicked."
|
|
@@ -13490,6 +13513,23 @@
|
|
|
13490
13513
|
"references": {}
|
|
13491
13514
|
},
|
|
13492
13515
|
"internal": false
|
|
13516
|
+
},
|
|
13517
|
+
{
|
|
13518
|
+
"name": "tctClick",
|
|
13519
|
+
"method": "tctClick",
|
|
13520
|
+
"bubbles": true,
|
|
13521
|
+
"cancelable": true,
|
|
13522
|
+
"composed": true,
|
|
13523
|
+
"docs": {
|
|
13524
|
+
"tags": [],
|
|
13525
|
+
"text": "Is emitted when the option is clicked."
|
|
13526
|
+
},
|
|
13527
|
+
"complexType": {
|
|
13528
|
+
"original": "{ type: 'select' | 'remove'; value: string }",
|
|
13529
|
+
"resolved": "{ type: \"select\" | \"remove\"; value: string; }",
|
|
13530
|
+
"references": {}
|
|
13531
|
+
},
|
|
13532
|
+
"internal": false
|
|
13493
13533
|
}
|
|
13494
13534
|
],
|
|
13495
13535
|
"internal": false,
|
|
@@ -38940,6 +38980,27 @@
|
|
|
38940
38980
|
"bubbles": true,
|
|
38941
38981
|
"cancelable": true,
|
|
38942
38982
|
"composed": true,
|
|
38983
|
+
"docs": {
|
|
38984
|
+
"tags": [
|
|
38985
|
+
{
|
|
38986
|
+
"name": "deprecated"
|
|
38987
|
+
}
|
|
38988
|
+
],
|
|
38989
|
+
"text": "Is emitted when the item is clicked."
|
|
38990
|
+
},
|
|
38991
|
+
"complexType": {
|
|
38992
|
+
"original": "{ type: 'select' | 'remove'; value: string }",
|
|
38993
|
+
"resolved": "{ type: \"select\" | \"remove\"; value: string; }",
|
|
38994
|
+
"references": {}
|
|
38995
|
+
},
|
|
38996
|
+
"internal": false
|
|
38997
|
+
},
|
|
38998
|
+
{
|
|
38999
|
+
"name": "tctClick",
|
|
39000
|
+
"method": "tctClick",
|
|
39001
|
+
"bubbles": true,
|
|
39002
|
+
"cancelable": true,
|
|
39003
|
+
"composed": true,
|
|
38943
39004
|
"docs": {
|
|
38944
39005
|
"tags": [],
|
|
38945
39006
|
"text": "Is emitted when the item is clicked."
|
|
@@ -41725,6 +41786,23 @@
|
|
|
41725
41786
|
"references": {}
|
|
41726
41787
|
},
|
|
41727
41788
|
"internal": false
|
|
41789
|
+
},
|
|
41790
|
+
{
|
|
41791
|
+
"name": "tctClick",
|
|
41792
|
+
"method": "tctClick",
|
|
41793
|
+
"bubbles": true,
|
|
41794
|
+
"cancelable": true,
|
|
41795
|
+
"composed": true,
|
|
41796
|
+
"docs": {
|
|
41797
|
+
"tags": [],
|
|
41798
|
+
"text": "Is emitted when the option is clicked."
|
|
41799
|
+
},
|
|
41800
|
+
"complexType": {
|
|
41801
|
+
"original": "{ type: 'select' | 'remove'; value: string }",
|
|
41802
|
+
"resolved": "{ type: \"select\" | \"remove\"; value: string; }",
|
|
41803
|
+
"references": {}
|
|
41804
|
+
},
|
|
41805
|
+
"internal": false
|
|
41728
41806
|
}
|
|
41729
41807
|
],
|
|
41730
41808
|
"watchers": [
|
|
@@ -41800,7 +41878,7 @@
|
|
|
41800
41878
|
"hasVdomClass": true,
|
|
41801
41879
|
"hasVdomFunctional": false,
|
|
41802
41880
|
"hasVdomKey": false,
|
|
41803
|
-
"hasVdomListener":
|
|
41881
|
+
"hasVdomListener": true,
|
|
41804
41882
|
"hasVdomPropOrAttr": true,
|
|
41805
41883
|
"hasVdomRef": false,
|
|
41806
41884
|
"hasVdomRender": true,
|
|
@@ -41815,6 +41893,8 @@
|
|
|
41815
41893
|
"aria-selected",
|
|
41816
41894
|
"aria-hidden",
|
|
41817
41895
|
"display",
|
|
41896
|
+
"onClick",
|
|
41897
|
+
"onKeydown",
|
|
41818
41898
|
"type"
|
|
41819
41899
|
],
|
|
41820
41900
|
"htmlTagNames": [
|
|
@@ -43407,6 +43487,7 @@
|
|
|
43407
43487
|
"./src/utils"
|
|
43408
43488
|
],
|
|
43409
43489
|
"./src/utils/index.tsx": [],
|
|
43490
|
+
"./src/utils/mirror-emit.ts": [],
|
|
43410
43491
|
"./src/utils/sanitize-html-string.ts": [],
|
|
43411
43492
|
"./src/utils/sanitize-regex-string.ts": [],
|
|
43412
43493
|
"./src/utils/test/action-sheet-test.e2e.ts": [
|
|
@@ -49,7 +49,7 @@ const Q2Badge = class {
|
|
|
49
49
|
};
|
|
50
50
|
Q2Badge.style = Q2BadgeStyle0;
|
|
51
51
|
|
|
52
|
-
const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none;margin-block:-100px}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);border-radius:var(--tct-btn-border-radius);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-letter-spacing, var(--comp-letter-spacing))}:host(:not([size])) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=small]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 16px)}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=medium]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, unset)}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([size=large]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, unset)}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}:host([size]) button.icon-only{padding:var(--tct-btn-icon-only-padding, 0px)}:host([intent]) button.icon-only{padding:var(--tct-btn-icon-only-intent-padding, var(--app-scale-2x, 10px))}button :host(:not([color]):not([intent])):hover,button :host(:not([color]):not([intent])):focus,button.icon-only:hover,button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #B4A0D3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #B4A0D3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4D4D4D));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4D4D4D));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-btn-border-radius:50%;--tct-avatar-border:var(--tct-btn-coin-border, 0);width:auto}button.intent-coin:focus{--const-double-focus-ring:0;box-shadow:0}button.intent-coin:focus-visible{--const-double-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6A4A9E))}button.intent-coin:hover:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6A4A9E));--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #FFFFFF));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #FFFFFF));box-shadow:var(--const-double-focus-ring)}button.intent-coin:active:not([disabled]){box-shadow:none}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4D4D4D));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4D4D4D));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}";
|
|
52
|
+
const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none;margin-block:-100px}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}button.has-color,button.has-intent{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform);letter-spacing:var(--tct-btn-letter-spacing)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=small]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 16px)}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=medium]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, unset)}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([size=large]) button:not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, unset)}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button:not(.has-color):not(.has-intent):focus,button.icon-only:hover,button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).is-active.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).icon-only:focus *,button:not(.has-intent).is-active.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}button:not(.has-intent):not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #B4A0D3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #B4A0D3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4D4D4D));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4D4D4D));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-btn-border-radius:50%;--tct-avatar-border:var(--tct-btn-coin-border, 0);width:auto}button.intent-coin:focus{--const-double-focus-ring:0;box-shadow:0}button.intent-coin:focus-visible{--const-double-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6A4A9E))}button.intent-coin:hover:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6A4A9E));--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #FFFFFF));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #FFFFFF));box-shadow:var(--const-double-focus-ring)}button.intent-coin:active:not([disabled]){box-shadow:none}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4D4D4D));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4D4D4D));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}";
|
|
53
53
|
const Q2BtnStyle0 = q2BtnCss;
|
|
54
54
|
|
|
55
55
|
const Q2Btn = class {
|
|
@@ -167,12 +167,20 @@ const Q2Btn = class {
|
|
|
167
167
|
}
|
|
168
168
|
get buttonClasses() {
|
|
169
169
|
const classes = [];
|
|
170
|
-
if (this.iconPosition)
|
|
170
|
+
if (this.iconPosition)
|
|
171
171
|
classes.push(`icon-${this.iconPosition}`);
|
|
172
|
-
|
|
173
|
-
if (this.intent === 'coin') {
|
|
172
|
+
if (this.intent === 'coin')
|
|
174
173
|
classes.push('intent-coin');
|
|
175
|
-
|
|
174
|
+
if (!!this.block)
|
|
175
|
+
classes.push('is-block');
|
|
176
|
+
if (!!this.color)
|
|
177
|
+
classes.push('has-color');
|
|
178
|
+
if (!!this.intent)
|
|
179
|
+
classes.push(`has-intent`);
|
|
180
|
+
if (!!this.size)
|
|
181
|
+
classes.push('has-size');
|
|
182
|
+
if (!!this.active)
|
|
183
|
+
classes.push('is-active');
|
|
176
184
|
return classes.join(' ');
|
|
177
185
|
}
|
|
178
186
|
get coinLabelClasses() {
|