q2-tecton-elements 1.32.1 → 1.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (294) hide show
  1. package/dist/cjs/click-elsewhere_2.cjs.entry.js +1 -1
  2. package/dist/cjs/click-elsewhere_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/q2-badge.cjs.entry.js +3 -0
  5. package/dist/cjs/q2-badge.cjs.entry.js.map +1 -1
  6. package/dist/cjs/q2-btn_2.cjs.entry.js +49 -38
  7. package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
  8. package/dist/cjs/q2-calendar.cjs.entry.js +15 -3
  9. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  10. package/dist/cjs/q2-chart-donut.cjs.entry.js +30 -4
  11. package/dist/cjs/q2-chart-donut.cjs.entry.js.map +1 -1
  12. package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
  13. package/dist/cjs/q2-checkbox-group.cjs.entry.js.map +1 -1
  14. package/dist/cjs/q2-dropdown.cjs.entry.js +8 -1
  15. package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
  16. package/dist/cjs/q2-input.cjs.entry.js +8 -6
  17. package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
  18. package/dist/cjs/q2-loading-element.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-loading-element.cjs.entry.js.map +1 -1
  20. package/dist/cjs/q2-option-list.cjs.entry.js +2 -1
  21. package/dist/cjs/q2-option-list.cjs.entry.js.map +1 -1
  22. package/dist/cjs/q2-pill.cjs.entry.js +23 -19
  23. package/dist/cjs/q2-pill.cjs.entry.js.map +1 -1
  24. package/dist/cjs/q2-radio-group.cjs.entry.js +11 -1
  25. package/dist/cjs/q2-radio-group.cjs.entry.js.map +1 -1
  26. package/dist/cjs/q2-radio.cjs.entry.js +1 -0
  27. package/dist/cjs/q2-radio.cjs.entry.js.map +1 -1
  28. package/dist/cjs/q2-tag.cjs.entry.js +16 -12
  29. package/dist/cjs/q2-tag.cjs.entry.js.map +1 -1
  30. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  31. package/dist/collection/components/q2-badge/index.js +3 -0
  32. package/dist/collection/components/q2-badge/index.js.map +1 -1
  33. package/dist/collection/components/q2-btn/index.js +84 -39
  34. package/dist/collection/components/q2-btn/index.js.map +1 -1
  35. package/dist/collection/components/q2-btn/styles.css +822 -100
  36. package/dist/collection/components/q2-calendar/index.js +16 -4
  37. package/dist/collection/components/q2-calendar/index.js.map +1 -1
  38. package/dist/collection/components/q2-chart-donut/index.js +49 -5
  39. package/dist/collection/components/q2-chart-donut/index.js.map +1 -1
  40. package/dist/collection/components/q2-checkbox-group/index.js +1 -1
  41. package/dist/collection/components/q2-checkbox-group/index.js.map +1 -1
  42. package/dist/collection/components/q2-data-table/index.js +5 -5
  43. package/dist/collection/components/q2-dropdown/index.js +8 -1
  44. package/dist/collection/components/q2-dropdown/index.js.map +1 -1
  45. package/dist/collection/components/q2-input/index.js +8 -6
  46. package/dist/collection/components/q2-input/index.js.map +1 -1
  47. package/dist/collection/components/q2-input/styles.css +46 -30
  48. package/dist/collection/components/q2-loading/skeleton/q2-loading-element/styles.css +1 -1
  49. package/dist/collection/components/q2-loading/styles.css +1 -1
  50. package/dist/collection/components/q2-option-list/index.js +23 -4
  51. package/dist/collection/components/q2-option-list/index.js.map +1 -1
  52. package/dist/collection/components/q2-pill/index.js +40 -19
  53. package/dist/collection/components/q2-pill/index.js.map +1 -1
  54. package/dist/collection/components/q2-pill/styles.css +7 -7
  55. package/dist/collection/components/q2-popover/styles.css +2 -3
  56. package/dist/collection/components/q2-radio/index.js +19 -0
  57. package/dist/collection/components/q2-radio/index.js.map +1 -1
  58. package/dist/collection/components/q2-radio-group/index.js +11 -1
  59. package/dist/collection/components/q2-radio-group/index.js.map +1 -1
  60. package/dist/collection/components/q2-stepper-pane/index.js +2 -2
  61. package/dist/collection/components/q2-tag/index.js +35 -13
  62. package/dist/collection/components/q2-tag/index.js.map +1 -1
  63. package/dist/collection/components/q2-tag/styles.css +3 -3
  64. package/dist/components/index10.js +1 -1
  65. package/dist/components/index10.js.map +1 -1
  66. package/dist/components/index11.js +1 -1
  67. package/dist/components/index12.js +1 -1
  68. package/dist/components/index14.js +4 -2
  69. package/dist/components/index14.js.map +1 -1
  70. package/dist/components/index15.js +1 -1
  71. package/dist/components/index15.js.map +1 -1
  72. package/dist/components/index16.js +1 -1
  73. package/dist/components/index4.js +3 -0
  74. package/dist/components/index4.js.map +1 -1
  75. package/dist/components/index5.js +52 -39
  76. package/dist/components/index5.js.map +1 -1
  77. package/dist/components/index6.js +1 -1
  78. package/dist/components/index8.js +1 -1
  79. package/dist/components/index9.js +9 -7
  80. package/dist/components/index9.js.map +1 -1
  81. package/dist/components/q2-calendar.js +16 -4
  82. package/dist/components/q2-calendar.js.map +1 -1
  83. package/dist/components/q2-card.js +1 -1
  84. package/dist/components/q2-carousel.js +1 -1
  85. package/dist/components/q2-chart-donut.js +32 -6
  86. package/dist/components/q2-chart-donut.js.map +1 -1
  87. package/dist/components/q2-checkbox-group.js +2 -2
  88. package/dist/components/q2-checkbox-group.js.map +1 -1
  89. package/dist/components/q2-dropdown.js +9 -2
  90. package/dist/components/q2-dropdown.js.map +1 -1
  91. package/dist/components/q2-editable-field.js +1 -1
  92. package/dist/components/q2-loading-element.js +1 -1
  93. package/dist/components/q2-loading-element.js.map +1 -1
  94. package/dist/components/q2-pagination.js +1 -1
  95. package/dist/components/q2-pill.js +26 -21
  96. package/dist/components/q2-pill.js.map +1 -1
  97. package/dist/components/q2-radio-group.js +12 -2
  98. package/dist/components/q2-radio-group.js.map +1 -1
  99. package/dist/components/q2-radio.js +3 -1
  100. package/dist/components/q2-radio.js.map +1 -1
  101. package/dist/components/q2-section.js +1 -1
  102. package/dist/components/q2-select.js +1 -1
  103. package/dist/components/q2-stepper-pane.js +1 -1
  104. package/dist/components/q2-stepper-vertical.js +1 -1
  105. package/dist/components/q2-stepper.js +1 -1
  106. package/dist/components/q2-tab-container.js +1 -1
  107. package/dist/components/q2-tag.js +20 -15
  108. package/dist/components/q2-tag.js.map +1 -1
  109. package/dist/components/q2-textarea.js +1 -1
  110. package/dist/components/q2-tooltip.js +1 -1
  111. package/dist/docs.json +129 -2
  112. package/dist/esm/click-elsewhere_2.entry.js +2 -2
  113. package/dist/esm/click-elsewhere_2.entry.js.map +1 -1
  114. package/dist/esm/{index-e647722e.js → index-a8589748.js} +2 -2
  115. package/dist/esm/{index-e647722e.js.map → index-a8589748.js.map} +1 -1
  116. package/dist/esm/loader.js +1 -1
  117. package/dist/esm/q2-action-sheet.entry.js +1 -1
  118. package/dist/esm/q2-badge.entry.js +3 -0
  119. package/dist/esm/q2-badge.entry.js.map +1 -1
  120. package/dist/esm/q2-btn_2.entry.js +51 -40
  121. package/dist/esm/q2-btn_2.entry.js.map +1 -1
  122. package/dist/esm/q2-calendar.entry.js +16 -4
  123. package/dist/esm/q2-calendar.entry.js.map +1 -1
  124. package/dist/esm/q2-card.entry.js +1 -1
  125. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  126. package/dist/esm/q2-carousel.entry.js +1 -1
  127. package/dist/esm/q2-chart-area.entry.js +1 -1
  128. package/dist/esm/q2-chart-bar.entry.js +1 -1
  129. package/dist/esm/q2-chart-donut.entry.js +31 -5
  130. package/dist/esm/q2-chart-donut.entry.js.map +1 -1
  131. package/dist/esm/q2-checkbox-group.entry.js +2 -2
  132. package/dist/esm/q2-checkbox-group.entry.js.map +1 -1
  133. package/dist/esm/q2-checkbox.entry.js +1 -1
  134. package/dist/esm/q2-data-table.entry.js +1 -1
  135. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  136. package/dist/esm/q2-dropdown.entry.js +9 -2
  137. package/dist/esm/q2-dropdown.entry.js.map +1 -1
  138. package/dist/esm/q2-editable-field.entry.js +1 -1
  139. package/dist/esm/q2-icon.entry.js +1 -1
  140. package/dist/esm/q2-input.entry.js +9 -7
  141. package/dist/esm/q2-input.entry.js.map +1 -1
  142. package/dist/esm/q2-loading-element.entry.js +1 -1
  143. package/dist/esm/q2-loading-element.entry.js.map +1 -1
  144. package/dist/esm/q2-loc.entry.js +1 -1
  145. package/dist/esm/q2-message.entry.js +1 -1
  146. package/dist/esm/q2-month-picker.entry.js +1 -1
  147. package/dist/esm/q2-optgroup_2.entry.js +1 -1
  148. package/dist/esm/q2-option-list.entry.js +3 -2
  149. package/dist/esm/q2-option-list.entry.js.map +1 -1
  150. package/dist/esm/q2-pagination.entry.js +1 -1
  151. package/dist/esm/q2-pill.entry.js +24 -20
  152. package/dist/esm/q2-pill.entry.js.map +1 -1
  153. package/dist/esm/q2-radio-group.entry.js +12 -2
  154. package/dist/esm/q2-radio-group.entry.js.map +1 -1
  155. package/dist/esm/q2-radio.entry.js +2 -1
  156. package/dist/esm/q2-radio.entry.js.map +1 -1
  157. package/dist/esm/q2-section.entry.js +1 -1
  158. package/dist/esm/q2-select.entry.js +1 -1
  159. package/dist/esm/q2-stepper-pane.entry.js +1 -1
  160. package/dist/esm/q2-stepper-vertical.entry.js +1 -1
  161. package/dist/esm/q2-stepper.entry.js +1 -1
  162. package/dist/esm/q2-tab-container.entry.js +1 -1
  163. package/dist/esm/q2-tag.entry.js +18 -14
  164. package/dist/esm/q2-tag.entry.js.map +1 -1
  165. package/dist/esm/q2-tecton-elements.js +1 -1
  166. package/dist/esm/q2-textarea.entry.js +1 -1
  167. package/dist/esm/q2-tooltip.entry.js +1 -1
  168. package/dist/q2-tecton-elements/{p-75d7e017.entry.js → p-032591c6.entry.js} +2 -2
  169. package/dist/q2-tecton-elements/{p-5d351050.entry.js → p-04bf9c63.entry.js} +2 -2
  170. package/dist/q2-tecton-elements/{p-5d351050.entry.js.map → p-04bf9c63.entry.js.map} +1 -1
  171. package/dist/q2-tecton-elements/{p-e6268528.js → p-065b910b.js} +2 -2
  172. package/dist/q2-tecton-elements/{p-026d0aab.entry.js → p-07a0c5c5.entry.js} +2 -2
  173. package/dist/q2-tecton-elements/p-07a0c5c5.entry.js.map +1 -0
  174. package/dist/q2-tecton-elements/p-1a0969ff.entry.js +2 -0
  175. package/dist/q2-tecton-elements/p-1a0969ff.entry.js.map +1 -0
  176. package/dist/q2-tecton-elements/{p-c01f81d0.entry.js → p-22ab9b66.entry.js} +2 -2
  177. package/dist/q2-tecton-elements/p-38b6fb76.entry.js +2 -0
  178. package/dist/q2-tecton-elements/p-38b6fb76.entry.js.map +1 -0
  179. package/dist/q2-tecton-elements/{p-c2416941.entry.js → p-3a35c930.entry.js} +2 -2
  180. package/dist/q2-tecton-elements/p-3a35c930.entry.js.map +1 -0
  181. package/dist/q2-tecton-elements/{p-2ccfdb67.entry.js → p-3ee95a8d.entry.js} +2 -2
  182. package/dist/q2-tecton-elements/{p-c573b84f.entry.js → p-45399983.entry.js} +2 -2
  183. package/dist/q2-tecton-elements/p-4eaed8ca.entry.js +2 -0
  184. package/dist/q2-tecton-elements/{p-a3fee707.entry.js.map → p-4eaed8ca.entry.js.map} +1 -1
  185. package/dist/q2-tecton-elements/p-5b43fa8f.entry.js +2 -0
  186. package/dist/q2-tecton-elements/p-5b43fa8f.entry.js.map +1 -0
  187. package/dist/q2-tecton-elements/{p-d50df20d.entry.js → p-5e65c5ca.entry.js} +2 -2
  188. package/dist/q2-tecton-elements/p-5e65c5ca.entry.js.map +1 -0
  189. package/dist/q2-tecton-elements/{p-4182c4f8.entry.js → p-61ab4d37.entry.js} +2 -2
  190. package/dist/q2-tecton-elements/{p-3826c59b.entry.js → p-6d411b0b.entry.js} +2 -2
  191. package/dist/q2-tecton-elements/p-6f421ccd.entry.js +2 -0
  192. package/dist/q2-tecton-elements/p-6f421ccd.entry.js.map +1 -0
  193. package/dist/q2-tecton-elements/{p-75eafba4.entry.js → p-a00d7c46.entry.js} +2 -2
  194. package/dist/q2-tecton-elements/{p-87947ba8.entry.js → p-a2995834.entry.js} +2 -2
  195. package/dist/q2-tecton-elements/{p-aa3326d0.entry.js → p-a7b64d05.entry.js} +2 -2
  196. package/dist/q2-tecton-elements/{p-7481a3be.entry.js → p-a913651d.entry.js} +2 -2
  197. package/dist/q2-tecton-elements/{p-64a8f711.entry.js → p-ab63346c.entry.js} +2 -2
  198. package/dist/q2-tecton-elements/p-b177f530.entry.js +2 -0
  199. package/dist/q2-tecton-elements/p-b177f530.entry.js.map +1 -0
  200. package/dist/q2-tecton-elements/{p-7c165e8b.entry.js → p-b9478703.entry.js} +2 -2
  201. package/dist/q2-tecton-elements/{p-4c0f4f64.entry.js → p-b9a04695.entry.js} +2 -2
  202. package/dist/q2-tecton-elements/{p-70859483.entry.js → p-c14bac96.entry.js} +2 -2
  203. package/dist/q2-tecton-elements/{p-484520cf.entry.js → p-c299667d.entry.js} +2 -2
  204. package/dist/q2-tecton-elements/{p-d5105939.entry.js → p-d33822bb.entry.js} +2 -2
  205. package/dist/q2-tecton-elements/{p-2d72d2e9.entry.js → p-d57341f4.entry.js} +2 -2
  206. package/dist/q2-tecton-elements/{p-bcdc97c0.entry.js → p-d9e6bd63.entry.js} +2 -2
  207. package/dist/q2-tecton-elements/{p-aab700e4.entry.js → p-dbf471fd.entry.js} +2 -2
  208. package/dist/q2-tecton-elements/{p-a6687348.entry.js → p-dce9e778.entry.js} +2 -2
  209. package/dist/q2-tecton-elements/{p-2e648b5c.entry.js → p-ddd6f1d0.entry.js} +2 -2
  210. package/dist/q2-tecton-elements/{p-2e648b5c.entry.js.map → p-ddd6f1d0.entry.js.map} +1 -1
  211. package/dist/q2-tecton-elements/{p-c1e2f22c.entry.js → p-e053b479.entry.js} +2 -2
  212. package/dist/q2-tecton-elements/{p-b3b43a6d.entry.js → p-e0a066fb.entry.js} +2 -2
  213. package/dist/q2-tecton-elements/p-e50113ee.entry.js +2 -0
  214. package/dist/q2-tecton-elements/p-e50113ee.entry.js.map +1 -0
  215. package/dist/q2-tecton-elements/p-ef3a5fab.entry.js +2 -0
  216. package/dist/q2-tecton-elements/{p-d651e8ab.entry.js.map → p-ef3a5fab.entry.js.map} +1 -1
  217. package/dist/q2-tecton-elements/{p-b86c6859.entry.js → p-fa584c00.entry.js} +2 -2
  218. package/dist/q2-tecton-elements/p-fdf8abed.entry.js +2 -0
  219. package/dist/q2-tecton-elements/p-fdf8abed.entry.js.map +1 -0
  220. package/dist/q2-tecton-elements/{p-dedcab55.entry.js → p-ff6afb42.entry.js} +2 -2
  221. package/dist/q2-tecton-elements/p-ff6afb42.entry.js.map +1 -0
  222. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  223. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
  224. package/dist/test/elements/q2-badge-test.e2e.js +8 -0
  225. package/dist/test/elements/q2-badge-test.e2e.js.map +1 -1
  226. package/dist/test/elements/q2-btn-test.e2e.js +57 -0
  227. package/dist/test/elements/q2-btn-test.e2e.js.map +1 -1
  228. package/dist/test/elements/q2-calendar-test.e2e.js +73 -47
  229. package/dist/test/elements/q2-calendar-test.e2e.js.map +1 -1
  230. package/dist/test/elements/q2-dropdown-test.e2e.js +8 -0
  231. package/dist/test/elements/q2-dropdown-test.e2e.js.map +1 -1
  232. package/dist/test/elements/q2-input-test.e2e.js +82 -1
  233. package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
  234. package/dist/test/elements/q2-popover-test.e2e.js +19 -0
  235. package/dist/test/elements/q2-popover-test.e2e.js.map +1 -1
  236. package/dist/test/elements/q2-radio-group-test.e2e.js +26 -0
  237. package/dist/test/elements/q2-radio-group-test.e2e.js.map +1 -1
  238. package/dist/test/helpers.js +11 -0
  239. package/dist/test/helpers.js.map +1 -1
  240. package/dist/types/components/q2-btn/index.d.ts +9 -3
  241. package/dist/types/components/q2-calendar/index.d.ts +1 -0
  242. package/dist/types/components/q2-chart-donut/index.d.ts +2 -1
  243. package/dist/types/components/q2-dropdown/index.d.ts +1 -0
  244. package/dist/types/components/q2-option-list/index.d.ts +1 -0
  245. package/dist/types/components/q2-pill/index.d.ts +4 -2
  246. package/dist/types/components/q2-radio/index.d.ts +1 -0
  247. package/dist/types/components/q2-tag/index.d.ts +4 -2
  248. package/dist/types/components.d.ts +26 -2
  249. package/dist/types/workspace/workspace/{tecton-production_release_1.32.x → _Gitlab_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +1 -0
  250. package/package.json +3 -3
  251. package/dist/q2-tecton-elements/p-026d0aab.entry.js.map +0 -1
  252. package/dist/q2-tecton-elements/p-387d30fe.entry.js +0 -2
  253. package/dist/q2-tecton-elements/p-387d30fe.entry.js.map +0 -1
  254. package/dist/q2-tecton-elements/p-4e3b38c8.entry.js +0 -2
  255. package/dist/q2-tecton-elements/p-4e3b38c8.entry.js.map +0 -1
  256. package/dist/q2-tecton-elements/p-6436b6c9.entry.js +0 -2
  257. package/dist/q2-tecton-elements/p-6436b6c9.entry.js.map +0 -1
  258. package/dist/q2-tecton-elements/p-7a1c26f9.entry.js +0 -2
  259. package/dist/q2-tecton-elements/p-7a1c26f9.entry.js.map +0 -1
  260. package/dist/q2-tecton-elements/p-a3fee707.entry.js +0 -2
  261. package/dist/q2-tecton-elements/p-be5c65cd.entry.js +0 -2
  262. package/dist/q2-tecton-elements/p-be5c65cd.entry.js.map +0 -1
  263. package/dist/q2-tecton-elements/p-c2416941.entry.js.map +0 -1
  264. package/dist/q2-tecton-elements/p-c39e892d.entry.js +0 -2
  265. package/dist/q2-tecton-elements/p-c39e892d.entry.js.map +0 -1
  266. package/dist/q2-tecton-elements/p-c74e8aaa.entry.js +0 -2
  267. package/dist/q2-tecton-elements/p-c74e8aaa.entry.js.map +0 -1
  268. package/dist/q2-tecton-elements/p-d50df20d.entry.js.map +0 -1
  269. package/dist/q2-tecton-elements/p-d651e8ab.entry.js +0 -2
  270. package/dist/q2-tecton-elements/p-dedcab55.entry.js.map +0 -1
  271. /package/dist/q2-tecton-elements/{p-75d7e017.entry.js.map → p-032591c6.entry.js.map} +0 -0
  272. /package/dist/q2-tecton-elements/{p-e6268528.js.map → p-065b910b.js.map} +0 -0
  273. /package/dist/q2-tecton-elements/{p-c01f81d0.entry.js.map → p-22ab9b66.entry.js.map} +0 -0
  274. /package/dist/q2-tecton-elements/{p-2ccfdb67.entry.js.map → p-3ee95a8d.entry.js.map} +0 -0
  275. /package/dist/q2-tecton-elements/{p-c573b84f.entry.js.map → p-45399983.entry.js.map} +0 -0
  276. /package/dist/q2-tecton-elements/{p-4182c4f8.entry.js.map → p-61ab4d37.entry.js.map} +0 -0
  277. /package/dist/q2-tecton-elements/{p-3826c59b.entry.js.map → p-6d411b0b.entry.js.map} +0 -0
  278. /package/dist/q2-tecton-elements/{p-75eafba4.entry.js.map → p-a00d7c46.entry.js.map} +0 -0
  279. /package/dist/q2-tecton-elements/{p-87947ba8.entry.js.map → p-a2995834.entry.js.map} +0 -0
  280. /package/dist/q2-tecton-elements/{p-aa3326d0.entry.js.map → p-a7b64d05.entry.js.map} +0 -0
  281. /package/dist/q2-tecton-elements/{p-7481a3be.entry.js.map → p-a913651d.entry.js.map} +0 -0
  282. /package/dist/q2-tecton-elements/{p-64a8f711.entry.js.map → p-ab63346c.entry.js.map} +0 -0
  283. /package/dist/q2-tecton-elements/{p-7c165e8b.entry.js.map → p-b9478703.entry.js.map} +0 -0
  284. /package/dist/q2-tecton-elements/{p-4c0f4f64.entry.js.map → p-b9a04695.entry.js.map} +0 -0
  285. /package/dist/q2-tecton-elements/{p-70859483.entry.js.map → p-c14bac96.entry.js.map} +0 -0
  286. /package/dist/q2-tecton-elements/{p-484520cf.entry.js.map → p-c299667d.entry.js.map} +0 -0
  287. /package/dist/q2-tecton-elements/{p-d5105939.entry.js.map → p-d33822bb.entry.js.map} +0 -0
  288. /package/dist/q2-tecton-elements/{p-2d72d2e9.entry.js.map → p-d57341f4.entry.js.map} +0 -0
  289. /package/dist/q2-tecton-elements/{p-bcdc97c0.entry.js.map → p-d9e6bd63.entry.js.map} +0 -0
  290. /package/dist/q2-tecton-elements/{p-aab700e4.entry.js.map → p-dbf471fd.entry.js.map} +0 -0
  291. /package/dist/q2-tecton-elements/{p-a6687348.entry.js.map → p-dce9e778.entry.js.map} +0 -0
  292. /package/dist/q2-tecton-elements/{p-c1e2f22c.entry.js.map → p-e053b479.entry.js.map} +0 -0
  293. /package/dist/q2-tecton-elements/{p-b3b43a6d.entry.js.map → p-e0a066fb.entry.js.map} +0 -0
  294. /package/dist/q2-tecton-elements/{p-b86c6859.entry.js.map → p-fa584c00.entry.js.map} +0 -0
package/dist/components/index5.js CHANGED
@@ -1,8 +1,8 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
- import { h as handleAriaLabel, k as handleColor, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
1
+ import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
2
+ import { l as loc, h as handleAriaLabel, j as handleColor, o as overrideFocus, i as isEventFromElement } from './index16.js';
3
3
  import { d as defineCustomElement$1 } from './index10.js';
4
4
 
5
- const stylesCss = "*{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 #33b4ff #06C)}: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}:host{--comp-btn-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-background:var(--tct-btn-neutral-background, var(--tct-btn-neutral-bg, transparent));--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}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, 0);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([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}: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=\"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{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-btn-primary-border:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)) var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent)) var(--tct-btn-primary-border-style, var(--t-btn-primary-border-style, solid));border:var(--tct-btn-primary-border, var(--comp-btn-primary-border));background:var(--comp-btn-primary-background);color:var(--comp-btn-primary-font-color);border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-background, var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-btn-secondary-border:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)) var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent)) var(--tct-btn-secondary-border-style, var(--t-btn-secondary-border-style, solid));border:var(--tct-btn-secondary-border, var(--comp-btn-secondary-border));background:var(--comp-btn-secondary-background);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-background, var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{--comp-btn-neutral-border:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)) var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent)) var(--tct-btn-neutral-border-style, var(--t-btn-neutral-border-style, solid));border:var(--tct-btn-neutral-border, var(--comp-btn-neutral-border));background:var(--comp-btn-neutral-background, transparent);color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-btn-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-background, var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent)));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled,:host([intent=neutral]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-background, var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-background))));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host 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)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color: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([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, 3px))));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)))}:host([color=primary]) ::slotted(q2-icon),:host([intent=workflow-primary]) ::slotted(q2-icon){color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-btn-primary-font-color, red)))}:host([color=secondary]) ::slotted(q2-icon),:host([intent=workflow-secondary]) ::slotted(q2-icon){color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-btn-secondary-font-color, red)))}:host([intent=neutral]) ::slotted(q2-icon){color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-btn-neutral-font-color, red)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{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%}";
5
+ const stylesCss = "*{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 #33b4ff #06C)}: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 #33b4ff #06C)}: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}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--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([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}: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=\"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, 12px))}: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-small, var(--t-btn-font-size-small, 16px))}: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-small, var(--t-btn-font-size-small, 32px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-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-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-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-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-primary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-primary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-primary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-primary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-primary-outline-color, var(--comp-outline-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-color, var(--comp-color));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));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-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-primary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-primary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-primary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-primary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-primary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-primary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));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){color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-color, red)))}: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));--comp-color:var(--tct-btn-secondary-font-color);--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-color));--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), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-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), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-secondary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-secondary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-secondary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-secondary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-secondary-outline-color, var(--comp-outline-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-color, var(--comp-color));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));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-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-secondary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-secondary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-secondary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-secondary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));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){color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-color, red)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #c30000));--comp-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-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-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-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-destroy-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-destroy-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-destroy-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));outline-style:var(--tct-btn-destroy-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-destroy-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-destroy-outline-color, var(--comp-outline-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-color, var(--comp-color));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));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-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-destroy-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-destroy-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-destroy-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-destroy-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));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){color:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-color, red)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--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-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), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-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), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-escape-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-escape-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-escape-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));outline-style:var(--tct-btn-escape-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-escape-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-escape-outline-color, var(--comp-outline-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-color, var(--comp-color));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));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-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-escape-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-escape-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-escape-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-escape-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-escape-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-escape-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));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){color:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-color, red)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--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-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-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), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-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), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-color, var(--comp-color));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));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-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));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){color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-color, red)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));--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-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), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-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), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-text-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-text-letter-spacing, var(--comp-letter-spacing));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));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-text-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-text-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-text-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-color, var(--comp-color));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));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-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-text-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-color, var(--comp-focus-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-text-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-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-color, var(--comp-focus-visible-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));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-style:var(--tct-btn-neutral-text-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-color, var(--comp-disabled-color, var(--comp-color)));font-weight:var(--tct-btn-neutral-text-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));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){color:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-color, red)))}:host([color=primary][loading]) button,:host([intent=workflow-primary][loading]) button{--comp-background:var(--tct-btn-primary-loading-background, #0063a0)}:host([intent=workflow-escape][loading]) button{--comp-background:var(--tct-btn-escape-loading-background, var(--comp-background-alternative))}:host 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)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color: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([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, 3px))));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)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{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%}";
6
6
 
7
7
  const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
8
8
  constructor() {
@@ -12,17 +12,55 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
12
12
  this.handleSlotChange = () => {
13
13
  this.handleIcons();
14
14
  };
15
+ this.handleIcons = () => {
16
+ // Only allow one icon in the button
17
+ const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
18
+ if (acc)
19
+ element.remove();
20
+ else
21
+ acc = element;
22
+ return acc;
23
+ }, null);
24
+ const hasIcon = !!icon;
25
+ const hasLoc = !!this.hostElement.querySelector('q2-loc');
26
+ const hasText = !!this.hostElement.textContent.trim();
27
+ const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
28
+ const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
29
+ const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
30
+ let iconPosition;
31
+ if (hasIconOnly)
32
+ iconPosition = 'only';
33
+ else if (hasIconLeft)
34
+ iconPosition = 'left';
35
+ else if (hasIconRight)
36
+ iconPosition = 'right';
37
+ this.iconPosition = iconPosition;
38
+ };
39
+ this.renderButton = () => {
40
+ const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } = this.buttonAttributes;
41
+ const { iconPosition, loading, badge, label, hideLabel } = this;
42
+ const renderLoadingSpinner = iconPosition || loading;
43
+ const isLoadingSpinnerInline = !iconPosition || badge;
44
+ return (h(Fragment, null, h("button", { ref: el => (this.primaryBtn = el !== null && el !== void 0 ? el : this.primaryBtn), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '', "aria-describedby": !!description ? 'hidden-description' : undefined }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))), !!description && (h("div", { id: "hidden-description", "aria-hidden": "true", class: "sr" }, description))));
45
+ };
46
+ this.render = () => {
47
+ return this.size === 'small' ? (
48
+ // wrap only for small sized
49
+ h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el !== null && el !== void 0 ? el : this.primaryBtnWrapper), tabIndex: -1 }, this.renderButton())) : (this.renderButton());
50
+ };
15
51
  this.ariaExpanded = undefined;
16
52
  this.ariaHasPopup = undefined;
17
53
  this.ariaControls = undefined;
18
54
  this.ariaSelected = undefined;
19
55
  this.ariaPressed = undefined;
56
+ this.description = undefined;
20
57
  this.label = undefined;
21
58
  this.hideLabel = undefined;
22
59
  this.tabIndex = undefined;
23
60
  this.intent = undefined;
24
61
  this.disabled = undefined;
25
62
  this.type = undefined;
63
+ this.size = undefined;
26
64
  this.loading = undefined;
27
65
  this.badge = undefined;
28
66
  this.active = undefined;
@@ -45,56 +83,29 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
45
83
  if (this.disabled) {
46
84
  ev.stopImmediatePropagation();
47
85
  }
86
+ this.primaryBtn.focus();
48
87
  }
49
88
  delegateFocus(event) {
50
89
  if (!isEventFromElement(event, this.hostElement))
51
90
  return;
52
- this.hostElement.shadowRoot.querySelector('button').focus();
91
+ this.primaryBtn.focus();
53
92
  }
54
93
  //////// Method //////////
55
94
  ////////// OBSERVERS //////////
56
95
  ariaLabelObserver() {
57
96
  handleAriaLabel(this);
58
97
  }
59
- handleIcons() {
60
- // Only allow one icon in the button
61
- const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
62
- if (acc)
63
- element.remove();
64
- else
65
- acc = element;
66
- return acc;
67
- }, null);
68
- const hasIcon = !!icon;
69
- const hasLoc = !!this.hostElement.querySelector('q2-loc');
70
- const hasText = !!this.hostElement.textContent.trim();
71
- const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
72
- const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
73
- const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
74
- let iconPosition;
75
- if (hasIconOnly)
76
- iconPosition = 'only';
77
- else if (hasIconLeft)
78
- iconPosition = 'left';
79
- else if (hasIconRight)
80
- iconPosition = 'right';
81
- this.iconPosition = iconPosition;
82
- }
83
- render() {
84
- const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, disabled, type, tabindex } = this.buttonAttributes;
85
- const { iconPosition, loading, badge, label, hideLabel } = this;
86
- const renderLoadingSpinner = iconPosition || loading;
87
- const isLoadingSpinnerInline = !iconPosition || badge;
88
- return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, "aria-pressed": ariaPressed, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition ? `icon-${iconPosition}` : '' }, h("div", null, renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })), !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
89
- }
90
98
  get buttonAttributes() {
91
- var _a, _b, _c, _d;
99
+ var _a, _b, _c;
92
100
  return {
93
101
  ariaExpanded: this.ariaExpanded !== undefined ? `${((_a = this.ariaExpanded) === null || _a === void 0 ? void 0 : _a.toString()) === 'true'}` : undefined,
94
- ariaHasPopup: this.ariaHasPopup !== undefined ? `${((_b = this.ariaHasPopup) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
102
+ ariaHasPopup: this.ariaHasPopup !== undefined
103
+ ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`
104
+ : undefined,
95
105
  ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
96
- ariaSelected: this.ariaSelected !== undefined ? `${((_c = this.ariaSelected) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
97
- ariaPressed: this.ariaPressed !== undefined ? `${((_d = this.ariaPressed) === null || _d === void 0 ? void 0 : _d.toString()) === 'true'}` : undefined,
106
+ ariaSelected: this.ariaSelected !== undefined ? `${((_b = this.ariaSelected) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
107
+ ariaPressed: this.ariaPressed !== undefined ? `${((_c = this.ariaPressed) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
108
+ description: this.description !== undefined ? this.description : undefined,
98
109
  disabled: this.disabled || false,
99
110
  type: this.type || 'button',
100
111
  tabindex: this.tabIndex || undefined,
@@ -111,12 +122,14 @@ const Q2Btn = /*@__PURE__*/ proxyCustomElement(class Q2Btn extends HTMLElement {
111
122
  "ariaControls": [1, "aria-controls"],
112
123
  "ariaSelected": [1, "aria-selected"],
113
124
  "ariaPressed": [1, "aria-pressed"],
125
+ "description": [1],
114
126
  "label": [1537],
115
127
  "hideLabel": [1540, "hide-label"],
116
128
  "tabIndex": [2, "tab-index"],
117
129
  "intent": [1537],
118
130
  "disabled": [516],
119
131
  "type": [513],
132
+ "size": [513],
120
133
  "loading": [516],
121
134
  "badge": [516],
122
135
  "active": [516],
package/dist/components/index5.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"index5.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,87fAA87f;;MCQn8f,KAAK;;;;;IA+Dd,qBAAgB,GAAG;MACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB,CAAC;;;;;;;;;;;;;;;;;;;;;;EAlCF,iBAAiB;IACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,WAAW,CAAC,IAAI,CAAC,CAAC;GACrB;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAGD,OAAO,CAAC,EAAS;IACb,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,EAAE,CAAC,wBAAwB,EAAE,CAAC;KACjC;GACJ;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;GAC/D;;;EAOD,iBAAiB;IACb,eAAe,CAAC,IAAI,CAAC,CAAC;GACzB;EAMD,WAAW;;IAEP,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO;MAC/F,IAAI,GAAG;QAAE,OAAO,CAAC,MAAM,EAAE,CAAC;;QACrB,GAAG,GAAG,OAAO,CAAC;MACnB,OAAO,GAAG,CAAC;KACd,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;IACvB,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IACtD,MAAM,WAAW,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,iBAAiB,KAAK,IAAI,CAAC;IAClG,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,gBAAgB,KAAK,IAAI,CAAC;IAClG,MAAM,WAAW,GAAG,CAAC,WAAW,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC;IAE7D,IAAI,YAAY,CAAC;IACjB,IAAI,WAAW;MAAE,YAAY,GAAG,MAAM,CAAC;SAClC,IAAI,WAAW;MAAE,YAAY,GAAG,MAAM,CAAC;SACvC,IAAI,YAAY;MAAE,YAAY,GAAG,OAAO,CAAC;IAC9C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;GACpC;EAED,MAAM;IACF,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GACrF,IAAI,CAAC,gBAAgB,CAAC;IAC1B,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAChE,MAAM,oBAAoB,GAAG,YAAY,IAAI,OAAO,CAAC;IACrD,MAAM,sBAAsB,GAAG,CAAC,YAAY,IAAI,KAAK,CAAC;IAEtD,QACI,+BACmB,YAAY,mBACZ,YAAY,gBACf,SAAS,IAAI,GAAG,CAAC,KAAK,CAAC,mBACpB,YAAY,kBACb,WAAW,EACzB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,aACV,kBAAkB,EAC1B,KAAK,EAAE,YAAY,GAAG,QAAQ,YAAY,EAAE,GAAG,EAAE,IAEjD,eACK,oBAAoB,KACjB,kBACI,MAAM,EAAE,CAAC,OAAO,EAChB,SAAS,EAAE,sBAAsB,GAAG,QAAQ,GAAG,SAAS,GAC1D,CACL,EACA,CAAC,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC/E,CACD,EACX;GACL;EAED,IAAI,gBAAgB;;IAChB,OAAO;MACH,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACzG,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACzG,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS;MACrE,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACzG,WAAW,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACtG,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;MAChC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ;MAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS;KACvC,CAAC;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/q2-btn/styles.scss?tag=q2-btn&encapsulation=shadow","./src/components/q2-btn/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n}\n\n::slotted(q2-icon) {\n pointer-events: none;\n}\n\n:host {\n --comp-btn-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n --comp-btn-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);\n --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);\n --comp-btn-primary-box-shadow: #{var-list(var-prefixer(btn-primary-box-shadow), --comp-btn-fallback-box-shadow)};\n --comp-btn-primary-hover-box-shadow: #{var-list(\n var-prefixer(btn-primary-hover-box-shadow),\n --comp-btn-fallback-hover-box-shadow\n )};\n --comp-btn-secondary-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-btn-secondary-font-color: #{var-list(\n var-prefixer(btn-secondary-font-color),\n --t-button-default-font-color,\n #2e2e2e\n )};\n --comp-btn-secondary-box-shadow: #{var-list(var-prefixer(btn-secondary-box-shadow), --comp-btn-fallback-box-shadow)};\n --comp-btn-secondary-hover-box-shadow: #{var-list(\n var-prefixer(btn-secondary-hover-box-shadow),\n --comp-btn-fallback-hover-box-shadow\n )};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-neutral-background: #{var-list(--tct-btn-neutral-background, --tct-btn-neutral-bg, transparent)};\n --comp-btn-neutral-font-color: #{var-list(\n var-prefixer(btn-neutral-font-color),\n --t-button-default-font-color,\n #2e2e2e\n )};\n --comp-btn-neutral-box-shadow: #{var-list(var-prefixer(btn-neutral-box-shadow), --comp-btn-fallback-box-shadow)};\n --comp-btn-neutral-hover-box-shadow: #{var-list(\n var-prefixer(btn-neutral-hover-box-shadow),\n --comp-btn-neutral-fallback-hover-box-shadow\n )};\n}\n\nbutton {\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n display: inline-block;\n width: 100%;\n hyphens: auto;\n border: var(--tct-btn-border, 0);\n border-radius: var(--tct-btn-border-radius);\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n font-weight: 400;\n color: inherit;\n cursor: pointer;\n transition: var(--comp-btn-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n outline: 0;\n &:disabled {\n opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n\n // Sizes\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n\n :host([color]:not([size])) &,\n :host([intent]:not([size])) & {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n\n // Colors\n :host([color]) &,\n :host([intent]) & {\n border-style: solid;\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-btn-primary-border: #{var-list(var-prefixer(btn-primary-border-width), 0)\n var-list(var-prefixer(btn-primary-border-color), transparent)\n var-list(var-prefixer(btn-primary-border-style), solid)};\n border: var-list(--tct-btn-primary-border, --comp-btn-primary-border);\n background: var-list(--comp-btn-primary-background);\n color: var-list(--comp-btn-primary-font-color);\n border-radius: var-list(\n var-prefixer(btn-primary-border-radius),\n --tct-btn-border-radius,\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n box-shadow: var-list(--comp-btn-primary-box-shadow);\n font-weight: var-list(var-prefixer(btn-primary-font-weight), 600);\n text-transform: var-list(var-prefixer(btn-primary-text-transform), none);\n letter-spacing: var-list(var-prefixer(btn-primary-letter-spacing), normal);\n\n &:enabled:hover,\n &:enabled:focus,\n &:enabled:active {\n background: var-list(\n --tct-btn-primary-hover-background,\n var-prefixer(btn-primary-hover-bg),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n color: var-list(var-prefixer(btn-primary-hover-font-color), --tct-white, --app-white, #ffffff);\n border-color: var-list(\n var-prefixer(btn-primary-hover-border-color),\n var-prefixer(btn-primary-border-color),\n transparent\n );\n }\n\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var-list(--comp-btn-primary-hover-box-shadow);\n }\n\n &:focus {\n &,\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow);\n }\n }\n\n &:disabled {\n background: var-list(\n --tct-btn-primary-disabled-background,\n var-prefixer(btn-primary-disabled-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-primary-disabled-font-color), --comp-btn-primary-font-color);\n box-shadow: var-list(var-prefixer(btn-primary-disabled-box-shadow), --comp-btn-primary-box-shadow);\n }\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n --comp-btn-secondary-border: #{var-list(var-prefixer(btn-secondary-border-width), 0)\n var-list(var-prefixer(btn-secondary-border-color), transparent)\n var-list(var-prefixer(btn-secondary-border-style), solid)};\n border: var-list(--tct-btn-secondary-border, --comp-btn-secondary-border);\n background: var(--comp-btn-secondary-background);\n color: var-list(\n --comp-btn-secondary-font-color,\n var-prefixer(btn-secondary-font-color),\n --tct-white,\n --app-white,\n #ffffff\n );\n border-radius: var-list(\n var-prefixer(btn-secondary-border-radius),\n --tct-btn-border-radius,\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n box-shadow: var(--comp-btn-secondary-box-shadow);\n font-weight: var-list(var-prefixer(btn-secondary-font-weight), 600);\n text-transform: var-list(var-prefixer(btn-secondary-text-transform), none);\n letter-spacing: var-list(var-prefixer(btn-secondary-letter-spacing), normal);\n\n &:enabled:hover,\n &:enabled:focus,\n &:enabled:active {\n background: var-list(\n --tct-btn-secondary-hover-background,\n var-prefixer(btn-secondary-hover-bg),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n color: var-list(\n var-prefixer(btn-secondary-hover-font-color),\n --t-button-default-hover-font-color,\n --tct-white,\n --app-white,\n #ffffff\n );\n border-color: var-list(\n var-prefixer(btn-secondary-hover-border-color),\n var-prefixer(btn-secondary-border-color),\n transparent\n );\n }\n\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--comp-btn-secondary-hover-box-shadow);\n }\n\n &:focus {\n &,\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow);\n }\n }\n\n &:disabled {\n background: var-list(\n --tct-btn-secondary-disabled-background,\n var-prefixer(btn-secondary-disabled-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-secondary-disabled-font-color), --comp-btn-secondary-font-color);\n box-shadow: var-list(var-prefixer(btn-secondary-disabled-box-shadow), --comp-btn-secondary-box-shadow);\n }\n }\n\n :host([intent='neutral']) & {\n --comp-btn-neutral-border: #{var-list(var-prefixer(btn-neutral-border-width), 0)\n var-list(var-prefixer(btn-neutral-border-color), transparent)\n var-list(var-prefixer(btn-neutral-border-style), solid)};\n border: var-list(--tct-btn-neutral-border, --comp-btn-neutral-border);\n background: var-list(--comp-btn-neutral-background, transparent);\n color: var-list(\n --comp-btn-neutral-font-color,\n var-prefixer(btn-neutral-font-color),\n var-prefixer(gray-1),\n --tct-black,\n --app-black,\n #0d0d0d\n );\n border-radius: var-list(\n var-prefixer(btn-neutral-border-radius),\n --tct-btn-border-radius,\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n box-shadow: var(--comp-btn-neutral-box-shadow);\n font-weight: var-list(var-prefixer(btn-neutral-font-weight), 600);\n text-transform: var-list(var-prefixer(btn-neutral-text-transform), none);\n letter-spacing: var-list(var-prefixer(btn-neutral-letter-spacing), normal);\n\n &:enabled:hover,\n &:enabled:focus,\n &:enabled:active {\n background: var-list(--tct-btn-neutral-hover-background, var-prefixer(btn-neutral-hover-bg), transparent);\n color: var-list(var-prefixer(btn-neutral-hover-font-color), --tct-white, --app-white, #ffffff);\n border-color: var-list(\n var-prefixer(btn-neutral-hover-border-color),\n var-prefixer(btn-neutral-border-color),\n transparent\n );\n }\n\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--comp-btn-neutral-hover-box-shadow);\n }\n\n &:focus {\n &,\n &:hover:enabled,\n &:active:enabled {\n box-shadow: var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow);\n }\n }\n\n &:disabled {\n background: var-list(\n --tct-btn-neutral-disabled-background,\n var-prefixer(btn-neutral-disabled-bg),\n --comp-btn-neutral-background\n );\n color: var-list(var-prefixer(btn-neutral-disabled-font-color), --comp-btn-neutral-font-color);\n box-shadow: var-list(\n var-prefixer(btn-neutral-disabled-box-shadow),\n --tct-btn-neutral-disabled-box-shadow,\n --comp-btn-neutral-box-shadow\n );\n }\n }\n\n // Icons\n :host &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background-color: var-list(\n --tct-btn-icon-hover-background,\n var-prefixer(btn-icon-hover-bg),\n var-prefixer(gray-13),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n }\n\n :host(:not([intent])[active]) &.icon-only {\n background-color: var-list(\n --tct-btn-icon-active-background,\n var-prefixer(btn-icon-active-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n\n :host(:not([intent])) &.icon-only:hover *,\n :host(:not([intent])) &.icon-only:focus *,\n :host(:not([intent])[active]) &.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // Badges\n :host([badge]) & {\n padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n border-radius: var-list(\n var-prefixer(btn-badge-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n ::slotted(q2-icon) {\n --tct-icon-size: 1em;\n }\n }\n\n :host([badge]:hover) &:enabled {\n background-color: var-list(\n --tct-btn-badge-hover-background,\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n }\n\n :host(.selected[badge]) &,\n :host([active][badge]) & {\n background-color: var-list(\n --tct-btn-badge-active-background,\n var-prefixer(btn-badge-active-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n }\n}\n\n// Allow for custom icon colors based on intent\n:host([color='primary']),\n:host([intent='workflow-primary']) {\n & ::slotted(q2-icon) {\n color: var-list(var-prefixer(btn-primary-icon-color), --comp-btn-primary-font-color, red);\n }\n}\n\n:host([color='secondary']),\n:host([intent='workflow-secondary']) {\n & ::slotted(q2-icon) {\n color: var-list(var-prefixer(btn-secondary-icon-color), --comp-btn-secondary-font-color, red);\n }\n}\n\n:host([intent='neutral']) {\n & ::slotted(q2-icon) {\n color: var-list(var-prefixer(btn-neutral-icon-color), --comp-btn-neutral-font-color, red);\n }\n}\n\ndiv {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\nq2-loading {\n --tct-loading-primary-color: currentColor;\n --tct-loading-secondary-color: currentColor;\n --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]) button {\n pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n display: block;\n width: 100%;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-btn',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n @Prop() ariaExpanded: string;\n @Prop() ariaHasPopup: string;\n @Prop() ariaControls: string;\n @Prop() ariaSelected: string;\n @Prop() ariaPressed: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop() tabIndex: number;\n @Prop({ reflect: true, mutable: true }) intent: 'workflow-primary' | 'workflow-secondary' | 'neutral';\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) loading: boolean;\n @Prop({ reflect: true }) badge: boolean;\n @Prop({ reflect: true }) active: boolean;\n @Prop({ reflect: true }) block: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n /** @deprecated */\n @Prop({ reflect: true }) fab: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @State() iconPosition: 'left' | 'right' | 'only';\n\n @Element() hostElement: HTMLElement;\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n @Listen('click', { capture: true })\n disable(ev: Event) {\n if (this.disabled) {\n ev.stopImmediatePropagation();\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('button').focus();\n }\n\n //////// Method //////////\n\n ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n handleIcons() {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n }\n\n render() {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition || loading;\n const isLoadingSpinnerInline = !iconPosition || badge;\n\n return (\n <button\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={iconPosition ? `icon-${iconPosition}` : ''}\n >\n <div>\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n </div>\n </button>\n );\n }\n\n get buttonAttributes() {\n return {\n ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup?.toString() === 'true'}` : undefined,\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n disabled: this.disabled || false,\n type: this.type || 'button',\n tabindex: this.tabIndex || undefined,\n };\n }\n}\n"],"version":3}
1
+ {"file":"index5.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,gy2EAAgy2E;;MCQry2E,KAAK;;;;;IA2Ed,qBAAgB,GAAG;MACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB,CAAC;IAEF,gBAAW,GAAG;;MAEV,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO;QAC/F,IAAI,GAAG;UAAE,OAAO,CAAC,MAAM,EAAE,CAAC;;UACrB,GAAG,GAAG,OAAO,CAAC;QACnB,OAAO,GAAG,CAAC;OACd,EAAE,IAAI,CAAC,CAAC;MAET,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;MACvB,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAC1D,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;MACtD,MAAM,WAAW,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,iBAAiB,KAAK,IAAI,CAAC;MAClG,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,gBAAgB,KAAK,IAAI,CAAC;MAClG,MAAM,WAAW,GAAG,CAAC,WAAW,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC;MAE7D,IAAI,YAAY,CAAC;MACjB,IAAI,WAAW;QAAE,YAAY,GAAG,MAAM,CAAC;WAClC,IAAI,WAAW;QAAE,YAAY,GAAG,MAAM,CAAC;WACvC,IAAI,YAAY;QAAE,YAAY,GAAG,OAAO,CAAC;MAC9C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KACpC,CAAC;IAEF,iBAAY,GAAG;MACX,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAClG,IAAI,CAAC,gBAAgB,CAAC;MAC1B,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;MAChE,MAAM,oBAAoB,GAAG,YAAY,IAAI,OAAO,CAAC;MACrD,MAAM,sBAAsB,GAAG,CAAC,YAAY,IAAI,KAAK,CAAC;MACtD,QACI,EAAC,QAAQ,QACL,cACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,UAAU,CAAC,mBACrC,YAAY,mBACZ,YAAY,gBACf,SAAS,IAAI,GAAG,CAAC,KAAK,CAAC,mBACpB,YAAY,kBACb,WAAW,EACzB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,aACV,kBAAkB,EAC1B,KAAK,EAAE,YAAY,GAAG,QAAQ,YAAY,EAAE,GAAG,EAAE,sBAC/B,CAAC,CAAC,WAAW,GAAG,oBAAoB,GAAG,SAAS,IAElE,eACK,oBAAoB,KACjB,kBACI,MAAM,EAAE,CAAC,OAAO,EAChB,SAAS,EAAE,sBAAsB,GAAG,QAAQ,GAAG,SAAS,GAC1D,CACL,EACA,CAAC,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC/E,CACD,EACR,CAAC,CAAC,WAAW,KACV,WACI,EAAE,EAAC,oBAAoB,iBACX,MAAM,EAClB,KAAK,EAAC,IAAI,IAET,WAAW,CACV,CACT,CACM,EACb;KACL,CAAC;IAEF,WAAM,GAAG;MACL,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO;;MAExB,WACI,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,iBAAiB,CAAC,EAClE,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,YAAY,EAAE,CAClB,KAEN,IAAI,CAAC,YAAY,EAAE,CACtB,CAAC;KACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;EArHF,iBAAiB;IACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,WAAW,CAAC,IAAI,CAAC,CAAC;GACrB;EAED,gBAAgB;IACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAGD,OAAO,CAAC,EAAS;IACb,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,EAAE,CAAC,wBAAwB,EAAE,CAAC;KACjC;IACD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;GAC3B;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;GAC3B;;;EAOD,iBAAiB;IACb,eAAe,CAAC,IAAI,CAAC,CAAC;GACzB;EAwFD,IAAI,gBAAgB;;IAChB,OAAO;MACH,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACzG,YAAY,EACR,IAAI,CAAC,YAAY,KAAK,SAAS;UACzB,GAAG,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;UACjE,SAAS;MACnB,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS;MACrE,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACzG,WAAW,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,EAAE,MAAK,MAAM,EAAE,GAAG,SAAS;MACtG,WAAW,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS;MAC1E,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;MAChC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ;MAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS;KACvC,CAAC;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/q2-btn/styles.scss?tag=q2-btn&encapsulation=shadow","./src/components/q2-btn/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './mixins';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n}\n\n::slotted(q2-icon) {\n pointer-events: none;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 3px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-background-alternative: #ebf8ff;\n .btn-height-wrapper {\n height: var(--comp-btn-min-height, 44px);\n cursor: pointer;\n &:active {\n box-shadow: none;\n }\n }\n}\n\nbutton {\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n display: inline-block;\n width: 100%;\n hyphens: auto;\n border: var(--tct-btn-border);\n border-radius: var(--tct-btn-border-radius);\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n font-weight: 400;\n color: inherit;\n cursor: pointer;\n transition: var(--comp-btn-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n outline: 0;\n &:disabled {\n opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n\n // Sizes\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n :host([color]:not([size])) &,\n :host([intent]:not([size])) & {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n\n :host([size='small']) & {\n padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n font-size: var-list(var-prefixer(btn-font-size-small), 12px);\n }\n :host([size='medium']) & {\n padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n font-size: var-list(var-prefixer(btn-font-size-small), 16px);\n }\n :host([size='large']) & {\n padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n font-size: var-list(var-prefixer(btn-font-size-small), 32px);\n }\n\n // Colors\n :host([color]) &,\n :host([intent]) & {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-background: #{var-list(--tct-btn-primary-background, --tct-btn-primary-bg)};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for active\n --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n @include btn-ring(primary, hover, --comp-background, --comp-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-color);\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n --comp-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-hover-background: #{var-list(--tct-btn-secondary-hover-background, --tct-btn-secondary-hover-bg)};\n --comp-color: var(--tct-btn-secondary-font-color);\n --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(secondary, hover, --comp-color, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(secondary);\n @include btn-icon-color(secondary, --comp-color);\n }\n\n :host([intent='workflow-destroy']) & {\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #c30000)};\n --comp-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(destroy, hover, --comp-background, --comp-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-color);\n }\n\n :host([intent='workflow-escape']) & {\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-color: #{var-list(--tct-btn-escape-font-color, --tct-btn-primary-background, --tct-btn-primary-bg)};\n --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for hover/active/focus\n --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n @include btn-ring(escape, hover, --comp-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(escape);\n @include btn-icon-color(escape, --comp-color);\n }\n\n :host([intent='neutral']) & {\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-color: #{var-list(--tct-btn-neutral-font-color, --tct-btn-primary-background, --tct-btn-primary-bg)};\n --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n --comp-border-width: 1px;\n --comp-border-style: solid;\n --comp-border-color: var(--comp-color);\n @include btn-ring(neutral, hover, --comp-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(neutral);\n @include btn-icon-color(neutral, --comp-color);\n }\n\n :host([intent='neutral-text']) & {\n --comp-background: #{var-list(\n --tct-btn-neutral-text-background,\n --tct-btn-neutral-text-bg,\n --app-white,\n #ffffff\n )};\n --comp-color: #{var-list(--tct-btn-neutral-text-font-color, --tct-btn-primary-background, --tct-btn-primary-bg)};\n --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n --comp-hover-text-decoration: underline;\n // different background for focus\n --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n @include btn-ring(neutral-text, hover, --comp-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(neutral-text);\n @include btn-icon-color(neutral-text, --comp-color);\n }\n\n // different background for loading\n :host([color='primary'][loading]) &,\n :host([intent='workflow-primary'][loading]) & {\n --comp-background: var(--tct-btn-primary-loading-background, #0063a0);\n }\n\n :host([intent='workflow-escape'][loading]) & {\n --comp-background: #{var-list(--tct-btn-escape-loading-background, --comp-background-alternative)};\n }\n\n // Icons\n :host &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background-color: var-list(\n --tct-btn-icon-hover-background,\n var-prefixer(btn-icon-hover-bg),\n var-prefixer(gray-13),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n }\n\n :host(:not([intent])[active]) &.icon-only {\n background-color: var-list(\n --tct-btn-icon-active-background,\n var-prefixer(btn-icon-active-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n\n :host(:not([intent])) &.icon-only:hover *,\n :host(:not([intent])) &.icon-only:focus *,\n :host(:not([intent])[active]) &.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // Badges\n :host([badge]) & {\n padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n border-radius: var-list(\n var-prefixer(btn-badge-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n ::slotted(q2-icon) {\n --tct-icon-size: 1em;\n }\n }\n\n :host([badge]:hover) &:enabled {\n background-color: var-list(\n --tct-btn-badge-hover-background,\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n }\n\n :host(.selected[badge]) &,\n :host([active][badge]) & {\n background-color: var-list(\n --tct-btn-badge-active-background,\n var-prefixer(btn-badge-active-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n }\n}\n\ndiv {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\nq2-loading {\n --tct-loading-primary-color: currentColor;\n --tct-loading-secondary-color: currentColor;\n --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]) button {\n pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n display: block;\n width: 100%;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-btn',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n @Prop() ariaExpanded: string;\n @Prop() ariaHasPopup: string;\n @Prop() ariaControls: string;\n @Prop() ariaSelected: string;\n @Prop() ariaPressed: string;\n @Prop() description: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop() tabIndex: number;\n @Prop({ reflect: true, mutable: true }) intent:\n | 'workflow-primary'\n | 'workflow-secondary'\n | 'workflow-destroy'\n | 'workflow-escape'\n | 'neutral'\n | 'neutral-text';\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) size: string;\n @Prop({ reflect: true }) loading: boolean;\n @Prop({ reflect: true }) badge: boolean;\n @Prop({ reflect: true }) active: boolean;\n @Prop({ reflect: true }) block: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n /** @deprecated */\n @Prop({ reflect: true }) fab: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @State() iconPosition: 'left' | 'right' | 'only';\n\n @Element() hostElement: HTMLElement;\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n @Listen('click', { capture: true })\n disable(ev: Event) {\n if (this.disabled) {\n ev.stopImmediatePropagation();\n }\n this.primaryBtn.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n //////// Method //////////\n\n ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n renderButton = () => {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition || loading;\n const isLoadingSpinnerInline = !iconPosition || badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={iconPosition ? `icon-${iconPosition}` : ''}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n >\n <div>\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n </div>\n </button>\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n };\n\n render = () => {\n return this.size === 'small' ? (\n // wrap only for small sized\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={-1}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n };\n\n get buttonAttributes() {\n return {\n ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n ariaHasPopup:\n this.ariaHasPopup !== undefined\n ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`\n : undefined,\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled || false,\n type: this.type || 'button',\n tabindex: this.tabIndex || undefined,\n };\n }\n}\n"],"version":3}
package/dist/components/index6.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { d as createGuid, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement, l as loc } from './index16.js';
2
+ import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index16.js';
3
3
  import { d as defineCustomElement$1 } from './index8.js';
4
4
 
5
5
  const stylesCss = "*{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 #33b4ff #06C)}: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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:\"svg\";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{color:var(--tct-checkbox-label-color);cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]) .checkbox-icon{stroke:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
package/dist/components/index8.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
2
- import { d as createGuid } from './index16.js';
2
+ import { c as createGuid } from './index16.js';
3
3
 
4
4
  const icons = {
5
5
  a11y: {